/* ==========================================================================
   QEventos · sistema de diseño "Medianoche y champagne"
   Marfil, azul noche y dorado. Serif clásica (Fraunces) para títulos y
   cifras; Inter para el texto. Todo servido desde el propio sitio: el POS
   tiene que verse igual sin internet.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-italica.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #F6F2EA;
  --bg-2: #EFE9DE;
  --superficie: #FFFDF8;
  --superficie-2: #F3EEE4;
  --superficie-3: #E9E2D5;
  --tinta: #121A2B;
  --tinta-suave: #585E6E;
  --tinta-tenue: #8B8E98;
  --linea: #E4DCCD;
  --linea-fuerte: #CFC3AE;

  --marca: #16223B;
  --marca-fuerte: #0C1528;
  --marca-suave: #E6E9F0;
  --marca-tinta: #F8F3E8;

  --oro: #B08D57;
  --oro-texto: #85652F;
  --oro-claro: #E2C995;
  --oro-suave: #F3EAD8;
  --oro-degrade: linear-gradient(135deg, #E9D3A8 0%, #C9A56C 55%, #B08D57 100%);
  --acento: var(--oro);
  --acento-suave: var(--oro-suave);

  --bien: #2E6A4C;
  --bien-suave: #E4EFE7;
  --mal: #9E2F2F;
  --mal-suave: #F6E4E1;
  --aviso: #87621F;
  --aviso-suave: #F6EDD9;

  /* Rubros: validados para distinguirse entre sí (también con daltonismo), en este orden y en cualquier par. */
  --cat-entrada: #5740A1;
  --cat-bebida: #2F91BD;
  --cat-comida: #C57A4F;
  --cat-golosina: #A33460;
  --cat-otro: #878D94;
  /* La edición anterior, al lado de esta vez (oro): validado contra el oro, también con daltonismo. */
  --serie-anterior: #5B6170;
  --precio: #16223B;

  --radio: 12px;
  --radio-chico: 8px;
  --radio-grande: 18px;
  --sombra: 0 1px 0 rgba(18, 26, 43, .03), 0 12px 32px -20px rgba(18, 26, 43, .28);
  --sombra-alta: 0 30px 80px -30px rgba(10, 16, 32, .55), 0 2px 8px rgba(10, 16, 32, .08);
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente: var(--sans);
  --ancho: 1140px;
  --lateral: 16px;
  color-scheme: light;
}

/* Tema noche: el héroe de la landing lo usa siempre; el POS, si en ese equipo
   se eligió "pantalla oscura" (menos brillo en un salón a oscuras); el resto
   lo toma del sistema. */
.tema-oscuro,
:root[data-tema="oscuro"] {
  --bg: #0A1020;
  --bg-2: #0E1628;
  --superficie: #111A2E;
  --superficie-2: #18233B;
  --superficie-3: #22304D;
  --tinta: #F2ECE0;
  --tinta-suave: #AEB3C1;
  --tinta-tenue: #7F8699;
  --linea: #223050;
  --linea-fuerte: #33446A;
  --marca: #D6B87F;
  --marca-fuerte: #E4C993;
  --marca-suave: #2C2F37;
  --marca-tinta: #14110A;
  --oro: #D6B87F;
  --oro-texto: #DCC08C;
  --oro-claro: #E9D3A8;
  --oro-suave: #2C2F37;
  --bien: #6BCB97;
  --bien-suave: #15302A;
  --mal: #F08A7E;
  --mal-suave: #3A1C22;
  --aviso: #E3BD6E;
  --aviso-suave: #33291A;
  --cat-entrada: #6959AE;
  --cat-bebida: #3697C3;
  --cat-comida: #DC7533;
  --cat-golosina: #BE4D77;
  --cat-otro: #90969D;
  --serie-anterior: #7A8296;
  --precio: #E9D3A8;
  --sombra: 0 1px 0 rgba(0, 0, 0, .2), 0 14px 34px -20px rgba(0, 0, 0, .7);
  --sombra-alta: 0 30px 80px -24px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #0A1020;
    --bg-2: #0E1628;
    --superficie: #111A2E;
    --superficie-2: #18233B;
    --superficie-3: #22304D;
    --tinta: #F2ECE0;
    --tinta-suave: #AEB3C1;
    --tinta-tenue: #7F8699;
    --linea: #223050;
    --linea-fuerte: #33446A;
    --marca: #D6B87F;
    --marca-fuerte: #E4C993;
    --marca-suave: #2C2F37;
    --marca-tinta: #14110A;
    --oro: #D6B87F;
    --oro-texto: #DCC08C;
    --oro-claro: #E9D3A8;
    --oro-suave: #2C2F37;
    --bien: #6BCB97;
    --bien-suave: #15302A;
    --mal: #F08A7E;
    --mal-suave: #3A1C22;
    --aviso: #E3BD6E;
    --aviso-suave: #33291A;
    --cat-entrada: #6959AE;
    --cat-bebida: #3697C3;
    --cat-comida: #DC7533;
    --cat-golosina: #BE4D77;
    --cat-otro: #90969D;
    --serie-anterior: #7A8296;
    --precio: #E9D3A8;
    --sombra: 0 1px 0 rgba(0, 0, 0, .2), 0 14px 34px -20px rgba(0, 0, 0, .7);
    --sombra-alta: 0 30px 80px -24px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: "cv11", "ss01";
}
img, svg { display: block; max-width: 100%; }
a { color: var(--tinta); text-decoration-color: var(--oro); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oro-texto); }
/* Un botón que se ve como link (acciones dentro de un texto) */
.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.btn-link:hover { color: var(--oro-texto); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 560; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.012em; font-variation-settings: "opsz" 72; }
h1 { font-size: clamp(1.9rem, 3.6vw + 1rem, 3.4rem); font-weight: 520; letter-spacing: -.022em; }
h2 { font-size: clamp(1.5rem, 1.8vw + 1rem, 2.3rem); font-weight: 520; }
h3 { font-size: 1.2rem; font-weight: 600; font-variation-settings: "opsz" 24; letter-spacing: -.005em; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--oro-texto); }
p { margin: 0 0 1em; }
small, .chico { font-size: .875rem; }
.suave { color: var(--tinta-suave); }
.tenue { color: var(--tinta-tenue); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.serif { font-family: var(--serif); }
.oculto { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--oro-claro); color: #121A2B; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 24px 0; }

/* Iconos de línea (sprite /img/iconos.svg) */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -4px; }
.i-chico { width: 16px; height: 16px; vertical-align: -3px; }
.i-grande { width: 28px; height: 28px; stroke-width: 1.4; }
.i-enorme { width: 44px; height: 44px; stroke-width: 1.2; }

/* Sobretítulo en versalitas doradas */
.sobre { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: .72rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-texto); margin-bottom: 14px; }
.sobre::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }

/* Ornamento: filete con rombo */
.ornamento { display: flex; align-items: center; gap: 14px; color: var(--oro); margin: 8px auto 24px; max-width: 220px; }
.ornamento::before, .ornamento::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor); opacity: .6; }
.ornamento::after { background: linear-gradient(90deg, currentColor, transparent); }
.ornamento i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid currentColor; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--lateral); }
.contenedor-angosto { width: 100%; max-width: 580px; margin: 0 auto; padding: 0 var(--lateral); }
.pila > * + * { margin-top: 16px; }
.pila-chica > * + * { margin-top: 8px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fila-entre { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grilla { display: grid; gap: 16px; }
/* La fecha necesita más lugar que la hora; ninguna se pasa del borde en el celular. */
.fila-fecha-hora { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.grilla-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grilla-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.crece { flex: 1 1 auto; min-width: 0; }

/* ── Marca ────────────────────────────────────────────────────────────────── */
/* La firma de la marca: el ícono hace de Q y sigue "Eventos" en Fraunces negra (ver marca/ y scripts/marca.js).
   El ícono mide lo que el alto de la letra y baja un poco de la línea de base, como en el logo. */
.marca { display: inline-flex; align-items: baseline; gap: .06em; color: var(--tinta); text-decoration: none; font-family: var(--serif); font-size: 1.72rem; line-height: 1; }
.marca:hover { color: var(--tinta); }
.marca picture { display: contents; }
.marca img { flex: none; width: 1em; height: 1em; position: relative; top: .14em; }
.marca > span { font-weight: 900; font-variation-settings: "opsz" 144; letter-spacing: -.022em; }
/* Solo el ícono (el panel): sin bajar de la línea. */
.marca:has(> .solo-lector) img { top: 0; width: 34px; height: 34px; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2; letter-spacing: .005em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--superficie-2); color: var(--tinta);
  transition: background .18s, border-color .18s, color .18s, transform .06s, box-shadow .18s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { background: var(--superficie-3); color: var(--tinta); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-primario { background: var(--marca); color: var(--marca-tinta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px -10px rgba(12, 21, 40, .8); }
.btn-primario:hover { background: var(--marca-fuerte); color: var(--marca-tinta); }
.btn-oro { background: var(--oro-degrade); color: #1B1406; border-color: rgba(120, 90, 40, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px -14px rgba(176, 141, 87, .9); }
.btn-oro:hover { filter: brightness(1.05); color: #1B1406; background: var(--oro-degrade); }
.btn-borde { background: transparent; border-color: var(--linea-fuerte); }
.btn-borde:hover { background: var(--superficie-2); border-color: var(--oro); }
.btn-fantasma { background: transparent; color: var(--tinta-suave); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--tinta); }
.btn-peligro { background: transparent; border-color: color-mix(in srgb, var(--mal) 40%, transparent); color: var(--mal); }
.btn-peligro:hover { background: var(--mal); border-color: var(--mal); color: #fff; }
.btn-bien { background: var(--bien); color: #fff; }
.btn-whatsapp { background: #1F7A4F; color: #F4FBF6; }
.btn-whatsapp:hover { background: #196642; color: #fff; }
.btn-grande { min-height: 54px; padding: 14px 26px; font-size: 1.02rem; border-radius: 10px; }
.btn-chico { min-height: 36px; padding: 6px 12px; font-size: .85rem; }
.btn-bloque { display: flex; width: 100%; }
.btn-icono { min-width: 44px; padding: 8px; }
.tema-oscuro .btn-primario, :root[data-tema="oscuro"] .btn-primario { background: var(--oro-degrade); color: #1B1406; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .btn-primario { background: var(--oro-degrade); color: #1B1406; } }

/* ── Formularios ──────────────────────────────────────────────────────────── */
.campo { display: block; }
.campo > span, .etiqueta { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 7px; color: var(--tinta); letter-spacing: .005em; }
.campo > small { display: block; margin-top: 6px; color: var(--tinta-suave); }
.entrada, .campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font: inherit; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.campo textarea { min-height: 96px; resize: vertical; }
.entrada::placeholder, .campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-tenue); }
.entrada:hover, .campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--oro); }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 22%, transparent);
}
.campo input[aria-invalid="true"], .entrada[aria-invalid="true"] { border-color: var(--mal); box-shadow: 0 0 0 3px var(--mal-suave); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--marca); flex: none; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.error-form { color: var(--mal); background: var(--mal-suave); padding: 11px 14px; border-radius: var(--radio-chico); font-weight: 550; border-left: 3px solid var(--mal); }

/* ── Tarjetas ─────────────────────────────────────────────────────────────── */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.tarjeta-plana { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; }
.tarjeta h3 { margin-bottom: 6px; }
.tarjeta-link { display: block; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.tarjeta-link:hover { border-color: var(--oro); transform: translateY(-2px); color: inherit; box-shadow: var(--sombra), 0 18px 40px -26px rgba(176, 141, 87, .8); }
.separador { height: 1px; background: var(--linea); margin: 18px 0; }

/* ── Chips y estados ──────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .01em; background: var(--superficie-2); color: var(--tinta-suave); border: 1px solid var(--linea); white-space: nowrap; }
.chip .i { width: 14px; height: 14px; vertical-align: 0; }
.chip-marca { background: var(--oro-suave); color: var(--oro-texto); border-color: color-mix(in srgb, var(--oro) 35%, transparent); }
.chip-bien { background: var(--bien-suave); color: var(--bien); border-color: color-mix(in srgb, var(--bien) 25%, transparent); }
.chip-mal { background: var(--mal-suave); color: var(--mal); border-color: color-mix(in srgb, var(--mal) 25%, transparent); }
.chip-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }
.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.punto-vivo { animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .3; } }

.aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radio-chico); background: var(--aviso-suave); color: var(--tinta); border-left: 3px solid var(--aviso); }
.aviso > .i { color: var(--aviso); margin-top: 2px; }
.aviso-bien { background: var(--bien-suave); border-left-color: var(--bien); }
.aviso-bien > .i { color: var(--bien); }
.aviso-mal { background: var(--mal-suave); border-left-color: var(--mal); }
.aviso-mal > .i { color: var(--mal); }
.aviso-marca { background: var(--oro-suave); border-left-color: var(--oro); }
.aviso-marca > .i { color: var(--oro-texto); }
.aviso b { display: block; font-weight: 650; }

/* ── Barra superior ───────────────────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--linea); }
.barra .contenedor { display: flex; align-items: center; gap: 14px; min-height: 68px; }
.barra nav { display: flex; gap: 2px; align-items: center; margin-left: auto; }
.barra nav a { color: var(--tinta-suave); text-decoration: none; font-weight: 550; font-size: .93rem; padding: 8px 12px; border-radius: 8px; position: relative; }
.barra nav a:hover { color: var(--tinta); }
.barra nav a[aria-current="page"] { color: var(--tinta); }
.barra nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1.5px; background: var(--oro); }
/* Administración: siete secciones no entran en un celular; se deslizan de costado dentro de la barra. */
.barra-admin .marca { flex: none; }
.barra-admin nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.barra-admin nav::-webkit-scrollbar { display: none; }
.barra-admin nav a { white-space: nowrap; }

/* ── Pestañas ─────────────────────────────────────────────────────────────── */
.pestanas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linea); margin: 0 calc(var(--lateral) * -1); padding: 0 var(--lateral); }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { flex: none; background: none; border: 0; font: inherit; font-weight: 550; font-size: .95rem; color: var(--tinta-suave); padding: 13px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s; }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--oro); }

/* ── Indicadores ──────────────────────────────────────────────────────────── */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 18px 16px; box-shadow: var(--sombra); }
.kpi span { display: block; font-size: .7rem; font-weight: 650; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .14em; }
.kpi strong { display: block; font-family: var(--serif); font-size: clamp(1.45rem, 2.2vw + .9rem, 2.05rem); font-weight: 520; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; margin-top: 6px; line-height: 1.1; font-variation-settings: "opsz" 60; }
.kpi small { color: var(--tinta-suave); }
/* El monto nunca se parte en dos renglones: si la tarjeta es angosta (seis en una fila), la letra se achica. */
.kpi { container-type: inline-size; }
.kpi strong { white-space: nowrap; font-size: clamp(1.25rem, 19cqi, 2.05rem); }
.kpi-destacado { background: linear-gradient(160deg, #1B2A48 0%, #111A2E 100%); border-color: #1B2A48; color: #F2ECE0; position: relative; overflow: hidden; }
.kpi-destacado::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px 120px at 100% 0%, rgba(214, 184, 127, .22), transparent 70%); pointer-events: none; }
.kpi-destacado span { color: #D6B87F; }
.kpi-destacado small { color: #AEB3C1; }

.progreso { height: 6px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.progreso > i { display: block; height: 100%; background: var(--oro-degrade); border-radius: inherit; transition: width .5s; }

/* Ventas por hora: columnas finas, la mejor hora en dorado fuerte, el resto apagado; tocar una hora muestra su detalle. */
.gh-titular { margin: 2px 0 18px; color: var(--tinta-suave); }
.gh-titular b { color: var(--tinta); font-weight: 650; }
.gh-cuerpo { display: grid; gap: 20px 32px; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); align-items: start; }
.gh-grafico { padding-left: 60px; }
.gh-plano { position: relative; height: 180px; margin-top: 24px; border-bottom: 1px solid var(--linea-fuerte); }
.gh-guia { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linea); }
.gh-guia span { position: absolute; right: calc(100% + 10px); top: -.62em; font-size: .7rem; line-height: 1.2; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gh-columnas, .gh-horas { display: flex; gap: 2px; }
.gh-columnas { position: absolute; inset: 0; }
.gh-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radio-chico) var(--radio-chico) 0 0; transition: background .15s; }
.gh-col i { display: block; width: min(24px, 70%); background: var(--linea-fuerte); border-radius: 4px 4px 0 0; transition: background .15s; }
.gh-col.pico i { background: var(--oro); }
.gh-col:hover, .gh-col.activa { background: color-mix(in srgb, var(--oro) 9%, transparent); }
.gh-col:hover i, .gh-col.activa i { background: color-mix(in oklab, var(--oro) 45%, var(--linea-fuerte)); }
.gh-col.pico:hover i, .gh-col.pico.activa i { background: var(--oro); }
.gh-col:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.gh-valor { position: absolute; left: 50%; transform: translate(-50%, -5px); font-size: .72rem; font-weight: 650; color: var(--tinta); white-space: nowrap; pointer-events: none; }
.gh-horas span { flex: 1 1 0; min-width: 0; padding-top: 7px; text-align: center; font-size: .72rem; color: var(--tinta-suave); white-space: nowrap; }
.gh-horas span.ahora { color: var(--bien); font-weight: 650; }
.gh-detalle { min-height: 168px; padding: 14px 16px; border-radius: var(--radio-chico); background: var(--superficie-2); }
.gh-info-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gh-info-cifras { margin-top: 6px; }
.gh-info-cifras strong { display: block; font-size: 1.55rem; font-weight: 650; line-height: 1.2; }
.gh-info-cifras span { display: block; font-size: .8rem; margin-top: 2px; }
.gh-rubros { list-style: none; margin: 12px 0 10px; padding: 0; }
.gh-rubros li { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: .85rem; }
.gh-clave { flex: none; width: 12px; height: 3px; border-radius: 2px; }
.gh-tabla summary { cursor: pointer; color: var(--oro-texto); font-weight: 600; font-size: .9rem; }
.gh-tabla .fila-pico td { background: var(--oro-suave); }
/* Comparación con la edición anterior: las dos barras de cada hora, la anterior a la izquierda */
.gh-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; font-size: .85rem; color: var(--tinta-suave); }
.gh-leyenda li { display: flex; align-items: center; gap: 7px; }
.gh-muestra { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.gh-muestra.ahora, .gh-comparar .gh-col i.ahora { background: var(--oro); }
.gh-muestra.antes, .gh-comparar .gh-col i.antes { background: var(--serie-anterior); }
.gh-comparar .gh-plano { margin-top: 12px; }
.gh-comparar .gh-col { gap: 2px; }
.gh-comparar .gh-col i { width: min(11px, 36%); }
.gh-comparar .gh-detalle { min-height: 0; }
/* Historial: la barrita de cada edición, contra la que más vendió de la fiesta */
.barrita { display: block; height: 4px; margin: 6px 0 0 auto; border-radius: 2px; background: var(--oro); opacity: .75; }
.fiestas { display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); }
.anios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.anio { padding: 16px 18px; }
.anio .sobre { margin-bottom: 0; }
.anio .cifra { display: block; font-family: var(--serif); font-size: clamp(1.15rem, .9rem + 1vw, 1.45rem); font-weight: 540; line-height: 1.2; margin-top: 4px; }
.sin-corte { white-space: nowrap; }
/* Página principal: con o sin ticketera, y las fichas de papel de muestra */
.sin-ticketera { display: grid; gap: 40px 56px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; }
@media (max-width: 860px) { .sin-ticketera { grid-template-columns: minmax(0, 1fr); } }
.formas-entrega { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 16px; }
.formas-entrega li { display: flex; gap: 14px; align-items: flex-start; }
.formas-entrega .ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--oro-suave); color: var(--oro-texto); }
.formas-entrega b { display: block; }
.formas-entrega span:not(.ico) { color: var(--tinta-suave); }
.fichas-muestra { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 12px; }
.ficha-muestra { position: relative; display: grid; gap: 6px; padding: 14px 14px 12px 22px; border: 1.5px dashed #9AA0AA; border-radius: 4px; background: #FFFFFF; color: #121A2B; box-shadow: 0 14px 30px -18px rgba(10, 16, 32, .45); }
.ficha-muestra::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 6px; border-radius: 2px; background: var(--c); }
.ficha-muestra:nth-child(1) { transform: rotate(-3deg); }
.ficha-muestra:nth-child(2) { transform: rotate(2.5deg) translateY(10px); }
.ficha-muestra:nth-child(3) { transform: rotate(1.5deg); }
.ficha-muestra:nth-child(4) { transform: rotate(-2deg) translateY(8px); }
.ficha-muestra .rubro { display: flex; justify-content: space-between; gap: 8px; font-size: .62rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.ficha-muestra .rubro i { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: #585E6E; }
.ficha-muestra b { font-size: clamp(1.05rem, 1.2vw + .7rem, 1.45rem); line-height: 1.1; overflow-wrap: anywhere; }
.ficha-muestra small { font-size: .64rem; color: #585E6E; }
/* Fichas de papel: cuántas de cada producto, agrupadas por rubro, y dónde se retiran */
.poner-todos { display: flex; align-items: flex-end; gap: 10px; }
.poner-todos .campo { flex: 1; }
.grupos-fichas { display: grid; gap: 12px; }
.grupo-fichas { border: 1px solid var(--linea); border-left: 4px solid var(--c); border-radius: var(--radio-chico); padding: 10px 12px; background: var(--superficie); }
.cabeza-grupo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; }
.cabeza-grupo .retiro { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--tinta-suave); }
.cabeza-grupo .retiro .entrada { width: 150px; min-height: 36px; padding: 6px 10px; }
.fila-ficha { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.fila-ficha + .fila-ficha { border-top: 1px dashed var(--linea); }
.fila-ficha small { display: block; font-size: .75rem; }
.fila-ficha .entrada { width: 90px; min-height: 38px; padding: 6px 10px; text-align: right; font-variant-numeric: tabular-nums; }
/* Cuenta: filas de tarjetas del mismo alto, con lo de abajo pegado al pie, y formularios de una línea */
.fila-tarjetas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: stretch; }
.fila-tarjetas > .tarjeta { display: flex; flex-direction: column; }
.fila-tarjetas > .tarjeta > form { display: flex; flex-direction: column; flex: 1; }
.tarjeta-pie { margin-top: auto !important; padding-top: 16px; }
.cabeza-tarjeta { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cabeza-tarjeta .precio-grande { font-size: clamp(2.2rem, 2vw + 1.4rem, 2.8rem); }
.fila-pedido { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px; align-items: end; }
.total-pedido { display: grid; line-height: 1.25; padding-bottom: 4px; }
.total-pedido b { font-size: 1.25rem; }
.lista-desliza { max-height: 330px; overflow: auto; margin-right: -6px; padding-right: 6px; }
.dato-email { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; overflow-wrap: anywhere; }
.form-en-linea { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: end; }
.form-en-linea > .btn { justify-self: start; }
/* Kit de difusión: el estilo, las tres piezas y los mensajes */
.estilos-kit { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.estilo-kit { position: relative; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.estilo-kit input { position: absolute; opacity: 0; pointer-events: none; }
.estilo-kit:hover { border-color: var(--oro); }
.estilo-kit:has(input:checked) { border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro-suave); }
.estilo-kit:has(input:focus-visible) { outline: 2px solid var(--oro); outline-offset: 2px; }
.muestra-kit { display: flex; align-items: flex-end; gap: 6px; height: 60px; padding: 10px; border-radius: var(--radio-chico); border: 1px solid var(--linea); }
.muestra-kit i { display: block; flex: 1; height: 10px; border-radius: 3px; }
.muestra-kit i:first-child { height: 30px; }
.muestra-kit i:nth-child(2) { height: 18px; }
.grilla-kit-opciones { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.piezas-kit { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: start; }
.pieza-kit { margin: 0; display: grid; gap: 12px; }
.pieza-vista { display: grid; place-items: center; height: 340px; padding: 12px; border-radius: var(--radio-chico); background: var(--superficie-2); }
.pieza-vista img { display: block; max-width: 100%; max-height: 316px; border-radius: 4px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .45); }
.mensajes-kit { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.mensaje-kit { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie-2); }
.texto-mensaje { margin: 0; max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; line-height: 1.45; color: var(--tinta); }
.aviso-kit { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.aviso-kit > div:first-child { color: var(--oro-texto); }
.aviso-kit > div:first-child .i { width: 26px; height: 26px; }
/* Orden del día (Puestos): la tarjeta de arriba, los turnos de cada puesto y cómo se editan */
.orden-dia-cabeza { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.orden-dia-cabeza > div { flex: 1 1 300px; }
.orden-puesto { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--superficie-2); }
.turnos-lista { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.turnos-lista li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 2px 0; }
.turnos-lista li > span { min-width: 7.5em; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.turnos-edicion { display: grid; gap: 8px; }
.turnos-edicion:empty { display: none; }
.fila-turno { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 48px 8px 8px; border: 1px solid var(--linea); border-radius: var(--radio-chico); background: var(--superficie-2); }
.fila-turno .entrada { width: auto; min-height: 42px; padding: 8px 10px; }
.fila-turno input[type="time"] { width: 6.9em; padding-inline: 8px; }
.fila-turno .t-quienes { flex: 1 1 120px; min-width: 0; }
.fila-turno [data-quitar-turno] { position: absolute; top: 8px; right: 4px; }
/* Angosto: el día y el horario arriba, quiénes abajo a todo lo ancho */
@media (max-width: 520px) {
  .fila-turno .t-quienes { order: 5; flex-basis: 100%; }
  .fila-turno select { flex: 1 1 100%; }
  .fila-turno input[type="time"] { flex: 1 1 0; min-width: 0; width: auto; }
}
.orden-puesto [data-hoja] { display: inline-flex; align-items: center; gap: 6px; }
.lista-comparada .antes { white-space: nowrap; }
@media (max-width: 640px) {
  /* En el celular la celda se alinea a la izquierda: la barrita también */
  .tabla-embudo .barrita { margin-left: 0; }
  /* Cada puesto: el nombre arriba y los números abajo, sin partir "antes $ …" */
  .lista-comparada > li { flex-wrap: wrap; row-gap: 2px; }
  .lista-comparada .crece { flex-basis: 100%; }
  .lista-comparada .antes { margin-right: auto; }
}
@media (max-width: 760px) {
  .gh-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .gh-grafico { padding-left: 48px; }
  .gh-guia span { font-size: .64rem; right: calc(100% + 7px); }
}

/* ── Tablas y listas ──────────────────────────────────────────────────────── */
.tabla-envoltura { overflow-x: auto; margin: 0 calc(var(--lateral) * -1); padding: 0 var(--lateral); }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-suave); font-weight: 650; padding: 10px 8px; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
.tabla td { padding: 12px 8px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
.tabla .der { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.lista > li:last-child { border-bottom: 0; }
/* Un monto no se parte en dos renglones: si falta lugar, se achica el texto de al lado. */
.lista > li > .num { flex: none; white-space: nowrap; }

/* ── Diálogos y avisos flotantes ──────────────────────────────────────────── */
dialog.modal { overflow: hidden; border: 1px solid var(--linea); padding: 0; border-radius: var(--radio-grande); background: var(--superficie); color: var(--tinta); width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: var(--sombra-alta); }
dialog.modal[open] { animation: aparecerModal .22s ease-out; }
@keyframes aparecerModal { from { opacity: 0; transform: translateY(8px) scale(.985); } }
dialog.modal::backdrop { background: rgba(8, 12, 24, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
dialog.modal .modal-cuerpo { padding: 26px; overflow-y: auto; max-height: calc(100dvh - 24px); }
dialog.modal h2 { font-size: 1.45rem; }
.modal-acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.nota-cerrar { margin: 18px 0 0; padding: 9px 12px; border-radius: var(--radio-chico); background: var(--aviso-suave); color: var(--tinta); border-left: 3px solid var(--aviso); font-size: .86rem; font-weight: 550; animation: subir .22s ease-out; }
.nota-cerrar + .modal-acciones { margin-top: 12px; }

.tostadas { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.tostada { background: #121A2B; color: #F2ECE0; padding: 13px 16px; border-radius: 10px; font-weight: 550; box-shadow: var(--sombra-alta); animation: subir .22s ease-out; pointer-events: auto; border-left: 3px solid #D6B87F; }
.tostada-mal { border-left-color: #F08A7E; }
.tostada-bien { border-left-color: #6BCB97; }
@keyframes subir { from { transform: translateY(8px); opacity: 0; } }

.cargando { display: grid; place-items: center; gap: 12px; padding: 56px 0; color: var(--tinta-suave); }
.rueda { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea); border-top-color: var(--oro); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.vacio { text-align: center; padding: 44px 18px; color: var(--tinta-suave); }
.vacio h3 { color: var(--tinta); }
.icono-grande { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent); color: var(--oro-texto); margin: 0 auto 16px; background: var(--oro-suave); }
.icono-grande .i { width: 28px; height: 28px; stroke-width: 1.4; }

/* ── Landing ──────────────────────────────────────────────────────────────── */
.heroe { position: relative; padding: 64px 0 72px; overflow: hidden; color: var(--tinta);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(214, 184, 127, .20), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(110, 90, 148, .18), transparent 60%),
    linear-gradient(180deg, #0A1020 0%, #111A2E 100%);
}
.heroe::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 22%, rgba(233, 211, 168, .7), transparent 60%),
    radial-gradient(1px 1px at 32% 68%, rgba(233, 211, 168, .5), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 16%, rgba(233, 211, 168, .6), transparent 60%),
    radial-gradient(1px 1px at 72% 84%, rgba(233, 211, 168, .45), transparent 60%),
    radial-gradient(1px 1px at 90% 40%, rgba(233, 211, 168, .6), transparent 60%),
    radial-gradient(1px 1px at 46% 44%, rgba(233, 211, 168, .35), transparent 60%);
}
.heroe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(214, 184, 127, .7), transparent); }
.heroe .contenedor { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 920px) { .heroe .contenedor { grid-template-columns: 1fr 1.08fr; } .heroe { padding: 88px 0 96px; } }
.heroe h1 { color: #F2ECE0; }
.heroe .bajada { font-size: 1.14rem; color: #B9BECB; max-width: 33em; line-height: 1.65; }
.heroe .suave { color: #9AA1B2; }
.sello { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(214, 184, 127, .45); color: #E2C995; font-weight: 600; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: .82rem; margin-bottom: 22px; letter-spacing: .02em; background: rgba(214, 184, 127, .07); }
.sello .i { width: 16px; height: 16px; }
.seccion { padding: 88px 0; }
.seccion-alt { background: var(--superficie); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion header { max-width: 660px; margin-bottom: 44px; }
.seccion header.centrado { margin-left: auto; margin-right: auto; }
.paso { position: relative; padding: 26px 24px 22px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--bg); }
.paso .nro { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--oro); margin-bottom: 14px; font-variation-settings: "opsz" 144; }
.rasgo { display: flex; gap: 16px; align-items: flex-start; padding: 6px 0; }
.rasgo .ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); color: var(--oro-texto); background: var(--oro-suave); }
.rasgo .ico .i { width: 22px; height: 22px; stroke-width: 1.5; }
.rasgo h3 { font-size: 1.12rem; margin-bottom: 4px; }
.precio-grande { font-family: var(--serif); font-size: clamp(2.4rem, 4.5vw + 1rem, 3.6rem); font-weight: 480; letter-spacing: -.025em; font-variant-numeric: lining-nums tabular-nums; line-height: 1.05; font-variation-settings: "opsz" 144; }
.invitacion { position: relative; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: 4px; padding: 44px 32px 34px; box-shadow: var(--sombra-alta); }
.invitacion::before { content: ""; position: absolute; inset: 8px; border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); border-radius: 2px; pointer-events: none; }
.invitacion .lista-chequeo { max-width: 360px; margin: 0 auto; text-align: left; }
.para-quien { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 1.5vw + .8rem, 1.6rem); color: var(--tinta-suave); }
.para-quien .sep { width: 5px; height: 5px; transform: rotate(45deg); background: var(--oro); opacity: .8; }
.funciones.funciones-una { grid-template-columns: minmax(0, 520px); justify-content: center; }
.para-quien a { color: inherit; text-decoration-color: transparent; text-underline-offset: 5px; transition: color .15s, text-decoration-color .15s; }
.para-quien a:hover { color: var(--tinta); text-decoration-color: var(--oro); }
.faq details { border-bottom: 1px solid var(--linea); padding: 20px 0; }
.faq details:first-of-type { border-top: 1px solid var(--linea); }
.faq summary { font-family: var(--serif); font-weight: 520; font-size: 1.14rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--oro); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 12px 0 0; color: var(--tinta-suave); max-width: 42em; }
.pie { padding: 44px 0 52px; color: #9AA1B2; font-size: .9rem; background: #0A1020; border-top: 1px solid rgba(214, 184, 127, .25); }
.pie a { color: #D8D2C4; text-decoration-color: rgba(214, 184, 127, .5); }
.pie a:hover { color: #E2C995; }
.pie .marca { color: #F2ECE0; }
.pie-simple { padding: 32px 0; text-align: center; color: var(--tinta-tenue); font-size: .85rem; }
.pie-simple a { color: var(--tinta-suave); }
/* "QEventos es un producto de Qorent": la firma de la empresa en todo lo público. */
.pie-empresa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(214, 184, 127, .16); font-size: .82rem; }
.pie-empresa a { font-weight: 600; }
.pie-empresa-corto { margin-top: 6px; font-size: .8rem; }
.firma-empresa { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--linea); text-align: center; font-size: .8rem; color: var(--tinta-tenue); }
.firma-empresa a, .pie-app a { color: var(--tinta-suave); font-weight: 600; }
.pie-app { padding: 8px var(--lateral) 28px; text-align: center; font-size: .78rem; color: var(--tinta-tenue); }

/* Sitio: barra, capturas en su celular o su notebook, funciones */
@media (prefers-reduced-motion: no-preference) { html.sitio { scroll-behavior: smooth; } }
.sitio [id] { scroll-margin-top: 76px; }
.barra-sitio { background: #0A1020; border-bottom-color: rgba(214, 184, 127, .16); }
.barra-sitio nav a.btn-oro { color: #1B1406; margin-left: 6px; padding: 7px 14px; }
.barra-sitio nav a.btn-oro:hover { color: #1B1406; }
.heroe .btn-borde, .cierre .btn-borde { border-color: rgba(214, 184, 127, .4); }
.seccion-chica { padding: 56px 0; }
.fila-centro { justify-content: center; }
.subtitulo-sitio { font-size: 1.5rem; margin: 64px 0 26px; }
.rasgos { gap: 30px 40px; }
@media (min-width: 760px) { .grilla-2.rasgos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .grilla-3.rasgos { grid-template-columns: repeat(3, 1fr); } }

/* ── Los equipos, dibujados con CSS ─────────────────────────────────────────
   Como uno de verdad: el borde de metal, el vidrio negro alrededor de la
   pantalla, la cámara, los botones del costado y un reflejo suave. La barra
   de estado (o la del navegador) ya viene en la captura. Todo en %: el mismo
   equipo sirve grande en el héroe y chico en una tarjeta. */
.marco-cel, .marco-tablet, .marco-pc {
  --metal: linear-gradient(135deg, #c3c9d2 0%, #6a707b 12%, #2c3139 34%, #1d2128 55%, #4b515c 80%, #b3bac5 100%);
  --boton: linear-gradient(90deg, #3a3f48, #8d949f 60%, #5b616b);
  --reflejo: linear-gradient(118deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, 0) 38%);
}
.marco-cel .vidrio, .marco-tablet .vidrio, .marco-pc .vidrio { position: relative; overflow: hidden; background: #030406; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.marco-cel .vidrio img, .marco-tablet .vidrio img, .marco-pc .vidrio img { display: block; width: 100%; height: auto; }
.marco-cel .vidrio::after, .marco-tablet .vidrio::after, .marco-pc .vidrio::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: var(--reflejo);
}

/* Celular: esquinas redondas parejas, la isla de la cámara y tres botones */
.marco-cel { position: relative; padding: 1.2%; border-radius: 16% / 7.6%; background: var(--metal);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 60px 70px -46px rgba(0, 0, 0, .9), 0 24px 44px -26px rgba(0, 0, 0, .6); }
.marco-cel .vidrio { padding: 3.3%; border-radius: 15% / 7.1%; }
.marco-cel .vidrio img { border-radius: 11.5% / 5.3%; }
.marco-cel .vidrio::before { content: ""; position: absolute; z-index: 2; top: 2.35%; left: 50%; width: 30%; height: 4.1%; transform: translateX(-50%); border-radius: 999px;
  background: radial-gradient(circle at 80% 50%, #22304a 0 5%, #0b0f17 7% 10%, #000 12%); }
.marco-cel::before, .marco-cel::after { content: ""; position: absolute; width: 1.3%; background: var(--boton); }
.marco-cel::before { left: -1%; top: 17%; height: 19%; border-radius: 3px 0 0 3px;
  -webkit-mask: linear-gradient(180deg, #000 0 20%, transparent 20% 32%, #000 32% 63%, transparent 63% 72%, #000 72%);
  mask: linear-gradient(180deg, #000 0 20%, transparent 20% 32%, #000 32% 63%, transparent 63% 72%, #000 72%); }
.marco-cel::after { right: -1%; top: 25%; height: 11%; border-radius: 0 3px 3px 0; }

/* Tablet apaisada: bordes finos y parejos, la cámara en el marco de arriba */
.marco-tablet { position: relative; padding: .75%; border-radius: 4.4% / 6.4%; background: var(--metal);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .35), 0 60px 70px -46px rgba(0, 0, 0, .9), 0 24px 44px -26px rgba(0, 0, 0, .6); }
.marco-tablet .vidrio { padding: 2.4%; border-radius: 3.9% / 5.7%; }
.marco-tablet .vidrio img { border-radius: 1.7% / 2.5%; }
.marco-tablet .vidrio::before { content: ""; position: absolute; z-index: 2; top: 1.15%; left: 50%; width: .8%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b4b69 0 18%, #0a0d14 46%); }
.marco-tablet::before { content: ""; position: absolute; top: -.55%; right: 9%; width: 8%; height: .8%; border-radius: 3px 3px 0 0; background: var(--boton); }

/* Notebook: la tapa con su cámara, la bisagra, la base de aluminio con la
   muesca para abrirla y la sombra sobre la mesa */
.marco-pc { position: relative; isolation: isolate; }
.marco-pc .pantalla { position: relative; padding: .45%; border-radius: 2.6% 2.6% .9% .9% / 4.1% 4.1% 1.4% 1.4%; background: var(--metal);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3); }
.marco-pc .vidrio { padding: 1.9% 1.9% 2.5%; border-radius: 2.2% 2.2% .6% .6% / 3.5% 3.5% 1% 1%; }
.marco-pc .vidrio img { border-radius: 3px 3px 1px 1px; }
.marco-pc .vidrio::before { content: ""; position: absolute; z-index: 2; top: .95%; left: 50%; width: .5%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3b4b69 0 18%, #0a0d14 46%); }
.marco-pc .base { position: relative; height: 0; padding-bottom: 2.4%; margin: 0 -8%; border-radius: 2px 2px 34px 34px / 2px 2px 14px 14px;
  background: linear-gradient(180deg, #eef1f5 0%, #c4cad3 18%, #979ea9 55%, #5f6571 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 1px rgba(0, 0, 0, .35); }
.marco-pc .base::before { content: ""; position: absolute; top: 0; left: 42%; right: 42%; height: 42%; border-radius: 0 0 9px 9px / 0 0 7px 7px;
  background: linear-gradient(180deg, #7b828e, #aab0ba); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.marco-pc .base::after { content: ""; position: absolute; top: -3px; left: 7.4%; right: 7.4%; height: 3px; border-radius: 0 0 2px 2px; background: linear-gradient(180deg, #0c0f14, #30353e); }
.marco-pc::after { content: ""; position: absolute; z-index: -1; left: -7%; right: -7%; bottom: -4.5%; height: 8%;
  background: radial-gradient(50% 50% at 50% 45%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }

/* Héroe: el mismo puesto en una notebook, una tablet y un celular */
.escaparate { position: relative; aspect-ratio: 1 / .87; }
.escaparate > * { position: absolute; }
.escaparate .marco-pc { top: 0; right: 3%; width: 80%; }
.escaparate .marco-tablet { right: 0; bottom: 0; width: 50%; }
.escaparate .marco-cel { left: 0; bottom: 3%; width: 24%; transform: rotate(-3deg); }
/* En una pantalla angosta, la tablet y el celular un poco más grandes. */
@media (max-width: 640px) {
  .escaparate { aspect-ratio: 1 / .95; }
  .escaparate .marco-pc { right: 0; width: 84%; }
  .escaparate .marco-tablet { width: 56%; }
  .escaparate .marco-cel { width: 30%; }
}

/* Los equipos en los que anda */
.equipos { display: grid; gap: 26px 18px; grid-template-columns: repeat(2, 1fr); max-width: 940px; margin-left: auto; margin-right: auto; }
@media (min-width: 760px) { .equipos { grid-template-columns: repeat(4, 1fr); } }
.equipo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.equipo .ico { width: 56px; height: 56px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); color: var(--oro-texto); background: var(--oro-suave); }
.equipo .ico .i { width: 26px; height: 26px; stroke-width: 1.5; }
.equipo b { font-family: var(--serif); font-size: 1.12rem; font-weight: 560; }
.equipo span { color: var(--tinta-suave); font-size: .92rem; max-width: 15em; }

/* Escena: la captura asoma desde arriba y se corta abajo */
.escena { position: relative; height: 300px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 28px;
  background: radial-gradient(420px 240px at 50% 0%, color-mix(in srgb, var(--oro) 22%, transparent), transparent 70%), var(--superficie-2); border-bottom: 1px solid var(--linea); }
.escena .marco-cel { flex: none; width: 228px; }
.escena-pc .marco-pc { flex: none; width: 90%; }
.escena-papel { align-items: center; padding: 10px 14px; }
.escena-papel img { display: block; width: 100%; height: auto; }
.paso-foto { padding: 0; overflow: hidden; }
.paso-foto .escena { height: 270px; }
.paso-foto .escena .marco-cel { width: 206px; }
.paso-texto { padding: 22px 24px 24px; }
.funciones { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .funciones { grid-template-columns: 1fr 1fr; } }
.funcion { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-grande); background: var(--superficie); box-shadow: var(--sombra); }
.funcion .texto { padding: 22px 24px 26px; }
.funcion h3 { font-size: 1.2rem; margin-bottom: 6px; }
.funcion p { margin: 0; color: var(--tinta-suave); }
/* La última, a lo ancho: la captura de un lado y el texto del otro. */
@media (min-width: 760px) {
  .funcion-ancha { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; }
  .funcion-ancha .escena { height: auto; padding: 34px 30px; align-items: center; border-bottom: 0; border-right: 1px solid var(--linea); }
  .funcion-ancha .texto { align-self: center; padding: 32px 36px; }
  .funcion-ancha h3 { font-size: 1.4rem; }
}

/* Selector de equipo: la misma pantalla en celular, tablet o notebook. Lo
   agrega landing.js; sin JavaScript se ve el equipo que trae el HTML. El
   celular asoma desde arriba y se corta abajo; la tablet y la notebook entran
   enteras, centradas. */
.escena[data-equipos] { height: 340px; padding-top: 62px; }
.paso-foto .escena[data-equipos] { height: 320px; }
.escena > .marco-tablet { flex: none; width: min(86%, 360px); align-self: center; }
.escena > .marco-pc { flex: none; width: min(88%, 400px); align-self: center; }
@media (min-width: 760px) {
  .funcion-ancha .escena[data-equipos] { height: 420px; padding: 70px 30px 0; align-items: flex-start; }
  .funcion-ancha .escena > .marco-pc { width: min(88%, 500px); }
  .funcion-ancha .escena > .marco-tablet { width: min(86%, 440px); }
}
.selector-equipo { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px;
  border-radius: 999px; background: color-mix(in srgb, var(--superficie) 90%, transparent); border: 1px solid var(--linea); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.selector-equipo button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--tinta-suave); font: 600 .82rem/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.selector-equipo button:hover { color: var(--tinta); }
.selector-equipo button[aria-pressed="true"] { background: var(--marca); color: var(--marca-tinta); }
.selector-equipo .i { width: 16px; height: 16px; }
@media (max-width: 380px) { .selector-equipo button { padding: 0 9px; gap: 5px; } }
@media (prefers-reduced-motion: no-preference) {
  .escena[data-equipos] > .marco-cel, .escena[data-equipos] > .marco-tablet, .escena[data-equipos] > .marco-pc { animation: aparecer-equipo .3s ease-out; }
}
@keyframes aparecer-equipo { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Cierre: la última invitación, oscura como el héroe */
.cierre { padding: 88px 0; color: var(--tinta); border-top: 1px solid rgba(214, 184, 127, .25);
  background: radial-gradient(700px 360px at 50% -20%, rgba(214, 184, 127, .2), transparent 65%), linear-gradient(180deg, #0A1020, #111A2E); }
.cierre h2 { color: #F2ECE0; }
.cierre .bajada { font-size: 1.12rem; color: #B9BECB; }
@media (max-width: 640px) { .seccion-chica { padding: 44px 0; } .cierre { padding: 64px 0; } .escena { height: 270px; } .subtitulo-sitio { margin-top: 48px; } }

/* ── Acceso (registro / ingresar) ─────────────────────────────────────────── */
.acceso { min-height: 100dvh; display: grid; place-items: start center; padding: 40px var(--lateral) 56px;
  background: radial-gradient(800px 420px at 50% -10%, color-mix(in srgb, var(--oro) 16%, transparent), transparent 70%), var(--bg); }
@media (min-width: 640px) { .acceso { place-items: center; } }
.acceso .tarjeta { width: 100%; max-width: 470px; padding: 34px 32px; box-shadow: var(--sombra-alta); }
.acceso .marca { display: flex; width: max-content; margin-bottom: 26px; }
.acceso h1 { font-size: 2rem; }

/* ── Panel del organizador ────────────────────────────────────────────────── */
/* Crecimiento (admin): visitantes por día y el armador de links con seguimiento */
.barras-dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(1px, .35vw, 4px); height: 150px; align-items: end; padding-top: 18px; border-bottom: 1px solid var(--linea); }
.barra-dia { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.barra-dia span { display: block; width: 100%; background: var(--oro); border-radius: 3px 3px 0 0; opacity: .85; }
.barra-dia:hover span { opacity: 1; }
.barra-dia i { font-style: normal; font-size: .7rem; font-weight: 700; line-height: 1; color: var(--tinta); margin-bottom: 3px; }
.barras-dias.muchos i { font-size: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--tinta); }
.lugares { display: flex; flex-wrap: wrap; gap: 8px; }
/* En el celular cada fuente es una tarjeta: los cuatro números a la vista, sin deslizar */
@media (max-width: 640px) {
  .tabla-embudo thead { display: none; }
  .tabla-embudo tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .tabla-embudo tr:last-child { border-bottom: 0; }
  .tabla-embudo td, .tabla-embudo td.der { display: block; padding: 0; border: 0; text-align: left; }
  .tabla-embudo td:first-child { grid-column: 1 / -1; }
  .tabla-embudo-3 tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabla-embudo td.celda-entera { grid-column: 1 / -1; }
  .tabla-embudo td[data-titulo]::before { content: attr(data-titulo); display: block; font-size: .64rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
  .tabla-embudo tbody tr:hover td { background: none; }
}
.grilla-link { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.link-armado { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--superficie-2); }
.link-armado code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .88rem; }

/* Verificación en dos pasos: la clave para el autenticador, bien legible */
.clave-2fa { font-family: var(--serif); font-size: 1.35rem; font-weight: 540; letter-spacing: .06em; text-align: center; padding: 14px 12px; border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-chico); background: var(--superficie-2); overflow-wrap: anywhere; user-select: all; }
.pasos-2fa { margin: 0 0 16px; padding-left: 22px; color: var(--tinta-suave); }
.pasos-2fa li + li { margin-top: 8px; }
/* Administración en vivo: los datos de cada evento y los equipos de cada puesto */
.datos-vivo { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.datos-vivo > div { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.datos-vivo span { font-size: .68rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-suave); }
.datos-vivo b { font-family: var(--serif); font-size: 1.3rem; font-weight: 540; }
.datos-vivo small { color: var(--tinta-suave); font-size: .8rem; }
.lista-equipos { margin-top: 6px; }
.lista-equipos > li { padding: 4px 0; gap: 8px; font-size: .84rem; border-bottom: 0; }
.puesto-vivo { display: grid; gap: 6px 16px; grid-template-columns: minmax(0, 1.3fr) 70px 110px 120px minmax(0, 2.2fr); align-items: start; padding: 12px 8px; border-bottom: 1px solid var(--linea); }
.puesto-vivo:last-child { border-bottom: 0; }
.puesto-vivo.cabecera { padding-top: 0; font-size: .68rem; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-suave); border-bottom-color: var(--linea-fuerte); }
.puesto-vivo .der { text-align: right; }
.pv-dato > span { display: none; }
.pv-dato > b, .pv-dato > small { display: block; }
.pv-dato > small { color: var(--tinta-suave); font-size: .8rem; }
@media (max-width: 759px) {
  .puesto-vivo { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 0; }
  .puesto-vivo.cabecera { display: none; }
  .pv-nombre, .pv-equipos { grid-column: 1 / -1; }
  .puesto-vivo .der { text-align: left; }
  .pv-dato > span { display: block; font-size: .64rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 2px; }
}
.encabezado-noche { padding: 22px 0 12px; }
.encabezado-noche h1 { font-size: clamp(1.7rem, 2.6vw + 1rem, 2.6rem); margin-bottom: 8px; }
.acciones-noche { display: flex; gap: 8px; flex-wrap: wrap; }
.titulo-seccion { font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); margin: 0; }
.subtitulo-seccion { font-size: 1.35rem; font-weight: 560; margin-top: 0; }
.volver { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-suave); text-decoration: none; font-size: .9rem; font-weight: 550; }
.volver:hover { color: var(--tinta); }
.plantillas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.plantilla { position: relative; display: block; cursor: pointer; }
.plantilla input { position: absolute; opacity: 0; }
.plantilla .tarjeta-plana { height: 100%; padding: 18px; transition: border-color .15s, box-shadow .15s, background .15s; }
.plantilla:hover .tarjeta-plana { border-color: var(--oro); }
.plantilla input:checked + .tarjeta-plana { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro), 0 12px 30px -20px rgba(176, 141, 87, .9); background: color-mix(in srgb, var(--oro-suave) 55%, var(--superficie)); }
.plantilla input:focus-visible + .tarjeta-plana { outline: 2px solid var(--oro); outline-offset: 2px; }
.plantilla .emoji { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent); color: var(--oro-texto); margin-bottom: 12px; }
.plantilla b { font-family: var(--serif); font-weight: 560; font-size: 1.08rem; }

.grupo-cat { position: relative; padding-left: 22px; }
.grupo-cat::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, var(--oro)); opacity: .8; }
.grupo-cat h3 { display: inline-flex; align-items: center; gap: 10px; }
.grupo-cat h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--oro)); }
.fila-producto { display: grid; grid-template-columns: 46px minmax(0, 1fr) 118px 96px 42px; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.fila-producto:last-child { border-bottom: 0; }
.fila-producto .entrada { min-height: 42px; padding: 8px 11px; }
.fila-producto .ico-prod { width: 46px; min-height: 42px; text-align: center; padding: 4px; font-size: 19px; }
.fila-producto button.ico-prod {
  height: 42px; display: grid; place-items: center; padding: 0; overflow: hidden; cursor: pointer; line-height: 1;
  color: var(--tinta-suave); background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico);
  transition: border-color .15s;
}
.fila-producto button.ico-prod:hover { border-color: var(--oro); }
.fila-producto button.ico-prod img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .15s; }
/* Que se note que se toca: sin foto, cuadro punteado; siempre, la cámara en la esquina (en el celular no hay "pasar el mouse"). */
.fila-producto button.ico-prod { position: relative; }
.fila-producto button.sin-foto { border-style: dashed; border-color: var(--oro); background: var(--superficie-2); }
.fila-producto button.sin-foto > .i { width: 20px; height: 20px; color: var(--oro-texto); }
.fila-producto button.sin-foto:has(.marca-foto) { padding: 0 8px 8px 0; font-size: 18px; }
.marca-foto {
  position: absolute; right: 2px; bottom: 2px; width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; background: var(--marca); color: var(--marca-tinta); box-shadow: 0 0 0 1.5px var(--superficie);
  transition: background .15s, transform .15s;
}
.marca-foto .i { width: 11px; height: 11px; stroke-width: 2.2; vertical-align: 0; }
.fila-producto button.ico-prod:hover .marca-foto, .fila-producto button.ico-prod:focus-visible .marca-foto { background: var(--oro); transform: scale(1.12); }
.fila-producto button.con-foto:hover img { filter: brightness(.82); }
.fila-producto button.ico-prod:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.foto-editor { display: flex; gap: 18px; align-items: flex-start; }
.foto-vista {
  flex: none; width: 148px; height: 148px; display: grid; place-items: center; overflow: hidden;
  border: 1px dashed var(--linea-fuerte); border-radius: var(--radio-grande); background: var(--superficie-2);
  font-size: 58px; line-height: 1; transition: border-color .15s, background .15s;
}
.foto-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vista.soltando { border-color: var(--oro); background: var(--oro-suave); }
.foto-vista:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.fila-link { display: flex; gap: 8px; }
.fila-link .entrada { flex: 1; min-width: 0; }
.entrada-icono { max-width: 110px; text-align: center; font-size: 1.3rem; }
@media (max-width: 560px) {
  .foto-editor { flex-direction: column; align-items: stretch; }
  .foto-vista { width: 100%; height: auto; aspect-ratio: 1; max-width: 240px; align-self: center; }
}
.fila-producto.inactivo { opacity: .5; }
.fila-producto .col-nombre > .entrada { width: 100%; }
.nota-agregado { display: block; margin-top: 3px; font-size: .72rem; color: var(--tinta-suave); }
.fila-producto .falta { border-color: var(--oro); background: var(--oro-suave); }
.fila-producto .mini { display: block; min-width: 0; }
.fila-producto .mini > span { display: none; }
.fila-producto .mini > .entrada { width: 100%; }
.encabezado-productos { display: grid; grid-template-columns: 46px minmax(0, 1fr) 118px 96px 42px; gap: 8px; font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .14em; color: var(--tinta-suave); padding: 4px 0 6px; border-bottom: 1px solid var(--linea-fuerte); }
@media (max-width: 520px) {
  .encabezado-productos { display: none; }
  .fila-producto { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 40px; grid-template-areas: "ico nom nom acc" ". pre sto ."; row-gap: 6px; padding: 12px 0; }
  .fila-producto .col-ico { grid-area: ico; width: 40px; }
  .fila-producto .col-nombre { grid-area: nom; }
  .fila-producto .col-precio { grid-area: pre; }
  .fila-producto .col-stock { grid-area: sto; }
  .fila-producto .col-acc { grid-area: acc; }
  .fila-producto .mini > span { display: block; font-size: .64rem; font-weight: 650; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-suave); margin: 0 0 3px 2px; }
}
.barra-guardar { position: sticky; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--superficie) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linea); padding: 12px var(--lateral) calc(12px + env(safe-area-inset-bottom)); margin: 24px calc(var(--lateral) * -1) 0; display: flex; gap: 12px; align-items: center; justify-content: space-between; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip { position: relative; }
.cat-chip input { position: absolute; opacity: 0; }
.cat-chip span { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea-fuerte); font-weight: 550; font-size: .9rem; cursor: pointer; transition: border-color .15s, background .15s; }
.cat-chip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--oro)); }
.cat-chip input:checked + span { background: var(--oro-suave); border-color: var(--oro); color: var(--tinta); }
.cat-chip input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }
[data-cat="entrada"], .cat-entrada { --c: var(--cat-entrada); }
[data-cat="bebida"], .cat-bebida { --c: var(--cat-bebida); }
[data-cat="comida"], .cat-comida { --c: var(--cat-comida); }
[data-cat="golosina"], .cat-golosina { --c: var(--cat-golosina); }
[data-cat="otro"], .cat-otro { --c: var(--cat-otro); }

.link-copiable { display: flex; gap: 8px; }
/* El texto de un mensaje, para leerlo antes de mandarlo por WhatsApp */
.texto-mensaje { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .88rem; line-height: 1.5; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 12px 14px; margin: 0 0 8px; max-height: 45vh; overflow: auto; }
.link-copiable input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
.pin-grande { font-family: var(--serif); font-size: 2.6rem; font-weight: 500; letter-spacing: .28em; font-variant-numeric: tabular-nums lining-nums; text-align: center; padding: 16px 12px 14px; border-radius: var(--radio); background: var(--superficie-2); border: 1px solid var(--linea); position: relative; }
.pin-grande::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent); border-radius: 8px; pointer-events: none; }

.lista-chequeo { list-style: none; padding: 0; margin: 0; }
.lista-chequeo li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; }
.lista-chequeo li + li { border-top: 1px solid var(--linea); }
.lista-chequeo .tilde { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 560; font-size: .95rem; border: 1px solid var(--linea-fuerte); color: var(--tinta-suave); background: var(--superficie); }
.lista-chequeo .tilde .i { width: 15px; height: 15px; stroke-width: 2; }
.lista-chequeo .hecho .tilde { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); }

/* ── POS del puesto ───────────────────────────────────────────────────────── */
.pos { min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(900px 400px at 50% -200px, rgba(214, 184, 127, .10), transparent 70%), var(--bg); }
.pos-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 15; }
.pos-top .titulo { min-width: 0; flex: 1; }
.pos-top .titulo b { display: block; font-family: var(--serif); font-weight: 560; font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-top .titulo small { display: block; color: var(--tinta-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.estado-red { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--bien-suave); color: var(--bien); border: 1px solid color-mix(in srgb, var(--bien) 25%, transparent); font-family: inherit; cursor: pointer; white-space: nowrap; }
.estado-red.sin-red { background: var(--aviso-suave); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }
.estado-red.con-error { background: var(--mal-suave); color: var(--mal); border-color: color-mix(in srgb, var(--mal) 30%, transparent); }

.pos-cuerpo { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; }
@media (min-width: 900px) { .pos-cuerpo { grid-template-columns: 1fr 390px; } }
.pos-productos { padding: 14px 12px; padding-bottom: calc(var(--alto-carrito, 220px) + 24px); overflow-y: auto; }
@media (min-width: 900px) { .pos-productos { padding: 18px 18px 24px; } }
.pos-filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 14px; }
.pos-filtros::-webkit-scrollbar { display: none; }
.pos-filtros button { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta-suave); font: inherit; font-weight: 550; font-size: .9rem; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.pos-filtros button[data-cat]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pos-filtros button[aria-pressed="true"] { background: var(--oro-suave); color: var(--tinta); border-color: var(--oro); }

.reloj-pos { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--oro-texto); letter-spacing: .02em; padding: 0 6px; }
@media (max-width: 420px) { .reloj-pos { display: none; } }

/* Tarjetas de producto: la foto manda. Se reconoce el producto de un vistazo,
   aunque no se lea bien o no se esté acostumbrado a los sistemas. */
.grilla-pos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 420px) { .grilla-pos { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (min-width: 1500px) { .grilla-pos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } }

.boton-producto {
  position: relative; display: flex; flex-direction: column; padding: 0; text-align: left;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; isolation: isolate;
  box-shadow: var(--sombra);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
  transition: transform .12s ease, border-color .2s, box-shadow .2s;
}
.boton-producto:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c, var(--oro)) 60%, var(--linea)); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--c, var(--oro)) 85%, transparent); }
.boton-producto:active { transform: scale(.97); }

/* La foto (o, si no hay, el ícono grande sobre el color del rubro) */
.foto-prod {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 95% at 30% 18%, color-mix(in srgb, var(--c, var(--oro)) 34%, var(--superficie)) 0%, color-mix(in srgb, var(--c, var(--oro)) 14%, var(--superficie-2)) 100%);
}
.foto-prod > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.foto-prod .emoji { font-size: 60px; font-size: 34cqw; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.con-foto .foto-prod .emoji { visibility: hidden; }
/* El nombre del rubro va en letra normal sobre una pastilla clara; el color, en el punto (se lee igual sobre cualquier foto). */
.rubro-prod {
  position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--superficie) 94%, transparent); color: var(--tinta);
  font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; line-height: 1.1;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4);
}
.rubro-prod::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--oro)); }
.boton-producto .en-carrito {
  position: absolute; top: 7px; right: 7px; z-index: 2; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px;
  display: grid; place-items: center; background: var(--oro-degrade); color: #1B1406; font-weight: 800; font-size: 1.05rem;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .55), 0 0 0 2px var(--superficie);
}
.sello-agotado {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; padding: 6px 0;
  background: color-mix(in srgb, var(--mal) 90%, transparent); color: #fff;
  text-align: center; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
}

/* Nombre, precio y lo que queda */
.cuerpo-prod { display: flex; flex-direction: column; flex: 1; padding: 10px 12px 12px; }
.boton-producto .nom {
  font-weight: 700; font-size: 1.06rem; line-height: 1.22; letter-spacing: -.005em; min-height: 2.44em;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pie-producto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--linea); }
.boton-producto .nom { margin-bottom: 9px; }
.boton-producto .pre { font-family: var(--sans); font-weight: 800; font-size: 1.34rem; letter-spacing: -.015em; font-variant-numeric: tabular-nums lining-nums; color: var(--precio); line-height: 1; white-space: nowrap; }
/* Lo que queda: bien visible, con letra oscura y más grande */
.boton-producto .queda {
  flex: none; padding: 5px 9px; border-radius: 8px; white-space: nowrap;
  background: var(--superficie-2); border: 1px solid var(--linea-fuerte); color: var(--tinta);
  font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.boton-producto.poco .queda { background: var(--aviso-suave); border-color: color-mix(in srgb, var(--aviso) 60%, transparent); color: var(--aviso); }
.boton-producto.agotado .queda { background: var(--mal-suave); border-color: color-mix(in srgb, var(--mal) 60%, transparent); color: var(--mal); }

/* Estados */
.boton-producto.elegido { border-color: var(--oro); box-shadow: 0 0 0 2px color-mix(in srgb, var(--oro) 60%, transparent), 0 16px 34px -22px rgba(176, 141, 87, .85); }
.boton-producto.agotado { cursor: not-allowed; }
.boton-producto.agotado:hover { transform: none; }
.boton-producto.agotado .foto-prod > img, .boton-producto.agotado .foto-prod .emoji { filter: grayscale(1); opacity: .45; }
.boton-producto.agotado .nom, .boton-producto.agotado .pre { opacity: .55; }
.boton-producto.primero { outline: 3px solid var(--oro); outline-offset: 2px; }

/* Con mouse y teclado: la tecla de cada producto, sobre la foto */
.boton-producto .atajo { display: none; }
@media (hover: hover) and (pointer: fine) {
  .boton-producto .atajo {
    position: absolute; right: 8px; bottom: 8px; z-index: 1; display: inline-grid; min-width: 28px; height: 28px; font-size: .84rem;
    background: color-mix(in srgb, var(--superficie) 94%, transparent); color: var(--tinta); border-color: var(--linea-fuerte);
  }
  .boton-producto:hover .atajo { border-color: var(--c, var(--oro)); box-shadow: inset 0 -3px 0 var(--c, var(--oro)); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .grilla-pos { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 14px; }
}

/* Respuesta al toque */
.boton-producto.pulso { animation: pulso .45s ease-out; }
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, var(--oro)) 70%, transparent); transform: scale(.965); }
  60% { box-shadow: 0 0 0 10px transparent; transform: scale(1.01); }
  100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--oro) 60%, transparent); transform: scale(1); }
}
.mas-uno { position: absolute; right: 16px; top: 22%; z-index: 3; font-family: var(--sans); font-size: 1.7rem; font-weight: 800; color: #fff; pointer-events: none; animation: masUno .65s ease-out forwards; text-shadow: 0 2px 12px rgba(0, 0, 0, .75); }
@keyframes masUno { from { opacity: 0; transform: translateY(8px) scale(.8); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-34px) scale(1.1); } }
.sacudida { animation: sacudida .35s ease; }
@keyframes sacudida { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Carrito */
.carrito { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; background: linear-gradient(180deg, color-mix(in srgb, var(--superficie) 96%, var(--oro)), var(--superficie)); border-top: 1px solid color-mix(in srgb, var(--oro) 40%, var(--linea)); border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px -16px rgba(10, 16, 32, .35); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; max-height: 78dvh; }
@media (min-width: 900px) {
  .carrito { position: sticky; top: 61px; height: calc(100dvh - 61px); max-height: none; border-radius: 0; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--oro) 22%, var(--linea)); box-shadow: -20px 0 50px -30px rgba(0, 0, 0, .8); padding: 20px 20px 22px;
    background: radial-gradient(500px 300px at 100% 0%, rgba(214, 184, 127, .08), transparent 70%), var(--superficie); }
}
.carrito-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-bottom: 4px; }
.carrito.vacio .carrito-cabeza { display: none; }
@media (min-width: 900px) { .carrito.vacio .carrito-cabeza { display: flex; } }
.carrito-items { overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
@media (min-width: 900px) { .carrito-items { flex: 1; } }
.carrito.plegado .carrito-items { display: none; }
@media (min-width: 900px) { .carrito.plegado .carrito-items { display: block; } .carrito .btn-plegar { display: none; } }
.item-carrito { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--linea); animation: entraItem .2s ease-out; }
@keyframes entraItem { from { opacity: 0; transform: translateX(8px); } }
.item-carrito .punto-cat { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--oro)); flex: none; box-shadow: 0 0 10px color-mix(in srgb, var(--c, var(--oro)) 80%, transparent); }
.item-carrito .nom { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-carrito .cant { display: flex; align-items: center; gap: 4px; }
.item-carrito .cant button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta); cursor: pointer; }
.item-carrito .cant button:hover { border-color: var(--oro); color: var(--oro-texto); }
.item-carrito .cant button .i { width: 15px; height: 15px; stroke-width: 2.2; }
.item-carrito .cant b { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-size: 1.02rem; }
.item-carrito .sub { width: 92px; text-align: right; font-family: var(--serif); font-weight: 520; font-size: 1.05rem; font-variant-numeric: tabular-nums lining-nums; }
.carrito-pago { padding-top: 6px; }
.total-carrito { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 8px 2px 12px; border-top: 1px dashed color-mix(in srgb, var(--oro) 35%, var(--linea)); margin-top: 6px; }
.total-carrito strong { font-family: var(--serif); font-size: 2.3rem; font-weight: 500; letter-spacing: -.025em; font-variant-numeric: tabular-nums lining-nums; line-height: 1; color: var(--tinta); }
.total-num.salta { animation: salta .25s ease-out; }
@keyframes salta { 40% { transform: scale(1.06); color: var(--oro-claro); } }
.medios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.medios button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 12px; border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta-suave); font: inherit; font-weight: 600; cursor: pointer; }
.medios button[aria-pressed="true"] { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 14%, transparent); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--oro); }
.billetes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 8px; flex-wrap: wrap; }
.billetes::-webkit-scrollbar { display: none; }
.billetes button { flex: none; min-height: 38px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta); font: inherit; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.billetes button:hover { border-color: var(--oro); }
.billetes button[aria-pressed="true"] { background: var(--oro-degrade); color: #1B1406; border-color: transparent; }
@media (max-width: 899px) { .billetes { flex-wrap: nowrap; } }
.vuelto { font-weight: 700; color: var(--oro-texto); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.btn-cobrar { width: 100%; min-height: 64px; font-size: 1.22rem; border-radius: 14px; letter-spacing: .01em; gap: 10px; }
.btn-cobrar .i { width: 22px; height: 22px; stroke-width: 2.2; }
.tema-oscuro .btn-cobrar, :root[data-tema="oscuro"] .btn-cobrar { background: var(--oro-degrade); color: #1B1406; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 34px -16px rgba(214, 184, 127, .75); }

/* Separar en fichas: una casilla grande, fácil de tocar */
.btn-fichas {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 9px 12px; text-align: left;
  border: 1px dashed var(--linea-fuerte); border-radius: 12px; background: transparent; color: var(--tinta);
  font: inherit; font-weight: 650; cursor: pointer; transition: border-color .15s, background .15s;
}
.btn-fichas small { display: block; font-weight: 500; font-size: .76rem; color: var(--tinta-tenue); }
.btn-fichas .casilla { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--linea-fuerte); color: #1B1406; }
.btn-fichas:hover { border-color: var(--oro); }
.btn-fichas[aria-pressed="true"] { border-style: solid; border-color: var(--oro); background: color-mix(in srgb, var(--oro) 12%, transparent); }
.btn-fichas[aria-pressed="true"] .casilla { background: var(--oro-degrade); border-color: transparent; }
.btn-fichas .casilla .i { width: 15px; height: 15px; stroke-width: 2.6; }

/* Celular: mientras se vende, la venta es una barra finita abajo (cuántas
   cosas, el total y Cobrar); tocándola se abre entera sobre los productos. */
.barra-venta, .velo-venta { display: none; }
@media (max-width: 899px) {
  .carrito.plegado:not(.vacio) { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .carrito.plegado:not(.vacio) > :not(.barra-venta) { display: none !important; }
  .carrito.plegado:not(.vacio) .barra-venta { display: flex; align-items: center; gap: 10px; }
  .barra-resumen { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 6px; border: 0; background: transparent; color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
  .barra-resumen small { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-suave); font-size: .82rem; font-weight: 600; }
  .barra-resumen strong { font-family: var(--serif); font-size: 1.75rem; font-weight: 520; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
  .btn-barra-cobrar { flex: none; min-height: 54px; padding: 0 22px; border-radius: 14px; font-size: 1.1rem; gap: 8px; }
  .tema-oscuro .btn-barra-cobrar, :root[data-tema="oscuro"] .btn-barra-cobrar { background: var(--oro-degrade); color: #1B1406; }
  /* La venta abierta: hoja alta con los productos oscurecidos detrás */
  .carrito:not(.plegado) { max-height: 90dvh; }
  .carrito:not(.plegado) .carrito-cabeza { flex-direction: column-reverse; align-items: stretch; gap: 4px; margin-bottom: 6px; }
  .carrito:not(.plegado) .carrito-cabeza > .fila { justify-content: space-between; }
  .carrito:not(.plegado) .carrito-cabeza .btn-plegar { font-weight: 700; color: var(--tinta); padding-left: 4px; }
  .pos.venta-abierta .velo-venta { display: block; position: fixed; inset: 0; z-index: 11; background: rgba(10, 16, 32, .5); animation: aparecer .15s ease-out; }
  .carrito:not(.plegado):not(.vacio) { animation: subeVenta .2s ease-out; }
}
@keyframes subeVenta { from { transform: translateY(24px); opacity: .6; } }

/* Carrito sin productos: el mismo carrito, con un aviso en el lugar de la lista */
.carrito-sin-items { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 140px; margin: 6px 0 10px; padding: 24px 12px; border: 1px dashed var(--linea-fuerte); border-radius: 12px; color: var(--tinta-tenue); text-align: center; font-size: .92rem; }
.carrito-sin-items .i { width: 26px; height: 26px; stroke-width: 1.4; color: var(--oro-texto); opacity: .8; }
@media (min-width: 900px) { .carrito-items { display: flex; flex-direction: column; } .carrito-sin-items { flex: 1; } }
.linea-movil { display: none; }
@media (max-width: 899px) {
  .carrito.vacio { padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .carrito.vacio .carrito-cabeza, .carrito.vacio .carrito-items, .carrito.vacio .carrito-pago,
  .carrito.vacio .total-carrito, .carrito.vacio .btn-cobrar, .carrito.vacio .leyenda-teclas { display: none !important; }
  .carrito.vacio .linea-movil { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--tinta-suave); font-size: .92rem; }
  .linea-movil .i { color: var(--oro-texto); }
}

.btn-cobrar[disabled], .tema-oscuro .btn-cobrar[disabled], :root[data-tema="oscuro"] .btn-cobrar[disabled] { background: var(--superficie-2); color: var(--tinta-tenue); border-color: var(--linea); box-shadow: none; opacity: 1; }
.teclado-pin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; max-width: 290px; margin: 0 auto; justify-items: center; }
.teclado-pin button { display: grid; place-items: center; width: 100%; max-width: 78px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--linea-fuerte); background: transparent; color: var(--tinta); font-family: var(--serif); font-size: 1.7rem; font-weight: 450; cursor: pointer; touch-action: manipulation; transition: background .12s, border-color .12s; font-variant-numeric: lining-nums; }
.teclado-pin button:active { background: var(--oro-suave); border-color: var(--oro); }
.teclado-pin button .i { width: 26px; height: 26px; stroke-width: 1.4; }
.puntos-pin { display: flex; justify-content: center; gap: 14px; margin: 26px 0; }
.puntos-pin i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--linea-fuerte); transition: background .15s, border-color .15s; }
.puntos-pin i.lleno { background: var(--oro); border-color: var(--oro); box-shadow: 0 0 12px rgba(214, 184, 127, .6); }

.cobrado { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(600px 400px at 50% 40%, rgba(107, 203, 151, .22), transparent 70%), rgba(8, 14, 26, .96); color: #F2ECE0; text-align: center; animation: aparecer .14s ease-out; }
.cobrado .sello-ok { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid rgba(107, 203, 151, .6); color: #6BCB97; }
.cobrado .sello-ok .i { width: 42px; height: 42px; stroke-width: 1.6; }
.cobrado strong { display: block; font-family: var(--serif); font-size: clamp(2.6rem, 10vw, 4.4rem); font-weight: 480; letter-spacing: -.025em; line-height: 1.05; }
.cobrado .medio { color: #AEB3C1; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; font-weight: 600; margin-top: 8px; }
.cobrado .vuelto-grande { font-family: var(--serif); font-size: clamp(1.6rem, 6vw, 2.5rem); font-weight: 500; margin-top: 18px; color: #E9D3A8; }
@keyframes aparecer { from { opacity: 0; } }

.pantalla-centro { flex: 1; display: grid; place-items: center; padding: 28px var(--lateral); }
.pantalla-centro > div { width: 100%; max-width: 420px; }
.logo-centro { width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 16px; box-shadow: 0 16px 40px -18px rgba(214, 184, 127, .7); }
:root[data-tema="oscuro"] .logo-centro { content: url("/img/marca-oscuro.svg"); }

/* ── Impresión ──────────────────────────────────────────────────────────── */
/* Los tickets del POS se imprimen en un iframe con su propia hoja (pos.js). */
@media print {
  .no-imprimir { display: none !important; }
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.mt-0 { margin-top: 0 !important; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-0 { margin-bottom: 0 !important; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.centrado { text-align: center; }
.derecha { text-align: right; }
.ancho-completo { width: 100%; }

@media (max-width: 640px) {
  .ocultar-movil { display: none !important; }
  .barra nav a { padding: 8px 9px; }
  .seccion { padding: 64px 0; }
  .tarjeta { padding: 18px; }
  .invitacion { padding: 38px 22px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Tarjeta de noche con bloque de fecha estilo calendario */
.tarjeta-noche { display: flex; gap: 18px; align-items: flex-start; }
.fecha-bloque { flex: none; width: 62px; text-align: center; border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent); border-radius: 10px; padding: 9px 0 7px; background: var(--oro-suave); }
.fecha-bloque .dia { display: block; font-family: var(--serif); font-size: 1.85rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.fecha-bloque .mes { display: block; margin-top: 5px; text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; font-weight: 650; color: var(--oro-texto); }

/* Filtro de rubro elegido: toma el color del rubro */
.pos-filtros button[data-cat][aria-pressed="true"] { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); color: var(--tinta); }
.pos-filtros button { transition: border-color .15s, background .15s; }
.pos-filtros button:hover { border-color: var(--c, var(--oro)); color: var(--tinta); }

/* ══ POS en computadoras y notebooks ════════════════════════════════════════ */

/* Teclas */
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--linea-fuerte); border-bottom-width: 2px; background: var(--superficie-2); color: var(--tinta-suave); font-family: var(--sans); font-size: .7rem; font-weight: 700; line-height: 1; letter-spacing: 0; vertical-align: middle; }
.solo-teclado, .solo-teclado-texto { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  kbd.solo-teclado { display: inline-grid !important; }
  .leyenda-teclas.solo-teclado { display: flex !important; }
  .solo-teclado-texto { display: block !important; }
  .solo-tactil, .solo-tactil-texto { display: none !important; }
}
.solo-escritorio { display: none !important; }
@media (min-width: 900px) { .solo-escritorio { display: inline-flex !important; } }

/* Entradas aparte: el botón de arriba (cuando el puesto vende de todo) y su pantalla */
.btn-entradas { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 5px 14px 5px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 14%, var(--superficie)); color: var(--tinta); font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, box-shadow .15s; }
.btn-entradas:hover { background: color-mix(in srgb, var(--c) 22%, var(--superficie)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.btn-entradas > .i { width: 20px; height: 20px; color: var(--c); }
.btn-entradas > span { display: grid; line-height: 1.1; text-align: left; }
.btn-entradas small { font-size: .72rem; font-weight: 600; color: var(--tinta-suave); }
.pos-entradas { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
@media (min-width: 900px) { .pos-entradas { grid-template-columns: minmax(0, 1fr) 390px; } }
.entradas-elegir { min-width: 0; padding: 16px 12px; overflow-y: auto; }
.entradas-cobro { min-width: 0; }
@media (min-width: 900px) { .entradas-elegir { padding: 22px 26px; } }
.entradas-cabeza { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.entradas-cabeza .sobre { color: var(--c); }
.entradas-cabeza h2 { margin: 2px 0 0; font-size: 1.7rem; }
.lista-entradas { display: grid; gap: 12px; max-width: 760px; }
.fila-entrada { display: flex; align-items: stretch; border: 1px solid var(--linea-fuerte); border-radius: 18px; background: var(--superficie); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.fila-entrada.elegida { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 28%, transparent); }
.fila-entrada.llena { opacity: .6; }
.fila-entrada-sumar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 0; background: color-mix(in srgb, var(--c) 8%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.fila-entrada-sumar:hover { background: color-mix(in srgb, var(--c) 14%, transparent); }
.fila-entrada-sumar:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.fila-entrada .emoji { flex: none; font-size: 2rem; line-height: 1; }
.fila-entrada .crece { min-width: 0; }
.fila-entrada b { display: block; font-size: 1.08rem; overflow-wrap: anywhere; }
.fila-entrada .pre { display: block; margin-top: 2px; font-size: 1.3rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.fila-entrada .queda { flex: none; padding: 5px 10px; border-radius: 999px; background: var(--superficie); font-size: .82rem; font-weight: 650; white-space: nowrap; }
.fila-entrada .queda.mal { background: var(--mal-suave); color: var(--mal); }
.contador { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px; border-left: 1px solid var(--linea); }
.contador button { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--tinta); cursor: pointer; }
.contador button[data-mas-entrada] { background: var(--c); border-color: var(--c); color: #FFFFFF; }
.contador button[disabled] { opacity: .35; cursor: default; }
.contador output { min-width: 2.2ch; text-align: center; font-family: var(--serif); font-size: 1.8rem; font-weight: 560; font-variant-numeric: tabular-nums lining-nums; }
.entradas-cobro { padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--superficie); }
@media (min-width: 900px) { .entradas-cobro { padding: 22px 20px; border-top: 0; border-left: 1px solid var(--linea); overflow-y: auto; } }
/* En el celular: el nombre arriba, y lo que queda debajo del precio */
@media (max-width: 520px) {
  .fila-entrada-sumar { flex-wrap: wrap; gap: 4px 12px; padding: 12px; }
  .fila-entrada .emoji { font-size: 1.6rem; }
  .fila-entrada .queda { order: 5; margin-left: calc(1.6rem + 12px); }
  .contador { flex-direction: column-reverse; justify-content: center; padding: 8px; gap: 4px; }
  .contador button { width: 46px; height: 42px; }
  .contador output { font-size: 1.5rem; }
}

/* Buscador y filtros en una línea */
.pos-herramientas { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pos-herramientas .pos-filtros { flex: 1; min-width: 0; padding-bottom: 0; }
.buscador { display: none; }
@media (min-width: 900px) {
  .buscador { display: flex; align-items: center; gap: 8px; flex: none; width: 290px; height: 42px; padding: 0 8px 0 14px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--superficie); color: var(--tinta-suave); transition: border-color .15s, box-shadow .15s; }
  .buscador:focus-within { border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 22%, transparent); color: var(--oro-texto); }
  .buscador input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--tinta); font: inherit; font-size: .95rem; }
  .buscador input::placeholder { color: var(--tinta-tenue); }
  .buscador input::-webkit-search-cancel-button { filter: invert(.6); }
}

/* Carrito: detalle por renglón */
.item-carrito .nom small { display: block; font-weight: 500; font-size: .76rem; color: var(--tinta-tenue); }

/* "Paga con": se escribe lo que dan y aparece el vuelto */
.paga-con { display: none; }
@media (min-width: 900px) {
  .paga-con { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--linea-fuerte); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
  .paga-con:focus-within { border-color: var(--oro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 20%, transparent); }
  .paga-con > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tinta-suave); }
  .paga-con input { width: 160px; height: 44px; padding: 0 12px; border: 0; border-radius: 8px; outline: 0; background: var(--superficie-2); color: var(--tinta); text-align: right; font-family: var(--serif); font-size: 1.4rem; font-variant-numeric: tabular-nums lining-nums; }
  .paga-con input::placeholder { color: var(--tinta-tenue); }
}
.vuelto-caja { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent); background: color-mix(in srgb, var(--oro) 14%, transparent); animation: aparecerModal .18s ease-out; }
.vuelto-caja span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--oro-texto); }
.vuelto-caja strong { font-family: var(--serif); font-size: 1.8rem; font-weight: 520; letter-spacing: -.02em; line-height: 1; color: var(--oro-claro); font-variant-numeric: tabular-nums lining-nums; }
.vuelto-caja.falta { border-color: color-mix(in srgb, var(--mal) 55%, transparent); background: var(--mal-suave); }
.vuelto-caja.falta span, .vuelto-caja.falta strong { color: var(--mal); }

/* La tecla dentro de Cobrar: clara sobre el botón azul (pantalla clara), oscura sobre el dorado (pantalla oscura) */
.btn-cobrar kbd { margin-left: 6px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #F8F3E8; }
.tema-oscuro .btn-cobrar kbd, :root[data-tema="oscuro"] .btn-cobrar kbd { background: rgba(27, 20, 6, .12); border-color: rgba(27, 20, 6, .3); color: #1B1406; }
.btn-cobrar[disabled] kbd, .tema-oscuro .btn-cobrar[disabled] kbd, :root[data-tema="oscuro"] .btn-cobrar[disabled] kbd { background: transparent; border-color: var(--linea-fuerte); color: var(--tinta-tenue); }
.medios button kbd { margin-left: 2px; }
.leyenda-teclas { flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 12px; font-size: .76rem; color: var(--tinta-tenue); }
.leyenda-teclas span { display: inline-flex; align-items: center; gap: 6px; }
.solo-teclado-texto kbd { margin: 0 2px; }

/* Diálogo de atajos */
.grilla-atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 18px; }
.grilla-atajos > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.grilla-atajos .teclas { display: inline-flex; gap: 4px; flex: none; min-width: 58px; }
.grilla-atajos > div > span:last-child { min-width: 0; line-height: 1.3; }

/* Guía de impresión sin cuadro de diálogo */
.guia { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; background: var(--superficie-2); }
.guia summary { cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: 8px; list-style: none; }
.guia summary::-webkit-details-marker { display: none; }
.guia summary .i { color: var(--oro-texto); }
.guia ol { margin: 12px 0 8px; padding-left: 20px; color: var(--tinta-suave); }
.guia li + li { margin-top: 6px; }

/* Selector de a tres (Llegó más / Contamos / Baja) */
.segmentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linea); }
.segmentos button { min-height: 42px; border: 0; border-radius: 9px; background: transparent; color: var(--tinta-suave); font: inherit; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.segmentos button:hover { color: var(--tinta); }
.segmentos button[aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--oro), 0 4px 12px -6px rgba(0, 0, 0, .45); }
.texto-mal { color: var(--mal); }
.texto-bien { color: var(--bien); }
.ajuste-anulado { text-decoration: line-through; opacity: .55; }

/* ══ Carrito en la computadora: compacto, para que lo que se lleva tenga lugar ══
   La parte de pago va más apretada y cada renglón de la venta más bajo: en una
   pantalla común entran 8 a 10 productos antes de que la lista se corra. */
@media (min-width: 900px) {
  .carrito { padding: 14px 18px 14px; }
  .carrito-cabeza { min-height: 30px; margin-bottom: 2px; }
  .item-carrito { gap: 8px; padding: 6px 0; }
  .item-carrito .nom { font-size: .95rem; }
  .item-carrito .nom small { font-size: .72rem; }
  .item-carrito .cant { gap: 2px; }
  .item-carrito .cant button { width: 28px; height: 28px; }
  .item-carrito .cant b { min-width: 24px; font-size: .98rem; }
  .item-carrito .sub { width: 84px; font-size: 1rem; }
  .carrito-pago { padding-top: 4px; }
  .medios { gap: 6px; margin: 6px 0; }
  .medios button { min-height: 42px; }
  .paga-con { margin: 2px 0 6px; padding: 4px 4px 4px 12px; }
  .paga-con input { height: 38px; font-size: 1.25rem; }
  .billetes { flex-wrap: nowrap; gap: 5px; padding: 0 0 4px; }
  .billetes button { min-height: 32px; padding: 4px 11px; font-size: .85rem; }
  .vuelto-caja { margin-top: 4px; padding: 7px 12px; }
  .vuelto-caja strong { font-size: 1.5rem; }
  /* Separar en diferentes tickets: un renglón; la explicación queda en el cartelito del mouse */
  .btn-fichas { margin: 6px 0 0; padding: 6px 10px; gap: 8px; font-size: .92rem; }
  .btn-fichas small { display: none; }
  .btn-fichas .casilla { width: 20px; height: 20px; border-radius: 6px; }
  .total-carrito { padding: 6px 2px 8px; margin-top: 4px; }
  .total-carrito strong { font-size: 2rem; }
  .btn-cobrar { min-height: 54px; font-size: 1.15rem; }
  .leyenda-teclas { margin-top: 2px; }
}
/* Notebooks con poca altura: todavía más apretado, y sin la leyenda de teclas (está en "?") */
@media (min-width: 900px) and (max-height: 820px) {
  .carrito { padding-top: 10px; padding-bottom: 10px; }
  .medios button { min-height: 38px; }
  .paga-con input { height: 34px; font-size: 1.15rem; }
  .total-carrito strong { font-size: 1.7rem; }
  .btn-cobrar { min-height: 48px; font-size: 1.08rem; }
  .leyenda-teclas.solo-teclado { display: none !important; }
}
/* El vuelto se lee fuerte en los dos temas (en la pantalla clara el dorado claro no se veía) */
.vuelto-caja strong { color: var(--precio); }