/* GENERADO por bin/build_assets.php — no editar: editar assets-src/css/ */

/* ── 00-tokens.css ── */
/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   Vakita · tokens (guía de diseño §3 y §4; fuente: design/vakita-core.js).
   Claro por defecto; oscuro si el sistema lo pide (salvo que la persona eligió claro) o si eligió oscuro.
   .t-claro / .t-oscuro fuerzan un modo dentro de un contenedor (vistas previas de I2, el QR de V5).
   La marca (--br, --onbr, --brl, --brt, --brs, --brst) la escribe Tema::estilo() en el <head>: color de la institución
   o dorado. Ningún color se escribe en una vista: solo estas variables (regla 6 de crear-panel-admin).
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('fonts/Montserrat-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('fonts/Montserrat-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root, .t-claro {
  color-scheme: light;
  --bg: #F5F5F4; --sf: #FFFFFF; --s2: #E7E5E4; --tx: #1C1917; --t2: #57534E; --ln: #D6D3D1;
  --sold: #292524; --soldt: #F5F5F4;
  --ln-campo: #8F8984;   /* borde de campos e interruptores: 3:1 sobre #FFFFFF y #F5F5F4 (las líneas --ln son solo divisorias) */
  --perilla: #FFFFFF;    /* perilla del interruptor apagado */
  --ok: #15803D; --oks: #E1F3E7; --okt: #166534;
  --in: #1D4ED8; --ins: #E3EBFB; --int: #1E40AF;
  --er: #B91C1C; --ers: #FADFDF; --ert: #B91C1C;
  --gd: #D97706; --gdl: #B45309; --gdt: #B45309; --gds: #FDF0DC; --gdst: #92400E;
  --sh: 0 1px 2px rgba(28,25,23,.05), 0 10px 28px -14px rgba(28,25,23,.20);
  --sh2: 0 2px 4px rgba(28,25,23,.06), 0 18px 40px -18px rgba(28,25,23,.28);
  --ov: rgba(28,25,23,.48);
  --qr: #FFFFFF; --qrt: #1C1917;
  /* marca por defecto (dorado): Tema::estilo() la reemplaza */
  --br: #D97706; --onbr: #1C1917; --brl: #B45309; --brt: #B45309; --brs: #FDF0DC; --brst: #92400E;
  /* tipografía */
  --fh: Montserrat, 'Helvetica Neue', Arial, sans-serif;
  --fb: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --fi: 'Material Symbols Rounded';
  /* forma */
  --r-card: 24px; --r-card-lg: 28px; --r-tile: 14px; --r-tile-adm: 10px; --r-field: 16px; --r-pill: 999px; --r-sheet: 30px;
  --h-btn: 56px; --h-btn-lg: 60px; --h-btn-sec: 50px; --h-field: 56px; --tap: 44px;
  --gutter: 20px; --gap: 16px; --gap-in: 10px;
  /* Todo a lo ancho de la pantalla, con márgenes en porcentaje (pedido de Agustín el 07/10: nada de columnas angostas
     centradas con mucho margen). --margen: caras a todo el ancho (sitio, comprador, vendedor); --margen-panel: el contenido
     al lado de un menú lateral (panel, interno). Los textos largos se limitan en ch dentro de esos anchos. */
  --margen: clamp(20px, 5vw, 140px);
  --margen-panel: clamp(18px, 2.8vw, 64px);
  --max-comprador: none; --max-form: none; --texto-max: 68ch;
  --curva: cubic-bezier(.2,.8,.2,1);
  --barra-alto: 0px; /* alto de la barra inferior fija (la setea cada cara) */
}
@media (min-width: 900px) { :root { --gutter: 40px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --bg: #1C1917; --sf: #292524; --s2: #3A3532; --tx: #F5F5F4; --t2: #A8A29E; --ln: #44403C;
    --sold: #E7E5E4; --soldt: #1C1917; --ln-campo: #7A736E; --perilla: #A8A29E;
    --ok: #4ADE80; --oks: #12301E; --okt: #4ADE80;
    --in: #93C5FD; --ins: #1B2A44; --int: #93C5FD;
    --er: #FCA5A5; --ers: #3F1D1D; --ert: #FCA5A5;
    --gd: #F59E0B; --gdl: #F59E0B; --gdt: #FBBF24; --gds: #3A2A10; --gdst: #FBBF24;
    --sh: 0 0 0 1px rgba(255,255,255,.05); --sh2: 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px -18px rgba(0,0,0,.6);
    --ov: rgba(0,0,0,.6);
    --br: #F59E0B; --onbr: #1C1917; --brl: #F59E0B; --brt: #FBBF24; --brs: #3A2A10; --brst: #FBBF24;
  }
}
:root[data-tema="oscuro"], .t-oscuro {
  color-scheme: dark;
  --bg: #1C1917; --sf: #292524; --s2: #3A3532; --tx: #F5F5F4; --t2: #A8A29E; --ln: #44403C;
  --sold: #E7E5E4; --soldt: #1C1917; --ln-campo: #7A736E; --perilla: #A8A29E;
  --ok: #4ADE80; --oks: #12301E; --okt: #4ADE80;
  --in: #93C5FD; --ins: #1B2A44; --int: #93C5FD;
  --er: #FCA5A5; --ers: #3F1D1D; --ert: #FCA5A5;
  --gd: #F59E0B; --gdl: #F59E0B; --gdt: #FBBF24; --gds: #3A2A10; --gdst: #FBBF24;
  --sh: 0 0 0 1px rgba(255,255,255,.05); --sh2: 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px -18px rgba(0,0,0,.6);
  --ov: rgba(0,0,0,.6);
  --br: #F59E0B; --onbr: #1C1917; --brl: #F59E0B; --brt: #FBBF24; --brs: #3A2A10; --brst: #FBBF24;
}
/* El panel de la institución, el sitio y el panel interno usan el dorado de Vakita aunque la institución tenga color
   (guía §3.4): sus layouts ponen .marca-vakita en <body>, que vuelve a la marca dorada. */
.marca-vakita { --br: var(--gd); --onbr: #1C1917; --brl: var(--gdl); --brt: var(--gdt); --brs: var(--gds); --brst: var(--gdst); }

/* ── 01-base.css ── */
/* ═══ Base: reset, tipografía (guía §4), utilidades chicas ═══════════════════════════════════════════
   Clases de texto: .t-display .t-titulo .t-cifra .t-tarjeta .t-texto .t-chico .t-dato · .muted .num (cifras tabulares)
   Íconos: <span class="ms">nombre</span> (ic() en PHP, W.ic() en JS) · .ms-lleno para FILL 1
   Utilidades: .sr (solo lectores de pantalla) · .oculto · .fila · .col · .entre · .centro · .gap-s/.gap-m/.gap-l
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 16px/1.5 var(--fb); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brt); text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fh); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--brl); outline-offset: 2px; }
::selection { background: var(--brs); color: var(--brst); }

.ms { font-family: var(--fi); font-weight: 300; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; user-select: none; flex: none; overflow: hidden; width: 1em; }
.ms-lleno { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

.t-display { font: 700 clamp(40px, 6vw, 66px)/1.02 var(--fh); letter-spacing: -.035em; }
.t-titulo { font: 700 clamp(26px, 3.2vw, 31px)/1.1 var(--fh); letter-spacing: -.02em; }
.t-cifra { font: 700 clamp(22px, 3vw, 34px)/1.05 var(--fh); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.t-tarjeta { font: 600 17px/1.25 var(--fh); }
.t-texto { font: 16px/1.5 var(--fb); }
.t-chico { font: 13.5px/1.4 var(--fb); color: var(--t2); }
.t-dato { font: 700 11px var(--fh); letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--t2); }
.num, .t-num { font-variant-numeric: tabular-nums; }
.acento { color: var(--brt); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.oculto, [hidden] { display: none !important; }
.fila { display: flex; align-items: center; gap: var(--gap-in); }
.col { display: flex; flex-direction: column; gap: var(--gap-in); }
.entre { justify-content: space-between; }
.centro { text-align: center; align-items: center; justify-content: center; }
.gap-s { gap: 8px; } .gap-m { gap: 14px; } .gap-l { gap: 22px; }
.crece { flex: 1; min-width: 0; }
.wordmark { display: inline-block; height: 12px; width: auto; vertical-align: middle; }
.t-oscuro .wordmark-claro, :root[data-tema="oscuro"] .wordmark-claro { display: none; }

/* pantallas sueltas (errores, sin conexión, link vencido) */
.simple { min-height: 100dvh; display: grid; place-items: center; padding: 32px var(--gutter); }
.estado-general { max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; animation: vkUp .4s var(--curva) both; }
.estado-iso { width: 96px; height: auto; animation: vkFloat 2.6s ease-in-out infinite; }
.estado-acciones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.estado-pie { margin-top: 18px; display: flex; align-items: center; gap: 6px; }

/* ── 02-movimiento.css ── */
/* ═══ Movimiento (guía §7). Con «reducir movimiento» queda solo la opacidad. ═══════════════════════════ */
@keyframes vkPop { 0% { transform: scale(.82); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes vkUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vkSheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes vkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vkShim { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes vkGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vkGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes vkShake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes vkConf { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 1; } }
@keyframes vkCheck { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes vkGira { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.entra { animation: vkUp .4s var(--curva) both; }
.entra-2 { animation: vkUp .45s .06s var(--curva) both; }
.entra-3 { animation: vkUp .5s .12s var(--curva) both; }
.sacude { animation: vkShake .4s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .entra, .entra-2, .entra-3 { animation: vkFade .2s both !important; }
}

/* ── 10-componentes.css ── */
/* ═══ 10 · Componentes del sistema (guía §5, §8 y §11; design/Vakita 0 Sistema.dc.html y Pantalla*.dc.html). ══════════════════
   Solo tokens de 00-tokens.css: el oscuro y la marca de cada institución salen solos. Catálogo completo con ejemplos: docs/COMPONENTES.md
   y /dev/componentes. Cortes: celu < 900 px ≤ compu (hojas como ventana, menú lateral) · comprador ancho ≥ 1000 px (columna de 380).
   --qr / --qrt son el blanco y la tinta FIJOS (no cambian con el modo): fondo del logo de la institución y texto sobre el dorado.

   Botones (<a> o <button>; ícono a la derecha del texto, como en el diseño):
     .btn                      principal: píldora de 56, --br/--onbr, 600 17. Hover: brightness 1.08 + sombra del color + sube 1 px; presión .97
     .btn-principal            lo mismo, explícito
     .btn-sec                  contorno --ln sobre --sf, 50 de alto, 15 px
     .btn-tonal                --s2 (52) · .btn-texto: --brt subrayado (44) · .btn-contorno: borde 1,5 --brl, texto --brt («Elegir 3 al azar»)
     .btn-dorado               dorado del panel (--gd con tinta) · .btn-oscuro (--tx/--bg, «Compartir mi link») · .btn-peligro (--er)
     tamaños                   .btn-grande (60) · .btn-mediano (48) · .btn-chico (44) · .btn-ancho (100 %) · .btn-icono (círculo de 44) · .btn-icono-grande (52)
     estados                   :disabled / aria-disabled="true" → --s2/--t2 · .enviando (lo pone el núcleo al mandar un formulario)
     <span class="btn-etiqueta"> texto que se oculta en el celular dentro de .panel-acciones (queda para lectores)
   Chips de estado (ícono + texto, nunca solo color):
     .chip + .chip-ok · .chip-info · .chip-dorado · .chip-error · .chip-neutro · .chip-marca   · .chip-chico (26) · .chip-grande (34)
     .pildora-dato             36 px con borde e ícono --brt («$5.000 por número», «Sáb 28/11 · 21 h»)
     .contador [.contador-dorado]   badge de pendientes del menú (22 px)
   Tarjetas:  .tarjeta (24, sombra) · .tarjeta-grande (28) · .tarjeta-suave (--bg) · .tarjeta-borde · .tarjeta-marca (--brs) · .tarjeta-toque
              (clicable: sube 2 px) · .tarjeta-cabeza / .tarjeta-titulo / .tarjeta-sub
   Campos:    <label class="campo"><span class="campo-etiqueta">…</span><input class="entrada">…<span class="campo-ayuda">…</span></label>
              .campo-ok / .campo-error (ícono + frase) · .entrada[aria-invalid="true"] o .campo.con-error (borde 2 --er + sacudida)
              <span class="select"><select class="entrada">…</select></span> · textarea.entrada
              .celular (campo de celular, partes/campo_celular.php + [data-celular]) · .codigo* (6 casillas de 62, partes/campo_codigo.php)
   Controles: .interruptor (checkbox role=switch) · .segmentado + .segmentado-op (aria-pressed o radio adentro) · .pestanas + .pestana (role=tab)
   Personas:  .avatar [.avatar-chico 36 · .avatar-grande 52 · .avatar-anillo · .avatar-dorado] · .inst-logo [-36 -40 -44 -56 -64, .con-logo,
              .redondo, .invertido] (partes/inst_logo.php)
   Ayudas:    .dato (El Dato, partes/dato.php) · .aviso (+ -info -ok -error -dorado -marca -neutro, .aviso-grande, .aviso-icono, -titulo, -texto,
              -accion) · .franja (+ .franja-info) · .aviso-breve (lo crea W.toast; .es-error, .sale)
   Estados:   .cartel (+ -ok -info -error; partes/cartel.php) · .vacio (+ .vacio-marco, .vacio-plano; partes/vacio.php) · .esqueleto + .esq-*
              · .celebracion (W.celebrar) · .espera (loader, partes/loader.php)
   Listas:    .lista + .lista-fila (+ -texto -titulo -sub -fin) · .tabla-wrap + .tabla [.apilable: en el celular cada fila es una tarjeta;
              cada <td data-etiqueta="Total">; td.principal = encabezado de la tarjeta; td.acciones = botones]
   Grillas de página: .cols-2 · .cols-3 · .cols-4 (2 en el celular) · .cols-21 (1,5 fr + 1 fr) · .pila (columna con aire de 16) · .pila-chica
   Visibilidad: .solo-celu · .solo-compu (corte 900) · img.solo-claro / img.solo-oscuro (siguen al modo y a .t-claro/.t-oscuro)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Botones ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.btn {
  --btn-alto: var(--h-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none; max-width: 100%;
  min-height: var(--btn-alto); padding: 0 24px; border: 0; border-radius: var(--r-pill);
  background: var(--br); color: var(--onbr); font: 600 17px/1.2 var(--fh); text-align: center; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease, background-color .15s ease;
}
.btn .ms { font-size: 22px; }
.btn:active { transform: scale(.97); }
.btn-principal { background: var(--br); color: var(--onbr); }
.btn-sec { --btn-alto: var(--h-btn-sec); background: var(--sf); color: var(--tx); box-shadow: inset 0 0 0 1px var(--ln); font-size: 15px; padding: 0 20px; }
.btn-sec .ms { font-size: 20px; }
.btn-tonal { --btn-alto: 52px; background: var(--s2); color: var(--tx); font-size: 16px; padding: 0 20px; }
.btn-tonal .ms { font-size: 20px; }
.btn-texto { --btn-alto: var(--tap); padding: 0 6px; background: transparent; color: var(--brt); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn-texto .ms { font-size: 19px; }
.btn-contorno { background: var(--sf); color: var(--brt); box-shadow: inset 0 0 0 1.5px var(--brl); font-size: 15px; }
.btn-contorno .ms { font-size: 21px; }
.btn-dorado { background: var(--gd); color: var(--qrt); }
.btn-oscuro { background: var(--tx); color: var(--bg); }
.btn-peligro { background: var(--er); color: var(--bg); }
.btn-grande { --btn-alto: var(--h-btn-lg); }
.btn-mediano { --btn-alto: 48px; padding: 0 18px; font-size: 15px; }
.btn-mediano .ms { font-size: 20px; }
.btn-chico { --btn-alto: var(--tap); padding: 0 16px; font-size: 14px; gap: 8px; }
.btn-chico .ms { font-size: 19px; }
.btn-ancho { display: flex; width: 100%; }
.btn-icono { --btn-alto: var(--tap); width: var(--btn-alto); padding: 0; gap: 0; background: var(--sf); color: var(--tx); box-shadow: inset 0 0 0 1px var(--ln); }
.btn-icono .ms { font-size: 21px; }
.btn-icono-grande { --btn-alto: 52px; }
.btn-icono-grande .ms { font-size: 23px; }
.btn-icono.sin-borde { box-shadow: none; background: transparent; }
@media (hover: hover) {
  .btn:hover { filter: brightness(1.08); box-shadow: 0 12px 26px -12px var(--br); transform: translateY(-1px); }
  .btn-sec:hover, .btn-icono:hover { filter: none; box-shadow: inset 0 0 0 1px var(--t2); }
  .btn-tonal:hover { filter: none; box-shadow: none; }
  .btn-texto:hover { filter: none; box-shadow: none; transform: none; text-decoration-thickness: 2px; }
  .btn-contorno:hover { filter: none; box-shadow: inset 0 0 0 2px var(--brl); }
  .btn-dorado:hover { box-shadow: 0 10px 24px -10px var(--gd); }
  .btn-oscuro:hover { box-shadow: 0 12px 26px -12px var(--tx); }
  .btn-peligro:hover { box-shadow: 0 12px 26px -12px var(--er); }
  .btn:active { transform: scale(.97); }
}
.btn:disabled, .btn[aria-disabled="true"] { background: var(--s2); color: var(--t2); box-shadow: none; filter: none; transform: none; cursor: not-allowed; }
.btn-texto:disabled, .btn-texto[aria-disabled="true"] { background: transparent; text-decoration: none; }
.btn.enviando { cursor: progress; opacity: .8; }
.btn:focus-visible { border-radius: var(--r-pill); }

/* ── Chips, píldoras y contadores ──────────────────────────────────────────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 5px; flex: none; width: fit-content; max-width: 100%; height: 32px; padding: 0 12px 0 9px; border-radius: var(--r-pill);
  background: var(--s2); color: var(--tx); font: 600 13px/1 var(--fh); white-space: nowrap; }
.chip .ms { font-size: 17px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.chip .ms.ms-lleno { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.chip-ok { background: var(--oks); color: var(--okt); }
.chip-info { background: var(--ins); color: var(--int); }
.chip-dorado { background: var(--gds); color: var(--gdst); }
.chip-error { background: var(--ers); color: var(--ert); }
.chip-neutro { background: var(--s2); color: var(--tx); }
.chip-marca { background: var(--brs); color: var(--brst); }
.chip-chico { height: 26px; padding: 0 10px 0 7px; font-size: 12px; gap: 4px; }
.chip-chico .ms { font-size: 15px; }
.chip-grande { height: 34px; padding: 0 14px 0 10px; font-size: 14px; gap: 8px; }
.chip-grande .ms { font-size: 19px; }
.pildora-dato { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; height: 36px; padding: 0 14px 0 10px; border-radius: var(--r-pill);
  background: var(--sf); border: 1px solid var(--ln); color: var(--tx); font: 600 14px/1 var(--fh); white-space: nowrap; }
.pildora-dato .ms { font-size: 19px; color: var(--brt); }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.contador { display: inline-grid; place-items: center; flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--ers); color: var(--ert); font: 700 11px/1 var(--fh); font-variant-numeric: tabular-nums; }
.contador-dorado { background: var(--gd); color: var(--qrt); }

/* ── Tarjetas ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.tarjeta { display: block; background: var(--sf); color: var(--tx); border-radius: var(--r-card); box-shadow: var(--sh); padding: 18px 20px; min-width: 0; }
.tarjeta-grande { border-radius: var(--r-card-lg); padding: 22px; }
.tarjeta-suave { background: var(--bg); box-shadow: none; border-radius: 20px; padding: 14px 16px; }
.tarjeta-borde { box-shadow: none; border: 1px solid var(--ln); }
.tarjeta-marca { background: var(--brs); color: var(--brst); box-shadow: none; }
.tarjeta-toque { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--curva), box-shadow .25s ease; }
@media (hover: hover) { .tarjeta-toque:hover { transform: translateY(-2px); box-shadow: var(--sh2); } }
.tarjeta-toque:focus-visible { border-radius: var(--r-card); }
.tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tarjeta-titulo { font: 600 16px/1.25 var(--fh); }
.tarjeta-sub { font: 13px/1.4 var(--fb); color: var(--t2); }
.separador { height: 1px; background: var(--ln); border: 0; margin: 0; }

/* ── Campos ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo-etiqueta { font: 600 15px/1.3 var(--fh); color: var(--tx); }
.campo-ayuda { font: 14px/1.4 var(--fb); color: var(--t2); }
.campo-ok, .campo-error { display: flex; align-items: flex-start; gap: 6px; font: 15px/1.4 var(--fb); }
.campo-ok { color: var(--okt); }
.campo-ok b { font: 600 15px/1.4 var(--fh); color: var(--tx); font-variant-numeric: tabular-nums; }
.campo-error { color: var(--ert); }
.campo-ok .ms, .campo-error .ms { font-size: 19px; margin-top: 1px; }
.entrada { display: block; width: 100%; min-width: 0; height: var(--h-field); padding: 0 16px; border-radius: var(--r-field);
  border: 1px solid var(--ln-campo); background: var(--sf); color: var(--tx); font: 17px/1.3 var(--fb);
  -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; }
.entrada::placeholder { color: var(--t2); opacity: .85; }
.entrada:focus, .entrada:focus-visible { outline: 0; border-color: var(--brl); box-shadow: 0 0 0 4px var(--brs); border-radius: var(--r-field); }
textarea.entrada { height: auto; min-height: 112px; padding: 14px 16px; line-height: 1.45; resize: vertical; }
.entrada[aria-invalid="true"], .con-error .entrada { border: 2px solid var(--er); animation: vkShake .4s; }
.entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--ers); }
.entrada:disabled, .entrada[readonly] { background: var(--s2); color: var(--t2); }
.select { position: relative; display: block; min-width: 0; }
.select .entrada { padding-right: 46px; cursor: pointer; }
.select::after { content: 'expand_more'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 300 22px/1 var(--fi); color: var(--t2); font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; }
.campos-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 600px) { .campos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Campo de celular: [data-celular] pinta «Queda así» (ok) o el dígito que falta (error, recién al salir del campo). */
.celular .campo-ok b { white-space: nowrap; }

/* Campo de código: 6 casillas de 62 sobre un input invisible (autocomplete one-time-code). */
.codigo { display: flex; flex-direction: column; gap: 12px; }
.codigo-caja { position: relative; }
.codigo-casillas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.codigo-casilla { height: 62px; min-width: 0; border-radius: 16px; border: 1px solid var(--ln); background: var(--sf); color: var(--tx);
  display: grid; place-items: center; font: 600 26px/1 var(--fh); font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.codigo-casilla.activa { border: 2px solid var(--brl); box-shadow: 0 0 0 4px var(--brs); }
.codigo-entrada { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0;
  font-size: 16px; color: transparent; background: transparent; caret-color: transparent; cursor: text; }
.codigo-entrada:focus { outline: 0; }
.codigo.con-error .codigo-casillas { animation: vkShake .4s; }
.codigo.con-error .codigo-casilla { border: 2px solid var(--er); }
.codigo.completo .codigo-casilla { border-color: var(--brl); }

/* ── Interruptor, selector segmentado y pestañas ───────────────────────────────────────────────────────────────────────────────── */
.interruptor { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); cursor: pointer; font: 15px/1.4 var(--fb); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.interruptor-pista { position: relative; flex: none; width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--s2);
  box-shadow: inset 0 0 0 1.5px var(--ln-campo); transition: background-color .2s ease, box-shadow .2s ease; }
.interruptor-pista::after { content: ''; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--perilla); outline: 1.5px solid var(--ln-campo); outline-offset: -1.5px; box-shadow: 0 1px 3px color-mix(in srgb, var(--tx) 30%, transparent); transition: transform .2s var(--curva); }
.interruptor input:checked + .interruptor-pista { background: var(--br); box-shadow: none; }
.interruptor input:checked + .interruptor-pista::after { transform: translateX(20px); background: var(--onbr); outline: 0; }
.interruptor input:focus-visible + .interruptor-pista { outline: 3px solid var(--brl); outline-offset: 2px; }
.interruptor input:disabled + .interruptor-pista { opacity: .5; }
.interruptor:has(input:disabled) { cursor: not-allowed; }
.interruptor-texto { min-width: 0; }
.interruptor-texto small { display: block; font: 13px/1.4 var(--fb); color: var(--t2); }
.interruptor.al-final { display: flex; justify-content: space-between; }
.interruptor.al-final .interruptor-pista { order: 2; }

.segmentado { display: inline-flex; gap: 4px; padding: 4px; max-width: 100%; border-radius: var(--r-pill); background: var(--s2);
  overflow-x: auto; scrollbar-width: none; }
.segmentado::-webkit-scrollbar { display: none; }
.segmentado-op { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px;
  padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--t2); font: 600 14px/1 var(--fh);
  white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.segmentado-op .ms { font-size: 19px; }
@media (max-width: 899px) { .segmentado-op { min-height: var(--tap); } }   /* toques de 44 en el celular */
.segmentado-op input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado-op[aria-pressed="true"], .segmentado-op:has(input:checked), .segmentado-op.on { background: var(--sf); color: var(--tx); box-shadow: var(--sh); }
.segmentado-op:has(input:focus-visible) { outline: 3px solid var(--brl); outline-offset: 2px; }
.segmentado-op:focus-visible { border-radius: var(--r-pill); }
.segmentado.ancho { display: flex; width: 100%; }
.segmentado.ancho .segmentado-op { flex: 1; }

.pestanas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: -2px -2px 0; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; border-radius: var(--r-pill);
  border: 0; box-shadow: inset 0 0 0 1px var(--ln); background: var(--sf); color: var(--tx); font: 600 14px/1 var(--fh);
  text-decoration: none; white-space: nowrap; cursor: pointer; }
.pestana .ms { font-size: 19px; }
.pestana[aria-selected="true"], .pestana[aria-current="page"] { background: var(--tx); color: var(--bg); box-shadow: none; }
.pestana:focus-visible { border-radius: var(--r-pill); }
@media (hover: hover) { .pestana:not([aria-selected="true"]):not([aria-current="page"]):hover { box-shadow: inset 0 0 0 1px var(--t2); } }
.pestana-panel:focus-visible { outline-offset: 6px; }
@media (max-width: 899px) { .pestana { height: var(--tap); } }   /* toques de 44 en el celular */

/* ── Avatar y logo de la institución ───────────────────────────────────────────────────────────────────────────────────────────── */
.avatar { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--brs); color: var(--brst); font: 700 19px/1 var(--fh); text-transform: uppercase; }
.avatar-chico { width: 36px; height: 36px; font-size: 14px; }
.avatar-grande { width: 52px; height: 52px; font-size: 21px; }
.avatar-anillo { box-shadow: 0 0 0 3px var(--sf), 0 0 0 5px var(--brl); }
.avatar-dorado { background: var(--gds); color: var(--gdst); }
.avatar-neutro { background: var(--s2); color: var(--tx); }

.inst-logo { --tam: 42px; display: grid; place-items: center; flex: none; width: var(--tam); height: var(--tam); border-radius: 13px; overflow: hidden;
  background: var(--br); color: var(--onbr); font: 700 15px/1 var(--fh); letter-spacing: -.02em; text-transform: uppercase; }
.inst-logo.con-logo { background: var(--qr); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qrt) 12%, transparent); }
.inst-logo img { width: 100%; height: 100%; object-fit: contain; padding: 9%; }
.inst-logo.invertido:not(.con-logo) { background: var(--onbr); color: var(--br); }
.inst-logo.redondo { border-radius: 50%; }
.inst-logo-36 { --tam: 36px; border-radius: 11px; font-size: 12px; }
.inst-logo-40 { --tam: 40px; border-radius: 12px; font-size: 14px; }
.inst-logo-44 { --tam: 44px; border-radius: 14px; font-size: 15px; }
.inst-logo-56 { --tam: 56px; border-radius: 17px; font-size: 19px; }
.inst-logo-64 { --tam: 64px; border-radius: 20px; font-size: 22px; }

/* ── El Dato: ayuda opcional, nunca bloquea; la cruz es de 44 ─────────────────────────────────────────────────────────────────── */
.dato { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 20px; background: var(--brs); color: var(--brst); }
.dato > .ms { font-size: 24px; flex: none; }
.dato-cuerpo { flex: 1; min-width: 0; }
.dato-etiqueta { display: block; font: 700 11px/1.2 var(--fh); letter-spacing: .12em; text-transform: uppercase; }
.dato-texto { font: 14px/1.45 var(--fb); margin-top: 3px; text-wrap: pretty; }
.dato-texto a { color: inherit; font-weight: 600; }
.dato-cerrar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -12px -12px -12px 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; }
.dato-cerrar .ms { font-size: 20px; }
.dato-cerrar:focus-visible { border-radius: 50%; }
@media (hover: hover) { .dato-cerrar:hover { background: color-mix(in srgb, var(--brst) 10%, transparent); } }
.dato.sale { animation: vkDatoSale .28s var(--curva) forwards; }
@keyframes vkDatoSale { to { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ── Avisos en la página, franjas y aviso breve ────────────────────────────────────────────────────────────────────────────────── */
.aviso { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--ln);
  background: var(--sf); color: var(--tx); font: 14px/1.45 var(--fb); }
.aviso > .ms { font-size: 22px; flex: none; margin-top: 1px; }
.aviso-cuerpo { flex: 1 1 180px; min-width: 0; }
.aviso-titulo { display: block; font: 600 15px/1.3 var(--fh); }
.aviso-texto { display: block; font: 14px/1.4 var(--fb); margin-top: 2px; text-wrap: pretty; }
.aviso-neutro .aviso-texto { color: var(--t2); }
.aviso-info { background: var(--ins); color: var(--int); border-color: transparent; }
.aviso-ok { background: var(--oks); color: var(--okt); border-color: transparent; }
.aviso-error { background: var(--ers); color: var(--ert); border-color: transparent; }
.aviso-dorado { background: var(--gds); color: var(--gdst); border-color: transparent; }
.aviso-marca { background: var(--brs); color: var(--brst); border-color: transparent; }
.aviso-sombra { border-color: transparent; box-shadow: var(--sh); }
.aviso-grande { align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; }
.aviso-grande > .ms { font-size: 26px; }
.aviso-grande .aviso-titulo { font-size: 16px; }
.aviso-icono { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--s2); color: var(--tx); }
.aviso-icono .ms { font-size: 25px; }
.aviso-accion { flex: none; align-self: center; }
.aviso a:not(.btn) { color: inherit; font-weight: 600; }
@media (max-width: 599px) { .aviso-accion { margin-left: 34px; } .aviso-grande .aviso-accion { margin-left: 40px; } }

.franja { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--s2); color: var(--tx); font: 14px/1.4 var(--fb); }
.franja .ms { font-size: 20px; flex: none; }
.franja b { font: 600 14px/1.4 var(--fh); }
.franja-info { background: var(--ins); color: var(--int); }
.franja a { color: inherit; font-weight: 600; margin-left: auto; white-space: nowrap; }

.aviso-breve { position: fixed; z-index: 90; left: 16px; right: 16px; bottom: calc(var(--barra-alto) + 16px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px;
  background: var(--tx); color: var(--bg); font: 15px/1.4 var(--fb); box-shadow: var(--sh2); animation: vkUp .25s var(--curva) both; }
.aviso-breve .ms { font-size: 22px; flex: none; }
.aviso-breve > span:last-child { flex: 1; min-width: 0; }
.aviso-breve.es-error .ms { color: var(--ers); }
.aviso-breve.sale { animation: vkBreveSale .22s ease-in forwards; }
@keyframes vkBreveSale { to { opacity: 0; transform: translateY(10px); } }
@media (min-width: 900px) { .aviso-breve { left: 50%; right: auto; width: 460px; margin: 0 0 0 -230px; bottom: calc(var(--barra-alto) + 32px); } }

/* ── Estados de pantalla: cartel, vacío, esqueletos, celebración, espera ───────────────────────────────────────────────────────── */
.cartel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0; text-align: center; }
.cartel-icono { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--s2); color: var(--tx); }
.cartel-icono .ms { font-size: 52px; }
.cartel-ok .cartel-icono { background: var(--oks); color: var(--okt); animation: vkPop .5s both; }
.cartel-info .cartel-icono { background: var(--brs); color: var(--brst); }
.cartel-error .cartel-icono { background: var(--ers); color: var(--ert); }
.cartel-titulo { font: 600 25px/1.2 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.cartel-texto { max-width: 340px; font: 16px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; }
.cartel-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 6px; align-self: stretch; margin-top: 8px; }
@media (min-width: 600px) { .cartel-acciones { align-self: center; min-width: 320px; } }

.vacio { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 22px; border-radius: var(--r-card-lg);
  background: var(--sf); box-shadow: var(--sh); text-align: center; }
.vacio-plano { background: transparent; box-shadow: none; }
.vacio-iso, .logo-vk.vacio-iso { width: 132px; max-width: 100%; height: auto; animation: vkFloat 2.6s ease-in-out infinite; }
.vacio-marco { display: grid; place-items: center; width: 120px; height: 104px; border-radius: 28px; background: var(--brs); }
.vacio-marco .vacio-iso, .vacio-marco .logo-vk.vacio-iso { width: 84px; }
.vacio-titulo { font: 700 22px/1.2 var(--fh); text-wrap: balance; }
.vacio-texto { max-width: 420px; font: 15px/1.45 var(--fb); color: var(--t2); text-wrap: pretty; }
.vacio-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }

.esqueleto { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--s2) 0, var(--sf) 50%, var(--s2) 100%) 0 0 / 800px 100%;
  animation: vkShim 1.3s linear infinite; }
.esq-linea { height: 14px; }
.esq-titulo { height: 30px; width: 60%; }
.esq-corta { width: 55%; }
.esq-media { width: 85%; }
.esq-boton { height: 56px; border-radius: var(--r-pill); }
.esq-tarjeta { height: 130px; border-radius: var(--r-card); }
.esq-foto { height: 210px; border-radius: var(--r-card-lg); }
.esq-circulo { border-radius: 50%; }
.cargando-pila { display: flex; flex-direction: column; gap: 14px; }
.cargando-texto { text-align: center; font: 14px var(--fb); color: var(--t2); }

.celebracion { position: relative; display: grid; place-items: center; width: 128px; height: 128px; margin: 36px auto 40px; }
.celebracion-check { position: relative; z-index: 1; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%;
  background: var(--br); color: var(--onbr); animation: vkPop .55s cubic-bezier(.2, .8, .3, 1.3) both; }
.celebracion-check .ms { font-size: 58px; font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48; }
.celebracion-punto { position: absolute; left: 50%; top: 50%; width: 10px; height: 16px; border-radius: 3px; background: var(--br);
  transform: translate(-50%, -50%); animation: vkConf .9s var(--retraso, 0s) cubic-bezier(.2, .8, .3, 1) both; }
.celebracion-punto.chico { width: 8px; height: 8px; }
.celebracion-punto.redondo { border-radius: 50%; }
.celebracion-punto.c1 { background: var(--tx); }
.celebracion-punto.c2 { background: var(--brl); }
.celebracion-punto.c3 { background: var(--t2); }

.espera { display: grid; place-items: center; padding: 12px; text-align: center; }
.espera-in { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.espera-vaca { display: block; width: 240px; max-width: 70vw; aspect-ratio: 620 / 520; }
.espera-frase { font: 600 18px/1.3 var(--fh); }
.espera-sub { font: 14px/1.45 var(--fb); color: var(--t2); max-width: 320px; }
.espera-velo { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; background: var(--bg); animation: vkFade .2s; }

/* ── Listas de filas y tabla del panel ─────────────────────────────────────────────────────────────────────────────────────────── */
.lista { display: block; background: var(--sf); border-radius: var(--r-card); box-shadow: var(--sh); padding: 4px 18px; }
.lista-suave { background: var(--bg); box-shadow: none; border-radius: 20px; }
.lista-fila { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--ln);
  color: inherit; text-decoration: none; }
.lista-fila:last-child { border-bottom: 0; }
button.lista-fila { width: 100%; background: none; border-width: 0 0 1px; border-style: solid; border-color: var(--ln); font: inherit; text-align: left; cursor: pointer; }
button.lista-fila:last-child { border-bottom-width: 0; }
.lista-fila > .ms { font-size: 22px; color: var(--t2); flex: none; }
.lista-texto { flex: 1; min-width: 0; font: 14px/1.4 var(--fb); }
.lista-titulo { display: block; font: 600 15px/1.3 var(--fh); }
.lista-sub { display: block; font: 13px/1.4 var(--fb); color: var(--t2); }
.lista-fin { display: flex; align-items: center; gap: 8px; flex: none; text-align: right; }
.lista-fin .num { font: 600 14px var(--fh); font-variant-numeric: tabular-nums; }
@media (hover: hover) { a.lista-fila:hover .lista-titulo, button.lista-fila:hover .lista-titulo { color: var(--brt); } }
.lista-fila:focus-visible { border-radius: 10px; }
@media (max-width: 599px) { .lista-fila.envuelve { flex-wrap: wrap; } .lista-fila.envuelve .lista-fin { width: 100%; justify-content: flex-start; padding-left: 50px; } }

.tabla-wrap { background: var(--sf); border-radius: var(--r-card); box-shadow: var(--sh); padding: 4px 18px; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font: 14px/1.4 var(--fb); color: var(--tx); }
.tabla th { padding: 13px 12px 10px 0; border-bottom: 1px solid var(--ln); text-align: left; vertical-align: bottom; white-space: nowrap;
  font: 600 12.5px/1.3 var(--fh); color: var(--t2); }
.tabla td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--ln); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla td b, .tabla .fuerte { font: 600 14px/1.35 var(--fh); }
.tabla .sub { display: block; font: 13px/1.4 var(--fb); color: var(--t2); }
.tabla td.acciones { text-align: right; white-space: nowrap; }
.tabla td.acciones .btn + .btn { margin-left: 6px; }
@media (max-width: 699px) {
  .tabla.apilable thead { display: none; }
  .tabla.apilable, .tabla.apilable tbody, .tabla.apilable tr, .tabla.apilable td { display: block; width: 100%; }
  .tabla.apilable tr { padding: 12px 0; border-bottom: 1px solid var(--ln); }
  .tabla.apilable tr:last-child { border-bottom: 0; }
  .tabla.apilable td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .tabla.apilable td::before { content: attr(data-etiqueta); flex: none; text-align: left; font: 13px/1.4 var(--fb); color: var(--t2); }
  .tabla.apilable td.principal { display: block; padding-bottom: 6px; text-align: left; }
  .tabla.apilable td.principal::before, .tabla.apilable td.acciones::before { content: none; }
  .tabla.apilable td.acciones { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 10px; text-align: left; }
  .tabla.apilable td.acciones .btn + .btn { margin-left: 0; }
}

/* ── Grillas de página y visibilidad ───────────────────────────────────────────────────────────────────────────────────────────── */
.pila { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pila-chica { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cols-2, .cols-3, .cols-21 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.cols-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
@media (min-width: 900px) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .cols-21 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
@media (max-width: 899px) { .solo-compu { display: none !important; } }
@media (min-width: 900px) { .solo-celu { display: none !important; } }
img.solo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) img.solo-claro { display: none; }
  :root:not([data-tema="claro"]) img.solo-oscuro { display: block; }
}
:root[data-tema="oscuro"] img.solo-claro { display: none; }
:root[data-tema="oscuro"] img.solo-oscuro { display: block; }
:root .t-oscuro img.solo-claro { display: none; }
:root .t-oscuro img.solo-oscuro { display: block; }
:root .t-claro img.solo-oscuro { display: none; }
:root .t-claro img.solo-claro { display: block; }
.logo-vk { display: block; width: auto; max-width: none; flex: none; }

/* Ajustes (07/10, pedidos del panel): el texto chico no pierde su relleno de botón de texto. */
.btn-texto.btn-chico { padding: 0 6px; }

/* ── 11-grilla.css ── */
/* ═══ 11 · La grilla de números (guía §8 «Grilla de números» y §3.3; PantallaComprador C2 y PantallaPanel I7). La arma 11-grilla.js
   dentro de partes/grilla.php: nunca hay más de 100 casillas en pantalla, con 100 o con 100.000 números.
     .grilla [.modo-comprador | .modo-vendedor | .modo-panel] [.con-resumen]   contenedor (container query: 10 columnas desde 560 px)
       .grilla-buscador (input + .grilla-rango) · .grilla-pista · .grilla-resultado (.grilla-res-fila, .grilla-res-num, .grilla-res-titulo,
       .grilla-res-sub, .grilla-res-mio, .grilla-res-aviso, .grilla-cercanos > .grilla-cercano)
       .grilla-herramientas (.grilla-azar = .btn.btn-contorno + .grilla-precio) · .grilla-leyenda (.ley-libre/-mio/-vendido/-reservado/-efectivo)
       .grilla-nav (.grilla-nav-flecha ×2 + .grilla-nav-bloque con .grilla-nav-libres) · .grilla-cuadro > .grilla-casillas > .casilla
       .casilla estados: libre (sin clase) · .es-mio (tu selección: --br, doble anillo, ✓ en círculo) · .es-vendido (--sold tachado) ·
         .es-reservado (rayado --s2/--sf, borde punteado --t2, reloj) · .es-perdido (se vendió mientras mirabas: anillo --er, «!», sacudida) ·
         .es-efectivo (solo panel: --gds, punteado --gdl) · .es-elegido (panel: el que estás mirando) · .es-buscado · .esq (esqueleto) · .recien
       .grilla-barra (fija abajo en el celular; en la compu va en .grilla-resumen de la columna lateral o queda pegada al pie de la grilla)
         .grilla-elegidos > .grilla-elegido (chip que se quita) | .grilla-ninguno · .grilla-total-fila (.grilla-total + .grilla-continuar)
     .grilla-resumen[data-grilla-resumen="id"]   el resumen en la columna lateral de la compu (≥ 1000 px; en el celular no se muestra)
     hoja de bloques: .bloques-miles > .bloques-mil[aria-pressed] · .bloques-lista > .bloque-op[aria-current] (barra de libres: style="--p:37%")
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.grilla { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.grilla-cargando { display: flex; flex-direction: column; gap: 14px; }
.grilla-esq-buscador { height: 58px; border-radius: 18px; }

/* Buscador: el protagonista */
.grilla-buscador { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 8px 0 16px; border-radius: 18px; border: 1px solid var(--ln);
  background: var(--sf); box-shadow: var(--sh); cursor: text; transition: border-color .15s ease, box-shadow .15s ease; }
.grilla-buscador:focus-within { border-color: var(--brl); box-shadow: 0 0 0 4px var(--brs); }
.grilla-buscador > .ms { font-size: 24px; color: var(--t2); }
.grilla-buscador input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tx);
  font: 600 19px/1 var(--fh); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.grilla-buscador input::placeholder { color: var(--t2); font-weight: 500; letter-spacing: 0; opacity: 1; }
.grilla-buscador input::-webkit-search-cancel-button { display: none; }
.grilla-rango { flex: none; padding-right: 8px; font: 13px/1 var(--fb); color: var(--t2); white-space: nowrap; }
.grilla-limpiar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--t2); display: grid; place-items: center; cursor: pointer; flex: none; }
.grilla-limpiar .ms { font-size: 20px; }
.grilla-pista { margin-top: -4px; padding: 0 4px; font: 14px/1.4 var(--fb); color: var(--t2); }
.grilla-resultado { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; background: var(--sf); box-shadow: var(--sh);
  animation: vkUp .2s ease-out; }
.grilla-resultado[hidden] { display: none; }
.grilla-res-fila { display: flex; align-items: center; gap: 12px; }
.grilla-res-num { flex: none; display: grid; place-items: center; height: 52px; min-width: 74px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--ln);
  font: 700 19px/1 var(--fh); font-variant-numeric: tabular-nums; }
.grilla-res-num.es-vendido { border: 0; background: var(--sold); color: var(--soldt); font-weight: 600; font-size: 18px; text-decoration: line-through; }
.grilla-res-num.es-reservado { border: 1.5px dashed var(--t2); background: repeating-linear-gradient(135deg, var(--s2) 0 5px, var(--sf) 5px 10px); color: var(--t2); }
.grilla-res-num.es-efectivo { border: 2px dashed var(--gdl); background: var(--gds); color: var(--gdst); }
.grilla-res-num.es-mio { border: 0; background: var(--br); color: var(--onbr); }
.grilla-res-texto { flex: 1; min-width: 0; }
.grilla-res-titulo { font: 600 16px/1.3 var(--fh); }
.es-libre .grilla-res-titulo { color: var(--okt); }
.grilla-res-sub { font: 14px/1.4 var(--fb); color: var(--t2); }
.grilla-res-fila .btn { flex: none; }
.grilla-res-mio { display: flex; align-items: center; gap: 10px; font: 600 15px/1.35 var(--fh); color: var(--brt); }
.grilla-res-mio .ms { font-size: 22px; }
.grilla-res-aviso { display: flex; align-items: center; gap: 10px; font: 15px/1.4 var(--fb); color: var(--ert); }
.grilla-res-aviso .ms { font-size: 20px; }
.grilla-cercanos { display: flex; gap: 8px; }
.grilla-cercano { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 46px; border-radius: 14px; border: 0;
  box-shadow: inset 0 0 0 1.5px var(--brl); background: var(--sf); color: var(--brt); font: 700 16px/1 var(--fh); font-variant-numeric: tabular-nums; cursor: pointer; }
.grilla-cercano .ms { font-size: 19px; }
@media (hover: hover) { .grilla-cercano:hover { box-shadow: inset 0 0 0 2px var(--brl); } }
.grilla-cercano:focus-visible { border-radius: 14px; }

/* Herramientas, leyenda y navegación */
.grilla-herramientas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grilla-azar { --btn-alto: 46px; padding: 0 18px 0 14px; gap: 8px; }
.grilla-azar[aria-busy="true"] .ms { animation: vkGira .5s linear infinite; }
.grilla-precio { font: 14px/1.3 var(--fb); color: var(--t2); }
.grilla-leyenda { display: flex; flex-wrap: wrap; gap: 8px 14px; font: 13px/1.3 var(--fb); color: var(--t2); }
.grilla-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.ley { position: relative; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; }
.ley-libre { border: 1px solid var(--ln); background: var(--sf); }
.ley-mio { background: var(--br); color: var(--onbr); }
.ley-mio .ms { font-size: 14px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.ley-vendido { background: var(--sold); }
.ley-vendido::after { content: ''; position: absolute; left: 3px; right: 3px; top: 8px; height: 1.5px; background: var(--soldt); }
.ley-reservado { border: 1.5px dashed var(--t2); background: repeating-linear-gradient(135deg, var(--s2) 0 3px, var(--sf) 3px 6px); }
.ley-efectivo { border: 2px dashed var(--gdl); background: var(--gds); }
.grilla-nav { container-type: inline-size; display: flex; align-items: center; gap: 8px; }
@container (max-width: 340px) { .grilla-nav-libres { display: none; } }
.grilla-nav-flecha { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--ln); background: var(--sf);
  color: var(--tx); cursor: pointer; }
.grilla-nav-flecha .ms { font-size: 22px; }
.grilla-nav-flecha:disabled { opacity: .4; cursor: default; }
.grilla-nav-bloque { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 8px; border-radius: 14px;
  border: 1px solid var(--ln); background: var(--sf); color: var(--tx); cursor: pointer; }
.grilla-nav-bloque b { font: 600 16px/1 var(--fh); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grilla-nav-libres { font: 13px/1 var(--fb); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.grilla-nav-bloque .ms { font-size: 20px; color: var(--tx); }
.grilla-nav-flecha:focus-visible, .grilla-nav-bloque:focus-visible { border-radius: 14px; }
@media (hover: hover) { .grilla-nav-flecha:not(:disabled):hover, .grilla-nav-bloque:hover { border-color: var(--t2); } }

/* Las casillas: 52 px, 5 columnas en el celular y 10 (una decena por fila) cuando la grilla tiene lugar (container query en .grilla-cuadro,
   no en .grilla: así la barra fija de abajo nunca queda atada al contenedor) */
.grilla-cuadro { container-type: inline-size; }
.grilla-casillas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
@container (min-width: 560px) { .grilla-casillas { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.casilla { position: relative; display: grid; place-items: center; min-width: 0; height: 52px; padding: 0; border: 1px solid var(--ln); border-radius: var(--r-tile);
  background: var(--sf); color: var(--tx); font: 600 16px/1 var(--fh); font-variant-numeric: tabular-nums; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .2s ease, filter .15s ease, border-color .15s ease; }
.casilla:active { transform: scale(.97); }
@media (hover: hover) { .casilla:not(.es-vendido):not(.es-reservado):not(.es-perdido):not(.esq):hover { border-color: var(--brl); } }
.casilla:focus-visible { border-radius: var(--r-tile); outline-offset: 3px; }
.casilla-marca { position: absolute; top: -8px; right: -8px; z-index: 1; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; }
.casilla-marca .ms { font-size: 15px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.casilla.es-mio { border: 0; background: var(--br); color: var(--onbr); font-weight: 700; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brl); }
.casilla.es-mio .casilla-marca { background: var(--sf); color: var(--brt); box-shadow: 0 0 0 2px var(--brl); }
@media (hover: hover) { .casilla.es-mio:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brl), 0 12px 26px -12px var(--br); transform: translateY(-1px); } }
.casilla.es-vendido { border: 0; background: var(--sold); color: var(--soldt); font-weight: 500; font-size: 15px; text-decoration: line-through;
  text-decoration-thickness: 1.5px; opacity: .78; cursor: not-allowed; }
.casilla.es-reservado { border: 1.5px dashed var(--t2); background: repeating-linear-gradient(135deg, var(--s2) 0 5px, var(--sf) 5px 10px); color: var(--t2);
  font-size: 15px; cursor: not-allowed; }
.casilla.es-reservado .casilla-marca { background: var(--sf); color: var(--t2); box-shadow: 0 0 0 1.5px var(--t2); }
.casilla.es-reservado .casilla-marca .ms { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.casilla.es-perdido { border: 0; background: var(--sold); color: var(--soldt); font-size: 15px; text-decoration: line-through; cursor: not-allowed;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--er); }
.casilla.es-perdido .casilla-marca { background: var(--er); color: var(--bg); }
.casilla.es-efectivo { border: 2px dashed var(--gdl); background: var(--gds); color: var(--gdst); }
.casilla.es-elegido { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brl); }
.casilla.es-buscado { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brl); animation: vkPop .4s ease-out; }
.casilla.es-mio.recien { animation: vkPop .22s ease-out; }
.casilla.es-perdido.recien { animation: vkShake .45s ease-in-out; }
.casilla.esq { border: 0; cursor: default; background: linear-gradient(90deg, var(--s2) 0, var(--sf) 50%, var(--s2) 100%) 0 0 / 800px 100%;
  animation: vkShim 1.3s linear infinite; }
.grilla-error { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Grilla del panel (I7): más compacta, todo se puede tocar para ver el detalle */
.modo-panel .grilla-casillas { gap: 6px; }
.modo-panel .casilla { height: 44px; border-radius: var(--r-tile-adm); font: 500 13px/1 var(--fh); font-variant-numeric: tabular-nums; }
.modo-panel .casilla.es-vendido, .modo-panel .casilla.es-reservado { opacity: 1; cursor: pointer; font-size: 13px; }
.modo-panel .casilla.es-efectivo { font-weight: 600; }
.modo-panel .casilla-marca { display: none; }
.modo-panel .casilla:focus-visible { border-radius: var(--r-tile-adm); }
@container (min-width: 560px) { .modo-panel .casilla { height: 40px; font-size: 12.5px; } }

/* La barra de abajo con la selección */
.grilla-barra { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--sf); border-top: 1px solid var(--ln); }
.grilla-elegidos { display: flex; align-items: center; gap: 6px; min-height: var(--tap); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.grilla-elegidos::-webkit-scrollbar { display: none; }
.grilla-elegido { flex: none; display: flex; align-items: center; gap: 2px; height: var(--tap); padding: 0 6px 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--brs); color: var(--brst); font: 700 14px/1 var(--fh); font-variant-numeric: tabular-nums; cursor: pointer; }
.grilla-elegido .ms { font-size: 18px; }
.grilla-elegido.recien { animation: vkPop .2s ease-out; }
.grilla-elegido:focus-visible { border-radius: var(--r-pill); }
.grilla-ninguno { font: 15px/1.3 var(--fb); color: var(--t2); }
.grilla-total-fila { display: flex; align-items: center; gap: 14px; }
.grilla-total { flex: none; min-width: 96px; }
.grilla-total small { display: block; font: 13px/1.3 var(--fb); color: var(--t2); }
.grilla-total b { display: block; font: 700 21px/1.2 var(--fh); font-variant-numeric: tabular-nums; }
.grilla-continuar { flex: 1; min-width: 0; padding: 0 16px; }
.grilla-resumen { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--sh); }
.grilla-resumen .grilla-elegidos { flex-wrap: wrap; overflow: visible; }
@media (max-width: 999px) { .grilla-resumen { display: none; } }
@media (min-width: 900px) {
  .cara-vendedor .grilla-barra, .cara-panel .grilla-barra { position: sticky; bottom: 16px; padding: 20px; border: 0; border-radius: var(--r-card);
    box-shadow: var(--sh2), 0 0 0 1px var(--ln); }
}
@media (min-width: 1000px) {
  .grilla-barra { position: sticky; bottom: 16px; padding: 20px; border: 0; border-radius: var(--r-card); box-shadow: var(--sh2), 0 0 0 1px var(--ln); }
  .grilla-barra .grilla-elegidos { flex-wrap: wrap; overflow: visible; }
  .grilla.con-resumen .grilla-barra { display: none; }
}

/* Hoja «Ir a otro bloque» */
.bloques-miles { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px 2px; }
.bloques-miles::-webkit-scrollbar { display: none; }
.bloques-mil { flex: none; height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 0; box-shadow: inset 0 0 0 1px var(--ln); background: var(--sf);
  color: var(--tx); font: 600 14px/1 var(--fh); font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap; }
.bloques-mil[aria-pressed="true"] { background: var(--tx); color: var(--bg); box-shadow: none; }
.bloques-mil:focus-visible { border-radius: var(--r-pill); }
.bloques-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bloque-op { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--ln); background: var(--sf); color: var(--tx);
  text-align: left; cursor: pointer; }
.bloque-op[aria-current="true"] { border: 2px solid var(--brl); padding: 11px 13px; }
.bloque-op b { font: 600 16px/1.2 var(--fh); font-variant-numeric: tabular-nums; }
.bloque-op > span { font: 13px/1.3 var(--fb); color: var(--t2); }
.bloque-op > i { display: block; height: 6px; border-radius: 9px; background: var(--s2); overflow: hidden; }
.bloque-op > i::after { content: ''; display: block; height: 100%; width: var(--p, 0%); border-radius: 9px; background: var(--brl); }
.bloque-op.esq { height: 78px; border: 0; cursor: default; }
.bloque-op:focus-visible { border-radius: 16px; }
@media (hover: hover) { .bloque-op:not([aria-current="true"]):not(.esq):hover { border-color: var(--t2); } }
.bloques-nota { font: 13px/1.4 var(--fb); color: var(--t2); text-align: center; }
@media (min-width: 900px) { .bloques-miles { margin: 0; padding: 0 0 2px; flex-wrap: wrap; } }

/* Ajustes (07/10, pedidos del panel): en la grilla administrativa los vendidos no van tachados (diseño I7); con poco ancho, el
   rango del buscador se esconde para dejarle lugar al campo. */
.modo-panel .casilla.es-vendido { text-decoration: none; }
@media (max-width: 399px) { .grilla-rango { display: none; } }

/* ── 12-comprobante.css ── */
/* ═══ 12 · Comprobante / talón (guía §8 «Comprobante»; PantallaComprador C5 y C5b). Lo arma partes/comprobante.php. ════════════════
     .talon                     tarjeta del comprobante (radio 28, sombra)
       .talon-franja            franja del color de la institución: logo (monograma invertido) + institución + campaña
       .talon-numeros           «Tus números» + .talon-fichas > .talon-ficha (números enormes en fichas suaves --brs)
       .talon-perforado         perforado: dos semicírculos del color del fondo + línea punteada
       .talon-datos             .talon-dl (A nombre de, Compraste, Le compraste a, Total) + .talon-qr (QR negro sobre blanco + código)
       .talon-pie               «Ganadores: sábado 28/11, con la Lotería Nocturna de Mendoza»
     .talon.es-provisorio       PROVISORIO: borde punteado de 2 px, .talon-cabeza (logo + campaña + .sello «PROVISORIO»), fichas neutras
       .pasos > .paso [.es-hecho | .es-actual | .es-pendiente | .es-fallido]   aceptación → pago en mano → confirmación
         .paso-marca (círculo de 30) · .paso-linea · .paso-texto (.paso-titulo + .paso-sub)
   El QR va siempre negro sobre blanco (--qr / --qrt), también en el modo oscuro.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.talon { position: relative; overflow: hidden; border-radius: var(--r-card-lg); background: var(--sf); color: var(--tx); box-shadow: var(--sh); }
.talon-franja { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--br); color: var(--onbr); }
.talon-franja-texto { min-width: 0; }
.talon-inst { display: block; font: 600 13px/1.25 var(--fh); }
.talon-campania { display: block; margin-top: 2px; font: 700 17px/1.2 var(--fh); text-wrap: balance; }
.talon-numeros { padding: 18px 20px 14px; }
.talon-etiqueta { font: 600 14px/1.3 var(--fb); color: var(--t2); }
.talon-fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.talon-ficha { display: grid; place-items: center; min-width: 88px; height: 58px; padding: 0 12px; border-radius: 16px; background: var(--brs); color: var(--brst);
  font: 700 29px/1 var(--fh); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.talon-perforado { position: relative; height: 24px; }
.talon-perforado::before, .talon-perforado::after { content: ''; position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.talon-perforado::before { left: -12px; }
.talon-perforado::after { right: -12px; }
.talon-perforado i { position: absolute; left: 22px; right: 22px; top: 11px; border-top: 2px dashed var(--ln); }
.talon-datos { display: flex; gap: 16px; padding: 8px 20px 16px; }
.talon-dl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; margin: 0; font: 14px/1.35 var(--fb); }
.talon-dl dt { color: var(--t2); }
.talon-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.talon-qr { flex: none; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.talon-qr-caja { display: grid; place-items: center; width: 120px; height: 120px; padding: 10px; border-radius: 16px; border: 1px solid var(--ln);
  background: var(--qr); color: var(--qrt); }
.talon-qr-caja svg, .talon-qr-caja img { width: 100%; height: 100%; max-width: none; }
.talon-qr-caja > .ms { font-size: 92px; }
.talon-codigo { font: 600 11px/1.2 var(--fb); letter-spacing: .03em; color: var(--t2); text-align: center; overflow-wrap: anywhere; }
.talon-pie { display: flex; align-items: center; gap: 10px; margin: 0 20px 20px; padding: 12px 14px; border-radius: 16px; background: var(--bg); font: 14px/1.4 var(--fb); }
.talon-pie .ms { font-size: 20px; color: var(--brt); flex: none; }
@media (max-width: 359px) { .talon-datos { flex-direction: column-reverse; align-items: flex-start; } }

/* Provisorio (C5b, efectivo). */
.talon.es-provisorio { border: 2px dashed var(--ln); }
.talon-cabeza { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--ln); }
.talon-cabeza-texto { flex: 1; min-width: 0; }
.talon-cabeza-texto b { display: block; font: 700 15px/1.2 var(--fh); }
.talon-cabeza-texto span { display: block; font: 13px/1.35 var(--fb); color: var(--t2); }
.sello { flex: none; display: inline-grid; place-items: center; height: 28px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--tx);
  font: 700 11px/1 var(--fh); letter-spacing: .08em; text-transform: uppercase; }
.es-provisorio .talon-fichas { margin: 0; padding: 16px 20px 6px; }
.es-provisorio .talon-ficha { min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px; background: var(--s2); color: var(--tx); font-size: 24px; }
.pasos { padding: 16px 20px 6px; list-style: none; margin: 0; }
.paso { display: flex; gap: 14px; }
.paso-carril { display: flex; flex-direction: column; align-items: center; flex: none; }
.paso-marca { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ln); background: var(--sf); }
.paso-marca .ms { font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.paso.es-hecho .paso-marca { background: var(--ok); color: var(--sf); box-shadow: none; }
.paso.es-actual .paso-marca { background: var(--brs); color: var(--brst); box-shadow: inset 0 0 0 2.5px var(--brl); }
.paso.es-fallido .paso-marca { background: var(--ers); color: var(--ert); box-shadow: none; }
.paso-linea { flex: 1; width: 2px; min-height: 14px; margin: 4px 0; background: var(--ln); }
.paso:last-child .paso-linea { display: none; }
.paso-texto { padding: 4px 0 16px; min-width: 0; }
.paso-titulo { display: block; font: 600 15px/1.3 var(--fh); }
.paso-sub { display: block; margin-top: 2px; font: 14px/1.4 var(--fb); color: var(--t2); }
.paso.es-pendiente .paso-titulo { color: var(--t2); }

/* ── 13-navegacion.css ── */
/* ═══ 13 · Navegación y layouts de las caras (guía §8 «Navegación» y §9; PantallaComprador/Vendedor/Panel, Vakita 4 y 5). ═════════
   Los arman app/views/layout/<cara>_arriba.php y _abajo.php; las vistas no escriben nada de esto, salvo .principal / .lado del comprador.

   Comunes:  .saltar (salto al contenido) · .pie-vakita [.pie-vakita-chico] («con la tecnología de vakita») · .solo-ancho / .no-ancho (corte 1000)
             body padding-bottom = --barra-alto (lo mide el JS con las barras fijas: .grilla-barra, .barra-accion, .nav-pildora)
   Comprador: .inst-barra (+ -in, -titulo, .inst-verificada) · .volver-barra (+ .volver-fila, .volver-titulo, .volver-paso) · .pasos-segmentos
             .comprador-cuerpo: grilla de 1 columna (760 en la compu); si trae <aside class="lado">, 1fr + 380 px fija (≥ 1000 px)
             .principal (columna principal) · .lado (columna lateral: sticky en la compu; en el celular va abajo del contenido)
   Vendedor:  .app-vendedor · .menu-lateral.menu-vendedor (256) · .vend-arriba + .selector-campania [.es-fijo] + .btn-campanita (.punto)
             .vend-volver (barra atrás) · .vendedor-cuerpo · .nav-pildora + .nav-pildora-item (aria-current="page" = píldora del color)
   Panel:     .app-panel · .menu-lateral.menu-panel (252) · .menu-logo · .menu-inst · .menu-item (+ .contador) · .menu-sep · .menu-usuario
             .panel-cabeza (+ -texto, .panel-contexto, .panel-titulo, .panel-acciones) · .panel-franja · .panel-flash · .panel-contenido
             .nav-pildora-panel (dorada) · .hoja-bloque / .hoja-bloque-titulo (bloques de la hoja «Más»)
   Interno:   .app-interno · .menu-interno (siempre oscuro: .t-oscuro) · .interno-cabeza · .interno-titulo · .interno-contenido
   Sitio:     .sitio-cabeza (+ -in, .sitio-logo, .sitio-nav, .sitio-cta) · .sitio-cuerpo · .sitio-ancho (todo el ancho, márgenes --margen) · .sitio-pie (+ -in)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.saltar { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--tx); color: var(--bg);
  font: 600 14px var(--fh); text-decoration: none; }
.saltar:focus { top: 12px; }
main:focus { outline: 0; }
:root { scroll-padding-bottom: var(--barra-alto); }
.cara-comprador, .cara-vendedor, .cara-panel { padding-bottom: var(--barra-alto); }
@media (max-width: 999px) { .solo-ancho { display: none !important; } }
@media (min-width: 1000px) { .no-ancho { display: none !important; } }

.pie-vakita { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font: 13px/1.3 var(--fb); color: var(--t2); }
.pie-vakita .logo-vk { position: relative; top: 1px; }
.pie-vakita-chico { font-size: 12px; gap: 5px; }
.pie-cara { padding: 6px var(--gutter) 24px; }

/* ── Comprador ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cara-comprador { --lado: var(--margen); }
.inst-barra-in { max-width: var(--max-comprador); margin: 0 auto; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) var(--lado) 12px; }
.inst-barra-nombre { flex: 1; min-width: 0; }
.inst-barra-titulo { font: 600 15px/1.2 var(--fh); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inst-verificada { display: flex; align-items: center; gap: 4px; margin-top: 2px; font: 13px/1.3 var(--fb); color: var(--t2); }
.inst-verificada .ms { font-size: 16px; color: var(--brt); }
.con-volver .inst-barra { display: none; }
@media (min-width: 1000px) {
  .inst-barra, .con-volver .inst-barra { display: block; background: var(--sf); border-bottom: 1px solid var(--ln); }
  .inst-barra-in { gap: 14px; padding: 14px var(--lado); }
  .inst-barra-titulo { font-size: 16px; -webkit-line-clamp: 1; }
}
.volver-barra { max-width: var(--max-comprador); margin: 0 auto; display: flex; flex-direction: column; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) var(--lado) 12px; }
@media (min-width: 1000px) { .volver-barra { padding: 24px var(--lado) 6px; } }
.volver-fila { display: flex; align-items: center; gap: 12px; }
.volver-titulo { flex: 1; min-width: 0; }
.volver-titulo h1 { font: 600 19px/1.2 var(--fh); letter-spacing: -.01em; }
@media (min-width: 1000px) { .volver-titulo h1 { font-size: 24px; } }
.volver-paso { margin-top: 2px; font: 13px/1.3 var(--fb); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pasos-segmentos { display: flex; gap: 6px; }
.pasos-segmentos i { flex: 1; height: 4px; border-radius: 2px; background: var(--s2); }
.pasos-segmentos i.hecho { background: var(--brl); }

.comprador-cuerpo { max-width: var(--max-comprador); margin: 0 auto; padding: 2px var(--lado) 24px; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.principal, .lado { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.lado { gap: 14px; }
@media (min-width: 1000px) {
  .comprador-cuerpo { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 3vw, 56px); padding: 18px var(--lado) 48px; }
  .comprador-cuerpo:has(> .lado) { grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 480px); }
  .comprador-cuerpo > .lado { position: sticky; top: 16px; }
}

/* ── Menús laterales (vendedor y panel) ───────────────────────────────────────────────────────────────────────────────────────── */
.app-vendedor, .app-panel, .app-interno { min-height: 100dvh; }
.app-main { flex: 1; min-width: 0; }
.menu-lateral { display: none; }
@media (min-width: 900px) {
  .app-vendedor, .app-panel, .app-interno { display: flex; align-items: stretch; }
  .menu-lateral { display: flex; flex-direction: column; gap: 4px; flex: none; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    background: var(--sf); border-right: 1px solid var(--ln); scrollbar-width: thin; }
  .menu-vendedor { width: 256px; padding: 22px 16px; gap: 6px; }
  .menu-panel { width: 252px; padding: 20px 14px; }
}
.menu-logo { display: flex; align-items: center; gap: 8px; padding: 0 10px 16px; text-decoration: none; }
.menu-inst { display: flex; align-items: center; gap: 12px; padding: 6px 8px 18px; }
.menu-panel .menu-inst { gap: 10px; padding: 10px; margin-bottom: 10px; border-radius: 16px; background: var(--bg); }
.menu-inst-texto { min-width: 0; }
.menu-inst-texto b { display: block; font: 600 14px/1.2 var(--fh); }
.menu-panel .menu-inst-texto b { font-size: 13px; }
.menu-inst-texto span { display: block; font: 12px/1.35 var(--fb); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: transparent;
  color: var(--tx); font: 500 15px/1.2 var(--fh); text-align: left; text-decoration: none; cursor: pointer; width: 100%; }
.menu-item .ms { font-size: 22px; }
.menu-item-texto { flex: 1; min-width: 0; }
.menu-item[aria-current="page"] { background: var(--brs); color: var(--brst); font-weight: 600; }
.menu-item:focus-visible { border-radius: 14px; }
@media (hover: hover) { .menu-item:not([aria-current="page"]):hover { background: var(--bg); } }
.menu-panel .menu-item { min-height: 44px; padding: 0 12px; border-radius: 13px; font-size: 14px; }
.menu-panel .menu-item .ms { font-size: 21px; }
.menu-sep { padding: 16px 12px 6px; font: 600 11px/1.2 var(--fh); letter-spacing: .1em; text-transform: uppercase; color: var(--t2); }
.menu-espacio { flex: 1; min-height: 12px; }
.menu-consejo { padding: 14px; border-radius: 16px; background: var(--bg); font: 13px/1.4 var(--fb); color: var(--t2); }
.menu-consejo b { font: 600 13px var(--fh); color: var(--tx); }
.menu-vendedor .pie-vakita { padding-top: 10px; }
.menu-usuario { display: flex; align-items: center; gap: 10px; padding: 10px 0 0 10px; border-top: 1px solid var(--ln); }
.menu-usuario-texto { flex: 1; min-width: 0; font: 13px/1.3 var(--fb); }
.menu-usuario-texto b { display: block; font: 600 13px var(--fh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario-texto span { display: block; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Vendedor ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vend-arriba { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 20px 14px; }
@media (min-width: 900px) {
  .vend-arriba { padding: 24px var(--margen-panel) 12px; }
  .vend-arriba .selector-campania { max-width: 640px; }
  .vend-volver .inst-logo { display: none; }
}
.selector-campania { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 6px;
  border: 1px solid var(--ln); border-radius: var(--r-pill); background: var(--sf); color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.selector-campania.es-fijo { cursor: default; }
.selector-campania > .ms { font-size: 22px; color: var(--t2); }
.selector-campania:focus-visible { border-radius: var(--r-pill); }
@media (hover: hover) { button.selector-campania:hover { border-color: var(--t2); } }
.selector-texto { flex: 1; min-width: 0; }
.selector-texto b, .selector-texto span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector-texto b { font: 600 14px/1.2 var(--fh); }
.selector-texto span { font: 12px/1.35 var(--fb); color: var(--t2); }
.btn-campanita { position: relative; }
.punto { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--br); box-shadow: 0 0 0 2px var(--sf); }
.btn-campanita .punto { top: 13px; right: 14px; }
.vend-volver-titulo { flex: 1; min-width: 0; font: 600 19px/1.2 var(--fh); letter-spacing: -.01em; }
.vendedor-cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 6px 20px 24px; min-width: 0; }
@media (min-width: 900px) { .vendedor-cuerpo { gap: 18px; padding: 8px var(--margen-panel) 40px; } }

/* ── Píldora flotante del celular (vendedor y panel) ──────────────────────────────────────────────────────────────────────────── */
.nav-pildora { position: fixed; z-index: 45; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 68px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--sf); box-shadow: var(--sh2), 0 0 0 1px var(--ln); }
@media (min-width: 900px) { .nav-pildora { display: none; } }
body:has(.grilla-barra) .nav-pildora, body:has(.barra-accion) .nav-pildora { display: none; }
.nav-pildora-item { position: relative; flex: 0 1 auto; min-width: 48px; height: 52px; padding: 0 6px; border: 0; border-radius: var(--r-pill);
  background: none; color: var(--t2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: 500 12px/1.1 var(--fh); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav-pildora-item .ms { font-size: 23px; }
.nav-pildora-item .largo { display: none; }
.nav-pildora-item[aria-current="page"] { flex-direction: row; gap: 7px; padding: 0 18px 0 14px; background: var(--br); color: var(--onbr); font: 600 14px/1 var(--fh); }
.nav-pildora-item[aria-current="page"] .ms { font-size: 22px; }
.nav-pildora-item[aria-current="page"] .largo { display: inline; }
.nav-pildora-item[aria-current="page"] .corto { display: none; }
.nav-pildora-item:focus-visible { border-radius: var(--r-pill); }
.nav-pildora-item .punto { top: 8px; right: 10px; background: var(--er); }
.nav-pildora-panel { left: 14px; right: 14px; height: 66px; padding: 0 8px; }
.nav-pildora-panel .nav-pildora-item { height: 50px; min-width: 46px; }
.nav-pildora-panel .nav-pildora-item .ms { font-size: 22px; }
.nav-pildora-panel .nav-pildora-item[aria-current="page"] { gap: 6px; padding: 0 14px 0 12px; font-size: 13px; }
@media (max-width: 379px) {
  .nav-pildora-item[aria-current="page"] { padding: 0 12px 0 10px; }
  .nav-pildora-item[aria-current="page"] .largo { display: none; }
  .nav-pildora-item[aria-current="page"] .corto { display: inline; }
}

/* ── Panel de la institución ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.panel-cabeza { display: flex; align-items: center; gap: 12px; padding: calc(8px + env(safe-area-inset-top)) 18px 12px; }
@media (min-width: 900px) { .panel-cabeza { gap: 14px; padding: 26px var(--margen-panel) 14px; } }
.panel-cabeza-texto { flex: 1; min-width: 0; }
.panel-contexto { font: 13px/1.35 var(--fb); color: var(--t2); }
.panel-titulo { font: 600 22px/1.15 var(--fh); letter-spacing: -.02em; }
@media (min-width: 900px) { .panel-titulo { font-size: 28px; } }
.panel-acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.panel-acciones .btn { min-height: 46px; font-size: 15px; padding: 0 18px; }
.panel-acciones .btn .ms { font-size: 21px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
@media (max-width: 899px) {
  /* En el celular la acción es un círculo de 46 con el ícono (PantallaPanel): con el texto a la vista apretaba el título hasta
     dejarlo en 60 px. El texto queda para los lectores de pantalla (.btn-etiqueta) y es el nombre del botón. */
  .panel-acciones .btn { width: 46px; padding: 0; }
  .panel-acciones .btn-etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.panel-franja, .panel-flash { margin: 0 18px 8px; }
@media (min-width: 900px) { .panel-franja, .panel-flash { margin: 0 var(--margen-panel) 8px; } }
.panel-contenido { display: flex; flex-direction: column; gap: 14px; padding: 4px 18px 24px; min-width: 0; }
@media (min-width: 900px) { .panel-contenido { gap: 16px; padding: 6px var(--margen-panel) 40px; } }
.hoja-bloque { display: flex; flex-direction: column; gap: 10px; }
.hoja-bloque-titulo { font: 600 11px/1.2 var(--fh); letter-spacing: .1em; text-transform: uppercase; color: var(--t2); }

/* ── Panel interno (siempre con el menú oscuro) ───────────────────────────────────────────────────────────────────────────────── */
.menu-interno { display: flex; flex-direction: column; gap: 4px; background: var(--bg); color: var(--tx); }
.menu-interno-etiqueta { margin-left: 6px; font: 600 11px/1 var(--fh); letter-spacing: .06em; color: var(--t2); }
.menu-interno-items { display: flex; flex-direction: column; gap: 4px; }
.menu-interno .menu-item { min-height: 44px; padding: 0 12px; border-radius: 12px; font: 500 14px/1.2 var(--fh); color: var(--tx); }
.menu-interno .menu-item .ms { font-size: 20px; }
.menu-interno .menu-item[aria-current="page"] { background: color-mix(in srgb, var(--gd) 18%, transparent); color: var(--gdt); }
@media (hover: hover) { .menu-interno .menu-item:not([aria-current="page"]):hover { background: var(--sf); } }
.menu-salir { margin: 0; }
@media (min-width: 900px) {
  .menu-interno { width: 230px; flex: none; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 22px 14px; }
  .menu-interno .menu-logo { padding: 0 10px 18px; }
}
@media (max-width: 899px) {
  .menu-interno { position: sticky; top: 0; z-index: 30; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
  .menu-interno .menu-logo { padding: 2px 6px 6px; }
  .menu-interno-items { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .menu-interno-items::-webkit-scrollbar { display: none; }
  .menu-interno .menu-item { width: auto; flex: none; white-space: nowrap; }
  .menu-interno .menu-espacio, .menu-interno .menu-salir { display: none; }
  .menu-item-codigo { display: none; }
}
.interno-cabeza { display: flex; align-items: center; gap: 14px; padding: 22px 18px 10px; }
@media (min-width: 900px) { .interno-cabeza { padding: 28px var(--margen-panel) 12px; } }
.interno-titulo { font: 600 24px/1.15 var(--fh); letter-spacing: -.02em; }
@media (min-width: 900px) { .interno-titulo { font-size: 26px; } }
.interno-contenido { display: flex; flex-direction: column; gap: 16px; padding: 6px 18px 32px; min-width: 0; }
@media (min-width: 900px) { .interno-contenido { padding: 6px var(--margen-panel) 40px; } }

/* ── Sitio ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cara-sitio { font-size: 17px; line-height: 1.55; }
.sitio-cabeza { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--ln) 70%, transparent); }
.sitio-cabeza-in { margin: 0 auto; display: flex; align-items: center; gap: clamp(14px, 3vw, 28px);
  padding: calc(12px + env(safe-area-inset-top)) var(--margen) 12px; }
@media (min-width: 720px) { .sitio-cabeza-in { padding: 14px var(--margen); } }
.sitio-logo { display: flex; flex: none; }
@media (max-width: 719px) { .sitio-logo .sitio-logo-completo { display: none !important; } }
@media (min-width: 720px) { .sitio-logo .sitio-logo-iso { display: none !important; } }
.sitio-nav { flex: 1; min-width: 0; display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.sitio-nav::-webkit-scrollbar { display: none; }
.sitio-nav a { flex: none; padding: 12px 0; color: var(--tx); font: 500 15px/1.2 var(--fh); text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .sitio-nav a:hover { color: var(--gdt); } }
.sitio-cta { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--tx); color: var(--bg); font: 600 14px/1 var(--fh); text-decoration: none; white-space: nowrap; transition: transform .15s ease, background-color .15s ease; }
@media (hover: hover) { .sitio-cta:hover { background: var(--sold); color: var(--soldt); transform: translateY(-1px); } }
.sitio-cta:focus-visible { border-radius: var(--r-pill); }
.sitio-ancho { width: 100%; padding-left: var(--margen); padding-right: var(--margen); }
.sitio-pie { border-top: 1px solid var(--ln); }
.sitio-pie-in { margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 28px var(--margen) 40px; font: 14px/1.45 var(--fb); color: var(--t2); }

/* Legales al pie: términos y privacidad (sitio) y «Cómo cuidamos tus datos» (comprador: deja nombre y WhatsApp). */
.sitio-pie-legales { display: flex; gap: 18px; }
.sitio-pie-legales a, .pie-legales a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 4px; color: var(--t2);
  font: 13px/1.4 var(--fb); text-underline-offset: 3px; }
@media (hover: hover) { .sitio-pie-legales a:hover, .pie-legales a:hover { color: var(--tx); } }
.pie-legales { margin: -14px 0 0; padding: 0 var(--margen) 24px; text-align: center; }

/* ── 14-hojas.css ── */
/* ═══ 14 · Hojas, ventanas y confirmaciones (guía §8 «Hoja inferior, ventana, aviso breve y confirmación»; §11 accesibilidad). ═══════
   Celular: hoja que sube desde abajo, manija y radio 30 arriba, velo --ov. Compu (≥ 900 px): ventana centrada de 520 (o 640 con .hoja-ancha).
   Las maneja W.hoja (10-componentes.js): foco atrapado, Esc, role=dialog + aria-modal y el foco vuelve al botón que la abrió.

     <div class="hoja" id="…" hidden>                 partes/hoja.php la arma; se abre con data-hoja="id" o W.hoja.abrir('id')
       .hoja-velo [data-cerrar] · .hoja-caja (role=dialog) · .hoja-manija · .hoja-cabeza (.hoja-titulo, .hoja-sub, .hoja-cerrar)
       .hoja-cuerpo · .hoja-acciones (botones de abajo, en columna en el celular y en fila en la compu) · .hoja-nota (texto chico)
     .hoja-confirmar                                  W.confirmar(): .confirmar-icono [.es-peligro] · .confirmar-titulo · .confirmar-texto
                                                      · .confirmar-motivo · .confirmar-botones («Sí, liberar» rojo + «Cancelar»)
     .foto-grande                                     la foto del premio en pantalla completa ([data-foto-grande="url"])
     .premio-ventana                                  la ventana del premio al lado del título en la compu (15-piezas.css arma la tarjeta)
   html.con-hoja bloquea el scroll de la página mientras hay una hoja abierta.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

html.con-hoja, html.con-hoja body { overflow: hidden; }
.hoja { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: flex-end; }
.hoja[hidden] { display: none; }
.hoja-velo { position: absolute; inset: 0; background: var(--ov); animation: vkFade .2s ease-out; }
.hoja-caja { position: relative; display: flex; flex-direction: column; gap: 14px; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--sf); color: var(--tx);
  box-shadow: var(--sh2); animation: vkSheet .3s var(--curva); }
.hoja-caja:focus { outline: 0; }
.hoja-manija { flex: none; width: 42px; height: 5px; margin: 0 auto 2px; border-radius: 3px; background: var(--ln); }
.hoja-cabeza { display: flex; align-items: flex-start; gap: 12px; }
.hoja-cabeza-texto { flex: 1; min-width: 0; padding-top: 6px; }
.hoja-titulo { font: 700 22px/1.2 var(--fh); letter-spacing: -.01em; text-wrap: balance; }
.hoja-sub { margin-top: 4px; font: 15px/1.45 var(--fb); color: var(--t2); }
.hoja-cerrar { margin: 0 -8px 0 0; }
.hoja-cuerpo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hoja-acciones { display: flex; flex-direction: column; gap: 8px; }
.hoja-nota { font: 13px/1.45 var(--fb); color: var(--t2); }
.hoja.sale .hoja-velo { animation: vkVeloSale .2s ease-in forwards; }
.hoja.sale .hoja-caja { animation: vkHojaBaja .22s ease-in forwards; }
@keyframes vkVeloSale { to { opacity: 0; } }
@keyframes vkHojaBaja { to { transform: translateY(100%); } }
@keyframes vkVentanaSale { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (min-width: 900px) {
  .hoja { justify-content: center; align-items: center; padding: 24px; }
  .hoja-caja { width: 520px; max-width: 100%; max-height: 86dvh; padding: 28px; border-radius: 28px; animation: vkUp .25s ease-out; }
  .hoja-ancha .hoja-caja { width: 640px; }
  .hoja-manija { display: none; }
  .hoja-cabeza-texto { padding-top: 2px; }
  .hoja-acciones { flex-direction: row-reverse; }
  .hoja-acciones > .btn { flex: 1; }
  .hoja.sale .hoja-caja { animation: vkVentanaSale .18s ease-in forwards; }
}

/* Confirmación de lo irreversible (W.confirmar y los formularios con data-confirmar). */
.confirmar { align-items: stretch; text-align: left; }
.confirmar-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brs); color: var(--brst); }
.confirmar-icono .ms { font-size: 28px; }
.confirmar-icono.es-peligro { background: var(--ers); color: var(--ert); }
.confirmar-titulo { font: 700 22px/1.2 var(--fh); letter-spacing: -.01em; text-wrap: balance; }
.confirmar-texto { margin-top: -6px; font: 15px/1.45 var(--fb); color: var(--t2); text-wrap: pretty; }
.confirmar-motivo textarea.entrada { min-height: 96px; }
.confirmar-botones { display: flex; gap: 8px; margin-top: 4px; }
.confirmar-botones .btn { flex: 1; --btn-alto: 52px; font-size: 16px; padding: 0 16px; }
@media (min-width: 900px) { .hoja-confirmar .hoja-caja { width: 440px; } }

/* Foto grande del premio. */
.foto-grande { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 64px 16px 24px; background: var(--ov);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: vkFade .2s ease-out; }
.foto-grande img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 16px; box-shadow: var(--sh2); }
.foto-grande .btn-icono { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; }

/* Ventana del premio en la compu (al lado del título; se abre con mouse, toque y teclado). */
.premio-ventana { position: absolute; z-index: 20; left: 62%; top: -8px; width: 330px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 22px; background: var(--sf); color: var(--tx); box-shadow: var(--sh2), 0 0 0 1px var(--ln); animation: vkUp .18s ease-out; }
.premio-ventana[hidden] { display: none; }
.premio-ventana .premio-foto { height: 170px; border-radius: 16px; }
.premio-ventana p { font: 15px/1.5 var(--fb); color: var(--t2); }

/* ── 15-piezas.css ── */
/* ═══ 15 · Piezas de las pantallas (guía §8; las arman las partes de app/views/partes/). Solo tokens. ═══════════════════════════════
     .barra-accion            el botón principal: fija abajo en el celular (con su alternativa .btn-texto); en el comprador ancho (≥ 1000)
                              es una tarjeta en la columna lateral. El JS mide su alto (--barra-alto) para que nada quede tapado.
     .premio [.premio-chico | .premio-fila]   tarjeta del premio (partes/premio.php): .premio-foto (relative + img absolute inset 0, cover;
                              sin foto, el ícono) · .premio-pildora («1.er premio» del color) · .premio-pie · .premio-titulo · .premio-sub
                              · .premio-abrir (↗) · .premio-envoltura (para la ventana de la compu) · .sin-foto (la foto no cargó)
     .detalle-premio          contenido de la hoja del premio (foto 220, orden, título 26, descripción, «Cerrar» + «Foto grande»)
     .vendedor-tarjeta [.vendedor-marca]   «Le estás comprando a…» (avatar con anillo del color + corazón que flota)
     .meta-tarjeta            meta del vendedor: tarjeta del color con .anillo-meta («18 de 30») y .meta-kicker/.meta-grande/.meta-chico
     .anillo [.anillo-meta]   anillo con conic-gradient: style="--p:60%" · .anillo-centro (b = cifra, span = «de 30»)
     .meta-mini               anillo de 96 + «Te faltan $60.000 para tu meta» (Sistema)
     .barra (12 px) [.barra-fina 8 · .barra-mini 6 · .barra-division (degradé) · .barra-dorada]  style="--p:62%"
                              · .barra-relleno (crece desde la izquierda) · .barra-marca (style="--m:80%", la marca vertical del 80 %)
     .avance                  «Quedan 760 números» + barra + «Ya se eligieron 1.240 de 2.000» (partes/barra_avance.php)
     .metrica                 tarjeta de métrica: .metrica-boton (si tiene desglose) · .metrica-cabeza (etiqueta 13 + ícono dorado)
                              · .metrica-valor (28 tabular; 20 en el celular) · .metrica-contexto [.es-bien | .es-alerta] · .metrica-desglose
     .cuenta [.cuenta-chica]  cuenta regresiva: .cuenta-anillo (style="--p:84%") · .cuenta-texto · .cuenta-tiempo («4:12») · .vencida
     .asistente               asistente por pasos: .asistente-riel (compu) con .asistente-paso [.es-hecho | .es-actual | .es-bloqueado]
                              y .asistente-marca · .asistente-segmentos (celular) · .asistente-form (700) · .asistente-lado (330)
                              · .guardado («Guardado · seguí después»)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Botón principal de la pantalla ────────────────────────────────────────────────────────────────────────────────────────────── */
.barra-accion { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--sf); border-top: 1px solid var(--ln); }
.barra-accion > .btn-texto { align-self: center; }
@media (min-width: 1000px) {
  .barra-accion { position: static; gap: 12px; padding: 20px; border: 0; border-radius: var(--r-card); box-shadow: var(--sh); }
}
/* Con menú lateral (vendedor, panel, interno) la barra deja de estar fija desde los 900 px: no tapa el menú. */
@media (min-width: 900px) {
  .cara-vendedor .barra-accion, .cara-panel .barra-accion, .cara-interno .barra-accion { position: static; gap: 12px; padding: 20px; border: 0;
    border-radius: var(--r-card); box-shadow: var(--sh); }
}
.lista > form > .lista-fila { border-bottom: 1px solid var(--ln); }
.lista > form:last-child > .lista-fila { border-bottom: 0; }
.lista-fila[aria-current="true"] .lista-titulo { color: var(--brt); }

/* ── Tarjeta del premio ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.premio-envoltura { position: relative; }
.premio { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-card-lg); overflow: hidden; background: var(--sf); color: var(--tx);
  box-shadow: var(--sh); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform .25s var(--curva), box-shadow .25s ease; }
@media (hover: hover) { .premio:hover { transform: translateY(-3px); box-shadow: var(--sh2); } }
.premio:focus-visible { border-radius: var(--r-card-lg); }
.premio-foto { position: relative; overflow: hidden; display: grid; place-items: center; height: 210px; background-color: var(--brs); color: var(--brst);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--t2) 7%, transparent) 14px 28px); }
.premio-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.premio-foto > .ms { font-size: 52px; }
.premio-pildora { position: absolute; z-index: 1; left: 14px; top: 14px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--br); color: var(--onbr); font: 600 13px/1 var(--fh); }
.premio-pie { display: flex; align-items: center; gap: 12px; padding: 16px 18px 18px; }
.premio-texto { flex: 1; min-width: 0; }
.premio-titulo { display: block; font: 700 24px/1.15 var(--fh); letter-spacing: -.015em; text-wrap: balance; }
.premio-sub { display: block; margin-top: 3px; font: 14px/1.4 var(--fb); color: var(--t2); }
.premio-abrir { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--s2); color: var(--tx); }
.premio-abrir .ms { font-size: 22px; }
.premios-chicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.premio-chico { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px; border-radius: var(--r-card); }
.premio-chico .premio-foto { height: 86px; border-radius: 16px; background-color: var(--s2); color: var(--t2); }
.premio-chico .premio-foto > .ms { font-size: 34px; }
.premio-chico .premio-texto { padding: 0 4px; }
.premio-chico .premio-orden { display: block; font: 13px/1.3 var(--fb); color: var(--t2); }
.premio-chico .premio-titulo { margin-top: 2px; font: 600 16px/1.2 var(--fh); letter-spacing: 0; }
.premio-fila { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 22px; cursor: default; }
@media (hover: hover) { .premio-fila:hover { transform: none; box-shadow: var(--sh); } }
.premio-fila .premio-foto { flex: none; width: 76px; height: 76px; border-radius: 18px; }
.premio-fila .premio-foto > .ms { font-size: 34px; }
.premio-fila .premio-orden { display: block; font: 14px/1.3 var(--fb); color: var(--t2); }
.premio-fila .premio-nombre { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--tx); font: 700 21px/1.2 var(--fh); text-align: left; cursor: pointer;
  text-decoration: underline dotted; text-decoration-color: var(--ln); text-underline-offset: 5px; }
.premio-fila .premio-nombre:hover { text-decoration-color: var(--t2); }
.premio-fila .premio-nombre:focus-visible { border-radius: 6px; }
.premio-foto.sin-foto img { display: none; }
.detalle-premio { display: flex; flex-direction: column; gap: 14px; }
.detalle-premio .premio-foto { height: 220px; border-radius: 22px; }
.detalle-premio-orden { font: 600 14px/1.3 var(--fb); color: var(--brt); }
.detalle-premio-titulo { margin-top: 2px; font: 700 26px/1.15 var(--fh); letter-spacing: -.01em; }
.detalle-premio-texto { margin-top: 8px; font: 16px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; }
.detalle-premio-botones { display: flex; gap: 10px; }
.detalle-premio-botones .btn { flex: 1; --btn-alto: 52px; font-size: 16px; padding: 0 14px; }

/* ── «Le estás comprando a…» ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.vendedor-tarjeta { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; background: var(--sf); box-shadow: var(--sh);
  animation: vkUp .45s var(--curva) both; }
.vendedor-tarjeta .avatar { width: 52px; height: 52px; font-size: 21px; }
.vendedor-tarjeta-texto { flex: 1; min-width: 0; }
.vendedor-tarjeta-quien { display: block; font: 14px/1.3 var(--fb); color: var(--t2); }
.vendedor-tarjeta-nombre { display: block; margin-top: 1px; font: 700 19px/1.2 var(--fh); color: var(--tx); }
.vendedor-tarjeta .corazon { font-size: 26px; color: var(--brt); font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  animation: vkFloat 2.4s ease-in-out infinite; }
.vendedor-marca { background: var(--brs); color: var(--brst); box-shadow: none; padding: 16px; }
.vendedor-marca .avatar { background: var(--sf); color: var(--brst); box-shadow: none; }
.vendedor-marca .vendedor-tarjeta-quien, .vendedor-marca .vendedor-tarjeta-nombre, .vendedor-marca .corazon { color: inherit; }
.vendedor-marca .vendedor-tarjeta-nombre { font-size: 21px; }

/* ── Meta y avance ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.anillo { --tam: 96px; --grosor: 10px; position: relative; display: grid; place-items: center; flex: none; width: var(--tam); height: var(--tam);
  border-radius: 50%; background: conic-gradient(var(--brl) var(--p, 0%), var(--s2) 0); }
.anillo-centro { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(var(--tam) - 2 * var(--grosor));
  height: calc(var(--tam) - 2 * var(--grosor)); border-radius: 50%; background: var(--sf); text-align: center; }
.anillo-centro b { font: 700 22px/1 var(--fh); font-variant-numeric: tabular-nums; }
.anillo-centro span { font: 600 11px/1.2 var(--fh); color: var(--t2); }
.meta-mini { display: flex; align-items: center; gap: 16px; }
.meta-mini-texto { font: 13px/1.35 var(--fb); color: var(--t2); }
.meta-mini-texto b { display: block; font: 700 26px/1.15 var(--fh); color: var(--tx); font-variant-numeric: tabular-nums; }
.meta-tarjeta { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 22px;
  border-radius: 30px; background: var(--br); color: var(--onbr); box-shadow: 0 22px 44px -24px var(--br); animation: vkUp .5s .05s var(--curva) both; }
.meta-tarjeta::before, .meta-tarjeta::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; background: var(--onbr); }
.meta-tarjeta::before { right: -60px; top: -70px; width: 220px; height: 220px; opacity: .08; }
.meta-tarjeta::after { left: -40px; bottom: -90px; width: 180px; height: 180px; opacity: .06; }
.anillo-meta { --tam: 132px; --grosor: 12px; background: conic-gradient(var(--onbr) var(--p, 0%), color-mix(in srgb, var(--onbr) 24%, transparent) 0); }
.anillo-meta .anillo-centro { background: var(--br); color: var(--onbr); }
.anillo-meta .anillo-centro b { font-size: 34px; }
.anillo-meta .anillo-centro span { font-size: 13px; color: inherit; opacity: .9; }
.meta-texto { min-width: 0; }
.meta-kicker { font: 500 14px/1.35 var(--fb); opacity: .92; }
.meta-grande { margin-top: 4px; font: 700 26px/1.12 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.meta-chico { margin-top: 6px; font: 14px/1.4 var(--fb); opacity: .92; }
@media (max-width: 380px) { .meta-tarjeta { gap: 14px; padding: 18px; } .anillo-meta { --tam: 112px; --grosor: 10px; } .anillo-meta .anillo-centro b { font-size: 28px; } .meta-grande { font-size: 22px; } }

.barra { position: relative; height: 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ln) 75%, var(--s2)); }
.barra-fina { height: 8px; }
.barra-mini { height: 6px; }
.barra-relleno { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); max-width: 100%; border-radius: inherit; background: var(--brl);
  transform-origin: left center; animation: vkGrow 1s var(--curva) both; }
.barra-division .barra-relleno { background: linear-gradient(90deg, var(--br), var(--brl)); }
.barra-dorada .barra-relleno { background: var(--gdl); }
.barra-marca { position: absolute; left: var(--m, 80%); top: -5px; width: 2px; height: 22px; margin-left: -1px; border-radius: 2px; background: var(--tx); }
.avance { display: block; }
.avance-titulo { font: 700 22px/1.2 var(--fh); font-variant-numeric: tabular-nums; }
.avance .barra { margin-top: 12px; }
.avance-nota { margin-top: 8px; font: 14px/1.4 var(--fb); color: var(--t2); }
.avance-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.avance-cabeza b { font: 600 15px/1.3 var(--fh); }
.avance-cabeza span { font: 600 14px/1.3 var(--fh); color: var(--brt); font-variant-numeric: tabular-nums; }
.avance-division .barra { margin-top: 12px; }
.avance-division .avance-nota { margin-top: 10px; font-size: 13px; }

/* ── Métrica ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.metrica { container-type: inline-size; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px; border-radius: var(--r-card); background: var(--sf); color: var(--tx);
  box-shadow: var(--sh); text-decoration: none; animation: vkUp .45s var(--curva) both; }
.metrica-boton { display: flex; flex-direction: column; gap: 6px; margin: -18px; padding: 18px; width: calc(100% + 36px); border: 0;
  border-radius: var(--r-card); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.metrica-boton:focus-visible { border-radius: var(--r-card); outline-offset: -3px; }
a.metrica, .metrica:has(.metrica-boton) { transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) { a.metrica:hover, .metrica:has(.metrica-boton):hover { transform: translateY(-2px); box-shadow: var(--sh2); } }
.metrica-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 13px/1.35 var(--fb); color: var(--t2); }
.metrica-cabeza .ms { font-size: 20px; color: var(--gdt); }
.metrica-valor { font: 600 clamp(18px, 14cqi, 28px)/1.1 var(--fh); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.metrica-contexto { font: 13px/1.35 var(--fb); color: var(--t2); }
.metrica-contexto.es-bien { color: var(--okt); }
.metrica-contexto.es-alerta { color: var(--ert); }
.metrica-boton[aria-expanded="true"] .metrica-contexto .ms { transform: rotate(180deg); }
.metrica-contexto .ms { font-size: 16px; vertical-align: -3px; transition: transform .2s ease; }
.metrica-desglose { display: grid; gap: 8px; margin: 10px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--bg); animation: vkUp .25s var(--curva) both; }
.metrica-desglose div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 14px/1.35 var(--fb); }
.metrica-desglose dt { color: var(--t2); }
.metrica-desglose dd { margin: 0; font: 600 14px/1.35 var(--fh); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.metrica-desglose .total { padding-top: 8px; border-top: 1px solid var(--ln); }
.metrica-desglose .total dt { color: var(--tx); font-weight: 600; }
.metrica-desglose .total dd { color: var(--okt); }
.metrica-desglose[hidden] { display: none; }

/* ── Cuenta regresiva ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cuenta { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 20px; background: var(--brs); color: var(--brst); }
.cuenta-anillo { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--brl) var(--p, 100%), var(--sf) 0); }
.cuenta-anillo .ms { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brs); font-size: 20px; }
.cuenta-texto { flex: 1; min-width: 0; font: 600 15px/1.35 var(--fb); }
.cuenta-tiempo { flex: none; font: 700 24px/1 var(--fh); font-variant-numeric: tabular-nums; }
.cuenta.vencida { background: var(--ers); color: var(--ert); }
.cuenta.vencida .cuenta-anillo { background: var(--sf); }
.cuenta.vencida .cuenta-anillo .ms { background: var(--ers); }
.cuenta-chica { display: inline-flex; align-self: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--r-pill); font: 600 15px/1 var(--fh); }
.cuenta-chica .cuenta-anillo { width: auto; height: auto; background: none; }
.cuenta-chica .cuenta-anillo .ms { width: auto; height: auto; background: none; }
.cuenta-chica .cuenta-texto { flex: none; font: inherit; }
.cuenta-chica .cuenta-tiempo { font: inherit; }

/* ── Asistente por pasos ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.asistente { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.asistente-riel { display: none; }
.asistente-segmentos { display: flex; flex-direction: column; gap: 8px; }
.asistente-segmentos-texto { font: 13px/1.35 var(--fb); color: var(--t2); }
.asistente-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.asistente-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.asistente-paso { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: var(--tx); font: 500 14px/1.3 var(--fh);
  text-decoration: none; }
.asistente-paso[aria-current="step"], .asistente-paso.es-actual { background: var(--brs); color: var(--brst); font-weight: 600; }
.asistente-paso.es-bloqueado { color: var(--t2); cursor: not-allowed; }
@media (hover: hover) { a.asistente-paso:not(.es-actual):hover { background: var(--bg); } }
.asistente-paso:focus-visible { border-radius: 14px; }
.asistente-marca { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ln);
  color: var(--t2); font: 600 14px/1 var(--fh); }
.asistente-marca .ms { font-size: 17px; }
.es-hecho .asistente-marca { background: var(--ok); color: var(--sf); box-shadow: none; }
.es-hecho .asistente-marca .ms { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.es-actual .asistente-marca { background: var(--br); color: var(--onbr); box-shadow: none; }
.es-bloqueado .asistente-marca { background: var(--s2); color: var(--t2); box-shadow: none; }
.es-bloqueado .asistente-marca .ms { font-size: 16px; }
.guardado { display: inline-flex; align-items: center; gap: 6px; font: 13px/1.3 var(--fb); color: var(--okt); }
.guardado .ms { font-size: 18px; }
.asistente-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (min-width: 900px) {
  .asistente { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 24px; align-items: start; }
  .asistente:has(> .asistente-lado) { grid-template-columns: 244px minmax(0, 1fr) clamp(300px, 24vw, 440px); }
  .asistente-riel { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--r-card);
    background: var(--sf); box-shadow: var(--sh); }
  .asistente-riel .guardado { padding: 12px 10px 4px; }
  .asistente-segmentos { display: none; }
  .asistente-form { width: 100%; max-width: var(--max-form); margin: 0 auto; gap: 18px; }
  .asistente-lado { position: sticky; top: 16px; }
}
@media (min-width: 1280px) { .asistente:has(> .asistente-lado) { grid-template-columns: clamp(244px, 16vw, 300px) minmax(0, 1fr) clamp(330px, 24vw, 460px); } }

/* ── 19-dev.css ── */
/* ═══ 19 · Solo para las páginas /dev del sistema (catálogo de componentes y layouts de muestra). Prefijo dev-. ══════════════════════ */
.cara-dev { background: var(--bg); }
.dev-cabeza { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--ln); }
.dev-cabeza-in { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 20px; }
.dev-marca { display: flex; align-items: center; gap: 10px; flex: none; color: var(--t2); font: 600 13px var(--fh); text-decoration: none; }
.dev-indice { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dev-indice::-webkit-scrollbar { display: none; }
.dev-indice a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--ln); color: var(--tx); font: 600 13px/1 var(--fh); text-decoration: none; }
.dev-cuerpo { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px; padding: 24px 20px 140px; }
.dev-intro { display: flex; flex-direction: column; gap: 12px; }
.dev-intro p { max-width: 860px; }
.dev-intro .segmentado { flex-wrap: wrap; overflow: visible; border-radius: 22px; }
.dev-intro code, .dev-seccion code { font: 600 13px/1 var(--fh); }
.dev-seccion { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.dev-seccion-cabeza h2 { font: 700 26px/1.15 var(--fh); letter-spacing: -.02em; }
.dev-seccion-cabeza p { max-width: 900px; margin-top: 4px; font: 15px/1.5 var(--fb); color: var(--t2); }
.dev-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1000px) { .dev-par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dev-lado, .dev-mini { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; border-radius: 26px; background: var(--bg); color: var(--tx);
  box-shadow: inset 0 0 0 1px var(--ln); }
.dev-mini { gap: 12px; }
.dev-modo { font: 700 11px/1.2 var(--fh); letter-spacing: .12em; text-transform: uppercase; color: var(--t2); }
.dev-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dev-etiqueta { font: 13px/1.4 var(--fb); color: var(--t2); }
.dev-acento { font: 600 15px var(--fh); }
.dev-marcas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .dev-marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dev-marcas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dev-casillas { display: grid; grid-template-columns: repeat(4, minmax(0, 52px)); gap: 9px; padding: 8px 8px 0 0; }
.dev-festejo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 28px; overflow: hidden; }
.dev-lado .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dev-grillas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1100px) { .dev-grillas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dev-grilla-caja { padding: 20px; border-radius: 26px; background: var(--sf); box-shadow: var(--sh); }
.dev-pildoras { margin-top: 14px; }
.dev-garantia { display: flex; gap: 12px; align-items: flex-start; padding: 2px 4px; font: 15px/1.45 var(--fb); color: var(--t2); }
.dev-garantia b { color: var(--tx); }
.dev-garantia .ms { font-size: 24px; }
.dev-compartir { flex-wrap: nowrap; }
.dev-flex { flex: 1; }
.dev-tabla-plana { padding: 0; box-shadow: none; background: transparent; }
.dev-sitio-portada { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 56px; padding-bottom: 56px; }
.dev-sitio-bajada { max-width: 560px; font: 19px/1.5 var(--fb); color: var(--t2); }
.dev-sitio-bloque { padding-top: 48px; padding-bottom: 48px; border-top: 1px solid var(--ln); scroll-margin-top: 80px; }

/* ── 20-sitio.css ── */
/* ═══ 20 · Sitio (M1 portada, M2 cotizador, términos y privacidad; design/Vakita 5 Sitio.dc.html, guía §14) y estados generales
   (.eg; design/Vakita 4 Mas pantallas.dc.html, «Estados generales»). Solo lo que el sistema no trae: botones, chips, casillas,
   tarjeta del premio, «Le estás comprando a…», barras, avisos, tablas y el layout del sitio salen de 10-…15-*. Solo tokens: el
   dorado de Vakita (body.marca-vakita) y el modo oscuro salen solos; .t-claro / .t-oscuro fuerzan un modo (el papel del acta, la
   franja de la Comisión Directiva). TODO A ANCHO COMPLETO: los bloques se reparten el ancho con grillas fluidas (fr, %, clamp) entre
   los márgenes del sistema (--margen, en .sitio-ancho); solo el texto corrido se limita a --texto-max (68ch). Las piezas que dibujan
   la app (la grilla en vivo, el acta, el teléfono, las demos) crecen con su columna. Cortes propios: portada en dos columnas desde
   1080 px (el título necesita lugar); el resto, como el sistema (900); la tarjeta de los estados, desde 600.
     Comunes       .st-seccion (bloque con aire, dentro de .sitio-ancho) · .st-banda [.st-banda-sf | -s2 | -oscura] (a todo el ancho con
                   fondo) · .st-dos (dos columnas desde 900) · .st-display · .st-h2 [.st-h2-ancho] · .st-h3 · .st-lead · .st-nota
                   · .st-punto (el punto dorado de los títulos) · .st-dorado · .st-acciones [.st-acciones-centro] · .st-enlace (link de tinta)
                   · .st-falso (un botón dibujado: no se toca) · .st-legales (links al final de cada página del sitio)
     Portada       .st-portada (+ -texto) · .st-bajada · .st-confianza · .st-vivo [.en-pausa] (tarjeta de la grilla que se vende sola:
                   -cabeza, -nombre, -chip, -punto, -cifras) · .st-grilla > .st-casilla [.es-vendido | .es-recien] · .st-recien (+ -etiqueta,
                   -texto, -pausa). Celular: 7 columnas y 49 casillas; desde 520 px, 9 columnas y 72.
     Promesas      .st-promesas (+ -in) · .st-promesa (+ -cifra, -texto)
     Talonario     .st-quejas · .st-queja · .st-papel (+ -cabeza, -texto) · .st-con (+ -etiqueta, -fila, -texto) · .st-ficha [.st-ficha-vendedor]
                   (con .casilla.es-vendido / .casilla.es-efectivo del sistema)
     Cómo funciona .st-como · .st-pasos[role=tablist][.es-manual] > .st-paso[role=tab] (+ -n, -cuerpo, -titulo, -texto, -barra: se llena en
                   6 s mientras avanza solo) · .st-demo > .st-demo-panel · .st-demo-tarjeta · .st-demo-pila · .st-nueva (+ -cabeza, -campo,
                   -premio, -foto, -par, -ok) · .st-invitados > .st-invitado (+ -nombre) · .st-burbuja (+ -hora) · .st-cuenta (+ -mp)
                   · .st-pagos > .st-pago (+ -ic, -monto) · .st-demo-wsp
     Comisión      .st-banda-oscura.t-oscuro · .st-garantias · .st-acta-escena · .st-acta.t-claro > .st-acta-in (+ -cabeza, -cuentas, -ganadores, -firmas,
                   -sello) · .st-efectivo (+ -etiqueta, -monto, -vence)
     Marca blanca  .st-marca · .st-marca-pregunta · .st-muestras > .st-muestra[aria-pressed] (+ -punto; color en --muestra) · .st-telefono-lugar
                   · .st-telefono (la marca en --c-* claro y --o-* oscuro, de Tema::marca) > .st-tel-pantalla (390 × 844 achicada; -estado,
                   -inst, -compartir, -cuerpo, -titulo, -pildoras, -barra)
     Cotizador     .st-cot · .st-cot-preguntas · .st-cot-cabeza · .st-cot-campo · .st-cot-etiqueta · .st-rango · .st-precio (+ -entrada)
                   · .st-ticket (+ -etiqueta, -filas, -corte, -tasa, -queda-etiqueta, -queda, -aviso, -explica, -nota) · .st-cot-pagina
                   · .st-calculo (+ -tabla) · .st-hechos
     Cierre        .st-cierre (+ -titulo) · .st-vaca (la vaquita caminando) · .st-testimonios · .st-testimonio
     Legales       .st-legal (+ -cabeza, -titulo, -fecha, -cuerpo, -lado, -texto, -corto, -corto-titulo, -seccion, -ley): desde 1100 px, el índice
                   al costado (fijo al bajar) y el texto en su columna · details.st-legal-indice (el índice: cerrado en el
                   celular, abierto desde 720 px por 20-sitio.js)
     Estados       .eg [.eg-neutro | .eg-info | .eg-ok | .eg-error] (+ -cuerpo, -figura [.eg-figura-app], -iso, -insignia, -bloque (título,
                   texto y extra: la columna de la derecha en la compu), -titulo, -texto, -acciones, -pasos, -qr, -qr-caja) · .eg-capa (la
                   «conexión lenta» encima de la página, la arma 20-sitio.js)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Comunes del sitio ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.st-seccion { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); }
.st-banda { padding: clamp(72px, 9vw, 128px) 0; }
.st-banda-sf { background: var(--sf); border-top: 1px solid var(--s2); }
.st-banda-s2 { background: var(--s2); }
.st-banda-oscura { background: var(--bg); color: var(--tx); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .st-banda-oscura { border-block: 1px solid var(--ln); } }
:root[data-tema="oscuro"] .st-banda-oscura { border-block: 1px solid var(--ln); }
.cara-sitio [id] { scroll-margin-top: 84px; }
.st-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
@media (min-width: 900px) { .st-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.st-display { font: 700 clamp(46px, 13.5vw, 128px)/.9 var(--fh); letter-spacing: -.055em; }
.st-h2 { font: 700 clamp(38px, 4.6vw, 84px)/1 var(--fh); letter-spacing: -.045em; text-wrap: balance; }
.st-h3 { font: 700 clamp(28px, 3.4vw, 40px)/1.1 var(--fh); letter-spacing: -.03em; text-wrap: balance; }
.st-lead { margin-top: 22px; max-width: var(--texto-max); color: var(--t2); }
.st-nota { margin-top: 18px; max-width: var(--texto-max); font: 14px/1.5 var(--fb); color: var(--t2); }
.st-punto, .st-dorado { color: var(--gdt); }
.st-punto { color: var(--gd); }
.st-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 36px; }
.st-acciones-centro { justify-content: center; margin-top: 0; }
.st-enlace { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--tx); font: 600 16px/1.2 var(--fh); text-decoration: underline;
  text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
@media (hover: hover) { .st-enlace:hover { color: var(--gdt); } }
.st-falso { pointer-events: none; cursor: default; }
.st-legales { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; padding-top: 8px; padding-bottom: 16px; font: 14px/1.3 var(--fb); }
.st-legales a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--t2); text-underline-offset: 4px; }
.st-legales a[aria-current="page"] { color: var(--tx); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .st-legales a:hover { color: var(--tx); } }

/* El menú de anclas del encabezado (layout sitio) se desliza en el celular: se desvanece a la derecha para que se note. */
@media (max-width: 719px) { .cara-sitio .sitio-nav { -webkit-mask-image: linear-gradient(90deg, var(--tx) 78%, transparent); mask-image: linear-gradient(90deg, var(--tx) 78%, transparent); padding-right: 18px; } }

/* ── Portada ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.st-portada { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center;
  padding-top: clamp(40px, 8vw, 104px); padding-bottom: clamp(56px, 7vw, 96px); }
@media (min-width: 1080px) {
  .st-portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .st-portada .st-display { font-size: clamp(80px, 8vw, 160px); }   /* que «talonario.» entre siempre en su columna */
}
.st-bajada { margin-top: 28px; max-width: var(--texto-max); font: clamp(18px, 1.5vw, 24px)/1.55 var(--fb); color: var(--t2); }
.st-confianza { display: flex; align-items: center; gap: 10px; margin-top: 36px; font: 14px/1.4 var(--fb); color: var(--t2); }
.st-confianza img { flex: none; width: 28px; height: 28px; }

.st-vivo { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); width: 100%; padding: clamp(18px, 2vw, 32px);
  border-radius: 32px; background: var(--sf); box-shadow: var(--sh2); }
.st-vivo-cabeza { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px 12px; }
.st-vivo-cabeza .st-vivo-chip { grid-column: 1 / -1; }
@media (min-width: 520px) {
  .st-vivo-cabeza { display: flex; }
  .st-vivo-cabeza .st-vivo-chip { align-self: flex-start; }
}
.st-vivo-nombre { flex: 1; min-width: 0; }
.st-vivo-nombre > b { display: block; font: 600 15px/1.3 var(--fh); }
.st-vivo-nombre > span { display: block; font: 13px/1.35 var(--fb); color: var(--t2); }
.st-vivo-chip { gap: 6px; padding: 0 11px; }
.st-vivo-punto { display: block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: stPulso 1.6s ease-in-out infinite; }
.st-vivo.en-pausa .st-vivo-punto { animation: none; background: var(--t2); }
@keyframes stPulso { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.st-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(5px, .9cqi, 8px); }
.st-casilla { display: grid; place-items: center; min-width: 0; aspect-ratio: 1.25; border-radius: clamp(9px, 1.4cqi, 12px); box-shadow: inset 0 0 0 1px var(--s2);
  color: var(--t2); font: 600 clamp(10px, 1.9cqi, 15px)/1 var(--fh); font-variant-numeric: tabular-nums; transition: background-color .3s ease, color .3s ease; }
.st-casilla:nth-child(n+50) { display: none; }
/* La grilla según el ancho de SU tarjeta: 7 columnas (49 casillas) angosta, 9 (72) mediana, 12 (72, seis filas) en las pantallas anchas. */
@container (min-width: 480px) {
  .st-grilla { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .st-casilla:nth-child(n+50) { display: grid; }
}
@container (min-width: 720px) { .st-grilla { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.st-casilla.es-vendido { box-shadow: none; background: var(--sold); color: color-mix(in srgb, var(--soldt) 62%, var(--sold)); font-weight: 500; }
.st-casilla.es-recien { box-shadow: 0 8px 18px -8px var(--brl); background: var(--br); color: var(--onbr); font-weight: 700;
  animation: vkPop .45s cubic-bezier(.2, .8, .3, 1.3) both; }

.st-vivo-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 20px; background: var(--s2); }
.st-vivo-cifras p { padding: 14px 16px; background: var(--bg); }
@container (min-width: 480px) { .st-vivo-cifras p { padding: clamp(16px, 2.4cqi, 24px); } }
.st-vivo-cifras p > b { display: block; font: 700 clamp(19px, 4.4cqi, 38px)/1.1 var(--fh); letter-spacing: -.02em; }
.st-vivo-cifras p > span { display: block; margin-top: 2px; font: 13px/1.35 var(--fb); color: var(--t2); }

.st-recien { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font: 14px/1.4 var(--fb); color: var(--t2); }
.st-recien-etiqueta { flex: none; font: 600 12px/1 var(--fh); letter-spacing: .06em; text-transform: uppercase; color: var(--gdt); }
.st-recien-texto { flex: 1; min-width: 0; min-height: 2.8em; display: flex; align-items: center; }
.st-recien-texto > span { display: block; animation: vkUp .45s var(--curva) both; }
.st-recien-pausa { margin: -4px -10px -4px 0; }
@container (min-width: 480px) { .st-recien-texto { min-height: 0; } }

/* ── Tres promesas ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.st-promesas { background: var(--sf); border-block: 1px solid var(--s2); }
.st-promesas-in { display: grid; grid-template-columns: minmax(0, 1fr); padding-inline: var(--margen); }
.st-promesa { padding: clamp(28px, 4vw, 56px) 0; }
.st-promesa + .st-promesa { border-top: 1px solid var(--s2); }
@media (min-width: 720px) {
  .st-promesas-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-promesa { padding: clamp(32px, 4.2vw, 72px) clamp(20px, 3vw, 56px); }
  .st-promesa:first-child { padding-left: 0; }
  .st-promesa:last-child { padding-right: 0; }
  .st-promesa + .st-promesa { border-top: 0; border-left: 1px solid var(--s2); }
}
.st-promesa-cifra { font: 700 clamp(48px, 5.5vw, 104px)/1 var(--fh); letter-spacing: -.05em; }
.st-promesa-cifra.st-dorado { color: var(--gdt); }
.st-promesa-texto { margin-top: 14px; max-width: var(--texto-max); color: var(--t2); }

/* ── Lo que se termina con el talonario ────────────────────────────────────────────────────────────────────────────────────────── */
.st-quejas { display: flex; flex-direction: column; gap: 18px; margin-top: clamp(36px, 5vw, 64px); }
.st-queja { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
@media (min-width: 900px) { .st-queja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.st-papel { position: relative; padding: 22px 24px 22px 32px; border-radius: 6px; color: var(--tx);
  background-color: color-mix(in srgb, var(--s2) 72%, var(--gds));
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, color-mix(in srgb, var(--t2) 16%, transparent) 31px 32px);
  border-left: 2px dashed color-mix(in srgb, var(--t2) 45%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--tx) 6%, transparent); }
.st-queja:nth-child(1) .st-papel { transform: rotate(-.6deg); }
.st-queja:nth-child(2) .st-papel { transform: rotate(.5deg); }
.st-queja:nth-child(3) .st-papel { transform: rotate(-.4deg); }
.st-papel-cabeza { display: flex; justify-content: space-between; gap: 12px; font: 600 13px/1.3 var(--fh); letter-spacing: .04em; color: var(--t2); }
.st-papel-texto { margin-top: 10px; font: italic 400 clamp(20px, 1.8vw, 30px)/1.35 var(--fb); text-wrap: balance; }
.st-con { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 24px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--sh); }
.st-con-etiqueta { font: 600 13px/1.2 var(--fh); letter-spacing: .04em; text-transform: uppercase; color: var(--gdt); }
.st-con-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.st-con-texto { flex: 1; min-width: 180px; }
.st-con-texto > b { display: block; font: 600 17px/1.3 var(--fh); }
.st-con-texto > span { display: block; margin-top: 2px; font: 14px/1.4 var(--fb); color: var(--t2); }
.st-ficha { display: grid; place-items: center; flex: none; min-width: 72px; height: 52px; padding: 0 12px; border-radius: var(--r-tile);
  font: 700 19px/1 var(--fh); font-variant-numeric: tabular-nums; cursor: default; }
.st-ficha.casilla { font-size: 18px; cursor: default; }
.st-ficha.casilla:active { transform: none; }
.st-ficha-vendedor { background: var(--gds); color: var(--gdst); }

/* ── Cómo funciona ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.st-pasos { display: flex; flex-direction: column; margin-top: 40px; border-top: 1px solid var(--s2); }
.st-paso { position: relative; display: flex; gap: 20px; width: 100%; padding: 22px 0; border: 0; border-bottom: 1px solid var(--s2); background: none;
  color: var(--tx); font: inherit; text-align: left; cursor: pointer; }
.st-paso:focus-visible { outline-offset: -3px; border-radius: 10px; }
.st-paso-n { flex: none; min-width: 28px; padding-top: 4px; font: 700 15px/1.2 var(--fh); color: var(--t2); }
.st-paso-cuerpo { flex: 1; min-width: 0; }
.st-paso-titulo { display: block; font: 600 clamp(20px, 1.8vw, 30px)/1.2 var(--fh); color: var(--t2); }
.st-paso-texto { display: none; max-width: var(--texto-max); margin-top: 8px; font: 16px/1.55 var(--fb); color: var(--t2); }
.st-paso[aria-selected="true"] .st-paso-n { color: var(--gdt); }
.st-paso[aria-selected="true"] .st-paso-titulo { color: var(--tx); }
.st-paso[aria-selected="true"] .st-paso-texto { display: block; animation: vkUp .35s var(--curva) both; }
.st-paso-barra { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gdl); transform: scaleX(0); transform-origin: left center; }
.st-paso[aria-selected="true"] .st-paso-barra { transform: scaleX(1); }
.st-pasos:not(.es-manual) .st-paso[aria-selected="true"] .st-paso-barra { animation: vkGrow 6s linear both; }
.st-pasos.en-pausa .st-paso-barra { animation-play-state: paused !important; }
@media (hover: hover) { .st-paso[aria-selected="false"]:hover .st-paso-titulo { color: var(--tx); } }

.st-demo { display: flex; align-items: center; justify-content: center; min-height: clamp(420px, 34vw, 640px); padding: clamp(20px, 3vw, 48px); border-radius: 36px; background: var(--bg); }
.st-demo-panel { width: min(100%, max(420px, 72%)); animation: vkUp .4s var(--curva) both; }
.st-demo-panel[hidden] { display: none; }
.st-demo-tarjeta { padding: 22px; border-radius: 26px; background: var(--sf); box-shadow: var(--sh2); }
.st-demo-pila { display: flex; flex-direction: column; gap: 12px; }
.st-nueva { display: flex; flex-direction: column; gap: 12px; }
.st-nueva-cabeza { font: 600 13px/1.3 var(--fh); color: var(--t2); }
.st-nueva-campo { padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--s2); }
.st-nueva-campo > span, .st-nueva-premio p > span { display: block; font: 12px/1.3 var(--fb); color: var(--t2); }
.st-nueva-campo > b, .st-nueva-premio p > b { display: block; font: 600 16px/1.3 var(--fh); }
.st-nueva-premio { display: flex; align-items: center; gap: 12px; padding: 10px; }
.st-nueva-foto { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; width: 64px; height: 52px; border-radius: 10px;
  background: var(--brs); color: var(--brst); }
.st-nueva-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.st-nueva-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-nueva-ok { margin: 0; }
.st-invitados { margin: 0; padding: 8px 18px; list-style: none; }
.st-invitado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 0; border-bottom: 1px solid var(--bg); }
.st-invitado:last-child { border-bottom: 0; }
.st-invitado-nombre { flex: 1; min-width: 96px; font: 600 15px/1.3 var(--fh); }
.st-invitado-nombre > span { margin-left: 6px; font: 14px/1.3 var(--fb); color: var(--t2); }
.st-invitado-nombre > span::before { content: '· '; }
.st-invitado .chip { animation: vkPop .4s var(--d, 0s) both; }
.st-burbuja { align-self: flex-end; max-width: 92%; padding: 12px 14px 8px; border-radius: 18px 18px 4px 18px; background: var(--sf); box-shadow: var(--sh2);
  font: 14px/1.45 var(--fb); overflow-wrap: anywhere; }
.st-burbuja-hora { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin-top: 4px; font: 11px/1 var(--fb); color: var(--t2); }
.st-burbuja-hora .ms { font-size: 16px; color: var(--in); }
.st-demo-wsp { align-self: stretch; }
.st-cuenta { display: flex; align-items: center; gap: 14px; padding: 22px; border-radius: 26px; background: var(--bg); color: var(--tx); }
.st-cuenta-mp { display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 5px; border-radius: 14px; background: var(--qr); }
.st-cuenta-mp img { width: 100%; height: 100%; }
.st-cuenta p > span { display: block; font: 13px/1.35 var(--fb); color: var(--t2); }
.st-cuenta p > b { display: block; font: 700 30px/1.1 var(--fh); letter-spacing: -.02em; }
.st-pagos { margin: 0; padding: 6px 18px; list-style: none; }
.st-pago { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bg); animation: vkUp .4s var(--d, 0s) var(--curva) both; }
.st-pago:last-child { border-bottom: 0; }
.st-pago-ic.ms { font-size: 22px; color: var(--okt); }
.st-pago p { flex: 1; min-width: 0; font: 14px/1.4 var(--fb); }
.st-pago p > b { font: 600 15px/1.3 var(--fh); }
.st-pago p > span { display: block; color: var(--t2); }
.st-pago-monto { flex: none; font: 700 16px/1.2 var(--fh); color: var(--okt); }

/* ── Comisión Directiva (franja oscura en los dos modos) ───────────────────────────────────────────────────────────────────────── */
.st-garantias { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ln); }
.st-garantias li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--ln); }
.st-garantias .ms { font-size: 26px; color: var(--gdt); }
.st-garantias p > b { display: block; font: 600 17px/1.3 var(--fh); }
.st-garantias p > span { display: block; margin-top: 2px; font: 15px/1.45 var(--fb); color: var(--t2); }
.st-acta-escena { position: relative; display: grid; place-items: center; padding: 12px 0 clamp(44px, 5vw, 72px); }
.st-acta { container-type: inline-size; position: relative; overflow: hidden; width: min(100%, clamp(300px, 68%, 560px)); aspect-ratio: 210 / 297; border-radius: 6px; background: var(--sf); color: var(--tx); transform: rotate(-3deg);
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--qrt) 85%, transparent); }
/* la hoja escala con su ancho: el contenido (en .st-acta-in) mide todo en cqi de la hoja */
.st-acta-in { display: flex; flex-direction: column; gap: 3.2cqi; height: 100%; padding: 8cqi 7.4cqi; }
.st-acta-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--tx); }
.st-acta-cabeza .inst-logo { --tam: clamp(36px, 11cqi, 60px); }
.st-acta-cabeza p > b { display: block; font: 700 clamp(18px, 5.3cqi, 30px)/1.2 var(--fh); }
.st-acta-cabeza p > span { display: block; font: clamp(11px, 2.9cqi, 16px)/1.4 var(--fb); color: var(--t2); }
.st-acta-cuentas { margin: 0; font: clamp(12px, 3.2cqi, 18px)/1.7 var(--fb); }
.st-acta-cuentas div { display: flex; gap: 6px; }
.st-acta-cuentas dt { font-weight: 700; }
.st-acta-cuentas dd { margin: 0; font-variant-numeric: tabular-nums; }
.st-acta-cuentas .es-neta { margin-top: 2px; padding-top: 2px; border-top: 1px solid var(--s2); }
.st-acta-ganadores { display: flex; flex-direction: column; padding: 2.2cqi 2.6cqi; border: 1px solid var(--s2); border-radius: 8px; font: clamp(12px, 3.2cqi, 18px)/1.7 var(--fb); }
.st-acta-firmas { display: flex; gap: 12px; margin-top: auto; }
.st-acta-firmas i { flex: 1; border-top: 1px solid var(--tx); }
.st-acta-sello { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-30deg); font: 700 clamp(30px, 9cqi, 52px)/1 var(--fh); white-space: nowrap;
  color: color-mix(in srgb, var(--gd) 14%, transparent); pointer-events: none; }
.st-efectivo { position: absolute; right: 0; bottom: clamp(20px, 3vw, 44px); padding: clamp(16px, 1.4vw, 22px) clamp(18px, 1.6vw, 26px); border: 1px solid var(--ln); border-radius: 22px; background: var(--sf);
  box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--qrt) 90%, transparent); }
.st-efectivo-etiqueta { font: 13px/1.3 var(--fb); color: var(--t2); }
.st-efectivo-monto { font: 700 clamp(24px, 2vw, 32px)/1.2 var(--fh); }
.st-efectivo-vence { display: flex; align-items: center; gap: 6px; font: 13px/1.3 var(--fb); color: var(--ert); }
.st-efectivo-vence .ms { font-size: 16px; }

/* ── Marca blanca: el teléfono con la página de compra ─────────────────────────────────────────────────────────────────────────── */
.st-marca-pregunta { margin-top: 32px; font: 600 14px/1.3 var(--fh); }
.st-muestras { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.st-muestra { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px 0 7px; border: 0; border-radius: var(--r-pill); background: var(--sf);
  color: var(--tx); font: 600 13px/1 var(--fh); box-shadow: var(--sh); cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.st-muestra[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tx); }
.st-muestra:active { transform: scale(.97); }
.st-muestra:focus-visible { border-radius: var(--r-pill); }
.st-muestra-punto { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--muestra); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 12%, transparent); }
.st-telefono-lugar { display: grid; place-items: center; }
.st-telefono { --escala: .7436; position: relative; overflow: hidden; width: 290px; height: 628px; border-radius: 38px; background: var(--bg);
  box-shadow: var(--sh2), 0 0 0 1px var(--ln), 0 0 0 7px var(--sf), 0 0 0 8px var(--ln);
  --br: var(--c-br); --onbr: var(--c-onbr); --brl: var(--c-brl); --brt: var(--c-brt); --brs: var(--c-brs); --brst: var(--c-brst); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .st-telefono { --br: var(--o-br); --onbr: var(--o-onbr); --brl: var(--o-brl); --brt: var(--o-brt); --brs: var(--o-brs); --brst: var(--o-brst); }
}
:root[data-tema="oscuro"] .st-telefono { --br: var(--o-br); --onbr: var(--o-onbr); --brl: var(--o-brl); --brt: var(--o-brt); --brs: var(--o-brs); --brst: var(--o-brst); }
.st-tel-pantalla { position: relative; display: flex; flex-direction: column; width: 390px; height: 844px; transform-origin: 0 0;
  background: linear-gradient(180deg, var(--brs), var(--bg) 320px); color: var(--tx); font: 16px/1.5 var(--fb); transform: scale(var(--escala)); }
@media (min-width: 380px) { .st-telefono { --escala: .8462; width: 330px; height: 714px; border-radius: 44px; } }
@media (min-width: 1280px) { .st-telefono { --escala: .9231; width: 360px; height: 779px; border-radius: 48px; } }
@media (min-width: 1680px) { .st-telefono { --escala: 1.0256; width: 400px; height: 866px; border-radius: 52px; } }
.st-tel-estado { display: flex; align-items: center; justify-content: space-between; flex: none; height: 46px; padding: 6px 30px 0 36px; font: 600 16px/1 var(--fh); }
.st-tel-estado .ms { font-size: 17px; }
.st-tel-inst { display: flex; align-items: center; gap: 12px; flex: none; padding: 8px 20px 12px; }
.st-tel-inst p { flex: 1; min-width: 0; }
.st-tel-inst p > b { display: block; font: 600 16px/1.25 var(--fh); }
.st-tel-inst p > span { display: flex; align-items: center; gap: 4px; font: 13px/1.3 var(--fb); color: var(--t2); }
.st-tel-inst p > span > .ms { font-size: 16px; color: var(--brt); }
.st-tel-compartir { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sf); box-shadow: inset 0 0 0 1px var(--ln); }
.st-tel-compartir .ms { font-size: 21px; }
.st-tel-cuerpo { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow: hidden; padding: 4px 20px 0; }
.st-tel-titulo { margin-top: 4px; font: 700 28px/1.1 var(--fh); letter-spacing: -.02em; }
.st-tel-pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.st-tel-barra { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 20px 30px; border-top: 1px solid var(--ln); background: var(--sf); }

/* ── Cotizador (M2) ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.st-cot-preguntas { display: flex; flex-direction: column; gap: 26px; }
.st-cot-cabeza .st-lead { margin-top: 16px; }
.st-cot-campo { display: flex; flex-direction: column; gap: 6px; }
.st-cot-etiqueta { display: flex; justify-content: space-between; gap: 12px; font: 600 16px/1.3 var(--fh); }
.st-cot-etiqueta output { font-variant-numeric: tabular-nums; }
.st-rango { width: 100%; height: var(--tap); margin: 0; accent-color: var(--gdl); background: transparent; cursor: pointer; }
.st-precio { display: flex; align-items: center; gap: 6px; height: 58px; padding: 0 18px; border-radius: 18px; background: var(--sf); font: 600 20px/1 var(--fh);
  transition: box-shadow .15s ease; }
.st-precio:focus-within { box-shadow: 0 0 0 3px var(--brl); }
.st-precio-entrada { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tx); font: 600 20px/1 var(--fh); }
.st-cot-calcular { align-self: flex-start; }

.st-ticket { position: relative; padding: 26px 22px 24px; border-radius: var(--r-card-lg); background: var(--sf); box-shadow: var(--sh2); }
@media (min-width: 520px) { .st-ticket { padding: 30px 30px 26px; } }
.st-ticket-etiqueta { font: 600 13px/1.2 var(--fh); letter-spacing: .06em; text-transform: uppercase; color: var(--t2); }
.st-ticket-filas { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0; font: 16px/1.4 var(--fb); }
.st-ticket-filas > div { display: flex; align-items: baseline; gap: 8px; }
.st-ticket-filas dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; flex: 1; min-width: 0; }
.st-ticket-filas dt::after { content: ''; order: 2; flex: 1; min-width: 14px; border-bottom: 1.5px dotted var(--ln); }
.st-ticket-filas dd { margin: 0; font: 600 16px/1.4 var(--fh); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-ticket-filas .es-fuerte dt { font-weight: 600; }
.st-ticket-filas .es-fuerte dd { font-weight: 700; }
.st-ticket-sub { order: 3; flex-basis: 100%; margin-top: 1px; font: 13px/1.4 var(--fb); color: var(--t2); }
.st-ticket-sub[hidden] { display: none; }
.st-ticket-filas .es-fuerte .st-ticket-sub { font-weight: 400; }
.st-ticket-corte { position: relative; margin: 26px -22px 22px; border-top: 2px dashed var(--s2); }
@media (min-width: 520px) { .st-ticket-corte { margin-left: -30px; margin-right: -30px; } }
.st-ticket-corte::before, .st-ticket-corte::after { content: ''; position: absolute; top: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--s2); }
.st-ticket-corte::before { left: -14px; }
.st-ticket-corte::after { right: -14px; }
.st-ticket-queda-etiqueta { margin-top: 20px; font: 13px/1.3 var(--fb); color: var(--t2); }
.st-ticket-queda { margin-top: 4px; font: 700 clamp(32px, 9.5vw, 58px)/1.05 var(--fh); letter-spacing: -.04em; overflow-wrap: anywhere; }
@media (min-width: 900px) { .st-ticket-queda { font-size: clamp(40px, 4.4vw, 76px); } }
.st-ticket-aviso { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--gds); color: var(--gdst);
  font: 14px/1.4 var(--fb); }
.st-ticket-aviso .ms { font-size: 19px; margin-top: 1px; }
.st-ticket-explica { margin-top: 14px; font: 13px/1.5 var(--fb); color: var(--t2); }
.st-ticket > .btn { margin-top: 22px; padding: 0 18px; }
.st-ticket-nota { margin-top: 12px; font: 12px/1.45 var(--fb); color: var(--t2); text-align: center; text-wrap: balance; }
.st-cot-pagina { padding-top: clamp(40px, 6vw, 88px); }
.st-calculo { align-items: start; }
.st-calculo-tabla { display: flex; flex-direction: column; gap: 6px; }
.st-calculo-tabla .tabla td.num, .st-calculo-tabla .tabla th.num { text-align: right; }
.st-hechos { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ln); }
.st-hechos li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ln); }
.st-hechos .ms { font-size: 24px; color: var(--gdt); }
.st-hechos p > b { display: block; font: 600 16px/1.3 var(--fh); }
.st-hechos p > span { display: block; margin-top: 2px; font: 15px/1.45 var(--fb); color: var(--t2); }

/* ── Cierre ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.st-cierre { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-top: clamp(72px, 10vw, 140px); padding-bottom: clamp(64px, 9vw, 120px);
  text-align: center; }
.st-vaca { display: block; width: clamp(180px, 17vw, 320px); aspect-ratio: 620 / 520; }
.st-cierre-titulo { font: 700 clamp(40px, 6.4vw, 128px)/.98 var(--fh); letter-spacing: -.05em; text-wrap: balance; }
.st-testimonio { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.st-testimonio blockquote { margin: 0; font: italic 18px/1.5 var(--fb); }
.st-testimonio figcaption > b { display: block; font: 600 15px/1.3 var(--fh); }
.st-testimonio figcaption > span { font: 14px/1.4 var(--fb); color: var(--t2); }

/* ── Términos y privacidad ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.st-legal { display: flex; flex-direction: column; gap: 22px; padding-top: clamp(40px, 6vw, 72px); padding-bottom: 32px; }
.st-legal-titulo { font: 700 clamp(36px, 5vw, 56px)/1.05 var(--fh); letter-spacing: -.04em; }
.st-legal-fecha { margin-top: 10px; font: 15px/1.4 var(--fb); color: var(--t2); }
.st-legal-cabeza > .aviso { max-width: var(--texto-max); margin-top: 20px; }
.st-legal-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.st-legal-texto { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.st-legal-corto { max-width: var(--texto-max); }
/* Compu: el índice al costado (fijo al bajar) y el texto en su columna, con «En corto» arriba; en las pantallas anchas, «En corto» pasa
   a una tercera columna, también fija. */
@media (min-width: 1100px) {
  .st-legal-cuerpo { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); column-gap: clamp(40px, 5vw, 120px); row-gap: 28px; align-items: start; }
  .st-legal-lado { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 96px; }
  .st-legal-lado .st-legal-indice ol { columns: 1; }
  .st-legal-corto { grid-column: 2; grid-row: 1; }
  .st-legal-texto { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1500px) {
  .st-legal-cuerpo { grid-template-columns: minmax(220px, 1fr) minmax(0, 68ch) minmax(280px, 1fr); }
  .st-legal-corto { grid-column: 3; grid-row: 1 / span 2; position: sticky; top: 96px; }
  .st-legal-texto { grid-row: 1 / span 2; }
}
.st-legal-corto { padding: 20px 22px; }
.st-legal-corto-titulo { font: 600 17px/1.3 var(--fh); }
.st-legal-corto ul { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.st-legal-corto li { display: flex; align-items: flex-start; gap: 10px; font: 15px/1.45 var(--fb); }
.st-legal-corto li .ms { margin-top: 1px; font-size: 20px; }
.st-legal-indice { border-block: 1px solid var(--ln); }
.st-legal-indice summary { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font: 600 15px/1.3 var(--fh); cursor: pointer; list-style: none; }
.st-legal-indice summary::-webkit-details-marker { display: none; }
.st-legal-indice summary::after { content: 'expand_more'; margin-left: auto; font: 300 22px/1 var(--fi); color: var(--t2); transition: transform .2s ease; }
.st-legal-indice[open] summary::after { transform: rotate(180deg); }
.st-legal-indice ol { margin: 0 0 12px; padding-left: 22px; font: 15px/1.3 var(--fb); }
@media (min-width: 720px) { .st-legal-indice ol { columns: 2; column-gap: 32px; } }
.st-legal-indice li { break-inside: avoid; }
.st-legal-indice a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--tx); text-underline-offset: 4px; }
@media (min-width: 720px) { .st-legal-indice a { min-height: 34px; } }
.st-legal-seccion h2 { margin: 6px 0 10px; font: 700 22px/1.25 var(--fh); letter-spacing: -.01em; }
.st-legal-seccion p { max-width: var(--texto-max); margin: 0 0 12px; font: 16px/1.6 var(--fb); }
.st-legal-seccion ul { max-width: var(--texto-max); margin: 0 0 12px; padding-left: 22px; }
.st-legal-seccion li { margin: 6px 0; font: 16px/1.55 var(--fb); }
.st-legal-seccion a { color: var(--tx); text-underline-offset: 3px; }
.st-legal-ley { font-size: 14px !important; line-height: 1.55 !important; color: var(--t2); }

/* ── Estados generales ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.eg { display: flex; flex-direction: column; gap: 18px; width: min(100%, clamp(380px, 32vw, 560px)); min-height: calc(100dvh - 64px); margin: 0 auto; }
.eg-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 10px 0; text-align: center; }
.eg-figura { position: relative; display: grid; place-items: center; width: 136px; height: 118px; margin-bottom: 4px; animation: vkFloat 2.6s ease-in-out infinite; }
.eg-iso, .logo-vk.eg-iso { width: 112px; height: auto; }
.eg-figura-app { width: 112px; height: 112px; border-radius: 28px; background: var(--qr); box-shadow: var(--sh2), 0 0 0 1px var(--ln); }
.eg-figura-app .eg-iso, .eg-figura-app .logo-vk.eg-iso { width: 80px; }
.eg-insignia { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--s2); color: var(--tx); box-shadow: 0 0 0 4px var(--bg); }
.eg-insignia .ms { font-size: 26px; }
.eg-info .eg-insignia { background: var(--brs); color: var(--brst); }
.eg-ok .eg-insignia { background: var(--oks); color: var(--okt); animation: vkPop .5s both; }
.eg-error .eg-insignia { background: var(--ers); color: var(--ert); }
.eg-titulo { font: 600 25px/1.2 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.eg-texto { max-width: var(--texto-max); font: 16px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; }
.eg-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.eg-acciones .btn-texto { align-self: center; }
.eg-pasos { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 6px 0 0; padding: 0; list-style: none; text-align: left; }
.eg-pasos li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--bg); font: 15px/1.4 var(--fb); }
.eg-pasos .ms { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brs); color: var(--brst); font-size: 20px; }
.eg-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.eg-qr-caja { display: grid; place-items: center; width: 168px; height: 168px; padding: 12px; border-radius: 18px; background: var(--qr); box-shadow: 0 0 0 1px var(--ln); }
.eg-qr-caja svg { width: 100%; height: 100%; }
.eg-qr p { max-width: var(--texto-max); }
@media (min-width: 600px) {
  .eg { min-height: 0; padding: 32px; border-radius: 32px; background: var(--sf); box-shadow: var(--sh2), 0 0 0 1px var(--ln); }
  .eg-insignia { box-shadow: 0 0 0 4px var(--sf); }
  .eg-pasos li { background: var(--bg); }
  .cara-simple:has(.eg) { background: radial-gradient(60% 60% at 50% 20%, var(--brs), transparent 70%) no-repeat, var(--bg); }
}
.eg-bloque { display: contents; }   /* en el celular el título y el texto siguen en la columna de la vaca */
@media (min-width: 900px) {
  /* En la compu, a lo ancho con los márgenes de la página: la vaca a un lado; el título, el texto y los botones al otro. */
  .simple:has(> .eg), .eg-capa { padding-inline: var(--margen); }
  .eg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: clamp(32px, 6vw, 128px); row-gap: 22px;
    justify-self: stretch; width: auto; margin: 0; padding: clamp(28px, 5vh, 64px) 0; border-radius: 0; background: none; box-shadow: none; }
  .eg-cuerpo { display: contents; }
  .eg-figura { grid-column: 1; grid-row: 1 / span 2; justify-self: end; width: clamp(180px, 20vw, 320px); height: auto; aspect-ratio: 136 / 118; margin: 0; }
  .eg-figura-app { aspect-ratio: 1; }
  .eg-iso, .logo-vk.eg-iso { width: 82%; }
  .eg-figura-app .eg-iso, .eg-figura-app .logo-vk.eg-iso { width: 70%; }
  .eg-insignia { width: 32%; height: auto; aspect-ratio: 1; box-shadow: 0 0 0 4px var(--bg); }
  .eg-insignia .ms { font-size: clamp(26px, 2.2vw, 40px); }
  .eg-bloque { grid-column: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; }
  .eg-titulo { font-size: clamp(28px, 2.6vw, 44px); }
  .eg-texto { font-size: 17px; }
  .eg-acciones { grid-column: 2; align-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .eg-acciones .btn-ancho { width: auto; }
  .eg-pasos li { background: var(--sf); }
  .eg-qr { align-items: flex-start; }
}
/* Dentro del panel (el 404 o 403 de una pantalla del panel): una tarjeta en el contenido, en cualquier ancho. */
.cara-panel .eg { min-height: 0; margin: 8px auto 24px; padding: 28px 24px; border-radius: var(--r-card-lg); background: var(--sf); box-shadow: var(--sh); }
.cara-panel .eg-insignia { box-shadow: 0 0 0 4px var(--sf); }
.cara-panel .eg-pasos li { background: var(--bg); }
/* La «conexión lenta» encima de la página (la pone 20-sitio.js cuando un link o un formulario tarda más de 6 s). */
.eg-capa { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; overflow-y: auto; padding: 32px var(--gutter);
  background: var(--bg); animation: vkFade .2s ease-out both; }
@media (min-width: 600px) { .eg-capa { background: radial-gradient(60% 60% at 50% 20%, var(--brs), transparent 70%) no-repeat, var(--bg); } }
html.con-capa, html.con-capa body { overflow: hidden; }

/* ── 25-interno.css ── */
/* ═══ 25 · Panel interno de Vakita (A1–A5, consultas y la puerta) ══════════════════════════════════════════════════════════════
   Piezas propias que no están en el sistema; solo tokens. Medidas de design/Vakita 4 Mas pantallas.dc.html («Panel interno A1–A5»).
   Todo a lo ancho del contenido (el margen lo pone el layout con --margen-panel); solo el texto corrido se limita con --texto-max.
   La puerta es la única pieza centrada: un formulario de dos campos. Prefijo .int-.
     Comunes:  .int-flash · .int-pend (+ -titulo -item: lo pendiente del equipo) · .int-buscar (+ -campo) · .int-filtros + .int-cuenta
               · .int-chips (+ .int-chip-on) · .int-dl (+ .int-dl-cifras) · .int-botones · .int-filas/.int-fila (+ -texto -fin, .es-baja)
               · .int-registro · .int-crudo (lo que devolvió Mercado Pago, tal cual) · .int-rojo · .int-h2 · .int-nota · .int-sub
     Puerta:   .int-puerta (+ -marca -etiqueta -caja -cabeza -icono -titulo -sub -form -quien -otro -pie)
     A1:       .int-tabla-inst/.int-inst (+ -texto) · .int-plan · .int-situacion (+ -cabeza -texto) · .int-legal · .int-ficha · .int-docs
               · .int-tabla-sin-caja · .int-link-chip · .int-titulo-mp · .int-tarifa/.int-tramos/.int-tramo (+ -hueco) · .int-pct
     A2:       .int-aut (+ -doc -cabeza -titulo -sub -vista[.es-vacia .es-pdf .es-foto] -contra -contra-titulo) · .int-confirmo (.es-falta)
     A3:       .int-salud (.es-mal) · .int-fila-titulo · .int-alertas (.es-resuelta) · .int-alerta-texto
     A4:       .int-entrar (+ -titulo) · .int-quien (+ -cabeza -texto -titulo)
     A5:       .int-meses/.int-mes (+ -nombre -barra -cifras) · .int-top
     Consultas: .int-consulta (+ -cabeza -quien -titulo -tema -mensaje -respuesta -de) · .int-textarea
     A6:       .int-wsp (+ -texto -formas -forma -vinculo -qr -codigo -pasos -vence -modos)
     A7:       .int-probar-pasos
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Comunes ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.int-flash { animation: vkUp .3s var(--curva) both; }
.int-pend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.int-pend-titulo { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; font: 600 13px var(--fh); color: var(--t2); }
.int-pend-titulo .ms { font-size: 18px; }
.int-pend-item { text-decoration: none; min-height: 32px; }
@media (hover: hover) { .int-pend-item:hover { filter: brightness(.97); text-decoration: underline; } }
.int-h2 { font: 600 17px/1.25 var(--fh); }
.int-sub { margin-top: 6px; font: 600 13px var(--fh); color: var(--t2); letter-spacing: .02em; }
.int-rojo { color: var(--ert); font-weight: 600; }
.int-crudo { font: 13px/1.4 var(--fb); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.int-nota { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--gds); color: var(--gdst); font: 14px/1.45 var(--fb); }
.int-nota .ms { font-size: 20px; flex: none; margin-top: 1px; }
.int-nota > span:not(.ms) { max-width: var(--texto-max); }

.int-buscar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.int-buscar-campo { position: relative; flex: 1 1 280px; min-width: 0; display: flex; align-items: center; }
.int-buscar-campo > .ms { position: absolute; left: 14px; font-size: 21px; color: var(--t2); pointer-events: none; }
.int-buscar-campo .entrada { height: 48px; padding-left: 44px; border-radius: 14px; }

.int-filtros { flex-wrap: wrap; overflow: visible; }
.int-filtros .pestana { height: 40px; padding: 0 14px; font-size: 13.5px; }
.int-cuenta { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 2px; border-radius: var(--r-pill);
  background: var(--s2); color: var(--tx); font: 600 12px var(--fh); font-variant-numeric: tabular-nums; }
.pestana[aria-current="page"] .int-cuenta, .pestana[aria-selected="true"] .int-cuenta { background: color-mix(in srgb, var(--bg) 22%, transparent); color: inherit; }

.int-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.int-chips a.chip { text-decoration: none; min-height: 32px; }
.chip.int-chip-on { background: var(--tx); color: var(--bg); }

.int-dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font: 14px/1.45 var(--fb); }
.int-dl > div { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.int-dl dt { color: var(--t2); }
.int-dl dd { margin: 0; overflow-wrap: anywhere; }
.int-dl-cifras dd { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.int-dl-cifras dd b { font: 600 15px var(--fh); font-variant-numeric: tabular-nums; }
.int-dl-cifras dd .sub, .int-dl dd .sub { font: 12.5px var(--fb); color: var(--t2); }
@media (max-width: 599px) { .int-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } .int-dl-cifras dd { align-items: flex-start; text-align: left; } }

.int-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.int-botones form { display: contents; }
.int-filas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.int-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--ln); }
.int-fila:last-child { border-bottom: 0; }
.int-fila.es-baja { opacity: .6; }
.int-fila-texto { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; font: 14px/1.4 var(--fb); }
.int-fila-texto b { font: 600 14px/1.3 var(--fh); }
.int-fila-texto .sub { font: 13px/1.4 var(--fb); color: var(--t2); }
.int-fila-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; }
.int-fila-fin form { display: contents; }
@media (max-width: 599px) { .int-fila-fin { width: 100%; justify-content: flex-start; padding-left: 48px; margin-left: 0; } }
.int-registro { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font: 14px/1.4 var(--fb); }
.int-registro li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--ln); }
.int-registro li:last-child { border-bottom: 0; padding-bottom: 0; }
.int-registro b { font: 600 14px/1.35 var(--fh); }
.int-registro .sub { font: 13px/1.4 var(--fb); color: var(--t2); overflow-wrap: anywhere; }

/* ── La puerta (layout simple; la única caja centrada del interno) ────────────────────────────────────────────────────────────── */
.int-puerta { width: min(100%, 460px); display: flex; flex-direction: column; gap: 18px; animation: vkUp .4s var(--curva) both; }
.int-puerta-marca { display: flex; align-items: center; justify-content: center; gap: 10px; }
.int-puerta-etiqueta { font: 600 11px/1 var(--fh); letter-spacing: .08em; color: var(--t2); padding: 5px 8px; border-radius: 7px; background: var(--s2); }
.int-puerta-caja { display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.int-puerta-cabeza { display: flex; align-items: flex-start; gap: 14px; }
.int-puerta-icono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--gds); color: var(--gdst); }
.int-puerta-icono .ms { font-size: 26px; }
.int-puerta-titulo { font: 600 24px/1.15 var(--fh); letter-spacing: -.02em; }
.int-puerta-sub { margin-top: 4px; font: 14px/1.45 var(--fb); color: var(--t2); }
.int-puerta-form { gap: 14px; }
.int-puerta-form .btn { margin-top: 4px; }
.int-puerta-quien { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bg); font: 600 14px var(--fh); overflow-wrap: anywhere; }
.int-puerta-quien .ms { font-size: 22px; color: var(--t2); }
.int-puerta-otro { display: flex; justify-content: center; margin-top: -8px; }
.int-puerta-pie { display: flex; align-items: flex-start; gap: 8px; padding: 0 6px; }
.int-puerta-pie .ms { font-size: 18px; flex: none; }

/* ── A1 · Instituciones ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.int-inst { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.int-inst-texto { display: flex; flex-direction: column; min-width: 0; }
.int-inst-texto b { font: 600 14px/1.3 var(--fh); }
@media (hover: hover) { a.int-inst:hover b { color: var(--gdt); } }
.int-tabla-inst td.principal .chip { margin-top: 6px; }
.int-plan { display: block; font: 600 13.5px var(--fh); }
.int-tabla-inst .tabla td { vertical-align: middle; }
@media (min-width: 700px) { .int-tabla-inst td.principal { min-width: 240px; } }

.int-situacion { display: flex; flex-direction: column; gap: 12px; }
.int-situacion-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.int-situacion-texto { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.int-legal { font: 600 16px/1.3 var(--fh); }
.int-ficha { align-items: start; }
.int-ficha section { scroll-margin-top: 20px; }
.int-ficha .tarjeta-cabeza { flex-wrap: wrap; }
.int-docs { padding: 2px 14px; margin: 4px 0; list-style: none; }
.int-docs .lista-fila { min-height: 52px; }
.tarjeta .int-botones { margin-top: 12px; }
.tarjeta .int-dl + .t-chico, .tarjeta .int-botones + .t-chico { margin-top: 10px; }
.int-tabla-sin-caja { overflow-x: auto; margin: -6px 0 0; }
.int-link-chip { text-decoration: none; }
@media (hover: hover) { .int-link-chip:hover .chip { box-shadow: inset 0 0 0 1px currentColor; } }
.int-titulo-mp { display: flex; align-items: center; gap: 8px; }
.int-titulo-mp img { width: 24px; height: 24px; flex: none; }

.int-tarifa { gap: 16px; }
.int-tramos { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.int-tramos legend { margin-bottom: 8px; padding: 0; }
.int-tramo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 14px var(--fb); color: var(--t2); }
.int-tramo > .entrada:not(.int-pct) { flex: 1 1 180px; min-width: 0; }
.int-tramo > .int-pct { flex: none; width: 92px; }
.int-tramo .entrada { height: 48px; }
.int-tramo-hueco { flex: 1 1 180px; }
.int-pct { text-align: right; }

/* ── A2 · Autorizaciones ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.int-aut { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; scroll-margin-top: 20px; }
@media (min-width: 1000px) { .int-aut { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; } }
.int-aut-doc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.int-aut-cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; }
.int-aut-titulo { flex: 1 1 260px; font: 600 16px/1.3 var(--fh); }
.int-aut-titulo a { color: inherit; }
.int-aut-sub { font: 14px/1.45 var(--fb); color: var(--t2); }
.int-aut-vista { position: relative; display: grid; place-items: center; height: 240px; border-radius: 14px; overflow: hidden; color: var(--t2);
  background: repeating-linear-gradient(0deg, var(--s2) 0 8px, var(--bg) 8px 18px); text-decoration: none; }
.int-aut-vista.es-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--qr); }
.int-aut-vista.es-pdf { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--tx); }
.int-aut-vista.es-pdf > .ms { font-size: 44px; color: var(--ert); }
.int-aut-vista.es-pdf > span:not(.ms) { display: flex; flex-direction: column; font: 600 15px var(--fh); }
.int-aut-vista.es-pdf .sub { font: 13px var(--fb); color: var(--t2); }
.int-aut-vista.es-vacia { gap: 6px; font: 600 14px var(--fh); }
.int-aut-vista.es-vacia .ms { font-size: 30px; }
@media (hover: hover) { a.int-aut-vista:hover { box-shadow: inset 0 0 0 2px var(--gdl); } }
.int-aut-contra { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--bg); min-width: 0; align-self: start; }
.int-aut-contra-titulo { font: 600 16px var(--fh); }
.int-confirmo { display: flex; align-items: flex-start; gap: 8px; font: 14px/1.45 var(--fb); color: var(--okt); }
.int-confirmo .ms { font-size: 19px; flex: none; margin-top: 1px; }
.int-confirmo.es-falta { color: var(--ert); }

/* ── A3 · Campañas y pagos ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.int-salud { flex-wrap: wrap; }
.int-salud > .ms { color: var(--okt); }
.int-salud.es-mal { background: var(--ers); color: var(--ert); }
.int-salud.es-mal > .ms { color: inherit; }
.int-salud > span:not(.ms) { min-width: 0; }
.int-fila-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.int-alertas .lista-fila { align-items: flex-start; }
.int-alertas .lista-fila > .chip { margin-top: 2px; }
.int-alerta-texto { font: 600 14px/1.4 var(--fh); overflow-wrap: anywhere; }
.int-alertas .es-resuelta { opacity: .65; }
.int-alertas .lista-fin form { display: contents; }
.tabla tfoot td { border-top: 1px solid var(--ln); }

/* ── A4 · Entrar como ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.int-entrar { display: flex; flex-direction: column; gap: 12px; }
.int-entrar-titulo { font: 600 17px var(--fh); }
.int-quien { display: flex; flex-direction: column; gap: 6px; }
.int-quien-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 6px; }
.int-quien-texto { flex: 1 1 220px; min-width: 0; }
.int-quien-titulo { font: 600 17px/1.3 var(--fh); }
.int-quien-titulo a { color: inherit; text-decoration: none; }
@media (hover: hover) { .int-quien-titulo a:hover { color: var(--gdt); text-decoration: underline; } }

/* ── A5 · Métricas ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.int-meses { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.int-mes { display: grid; grid-template-columns: minmax(120px, 18%) minmax(0, 1fr) minmax(150px, auto); align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ln); }
.int-mes:last-child { border-bottom: 0; }
.int-mes-nombre { font: 600 14px var(--fh); }
.int-mes-cifras { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.int-mes-cifras b { font: 600 15px var(--fh); font-variant-numeric: tabular-nums; }
.int-mes-cifras .sub { font: 12.5px var(--fb); color: var(--t2); }
@media (max-width: 599px) { .int-mes { grid-template-columns: minmax(0, 1fr) auto; } .int-mes-barra { grid-column: 1 / -1; order: 3; } }
.int-top { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; font: 14px/1.4 var(--fb); }
.int-top li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; }
.int-top a { font: 600 14px var(--fh); color: inherit; }
.int-top .num { font: 600 14px var(--fh); font-variant-numeric: tabular-nums; }
.int-top .sub { grid-column: 1 / -1; font: 12.5px var(--fb); color: var(--t2); }

/* ── Consultas de Ayuda ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.int-consulta { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 20px; }
.int-consulta-cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.int-consulta-quien { flex: 1 1 260px; min-width: 0; }
.int-consulta-titulo { font: 600 15px/1.35 var(--fh); }
.int-consulta-titulo a { color: inherit; }
.int-consulta-tema { font-style: italic; }
.int-consulta-mensaje { font: 15px/1.55 var(--fb); white-space: pre-line; overflow-wrap: anywhere; max-width: var(--texto-max); }
.int-consulta-respuesta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--bg); }
.int-consulta-de { display: flex; align-items: center; gap: 6px; font: 600 13px var(--fh); color: var(--t2); }
.int-consulta-de .ms { font-size: 18px; }
.int-textarea { height: auto; min-height: 96px; padding: 14px 16px; line-height: 1.45; resize: vertical; }

/* ── Baja de datos (Ley 25.326) ──────────────────────────────────────────────────────────────────────────────────────────────── */
.int-texto { font: 14px/1.55 var(--fb); color: var(--t2); max-width: var(--texto-max); }
.int-texto b { color: var(--tx); }
.int-baja-buscar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: end; }
@media (min-width: 700px) { .int-baja-buscar { grid-template-columns: minmax(0, 1fr) auto; } .int-baja-buscar .btn { margin-bottom: 26px; } }
.int-baja-resumen { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--ln); }
.int-baja-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font: 14px/1.45 var(--fb); }
.int-baja-lista li { display: flex; align-items: flex-start; gap: 10px; }
.int-baja-lista .ms { font-size: 20px; color: var(--t2); flex: none; }
.int-baja-lista b { font: 600 14px var(--fh); }
.int-salir-celu { margin-top: 8px; }

/* Celular: las tiras de chips que son links tienen toque de 44 px, y las pestañas de A3 bajan de línea (se ven todas). */
@media (max-width: 899px) {
  .int-pend-item, .int-chips a.chip { min-height: 44px; padding: 0 14px 0 11px; font-size: 13px; }
  .int-pestanas { flex-wrap: wrap; overflow: visible; }
  .int-pestanas .pestana { height: 40px; padding: 0 12px; font-size: 13.5px; }
}

/* ── A6 · WhatsApp ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.int-wsp-texto { margin: 0; font: 14px/1.5 var(--fb); color: var(--t2); max-width: var(--texto-max); }
.int-wsp-texto code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 6px; border-radius: 6px; background: var(--s2); color: var(--tx); }
.int-wsp-formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.int-wsp-forma { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 16px; background: var(--s2); }
.int-wsp-forma .campo { align-self: stretch; }
.int-wsp-vinculo { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.int-wsp-qr { width: clamp(220px, 22vw, 300px); height: auto; aspect-ratio: 1; padding: 10px; border-radius: 14px; background: #fff; }   /* blanco también en oscuro: si no, no se escanea */
.int-wsp-codigo { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--s2); font: 700 clamp(30px, 3vw, 44px)/1 var(--fh); letter-spacing: .08em; }
.int-wsp-pasos, .int-probar-pasos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font: 14px/1.5 var(--fb); max-width: var(--texto-max); }
.int-wsp-pasos { max-width: 46ch; }
.int-wsp-vence { flex-basis: 100%; margin: 0; font: 13px/1.4 var(--fb); color: var(--t2); }
.int-wsp-modos { display: flex; flex-direction: column; gap: 22px; }
.int-wsp-modos fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.int-wsp-paso { align-items: center; flex-wrap: wrap; }
.int-wsp-paso > span { flex: 1 1 260px; }
/* Las opciones de «Cómo se usa la línea» son largas: en el celular van una debajo de la otra en vez de desbordar. */
@media (max-width: 640px) {
  .int-wsp-modos .segmentado { display: flex; flex-direction: column; align-items: stretch; border-radius: 20px; overflow: visible; }
  .int-wsp-modos .segmentado-op { white-space: normal; text-align: center; line-height: 1.25; padding: 10px 14px; }
}

/* ── 30-comprador.css ── */
/* ═══ 30 · Comprador (C1–C9, C5b, C6–C8; design/PantallaComprador.dc.html). Solo lo que el sistema no trae: el resto son las piezas
   de 10-…15-* (talón, grilla, premio, vendedor, cartel, cuenta regresiva, hojas). Solo tokens: la marca de cada institución y el modo
   oscuro salen solos. Cortes: celular < 1000 px ≤ compu (columna lateral de 380; los mismos que .solo-ancho / .no-ancho).
     Comunes   .c-centro (pantalla de resultado centrada) · .c-kicker · .c-cabeza/.c-titulo/.c-bajada · .c-seccion · .c-fichas + .c-ficha
               [.c-ficha-grande] · .c-filas (dl de datos: dt a la izquierda, dd a la derecha) · .c-estado-nums (+ .c-num .c-sigue .c-vendido)
               · .c-camp (tarjeta de campaña: .c-camp-foto, -titulo, -premio, -datos, -avance, -estado) · .c-mp (hoja «Te llevamos a
               Mercado Pago») · .c-hoja-inst (hoja «Datos de la institución») · .c-centro-texto
     C1        .c1 (degradé suave del color arriba, en el celular) · .c1-titulo · .c1-pildoras · .c1-premios · .c1-garantia · .c1-enlaces
     C2                         C3  .c3-resumen · .c3-fila · .c3-total · .c3-legal      C4  .c4-titulo · .c4-texto · .c4-nota · .c4-lento
     C5 / C5b  .c5-estado · .c5-cuerpo (en la compu, .c5-talon al lado de .c5-resto) · .c5-pasos · .c5-suerte · .c5-botones · .c5b-vivo
     C6        .c6-portada (tarjeta del color de la institución) · .c6-nombre · .c6-lista · .c6-terminadas
     C7        .c7-caja · .c7-numero (68 px)      C8  .c8-oficial · .c8-ubicacion · .c8-ganador [.es-tuyo] · .c8-numero · .c8-quien · .c8-nota
     C9        .c9-corto · .c9-seccion · .c9-titulo · .c9-texto · .c9-lista
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Comunes ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.c-centro { align-items: center; text-align: center; }
@media (max-width: 999px) { .c-centro { justify-content: center; min-height: calc(100svh - var(--barra-alto) - 150px); } }
@media (min-width: 1000px) { .c-centro { padding-top: 28px; } }
.c-centro > * { width: min(100%, var(--texto-max)); }   /* los bloques acompañan el ancho del texto, no un ancho fijo */
.c-centro > .cartel, .c-centro > .celebracion { width: auto; }
@media (min-width: 1000px) { .c-centro .cartel-texto, .c8 .cartel-texto { max-width: var(--texto-max); } }
.c-centro-texto { text-align: center; }
.c-kicker { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--fh); }
.c-kicker .ms { color: var(--brt); }
.c-cabeza { display: flex; flex-direction: column; gap: 6px; }
.c-titulo { font: 700 30px/1.1 var(--fh); letter-spacing: -.02em; }
.c-bajada { font: 15px/1.45 var(--fb); color: var(--t2); }
.c-seccion { font: 700 19px/1.25 var(--fh); margin-top: 4px; }

.c-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.c-fichas-centro { justify-content: center; }
.c-ficha { display: inline-grid; place-items: center; height: 42px; min-width: 64px; padding: 0 14px; border-radius: 13px; background: var(--brs);
  color: var(--brst); font: 700 19px/1 var(--fh); font-variant-numeric: tabular-nums; }
.c-ficha-grande { height: 50px; padding: 0 16px; border-radius: 15px; font-size: 23px; animation: vkUp .4s .25s var(--curva) both; }

.c-filas { margin: 0; padding: 4px 18px; font: 15px/1.4 var(--fb); }
.c-filas > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ln); }
.c-filas > div:last-child { border-bottom: 0; }
.c-filas dt { color: var(--t2); flex: none; }
.c-filas dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.c-filas.tarjeta-suave { padding: 6px 16px; }
.c-filas-sub { display: block; font-weight: 400; font-size: 13px; color: var(--t2); margin-top: 2px; }

.c-estado-nums { padding: 4px 16px; text-align: left; }
.c-estado-nums .lista-fila { padding: 12px 0; }
.c-num { font: 700 19px/1.2 var(--fh); font-variant-numeric: tabular-nums; }
.c-sigue, .c-vendido { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.3 var(--fh); flex: none; }
.c-sigue { color: var(--okt); }
.c-vendido { color: var(--t2); }
.c-sigue .ms, .c-vendido .ms { font-size: 19px; }

/* Tarjeta de una campaña (C6 y elegir campaña) */
.c-camp { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.c-camp-fila { display: flex; align-items: center; gap: 14px; }
.c-camp-foto { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 18px;
  background: var(--brs); color: var(--brst); }
.c-camp-foto .ms { font-size: 30px; }
.c-camp-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-camp-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-camp-titulo { font: 700 17px/1.2 var(--fh); text-wrap: balance; }
.c-camp-premio { font: 14px/1.35 var(--fb); color: var(--t2); margin-top: 3px; }
.c-camp-datos { font: 600 14px/1.3 var(--fh); margin-top: 6px; font-variant-numeric: tabular-nums; }
.c-camp-flecha { color: var(--t2); font-size: 24px; flex: none; }
.c-camp-avance { display: flex; align-items: center; gap: 10px; }
.c-camp-avance .barra { flex: 1; }
.c-camp-quedan { font: 600 13px/1.2 var(--fb); color: var(--t2); flex: none; font-variant-numeric: tabular-nums; }
.c-camp-estado { display: flex; }

/* Hoja «Te llevamos a Mercado Pago» */
.c-mp { display: flex; flex-direction: column; gap: 16px; }
.c-mp-logo { width: 64px; height: 64px; padding: 8px; border-radius: 20px; background: var(--qr); box-shadow: var(--sh); object-fit: contain; }
.c-mp-texto { font: 16px/1.5 var(--fb); color: var(--t2); }
.c-mp-texto b { color: var(--tx); }
.c-mp-ayuda { display: flex; gap: 12px; align-items: flex-start; font: 14px/1.45 var(--fb); color: var(--t2); }
.c-mp-ayuda .ms { font-size: 20px; flex: none; }

/* Hoja «Datos de la institución» */
.c-hoja-inst { display: flex; flex-direction: column; gap: 16px; }
.c-hoja-inst-cabeza { display: flex; align-items: center; gap: 14px; }
.c-hoja-inst-nombre { font: 700 19px/1.2 var(--fh); text-wrap: balance; }
.c-hoja-inst-lugar { font: 14px/1.4 var(--fb); color: var(--t2); }
.c-vendedores { margin: 0; padding: 0; list-style: none; }
.c-vendedores .lista-fila { text-decoration: none; color: var(--tx); gap: 12px; }

/* ── C1 · página de compra ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.c1 { position: relative; isolation: isolate; }
@media (max-width: 999px) {
  .c1::before { content: ''; position: absolute; z-index: -1; top: -8px; left: calc(-1 * var(--lado)); right: calc(-1 * var(--lado)); height: 460px;
    background: radial-gradient(130% 42% at 50% 0%, var(--brs) 0%, transparent 70%); pointer-events: none; }
}
.c1-cabeza { display: flex; flex-direction: column; }
.c1-titulo { font: 700 29px/1.1 var(--fh); letter-spacing: -.025em; animation: vkUp .5s .05s var(--curva) both; }
.c1-pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.c1-descripcion { margin-top: 12px; font: 15px/1.5 var(--fb); color: var(--t2); }
.c1-premios, .c1-premios-lista { display: flex; flex-direction: column; gap: 12px; }
.c1-subtitulo { font: 700 19px/1.25 var(--fh); margin-top: 6px; }
.c1-garantia { display: flex; gap: 12px; align-items: flex-start; padding: 2px 4px; font: 15px/1.45 var(--fb); color: var(--t2); }
.c1-garantia .ms { font-size: 24px; color: var(--brt); flex: none; }
.c1-garantia b { color: var(--tx); font-weight: 600; }
.c1-enlaces { display: flex; flex-direction: column; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--sh); overflow: hidden; }
.c1-enlace { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 16px 18px; border: 0; background: transparent;
  color: var(--tx); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.c1-enlace + .c1-enlace { box-shadow: inset 0 1px 0 var(--ln); }
.c1-enlace > .ms { color: var(--t2); font-size: 22px; flex: none; }
.c1-enlace:hover { background: var(--bg); }
.c1-enlace:focus-visible { outline: 2px solid var(--brl); outline-offset: -2px; }
.c1-enlace-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c1-enlace-texto b { font: 600 15px/1.3 var(--fh); }
.c1-enlace-texto span { font: 13px/1.35 var(--fb); color: var(--t2); margin-top: 2px; }
.c1-quien { align-items: center; }
@media (min-width: 1000px) {
  .c1 { gap: 20px; }
  .c1-titulo { font-size: 48px; line-height: 1.04; letter-spacing: -.03em; }
  .c1-pildoras { margin-top: 18px; }
  .c1-garantia { font-size: 16px; line-height: 1.5; padding: 0; }
  .c1-enlaces { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: transparent; box-shadow: none; overflow: visible; }
  .c1-enlace { border-radius: 20px; background: var(--sf); box-shadow: var(--sh); padding: 16px; }
  .c1-enlace + .c1-enlace { box-shadow: var(--sh); }
  .c1-enlace:hover { background: var(--sf); transform: translateY(-2px); }
  .c1-enlace { transition: transform .25s var(--curva); }
}

/* ── C2 · grilla ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── C3 · tus datos y pago ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.c3-resumen { display: flex; flex-direction: column; gap: 14px; }
.c3-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 15px/1.4 var(--fb); color: var(--t2); }
.c3-fila b { color: var(--tx); font-weight: 600; text-align: right; }
.c3-total { padding-top: 14px; border-top: 1px solid var(--ln); }
.c3-total span { font: 600 16px/1.2 var(--fh); color: var(--tx); }
.c3-total b { font: 700 27px/1.1 var(--fh); font-variant-numeric: tabular-nums; }
.c3-legal .aviso-texto { color: var(--tx); font-size: 15px; line-height: 1.45; }
.c3-legal .ms { color: var(--brt); }
.c3-legal a { color: var(--brt); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cara-comprador .barra-accion .btn-texto { min-height: var(--tap); }
/* Botones de texto largo («Pagar $15.000 con Mercado Pago», «Guardar comprobante provisorio»): entran en una línea en el celular. */
.c-btn-largo { font-size: 16px; letter-spacing: -.01em; gap: 8px; white-space: nowrap; }
.c-btn-largo .ms { font-size: 20px; }
@media (max-width: 359px) { .c-btn-largo .ms { display: none; } }

/* ── C4 · resultado del pago ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.c4-titulo { font: 700 27px/1.15 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.c4-texto { max-width: var(--texto-max); font: 16px/1.5 var(--fb); color: var(--t2); }
.c4-nota { padding: 14px 16px; font: 15px/1.45 var(--fb); text-align: left; }
.c4-lento { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.c4 .cuenta { align-self: center; width: auto; }

/* ── C5 / C5b · comprobante ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.c5-estado { display: flex; }
.c5-talon { width: 100%; }
.c5-pasos { padding: 16px 20px 6px; margin: 0; }
.c5-suerte { font: 14px/1.45 var(--fb); color: var(--t2); text-align: center; text-wrap: pretty; }
.c5-suerte b { color: var(--tx); }
.c5-botones { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.c5-botones .btn-texto { align-self: center; }
.c5b-vivo { display: flex; align-items: flex-start; gap: 6px; }
.c5b-vivo .ms { font-size: 17px; flex: none; }
.c5-cuerpo, .c5-resto { display: contents; }   /* en el celular no existen: una sola columna */
@media (min-width: 1000px) {
  /* El talón al lado de los pasos y los botones, repartiendo el ancho; si no entran los dos (de 1000 a 1200 px), van uno abajo del otro. */
  .c5-cuerpo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px clamp(20px, 3vw, 48px); }
  .c5-cuerpo > .c5-talon { flex: 1.3 1 360px; min-width: 0; }
  .c5-cuerpo > .c5-talon:only-child { flex: 0 1 max(360px, 56%); }   /* solo (provisorio liberado): la misma proporción, sin estirarse */
  .c5-resto { display: flex; flex: 1 1 280px; flex-direction: column; gap: 18px; min-width: 0; }
  .c5-suerte { text-align: left; }
}

/* ── C6 · vidriera de la institución ───────────────────────────────────────────────────────────────────────────────────────────── */
.c6-portada { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r-card-lg); background: var(--br); color: var(--onbr); }
.c6-nombre { font: 700 24px/1.15 var(--fh); letter-spacing: -.015em; }
.c6-sobre { font: 15px/1.45 var(--fb); }
.c6-lugar { display: flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--fb); }
.c6-lugar .ms { font-size: 17px; }
.c6-lista { display: flex; flex-direction: column; gap: 14px; }
.c6-terminadas { margin: 0; padding: 4px 18px; list-style: none; }
.c6-terminadas .lista-fila { gap: 14px; color: var(--tx); text-decoration: none; padding: 14px 0; }
.c6-copa { color: var(--brt); font-size: 24px; flex: none; }
@media (min-width: 1000px) {
  .c6-portada { padding: 28px 32px; gap: 14px; }
  .c6-nombre { font-size: 32px; }
  .c6-sobre { font-size: 16px; max-width: 560px; }
}

/* ── C7 · verificar ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.c7-caja { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px; text-align: center; }
.c7-numero { font: 700 68px/1 var(--fh); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.c7-texto { max-width: 320px; font: 15px/1.5 var(--fb); color: var(--t2); }

/* ── C8 · resultados ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.c8-tuyo .ms { font-size: 30px; }
.c8-oficial { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.c8-oficial-titulo { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--fh); }
.c8-oficial-titulo .ms { color: var(--brt); flex: none; }
.c8-ubicaciones { display: flex; flex-wrap: wrap; gap: 8px; }
.c8-ubicacion { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--bg);
  font: 600 15px/1 var(--fh); font-variant-numeric: tabular-nums; }
.c8-ubicacion b { font-weight: 700; }
.c8-ganador { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.c8-ganador.es-tuyo { box-shadow: 0 0 0 2px var(--brl), var(--sh); }
.c8-ganador-fila { display: flex; align-items: center; gap: 14px; }
.c-camp-foto.c8-foto { width: 58px; height: 58px; border-radius: 16px; }
.c8-premio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c8-premio-nombre { font: 13px/1.35 var(--fb); color: var(--t2); text-wrap: balance; }
.c8-resultado { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.c8-numero { font: 700 30px/1.1 var(--fh); font-variant-numeric: tabular-nums; flex: none; }
.c8-quien { min-width: 0; display: flex; flex-direction: column; text-align: right; }
.c8-quien b { font: 700 17px/1.25 var(--fh); }
.c8-quien span { font: 13px/1.35 var(--fb); color: var(--t2); }
.c8-nota { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; font: 13px/1.45 var(--fb); color: var(--t2); }
.c8-nota .ms { font-size: 18px; flex: none; }

/* ── C9 · bases y condiciones ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.c9-corto { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.c9-corto-titulo { font: 700 17px/1.3 var(--fh); }
.c9-corto-lista { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.c9-corto-lista li { display: flex; gap: 10px; align-items: flex-start; font: 15px/1.4 var(--fb); }
.c9-corto-lista .ms { font-size: 20px; flex: none; }
.c9-seccion { display: flex; flex-direction: column; gap: 6px; }
.c9-titulo { font: 700 17px/1.3 var(--fh); }
.c9-texto, .c9-lista { font: 16px/1.6 var(--fb); color: var(--t2); }
.c9-lista { margin: 0; padding-left: 20px; }

/* Arreglo local (avisado al sistema): .logo-vk (width: auto, va después en 10-componentes) le gana a .vacio-iso y la vaca del estado
   vacío sale a tamaño natural y desborda el celular. */
.cara-comprador .vacio .vacio-iso { width: 132px; height: auto; }

/* El 2.º premio y los que siguen van de a dos, como en el diseño (PantallaComprador: grid 1fr 1fr). Cada premio viene seguido de su
   hoja (oculta), así que el último premio es el anteúltimo hijo: si queda solo en su fila, ocupa las dos columnas. */
.c1-premios > .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.c1-premios > .cols-2 > .premio-envoltura:nth-last-child(2):nth-child(4n+1) { grid-column: 1 / -1; }
.c1-premios > .cols-2 .premio-chico { height: 100%; }

/* En pantallas anchas (≥ 1200 px), los premios de C1 van como tarjetas con foto que se reparten el ancho (el 1.º grande, los
   demás al lado) en vez de filas chicas: con ancho completo y márgenes en porcentaje, las filas dejaban media pantalla vacía. */
@media (min-width: 1200px) {
  .c1-premios.no-ancho { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  .c1-premios-lista.solo-ancho { display: none !important; }
  .c1-premios.no-ancho > .premio .premio-foto { height: clamp(240px, 17vw, 380px); }
  .c1-premios.no-ancho > .cols-2 { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; }
  .c1-premios.no-ancho > .cols-2 .premio-chico .premio-foto { height: clamp(86px, 7vw, 140px); }
}

/* Institución de prueba (instituciones.es_prueba): una franja arriba para que nadie la confunda con una real. */
.aviso-prueba { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 9px var(--margen);
  background: var(--ins); color: var(--int); font: 14px/1.4 var(--fb); text-align: center; }
.aviso-prueba .ms { flex: none; font-size: 18px; }

/* «¿A quién le comprás?» agrupado por división, con buscador si son muchos. */
.c-vend-elegir { display: flex; flex-direction: column; gap: 10px; }
.c-vend-grupo-titulo { margin: 4px 0 2px; font: 600 13px/1.3 var(--fh); color: var(--t2); text-transform: uppercase; letter-spacing: .04em; }

/* ── 40-vendedor.css ── */
/* ═══ 40 · Vendedor: el ingreso sin contraseña (T1), la invitación (V1), el permiso del adulto (V2) y la app del vendedor (V3–V9).
   Diseño: design/PantallaVendedor.dc.html (estilos exactos en línea) y el tablero «Un día de Sofía vendiendo». Solo tokens: el oscuro y la
   marca de la institución salen solos. Lo común (botones, chips, tarjetas, campos, grilla, hojas, meta, barras) es del sistema (10–15).
     .vd-auth / .vd-auth-caja      pantallas de ingreso: en el celular ocupan la pantalla (botones abajo, al alcance del pulgar); en la compu
                                   (≥ 900) a todo el ancho sobre un degradé suave de la marca, en dos columnas (.vd-auth-dos: .vd-auth-lado
                                   lo que se explica, .vd-auth-accion el formulario o los botones; .vd-auth-elegir en «¿A cuál entrás?»)
     .vd-codigo-paso               el paso del código al revés: .vd-burbuja (el mensaje que se manda), .vd-esperando + .vd-pulso
     .vd-accesos / .vd-acceso      «¿A cuál entrás?»: tarjeta con logo de la institución, título, detalle y chevron
     .vd-invita-foto               V1: foto del 1.er premio con la institución encima · .vd-beneficios · .vd-celular-grande
     .vd-datos-chico               V2: qué se hace con los datos del chico
     .vd-sumate-*                  V1b: sumarse por el link o el QR de la campaña (campos de «Tus datos» y lo que ya tiene en la campaña)
     .vd-hola · .vd-inicio · .vd-col  V3: en el celular las columnas se deshacen (display: contents) y el orden es el de la guía §9
     .vd-pedido · .vd-mini · .vd-mas · .vd-compartir · .vd-qr-btn · .vd-ultimas
     .vd-msj · .vd-escribime · .vd-tono   V4 · .vd-qr* V5 (blanco fijo) · .vd-efectivo* V6 · .vd-total* .vd-filtro .vd-venta V7
     .vd-heroe · .vd-tabla-div · .vd-desafio V8 · .vd-perfil* .vd-datos .vd-ajuste .vd-instalar V9
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Comunes del área ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vd-titulo { font: 600 27px/1.15 var(--fh); letter-spacing: -.02em; }
.vd-subtitulo { margin-top: 4px; font: 600 16px/1.3 var(--fh); }
.vd-texto-suave, .btn-texto.vd-texto-suave { color: var(--t2); text-decoration: none; }
.vd-texto-peligro, .btn.vd-texto-peligro { color: var(--ert); }
.vd-ayuda { display: flex; gap: 8px; align-items: flex-start; font: 13.5px/1.4 var(--fb); color: var(--t2); }
.vd-ayuda .ms { font-size: 18px; margin-top: 1px; }
.vd-hoja-texto { font: 15px/1.5 var(--fb); color: var(--t2); }
.vd-hoja-texto + .vd-hoja-texto { margin-top: 10px; }
.vd-hoja-texto b { color: var(--tx); }
.vd-iso-flota { animation: vkFloat 2.6s ease-in-out infinite; flex: none; }
/* Arreglo local (avisado al sistema, igual que en 30-comprador): .logo-vk (width: auto, va después) le gana a .vacio-iso y la vaca del
   vacío sale a su tamaño natural (521 px). */
.cara-vendedor .vacio .vacio-iso { width: 132px; height: auto; }
.cara-vendedor .vacio-marco .vacio-iso { width: 84px; }
@media (min-width: 900px) {
  /* El diseño reparte las dos columnas del vendedor en 1,15 fr + 1 fr con 20 de aire (PantallaVendedor: colsCss). */
  .vd-inicio.cols-21, .vd-compartir-pantalla.cols-21, .vd-ranking.cols-21, .vd-efectivo .cols-21 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
}

/* ── Ingreso: T1, V1 y V2 ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.vendedor-cuerpo:has(> .vd-auth) { max-width: none; padding: 0; }
.vd-auth { display: flex; flex-direction: column; min-height: calc(100dvh - 64px); }
.vd-auth-caja { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: calc(18px + env(safe-area-inset-top)) 22px 24px; min-width: 0; }
.vd-auth-logo { align-self: flex-start; line-height: 0; }
.vd-auth-cuerpo, .vd-codigo-paso { flex: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vd-auth-titulo { margin-top: 10px; font: 600 28px/1.15 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.vd-auth-sub { margin-top: 8px; font: 16px/1.5 var(--fb); color: var(--t2); }
.vd-auth-sub b { color: var(--tx); font-weight: 600; }
.vd-auth-espacio { flex: 1; min-height: 4px; }
.vd-auth-botones { display: flex; flex-direction: column; gap: 8px; }
.vd-auth-pie { display: flex; justify-content: center; }
.vd-auth .cartel { flex: 1; justify-content: center; }
/* Las dos columnas de la compu: lo que se explica (.vd-auth-lado) y lo que se hace (.vd-auth-accion), dentro de un .vd-auth-dos o del
   paso del código. En el celular no existen (display: contents): sigue siendo una sola columna con los botones abajo. */
.vd-auth-lado, .vd-auth-accion { display: contents; }
@media (max-width: 899px) { .vd-auth-elegir { display: contents; } }
@media (min-width: 900px) {
  /* A todo el ancho con márgenes en porcentaje (como /sumarme y /alta): nada de tarjeta angosta centrada. */
  .vd-auth { min-height: calc(100dvh - 64px); padding: clamp(24px, 4vh, 48px) var(--margen) clamp(32px, 6vh, 72px);
    background: radial-gradient(70% 60% at 25% 15%, var(--brs), transparent 70%); }
  .vd-auth-caja { gap: clamp(24px, 4vh, 44px); padding: 0; }
  .vd-auth-cuerpo, .vd-codigo-paso { flex: none; margin-block: auto; }   /* centrado en el alto que queda debajo del logo */
  .vd-auth-dos, .vd-codigo-paso { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px clamp(28px, 5vw, 96px);
    align-items: center; }
  .vd-codigo-paso > .aviso { grid-column: 1 / -1; }   /* el aviso de institución de prueba va arriba de las dos columnas */
  .vd-auth-lado, .vd-auth-accion { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .vd-auth-titulo { font-size: clamp(30px, 2.6vw, 44px); }
  .vd-auth-sub { font-size: 17px; max-width: var(--texto-max); }
  .vd-auth-espacio { display: none; }
  .vd-auth .vd-esperando-centro { justify-content: flex-start; }
  /* Un cartel solo (venció, no está en ninguna campaña, el link ya se usó…): la explicación a la izquierda y sus botones a la derecha,
     igual que las demás pantallas del ingreso. */
  .vd-auth .cartel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 96px); row-gap: 14px;
    justify-items: start; align-items: center; padding: 0; text-align: left; }
  .vd-auth .cartel > * { grid-column: 1; }
  .vd-auth .cartel > .cartel-acciones { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: stretch; margin: 0; }
  .vd-auth .cartel-titulo { font-size: clamp(27px, 2.3vw, 38px); }
  .vd-auth .cartel-texto { max-width: var(--texto-max); font-size: 17px; }
}

/* El paso del código (al revés): la burbuja con el mensaje que se manda, la espera y el campo de 6 casillas del sistema. */
.vd-burbuja { align-self: flex-end; max-width: 92%; padding: 12px 14px; border-radius: 18px 18px 4px 18px; background: var(--oks); color: var(--tx);
  font: 15px/1.45 var(--fb); box-shadow: var(--sh); overflow-wrap: anywhere; }
.vd-esperando { display: flex; align-items: center; gap: 10px; margin-top: -6px; font: 14px/1.4 var(--fb); color: var(--t2); }
.vd-esperando-centro { justify-content: center; text-align: left; }
.vd-pulso { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); }
.vd-pulso::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; animation: vdPulso 1.6s ease-out infinite; }
@keyframes vdPulso { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
.vd-codigo-form { display: flex; flex-direction: column; gap: 10px; }
.vd-codigo-etq { font: 14px/1.45 var(--fb); color: var(--t2); }
.vd-codigo-paso.ya-volvio .vd-esperando { display: none; }

/* «¿A cuál entrás?» */
.vd-accesos { display: flex; flex-direction: column; gap: 12px; }
.vd-acceso { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 16px; border: 1px solid var(--ln); border-radius: 22px;
  background: var(--sf); color: var(--tx); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.vd-acceso:hover { border-color: var(--brl); }
.vd-acceso:active { transform: scale(.98); }
.vd-acceso[aria-current="true"] { border: 2px solid var(--brl); padding: 15px; }
.vd-acceso > .ms { flex: none; color: var(--t2); }
.vd-acceso .avatar { background: var(--brs); color: var(--brst); }
.vd-acceso-logo { flex: none; display: inline-flex; }
.vd-acceso-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vd-acceso-titulo { font: 600 16px/1.25 var(--fh); }
.vd-acceso-sub { font: 14px/1.35 var(--fb); color: var(--t2); }

/* V1 · Invitación */
.vd-invita-foto { position: relative; isolation: isolate; height: 250px; border-radius: 30px; overflow: hidden; background: var(--brs); flex: none; }
.vd-invita-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vd-invita-foto:not(.sin-foto)::after { content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--qrt) 60%, transparent)); }
.vd-invita-icono.ms { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 96px; color: var(--brst); }
.vd-invita-inst { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px;
  color: var(--qr); font: 600 15px/1.25 var(--fh); }
.vd-invita-foto.sin-foto .vd-invita-inst { color: var(--brst); }
.vd-beneficios { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vd-beneficios li { display: flex; align-items: center; gap: 12px; font: 15px/1.4 var(--fb); }
.vd-beneficio-icono { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--brs); color: var(--brst); }
.vd-beneficio-icono .ms { font-size: 20px; }
.vd-nota { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--s2); font: 14px/1.45 var(--fb); }
.vd-nota .ms { font-size: 20px; flex: none; }
.vd-celular-grande { padding: 20px; border-radius: 22px; background: var(--brs); color: var(--brst); font: 600 24px/1.2 var(--fh);
  text-align: center; letter-spacing: .02em; }

/* V2 · Permiso del adulto */
.vd-inst-fila { display: flex; align-items: center; gap: 12px; font: 600 15px/1.25 var(--fh); }
.vd-datos-chico { margin: 0; padding: 6px 16px; list-style: none; border-radius: 20px; background: var(--sf); box-shadow: var(--sh); }
.vd-datos-chico li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ln); font: 15px/1.4 var(--fb); }
.vd-datos-chico li:last-child { border-bottom: 0; }
.vd-datos-chico .ms { flex: none; font-size: 21px; color: var(--okt); }

/* V1b · Sumate a vender: «Tus datos» (lo que no corresponde a «yo» o a «mi hijo o hija» se oculta) y la lista de lo que ya tiene */
.vd-sumate-campos { gap: 16px; }
.vd-sumate-grupo { display: flex; flex-direction: column; gap: 14px; }
.vd-sumate-grupo[hidden] { display: none; }
.campo-opcional { font-weight: 400; color: var(--t2); }
.vd-sumate-lista { margin: 0; padding: 6px 16px; list-style: none; border-radius: 20px; background: var(--sf); box-shadow: var(--sh); }
.vd-sumate-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--ln); font: 15px/1.4 var(--fb); }
.vd-sumate-lista li:last-child { border-bottom: 0; }
.vd-sumate-lista .avatar { background: var(--brs); color: var(--brst); }
.vd-sumate-quien { flex: 1 1 140px; min-width: 0; }
.vd-sumate-quien b { font: 600 15px/1.3 var(--fh); }

/* ── V3 · Inicio ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vd-hola { display: flex; align-items: center; gap: 10px; }
.vd-hola-titulo { font: 600 27px/1.15 var(--fh); letter-spacing: -.02em; }
.vd-hola-mano.ms { font-size: 28px; color: var(--brt); animation: vkFloat 2.6s ease-in-out infinite; }
.vd-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 899px) {
  /* Celular: las dos columnas se vuelven una sola, con el orden de la guía §9 (pedidos de efectivo antes que las ventas). */
  .vd-inicio { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .vd-inicio .vd-col { display: contents; }
  .vd-inicio .vd-banner { order: 1; } .vd-inicio .vd-meta { order: 2; } .vd-inicio .vd-mas { order: 3; } .vd-inicio .vd-compartir { order: 4; }
  .vd-inicio .vd-pedidos { order: 5; } .vd-inicio .vd-ultimas, .vd-inicio .vd-primera { order: 6; } .vd-inicio .vd-instalar-caja { order: 7; }
  .vd-inicio .vd-minis { order: 8; } .vd-inicio .vd-meta-div { order: 9; } .vd-inicio .dato { order: 10; }
}
.vd-mas, .vd-primera { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 22px; }
.vd-primera { gap: 16px; padding: 22px; border-radius: var(--r-card); }
.vd-mas-titulo { font: 600 16px/1.25 var(--fh); }
.vd-primera .vd-mas-titulo { font-size: 17px; }
.vd-mas-texto { margin-top: 4px; font: 14px/1.45 var(--fb); color: var(--t2); }
.vd-compartir { display: flex; gap: 10px; }
.vd-compartir-btn { flex: 1; min-width: 0; }
.btn.vd-qr-btn { flex: none; width: 60px; height: 60px; }
.btn.vd-qr-btn .ms { font-size: 26px; }
.vd-lista-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 4px; }
.vd-lista-titulo { font: 600 16px/1.3 var(--fh); }
.avatar.vd-avatar { width: 40px; height: 40px; background: var(--brs); color: var(--brst); font: 600 15px var(--fh); }
.vd-monto { font: 600 15px var(--fh); font-variant-numeric: tabular-nums; color: var(--tx); }
.vd-pedido { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1.5px solid var(--brl); }
.vd-pedido-cabeza { display: flex; align-items: center; gap: 12px; }
.vd-pedido-icono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brs); color: var(--brst); }
.vd-pedido-icono .ms { font-size: 24px; }
.vd-pedido-texto { flex: 1; min-width: 0; }
.vd-pedido-titulo { font: 600 15px/1.3 var(--fh); }
.vd-pedido-sub { margin-top: 2px; font: 13px/1.4 var(--fb); color: var(--t2); }
.vd-pedido-acciones { display: flex; gap: 8px; align-items: center; }
.vd-pedido-acciones .crece { flex: 1; }
.vd-pedido-resultado { display: flex; flex-direction: column; gap: 10px; }
.vd-pedido-resultado .vd-resultado-titulo { display: flex; gap: 8px; align-items: center; font: 600 15px/1.3 var(--fh); }
.vd-pedido-resultado .vd-resultado-texto { font: 14px/1.45 var(--fb); color: var(--t2); }
.vd-pedido.es-hecho { border-color: var(--ln); }
.vd-pedidos { max-width: none; }
.vd-inicio .vd-pedidos { max-width: none; }
.vd-minis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vd-minis.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-mini { padding: 16px; border-radius: 22px; }
a.vd-mini { color: var(--tx); text-decoration: none; }
.vd-mini > .ms { font-size: 24px; }
.vd-mini-cifra { margin-top: 8px; font: 700 26px/1.1 var(--fh); letter-spacing: -.01em; }
.vd-mini-texto { font: 13px/1.35 var(--fb); color: var(--t2); }

/* «Instalá la app» (V3 y V9): el iso sobre un cuadrado blanco, como el ícono de la app. */
.vd-instalar-caja { position: relative; }
.vd-instalar { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-radius: 22px; background: var(--brs);
  color: var(--brst); text-align: left; cursor: pointer; }
.vd-instalar-caja:has(.vd-instalar-cerrar) .vd-instalar { padding-right: 56px; }
.vd-instalar-icono { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--qr);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--qrt) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--qrt) 8%, transparent); }
.vd-instalar-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vd-instalar-texto b { font: 600 16px/1.25 var(--fh); }
.vd-instalar-texto span { font: 14px/1.4 var(--fb); }
.btn.vd-instalar-cerrar { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); color: var(--brst); }
.vd-pasos-instalar { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.vd-pasos-instalar li { display: flex; gap: 12px; align-items: flex-start; font: 15px/1.45 var(--fb); }
.vd-pasos-instalar .ms { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--brs); color: var(--brst); font-size: 20px; }

/* ── V4 · Compartir ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vd-link { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 20px; }
.vd-link-texto { flex: 1; min-width: 0; font: 600 15px/1.3 var(--fh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-mensajes { display: flex; flex-direction: column; gap: 14px; }
.vd-msj { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--ln); border-radius: 20px; background: var(--sf); color: var(--tx);
  cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vd-msj:hover { border-color: var(--brl); }
.vd-msj.es-elegido { padding: 15px; border: 2px solid var(--brl); box-shadow: 0 0 0 4px var(--brs); cursor: text; }
.vd-msj:focus-visible { outline: 3px solid var(--brl); outline-offset: 2px; }
.vd-msj-titulo { display: flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--fh); color: var(--t2); }
.vd-msj.es-elegido .vd-msj-titulo { color: var(--brt); }
.vd-msj-check.ms { display: none; font-size: 17px; }
.vd-msj.es-elegido .vd-msj-check { display: inline-block; }
.vd-msj-texto { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--t2); resize: none; overflow: hidden;
  font: 15px/1.45 var(--fb); height: calc(15px * 1.45 * 2); cursor: inherit; }
.vd-msj.es-elegido .vd-msj-texto { color: var(--tx); height: var(--alto, auto); }
.vd-msj-texto:focus { outline: none; }
.vd-otras { gap: 10px; }
.vd-escribime { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: linear-gradient(135deg, var(--brs), var(--sf)); }
.vd-escribime-cabeza { display: flex; align-items: center; gap: 8px; }
.vd-escribime-titulo { font: 600 16px/1.3 var(--fh); }
.vd-escribime-texto { font: 14px/1.45 var(--fb); color: var(--t2); }
.vd-tonos { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-tono { min-height: 44px; padding: 0 14px; border: 1px solid var(--ln); border-radius: var(--r-pill); background: var(--sf); color: var(--tx);
  font: 600 13px var(--fh); cursor: pointer; }
.vd-tono[aria-pressed="true"] { border-color: var(--tx); background: var(--tx); color: var(--bg); }
.vd-escribime-resultado { display: flex; flex-direction: column; gap: 8px; animation: vkUp .3s var(--curva) both; }
.vd-escribime-propuesta { padding: 14px; border-radius: 16px; background: var(--sf); font: 15px/1.5 var(--fb); overflow-wrap: anywhere; }
.vd-escribime-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── V5 · Mi QR (siempre blanco: la página va en claro fijo y el QR en --qr / --qrt) ─────────────────────────────────────────── */
body:has(.vd-qr) { background: var(--qr); }
.vendedor-cuerpo:has(> .vd-qr) { max-width: none; padding: 0; }
.vd-qr { display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: calc(100dvh - 64px); padding: calc(8px + env(safe-area-inset-top)) 24px 32px;
  background: var(--qr); color: var(--qrt); }
.vd-qr-arriba { align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vd-qr-inst { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 240px; font: 600 14px/1.2 var(--fh); }
.vd-qr-titulo { margin-top: 8px; font: 600 22px/1.2 var(--fh); text-align: center; text-wrap: balance; }
.vd-qr-caja { width: min(290px, calc(100vw - 48px)); aspect-ratio: 1; padding: 22px; border-radius: 30px; background: var(--qr); box-sizing: border-box;
  box-shadow: 0 0 0 1px var(--s2), var(--sh2); }
.vd-qr-caja svg { display: block; width: 100%; height: 100%; }
.vd-qr-pie { text-align: center; }
.vd-qr-quien { font: 600 17px/1.3 var(--fh); }
.vd-qr-premio { font: 15px/1.4 var(--fb); color: var(--t2); }
.vd-qr-link { margin-top: 4px; font: 13px/1.4 var(--fb); color: var(--t2); overflow-wrap: anywhere; }
.vd-qr-aviso { display: flex; align-items: center; gap: 10px; max-width: 340px; padding: 12px 14px; border-radius: 16px; background: var(--bg); font: 14px/1.4 var(--fb); }
.vd-qr-aviso .ms { flex: none; }
@media (min-width: 900px) {
  /* La fila de arriba va a lo ancho con los márgenes de la página y el QR toma el alto que queda (lo demás suma unos 400 px). */
  .vd-qr { justify-content: center; padding: clamp(12px, 2.5vh, 28px) var(--margen) clamp(20px, 4vh, 40px); }
  .vd-qr-caja { width: clamp(300px, calc(100dvh - 400px), 70vw); padding: clamp(22px, 2.5vh, 32px); }
  .vd-qr-titulo { font-size: clamp(22px, 2vw, 30px); }
  .vd-qr-aviso { max-width: var(--texto-max); }
}

/* ── V6 · Venta en efectivo ────────────────────────────────────────────────────────────────────────────────────────────────── */
.vd-efectivo { display: flex; flex-direction: column; gap: 16px; }
.vd-paso { margin-top: -6px; font: 13.5px/1.4 var(--fb); color: var(--t2); }
.vd-efectivo-lado { min-width: 0; }
@media (max-width: 899px) {
  /* En el celular, la recomendación (pagar con el link o el QR) va arriba de la grilla. */
  .vd-paso-1 .cols-21 { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .vd-efectivo-lado .grilla-resumen { display: none; }
}
.vd-elegidos-caja { padding: 16px; border-radius: 22px; }
.vd-elegidos-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vd-elegidos-etq { font: 14px/1.4 var(--fb); color: var(--t2); }
.vd-elegidos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.vd-ficha { display: inline-flex; align-items: center; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--brs); color: var(--brst);
  font: 700 21px/1 var(--fh); font-variant-numeric: tabular-nums; }
.vd-confirmar { display: flex; flex-direction: column; gap: 14px; max-width: 520px; padding: 22px; border-radius: 26px; }
.vd-confirmar-titulo { font: 600 21px/1.25 var(--fh); text-wrap: balance; }
.vd-confirmar-texto { font: 15px/1.5 var(--fb); color: var(--t2); }
.vd-confirmar-texto b { color: var(--tx); }
.vd-confirmar-botones { display: flex; gap: 10px; }
.vd-confirmar-botones .crece { flex: 1; }
.vd-listo { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 520px; padding: 12px 0; text-align: center; }
.vd-listo-check { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: var(--br); color: var(--onbr); animation: vkPop .5s both; }
.vd-listo-check .ms { font-size: 52px; font-weight: 500; }
.vd-listo-titulo { font: 600 25px/1.2 var(--fh); letter-spacing: -.02em; }
.vd-listo-texto { font: 15px/1.5 var(--fb); color: var(--t2); }
.vd-listo .aviso, .vd-listo .btn { align-self: stretch; text-align: left; }
.vd-listo .btn { text-align: center; }
.vd-cola-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.vd-cola-cabeza { display: flex; gap: 10px; align-items: flex-start; font: 15px/1.4 var(--fb); }
.vd-cola-cabeza .ms { flex: none; font-size: 22px; }
.vd-cola-cabeza b { font-family: var(--fh); font-weight: 600; }
.vd-cola-item.es-fallo .vd-cola-cabeza .ms { color: var(--ert); }
.vd-cola-item.es-enviada .vd-cola-cabeza .ms { color: var(--okt); }
.vd-cola-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── V7 · Mis ventas ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vd-totales { max-width: none; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .vd-totales { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vd-total { padding: 16px; border-radius: 22px; }
.vd-total-etq { font: 13px/1.3 var(--fb); color: var(--t2); }
.vd-total-cifra { margin-top: 4px; font: 700 26px/1.15 var(--fh); letter-spacing: -.01em; }
.vd-total-sub { font: 14px/1.35 var(--fb); color: var(--t2); }
.vd-total-dorado { background: var(--gds); color: var(--gdst); box-shadow: none; }
.vd-total-dorado .vd-total-etq, .vd-total-dorado .vd-total-sub { color: inherit; }
.vd-filtros { display: flex; align-items: center; gap: 6px; }
.vd-filtros-lista { display: flex; gap: 6px; flex-wrap: wrap; }
.vd-filtro { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ln); border-radius: var(--r-pill);
  background: var(--sf); color: var(--tx); font: 600 14px var(--fh); text-decoration: none; }
.vd-filtro[aria-current="page"] { border-color: var(--tx); background: var(--tx); color: var(--bg); }
.btn.vd-filtro-mas { margin-left: auto; border: 0; background: var(--brs); color: var(--brst); }
.vd-ventas { padding: 4px 18px; }
.vd-venta { padding: 14px 0; border-bottom: 1px solid var(--ln); }
.vd-venta:last-child { border-bottom: 0; }
.vd-venta-fila { display: flex; justify-content: space-between; gap: 8px; }
.vd-venta-quien { font: 600 15px/1.3 var(--fh); }
.vd-venta-monto { font: 600 15px/1.3 var(--fh); }
.vd-venta-sub { margin-top: 2px; font: 13px/1.4 var(--fb); color: var(--t2); }
.vd-venta-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
.vd-venta-pie .btn-texto { min-height: var(--tap); padding: 0 4px; }
.vd-sin-filtro { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--t2); }

/* ── V8 · Ranking ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vd-heroe { position: relative; isolation: isolate; overflow: hidden; padding: 22px; border-radius: 28px; background: var(--br); color: var(--onbr); }
.vd-heroe::before { content: ''; position: absolute; z-index: -1; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--onbr); opacity: .08; }
.vd-heroe-kicker { font: 14px/1.4 var(--fb); opacity: .92; }
.vd-heroe-grande { margin-top: 4px; font: 700 clamp(30px, 8vw, 40px)/1.05 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.vd-heroe-chico { margin-top: 6px; font: 15px/1.45 var(--fb); }
.vd-tabla-div { padding: 6px 18px; overflow: hidden; }
.vd-puesto { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--s2); font: 600 15px var(--fh); }
.vd-tabla-div .lista-titulo { font: 600 16px/1.3 var(--fh); }
.vd-tabla-div .lista-fin { font: 600 15px var(--fh); }
.vd-fila-yo { margin: 0 -18px; padding-left: 18px; padding-right: 18px; background: var(--brs); color: var(--brst); }
.vd-fila-yo .vd-puesto { background: var(--br); color: var(--onbr); }
.vd-fila-yo .lista-titulo, .vd-fila-yo .lista-fin { color: var(--brst); }
.vd-tabla-nota { padding: 12px 0; font: 13px/1.4 var(--fb); color: var(--t2); }
.vd-desafio { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.vd-desafio-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-desafio-cabeza .chip { margin-left: auto; }
.vd-desafio-titulo { font: 600 16px/1.3 var(--fh); }
.vd-desafio-texto { margin-bottom: 4px; font: 15px/1.45 var(--fb); color: var(--t2); }
.vd-desafio-nota { font: 13px/1.4 var(--fb); color: var(--t2); }
.vd-vos-titulo { font: 600 16px/1.3 var(--fh); }
.vd-vos-texto { margin-top: 6px; font: 15px/1.45 var(--fb); color: var(--t2); }
.vd-sin-desafios { display: flex; gap: 10px; align-items: flex-start; font: 14px/1.45 var(--fb); color: var(--t2); }
.vd-sin-desafios .ms { flex: none; color: var(--brt); }

/* ── V9 · Perfil ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.vd-perfil-cabeza { display: flex; align-items: center; gap: 14px; }
.avatar.vd-avatar-perfil { width: 64px; height: 64px; background: var(--brs); color: var(--brst); font: 600 26px var(--fh); }
.vd-perfil-nombre { font: 600 24px/1.2 var(--fh); }
.vd-perfil-sub { font: 14px/1.4 var(--fb); color: var(--t2); }
.vd-perfil { max-width: none; gap: 14px; }
.vd-datos { margin: 0; padding: 4px 18px; }
.vd-dato-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 15px 0; border-bottom: 1px solid var(--ln); }
.vd-dato-fila:last-child { border-bottom: 0; }
.vd-dato-fila dt { flex: none; color: var(--t2); }
.vd-dato-fila dd { flex: 1; min-width: 0; margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .vd-dato-fila { flex-direction: column; align-items: stretch; }
  .vd-dato-fila dd { text-align: left; }
}
.vd-dato-linea { display: block; }
.vd-ajustes { display: flex; flex-direction: column; gap: 4px; padding: 8px 18px; }
.vd-ajuste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 0; }
.vd-ajuste + .vd-ajuste { border-top: 1px solid var(--ln); }
.vd-ajuste-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vd-ajuste-texto b, .vd-ajuste .interruptor-texto b { font: 600 15px/1.3 var(--fh); }
.vd-ajuste-texto span, .vd-ajuste .interruptor-texto span { font: 13.5px/1.4 var(--fb); color: var(--t2); }
.vd-ajuste .interruptor-texto { display: flex; flex-direction: column; gap: 2px; }
.vd-modos .segmentado-op .ms { font-size: 18px; }
@media (max-width: 599px) {
  .vd-ajuste > .segmentado { width: 100%; }
  .vd-ajuste > .segmentado .segmentado-op { flex: 1; min-width: 0; padding-left: 6px; padding-right: 6px; }
  .vd-modos .segmentado-op .ms { display: none; }
}
.btn.vd-boton-perfil { max-width: 420px; }

/* «También vendés en…» debajo de la meta (V3): una píldora por campaña; tocarla la pasa arriba. */
.vd-tambien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.vd-tambien-titulo { font: 600 14px/1.3 var(--fh); color: var(--t2); }
.vd-tambien form { display: contents; }
.vd-tambien-camp { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--ln-campo); color: var(--tx); font: 600 14px/1.2 var(--fh); cursor: pointer; }
.vd-tambien-camp span { color: var(--t2); }
.vd-tambien-camp:focus-visible { outline: 3px solid var(--brl); outline-offset: 2px; }

/* ── 50-panel.css ── */
/* ═══ 50 · Área panel: I3 inicio, I4 campañas, I7 detalle, I8 vendedores, I6b carga, I9 equipos, I10 efectivo, I14 reportes, I19 proyección ═══
   Piezas propias del área que no están en el sistema (10-…15-). Solo tokens; medidas de design/PantallaPanel.dc.html. Prefijo .pan-.
     Comunes:   .pan-subtitulo · .pan-volver · .pan-nota · .pan-fila-botones · .pan-enviar · .pan-peligro · .pan-separador · .pan-icono-grande
                (.es-neutro .es-ok) · .pan-estado-tarjeta · .pan-dl · .pan-checklist/.pan-check · .pan-caminos/.pan-camino · .pan-selector
                · .pan-filtros/.pan-filtro · .pan-stats/.pan-stat · .pan-plegable · .pan-fichas/.pan-ficha · .pan-candado
     I3:        .pan-aviso-lleno (Día del sorteo) · .pan-aviso-gris (pausada) · .pan-kpis/.pan-kpi/.pan-desglose · .pan-hoy + .pan-barras (gráfico
                de los últimos días) · .pan-envivo (punto que late) · .pan-avance + .pan-vend-lista · .pan-atajos · .pan-primera · .pan-borrador
     I4:        .pan-camps/.pan-camp (tarjeta con la foto del premio a la izquierda)
     I7:        .pan-pestanas-fila · .pan-qr · .pan-premios · .pan-grilla-zona/.pan-num-lado/.pan-num · .pan-barra-totales · .pan-vend-avance
     I8 club:   .pan-stats-filtro (números que filtran) · .pan-div-chip · .pan-club-camps · .pan-lote-tilde/-todos/-barra (tildados)
                · .pan-pase (Pasar de año: -filas, -fila, -ops, -otra, -quienes, -pie, -resumen)
     I8:        .pan-vend-filas · .pan-ficha-cabeza · .pan-link-vend · .pan-mini-camps (+ .pan-mini-camps-pie) · .pan-envio (mandar de a uno) · .pan-tildes
                · .pan-sumate (links y QR para sumarse: .pan-sumate-link · .pan-sumate-divs · .pan-sumate-qr) · .pan-pedidos/.pan-pedido
                («Pidieron sumarse») · .pan-sumate-avisos · .cartel-sumate (el cartel A4 para imprimir)
     I6b:       .pan-imp (filas + columna con el resumen y el botón) · .pan-imp-fila · .pan-imp-corregir · .pan-carga-modo
     I9:        .pan-equipo · .pan-desafio · .pan-divs · .pan-div-nueva
     I10:       .pan-ef (tarjeta por vendedor; .es-vencido) · .pan-ef-compras · .pan-hist · .pan-venta (venta en mano)
     I14:       .pan-reportes/.pan-reporte · .pan-verif (verificación pública) · .pan-huella
     I19:       .pan-proy-grafico/.pan-proy-col (.es-pasado .es-hoy .es-futuro) · .pan-mejora
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Comunes ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pan-subtitulo { font: 600 17px/1.25 var(--fh); letter-spacing: -.01em; }
.pan-volver { margin: -6px 0 -4px -6px; }
.pan-nota { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--ln); background: var(--sf);
  font: 14px/1.45 var(--fb); color: var(--t2); }
.pan-nota > .ms { font-size: 20px; color: var(--gdt); flex: none; margin-top: 1px; }
.pan-nota a { color: var(--brt); font-weight: 600; }
.pan-fila-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pan-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn.pan-peligro, .pan-peligro { color: var(--ert); }
.pan-separador { border: 0; border-top: 1px solid var(--ln); margin: 4px 0; }
.pan-icono-grande { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--gds); color: var(--gdst); }
.pan-icono-grande .ms { font-size: 34px; }
.pan-icono-grande.es-neutro { background: var(--s2); color: var(--tx); }
.pan-icono-grande.es-ok { background: var(--oks); color: var(--okt); }
.pan-estado-tarjeta { display: flex; align-items: center; gap: 16px; }
.pan-estado-tarjeta > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.pan-estado-titulo { font: 600 19px/1.25 var(--fh); }
.num-izq { font-variant-numeric: tabular-nums; }

.pan-dl { display: flex; flex-direction: column; margin: 0; }
.pan-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ln); font: 15px/1.4 var(--fb); }
.pan-dl > div:last-child { border-bottom: 0; }
.pan-dl dt { color: var(--t2); display: flex; flex-direction: column; }
.pan-dl dd { margin: 0; font: 600 15px/1.4 var(--fh); font-variant-numeric: tabular-nums; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pan-dl .es-alerta dd { color: var(--ert); }

.pan-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pan-check { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ln); }
.pan-check:last-child { border-bottom: 0; }
.pan-check-marca { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--s2); color: var(--t2); }
.pan-check-marca .ms { font-size: 19px; }
.pan-check.es-ok .pan-check-marca { background: var(--ok); color: var(--sf); }
.pan-check-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 13px/1.4 var(--fb); color: var(--t2); }
.pan-check-texto b { font: 600 15px/1.3 var(--fh); color: var(--tx); }

.pan-caminos { align-self: stretch; }
.pan-camino { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 20px; border-radius: 22px; border: 1px solid var(--ln); background: var(--sf);
  color: var(--tx); text-decoration: none; text-align: left; font: 14px/1.45 var(--fb); cursor: pointer; transition: transform .2s var(--curva), box-shadow .2s; }
.pan-camino b { font: 600 18px/1.25 var(--fh); margin-top: 6px; }
.pan-camino > span:last-child { color: var(--t2); }
.pan-camino.es-destacado { border: 2px solid var(--gdl); background: var(--gds); color: var(--gdst); }
.pan-camino.es-destacado > span:last-child { color: var(--gdst); }
.pan-camino-cabeza { display: flex; justify-content: space-between; align-items: center; font: 600 12px var(--fh); color: var(--t2); }
.pan-camino.es-destacado .pan-camino-cabeza { color: var(--gdst); }
.pan-camino-cabeza .ms { font-size: 28px; }
@media (hover: hover) { .pan-camino:hover { transform: translateY(-2px); box-shadow: var(--sh); } }

.pan-selector { display: flex; align-items: center; gap: 8px; width: clamp(17rem, 34%, 44rem); max-width: 100%; }
.pan-selector-campo { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.pan-selector-campo > .ms { position: absolute; left: 14px; z-index: 1; font-size: 20px; color: var(--gdt); pointer-events: none; }
.pan-selector-campo .select { flex: 1; min-width: 0; }
.pan-selector-campo .entrada { height: 48px; padding-left: 44px; border-radius: var(--r-pill); font: 600 14px var(--fh); }

.pan-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pan-filtro { position: relative; display: block; min-width: 0; flex: 1 1 11rem; }
.pan-filtro .entrada { height: 44px; border-radius: var(--r-pill); padding: 0 40px 0 16px; font: 600 13px var(--fh); background: var(--sf); }
.pan-filtro-buscar { flex: 2 1 16rem; }
.pan-filtro-buscar > .ms { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--t2); pointer-events: none; }
.pan-filtro-buscar .entrada { padding: 0 16px 0 40px; font: 14px var(--fb); }
.pan-filtros-fin { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
@media (max-width: 599px) { .pan-filtro { flex-basis: calc(50% - 4px); } .pan-filtro-buscar { flex-basis: 100%; } .pan-filtros-fin { margin-left: 0; } }

.pan-stats .pan-stat, .pan-ef-resumen .pan-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 22px; }
.pan-stat b { font: 600 26px/1.15 var(--fh); letter-spacing: -.02em; }
.pan-stat > span { font: 13px/1.35 var(--fb); color: var(--t2); }
.pan-stat.es-alerta { background: var(--ers); color: var(--ert); box-shadow: none; }
.pan-stat.es-alerta > span { color: var(--ert); }

.pan-plegable > summary, .pan-plegable-chico > summary, .pan-plegable-tarjeta > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); font: 600 15px var(--fh); color: var(--tx); }
.pan-plegable > summary::-webkit-details-marker, .pan-plegable-chico > summary::-webkit-details-marker, .pan-plegable-tarjeta > summary::-webkit-details-marker,
.pan-imp-corregir > summary::-webkit-details-marker { display: none; }
.pan-plegable > summary .ms { transition: transform .2s var(--curva); }
.pan-plegable[open] > summary .ms { transform: rotate(180deg); }
.pan-plegable > .cols-2, .pan-plegable > .lista, .pan-plegable > .pan-camps { margin-top: 10px; }
.pan-plegable-chico > summary { font-size: 14px; color: var(--brt); }
.pan-plegable-chico > summary .ms { font-size: 18px; }
.pan-plegable-chico[open] > summary { margin-bottom: 8px; }
.pan-plegable-tarjeta > summary .ms { color: var(--gdt); }
.pan-plegable-tarjeta[open] > summary { margin-bottom: 10px; }

.pan-fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.pan-ficha { display: inline-grid; place-items: center; height: 32px; padding: 0 10px; border-radius: 10px; border: 2px dashed var(--gdl); background: var(--gds);
  color: var(--gdst); font: 600 13px var(--fh); font-variant-numeric: tabular-nums; }
.pan-candado { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--s2); font: 13px/1.45 var(--fb); color: var(--tx); }
.pan-candado .ms { font-size: 18px; flex: none; }
.pan-interruptor { padding: 6px 0; border-bottom: 1px solid var(--ln); }
.pan-interruptor:last-child { border-bottom: 0; }
.pan-interruptor .interruptor-texto b { font: 600 14px/1.3 var(--fh); display: block; }
.pan-resaltado { animation: vkUp .4s var(--curva) both; }
.pan-resaltado .lista-titulo { color: var(--gdt); }

/* ── I3 · Inicio ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.aviso.pan-aviso-lleno { background: var(--br); color: var(--onbr); border-color: transparent; }
.aviso.pan-aviso-gris { background: var(--s2); color: var(--tx); border-color: transparent; }
.aviso.pan-aviso-gris .aviso-texto { color: var(--tx); }
.pan-kpis .pan-kpi { display: contents; }
.pan-desglose { margin: 0; grid-template-columns: minmax(0, 1fr); background: var(--sf); border: 1px solid var(--ln); border-radius: var(--r-card); padding: 16px 18px; }
.pan-desglose[hidden] { display: none; }
@media (min-width: 900px) {
  .pan-desglose { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 18px 20px; }
  .pan-desglose div { flex-direction: column; justify-content: flex-start; gap: 2px; }
  .pan-desglose dd { text-align: left; font-size: 19px; }
  .pan-desglose .total { padding-top: 0; border-top: 0; }
}
.pan-vivo-zona { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .pan-vivo-zona { gap: 16px; } }
.pan-vivo-zona.es-viejo .metrica-valor, .pan-vivo-zona.es-viejo [data-vivo="hoy"] { color: transparent; border-radius: 8px;
  background: linear-gradient(90deg, var(--s2) 0, var(--sf) 50%, var(--s2) 100%) 0 0 / 800px 100%; animation: vkShim 1.3s linear infinite; }

.pan-hoy { display: flex; flex-direction: column; }
.pan-hoy-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pan-hoy-cifra { font: 600 24px/1.2 var(--fh); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .pan-hoy-cifra { font-size: 20px; } }
.pan-envivo { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--ln);
  font: 600 13px var(--fh); }
.pan-envivo .ms { font-size: 18px; color: var(--t2); }
.pan-envivo-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pnPulso 1.6s infinite; }
.pan-envivo.es-error { color: var(--ert); border-color: var(--ers); }
.pan-envivo.es-error .pan-envivo-punto { background: var(--er); animation: none; }
@keyframes pnPulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Gráfico de los últimos días: cada columna = número arriba, barra (alto = --h, de 0 a 1, sobre 128 px) y el día abajo; la línea punteada
   de abajo es continua porque cada etiqueta ocupa también la mitad del espacio entre columnas. */
.pan-barras { display: flex; align-items: flex-end; gap: 12px; margin-top: 18px; }
.pan-barra { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 176px; }
.pan-barra-n { font: 600 12px var(--fh); color: var(--t2); font-variant-numeric: tabular-nums; }
.pan-barra-col { display: block; width: 100%; max-width: 46px; height: max(4px, calc(var(--h, 0) * 128px)); border-radius: 14px; background: var(--s2);
  transform-origin: bottom; animation: vkGrowY .7s var(--curva) both; transition: height .5s var(--curva); }
.pan-barra.es-hoy .pan-barra-col { background: linear-gradient(180deg, var(--gd), var(--gdl)); }
.pan-barra.es-hoy .pan-barra-n, .pan-barra.es-hoy .pan-barra-dia { color: var(--tx); }
.pan-barra-dia { align-self: stretch; margin: 2px -6px 0; padding-top: 6px; border-top: 1px dashed var(--ln); text-align: center; font: 600 12px var(--fh); color: var(--t2); }
@media (max-width: 599px) { .pan-barras { gap: 6px; } .pan-barra { height: 150px; } .pan-barra-col { height: max(4px, calc(var(--h, 0) * 104px)); } .pan-barra-dia { margin: 2px -3px 0; } }

.pan-avance { display: flex; flex-direction: column; gap: 14px; }
.pan-avance-cabeza { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.pan-orden .segmentado-op { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
@media (max-width: 899px) { .pan-orden .segmentado-op { min-height: var(--tap); } }
.pan-vend-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* Toda la fila abre al vendedor (el link se estira con ::after): el nombre solo medía 19 px de alto. */
.pan-vend { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--tap); }
.pan-vend:nth-child(n+7) { display: none; }
.pan-vend-nombre { flex: 1; min-width: 0; color: var(--tx); text-decoration: none; font: 14px/1.35 var(--fb); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pan-vend-nombre::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.pan-vend-nombre:focus-visible { outline: none; }
.pan-vend-nombre:focus-visible::after { outline: 3px solid var(--brl); outline-offset: 2px; }
.pan-vend-nombre b { font: 600 14px var(--fh); }
@media (hover: hover) { .pan-vend-nombre:hover b { color: var(--gdt); } }
.pan-vend-meta { display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--fh); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pan-vend-meta .ms { font-size: 17px; color: var(--gdt); }
.pan-ver-todos { align-self: flex-start; }
.pan-atajos { display: flex; flex-wrap: wrap; gap: 10px; }

.pan-primera { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.pan-primera .pan-icono-grande, .pan-sin-vend .pan-icono-grande { width: 72px; height: 72px; border-radius: 22px; }
.pan-primera .pan-icono-grande .ms { font-size: 38px; }
.pan-primera-titulo { font: 600 26px/1.2 var(--fh); letter-spacing: -.02em; }
.pan-primera-texto { font: 16px/1.5 var(--fb); color: var(--t2); margin-top: 6px; }
.pan-sin-vend { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.pan-borrador { display: flex; flex-direction: column; gap: 14px; }
.pan-borrador-cabeza { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pan-borrador-sub { font: 600 15px var(--fh); }
.pan-faltan .tarjeta-cabeza { margin-bottom: 4px; }

/* ── I4 · Campañas ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pan-camps { align-items: stretch; }
.pan-camp { display: flex; padding: 0; overflow: hidden; border-radius: 26px; }
.pan-camp-foto { position: relative; flex: none; width: 132px; overflow: hidden; background: var(--s2); display: grid; place-items: center; color: var(--t2); }
.pan-camp-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pan-camp-foto .ms { font-size: 40px; }
.pan-camp-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.pan-camp-titulo { font: 600 17px/1.25 var(--fh); }
.pan-camp-linea { font: 13px/1.4 var(--fb); color: var(--t2); }
.pan-camp-para { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1.4 var(--fh); color: var(--t2); }
.pan-camp-para .ms { font-size: 16px; color: var(--gdt); }
.pan-camp-plata { font: 600 14px var(--fh); font-variant-numeric: tabular-nums; }
.pan-camp .barra-relleno { background: var(--gdl); }
/* La tarjeta con sus acciones abajo (pausar, reanudar, borrar): el link arriba y la barra de botones pegada, como una sola tarjeta. */
.pan-camp-caja { display: flex; flex-direction: column; min-width: 0; }
.pan-camp-caja > .pan-camp { flex: 1; }
.pan-camp-caja.con-acciones > .pan-camp { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (hover: hover) { .pan-camp-caja.con-acciones > .pan-camp:hover { transform: none; } }
.pan-camp-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--ln);
  border-radius: 0 0 26px 26px; background: var(--sf); box-shadow: var(--sh); }
.pan-camp-acciones form:last-child:has(.pan-peligro) { margin-left: auto; }
@media (max-width: 420px) { .pan-camp-foto { width: 104px; } }

/* ── I7 · Detalle de una campaña ─────────────────────────────────────────────────────────────────────────────────────────────── */
.pan-pestanas-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.pan-pestanas-fila .pestanas { flex: 1 1 auto; min-width: 0; }
.pan-pestanas-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pan-pestanas-acciones form { display: contents; }
@media (max-width: 899px) { .pan-pestanas-acciones { margin-left: 0; width: 100%; } }
.pan-link { font: 15px var(--fb); }
.pan-qr { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: var(--bg); }
.pan-qr-caja { flex: none; width: 116px; height: 116px; padding: 8px; border-radius: 12px; background: var(--qr); }
.pan-qr-caja svg { width: 100%; height: 100%; display: block; }
.pan-premios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pan-premio { margin: 0; min-width: 0; }
.pan-premio-foto { position: relative; display: grid; place-items: center; width: 100%; height: clamp(84px, 11vw, 190px); border-radius: 16px; overflow: hidden; background: var(--s2); color: var(--t2); }
.pan-premio-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pan-premio-foto .ms { font-size: 34px; }
.pan-premio figcaption { display: flex; flex-direction: column; margin-top: 6px; }
.pan-premio figcaption b { font: 600 14px/1.2 var(--fh); }
.pan-avisar .lista-fila { flex-wrap: wrap; }
.pan-avisar .lista-fila.es-hecho { opacity: .55; }

.pan-grilla-zona { align-items: start; }
.pan-num-lado { position: sticky; top: 16px; min-height: 260px; }
.pan-num-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 220px; text-align: center; color: var(--t2);
  font: 14px/1.45 var(--fb); }
.pan-num-vacio .ms { font-size: 36px; color: var(--gdt); }
.pan-num-vacio b { color: var(--tx); font-family: var(--fh); }
.pan-num { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pan-num-cifra { font: 600 40px/1 var(--fh); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pan-num-datos { align-self: stretch; }
.pan-num-datos dd { font-size: 14px; }
.pan-num-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-self: stretch; }
.pan-barra-totales { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.pan-vend-avance .lista-fila { flex-wrap: wrap; }
.pan-vend-avance-nombre { width: 160px; min-width: 0; display: flex; flex-direction: column; color: var(--tx); text-decoration: none; font: 13px/1.35 var(--fb); }
.pan-vend-avance-nombre b { font: 600 14px var(--fh); }
.pan-vend-avance-nombre span { color: var(--t2); }
.pan-vend-avance-barra { flex: 1; min-width: 120px; }
.pan-vend-avance-barra .barra-relleno, .pan-mini-camps .barra-relleno, .pan-equipo .barra-relleno, .pan-desafio .barra-relleno { background: var(--gdl); }
.pan-vend-avance-num { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 74px; font: 600 13px var(--fh); }
.pan-vend-avance-num .ms { font-size: 17px; color: var(--gdt); }
@media (max-width: 599px) { .pan-vend-avance-nombre { width: auto; flex: 1; } .pan-vend-avance-barra { order: 3; flex-basis: 100%; padding-left: 48px; } }

/* ── I8 · Vendedores ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pan-explica .aviso-texto b { font: 600 15px var(--fh); }
.pan-vend-fila { flex-wrap: wrap; }
.pan-vend-fila-nombre { flex: 1 1 140px; min-width: 0; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; color: var(--tx);
  text-decoration: none; font: 13px/1.35 var(--fb); }
.pan-vend-fila-nombre b { font: 600 14px var(--fh); }
.pan-vend-fila-nombre span { color: var(--t2); }
@media (hover: hover) { .pan-vend-fila-nombre:hover b { color: var(--gdt); } }
.pan-vend-fila-meta { width: 76px; text-align: right; font: 600 13px var(--fh); }
.pan-vend-fila-accion { display: flex; justify-content: flex-end; min-width: 0; }
.pan-vend-fila-accion:empty { display: none; }
@media (min-width: 900px) { .pan-vend-fila { flex-wrap: nowrap; } .pan-vend-fila-chip { width: 250px; } .pan-vend-fila-accion { width: 150px; } }
@media (max-width: 899px) { .pan-vend-fila-chip { order: 4; flex-basis: calc(100% - 48px); margin-left: 48px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .pan-vend-fila-accion { order: 5; flex-basis: calc(100% - 48px); margin-left: 48px; justify-content: flex-start; } }
.pan-tildes { max-height: 46vh; overflow: auto; }
.pan-tilde { cursor: pointer; }
.pan-tilde input { width: 22px; height: 22px; accent-color: var(--gd); flex: none; }
.pan-ficha-cabeza { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pan-link-vend { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--bg); flex-wrap: wrap; }
.pan-link-texto { flex: 1; min-width: 0; font: 13px/1.4 var(--fb); color: var(--tx); overflow-wrap: anywhere; }
.pan-mini-camps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Toda la fila (título, meta y barra) abre esa campaña: el link solo medía 18 px de alto. */
.pan-mini-camps li { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); }
.pan-mini-camps a { display: flex; justify-content: space-between; gap: 10px; color: var(--tx); text-decoration: none; font: 14px var(--fb); margin-bottom: 6px; }
.pan-mini-camps a::after { content: ''; position: absolute; inset: -4px -6px; border-radius: 12px; }
.pan-mini-camps a:focus-visible { outline: none; }
.pan-mini-camps a:focus-visible::after { outline: 3px solid var(--brl); outline-offset: 0; }
.pan-mini-camps a b { font: 600 14px var(--fh); }
.pan-mini-camps .es-actual a b { color: var(--gdt); }
/* «Para: todo el club · 182» arriba de la lista de una campaña (con «Sumar otra división» o «Cambiar»). */
.pan-para { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--sf);
  box-shadow: var(--sh); font: 600 15px/1.3 var(--fh); }
.pan-para > .ms { font-size: 21px; color: var(--gdt); }
.pan-sumar-div form { display: flex; }
/* «Todo el club»: los números de arriba también filtran; las divisiones como chips; tildar varios muestra la barra. */
.pan-stats-filtro .pan-stat { color: var(--tx); text-decoration: none; }
.pan-stats-filtro .pan-stat.es-actual { box-shadow: inset 0 0 0 2px var(--gdl), var(--sh); }
.pan-stats-filtro .pan-stat:focus-visible { outline: 3px solid var(--brl); outline-offset: 2px; }
@media (hover: hover) { .pan-stats-filtro .pan-stat:not(.es-actual):hover { box-shadow: inset 0 0 0 1px var(--t2), var(--sh); } }
.pan-divs-chips { align-items: center; }
.pan-div-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--ln-campo); color: var(--tx); text-decoration: none; font: 600 14px/1 var(--fh); }
.pan-div-chip b { color: var(--t2); font-weight: 600; }
.pan-div-chip.es-actual { background: var(--tx); color: var(--bg); box-shadow: none; }
.pan-div-chip.es-actual b { color: inherit; }
.pan-div-chip.es-editar { background: transparent; box-shadow: none; color: var(--gdt); }
.pan-div-chip .ms { font-size: 18px; }
.pan-div-chip:focus-visible { outline: 3px solid var(--brl); outline-offset: 2px; }
.pan-club-camps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.pan-lote-tilde, .pan-lote-todos input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--gd); }
.pan-lote-todos { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); font: 600 14px/1.3 var(--fh); cursor: pointer; }
.pan-lote-barra { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px;
  border-radius: 18px; background: var(--sf); box-shadow: var(--sh2); }
.pan-lote-n { margin-right: auto; font: 600 15px/1.3 var(--fh); }
/* Pasar de año: una tarjeta por división (en la compu, varias por fila) y abajo el resumen con el botón, siempre a la vista. */
.pan-pase-filas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; align-items: start; }
.pan-pase-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pan-pase-cabeza b { font: 600 17px/1.3 var(--fh); }
.pan-pase-ops .ar-chip span .ms { font-size: 18px; margin-right: 4px; }
.pan-pase-otra { display: flex; flex-wrap: wrap; gap: 10px; }
.pan-pase-otra .campo { flex: 1 1 200px; }
.pan-pase-quienes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.pan-pase-pie { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px;
  border-radius: 18px; background: var(--sf); box-shadow: var(--sh2); }
.pan-pase-resumen { flex: 1 1 280px; margin: 0; font: 600 15px/1.4 var(--fh); }
/* Sacar de esta campaña / volver a sumar: por encima del link que cubre toda la fila. */
.pan-mini-camps-pie { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.pan-mini-camps-pie .chip { margin-right: auto; }
.pan-mini-camps .es-fuera a b, .pan-mini-camps .es-fuera .num { color: var(--t2); }
.pan-mini-camps-sub { margin-top: 4px; font: 13px/1.4 var(--fb); color: var(--t2); }
.pan-mini-camps-mas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ln); }
.pan-meta-camp { margin-right: auto; }
.pan-meta-camp[open] { flex-basis: 100%; }
.pan-meta-camp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.pan-meta-camp-form .campo { flex: 1 1 200px; }
.pan-corregir, .pan-sumar-tambien { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pan-zona-baja { border: 1px solid var(--ers); box-shadow: none; }


.pan-envio { display: flex; flex-direction: column; gap: 14px; }
.pan-envio-progreso { display: flex; align-items: center; gap: 12px; }
.pan-envio-progreso .barra { flex: 1; }
.pan-envio-progreso .barra-relleno { background: var(--gdl); }
.pan-envio-persona { display: flex; flex-direction: column; gap: 16px; animation: vkUp .3s var(--curva) both; }
.pan-envio-cabeza { display: flex; align-items: center; gap: 12px; }
.pan-envio-paso { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; background: var(--bg); }
.pan-envio-paso-titulo { font: 600 15px var(--fh); }
.pan-envio-burbuja { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 4px 18px 18px 18px; background: var(--sf);
  box-shadow: var(--sh); font: 14px/1.45 var(--fb); color: var(--tx); white-space: pre-line; overflow-wrap: anywhere; }
.pan-envio-paso.es-hecho .btn[data-abrir] { background: var(--s2); color: var(--tx); box-shadow: none; }
.pan-envio-pie { display: flex; flex-wrap: wrap; gap: 10px; }
.pan-envio-pie .btn.es-listo { background: var(--gd); color: var(--onbr); border-color: transparent; }
.pan-envio .btn[aria-disabled="true"] { pointer-events: none; }

/* ── I6b · Carga de vendedores ───────────────────────────────────────────────────────────────────────────────────────────────── */

@media (min-width: 600px) { .pan-carga-modo.segmentado.ancho { display: inline-flex; width: auto; align-self: flex-start; } }
@media (max-width: 599px) { .pan-carga-modo .segmentado-op { padding: 0 8px; font-size: 13px; gap: 4px; } .pan-carga-modo .segmentado-op .ms { font-size: 17px; } }
.pan-pegar { height: auto; min-height: 180px; padding: 14px 16px; font: 14px/1.5 var(--fb); resize: vertical; tab-size: 12; }
.pan-archivo { height: auto; padding: 14px 16px; }
.pan-modelo { display: flex; align-items: center; gap: 8px; font: 14px/1.45 var(--fb); color: var(--t2); }
.pan-modelo .ms { color: var(--gdt); }
.pan-modelo a { color: var(--brt); font-weight: 600; }
.pan-imp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .pan-imp { grid-template-columns: minmax(0, 1fr) clamp(300px, 26%, 440px); }
  .pan-imp-lado { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
  .pan-imp-filas { grid-column: 1; grid-row: 1; }
}
.pan-imp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pan-imp-lista { padding-top: 2px; padding-bottom: 2px; }
.pan-imp-fila { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--ln); scroll-margin-top: 90px; }
.pan-imp-fila:last-child { border-bottom: 0; }
.pan-imp-fila:target { animation: vkUp .4s var(--curva) both; }
.pan-imp-fila-cabeza { display: flex; align-items: flex-start; gap: 12px; }
.pan-imp-n { display: inline-grid; place-items: center; flex: none; min-width: 32px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--s2);
  font: 600 12px var(--fh); color: var(--t2); font-variant-numeric: tabular-nums; }
.pan-imp-quien { flex: 1; min-width: 0; font: 14px/1.4 var(--fb); }
.pan-imp-quien b { font: 600 15px var(--fh); }
.pan-imp-cel { display: block; color: var(--t2); font-size: 13px; overflow-wrap: anywhere; }
.pan-imp-problemas { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 44px; }
.pan-imp-arreglos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding-left: 44px; }
.pan-imp-corregir { flex: 1 1 100%; order: -1; }
.pan-imp-corregir > summary { list-style: none; }
.pan-imp-corregir[open] > summary { display: none; }
.pan-imp-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--bg); }
.pan-imp-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pan-imp-campos .entrada { height: 48px; }
.pan-imp-campos .campo-etiqueta { font-size: 13px; }
@media (min-width: 1100px) { .pan-imp-campos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pan-imp-problemas, .pan-imp-arreglos { padding-left: 0; } }
.pan-imp-ok .lista-fin .ms { color: var(--okt); }

/* ── I9 · Equipos y divisiones ───────────────────────────────────────────────────────────────────────────────────────────────── */
.pan-ranking { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pan-equipo .barra { margin: 6px 0 2px; }
.pan-desafio.es-terminado { opacity: .7; }
.pan-divs .lista-fila { gap: 10px; }
.pan-div-nombre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.pan-div-nombre .entrada { height: 44px; }
.pan-div-cant { white-space: nowrap; }
.pan-div-mover { display: flex; gap: 4px; }
.pan-div-mover form { display: contents; }
.pan-div-nueva { display: flex; align-items: flex-end; gap: 10px; }
@media (max-width: 599px) { .pan-div-cant { display: none; } }

/* ── I10 · Efectivo y rendiciones ────────────────────────────────────────────────────────────────────────────────────────────── */
.pan-ef { display: flex; flex-direction: column; gap: 12px; border-radius: 24px; }
.pan-ef.es-vencido { box-shadow: 0 0 0 2px var(--er), var(--sh); }
.pan-ef-cabeza { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pan-ef-quien { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; }
.pan-ef-quien b { font: 600 16px var(--fh); }
.pan-ef-monto { font: 600 20px var(--fh); }
.pan-ef-compras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pan-ef-compra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 8px 0; border-top: 1px solid var(--ln); }
.pan-ef-compra:first-child { border-top: 0; padding-top: 0; }
.pan-ef-comprador { flex: 1 1 160px; min-width: 0; }
.pan-ef-compra.es-vencido .pan-ef-comprador { color: var(--ert); }
.pan-ef-tilde input { width: 22px; height: 22px; accent-color: var(--gd); }
.pan-ef-liberar { margin-left: auto; }
.pan-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pan-hist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--ln); font: 14px/1.45 var(--fb); }
.pan-hist li:last-child { border-bottom: 0; }
.pan-hist b { font-family: var(--fh); font-weight: 600; }
.pan-venta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1000px) { .pan-venta { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .pan-venta-datos { position: sticky; top: 16px; } }
.pan-venta-elegidos { font: 600 15px/1.4 var(--fh); color: var(--gdt); font-variant-numeric: tabular-nums; }

/* ── I14 · Reportes y extractos ──────────────────────────────────────────────────────────────────────────────────────────────── */
.pan-reporte { display: flex; align-items: center; gap: 14px; }
.pan-reporte-icono { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--gds); color: var(--gdst); }
.pan-reporte-icono .ms { font-size: 26px; }
.pan-reporte-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 13px/1.4 var(--fb); color: var(--t2); }
.pan-reporte-texto b { font: 600 15px/1.3 var(--fh); color: var(--tx); }
.pan-reporte-texto a:not(.btn) { color: var(--brt); font-weight: 600; }
.pan-reporte-csv { align-self: flex-start; margin-top: 8px; }   /* «En CSV»: un botón de 44, no un link dentro del texto */
.pan-ranking-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pan-ranking-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ln); font: 14px/1.4 var(--fb); }
.pan-ranking-lista li:last-child { border-bottom: 0; }
.pan-ranking-lista b { font: 600 14px var(--fh); }
.pan-ranking-lista .num { font: 600 14px var(--fh); }
.pan-verif { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; }
.pan-verif .pan-dl { align-self: stretch; }
.pan-verif-inst { display: flex; align-items: center; gap: 12px; }
.pan-verif-inst > span:last-child { display: flex; flex-direction: column; font: 600 15px/1.3 var(--fh); }
.pan-huella { display: flex; flex-direction: column; gap: 4px; align-self: stretch; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.pan-huella code { font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; color: var(--tx); }
.pan-comparar { align-self: stretch; padding-top: 14px; border-top: 1px solid var(--ln); }
.pan-verif-pie { align-self: center; }

/* ── I19 · Proyección ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.pan-proy-frase { font: 600 22px/1.3 var(--fh); letter-spacing: -.01em; max-width: var(--texto-max); text-wrap: balance; }
@media (max-width: 599px) { .pan-proy-frase { font-size: 19px; } }
.pan-dorado { color: var(--gdt); }
.pan-proy-grafico { display: flex; align-items: flex-end; gap: 10px; padding-top: 6px; }
.pan-proy-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 222px; }
.pan-proy-col i { display: block; width: 100%; max-width: 56px; height: max(4px, calc(var(--h, 0) * 170px)); border-radius: 12px; background: var(--s2);
  transform-origin: bottom; animation: vkGrowY .7s var(--curva) both; }
.pan-proy-col.es-hoy i { background: var(--gd); }
.pan-proy-col.es-futuro i { background: transparent; border: 2px dashed var(--gdl); }
.pan-proy-n { font: 600 12px var(--fh); color: var(--t2); font-variant-numeric: tabular-nums; }
.pan-proy-col.es-hoy .pan-proy-n { color: var(--tx); }
.pan-proy-dia { align-self: stretch; margin: 2px -5px 0; padding-top: 6px; border-top: 1px dashed var(--ln); text-align: center; font: 600 12px var(--fh); color: var(--t2); white-space: nowrap; }
@media (max-width: 599px) { .pan-proy-grafico { gap: 5px; } .pan-proy-col { height: 186px; } .pan-proy-col i { height: max(4px, calc(var(--h, 0) * 136px)); } .pan-proy-n { font-size: 11px; } .pan-proy-dia { margin: 2px -3px 0; font-size: 11px; } }
.pan-proy-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pan-proy-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.pan-ley { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--s2); }
.pan-ley.es-hoy { background: var(--gd); }
.pan-ley.es-futuro { background: transparent; border: 2px dashed var(--gdl); }
.pan-proy-como { display: flex; align-items: flex-start; gap: 8px; }
.pan-proy-como .ms { font-size: 18px; flex: none; }
.pan-mejora { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--tx); }
.pan-mejora b { font: 600 15px/1.3 var(--fh); }
.pan-mejora-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gds); color: var(--gdst); }
.pan-mejora-icono .ms { font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .pan-barra-col, .pan-proy-col i, .pan-envio-persona, .pan-resaltado, .pan-imp-fila:target { animation: none; }
  .pan-envivo-punto { animation: none; }
}

/* I7 en el celular: las cinco pestañas bajan de renglón (desplazándose, «Vendedores» y «Configuración» quedaban fuera de la vista). */
@media (max-width: 599px) {
  .pan-pestanas-fila .pestanas { flex-wrap: wrap; overflow: visible; }
  .pan-pestanas-fila .pestana { height: 44px; padding: 0 14px; }
}

/* ── Ajustes tras la revisión visual (07/10) ─────────────────────────────────────────────────────────────────────────────────── */
/* Barras de días pasados y de lo vendido en la proyección: ≥ 3:1 contra la tarjeta (guía §11), no el gris de relleno. */
.pan-barra-col, .pan-proy-col.es-pasado i, .pan-ley.es-pasado { background: color-mix(in srgb, var(--t2) 60%, var(--sf)); }
.pan-proy-col.es-pasado i { border: 0; }
/* I3: la columna del gráfico lleva abajo los atajos; las divisiones con su barra dorada y el porcentaje real. */
.pan-col-izq { min-width: 0; }
.pan-col-izq .pan-atajos .btn { flex: 0 1 auto; }
.pan-division .barra { margin-top: 10px; }
.pan-division .barra-relleno { background: linear-gradient(90deg, var(--gd), var(--gdl)); }
.pan-division .avance-cabeza span { color: var(--gdt); }
.pan-ganadores-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.pan-ganadores-lista li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--gds); color: var(--gdst); }
.pan-ganadores-lista li .muted { color: var(--gdst); }
.pan-ganadores-lista b { font: 600 18px/1.3 var(--fh); font-variant-numeric: tabular-nums; }
/* Lo que falta para publicar: resaltado en dorado suave con su botón. */
.pan-check.es-falta { margin: 2px 0; padding: 10px 12px; border-radius: 16px; border-bottom: 0; background: var(--gds); }
.pan-check.es-falta .pan-check-marca { background: var(--gd); color: var(--onbr); }
.pan-check.es-falta .pan-check-texto, .pan-check.es-falta .pan-check-texto b { color: var(--gdst); }
/* Divisiones en tarjetas parejas (I7 Vendedores, I9). */
.pan-divs-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch; }
/* Textos que no se cortan por la mitad. */
.pan-sin-corte { white-space: nowrap; }
.pan-link-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pan-link { text-overflow: ellipsis; }
.pan-fecha-palabras { font: 600 13px/1.4 var(--fh); color: var(--gdt); min-height: 18px; }
.pan-con-signo { position: relative; display: block; }
.pan-con-signo > span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font: 600 16px var(--fh); color: var(--t2); pointer-events: none; }
.pan-con-signo .entrada { padding-left: 32px; }
/* I6b: ejemplo de la lista y botones parejos. */
.pan-ejemplo { padding: 2px 14px; box-shadow: none; border: 1px solid var(--ln); }
.pan-ejemplo .tabla { font-size: 13px; }
.pan-ejemplo .tabla th, .pan-ejemplo .tabla td { padding: 8px 12px 8px 0; white-space: nowrap; }
.pan-imp-lado .btn-ancho { white-space: nowrap; }
/* I7 Ventas: en el celular, cada venta en tres renglones (nombre y estado · números · quién, pago, fecha y monto). */
.pan-venta-celu-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pan-venta-nula td, .pan-venta-nula .sub { color: var(--t2); }
.pan-col-pago { padding-left: 24px !important; }
@media (min-width: 700px) { .pan-solo-celu-tabla { display: none !important; } }
@media (max-width: 699px) {
  .pan-tabla-ventas .pan-solo-compu-tabla { display: none !important; }
  .pan-tabla-ventas tr { padding: 10px 0; }
  .pan-tabla-ventas td.principal { padding-bottom: 0; }
  .pan-tabla-ventas td.principal .sub { max-width: none; }
}
/* I8: los arreglos no se parten y la columna de la meta queda alineada. */
.pan-vend-fila .btn { white-space: nowrap; }
@media (min-width: 900px) { .pan-vend-fila-accion, .pan-vend-fila-accion:empty { display: flex; width: 170px; } }
/* I10: el tilde para elegir números, del tamaño del dedo. */
.pan-ef-tilde { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -6px -4px -6px -10px; cursor: pointer; }
.pan-ef-tilde[hidden] { display: none; }
/* I9: el formulario del desafío se lee como formulario, no como botón; el nombre de la división entra entero. */
.pan-plegable-tarjeta[open] > summary { font-size: 17px; pointer-events: none; }
.pan-plegable-tarjeta[open] > summary .ms { display: none; }

.pan-div-mover .btn:disabled { opacity: .35; box-shadow: none; }
/* I19: la tarjeta de cada acción dice que se toca. */
.pan-mejora-cabeza { display: flex; align-items: center; justify-content: space-between; }
.pan-mejora-cabeza > .ms { color: var(--gdt); font-size: 20px; }
/* I14: hoja de compartir. */
.pan-qr .pila-chica { align-items: flex-start; }

/* Piezas del sistema que en mis pantallas necesitaban un ajuste (anotado como pedido al sistema en docs/pantallas/panel.md):
   - el interruptor apagado en oscuro casi no se veía (círculo y pista de tono parecido);
   - .btn-chico pisa el relleno de .btn-texto y los botones de texto quedaban corridos;
   - en la grilla del panel (diseño i7), los vendidos van sin tachar: el tachado ensuciaba las cifras. */
.pan-interruptor .interruptor-pista { box-shadow: inset 0 0 0 1.5px var(--t2); }
.pan-interruptor .interruptor-pista::after { background: var(--t2); }
.pan-interruptor input:checked + .interruptor-pista { box-shadow: none; }
.pan-interruptor input:checked + .interruptor-pista::after { background: var(--onbr); }
body[data-page^="panel-"] .btn.btn-texto { padding-left: 2px; padding-right: 2px; }
.pan-grilla-zona .grilla.modo-panel .casilla.es-vendido { text-decoration: none; }

/* ── A todo el ancho (pedido del 07/10): sin topes fijos en los bloques; grillas fluidas en la compu y solo el texto corrido limitado. ── */
.pan-texto, .pan-primera-texto, .pan-estado-tarjeta p, .pan-proy-como span { max-width: var(--texto-max); }
body[data-page^="panel-"] :is(.avance-nota, .campo-ayuda, .tarjeta-sub) { max-width: var(--texto-max); }
.pan-form-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 14px 16px; align-items: start; }
.pan-form-grilla > .pan-menor-campos { display: block; min-width: 0; }
.pan-form-grilla > .pan-menor-campos[hidden] { display: none; }
.pan-menor-interruptor { max-width: 34rem; }
/* I4 y I14: tantas columnas como entren. */
.pan-camps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); }
.pan-reportes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.pan-desafios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 14px; }
/* I3 / I7: borrador en dos columnas (qué es y el botón · lo que falta). */
@media (min-width: 900px) {
  .pan-borrador { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px 28px; align-items: start; }
  .pan-borrador-cabeza { grid-column: 1; grid-row: 1; }
  .pan-borrador-boton { grid-column: 1; grid-row: 2; }
  .pan-borrador-lista { grid-column: 2; grid-row: 1 / span 2; }
}
.pan-borrador-lista { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* I8: los pasos de una persona (permiso del adulto e invitación) lado a lado. */
.pan-envio-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 14px; }
/* I10: en pantallas anchas, las compras de cada vendedor en columnas. */
@media (min-width: 1200px) {
  .pan-ef-compras { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 8px 24px; }
  .pan-ef-compra, .pan-ef-compra:first-child { padding: 8px 0; border-top: 0; border-bottom: 1px solid var(--ln); }
}
/* Verificación pública: los datos a la izquierda y la comparación a la derecha. */
.pan-verif-datos, .pan-verif-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-self: stretch; }
@media (min-width: 900px) {
  .pan-verif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 40px; align-items: start; }
  .pan-verif > .cartel, .pan-verif-pie { grid-column: 1 / -1; }
  .pan-verif .pan-comparar { padding-top: 0; border-top: 0; }
}

/* ── Segunda revisión (07/10) ──────────────────────────────────────────────────────────────────────────────────────────────── */
body[data-page^="panel-"] :is(ul, ol).lista { list-style: none; margin: 0; }
/* Un botón propio para elegir el archivo, con el nombre al lado. */
.pan-archivo-elegir { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; cursor: pointer; }
.pan-archivo-nombre { font: 14px/1.4 var(--fb); color: var(--t2); overflow-wrap: anywhere; }
.pan-archivo-nombre.es-elegido { color: var(--tx); font-weight: 600; }
.pan-archivo-elegir input:focus-visible + .btn { outline: 3px solid var(--brl); outline-offset: 2px; }
/* El segundo aviso del momento, en una línea. */
.pan-aviso-linea > .ms { color: var(--t2); }
.pan-aviso-linea b { font-family: var(--fh); font-weight: 600; color: var(--tx); }
/* I9: el nombre y la cantidad, uno debajo del otro, para que las barras queden alineadas. */
.pan-equipo-cabeza { display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
/* I7 Ventas: la línea divisoria va en la fila (sin escalones entre celdas). */
@media (min-width: 700px) {
  .pan-tabla-ventas tr { border-bottom: 1px solid var(--ln); }
  .pan-tabla-ventas tbody tr:last-child { border-bottom: 0; }
  .pan-tabla-ventas td { border-bottom: 0; }
}
@media (max-width: 699px) {
  .pan-tabla-ventas .pan-venta-celu-cabeza { font-size: 15px; }
  .pan-venta-celu-medio { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 4px 0 2px; }
  .pan-venta-celu-medio .sub { display: inline; }
}
/* I10 en el celular: los números arriba y, abajo, el comprador con «Liberar» a la derecha. */
@media (max-width: 599px) {
  .pan-ef-compra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 6px; }
  .pan-ef-compra .pan-ef-tilde { grid-row: 1 / span 2; }
  .pan-ef-compra .pan-fichas { grid-column: 2 / -1; }
  .pan-ef-compra .pan-ef-comprador { grid-column: 2; }
  .pan-ef-compra .pan-ef-liberar { grid-column: 3; margin-left: 0; }
}

/* ── Ancho completo, tercera revisión (1920 px) ────────────────────────────────────────────────────────────────────────────── */
/* Formularios de 3 columnas fijas (no 5 en pantallas anchas: «Desde» y «Hasta» quedan juntos; un campo solo no ocupa la fila). */
@media (min-width: 900px) { .pan-form-grilla.pan-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Las notas de una línea, a su medida (la caja no corre de lado a lado con media franja vacía). */
.pan-nota { width: fit-content; max-width: 100%; }
.pan-nota > span { max-width: 110ch; }
/* I3: gráfico | divisiones y vendedores (apilados); desde 1600 px, las tres columnas. */
.pan-i3-grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .pan-i3-grilla { gap: 16px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "izq div" "izq vend"; }
  .pan-i3-grilla > .pan-col-izq { grid-area: izq; }
  .pan-i3-grilla > .pan-avance-div { grid-area: div; }
  .pan-i3-grilla > .pan-avance-vend { grid-area: vend; }
  .pan-i3-grilla.sin-izq { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "div vend"; }
}
@media (min-width: 1600px) {
  .pan-i3-grilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "izq div vend"; }
}
/* I8 «mandar de a uno»: el mensaje a la izquierda (texto a ~68 caracteres) y a quién va con el botón a la derecha. */
.pan-envio-burbuja { max-width: var(--texto-max); }
@media (min-width: 900px) {
  .pan-envio-paso { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr); column-gap: 24px; row-gap: 10px; align-items: start; }
  .pan-envio-paso > .pan-envio-paso-titulo { grid-column: 1 / -1; }
  .pan-envio-paso > [data-texto] { grid-column: 1; grid-row: 2 / span 4; }
  .pan-envio-paso > [data-para], .pan-envio-paso > [data-abrir], .pan-envio-paso > [data-hecho], .pan-envio-paso > [data-error] { grid-column: 2; }
  .pan-envio-paso > .btn[data-abrir] { width: auto; max-width: 22rem; }
}
/* Listas largas (I8, I7 Vendedores, divisiones de I9): desde 1400 px en dos columnas, con los datos cerca del nombre. */
@media (min-width: 1400px) {
  /* Ordenadas por columna (se leen de arriba abajo, como la lista del celular). Las divisiones de I9 no: se reordenan con ↑ ↓. */
  .pan-vend-filas, .pan-vend-avance { columns: 2; column-gap: 40px; }
  .pan-vend-filas > .lista-fila, .pan-vend-avance > .lista-fila { break-inside: avoid; }
  .pan-vend-fila-chip { width: auto; flex: 0 0 auto; }
}
/* I10: las columnas de compras se estiran cuando son pocas. */
@media (min-width: 1200px) { .pan-ef-compras { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); } }
/* I7 Grilla: en pantallas anchas, casillas de hasta 64 px y el detalle con más lugar. */
@media (min-width: 1400px) {
  .pan-grilla-zona { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pan-grilla-zona .grilla-casillas { grid-template-columns: repeat(10, minmax(0, 64px)); justify-content: center; }
  .pan-num { max-width: 42rem; }
}
/* Campos cortos a un ancho razonable (nombres de división). */
.pan-div-nombre { max-width: 30rem; }
.pan-div-nueva .campo { flex: 0 1 30rem; }

/* I9 en el celular: el nombre de la división a todo el ancho y los botones (cantidad, subir, bajar) abajo. */
@media (max-width: 599px) {
  .pan-divs .lista-fila { flex-wrap: wrap; row-gap: 6px; }
  .pan-divs .pan-imp-n { display: none; }
  .pan-div-nombre { flex: 1 1 100%; max-width: none; }
  .pan-divs .pan-div-cant { display: block; flex: 1; }
}
/* I10 en pantallas anchas: «Liberar» al lado del comprador, no en la otra punta. */
@media (min-width: 1200px) {
  .pan-ef-compra .pan-ef-comprador { flex: 0 1 auto; }
  .pan-ef-compra .pan-ef-liberar { margin-left: 6px; }
}



/* ── I8 · Que se sumen solos: los links y el QR de la campaña y de cada división ──────────────────────────────────────────── */
.pan-sumate { display: flex; flex-direction: column; gap: 16px; }
.pan-sumate-cabeza { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; }
.pan-sumate-icono { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--gds); color: var(--gdst); }
.pan-sumate-icono .ms { font-size: 30px; }
.pan-sumate-titulos { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pan-sumate-titulo { font: 600 18px/1.25 var(--fh); letter-spacing: -.01em; }
.pan-sumate-texto { font: 14.5px/1.5 var(--fb); color: var(--t2); max-width: 110ch; }
.pan-sumate-cuentas { align-self: center; font: 600 14px/1.3 var(--fh); color: var(--t2); }
.pan-sumate-cuentas a { color: var(--brt); }
.pan-sumate-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pan-sumate-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--bg); }
.pan-sumate-link-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pan-sumate-link-quien b { font: 600 15px/1.3 var(--fh); }
.pan-sumate-link-quien span { font: 13px/1.4 var(--fb); color: var(--t2); }
.pan-sumate-link .pan-link-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pan-sumate-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.pan-sumate-acciones .btn { white-space: nowrap; }
@media (min-width: 1100px) {
  .pan-sumate-link { grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1fr) auto; }
  .pan-sumate-acciones { justify-content: flex-end; }
}
.pan-sumate-divs { border-top: 1px solid var(--ln); padding-top: 12px; }
.pan-sumate-divs-titulo { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font: 600 15px/1.3 var(--fh); cursor: pointer; }
.pan-sumate-divs-titulo .ms { color: var(--gdt); }
.pan-sumate-divs[open] > .pan-sumate-divs-titulo { margin-bottom: 8px; }
.pan-sumate-interruptores { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px 24px; border-top: 1px solid var(--ln); padding-top: 14px; }
.pan-sumate-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pan-sumate-qr img { width: min(300px, 100%); height: auto; aspect-ratio: 1; padding: 10px; border-radius: 18px; background: #fff; }
.pan-sumate-avisos .aviso-cuerpo { gap: 6px; }
.pan-sumate-avisos-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* «Pidieron sumarse» */
.pan-pedidos { display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--gdl); }
.pan-pedidos-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pan-pedidos-titulo { display: flex; align-items: center; gap: 10px; font: 600 18px/1.25 var(--fh); }
.pan-pedidos-n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--gd); color: #1C1917; font: 600 14px/1 var(--fh); }
.pan-pedidos-filas { margin: 0; }
.pan-pedido { flex-wrap: wrap; align-items: center; }
.pan-pedido-quien { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pan-pedido-quien b { font: 600 15px/1.3 var(--fh); }
.pan-pedido-quien > span { font: 13px/1.45 var(--fb); color: var(--t2); }
.pan-pedido-quien .pan-pedido-det { color: var(--tx); }
.pan-pedido-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }

/* El cartel A4 para imprimir (layout simple): en pantalla, centrado con su barra arriba; al imprimir, solo el cartel. */
.cartel-sumate-pagina { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cartel-sumate-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; width: min(100%, 794px); }
.cartel-sumate { width: min(100%, 794px); aspect-ratio: 210 / 297; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 2.2vmin; padding: clamp(24px, 6%, 56px); border-radius: 24px; background: #fff; color: #1C1917; text-align: center; box-shadow: var(--sh);
  border-top: 18px solid var(--br); }
.cartel-sumate-cabeza { display: flex; align-items: center; gap: 14px; font: 600 clamp(16px, 2.6vw, 22px)/1.2 var(--fh); }
.cartel-sumate-titulo { font: 700 clamp(34px, 8vw, 66px)/1.05 var(--fh); letter-spacing: -.03em; color: #1C1917; }
.cartel-sumate-campania { font: 600 clamp(18px, 3.4vw, 28px)/1.25 var(--fh); color: #44403C; }
.cartel-sumate-premio { display: inline-flex; align-items: center; gap: 8px; font: 500 clamp(14px, 2.2vw, 18px)/1.35 var(--fb); color: #44403C; }
.cartel-sumate-qr { width: min(62%, 420px); aspect-ratio: 1; padding: 3%; border: 3px solid #1C1917; border-radius: 22px; background: #fff; }
.cartel-sumate-qr svg { display: block; width: 100%; height: 100%; }
.cartel-sumate-link { font: 600 clamp(12px, 2vw, 16px)/1.3 var(--fb); color: #44403C; overflow-wrap: anywhere; }
.cartel-sumate-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  width: 100%; text-align: left; }
.cartel-sumate-pasos li { counter-increment: paso; display: flex; flex-direction: column; gap: 4px; font: clamp(12px, 1.9vw, 16px)/1.4 var(--fb); color: #44403C; }
.cartel-sumate-pasos li::before { content: counter(paso); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--br); color: var(--onbr); font: 700 17px/1 var(--fh); }
.cartel-sumate-pasos b { color: #1C1917; }
.cartel-sumate-pie { font: clamp(11px, 1.6vw, 13px)/1.4 var(--fb); color: #78716C; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  .no-imprimir { display: none !important; }
  .cara-simple, .simple { background: #fff !important; padding: 0 !important; min-height: 0 !important; display: block !important; }
  .cartel-sumate-pagina { display: block; }
  .cartel-sumate { width: 210mm; height: 297mm; aspect-ratio: auto; border-radius: 0; box-shadow: none; padding: 16mm; gap: 6mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ── 55-armado.css ── */
/* ═══ 55 · Armado: alta de la institución (I1), marca (I2), crear campaña (I5) y asistente (I6) ═══════════════════════════════════
   Diseño: design/PantallaAlta.dc.html (scr i1 · i2 · i5 · i6) y design/Vakita 3 Institucion.dc.html. Solo tokens; usa los componentes
   del sistema (.asistente, .barra-accion, .campo, .tarjeta, .aviso, .dato, .chip, .interruptor, .segmentado…) y suma lo propio:

     .ar-asistente            el .asistente del sistema adaptado al panel (con su menú de 252): riel + formulario + columna desde 1440;
                              entre 900 y 1439, los segmentos arriba y la columna derecha al costado (o abajo, por debajo de 1100)
     .ar-acciones             la .barra-accion en fila (Atrás · Seguir): fija abajo en el celular; pegada al pie del formulario en la compu
     .ar-paso-cabeza          h2 26 + bajada del paso · .ar-lado (columna derecha en tarjeta) · .ar-despues («Seguir después» del celular)
     .ar-falta                «Para poder vender te falta» (-lado · -hoja · -tarjeta) · .ar-falta-resumen (el resumen tocable del celular)
     .ar-chips / .ar-chip     opciones en píldora (radio) · .ar-opcion (opción en tarjeta con radio) · .ar-check (casilla con texto)
     .ar-subir                subir PDF o fotos: zona punteada dorada, «Sacar una foto ahora», vista previa «¿Se lee bien?» (55-armado.js)
     .ar-vp                   «Así lo ve el comprador»: la página de compra en chiquito (390 × 844 escalado; -chico .41 · -medio .55 · -grande .62)
     .ar-marca                I2: controles + vista previa (claro y oscuro) · .ar-muestra (color sugerido) · .ar-contraste (aviso y ajuste)
     .ar-camino               I5: las dos maneras de crear · .ar-premios (lista que se ordena) · .ar-reglas · .ar-vend (lista para tildar)
     .ar-quienes              I6 paso 5: «¿Quiénes venden?» (.ar-opcion + chips de divisiones) · .ar-quienes-lista («Para: … · Ver la
                              lista», plegada) · .ar-vend-mas («Sumar a alguien más») · .ar-boton-link (botón que se ve como link)
     .ar-revision / .ar-faltan  I6 paso 7 · .ar-plan / .ar-ticket (I1 paso 5) · .ar-fin (cierres con celebración) · .ar-ingreso (puerta del alta)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── El marco de los pasos ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Todo a lo ancho, con márgenes del panel y grillas fluidas (pedido de Agustín, 07/10): nada de anchos fijos en contenedores ni tarjetas;
   solo el texto corrido se limita a var(--texto-max). Los formularios del área son contenedores (arform): .campos-2 y .cols-3 del sistema
   se reparten según el ancho REAL del formulario (que depende del menú, del riel y de la columna derecha), no del de la pantalla:
   1 columna por debajo de 460 px · 2 hasta 759 · 3 desde 760 (cols-3). .ar-doble ocupa dos columnas; .ar-ancho, la fila entera. */
.ar-form, .ar-rapida-campos, .ar-borrador-principal, .ar-marca-controles, .ar-nueva { position: relative; container-type: inline-size; container-name: arform; }
.ar-ancho { grid-column: 1 / -1; }
.ar-nueva { container-type: normal; }
.ar-nueva-principal { container-type: inline-size; container-name: arform; min-width: 0; }
.ar-grilla { gap: 14px 18px; align-items: start; }
.ar-denso { grid-auto-flow: row dense; }
/* Las tarjetas de personas (paso 3): la tuya a lo ancho (nombre | mail lado a lado desde 640 px de tarjeta); las demás, debajo. */
.ar-yo-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 18px; }
.ar-personas > :only-child, .ar-personas > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@container arform (min-width: 640px) { .ar-yo-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Grillas de CONTENIDO (tarjetas, avisos, listas): de a dos o de a tres recién con el formulario de 760 px o más; antes, una columna. */
@container arform (max-width: 759px) {
  .ar-grilla.ar-personas, .ar-grilla.ar-reglas-opciones, .ar-grilla.ar-mp-grilla, .ar-grilla.ar-personeria-grilla, .ar-grilla.ar-opciones-cobro,
  .ar-grilla.ar-plan-detalle, .ar-grilla.ar-planes, .ar-grilla.ar-equipos-grilla { grid-template-columns: minmax(0, 1fr); }
}
/* Grilla de 6 para CAMPOS con tramos explícitos (sin huecos): todo a lo ancho por debajo de 460; .ar-mitad = la mitad desde 460;
   .ar-tercio = un tercio y .ar-dos-tercios = dos tercios desde 760 (si no tiene .ar-mitad, a lo ancho entre 460 y 759). */
.ar-g6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.ar-g6 > * { grid-column: 1 / -1; min-width: 0; }
@container arform (min-width: 460px) { .ar-g6 > .ar-mitad { grid-column: span 3; } }
@container arform (min-width: 760px) { .ar-g6 > .ar-tercio { grid-column: span 2; } .ar-g6 > .ar-dos-tercios { grid-column: span 4; } }
/* Un dato de un renglón que puede ser largo («Quién la otorgó»): mide como un campo y crece si el texto no entra (55-armado.js le pone
   --ar-alto). Sin JavaScript queda en dos renglones. */
textarea.entrada[data-crece] { min-height: var(--h-field); height: var(--ar-alto, auto); resize: none; overflow: hidden; }
.ar-persona { container-type: inline-size; container-name: arform; }
.ar-nota-lado { display: flex; gap: 10px; align-items: flex-start; align-self: center; font: 14px/1.45 var(--fb); color: var(--t2); }
.ar-nota-lado .ms { font-size: 20px; color: var(--gdt); flex: none; }
@container arform (max-width: 459px) {
  .campos-2, .cols-2, .cols-3, .ar-opciones, .ar-planes { grid-template-columns: minmax(0, 1fr); }
}
@container arform (min-width: 460px) {
  .campos-2, .cols-2, .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-doble { grid-column: span 2; }
}
@container arform (min-width: 760px) {
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ar-paso-bajada, .ar-fin-texto, .ar-persona-nota, .ar-reglas-intro, .ar-ingreso-bajada { max-width: var(--texto-max); }
.ar-paso-cabeza { display: flex; flex-direction: column; gap: 6px; }
.ar-asistente[data-nuevo] .guardado { color: var(--t2); }
.ar-paso-titulo { font: 600 24px/1.2 var(--fh); letter-spacing: -.015em; text-wrap: balance; }
.ar-paso-bajada { font: 15px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; }
@media (min-width: 900px) { .ar-paso-titulo { font-size: 26px; } }

/* El asistente, fluido. El panel ya resta su menú de 252: hasta 1359 no entran riel + formulario + columna, así que van los segmentos
   arriba (y la columna al costado desde 1100); desde 1360, riel (con el ancho del diseño) · formulario · columna por porcentaje, con la
   columna un poco más angosta que la del sistema para que el formulario respire (a 1440: ~520 px de formulario; a 1920: ~830). */
@media (min-width: 900px) and (max-width: 1359px) {
  .ar-asistente, .ar-asistente:has(> .asistente-lado) { grid-template-columns: minmax(0, 1fr); }
  .ar-asistente > .asistente-riel { display: none; }
  .ar-asistente > .asistente-segmentos { display: flex; }
  .ar-asistente > .asistente-form { margin: 0; }
}
@media (min-width: 1100px) and (max-width: 1359px) {
  .ar-asistente:has(> .asistente-lado) { grid-template-columns: minmax(0, 1fr) clamp(256px, 22vw, 300px); }
  .ar-asistente > .asistente-segmentos { grid-column: 1 / -1; }
}
@media (min-width: 1360px) {
  .ar-asistente:has(> .asistente-lado) { grid-template-columns: clamp(244px, 14vw, 300px) minmax(0, 1fr) clamp(256px, 21vw, 460px); gap: 22px; }
}

/* La columna derecha (compu): en tarjeta, como el panel lateral del diseño. En el celular va en hojas. */
.ar-lado { display: none; }
@media (min-width: 900px) {
  .ar-lado { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--sh);
    container-type: inline-size; container-name: arlado; }
}
.ar-lado .ar-vp { --esc: .55; }
@container arlado (min-width: 250px) { .ar-lado .ar-vp { --esc: .62; } }
@container arlado (min-width: 300px) { .ar-lado .ar-vp { --esc: .7; } }
@container arlado (min-width: 340px) { .ar-lado .ar-vp { --esc: .76; } }
.ar-lado-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ar-lado-titulo { font: 600 16px/1.3 var(--fh); }
.ar-en-vivo { display: inline-flex; align-items: center; gap: 6px; font: 12px/1 var(--fb); color: var(--t2); }
.ar-en-vivo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: vkGlowAr 1.6s ease-in-out infinite; }
@keyframes vkGlowAr { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Atrás · Seguir */
.barra-accion.ar-acciones { flex-direction: row; align-items: center; gap: 10px; }
.ar-acciones .btn { min-height: 52px; white-space: nowrap; }
.ar-acciones .ar-seguir { flex: 1; }
.ar-acciones .ar-atras { flex: none; padding: 0 18px; }
.ar-acciones .ar-despues-boton { flex: none; padding: 0 14px; }
/* Con tres botones (paso 5: Atrás · Pagar después · Pagar), en el celular la principal va arriba, a todo el ancho. */
@media (max-width: 899px) {
  .barra-accion.ar-acciones:has(.ar-despues-boton) { flex-wrap: wrap; row-gap: 4px; }
  .ar-acciones:has(.ar-despues-boton) .ar-seguir { order: -1; flex-basis: 100%; }
  .ar-acciones:has(.ar-despues-boton) .ar-atras { flex: none; width: 52px; padding: 0; min-height: 48px; }
  .ar-acciones:has(.ar-despues-boton) .ar-despues-boton { flex: 1; min-height: 48px; }
}
.ar-acciones-nota { flex: 1; display: flex; align-items: center; gap: 6px; font: 13px/1.35 var(--fb); color: var(--t2); }
.ar-acciones-nota .ms { font-size: 18px; }
@media (max-width: 420px) {
  .ar-acciones .ar-atras span:not(.ms) { display: none; }   /* el nombre lo da aria-label="Atrás" */
  .ar-acciones .ar-atras { padding: 0 15px; }
  .ar-acciones .ar-seguir { padding-inline: 16px; gap: 8px; }
}
@media (min-width: 900px) {
  .barra-accion.ar-acciones { position: sticky; z-index: 6; bottom: 0; justify-content: flex-end; margin-top: 6px; padding: 14px 0 calc(16px + env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--ln); border-radius: 0; background: var(--bg); box-shadow: none; }
  .ar-acciones .ar-seguir { flex: none; min-width: 190px; }
  .ar-acciones-nota { flex: none; }
}
/* Cabecera del panel en el celular, en mis pantallas: contexto y título en una línea cada uno (el formulario queda a la vista).
   «Seguir después» es un botón de ícono de 44 (en la compu está en el riel, con texto). */
@media (max-width: 899px) {
  body[data-page^="alta-"] .panel-titulo, body[data-page^="armado-"] .panel-titulo { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-page^="alta-"] .panel-contexto, body[data-page^="armado-"] .panel-contexto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.panel-acciones .btn.ar-despues { width: 44px; min-height: 44px; padding: 0; }

/* ── «Para poder vender te falta» ──────────────────────────────────────────────────────────────────────────────────────────────── */
.ar-falta { display: flex; flex-direction: column; gap: 10px; }
.ar-falta-titulo { font: 600 16px/1.3 var(--fh); }
.ar-falta.es-listo .ar-falta-titulo { color: var(--okt); }
.ar-falta-lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ar-falta-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 16px; background: var(--bg); color: var(--tx); text-decoration: none;
  font: 14px/1.4 var(--fb); }
a.ar-falta-item { transition: background-color .15s ease; }
@media (hover: hover) { a.ar-falta-item:hover { background: var(--s2); } }
a.ar-falta-item:focus-visible { border-radius: 16px; }
.ar-falta-marca { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--s2); color: var(--t2); }
.ar-falta-marca .ms { font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20; }
.ar-falta-item.es-ok .ar-falta-marca { background: var(--ok); color: var(--sf); }
.ar-falta-item.es-revision .ar-falta-marca { background: var(--ins); color: var(--int); }
.ar-falta-item.es-error .ar-falta-marca { background: var(--ers); color: var(--ert); }
.ar-falta-item.es-error .ar-falta-texto span { color: var(--ert); }
.ar-falta-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ar-falta-texto b { font: 600 14px/1.35 var(--fh); }
.ar-falta-texto span { color: var(--t2); }
.ar-falta-ir { flex: none; align-self: center; font-size: 20px; color: var(--t2); }
.ar-falta-nota { font: 13px/1.45 var(--fb); color: var(--t2); }
.ar-falta-tarjeta { padding: 16px; border-radius: 20px; background: var(--sf); box-shadow: var(--sh); }
.ar-falta-tarjeta .ar-falta-item { background: transparent; padding: 8px 4px; }
.ar-falta-hoja .ar-falta-item { background: var(--bg); }

.ar-falta-resumen { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 16px;
  background: var(--gds); color: var(--gdst); font: 600 14px/1.25 var(--fh); text-align: left; cursor: pointer; }
.ar-falta-resumen > span:not(.ms) { flex: 1; min-width: 0; }
.ar-falta-resumen .ms { font-size: 21px; }
.ar-falta-resumen.es-listo { background: var(--oks); color: var(--okt); }
.ar-falta-resumen.es-problema { background: var(--ers); color: var(--ert); }
.ar-falta-resumen.ar-ver-previa { background: var(--sf); color: var(--tx); box-shadow: inset 0 0 0 1px var(--ln-campo); }
.ar-falta-resumen:focus-visible { border-radius: 16px; }

/* ── Campos propios ────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ar-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ar-grupo > legend { padding: 0; margin-bottom: 10px; }
.ar-con-prefijo { position: relative; display: flex; align-items: center; }
.ar-con-prefijo .entrada { flex: 1; }
.ar-prefijo, .ar-sufijo { position: absolute; top: 50%; transform: translateY(-50%); font: 600 16px/1 var(--fh); color: var(--t2); pointer-events: none; }
.ar-prefijo { left: 16px; }
.ar-prefijo + .entrada { padding-left: 32px; }
.ar-sufijo { right: 16px; font: 15px/1 var(--fb); }
.ar-con-prefijo:has(.ar-sufijo) .entrada { padding-right: 90px; }
.ar-num { font-variant-numeric: tabular-nums; font-family: var(--fh); font-weight: 600; letter-spacing: .02em; }
.campo-error[hidden], .campo-ok[hidden] { display: none; }

/* Opciones en píldora (radio) */
.ar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-chip { position: relative; display: inline-flex; }
.ar-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ar-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--ln-campo);
  background: var(--sf); color: var(--tx); font: 600 14px/1 var(--fh); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.ar-chip input:checked + span { background: var(--tx); color: var(--bg); box-shadow: none; }
.ar-chip input:focus-visible + span { outline: 3px solid var(--gdl); outline-offset: 2px; }
@media (hover: hover) { .ar-chip input:not(:checked) + span:hover { box-shadow: inset 0 0 0 1px var(--t2); } }

/* Opción en tarjeta (radio) */
.ar-opciones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container arform (min-width: 460px) { .ar-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ar-opcion { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--ln-campo); cursor: pointer; font: 14px/1.45 var(--fb); }
.ar-opcion input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gd); }
.ar-opcion > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-opcion b { font: 600 15px/1.3 var(--fh); }
.ar-opcion > span > span { color: var(--t2); }
.ar-opcion:has(input:checked) { background: var(--gds); box-shadow: inset 0 0 0 2px var(--gdl); }
.ar-opcion:has(input:checked) > span > span { color: var(--gdst); }
.ar-opcion:has(input:focus-visible) { outline: 3px solid var(--gdl); outline-offset: 2px; }

/* Casilla con texto */
.ar-check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font: 15px/1.45 var(--fb); cursor: pointer; }
.ar-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--gd); }
.ar-check-grande { padding: 14px 16px; border-radius: 18px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--ln-campo); }
.ar-check-grande input { width: 26px; height: 26px; }
.ar-check-grande:has(input:checked) { box-shadow: inset 0 0 0 2px var(--gdl); }
.con-error > .ar-check-grande { box-shadow: inset 0 0 0 2px var(--er); }

.ar-interruptor { width: 100%; }
.ar-interruptor .interruptor-texto b { display: block; font: 600 15px/1.35 var(--fh); }
.ar-interruptor .interruptor-texto small { margin-top: 2px; }
.ar-link-publico { display: flex; align-items: center; gap: 8px; font: 14px/1.4 var(--fb); color: var(--t2); overflow-wrap: break-word; }
.ar-link-publico .ms { font-size: 19px; color: var(--gdt); }
.ar-link-publico b { color: var(--tx); font-weight: 600; }
.ar-link-chico { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 14px/1.2 var(--fh); color: var(--gdt); text-decoration: none; }
.ar-link-chico .ms { font-size: 19px; }
@media (hover: hover) { .ar-link-chico:hover { text-decoration: underline; } }
.ar-link { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--gdt); font: 600 14px/1.4 var(--fh); text-decoration: underline; cursor: pointer; }
.ar-aviso-palabra { display: flex; align-items: flex-start; gap: 8px; margin-top: -6px; font: 14px/1.45 var(--fb); color: var(--gdst); }
.ar-aviso-palabra .ms { font-size: 19px; }
.ar-aviso-palabra[hidden] { display: none; }
.ar-dato-fijo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--ln); }
.ar-dato-fijo span { font: 13px/1.3 var(--fb); color: var(--t2); }
.ar-dato-fijo b { font: 600 16px/1.3 var(--fh); }

/* ── Subir PDF o fotos ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ar-subir { display: flex; flex-direction: column; gap: 8px; }
.ar-subir-entrada { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.ar-subir-zona { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 20px; border-radius: 22px; border: 2px dashed var(--gdl);
  background: var(--gds); color: var(--gdst); text-align: center; cursor: pointer; transition: transform .15s ease; }
.ar-subir-zona .ms { font-size: 38px; }
.ar-subir-zona b { font: 600 16px/1.3 var(--fh); }
.ar-subir-zona > span:not(.ms) { font: 14px/1.4 var(--fb); }
.ar-subir-zona:active { transform: scale(.99); }
.ar-subir-entrada:focus-visible + .ar-subir-zona, .ar-subir-entrada:focus-visible + label { outline: 3px solid var(--gdl); outline-offset: 3px; }
.ar-subir.con-error .ar-subir-zona { border-color: var(--er); }
.ar-subir.con-elegido .ar-subir-zona, .ar-subir.con-elegido .ar-subir-camara { display: none; }
.ar-subir-camara { align-self: center; }
.ar-subir-previa { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--sf); box-shadow: var(--sh); animation: vkUp .3s var(--curva); }
.ar-subir-previa[hidden] { display: none; }
.ar-previa-imagenes { display: flex; flex: none; gap: 6px; }
.ar-previa-imagen { position: relative; width: 88px; height: 112px; overflow: hidden; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--ln); }
.ar-previa-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-previa-imagen.es-pdf { display: grid; place-items: center; background: var(--ers); color: var(--ert); font: 700 13px/1 var(--fh); }
.ar-previa-mas { display: grid; place-items: center; width: 44px; height: 112px; border-radius: 12px; background: var(--s2); font: 600 14px/1 var(--fh); }
.ar-previa-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ar-previa-texto b { font: 600 16px/1.3 var(--fh); }
.ar-previa-texto p { font: 14px/1.45 var(--fb); color: var(--t2); overflow-wrap: anywhere; }
.ar-previa-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 420px) { .ar-subir-previa { flex-direction: column; align-items: stretch; } .ar-previa-imagenes { justify-content: center; } }

.ar-docs { display: flex; flex-direction: column; gap: 10px; }
.ar-docs-titulo { font: 600 15px/1.3 var(--fh); }
.ar-doc-tipo { display: grid; place-items: center; flex: none; width: 40px; height: 48px; border-radius: 8px; background: var(--s2); color: var(--t2); font: 700 11px/1 var(--fh); }
.ar-doc-tipo.es-pdf { background: var(--ers); color: var(--ert); }
.ar-doc-tipo .ms { font-size: 22px; }
.ar-docs-lista .lista-titulo, .ar-docs .lista-titulo { overflow-wrap: anywhere; }
.ar-mas { border-radius: 18px; }
.ar-mas > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 600 14px/1.3 var(--fh); color: var(--gdt); cursor: pointer; list-style: none; }
.ar-mas > summary::-webkit-details-marker { display: none; }
.ar-mas > summary .ms { font-size: 20px; }
.ar-mas[open] > summary { margin-bottom: 10px; }

/* ── I1 · Puerta del alta ── (layout del sitio: el pie abajo de todo aunque haya poco contenido) */
body.cara-sitio[data-page^="alta-"] { min-height: 100dvh; display: flex; flex-direction: column; }
body.cara-sitio[data-page^="alta-"] .sitio-cuerpo { flex: 1; }
@media (min-width: 900px) { body.cara-sitio[data-page^="alta-"] .sitio-cuerpo { display: grid; align-content: center; } }
/* ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ar-ingreso { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; padding-bottom: 48px; align-items: start; }
@media (min-width: 900px) { .ar-ingreso { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 80px); padding-top: clamp(32px, 4vw, 72px); padding-bottom: 80px; } }
.ar-ingreso-caja { display: flex; flex-direction: column; gap: 18px; container-type: inline-size; container-name: aringreso; }
@media (min-width: 600px) { .ar-ingreso-caja { padding: clamp(24px, 2.6vw, 44px); } }
/* En una tarjeta ancha, el título a la izquierda y lo que se hace a la derecha (sin un campo larguísimo). */
.ar-ingreso-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@container aringreso (min-width: 640px) { .ar-ingreso-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4cqw, 56px); } }
.ar-ingreso-cabeza { display: flex; flex-direction: column; gap: 8px; }
.ar-ingreso-titulo { font: 700 28px/1.12 var(--fh); letter-spacing: -.025em; text-wrap: balance; }
@media (min-width: 900px) { .ar-ingreso-titulo { font-size: 32px; } }
.ar-ingreso-bajada { font: 16px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; }
.ar-ingreso-pie { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font: 14px/1.4 var(--fb); color: var(--t2); text-align: center; }
.ar-ingreso-pie a { min-height: 44px; display: inline-flex; align-items: center; color: var(--gdt); font-weight: 600; }
.ar-ingreso-pasos { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font: 15px/1.4 var(--fb); }
.ar-ingreso-pasos li { display: flex; align-items: center; gap: 12px; }
.ar-ingreso-pasos li span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gds); color: var(--gdst);
  font: 700 13px/1 var(--fh); }
.ar-ingreso-espera { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--ins); color: var(--int); font: 14px/1.4 var(--fb); }
.ar-ingreso-espera b { font-weight: 600; white-space: nowrap; }
.ar-ingreso-espera > span { flex: 1; min-width: 0; }
.ar-ingreso-espera.es-listo { background: var(--oks); color: var(--okt); }
.ar-latido { flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: vkGlowAr 1.4s ease-in-out infinite; }
.ar-ingreso-codigo { border-top: 1px solid var(--ln); padding-top: 6px; }
.ar-ingreso-codigo > summary { display: flex; align-items: center; justify-content: center; min-height: 48px; font: 600 14px/1.35 var(--fh); color: var(--gdt);
  text-align: center; cursor: pointer; }
.ar-ingreso-codigo[open] > summary { margin-bottom: 8px; }
.ar-necesitas { display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 0; }
.ar-necesitas-titulo { font: 600 18px/1.3 var(--fh); }
.ar-necesitas { container-type: inline-size; container-name: arnecesitas; }
.ar-necesitas-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; margin: 0; padding: 0; list-style: none; }
@container arnecesitas (min-width: 520px) { .ar-necesitas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ar-necesitas-lista li { display: flex; gap: 14px; align-items: flex-start; font: 14px/1.45 var(--fb); color: var(--t2); }
.ar-necesitas-lista li > .ms, .ar-necesitas-lista li > img { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--sf); color: var(--gdt);
  box-shadow: var(--sh); font-size: 24px; }
.ar-necesitas-lista li > img { object-fit: contain; background: var(--qr); }
.ar-necesitas-lista b { display: block; font: 600 15px/1.35 var(--fh); color: var(--tx); }
.ar-ya-estas { display: flex; flex-direction: column; gap: 8px; }

/* ── I1 · Pasos 3 a 5 ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ar-persona { display: flex; flex-direction: column; gap: 14px; }
.ar-persona-cabeza { display: flex; align-items: flex-start; gap: 12px; }
.ar-persona-cabeza .chip { margin-top: 8px; }
.ar-persona-cabeza > div, .ar-persona-texto { flex: 1; min-width: 0; }
.ar-persona-cabeza .tarjeta-sub { overflow-wrap: anywhere; }
.ar-persona-cabeza .avatar .ms { font-size: 22px; }
.ar-persona-nota { font: 14px/1.45 var(--fb); color: var(--t2); }
.ar-persona-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ar-persona-otra { padding: 6px 18px; }
.ar-persona-otra[open] { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; }
.ar-persona-otra[open] > summary { margin-bottom: 0; }

.ar-mp { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 22px; color: var(--tx); text-decoration: none; }
.ar-mp-logo { flex: none; width: 56px; height: 56px; padding: 6px; border-radius: 16px; background: var(--qr); object-fit: contain; }
.ar-mp-titulo { display: block; font: 600 17px/1.3 var(--fh); }
.ar-mp p, .ar-mp > span:not(.ms) > span { font: 14px/1.45 var(--fb); }
.ar-mp-boton { background: var(--sf); box-shadow: var(--sh); }
.ar-mp-boton > span:not(.ms) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-mp-boton > span > span { color: var(--t2); }
.ar-mp-boton > .ms { font-size: 24px; color: var(--t2); }
.ar-mp-ok { background: var(--oks); color: var(--okt); align-items: flex-start; }
.ar-mp-ok p { color: var(--okt); }
.ar-mp-ok b { font-weight: 600; }
.ar-mp-nota { margin-top: 6px; }
.ar-puntos { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ar-puntos li { display: flex; gap: 10px; align-items: flex-start; font: 14px/1.45 var(--fb); color: var(--t2); }
.ar-puntos .ms { font-size: 20px; color: var(--gdt); flex: none; }

.ar-planes .ar-ticket { align-self: stretch; }
.ar-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--ln); background: var(--sf); }
.ar-plan.es-elegido { background: var(--gds); color: var(--gdst); box-shadow: inset 0 0 0 2px var(--gdl); }
.ar-plan-titulo { font: 600 17px/1.3 var(--fh); }
.ar-plan-cifra { font: 600 28px/1.1 var(--fh); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ar-plan-cifra.es-tachada { color: var(--t2); text-decoration: line-through; text-decoration-thickness: 2px; }
.ar-plan-texto b { color: var(--okt); font-weight: 600; }
.ar-plan-texto { font: 14px/1.45 var(--fb); color: var(--t2); }
.ar-plan.es-elegido .ar-plan-texto { color: var(--gdst); }
.ar-plan-como { display: flex; gap: 10px; align-items: flex-start; font: 14px/1.5 var(--fb); color: var(--t2); }
.ar-plan-como .ms { font-size: 20px; color: var(--gdt); flex: none; }
.ar-plan-como b { color: var(--tx); font-weight: 600; }
.ar-ticket { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: var(--sf); box-shadow: var(--sh);
  background-image: radial-gradient(circle at 0 50%, var(--bg) 9px, transparent 10px), radial-gradient(circle at 100% 50%, var(--bg) 9px, transparent 10px); }
.ar-ticket-titulo { font: 600 15px/1.35 var(--fh); }
.ar-ticket-filas { display: flex; flex-direction: column; margin: 0; border-top: 1px dashed var(--ln); }
.ar-ticket-filas > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--ln); font: 15px/1.4 var(--fb); }
.ar-ticket-filas dd { margin: 0; font: 600 15px/1.4 var(--fh); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-ticket-filas dt { color: var(--t2); }
.ar-ticket-filas .es-total { border-bottom: 0; }
.ar-ticket-filas .es-total dt { color: var(--tx); font: 600 15px/1.4 var(--fh); }
.ar-ticket-filas .es-total dd { font-size: 18px; color: var(--okt); }
.ar-ticket-nota { font: 13px/1.45 var(--fb); color: var(--t2); }
.ar-listo { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; background: var(--oks); color: var(--okt); animation: vkPop .5s both; }
.ar-listo > .ms { font-size: 30px; }
.ar-listo b { display: block; font: 600 16px/1.3 var(--fh); }
.ar-listo div > span { display: block; font: 14px/1.4 var(--fb); }

/* Cierres (fin del alta, campaña publicada) */
.ar-fin { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin: 8px 0 0; padding-block: clamp(24px, 4vw, 56px); text-align: center; }
.ar-fin-icono { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--gds); color: var(--gdst); margin: 6px auto; }
.ar-fin-icono .ms { font-size: 48px; }
.ar-fin-festejo { display: grid; place-items: center; width: 100%; height: 210px; overflow: hidden; }
.ar-fin-festejo .celebracion { margin: 0; }
.ar-fin-titulo, .ar-fin-texto { position: relative; z-index: 2; }
.ar-fin-titulo { font: 600 26px/1.2 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.ar-fin-texto { max-width: 46ch; font: 16px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; }
.ar-fin .ar-falta { width: min(100%, var(--texto-max)); text-align: left; }
.ar-fin-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin-top: 8px; }
.ar-fin-acciones .btn-texto { align-self: center; }
@media (min-width: 600px) { .ar-fin-acciones { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .ar-fin-acciones .btn { width: auto; min-width: 240px; } }

/* ── I2 · Marca ────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ar-marca { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeza" "previa" "controles" "acciones"; gap: 18px 28px; align-items: start; }
.ar-marca > .ar-paso-cabeza { grid-area: cabeza; }
.ar-marca-controles { grid-area: controles; }
.ar-marca-previa { grid-area: previa; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.ar-marca-acciones { grid-area: acciones; }
.ar-marca-previa .ar-vp-nota { flex-basis: 100%; max-width: none; }
@media (min-width: 900px) {
  .ar-marca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "cabeza previa" "controles previa" "acciones acciones"; }
  .ar-marca-previa { position: sticky; top: 16px; gap: 10px 18px; }
}
@media (min-width: 1500px) { .ar-marca { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
/* Cada celular de la vista previa ocupa media columna: la escala sube con el espacio (tope: que entre en la pantalla). */
.ar-marca-previa { container-type: inline-size; container-name: arprevia; }
@container arprevia (min-width: 450px) { .ar-marca-previa .ar-vp { --esc: .55; } }
@container arprevia (min-width: 500px) { .ar-marca-previa .ar-vp { --esc: .62; } }
@container arprevia (min-width: 560px) { .ar-marca-previa .ar-vp { --esc: .69; } }
@container arprevia (min-width: 640px) { .ar-marca-previa .ar-vp { --esc: .78; } }
@container arprevia (min-width: 720px) { .ar-marca-previa .ar-vp { --esc: .88; } }
.ar-logo { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px; }
.ar-logo-caja { flex: none; display: grid; place-items: center; }
.ar-logo-caja img.ar-logo-nuevo { width: 64px; height: 64px; object-fit: contain; padding: 6px; border-radius: 20px; background: var(--qr); box-shadow: inset 0 0 0 1px var(--ln); }
.ar-logo-texto { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; font: 13px/1.4 var(--fb); color: var(--t2); }
.ar-logo-texto b { font: 600 15px/1.3 var(--fh); color: var(--tx); }
.ar-logo .ar-check { flex-basis: 100%; padding: 4px 0 0; min-height: 36px; font-size: 14px; }
.ar-logo .ar-check[hidden] { display: none; }
.ar-logo .campo-error { flex-basis: 100%; }
.ar-colores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ar-muestra { position: relative; display: inline-grid; }
.ar-muestra input, .ar-color-libre input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ar-muestra span { width: 44px; height: 44px; border-radius: 50%; background: var(--muestra); cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 12%, transparent);
  transition: box-shadow .15s ease, transform .15s ease; }
.ar-muestra input:checked + span { box-shadow: 0 0 0 3px var(--sf), 0 0 0 5px var(--tx); }
.ar-muestra input:focus-visible + span { outline: 3px solid var(--gdl); outline-offset: 4px; }
.ar-muestra span:active { transform: scale(.94); }
.ar-color-libre { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 0; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--ln-campo);
  background: var(--sf); cursor: pointer; }
/* La muestra se ve de 32, pero el toque es de 44: el relleno transparente del propio campo agranda el área que abre el selector. */
.ar-color-libre input[type="color"] { box-sizing: border-box; width: var(--tap); height: var(--tap); padding: 6px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ar-color-libre input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ar-color-libre input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ar-color-libre input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.ar-color-libre:has(input[type="radio"]:checked) { box-shadow: 0 0 0 2px var(--tx); }
.ar-color-libre:has(input:focus-visible) { outline: 3px solid var(--gdl); outline-offset: 3px; }
.ar-hex { font: 600 13px/1 var(--fh); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ar-contraste[hidden] { display: none; }
.ar-ajuste { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ar-ajuste > .ms { font-size: 18px; }
.ar-punto { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: var(--muestra); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tx) 14%, transparent); }

/* ── «Así lo ve el comprador» (página de compra en chiquito) ──────────────────────────────────────────────────────────────────── */
.ar-vp { --esc: .55; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.ar-vp-chico { --esc: .41; }
.ar-vp-grande { --esc: .62; }
@media (max-width: 899px) { .ar-marca .ar-vp { --esc: .41; } }
@media (max-width: 380px) { .ar-marca .ar-vp { --esc: .38; } }
.ar-vp-etiqueta { font: 600 13px/1.2 var(--fh); color: var(--t2); }
.ar-vp-celu { position: relative; width: calc(390px * var(--esc)); height: calc(844px * var(--esc)); overflow: hidden; border-radius: calc(64px * var(--esc));
  box-shadow: 0 0 0 1px var(--ln), var(--sh2); background: var(--bg); }
.ar-vp-pantalla { position: absolute; left: 0; top: 0; width: 390px; height: 844px; overflow: hidden; transform: scale(var(--esc)); transform-origin: 0 0;
  background: var(--bg); color: var(--tx); font: 16px/1.45 var(--fb); pointer-events: none; user-select: none; }
.ar-vp-barra { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; background: var(--sf); border-bottom: 1px solid var(--ln); }
.ar-vp-inst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-vp-inst b { font: 600 15px/1.2 var(--fh); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-vp-inst > span { display: flex; align-items: center; gap: 4px; font: 13px/1.3 var(--fb); color: var(--t2); }
.ar-vp-inst .ms { font-size: 16px; color: var(--brt); }
.ar-vp-cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 150px; min-height: 100%;
  background: radial-gradient(130% 42% at 50% 0%, var(--brs) 0%, transparent 70%); }
.ar-vp-cabeza { display: flex; flex-direction: column; gap: 12px; }
.ar-vp-titulo { font: 700 29px/1.1 var(--fh); letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.ar-vp-pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-vp-premio .premio-envoltura, .ar-vp-premio .premio { width: 100%; }
.ar-vp-sin-premio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 260px; border-radius: var(--r-card-lg);
  background: var(--brs); color: var(--brst); font: 600 15px/1.3 var(--fh); }
.ar-vp-sin-premio .ms { font-size: 52px; }
.ar-vp-garantia { display: flex; gap: 12px; align-items: flex-start; padding: 2px 4px; font: 15px/1.45 var(--fb); color: var(--t2); }
.ar-vp-garantia .ms { font-size: 24px; color: var(--brt); flex: none; }
.ar-vp-garantia b { color: var(--tx); }
.ar-vp-accion { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 20px 18px; background: var(--sf);
  border-top: 1px solid var(--ln); }
.ar-vp-accion::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none; }
.ar-vp-nota { max-width: calc(390px * var(--esc) + 40px); font: 12px/1.4 var(--fb); color: var(--t2); text-align: center; }
/* Réplicas de muestra del botón principal y del de compartir (no se tocan: la vista previa es una imagen viva). */
.ar-vp-boton { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: var(--r-pill); background: var(--br); color: var(--onbr);
  font: 600 17px/1 var(--fh); }
.ar-vp-boton .ms { font-size: 22px; }
.ar-vp-compartir { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ln); background: var(--sf); }
.ar-vp-compartir .ms { font-size: 21px; }
/* En el asistente van las dos (claro y oscuro): se ve la del modo de la pantalla. */
.ar-vp-segun-modo[data-vp-marco="oscuro"] { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ar-vp-segun-modo[data-vp-marco="claro"] { display: none; }
  :root:not([data-tema="claro"]) .ar-vp-segun-modo[data-vp-marco="oscuro"] { display: flex; }
}
:root[data-tema="oscuro"] .ar-vp-segun-modo[data-vp-marco="claro"] { display: none; }
:root[data-tema="oscuro"] .ar-vp-segun-modo[data-vp-marco="oscuro"] { display: flex; }
.hoja .ar-vp { padding: 4px 0 8px; }

/* ── I5 · Crear campaña ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ar-nueva, .ar-rapida, .ar-borrador { width: 100%; }
.ar-rapida-cuerpo, .ar-borrador-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ar-rapida-campos, .ar-rapida-info, .ar-borrador-principal, .ar-borrador-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1100px) {
  .ar-rapida-cuerpo, .ar-borrador-cuerpo { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: clamp(20px, 2.4vw, 40px); }
  .ar-rapida-info, .ar-borrador-lado { position: sticky; top: 16px; }
}
/* El borrador en una columna: la campaña, lo que falta para publicar, la autorización y las reglas, en ese orden (las dos columnas se
   abren con display: contents). La sección de la autorización es su propio contenedor, así sus campos se acomodan igual en los dos casos. */
.ar-borrador .ar-seccion { container-type: inline-size; container-name: arform; }
@media (max-width: 1099.98px) {
  .ar-borrador-principal, .ar-borrador-lado { display: contents; }
  .ar-borrador-cuerpo .ar-resumen-campania { order: 1; }
  .ar-borrador-cuerpo .ar-falta { order: 2; }
  .ar-borrador-cuerpo .ar-seccion { order: 3; }
  .ar-borrador-cuerpo .ar-reglas-plegadas { order: 4; }
}
.ar-nueva-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ar-nueva-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1100px) { .ar-nueva-cuerpo { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: clamp(20px, 2.4vw, 40px); } }
.ar-caminos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; border: 0; }
@container arform (min-width: 560px) { .ar-caminos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ar-camino { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 26px; background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--ln-campo); cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease, transform .2s var(--curva); }
.ar-camino input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ar-camino-icono { font-size: 34px; color: var(--t2); }
.ar-camino-titulo { font: 600 20px/1.25 var(--fh); }
.ar-camino-texto { font: 15px/1.45 var(--fb); color: var(--t2); }
.ar-camino-tiempo { margin-top: 4px; font: 600 13px/1.2 var(--fh); color: var(--t2); }
.ar-camino:has(input:checked) { background: var(--gds); color: var(--gdst); box-shadow: inset 0 0 0 2px var(--gdl); }
.ar-camino:has(input:checked) .ar-camino-icono, .ar-camino:has(input:checked) .ar-camino-texto, .ar-camino:has(input:checked) .ar-camino-tiempo { color: var(--gdst); }
.ar-camino:has(input:focus-visible) { outline: 3px solid var(--gdl); outline-offset: 3px; }
@media (hover: hover) { .ar-camino:hover { transform: translateY(-2px); } }

.ar-premio-rapido { display: flex; flex-direction: column; gap: 10px; }
.ar-foto-opcional { display: flex; flex-direction: column; gap: 6px; }
.ar-foto-boton { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 8px; border-radius: 18px; background: var(--sf);
  box-shadow: inset 0 0 0 1px var(--ln-campo); cursor: pointer; font: 13px/1.4 var(--fb); color: var(--t2); }
.ar-foto-boton > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ar-foto-boton b { font: 600 14px/1.3 var(--fh); color: var(--tx); }
.ar-foto-mini { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: 12px;
  background: var(--gds); color: var(--gdst); }
.ar-foto-mini .ms { font-size: 24px; }
.ar-foto-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-foto-grande .ar-foto-mini { width: 76px; height: 76px; border-radius: 14px; }
.ar-subir-entrada:focus-visible + .ar-foto-boton { outline: 3px solid var(--gdl); outline-offset: 2px; }
.ar-armado { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--s2); font: 14px/1.5 var(--fb); color: var(--t2); }
.ar-armado-titulo { display: flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--fh); color: var(--tx); }
.ar-armado-titulo .ms { font-size: 19px; }

.ar-resumen-campania { display: flex; gap: 16px; align-items: flex-start; padding: 16px; }
.ar-resumen-foto.premio-foto { flex: none; width: 88px; height: 88px; border-radius: 18px; }
.ar-resumen-foto .ms { font-size: 36px; }
.ar-resumen-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ar-resumen-titulo { font: 600 20px/1.25 var(--fh); text-wrap: balance; overflow-wrap: anywhere; }
.ar-resumen-datos { font: 14px/1.45 var(--fb); color: var(--t2); }
.ar-seccion { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.ar-seccion-cabeza { display: flex; flex-direction: column; gap: 4px; }
.ar-seccion-titulo { display: flex; align-items: center; gap: 8px; font: 600 17px/1.3 var(--fh); }
.ar-seccion-titulo .ms { font-size: 21px; color: var(--gdt); }
.ar-seccion-texto { font: 14px/1.45 var(--fb); color: var(--t2); }
.ar-aut-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 14px/1.4 var(--fb); }
.ar-aut-lista .ms { font-size: 20px; color: var(--t2); }
.ar-aut-lista.es-en_revision .ms { color: var(--int); }
.ar-aut-lista.es-aprobada .ms { color: var(--okt); }
.ar-reglas-plegadas > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/1.3 var(--fh); cursor: pointer; list-style: none; }
.ar-reglas-plegadas > summary::-webkit-details-marker { display: none; }
.ar-reglas-plegadas > summary .ms { font-size: 21px; color: var(--gdt); }
.ar-reglas-plegadas[open] { display: flex; flex-direction: column; gap: 12px; }
.ar-reglas-lista { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ar-reglas-lista dt { font: 600 14px/1.35 var(--fh); }
.ar-reglas-lista dd { margin: 2px 0 0; font: 14px/1.5 var(--fb); color: var(--t2); }

/* Autorización: lo que se confirma */
.ar-confirma { display: flex; flex-direction: column; gap: 10px; }
.ar-confirma-aviso { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--gds); color: var(--gdst); font: 14px/1.45 var(--fb); }
.ar-confirma-aviso .ms { font-size: 20px; flex: none; }
.ar-confirma-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ar-confirma-datos > div { padding: 10px 12px; border-radius: 14px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--ln); }
.tarjeta .ar-confirma-datos > div { background: var(--bg); box-shadow: none; }
.ar-confirma-datos dt { font: 12px/1.3 var(--fb); color: var(--t2); }
.ar-confirma-datos dd { margin: 2px 0 0; font: 600 14px/1.35 var(--fh); overflow-wrap: anywhere; }

/* ── I6 · Pasos ────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ar-segmentado { display: flex; width: 100%; max-width: 560px; }
.ar-segmentado .segmentado-op, .ar-meta .segmentado-op { min-height: 44px; }
.ar-segmentado .segmentado-op { flex: 1; padding: 0 10px; font-size: 13px; }
@media (min-width: 600px) { .ar-segmentado .segmentado-op { font-size: 14px; } }
.ar-rango-libre .entrada[readonly] { background: var(--s2); color: var(--t2); }

/* Premios */
.ar-premios { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ar-premio-fila { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 6px; border-radius: 20px; scroll-margin-top: 16px;
  transition: box-shadow .15s ease, transform .15s ease; }
.ar-premio-fila.arrastrando { box-shadow: 0 0 0 2px var(--gdl), var(--sh2); transform: scale(1.01); position: relative; z-index: 2; }
.ar-manija { display: grid; place-items: center; flex: none; width: 36px; height: 56px; border: 0; border-radius: 12px; background: none; color: var(--t2);
  cursor: grab; touch-action: none; }
.ar-manija:active { cursor: grabbing; }
.ar-manija .ms { font-size: 22px; }
.ar-manija:focus-visible { border-radius: 12px; }
.ar-premio-foto.premio-foto { flex: none; width: 76px; height: 76px; border-radius: 14px; }
.ar-premio-foto .ms { font-size: 30px; }
.ar-premio-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-premio-texto b { font: 600 16px/1.3 var(--fh); overflow-wrap: anywhere; }
.ar-premio-orden { font: 13px/1.3 var(--fb); color: var(--t2); }
.ar-premio-sin-foto { display: inline-flex; align-items: center; gap: 4px; font: 12px/1.3 var(--fb); color: var(--t2); }
.ar-premio-sin-foto .ms { font-size: 15px; }
.ar-ayuda-orden { display: flex; align-items: center; gap: 6px; font: 13px/1.4 var(--fb); color: var(--t2); }
.ar-ayuda-orden .ms { font-size: 17px; }
.ar-agregar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1px dashed var(--ln-campo); border-radius: var(--r-pill);
  background: transparent; color: var(--tx); font: 600 15px/1 var(--fh); cursor: pointer; }
.ar-agregar .ms { font-size: 20px; }
@media (hover: hover) { .ar-agregar:hover { border-color: var(--t2); background: var(--sf); } }
.ar-agregar:focus-visible { border-radius: var(--r-pill); }
.ar-hoja-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.ar-hoja-botones .btn:last-child { min-width: 160px; }
@media (max-width: 599px) { .ar-hoja-botones { flex-direction: column-reverse; align-items: stretch; } .ar-hoja-botones .btn-texto { align-self: center; } }
.ar-peligro-texto { color: var(--ert); }

/* Sorteo y reglas */
.ar-oficial-otro[hidden] { display: none; }
.ar-reglas { display: flex; flex-direction: column; gap: 16px; }
.ar-reglas-titulo { display: flex; align-items: center; gap: 8px; font: 600 16px/1.3 var(--fh); }
.ar-reglas-titulo .ms { font-size: 21px; color: var(--gdt); }
.ar-reglas-intro { font: 14px/1.5 var(--fb); color: var(--t2); }
.ar-regla { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--ln); }
.ar-regla > legend, .ar-regla-titulo { float: left; width: 100%; margin-bottom: 8px; padding: 0; font: 600 15px/1.35 var(--fh); }
.ar-regla > legend + * { clear: both; }
.ar-regla-fija p:last-child { font: 14px/1.5 var(--fb); color: var(--t2); }

/* Equipos y vendedores */
.ar-bloque { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.ar-bloque-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar-bloque-titulo { font: 600 16px/1.3 var(--fh); }
.ar-contador { font: 600 13px/1 var(--fh); color: var(--t2); font-variant-numeric: tabular-nums; }
.ar-division { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--sf);
  box-shadow: var(--sh); font: 600 14px/1 var(--fh); }
.ar-division b { color: var(--t2); font-weight: 600; }
.ar-division-nueva { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 260px; }
.ar-division-nueva .entrada { height: 44px; border-style: dashed; border-radius: var(--r-pill); font-size: 15px; }
.ar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ar-meta .segmentado { flex: none; }
.ar-meta-valor { flex: 1 1 160px; }
.ar-meta .campo-ayuda, .ar-meta .campo-error { flex-basis: 100%; }
.ar-recomendado { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 0; border-radius: 20px; background: var(--gds); color: var(--gdst);
  box-shadow: inset 0 0 0 2px var(--gdl); text-align: left; cursor: pointer; font: 13px/1.4 var(--fb); }
.ar-recomendado > .ms { font-size: 26px; flex: none; }
.ar-recomendado > span:not(.ms) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-recomendado b { font: 600 15px/1.3 var(--fh); }
.ar-recomendado:focus-visible { border-radius: 20px; }
.ar-vend-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; align-items: start; }
.ar-vend-grupo { margin: 0; padding: 4px 14px 6px; border: 0; border-radius: 20px; background: var(--sf); box-shadow: var(--sh); }
.ar-vend-grupo-cabeza { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 0 2px; font: 600 14px/1.3 var(--fh); color: var(--t2); float: left; }
.ar-vend-grupo-cabeza + * { clear: both; }
.ar-vend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 0; border-top: 1px solid var(--ln); }
.ar-vend-quien { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; min-width: 0; min-height: 44px; cursor: pointer; }
.ar-vend-quien input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--gd); }
.ar-vend-nombre { font: 600 15px/1.3 var(--fh); overflow-wrap: anywhere; }
.ar-cargar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ar-boton-link { padding: 0; border: 0; background: none; cursor: pointer; }
.ar-quienes { display: flex; flex-direction: column; gap: 12px; }
.ar-quienes-divs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ar-quienes-lista { display: flex; flex-direction: column; gap: 12px; }
.ar-quienes-lista > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 16px; border-radius: 18px; background: var(--sf);
  box-shadow: var(--sh); font: 600 15px/1.3 var(--fh); cursor: pointer; list-style: none; }
.ar-quienes-lista > summary::-webkit-details-marker, .ar-vend-mas > summary::-webkit-details-marker { display: none; }
.ar-quienes-lista > summary > .ms { font-size: 22px; color: var(--gdt); flex: none; }
.ar-quienes-lista > summary .ar-link-chico { min-height: 0; flex: none; }
.ar-quienes-lista[open] > summary .ar-link-chico { visibility: hidden; }
.ar-quienes-lista > summary:focus-visible, .ar-vend-mas > summary:focus-visible { outline: 3px solid var(--gdl); outline-offset: 2px; }
.ar-vend-mas { display: flex; flex-direction: column; gap: 10px; }
.ar-vend-mas > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 15px/1.3 var(--fh); color: var(--gdt); cursor: pointer; list-style: none; }
.ar-vend-mas > summary .ms { font-size: 20px; }
.ar-vend-nota { display: flex; align-items: flex-start; gap: 8px; max-width: 110ch; }
.ar-vend-nota .ms { flex: none; font-size: 18px; margin-top: 1px; }
.ar-interruptor.tarjeta { padding: 14px 16px; }

/* Cobro y opciones */
.ar-opcion-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.ar-tope[hidden] { display: none; }
.ar-tope { padding-top: 10px; border-top: 1px solid var(--ln); }

/* Revisar y publicar: lo que falta (o «está todo») y la institución al costado del resumen cuando hay lugar; en una columna, primero. */
.ar-revisar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ar-revisar-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@container arform (min-width: 700px) {
  .ar-revisar { grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); }
  .ar-revisar-lado { grid-column: 2; grid-row: 1; }
  .ar-revisar > .ar-revision { grid-column: 1; grid-row: 1; }
}
.ar-faltan { padding: 16px; border-radius: 20px; background: var(--ers); color: var(--ert); }
.ar-faltan-titulo { display: flex; align-items: center; gap: 8px; font: 600 16px/1.3 var(--fh); margin-bottom: 6px; }
.ar-faltan-titulo .ms { font-size: 22px; }
.ar-faltan ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ar-faltan a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 0; color: inherit; font: 14px/1.4 var(--fb);
  text-decoration: none; border-top: 1px solid color-mix(in srgb, var(--ert) 22%, transparent); }
.ar-faltan li:first-child a { border-top: 0; }
.ar-faltan a .ms { font-size: 20px; flex: none; }
@media (hover: hover) { .ar-faltan a:hover span:not(.ms) { text-decoration: underline; } }
.ar-revision { display: block; margin: 0; padding: 4px 18px; list-style: none; }
.ar-revision-fila { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ln); }
.ar-revision-fila:last-child { border-bottom: 0; }
.ar-revision-icono .ms { font-size: 22px; color: var(--okt); }
.ar-revision-fila.es-falta .ar-revision-icono .ms { color: var(--ert); }
.ar-revision-icono.es-revision .ms { color: var(--int); }
.ar-revision-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font: 14px/1.4 var(--fb); }
.ar-revision-texto b { font: 600 14px/1.35 var(--fh); }
.ar-revision-texto span { color: var(--t2); overflow-wrap: anywhere; }
.ar-revision-fila.es-falta .ar-revision-texto span { color: var(--ert); }
.ar-revision-editar { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 600 13px/1 var(--fh); color: var(--gdt); text-decoration: none; }
@media (hover: hover) { .ar-revision-editar:hover { text-decoration: underline; } }

@media (prefers-reduced-motion: reduce) {
  .ar-en-vivo i, .ar-latido, .ar-listo, .ar-subir-previa { animation: none; }
  .ar-camino, .ar-premio-fila { transition: none; }
}

/* ── El alta a pantalla completa (layout asistente; design/PantallaAlta.dc.html) ─────────────────────────────────────────────────
   Sin el menú del panel: barra de arriba (logo | título y paso | Guardado · Seguir después), y desde 900 px riel · formulario ·
   «Para poder vender te falta» de borde a borde, con sus líneas divisorias, y la barra Atrás · Seguir fija al pie a todo el ancho.
   El formulario usa todo el ancho de su columna (regla de Agustín: nada de columnas angostas centradas); solo el texto corrido se
   limita con --texto-max. En el celular: flecha atrás + título y paso, los segmentos de avance y la barra de acción fija abajo. */
.cara-asistente { min-height: 100vh; background: var(--bg); }
.asis-barra { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px;
  background: var(--sf); border-bottom: 1px solid var(--ln); }
.asis-logo { display: flex; align-items: center; gap: 16px; flex: none; }
.asis-logo::after { content: ''; width: 1px; height: 24px; background: var(--ln); }
.asis-titulos { flex: 1; min-width: 0; }
.asis-titulo { margin: 0; font: 600 17px/1.25 var(--fh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asis-paso { margin: 0; font: 13px/1.35 var(--fb); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asis-atras { flex: none; }
.asis-despues { margin: 0; flex: none; }
.asis-despues .btn { min-height: 40px; }
.asis-flash, .asis-franja { margin: 12px 16px 0; }
.cara-asistente .asis-contenido { display: block; padding: 12px 16px calc(110px + env(safe-area-inset-bottom)); }
.cara-asistente .ar-asistente > .asistente-segmentos .asistente-pie { display: none; }   /* el paso ya está en la barra de arriba */
@media (min-width: 900px) {
  .asis-barra { gap: 16px; padding: 14px var(--margen-panel); }
  .asis-flash, .asis-franja { margin: 14px var(--margen-panel) 0; }
  .cara-asistente .asis-contenido { padding: 0 0 81px; }
  .cara-asistente .ar-asistente, .cara-asistente .ar-asistente:has(> .asistente-lado) { gap: 0; align-items: stretch; min-height: calc(100vh - 150px);
    grid-template-columns: clamp(210px, 17vw, 280px) minmax(0, 1fr) clamp(270px, 23vw, 420px); }
  .cara-asistente .ar-asistente:not(:has(> .asistente-lado)) { grid-template-columns: clamp(210px, 17vw, 280px) minmax(0, 1fr); }
  .cara-asistente .ar-asistente > .asistente-riel { display: flex; position: static; gap: 2px; padding: 22px 16px; border-radius: 0; box-shadow: none;
    background: var(--sf); border-right: 1px solid var(--ln); }
  .cara-asistente .ar-asistente > .asistente-segmentos { display: none; }
  .cara-asistente .ar-asistente > .asistente-form { max-width: none; width: auto; margin: 0; padding: 28px clamp(28px, 3.2vw, 64px) 40px; }
  .cara-asistente .ar-lado { gap: 14px; padding: 22px 20px; border-radius: 0; box-shadow: none; background: var(--sf); border-left: 1px solid var(--ln); }
  .cara-asistente .barra-accion.ar-acciones { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: flex-end; margin: 0;
    padding: 14px var(--margen-panel) calc(14px + env(safe-area-inset-bottom)); background: var(--sf); border: 0; border-top: 1px solid var(--ln); }
}

/* ── 56-sorteo.css ── */
/* ═══ 56 · Sorteo: Día del sorteo (I11), modo presentación (I12), Acta de Cierre (I13) y su verificación pública ═══════════════════
   Diseño: design/PantallaAlta.dc.html (scr i11 paso 1…7, i12 normal/reveal/vertical, i13 normal) y Vakita 3 Institucion (tablero).
   Solo tokens. Todo a lo ancho (pedido de Agustín, 07/10): sin anchos ni topes fijos en los contenedores; el ancho se reparte con grillas
   fluidas y solo el texto corrido se limita con var(--texto-max). Lo que esta área suma al sistema:
     .sr-asistente          el asistente de 7 pasos dentro del panel: de 900 a 1439 px, riel y registro a la izquierda y el paso a la derecha
                            (tres columnas al lado del menú dejarían el paso demasiado angosto); desde 1440, riel · paso · registro, fluidos
     .sr-paso-*             título (26) y bajada del paso · .sr-acciones (Atrás + la acción principal, en fila también en el celular)
     .sr-lado / .sr-registro    el registro de quién confirmó cada paso (✓ verde; la corrección, en dorado)
     .sr-resumen · .sr-nota · .sr-dl · .sr-sub · .sr-bloque (tarjeta con ícono dorado, título y bajada) · .sr-enlace
     .sr-opciones / .sr-opcion  las dos formas de cerrar las ventas (tarjeta con radio; la elegida, dorado suave + punto lleno)
     .sr-pend*              pendientes del paso 2, por vendedor, con «Recibí» y «Liberar» en el lugar
     .sr-extracto / .sr-ubic*   las 20 ubicaciones del paso 3 (las de los premios, con su borde dorado) · .sr-regla · .sr-oficial*
     .sr-ganador*           cada premio con su ganador: foto 64, número 24, a quién le compró y la nota de la regla (azul) o vacante
     .sr-formatos           las dos muestras de la presentación, con el color de la institución (--pres-0/1/2 de SorteoPresentacion)
     .sr-acta-mini          la hojita A4 dibujada (papel blanco fijo: --qr/--qrt) · .sr-acta-tarjeta · .sr-avisos / .sr-aviso
     .sr-acta / .sr-hoja    I13: la hoja A4 en un marco que se achica al ancho (--escala y --alto los pone 56-sorteo.js) + la columna
     .sr-verif*             la verificación pública del acta (layout del comprador, con la marca de la institución)
     .sr-pres* · .sr-diapo · .sr-cifra   el modo presentación a pantalla completa: gradiente radial --pres-*, texto blanco fijo (--qr);
                            las cifras giran al revelarse (vkGira 0,5 s, una cada 0,65 s). Medidas en vmin: se lee de lejos en horizontal
                            y en vertical.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Asistente: grilla dentro del panel ────────────────────────────────────────────────────────────────────────────────────────── */
.sr-paso { gap: 16px; }
.sr-paso-cabeza { display: flex; flex-direction: column; gap: 6px; }
.sr-paso-titulo { font: 600 24px/1.2 var(--fh); letter-spacing: -.01em; text-wrap: balance; }
.sr-paso-bajada { font: 15px/1.45 var(--fb); color: var(--t2); text-wrap: pretty; }
.sr-paso-chip { margin-top: 4px; }
@media (min-width: 900px) {
  .sr-paso-titulo { font-size: 26px; }
  .asistente.sr-asistente, .asistente.sr-asistente:has(> .asistente-lado) {
    grid-template-columns: clamp(220px, 19vw, 300px) minmax(0, 1fr); grid-template-areas: "riel paso" "lado paso"; grid-template-rows: auto 1fr; }
  .sr-asistente > .asistente-riel { grid-area: riel; position: static; }
  .sr-asistente > .asistente-form { grid-area: paso; }
  .sr-asistente > .asistente-lado { grid-area: lado; position: static; align-self: start; }
}
@media (min-width: 1440px) {
  .asistente.sr-asistente:has(> .asistente-lado) { grid-template-columns: clamp(244px, 16vw, 300px) minmax(0, 1fr) clamp(300px, 22vw, 440px);
    grid-template-areas: "riel paso lado"; grid-template-rows: auto; }
  .sr-asistente > .asistente-riel, .sr-asistente > .asistente-lado { position: sticky; top: 16px; }
}

/* Barra de la acción principal: Atrás + la acción (en fila también en el celular, como el diseño) */
.sr-acciones-fila { display: flex; align-items: center; gap: 10px; }
.sr-acciones-fila > form { display: flex; margin: 0; }
.sr-acciones-fila > .sr-principal, .sr-acciones-fila > form:has(.sr-principal) { flex: 1; }
.sr-acciones-fila > form:has(.sr-principal) .btn { width: 100%; }
.sr-atras { flex: none; }
.sr-acciones-nota { margin: 0; font: 13px/1.4 var(--fb); color: var(--t2); text-align: center; }
.sr-acciones-alt { display: flex; justify-content: center; margin-top: -4px; }
.sr-acciones-alt > form { display: flex; margin: 0; }
@media (max-width: 599px) {
  .sr-atras { width: 50px; padding: 0; gap: 0; }
  .sr-atras-texto { display: none; }
  .sr-acciones-fila .btn:not(.sr-atras) { padding: 0 18px; font-size: 16px; gap: 8px; }
}
@media (min-width: 900px) {
  .sr-acciones-fila { justify-content: flex-end; }
  .sr-acciones-fila > .sr-principal, .sr-acciones-fila > form:has(.sr-principal) { flex: none; }
  .sr-acciones-nota { text-align: right; }
  .sr-acciones-alt { justify-content: flex-end; margin-top: -6px; }
}

/* Registro */
.sr-lado { padding: 18px; border-radius: var(--r-card); background: var(--sf); box-shadow: var(--sh); }
.sr-lado-titulo { font: 600 16px/1.3 var(--fh); }
.sr-registro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sr-registro-fila { display: flex; gap: 10px; font: 13px/1.45 var(--fb); }
.sr-registro-ic { font-size: 18px; margin-top: 1px; color: var(--okt); }
.sr-registro-ic.es-correccion { color: var(--gdt); }
.sr-registro-texto { display: flex; flex-direction: column; min-width: 0; }
.sr-registro-texto b { font: 600 13px/1.35 var(--fh); }
.sr-registro-texto > span { color: var(--t2); overflow-wrap: anywhere; }
.sr-registro-detalle { font-size: 12px; }
.sr-registro-vacio { font: 14px/1.4 var(--fb); color: var(--t2); }
.sr-lado-nota { margin: 0; padding: 12px; border-radius: 14px; background: var(--bg); font: 13px/1.45 var(--fb); color: var(--t2); }

/* ── Piezas chicas comunes ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-paso-bajada, .sr-nota > span, .sr-regla p, .sr-bloque-texto, .sr-bloque-nota > span, .sr-lista-ayuda li > span, .sr-oficial-resto,
.sr-ganador-frase, .sr-ganador-nota > span, .sr-pend-cuando, .sr-acta-info > span, .sr-verif-texto { max-width: var(--texto-max); }
.sr-form, .sr-form-texto, .sr-form-linea, .sr-form-cta { margin: 0; }
.sr-form { display: flex; flex-direction: column; gap: 16px; }
.sr-form-texto { display: flex; }
.sr-sub { margin: 0; font: 600 16px/1.3 var(--fh); }
.sr-nota { display: flex; align-items: flex-start; gap: 10px; font: 14px/1.45 var(--fb); color: var(--t2); }
.sr-nota > .ms { font-size: 20px; color: var(--gdt); }
.sr-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sr-resumen-dato { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--sf); box-shadow: var(--sh); min-width: 0; }
.sr-resumen-dato > span { font: 13px/1.3 var(--fb); color: var(--t2); }
.sr-resumen-dato > b { font: 600 17px/1.25 var(--fh); font-variant-numeric: tabular-nums; }
.sr-resumen-dato > .sr-resumen-pie { margin-top: -4px; font-size: 12px; }
.sr-dl { display: grid; gap: 12px; margin: 0; }
.sr-dl > div { display: flex; flex-direction: column; gap: 2px; }
.sr-dl dt { font: 13px/1.3 var(--fb); color: var(--t2); }
.sr-dl dd { margin: 0; font: 600 15px/1.4 var(--fh); overflow-wrap: anywhere; }
.sr-bloque { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.sr-bloque-cabeza { display: flex; align-items: flex-start; gap: 12px; }
.sr-bloque-ic { font-size: 26px; color: var(--gdt); }
.sr-bloque-sub { margin-top: 2px; font: 14px/1.4 var(--fb); color: var(--t2); }
.sr-bloque-texto { font: 14px/1.5 var(--fb); color: var(--t2); }
.sr-bloque-nota { display: flex; align-items: flex-start; gap: 8px; font: 13px/1.45 var(--fb); color: var(--t2); }
.sr-bloque-nota > .ms { font-size: 18px; }
.sr-url { overflow-wrap: anywhere; }
.sr-enlace { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: var(--tx); }
.sr-enlace-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-enlace-texto b { font: 600 15px/1.3 var(--fh); }
.sr-enlace-texto > span { font: 13px/1.4 var(--fb); color: var(--t2); }
.sr-interruptor { align-self: flex-start; }
.sr-lista-ayuda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sr-lista-ayuda li { display: flex; align-items: flex-start; gap: 10px; font: 14px/1.45 var(--fb); color: var(--t2); }
.sr-lista-ayuda .ms { font-size: 20px; color: var(--gdt); }

/* ── Paso 1 · Cerrar las ventas ────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sr-opcion { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 92px; padding: 16px 40px 16px 16px; border-radius: 20px;
  border: 1px solid var(--ln); background: var(--sf); color: var(--tx); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.sr-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sr-opcion::after { content: ''; position: absolute; top: 16px; right: 14px; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ln); }
.sr-opcion:has(input:checked) { border: 2px solid var(--gdl); padding: 15px 39px 15px 15px; background: var(--gds); color: var(--gdst); }
.sr-opcion:has(input:checked)::after { top: 15px; right: 13px; background: var(--gdl); box-shadow: inset 0 0 0 5px var(--gds); }
.sr-opcion:has(input:focus-visible) { outline: 3px solid var(--brl); outline-offset: 2px; }
.sr-opcion-titulo { display: flex; align-items: center; gap: 8px; font: 600 16px/1.25 var(--fh); }
.sr-opcion-titulo .ms { font-size: 20px; }
.sr-opcion-sub { font: 14px/1.4 var(--fb); color: var(--t2); }
.sr-opcion:has(input:checked) .sr-opcion-sub { color: var(--gdst); }
@media (hover: hover) { .sr-opcion:not(:has(input:checked)):hover { border-color: var(--t2); } }
@media (max-width: 400px) { .sr-opcion-titulo .ms { display: none; } }

/* ── Paso 2 · Pendientes ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-pend { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 6px; }
.sr-pend-cabeza { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; }
.sr-pend-ic { font-size: 26px; color: var(--gdt); }
.sr-pend-ic.es-vencido { color: var(--ert); }
.sr-pend-ic.es-espera { color: var(--int); }
.sr-pend-texto { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-pend-texto b { font: 600 15px/1.3 var(--fh); }
.sr-pend-texto > span { font: 14px/1.4 var(--fb); color: var(--t2); }
.sr-pend-lista { list-style: none; margin: 0; padding: 0; }
.sr-pend-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 0; border-top: 1px solid var(--ln); }
.sr-pend-fila-texto { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sr-pend-fila-texto > b { font: 600 16px/1.3 var(--fh); letter-spacing: .02em; overflow-wrap: anywhere; }
.sr-pend-fila-texto > span:not(.chip) { font: 14px/1.4 var(--fb); color: var(--t2); }
.sr-pend-cuando { font: 13px/1.4 var(--fb); color: var(--t2); }
.sr-pend-acciones { display: flex; gap: 8px; flex: none; margin-left: auto; }
.sr-form-linea { display: flex; }
.sr-liberar { color: var(--ert); }

/* ── Paso 3 · Resultado oficial ────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-fieldset { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; container-type: inline-size; }
.sr-fieldset:disabled { opacity: .62; }
.sr-extracto-cabeza { display: flex; flex-direction: column; gap: 4px; }
.sr-extracto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
@container (min-width: 460px) { .sr-extracto { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 620px) { .sr-extracto { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@container (min-width: 980px) { .sr-extracto { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.sr-ubic { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sr-ubic-etiqueta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font: 12px/1.3 var(--fb); color: var(--t2); }
.sr-ubic-etiqueta b { font: 600 13px var(--fh); color: var(--tx); }
.sr-ubic.es-premio .sr-ubic-etiqueta span { font-weight: 600; color: var(--gdt); }
.sr-ubic-entrada { height: 50px; padding: 0 8px; text-align: center; font: 600 18px/1 var(--fh); letter-spacing: .06em; }
.sr-ubic.es-premio .sr-ubic-entrada { border-color: var(--gdl); }
.sr-ubic-num { min-height: 17px; font: 600 13px/1.3 var(--fh); color: var(--t2); text-align: center; font-variant-numeric: tabular-nums; }
.sr-ubic-num.es-error { color: var(--ert); font-weight: 500; font-family: var(--fb); }
.sr-regla { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--ln); }
.sr-regla > .ms { font-size: 21px; color: var(--gdt); margin-top: 1px; }
.sr-regla p { font: 14px/1.5 var(--fb); }
.sr-regla b { font: 600 14px var(--fh); }
.sr-oficial-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sr-oficial { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 18px; background: var(--sf); box-shadow: var(--sh); }
.sr-oficial-premio { font: 12px/1.3 var(--fb); color: var(--t2); }
.sr-oficial-num { font: 600 26px/1.15 var(--fh); letter-spacing: .01em; }
.sr-oficial-resto { font: 14px/1.6 var(--fb); color: var(--t2); }
.sr-oficial-resto b { font-family: var(--fh); font-weight: 600; color: var(--tx); }

/* ── Paso 4 · Ganadores ────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-ganadores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sr-ganador { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 20px; }
.sr-ganador-foto { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 14px;
  background: var(--s2); color: var(--t2); }
.sr-ganador-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sr-ganador-foto .ms { font-size: 30px; }
.sr-ganador-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sr-ganador-premio { font: 14px/1.35 var(--fb); color: var(--t2); }
.sr-ganador-linea { font: 16px/1.3 var(--fb); }
.sr-ganador-num { font: 600 24px/1.1 var(--fh); letter-spacing: .01em; }
.sr-ganador-vend, .sr-ganador-frase { font: 13px/1.4 var(--fb); color: var(--t2); }
.sr-ganador-nota { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 12px; background: var(--ins); color: var(--int);
  font: 13px/1.45 var(--fb); }
.sr-ganador-nota > .ms { font-size: 17px; margin-top: 1px; }
.sr-ganador-nota.es-vacante { background: var(--s2); color: var(--tx); }
.sr-ganador.es-vacante .sr-ganador-num { color: var(--t2); }

/* ── Paso 5 · Presentación ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-formatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sr-formato { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: clamp(150px, 11vw, 240px);
  padding: 12px; border-radius: 20px; text-align: center; text-decoration: none; color: var(--qr);
  background: radial-gradient(90% 70% at 50% 30%, var(--pres-0) 0%, var(--pres-1) 45%, var(--pres-2) 100%); transition: transform .2s var(--curva); }
.sr-formato .ms { font-size: 28px; }
.sr-formato b { font: 600 15px/1.3 var(--fh); }
.sr-formato span:not(.ms) { font: 13px/1.35 var(--fb); opacity: .88; }
.sr-formato:focus-visible { border-radius: 20px; }
@media (hover: hover) { .sr-formato:hover { transform: translateY(-2px); } }

/* ── Paso 6 · Acta ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-acta-tarjeta { display: flex; align-items: flex-start; gap: 16px; padding: 16px 18px; }
.sr-acta-mini { flex: none; display: block; width: 90px; height: 124px; }
.sr-acta-mini-hoja { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; padding: 9px 8px 10px;
  border-radius: 4px; background: var(--qr); box-shadow: 0 0 0 1px var(--ln), var(--sh2); }
.sr-acta-mini-hoja > b { font: 700 8px/1.2 var(--fh); color: var(--qrt); }
.sr-acta-mini-hoja > i { display: block; flex: none; }
.sr-mini-raya { height: 1.5px; background: var(--qrt); }
.sr-mini-linea { height: 4px; width: 90%; border-radius: 2px; background: color-mix(in srgb, var(--qrt) 12%, var(--qr)); }
.sr-mini-linea.es-corta { width: 70%; }
.sr-mini-caja { height: 16px; border: 1px solid color-mix(in srgb, var(--qrt) 14%, var(--qr)); border-radius: 3px; }
.sr-mini-caja.es-alta { height: 22px; }
.sr-acta-mini-hoja > .sr-mini-espacio { flex: 1; }
.sr-mini-firmas { display: flex; gap: 5px; }
.sr-mini-firmas i { flex: 1; border-top: 1px solid var(--qrt); }
.sr-mini-agua { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-30deg); font: 700 11px var(--fh); letter-spacing: .04em;
  color: color-mix(in srgb, var(--gd) 32%, transparent); white-space: nowrap; }
.sr-acta-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font: 14px/1.5 var(--fb); }
.sr-acta-info > span { color: var(--t2); }
.sr-acta-archivo { font: 600 16px/1.3 var(--fh); overflow-wrap: anywhere; }
.sr-acta-info > .sr-acta-codigo { display: flex; align-items: flex-start; gap: 8px; color: var(--tx); }
.sr-acta-codigo > .ms { font-size: 19px; color: var(--okt); margin-top: 1px; }
.sr-acta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.sr-acta-lista { margin: 2px 0 0; padding-left: 18px; color: var(--t2); }

/* ── Paso 7 · Avisos ───────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-avisos { list-style: none; margin: 0; padding: 0; }
.sr-aviso { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--ln); }
.sr-aviso-texto { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-aviso-premio { font: 13px/1.35 var(--fb); color: var(--t2); }
.sr-aviso-texto > b { font: 600 16px/1.3 var(--fh); }
.sr-aviso-accion { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; margin-left: auto; }
.sr-aviso-sin { font: 13px/1.35 var(--fb); color: var(--t2); }

/* ── I13 · Acta en la app ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sr-acta { display: flex; flex-direction: column; gap: 16px; }
.sr-acta-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sr-acta-datos { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.sr-codigo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--bg); }
.sr-codigo-etiqueta { display: flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--fh); color: var(--okt); }
.sr-codigo-etiqueta .ms { font-size: 18px; }
.sr-codigo-valor { font: 700 24px/1.2 var(--fh); letter-spacing: .06em; }
.sr-codigo-texto { font: 13px/1.45 var(--fb); color: var(--t2); }
.sr-codigo-texto a { overflow-wrap: anywhere; }
.sr-hoja { position: relative; overflow: hidden; border-radius: 10px; background: var(--s2); height: calc(var(--alto, 2450px) * var(--escala, .4)); }
.sr-hoja-marco { display: block; width: 834px; /* el lienzo A4 de la hoja; 56-sorteo.js lo escala al ancho que haya */ height: var(--alto, 2450px); border: 0; transform: scale(var(--escala, .4)); transform-origin: top left; }
.sr-versiones { display: flex; flex-direction: column; gap: 6px; }
.sr-versiones .lista-titulo { color: var(--tx); text-decoration: none; }
.sr-versiones .lista-titulo[aria-current="true"] { color: var(--gdt); }
.sr-volver { align-self: flex-start; }
@media (min-width: 1100px) {
  .sr-acta { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 460px); align-items: start; gap: clamp(16px, 1.6vw, 28px); }
  .sr-acta-lado { position: sticky; top: 16px; }
}

/* ── /acta/{codigo} · verificación pública ─────────────────────────────────────────────────────────────────────────────────────── */
.sr-verif { display: flex; flex-direction: column; gap: 16px; }
.sr-verif-cabeza { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--fh); }
.sr-verif-cabeza .ms { color: var(--brt); }
.sr-verif-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px; text-align: center; }
.sr-verif-codigo { font: 700 clamp(30px, 8.6vw, 46px)/1 var(--fh); letter-spacing: .04em; overflow-wrap: anywhere; }
.sr-verif-texto { font: 15px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; }
.sr-verif-datos { padding: 4px 18px; }
.sr-filas { margin: 0; }
.sr-filas > div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ln); }
.sr-filas > div:last-child { border-bottom: 0; }
.sr-filas dt { flex: none; color: var(--t2); font: 15px/1.4 var(--fb); }
.sr-filas dd { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font: 600 15px/1.4 var(--fb); overflow-wrap: anywhere; }
.sr-filas dd > span { font-weight: 400; font-size: 14px; color: var(--t2); }
.sr-filas > .sr-filas-ganadores { flex-direction: column; gap: 6px; }
@media (max-width: 599px) {
  .sr-filas > .es-larga { flex-direction: column; gap: 2px; }
  .sr-filas > .es-larga dd { align-items: flex-start; text-align: left; }
}
.sr-filas-ganadores dd { align-items: stretch; text-align: left; }
.sr-verif-ganadores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sr-verif-ganadores li { display: flex; justify-content: space-between; gap: 12px; font-weight: 400; }
.sr-verif-ganadores li > span { color: var(--t2); }
.sr-verif-ganadores li > b { font-weight: 600; text-align: right; }
.sr-comparar { display: flex; flex-direction: column; gap: 12px; }
.sr-comparar-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sr-comparar-form .campo { align-self: stretch; }
.sr-comparar-form input[type="file"] { height: auto; padding: 12px 14px; font-size: 15px; }
.sr-verif-pie { text-align: center; }
@media (min-width: 1000px) {
  .sr-verif-datos { padding: 6px 22px; }
  .sr-filas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: clamp(20px, 2.4vw, 40px); }
  .sr-filas > div, .sr-filas > div:last-child { flex-direction: column; justify-content: flex-start; gap: 2px; border-bottom: 1px solid var(--ln); }
  .sr-filas dd { align-items: flex-start; text-align: left; }
  .sr-filas > .sr-filas-ganadores { grid-column: 1 / -1; }
  .sr-verif-ganadores li { justify-content: flex-start; }
  .sr-verif-ganadores li > b { text-align: left; }
}
.logo-vk.sr-iso { width: 96px; height: auto; }

/* ── I12 · Modo presentación ───────────────────────────────────────────────────────────────────────────────────────────────────── */
[data-page="sorteo-presentacion"] .simple { display: block; min-height: 0; padding: 0; }
.sr-pres { --aro: color-mix(in srgb, var(--qr) 12%, transparent); --aro2: color-mix(in srgb, var(--qr) 7%, transparent);
  position: fixed; inset: 0; overflow: hidden; display: grid; place-items: center; color: var(--qr); font: 16px/1.4 var(--fb);
  background: radial-gradient(circle at 50% 50%, transparent calc(44vmin - 1px), var(--aro) 44vmin, transparent calc(44vmin + 1px)),
              radial-gradient(circle at 50% 50%, transparent calc(63vmin - 1px), var(--aro2) 63vmin, transparent calc(63vmin + 1px)),
              radial-gradient(90% 70% at 50% 30%, var(--pres-0) 0%, var(--pres-1) 45%, var(--pres-2) 100%); }
.sr-pres :focus-visible { outline-color: var(--qr); }
.sr-pres-barra { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; pointer-events: none; }
.sr-pres-barra > * { pointer-events: auto; }
.sr-pres-contador { margin-left: auto; font: 600 13px/1 var(--fh); font-variant-numeric: tabular-nums; opacity: .78; }
.sr-pres-boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--qr) 28%, transparent); background: color-mix(in srgb, var(--qrt) 16%, transparent); color: var(--qr);
  font: 600 14px/1 var(--fh); text-decoration: none; cursor: pointer; opacity: .78; transition: opacity .15s ease; }
.sr-pres-boton .ms { font-size: 21px; }
.sr-pres-boton:hover, .sr-pres-boton:focus-visible { opacity: 1; }
@media (max-width: 700px) {
  .sr-pres-boton { padding: 0; width: 44px; }
  .sr-pres-boton-texto { display: none; }
}
.sr-diapo { position: relative; z-index: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.2vmin, 40px);
  width: 100%; max-height: 100%; padding: clamp(64px, 9vmin, 120px) var(--margen) clamp(56px, 8vmin, 110px); text-align: center; }
.sr-diapo.es-actual { display: flex; animation: vkFade .35s ease-out both; }
.sr-pres-inst { display: flex; align-items: center; gap: 12px; text-align: left; }
.sr-pres-inst .inst-logo { --tam: clamp(56px, 8.9vmin, 150px); border-radius: clamp(16px, 2.5vmin, 36px); }
.sr-pres-inst-texto { display: flex; flex-direction: column; min-width: 0; }
.sr-pres-inst-texto b { font: 600 clamp(16px, 2.8vmin, 48px)/1.2 var(--fh); }
.sr-pres-inst-texto > span { font: 500 clamp(13px, 2.1vmin, 36px)/1.3 var(--fb); opacity: .85; }
.sr-pres-display { margin: 0; font: 700 clamp(34px, 8vmin, 170px)/1.02 var(--fh); letter-spacing: -.035em; text-wrap: balance; }
.sr-pres-linea { font: 500 clamp(14px, 2.3vmin, 44px)/1.4 var(--fb); opacity: .92; text-wrap: balance; }
.sr-pres-linea b { font-family: var(--fh); font-weight: 700; letter-spacing: .02em; }
.sr-pres-chico { font: clamp(12px, 1.8vmin, 30px)/1.4 var(--fb); opacity: .75; }
.sr-pres-premio { margin: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vmin, 12px); }
.sr-pres-foto { position: relative; overflow: hidden; display: grid; place-items: center; height: clamp(110px, 25vh, 640px); aspect-ratio: 9 / 5; max-width: 82vw;
  border-radius: clamp(18px, 2.4vmin, 48px); background: color-mix(in srgb, var(--qr) 12%, transparent); box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--qrt) 55%, transparent);
  transition: height .4s var(--curva); }
.sr-pres-foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sr-pres-foto .ms { font-size: clamp(48px, 10vmin, 220px); }
.sr-premio-diapo.es-revelado .sr-pres-foto { height: clamp(80px, 13vh, 400px); }
.sr-pres-premio figcaption { font: 600 clamp(22px, 4.7vmin, 100px)/1.15 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.sr-pres-cifras { display: flex; justify-content: center; gap: clamp(8px, 1.9vmin, 40px); perspective: 800px; }
.sr-cifra { display: grid; place-items: center; width: clamp(54px, 14.5vmin, 330px); height: clamp(72px, 18.5vmin, 420px); border-radius: clamp(14px, 2.8vmin, 60px);
  border: 2px dashed color-mix(in srgb, var(--qr) 40%, transparent); background: color-mix(in srgb, var(--qr) 12%, transparent);
  color: color-mix(in srgb, var(--qr) 62%, transparent); font: 600 clamp(38px, 11vmin, 260px)/1 var(--fh); font-variant-numeric: tabular-nums;
  animation: srBrilla 1.6s ease-in-out infinite; }
.sr-cifra.es-revelada { border: 0; background: var(--qr); color: var(--pres-2); font-weight: 700; box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--qrt) 45%, transparent);
  animation: vkGira .5s var(--curva) both; }
@keyframes srBrilla { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sr-pres-gano { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: vkUp .6s .2s var(--curva) both; }
.sr-pres-gano[hidden] { display: none; }
.sr-pres-sub { font: 500 clamp(15px, 2.5vmin, 50px)/1.35 var(--fb); opacity: .9; }
.sr-pres-nombre { font: 700 clamp(40px, 9vmin, 200px)/1.05 var(--fh); letter-spacing: -.02em; overflow-wrap: anywhere; }
.sr-pres-nota { margin-top: 6px; max-width: min(100%, 64ch); padding: .4em 1em; border-radius: 1em; background: color-mix(in srgb, var(--qrt) 22%, transparent);
  font: clamp(13px, 1.9vmin, 38px)/1.4 var(--fb); }
.sr-pres-revelar { display: inline-flex; align-items: center; gap: .5em; height: clamp(52px, 8vmin, 140px); padding: 0 clamp(26px, 4vmin, 80px); border: 0;
  border-radius: var(--r-pill); background: var(--qr); color: var(--pres-2); font: 600 clamp(17px, 2.7vmin, 52px)/1 var(--fh); cursor: pointer;
  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--qrt) 55%, transparent); transition: transform .15s ease; }
.sr-pres-revelar .ms { font-size: 1.3em; }
.sr-pres-revelar[hidden] { display: none; }
@media (hover: hover) { .sr-pres-revelar:hover { transform: scale(1.03); } }
.sr-pres-revelar:active { transform: scale(.97); }
.sr-pres-premios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sr-pres-premios { gap: clamp(12px, 1.6vmin, 32px); }
.sr-pres-premios li { display: flex; align-items: center; gap: clamp(10px, 1.6vmin, 32px); padding: clamp(8px, 1.1vmin, 24px) clamp(16px, 2.4vmin, 48px) clamp(8px, 1.1vmin, 24px) clamp(8px, 1.1vmin, 24px);
  border-radius: clamp(18px, 2.6vmin, 52px); background: color-mix(in srgb, var(--qrt) 18%, transparent); text-align: left; font: clamp(14px, 2.3vmin, 46px)/1.3 var(--fb); }
.sr-pres-premios li > span:last-child { display: flex; flex-direction: column; }
.sr-pres-premios b { font: 600 clamp(13px, 1.9vmin, 38px)/1.2 var(--fh); opacity: .85; }
.sr-pres-premios .sr-pres-foto { height: clamp(48px, 8vmin, 180px); border-radius: clamp(12px, 1.7vmin, 36px); box-shadow: none; transition: none; }
.sr-pres-premios .sr-pres-foto .ms { font-size: clamp(24px, 4vmin, 84px); }
.sr-pres-lista { list-style: none; margin: 0; padding: 0; width: min(100%, 64vw); display: flex; flex-direction: column; }
.sr-pres-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: clamp(8px, 1.6vmin, 30px) 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--qr) 22%, transparent); text-align: left; font: clamp(15px, 2.4vmin, 48px)/1.3 var(--fb); }
.sr-pres-lista li > b { font: 700 clamp(17px, 2.9vmin, 58px)/1.2 var(--fh); text-align: right; }
.sr-pres-nav { position: absolute; z-index: 3; left: 0; right: 0; bottom: 12px; display: flex; justify-content: space-between; padding: 0 14px; pointer-events: none; }
.sr-pres-flecha { pointer-events: auto; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--qr) 28%, transparent); background: color-mix(in srgb, var(--qrt) 16%, transparent); color: var(--qr); cursor: pointer; opacity: .6; }
.sr-pres-flecha:hover, .sr-pres-flecha:focus-visible { opacity: 1; }
.sr-pres-flecha .ms { font-size: 26px; }
.sr-pres .sr-pres-pie { position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px; color: color-mix(in srgb, var(--qr) 85%, transparent); font-size: 13px; pointer-events: none; }
@media (orientation: portrait) {
  .sr-pres-foto { height: clamp(100px, 21vh, 260px); }
  .sr-premio-diapo.es-revelado .sr-pres-foto { height: clamp(80px, 14vh, 190px); }
  .sr-pres-lista li { flex-wrap: wrap; gap: 2px 12px; }
  .sr-pres-lista li > b { margin-left: auto; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .sr-pres-foto { height: 22vh; }
  .sr-premio-diapo .sr-pres-inst, .sr-premio-diapo.es-revelado .sr-pres-foto { display: none; }
  .sr-pres .sr-pres-pie { display: none; }
}

/* El Día del sorteo a pantalla completa (layout asistente; design/PantallaAlta.dc.html, i11): riel · paso · registro de borde a borde,
   con sus líneas divisorias, y la barra con Atrás y la acción del paso fija al pie a todo el ancho (la otra opción, a la izquierda). */
@media (min-width: 900px) {
  .cara-asistente .asistente.sr-asistente, .cara-asistente .asistente.sr-asistente:has(> .asistente-lado) { gap: 0; align-items: stretch;
    min-height: calc(100vh - 150px); grid-template-columns: clamp(210px, 17vw, 280px) minmax(0, 1fr) clamp(270px, 23vw, 420px);
    grid-template-areas: "riel paso lado"; grid-template-rows: auto; }
  .cara-asistente .asistente.sr-asistente:not(:has(> .asistente-lado)) { grid-template-columns: clamp(210px, 17vw, 280px) minmax(0, 1fr); grid-template-areas: "riel paso"; }
  .cara-asistente .sr-asistente > .asistente-riel { position: static; padding: 22px 16px; border-radius: 0; box-shadow: none; background: var(--sf);
    border-right: 1px solid var(--ln); }
  .cara-asistente .sr-asistente > .asistente-form { max-width: none; width: auto; margin: 0; padding: 28px clamp(28px, 3.2vw, 64px) 40px; }
  .cara-asistente .sr-asistente > .asistente-lado { position: static; align-self: stretch; padding: 22px 20px; border-radius: 0; box-shadow: none;
    background: var(--sf); border-left: 1px solid var(--ln); }
  .cara-asistente .barra-accion.sr-acciones { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; flex-direction: row; align-items: center;
    justify-content: flex-end; gap: 16px; padding: 14px var(--margen-panel) calc(14px + env(safe-area-inset-bottom)); background: var(--sf);
    border: 0; border-top: 1px solid var(--ln); border-radius: 0; box-shadow: none; }
  .cara-asistente .sr-acciones-alt, .cara-asistente .sr-acciones-nota { order: -1; margin: 0 auto 0 0; }
}

/* ── 58-cuenta.css ── */
/* ═══ 58 · Área cuenta: I15 usuarios (+ /sumarme), I16 configuración, I17 plan y facturación, I18 ayuda ═══════════════════════════
   Piezas propias que no están en el sistema (10-…15-). Solo tokens; medidas de design/PantallaPanel.dc.html (i15–i18) y
   PantallaAlta.dc.html («inv»). Prefijo .cu-.
     Comunes:  .cu-h2 · .cu-opcional · .cu-peligro · .cu-nota (.es-alerta) · .cu-tabla-sin-caja · .cu-volver
     I15:      .cu-roles/.cu-rol (los tres permisos) · .cu-usuarios/.cu-usuario (.es-nuevo) · .cu-avatar · .cu-vos · .cu-select (permiso en
               la fila, píldora de 36) · .cu-mandar (aviso «mandale la invitación») · .cu-opciones (hoja de cada usuario) · .cu-invitar,
               .cu-permisos/.cu-permiso (radio en tarjeta) · .cu-contacto-ok
     /sumarme: .cu-auth/.cu-auth-caja (a todo el ancho; dos columnas en la compu) · .cu-invita (+ -quien -accion -logo 96) · .cu-auth-titulo/-sub/-texto · .cu-puede
               · .cu-auth-espacio/-boton/-nota/-botones · el código al revés: .cu-codigo-paso (+ -lado -accion), .cu-burbuja, .cu-esperando + .cu-pulso,
               .cu-codigo-form, .cu-codigo-etq, .cu-hoja-texto
     I16:      .cu-config · .cu-tarjeta (+ -pie) · .cu-datos · .cu-descripcion · .cu-docs · .cu-botones · .cu-titulo-mp · .cu-marca
               (+ -texto) · .cu-muestra (el color de la institución, con Tema::enLinea) · .cu-avisos · .cu-visitas · .cu-textarea
     I17:      .cu-plan · .cu-tu-plan · .cu-pildoras · .cu-cifra (+ -valor -chica -texto) · .cu-ejemplos · .cu-impl-estado · .cu-comprador
               · .cu-comprobantes/.cu-cobros/.cu-cobro (+ -texto -fin -pagar) · .cu-comp-nota · .cu-pagado
     I18:      .cu-ayuda (grilla: arriba + chat + preguntas) · .cu-buscar · .cu-tutoriales/.cu-tutorial · .cu-chat (+ -titulo -mensajes
               -form -entrada -enviar -persona) · .cu-burbuja-vk / .cu-burbuja-yo · .cu-sugerencia · .cu-horario (.es-abierto) · .cu-faq
               (+ -item -respuesta -vacio) · .cu-consultas/.cu-consulta (.es-nueva) · .cu-respuesta · .cu-pasos/.cu-paso
               · guía: .cu-guia-intro · .cu-guia/.cu-consejo (+ -icono -texto -titulo -ir)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Comunes ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cu-h2 { font: 600 18px/1.25 var(--fh); letter-spacing: -.01em; }
.cu-opcional { font: 400 13px var(--fb); color: var(--t2); }
.btn.cu-peligro, .cu-peligro { color: var(--ert); }
.cu-nota { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--s2); color: var(--tx); font: 14px/1.45 var(--fb); }
.cu-nota > .ms { font-size: 20px; flex: none; margin-top: 1px; }
.cu-nota.es-alerta { background: var(--gds); color: var(--gdst); }
.cu-tabla-sin-caja { overflow-x: auto; margin: 0 -2px; }
.cu-volver { align-self: flex-start; margin: -6px 0 -4px -10px; }
.cu-volver .ms { order: -1; }

/* ── I15 · Usuarios ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cu-roles { align-items: stretch; }
.cu-rol { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 22px; }
.cu-rol-titulo { font: 600 15px/1.3 var(--fh); }
.cu-rol-texto { font: 13px/1.45 var(--fb); color: var(--t2); }
.cu-rol-n { margin-top: auto; padding-top: 6px; font: 600 12px var(--fh); color: var(--t2); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .cu-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cu-rol { padding: 12px; border-radius: 18px; }
  .cu-rol-titulo { font-size: 13.5px; }
  .cu-rol-texto { font-size: 12.5px; }
}
@media (max-width: 420px) { .cu-roles { grid-template-columns: minmax(0, 1fr); } .cu-rol-n { padding-top: 0; } }

.cu-usuarios .lista { padding: 4px 18px; }
.cu-usuario { gap: 12px; scroll-margin-top: 90px; }
.cu-usuario.es-nuevo { background: linear-gradient(90deg, var(--gds), transparent 70%); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.cu-avatar { width: 40px; height: 40px; font: 600 15px var(--fh); }
.cu-vos { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--s2); color: var(--t2); font: 600 11px/18px var(--fh); vertical-align: 2px; }
.cu-usuario-fin { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cu-rol-form { display: flex; align-items: center; gap: 6px; }
.cu-select .entrada { height: 36px; min-width: 150px; padding: 0 38px 0 14px; border-radius: var(--r-pill); font: 600 13px/1 var(--fh); }
.cu-select::after { right: 10px; font-size: 18px; }
@media (max-width: 599px) {
  .cu-usuario-fin { padding-left: 52px !important; }
  .cu-select .entrada { min-width: 140px; height: 44px; }
}
.cu-mandar .aviso-accion { align-self: center; }
.cu-mandar-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-mandar-botones form { display: contents; }
.cu-opciones form { display: block; }

.cu-invitar { gap: 14px; }
.cu-permisos { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cu-permisos legend { margin-bottom: 8px; padding: 0; }
.cu-permiso { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 18px;
  border: 1px solid var(--ln); background: var(--sf); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.cu-permiso input { position: absolute; opacity: 0; pointer-events: none; }
.cu-permiso-icono { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--s2); color: var(--tx); }
.cu-permiso-icono .ms { font-size: 21px; }
.cu-permiso-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font: 13px/1.4 var(--fb); color: var(--t2); }
.cu-permiso-texto b { font: 600 15px/1.3 var(--fh); color: var(--tx); }
.cu-permiso-marca { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ln); color: transparent; }
.cu-permiso-marca .ms { font-size: 17px; }
.cu-permiso:has(input:checked) { border: 2px solid var(--gdl); padding: 11px 13px; box-shadow: 0 0 0 3px var(--gds); }
.cu-permiso:has(input:checked) .cu-permiso-icono { background: var(--gds); color: var(--gdst); }
.cu-permiso:has(input:checked) .cu-permiso-marca { background: var(--gd); border-color: var(--gd); color: var(--qrt); }
.cu-permiso:has(input:focus-visible) { outline: 3px solid var(--gdl); outline-offset: 2px; }
.cu-contacto-ok { color: var(--okt); }
.cu-contacto-ok b { color: var(--tx); font: 600 14px var(--fh); font-variant-numeric: tabular-nums; }

/* ── /sumarme · el invitado (PantallaAlta «inv») ─────────────────────────────────────────────────────────────────────────────── */
/* Celular: una columna con el botón abajo, al alcance del pulgar. Compu: a todo el ancho (con el margen del layout), en dos columnas
   — quién te invitó y con qué permiso a la izquierda; qué vas a poder hacer y el botón a la derecha —, sin caja angosta centrada. */
.cu-auth { display: flex; flex-direction: column; min-height: calc(100dvh - 120px); padding: 8px 0 12px; }
.cu-auth-caja { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cu-auth-caja > .cartel { flex: 1; justify-content: center; }
.cu-invita { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; animation: vkUp .4s var(--curva) both; }
.cu-invita-quien { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 10px; text-align: center; }
.cu-invita-accion { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cu-invita-logo .inst-logo { --tam: 96px; border-radius: 28px; font-size: 32px; box-shadow: 0 0 0 1px var(--ln), 0 20px 40px -20px rgba(28, 25, 23, .3); }
.cu-invita-logo .inst-logo img { padding: 10%; }
.cu-auth-titulo { font: 600 25px/1.2 var(--fh); letter-spacing: -.02em; text-wrap: balance; }
.cu-auth-sub { font: 15px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; max-width: var(--texto-max); }
.cu-auth-sub b { color: var(--tx); font-weight: 600; }
.cu-codigo-lado, .cu-codigo-accion { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cu-codigo-accion { flex: 1; }
.cu-auth-texto { display: flex; flex-direction: column; gap: 8px; }
.cu-puede { align-self: stretch; text-align: left; padding: 16px; border-radius: 20px; }
.cu-puede-titulo { display: block; font: 600 15px var(--fh); margin-bottom: 6px; }
.cu-puede-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font: 14px/1.45 var(--fb); }
.cu-puede-lista li { display: flex; align-items: flex-start; gap: 8px; }
.cu-puede-lista .ms { font-size: 18px; color: var(--okt); margin-top: 1px; }
.cu-puede-lista li.es-no { color: var(--t2); }
.cu-puede-lista li.es-no .ms { color: var(--t2); }
.cu-auth-espacio { flex: 1; min-height: 4px; }
.cu-auth-boton { display: flex; flex-direction: column; }
.cu-auth-nota { text-align: center; }
.cu-auth-botones { display: flex; flex-direction: column; gap: 8px; }
.cu-auth-botones form { display: flex; flex-direction: column; }
.cu-codigo-paso { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.cu-codigo-paso > .aviso { grid-column: 1 / -1; }   /* el aviso de institución de prueba ocupa todo el ancho, también en la grilla de la compu */
.cu-burbuja { align-self: flex-end; max-width: 92%; padding: 12px 14px; border-radius: 18px 18px 4px 18px; background: var(--gds); color: var(--gdst);
  font: 15px/1.45 var(--fb); box-shadow: var(--sh); overflow-wrap: anywhere; }
.cu-esperando { display: flex; align-items: center; gap: 10px; font: 600 14px var(--fh); color: var(--t2); }
.cu-pulso { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }
.cu-pulso::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; animation: cuPulso 1.6s ease-out infinite; }
@keyframes cuPulso { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cu-pulso::after { animation: none; } }
.cu-codigo-form { display: flex; flex-direction: column; gap: 10px; }
.cu-codigo-etq { font: 14px/1.45 var(--fb); color: var(--t2); }
.cu-hoja-texto { font: 15px/1.5 var(--fb); color: var(--tx); margin-bottom: 10px; }
.cu-hoja-texto b { font-weight: 600; }
.ya-volvio .cu-esperando { display: none; }
/* Compu: a todo el ancho y en dos columnas (va después de las reglas de arriba para pisarlas). */
@media (min-width: 900px) {
  .cu-auth { justify-content: center; padding: 32px 0; }
  .cu-auth-caja { flex: none; }
  .cu-invita { flex: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
  .cu-invita-quien { align-items: flex-start; text-align: left; padding: 0; }
  .cu-invita-accion { flex: none; }
  .cu-auth-titulo { font-size: clamp(27px, 2.5vw, 42px); }
  .cu-auth-sub { font-size: 16px; }
  .cu-auth-espacio { display: none; }
  .cu-codigo-paso { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
}

/* ── I16 · Configuración ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cu-config { align-items: stretch; }
.cu-tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 20px; scroll-margin-top: 90px; }
.cu-tarjeta .tarjeta-cabeza { margin-bottom: 0; }
.cu-tarjeta-pie { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 4px; }
.cu-datos { font: 14px/1.7 var(--fb); color: var(--t2); overflow-wrap: anywhere; }
.cu-datos b { color: var(--tx); font-weight: 600; }
.cu-descripcion { font: italic 14px/1.5 var(--fb); color: var(--t2); }
.cu-docs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cu-docs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cu-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cu-botones form { display: contents; }
.cu-titulo-mp { display: flex; align-items: center; gap: 8px; }
.cu-titulo-mp img { width: 26px; height: 26px; flex: none; }
.cu-marca { flex-direction: row; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.cu-marca .inst-logo { --tam: 48px; border-radius: 15px; }
.cu-marca-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cu-marca > .ms { font-size: 22px; color: var(--t2); }
.cu-muestra { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 2px; border-radius: 4px; background: var(--br); box-shadow: inset 0 0 0 1px rgba(28, 25, 23, .15); vertical-align: -1px; }
.cu-avisos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font: 14px/1.45 var(--fb); }
.cu-avisos li { display: flex; align-items: flex-start; gap: 10px; }
.cu-avisos .ms { font-size: 20px; color: var(--gdt); margin-top: 1px; }
.cu-avisos b { font: 600 14px/1.45 var(--fh); }
.cu-visitas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font: 14px/1.4 var(--fb); }
.cu-visitas li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--ln); }
.cu-visitas li:last-child { border-bottom: 0; padding-bottom: 0; }
.cu-visitas b { font: 600 14px/1.35 var(--fh); }
.cu-textarea { height: auto; min-height: 92px; padding: 14px 16px; line-height: 1.45; resize: vertical; }

/* ── I17 · Plan y facturación ────────────────────────────────────────────────────────────────────────────────────────────────── */
.cu-tu-plan { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 26px; }
.cu-tu-plan .tarjeta-cabeza { margin-bottom: 0; flex-wrap: wrap; }
.cu-pildoras { flex-wrap: wrap; overflow: visible; gap: 6px; }
.cu-pildoras .pestana { height: 38px; padding: 0 14px; font: 600 13px var(--fh); background: var(--sf); box-shadow: inset 0 0 0 1px var(--ln); }
@media (max-width: 899px) { .cu-pildoras .pestana { height: var(--tap); } }   /* toques de 44 en el celular */
.cu-pildoras .pestana[aria-selected="true"] { background: var(--tx); color: var(--bg); box-shadow: none; }
.cu-cifra { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 20px; background: var(--bg); animation: vkUp .3s var(--curva) both; }
.cu-cifra-valor { font: 600 30px/1.15 var(--fh); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cu-cifra-chica { font: 600 15px var(--fh); color: var(--t2); letter-spacing: 0; }
.cu-cifra-texto { font: 14px/1.5 var(--fb); color: var(--t2); text-wrap: pretty; }
@media (max-width: 599px) { .cu-cifra-valor { font-size: 25px; } }
.cu-ejemplos { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; font: 14px/1.45 var(--fb); }
.cu-ejemplos li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--ln); }
.cu-ejemplos b { font: 600 14px var(--fh); font-variant-numeric: tabular-nums; }
.cu-impl-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cu-comprador { display: flex; align-items: flex-start; gap: 8px; font: 13px/1.5 var(--fb); color: var(--t2); }
.cu-comprador .ms { font-size: 18px; margin-top: 1px; }
.cu-comprobantes { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 26px; }
.cu-comprobantes .tarjeta-cabeza { margin-bottom: 0; }
.cu-cobros { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cu-cobro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--ln); }
.cu-cobro:last-child { border-bottom: 0; }
.cu-cobro-texto { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 14px/1.4 var(--fb); }
.cu-cobro-texto b { font: 600 14px/1.3 var(--fh); }
.cu-cobro-fin { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cu-cobro-fin .num { font: 600 15px var(--fh); font-variant-numeric: tabular-nums; }
.cu-cobro-pagar { width: 100%; display: flex; justify-content: flex-end; }
.cu-comp-nota { margin-top: auto; }
.cu-pagado { display: flex; flex-direction: column; gap: 10px; }
.cu-pagado .tarjeta-cabeza { margin-bottom: 0; }
.cu-pagado .tabla tfoot td { border-top: 1px solid var(--ln); }

/* ── I18 · Ayuda ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.cu-ayuda { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "arriba" "chat" "faq"; gap: 16px; align-items: start; }
.cu-ayuda-arriba { grid-area: arriba; }
.cu-chat { grid-area: chat; }
.cu-ayuda-faq { grid-area: faq; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 900px) {
  .cu-ayuda { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "arriba chat" "faq chat"; grid-template-rows: auto 1fr; }
  .cu-chat { position: sticky; top: 20px; }
}
.cu-buscar { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-radius: 18px; background: var(--sf); box-shadow: var(--sh); color: var(--t2); cursor: text; }
.cu-buscar:focus-within { box-shadow: 0 0 0 3px var(--gdl); }
.cu-buscar .ms { font-size: 22px; }
.cu-buscar-entrada { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font: 16px var(--fb); color: var(--tx); }
.cu-buscar-entrada::placeholder { color: var(--t2); }
.cu-tutoriales { align-items: stretch; gap: 12px; }
.cu-tutorial { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border-radius: 22px; text-decoration: none; }
.cu-tutorial > .ms { font-size: 26px; color: var(--gdt); margin-bottom: 6px; }
.cu-tutorial-titulo { font: 600 15px/1.3 var(--fh); color: var(--tx); }
.cu-tutorial-dura { font: 13px var(--fb); color: var(--t2); }
@media (max-width: 899px) { .cu-tutoriales { grid-template-columns: minmax(0, 1fr); gap: 8px; } .cu-tutorial { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  .cu-tutorial > .ms { margin: 0; } .cu-tutorial-titulo { flex: 1; } .cu-tutorial-dura { width: 100%; padding-left: 36px; } }
.cu-faq { padding: 4px 18px; }
.cu-faq-item { border-bottom: 1px solid var(--ln); }
.cu-faq-item:last-child { border-bottom: 0; }
.cu-faq-item summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 0; list-style: none; cursor: pointer; font: 600 14px/1.35 var(--fh); }
.cu-faq-item summary::-webkit-details-marker { display: none; }
.cu-faq-item summary > span:not(.ms) { flex: 1; }
.cu-faq-item summary .ms { font-size: 20px; color: var(--t2); transition: transform .2s var(--curva); }
.cu-faq-item[open] summary .ms { transform: rotate(45deg); }
.cu-faq-item summary:focus-visible { border-radius: 10px; }
@media (hover: hover) { .cu-faq-item summary:hover { color: var(--gdt); } }
.cu-faq-respuesta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 0 16px; font: 14px/1.55 var(--fb); color: var(--tx); animation: vkUp .25s var(--curva) both; }
.cu-faq-respuesta p { max-width: var(--texto-max); }
.cu-faq-vacio { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--s2); font: 14px/1.45 var(--fb); }
.cu-chat { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 26px; }
.cu-chat-titulo { display: flex; align-items: center; gap: 8px; font: 600 16px var(--fh); }
.cu-chat-titulo .ms { font-size: 20px; color: var(--gdt); }
.cu-chat-mensajes { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.cu-burbuja-vk, .cu-burbuja-yo { max-width: 88%; padding: 10px 14px; font: 14px/1.45 var(--fb); overflow-wrap: anywhere; animation: vkUp .25s var(--curva) both; }
.cu-burbuja-vk { align-self: flex-start; border-radius: 16px 16px 16px 4px; background: var(--bg); color: var(--tx); }
.cu-burbuja-yo { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--gds); color: var(--gdst); white-space: pre-line; }
.cu-burbuja-vk p + .cu-sugerencia { margin-top: 8px; }
.cu-sugerencia { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0 0; border-top: 1px solid var(--ln); margin-top: 8px; }
.cu-sugerencia b { font: 600 14px/1.35 var(--fh); }
.cu-sugerencia p { color: var(--tx); }
.cu-sugerencia-ir { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font: 600 13px var(--fh); color: var(--gdt); text-decoration: underline; }
.cu-sugerencia-ir .ms { font-size: 16px; }
.cu-chat-persona { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; align-self: flex-start; }
.cu-chat-form { display: flex; align-items: flex-end; gap: 8px; }
.cu-chat-entrada { flex: 1; height: auto; min-height: 56px; max-height: 140px; padding: 14px 16px; line-height: 1.4; resize: none; }
.cu-chat-enviar { width: 56px; padding: 0; flex: none; }
.cu-chat-enviar .ms { font-size: 22px; }
.cu-horario { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--s2); font: 13px/1.45 var(--fb); }
.cu-horario .ms { font-size: 20px; flex: none; }
.cu-horario.es-abierto { background: var(--oks); color: var(--okt); }
.cu-consultas { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 90px; }
.cu-consultas-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cu-consulta { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 22px; background: var(--sf); box-shadow: var(--sh); animation: vkUp .3s var(--curva) both; }
.cu-consulta.es-nueva { box-shadow: 0 0 0 2px var(--okt), var(--sh); }
.cu-consulta-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cu-consulta-texto { font: 15px/1.5 var(--fb); white-space: pre-line; overflow-wrap: anywhere; }
.cu-respuesta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--gds); color: var(--gdst); }
.cu-respuesta .cu-consulta-texto { color: var(--tx); }
:root[data-tema="oscuro"] .cu-respuesta .cu-consulta-texto { color: var(--gdst); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .cu-respuesta .cu-consulta-texto { color: var(--gdst); } }
.cu-respuesta-de { display: flex; align-items: center; gap: 6px; font: 600 13px var(--fh); }
.cu-respuesta-de .ms { font-size: 18px; }
.cu-pasos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.cu-paso { display: flex; align-items: flex-start; gap: 12px; }
.cu-paso-n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gds); color: var(--gdst); font: 700 14px var(--fh); }
.cu-paso b { display: block; font: 600 15px/1.3 var(--fh); }
.cu-paso p { margin: 2px 0 8px; font: 14px/1.5 var(--fb); color: var(--t2); }

/* guía */
.cu-guia-intro { font: 15px/1.55 var(--fb); color: var(--t2); max-width: var(--texto-max); }
.cu-guia { margin: 0; padding: 0; list-style: none; align-items: stretch; }
.cu-consejo { display: flex; align-items: flex-start; gap: 14px; padding: 18px; }
.cu-consejo-icono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--gds); color: var(--gdst); }
.cu-consejo-icono .ms { font-size: 25px; }
.cu-consejo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font: 14px/1.5 var(--fb); color: var(--t2); }
.cu-consejo-titulo { font: 600 16px/1.3 var(--fh); color: var(--tx); }
.cu-consejo-ir { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: var(--tap); font: 600 14px var(--fh); color: var(--gdt); }
.cu-consejo-ir .ms { font-size: 18px; }
.cu-buscando { color: var(--t2); font-style: italic; }
/* I16 · el selector de modo entra en la tarjeta del celular: sin íconos y con menos relleno en pantallas angostas */
@media (max-width: 480px) { .cu-modo .segmentado-op { padding: 0 6px; font-size: 13.5px; gap: 0; } .cu-modo .segmentado-op .ms { display: none; } }
/* I18 · en pantallas anchas, las preguntas frecuentes en dos columnas (no una fila de 1500 px con el «+» en la otra punta) */
@media (min-width: 1280px) { .cu-faq { columns: 2; column-gap: 36px; } .cu-faq-item { break-inside: avoid; } .cu-faq-item:last-child { border-bottom: 1px solid var(--ln); } }
/* I15 · en el celular, los botones del aviso «mandale la invitación» van uno abajo del otro, a todo el ancho */
@media (max-width: 599px) {
  .cu-mandar .aviso-accion { flex: 1 1 100%; margin-left: 0; }
  .cu-mandar-botones { flex-direction: column; align-items: stretch; }
  .cu-mandar-botones .btn { width: 100%; }
}