/* Cosmos Eventos: panel del organizador, entrada, puerta y paginas sencillas.
   Pensado primero para celular: el organizador vive en el suyo. */
:root {
  --fondo: #f6f3f5;
  --panel: #ffffff;
  --borde: #e4dbe1;
  --texto: #241a22;
  --suave: #6f6170;
  --primario: #6b2c5f;
  --primario-osc: #4e1f45;
  --primario-claro: #f4e8f1;
  --oro: #b8893a;
  --ok: #1f8a4c;
  --ok-claro: #e4f4ea;
  --alerta: #b86200;
  --alerta-claro: #fff1de;
  --peligro: #c0392b;
  --peligro-claro: #fdecea;
  --gris-claro: #efeaee;
  --sombra: 0 1px 2px rgba(40,20,36,.07), 0 4px 14px rgba(40,20,36,.06);
  --r: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo); color: var(--texto);
  font-size: 16px; line-height: 1.45;
}
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .6rem; }
a { color: var(--primario); }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Estructura ---------- */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1rem; background: var(--primario); color: #fff; box-shadow: var(--sombra);
}
.barra h1 { font-size: 1.05rem; margin: 0; font-weight: 700; }
.barra .sub { font-size: .8rem; opacity: .85; }
.barra button, .barra a.btn-barra {
  background: rgba(255,255,255,.16); border: 0; color: #fff; text-decoration: none;
  padding: .5rem .8rem; border-radius: 10px; cursor: pointer; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center;
}
.contenido { padding: 1rem; max-width: 1150px; margin: 0 auto; }

.pestanas {
  display: flex; gap: .25rem; overflow-x: auto; padding: .4rem .6rem 0;
  background: var(--primario-osc); scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  background: transparent; border: 0; color: #ecd6e6; cursor: pointer;
  padding: .6rem 1rem; border-radius: 12px 12px 0 0; font-weight: 700; white-space: nowrap; font-size: .96rem;
}
.pestanas button.activa { background: var(--fondo); color: var(--texto); }

/* Los dos grupos de un evento: invitacion / organizacion */
.grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--gris-claro); border-radius: 14px; padding: 4px; margin: 0 0 .7rem; max-width: 560px; }
.grupos button { border: 0; background: transparent; border-radius: 11px; padding: .6rem .5rem; font-weight: 800; cursor: pointer; color: var(--suave); font-size: .92rem; }
.grupos button.activo { background: var(--panel); color: var(--texto); box-shadow: 0 1px 4px rgba(40,20,36,.12); }

/* Pestañas dentro de un evento */
.sub-pestanas { display: flex; gap: .35rem; overflow-x: auto; margin: 0 0 1rem; padding-bottom: .2rem; scrollbar-width: none; }
.sub-pestanas::-webkit-scrollbar { display: none; }
.sub-pestanas button {
  border: 1px solid var(--borde); background: var(--panel); border-radius: 999px; padding: .45rem .95rem;
  font-weight: 700; cursor: pointer; white-space: nowrap; color: var(--suave); font-size: .92rem;
}
.sub-pestanas button.activa { background: var(--primario); border-color: var(--primario); color: #fff; }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r);
  padding: 1rem; box-shadow: var(--sombra); margin-bottom: 1rem;
}
.fila { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.crece { flex: 1; }
.suave { color: var(--suave); font-size: .9rem; }
.chico { font-size: .85rem; }
.centro { text-align: center; }
.der { text-align: right; }
.oculto { display: none !important; }
.rejilla { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla > .tarjeta { margin-bottom: 0; }
.rejilla:not(:last-child) { margin-bottom: 1rem; }
.dos { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.tres { display: grid; gap: .6rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .dos, .tres { grid-template-columns: 1fr; } }
.cuatro { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; }
@media (min-width: 760px) { .cuatro { grid-template-columns: repeat(4, 1fr); } }
.separador { border: 0; border-top: 1px solid var(--borde); margin: 1rem 0; }

/* ---------- Cifras ---------- */
.cifra { display: flex; flex-direction: column; gap: .1rem; margin: 0; }
.cifra .num { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cifra .et { color: var(--suave); font-size: .85rem; font-weight: 600; }
.boton-tarjeta { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.boton-tarjeta:hover { border-color: var(--primario); }
.cifra.verde .num { color: var(--ok); }
.cifra.rojo .num { color: var(--peligro); }
.cifra.naranja .num { color: var(--alerta); }

/* Barra de confirmaciones: si / no / pendiente */
.barra-conf { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--gris-claro); }
.barra-conf span { display: block; height: 100%; }
.barra-conf .si { background: var(--ok); }
.barra-conf .no { background: #d98c85; }
.leyenda { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .82rem; color: var(--suave); margin-top: .4rem; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; }

/* ---------- Tarjetas de evento ---------- */
.evento-tarjeta { display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.evento-tarjeta:hover { border-color: var(--primario); }
.evento-portada { height: 110px; background: linear-gradient(135deg, var(--c1, #6b2c5f), var(--c2, #c9a96e)); position: relative; background-size: cover; background-position: center; }
.evento-portada .pill { position: absolute; top: .6rem; left: .6rem; }
.evento-portada .dias { position: absolute; bottom: .5rem; right: .7rem; color: #fff; font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.evento-cuerpo { padding: .85rem 1rem 1rem; }
.evento-cuerpo h3 { margin: 0 0 .15rem; font-size: 1.15rem; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto);
  padding: .65rem 1.05rem; border-radius: 12px; cursor: pointer; font-weight: 700;
  min-height: 46px; text-decoration: none; transition: filter .12s, transform .06s;
}
.btn:active { transform: scale(.985); }
.btn:hover { filter: brightness(.97); }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.whatsapp { background: #1fa855; border-color: #1fa855; color: #fff; }
.btn.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; }
.btn.suave-peligro { color: var(--peligro); }
.btn.grande { font-size: 1.08rem; padding: .85rem 1.3rem; min-height: 56px; }
.btn.bloque { width: 100%; }
.btn.chico { min-height: 36px; padding: .3rem .7rem; font-size: .88rem; border-radius: 10px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Formularios ---------- */
input[type=text], input[type=number], input[type=password], input[type=date], input[type=time],
input[type=tel], input[type=email], input[type=search], input[type=url], select, textarea {
  width: 100%; padding: .6rem .8rem; border: 1px solid var(--borde);
  border-radius: 12px; background: #fff; min-height: 46px;
}
input[type=color] { width: 56px; height: 46px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; padding: 4px; cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(107,44,95,.2); border-color: var(--primario); }
textarea { min-height: 90px; resize: vertical; }
label.campo, div.campo { display: block; margin-bottom: .75rem; }
label.campo > span, div.campo > span { display: block; font-size: .85rem; color: var(--suave); margin-bottom: .25rem; font-weight: 700; }
label.check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .7rem; cursor: pointer; }
label.check input { width: 22px; height: 22px; margin-top: .05rem; flex: none; accent-color: var(--primario); }
fieldset { border: 1px solid var(--borde); border-radius: var(--r); padding: .8rem 1rem .2rem; margin: 0 0 1rem; }
legend { font-weight: 800; padding: 0 .4rem; }
details.seccion { border: 1px solid var(--borde); border-radius: var(--r); background: var(--panel); margin-bottom: .7rem; }
details.seccion > summary { cursor: pointer; padding: .85rem 1rem; font-weight: 800; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.seccion > summary::after { content: '▾'; color: var(--suave); transition: transform .15s; }
details.seccion[open] > summary::after { transform: rotate(180deg); }
details.seccion > .dentro { padding: 0 1rem .6rem; }

/* ---------- Listas ---------- */
.lista { display: flex; flex-direction: column; }
.item {
  display: flex; gap: .8rem; align-items: center; padding: .75rem .2rem;
  border-bottom: 1px solid var(--borde); background: none; border-left: 0; border-right: 0; border-top: 0;
  text-align: left; width: 100%; font: inherit; color: inherit;
}
button.item { cursor: pointer; }
.item:last-child { border-bottom: 0; }
.item .principal { flex: 1; min-width: 0; }
.item .titulo { font-weight: 700; }
.item .detalle { color: var(--suave); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; }
.vacio { color: var(--suave); text-align: center; padding: 1.5rem .5rem; }

.pill {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  border-radius: 999px; padding: .15rem .6rem; background: var(--gris-claro); color: var(--suave); white-space: nowrap;
}
.pill.verde { background: var(--ok-claro); color: var(--ok); }
.pill.naranja { background: var(--alerta-claro); color: var(--alerta); }
.pill.rojo { background: var(--peligro-claro); color: var(--peligro); }
.pill.morado { background: var(--primario-claro); color: var(--primario); }
.pill.blanco { background: rgba(255,255,255,.92); color: var(--texto); }

.chips { display: flex; gap: .35rem; flex-wrap: wrap; margin: .5rem 0; }
.chips button {
  border: 1px solid var(--borde); background: #fff; border-radius: 999px; padding: .3rem .75rem; font-size: .85rem;
  font-weight: 700; cursor: pointer; color: var(--suave);
}
.chips button.activa { background: var(--texto); border-color: var(--texto); color: #fff; }

/* ---------- Ventana ---------- */
.fondo-modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(30,12,26,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 700px) { .fondo-modal { align-items: center; padding: 1rem; } }
.modal {
  background: var(--panel); width: 100%; max-width: 620px; max-height: 92dvh; overflow: auto;
  border-radius: 18px 18px 0 0; padding: 1.1rem 1.1rem 1.4rem;
}
.modal.ancho { max-width: 900px; }
@media (min-width: 700px) { .modal { border-radius: 18px; } }
.modal .cabeza { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.modal .cabeza h2 { margin: 0; }
.cerrar { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--suave); padding: .2rem .5rem; }

/* ---------- Avisos flotantes ---------- */
#avisos {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: .5rem; width: min(94vw, 460px);
}
.toast {
  background: var(--texto); color: #fff; padding: .85rem 1rem; border-radius: 12px; box-shadow: var(--sombra);
  font-weight: 600; animation: sube .2s ease-out;
}
.toast.ok { background: var(--ok); }
.toast.error { background: var(--peligro); }
@keyframes sube { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.franja { padding: .7rem 1rem; border-radius: 12px; margin-bottom: 1rem; font-weight: 600; }
.franja.alerta { background: var(--alerta-claro); color: var(--alerta); }
.franja.peligro { background: var(--peligro-claro); color: var(--peligro); }
.franja.info { background: var(--primario-claro); color: var(--primario-osc); }

/* ---------- Marca Cosmos ---------- */
.marca-cosmos { color: var(--suave); font-size: .8rem; padding: 1.2rem .5rem; text-align: center; }
.marca-cosmos a { color: var(--suave); font-weight: 700; }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th, .tabla td { padding: .5rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { font-size: .76rem; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.desliza { overflow-x: auto; }

/* ---------- Diseño de la invitacion ---------- */
.diseno { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 980px) { .diseno { grid-template-columns: minmax(0, 1fr) 390px; align-items: start; } }
.telefono {
  position: sticky; top: 5.5rem; border: 10px solid #1d1520; border-radius: 34px; overflow: hidden;
  height: min(760px, 80vh); background: #fff; box-shadow: 0 10px 40px rgba(40,20,36,.25);
}
.telefono iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 979px) { .telefono { display: none; } }
.plantillas { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.plantilla-op {
  border: 2px solid var(--borde); border-radius: 12px; padding: .5rem; cursor: pointer; background: #fff; text-align: left; font: inherit;
}
.plantilla-op.activa { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(107,44,95,.15); }
.plantilla-op .muestra { height: 54px; border-radius: 8px; margin-bottom: .4rem; display: flex; align-items: center; justify-content: center; color: #fff; font-family: Georgia, serif; font-size: 1.05rem; }
.plantilla-op b { display: block; font-size: .9rem; }
.plantilla-op small { color: var(--suave); font-size: .75rem; line-height: 1.2; display: block; }
.miniaturas { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.miniaturas figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--gris-claro); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniaturas figure.apagada img { opacity: .3; }
.miniaturas .acciones { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: .25rem; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.miniaturas .acciones button { background: rgba(255,255,255,.9); border: 0; border-radius: 8px; font-size: .75rem; padding: .2rem .4rem; cursor: pointer; font-weight: 700; }
.miniaturas figcaption { position: absolute; top: .25rem; left: .3rem; right: .3rem; color: #fff; font-size: .7rem; text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portada-previa { height: 150px; border-radius: 12px; background: var(--gris-claro) center/cover no-repeat; margin-bottom: .6rem; }

/* ---------- Envio a mano ---------- */
.envio-actual { text-align: center; padding: 1.2rem 1rem; }
.envio-actual .nombre { font-size: 1.35rem; font-weight: 800; }
.mensaje-previo { white-space: pre-wrap; background: #e7f9e9; border-radius: 12px 12px 12px 2px; padding: .8rem 1rem; text-align: left; font-size: .93rem; margin: .8rem 0; border: 1px solid #c8ebcd; }

/* ---------- Mesas ---------- */
.mesas { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mesa { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--r); padding: .8rem; }
.mesa.llena { border-color: var(--ok); }
.mesa.pasada { border-color: var(--peligro); }
.mesa ul { list-style: none; padding: 0; margin: .4rem 0 0; font-size: .9rem; }
.mesa li { display: flex; justify-content: space-between; gap: .3rem; padding: .2rem 0; border-bottom: 1px dashed var(--borde); }
.mesa li:last-child { border-bottom: 0; }
.mesa li button { border: 0; background: none; color: var(--suave); cursor: pointer; font-size: .85rem; }

/* ---------- Planeacion ---------- */
.tarea { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .2rem; border-bottom: 1px solid var(--borde); }
.tarea:last-child { border-bottom: 0; }
.tarea input[type=checkbox] { width: 22px; height: 22px; margin-top: .1rem; accent-color: var(--ok); flex: none; cursor: pointer; }
.tarea .principal { flex: 1; min-width: 0; cursor: pointer; }
.tarea.hecha .titulo { text-decoration: line-through; color: var(--suave); }
.tarea .detalle { color: var(--suave); font-size: .84rem; }
.atrasada { color: var(--peligro); font-weight: 700; }
.grupo-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); font-weight: 800; margin: 1rem 0 .2rem; }
.grupo-titulo:first-child { margin-top: 0; }
.crono { display: grid; grid-template-columns: 70px 1fr; gap: 0 .8rem; }
.crono .h { font-weight: 800; font-variant-numeric: tabular-nums; padding: .6rem 0; color: var(--primario); border-right: 2px solid var(--primario-claro); }
.crono .a { padding: .6rem 0; border-bottom: 1px solid var(--borde); cursor: pointer; }
.crono .a.prov { cursor: default; color: var(--suave); }
.proveedor { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .2rem; border-bottom: 1px solid var(--borde); cursor: pointer; }
.proveedor:last-child { border-bottom: 0; }
.proveedor .icono-cat { width: 42px; height: 42px; border-radius: 12px; background: var(--primario-claro); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.proveedor .principal { flex: 1; min-width: 0; }
.proveedor .der { text-align: right; white-space: nowrap; }
.estrellas { color: var(--oro); letter-spacing: .05em; }
.pago { display: flex; gap: .6rem; align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--borde); font-size: .93rem; }
.pago:last-child { border-bottom: 0; }
.faltan { display: flex; gap: .35rem; flex-wrap: wrap; }
.faltan button { border: 1px dashed var(--primario); color: var(--primario); background: #fff; border-radius: 999px; padding: .3rem .75rem; font-weight: 700; font-size: .85rem; cursor: pointer; }
.medidor { height: 12px; background: var(--gris-claro); border-radius: 999px; overflow: hidden; position: relative; }
.medidor span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
.medidor .confirmado { background: color-mix(in srgb, var(--primario) 45%, #fff); }
.medidor .pagado { background: var(--ok); }
.medidor.pasado .confirmado { background: var(--peligro); }
.ficha-q small { display: block; margin-top: .25rem; }

/* ---------- Cotizaciones: una partida por fila ---------- */
.partida { display: grid; grid-template-columns: minmax(0, 2.6fr) 70px 115px 115px 110px auto; gap: .5rem; align-items: end;
  padding: .7rem 0; border-bottom: 1px solid var(--borde); }
.partida:last-of-type { border-bottom: 0; }
.partida .p-num span { display: block; font-size: .72rem; color: var(--suave); font-weight: 700; margin-bottom: .15rem; }
.partida .p-num input { min-height: 40px; padding: .4rem .5rem; text-align: right; }
.partida .p-desc input { min-height: 40px; }
.partida .p-tot { text-align: right; padding-bottom: .5rem; }
.partida .p-tot small { display: block; font-size: .75rem; }
@media (max-width: 760px) {
  .partida { grid-template-columns: 70px 1fr 1fr auto; }
  .partida .p-desc { grid-column: 1 / -1; }
  .partida .p-tot { grid-column: 1 / -2; text-align: left; padding: 0; }
}

.qr-caja { display: inline-block; background: #fff; padding: .5rem; border-radius: 12px; border: 1px solid var(--borde); }
.qr-caja svg { display: block; width: 180px; height: 180px; }
.copiable { display: flex; gap: .4rem; }
.copiable input { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }