/* KRAK3N Caja v1.0 · modelo C «Comercio vivo» + sello (A) + ticket (B). ESQUEMA_APPS §4.
   Colores solo de tokens: los de la marca (krak3n-tokens.css) y los del comercio (--c-comercio, lo pone app.js). */

/* Letra empaquetada en la app (woff2, subconjunto latino, ~150 KB; licencia OFL al lado): sin internet no cambia. */
@font-face { font-family: "Fira Sans"; src: url(../fuentes/FiraSans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(../fuentes/FiraSans-500.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(../fuentes/FiraSans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(../fuentes/FiraSans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fira Mono"; src: url(../fuentes/FiraMono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fira Mono"; src: url(../fuentes/FiraMono-500.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fira Mono"; src: url(../fuentes/FiraMono-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --c-comercio: #2f7a4f;
  --c-comercio-osc: color-mix(in srgb, var(--c-comercio) 80%, #000);
  --c-comercio-suave: color-mix(in srgb, var(--c-comercio) 10%, #fff);
  --c-comercio-claro: color-mix(in srgb, var(--c-comercio) 28%, #fff);
  --c-sobre-comercio: #fff;
  /* Fondo hueso del modelo C (José, 06/11). */
  --c-fondo-app: #f7f4ed;
  --c-borde-bloque: #ece7dc;
  --c-mono: "Fira Mono", ui-monospace, "Roboto Mono", "DejaVu Sans Mono", monospace;
  --c-radio-bloque: 14px;
  /* Escala de letra (v1.6, UI-6): 7 tamaños con razón ≈1,25. Nada se escribe fuera de esta escala. */
  --t-1: 12px; --t-2: 13px; --t-3: 15px; --t-4: 19px; --t-5: 24px; --t-6: 34px; --t-7: 48px;
  /* Tres niveles de sombra (luz desde arriba) y el velo de las hojas. */
  --c-sombra-1: 0 1px 3px rgba(17, 17, 19, .12);
  --c-sombra-2: 0 6px 16px rgba(17, 17, 19, .08);
  --c-sombra-3: 0 10px 30px rgba(17, 17, 19, .12);
  --c-velo: rgba(17, 17, 19, .5);
  /* Papel del ticket (modelo B): crema con tinta casi negra; el gris tenue pasa AA (5,3:1). */
  --c-ticket-papel: #fbfaf7; --c-ticket-tinta: #1a1a1a; --c-ticket-gris: #5f5f5f; --c-ticket-raya: #c9c5bb;
  /* Texto de aviso sobre el fondo hueso: un paso más oscuro que el aviso de la marca para pasar AA. */
  --c-aviso-texto: color-mix(in srgb, var(--k-aviso) 78%, var(--k-tinta));
  /* Movimiento (v1.6, UI-8): nada de interfaz pasa de 400 ms. */
  --m-rapido: .16s; --m-medio: .28s; --m-lento: .38s; --m-salida: cubic-bezier(.2, .8, .2, 1);
}
/* La app siempre sale en claro, aunque el teléfono esté en modo oscuro (José, 06/11; ESQUEMA_APPS §2).
   «only» impide que Chrome y Samsung Internet la oscurezcan a la fuerza. */
:root { color-scheme: only light; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-fondo-app); color: var(--k-tinta); font: 15px/1.45 var(--k-letra); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1 { font-size: var(--t-5); font-weight: 700; margin: 0; letter-spacing: -.02em; }
h2 { font-size: var(--t-3); font-weight: 600; margin: 0 0 var(--k-esp-3); }
small { font-size: var(--t-1); }
.ico { width: 20px; height: 20px; flex: none; }
.suave { color: var(--k-suave); }
.chico { font-size: var(--t-2); margin: 0; }
.cifra { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rojo { color: var(--k-error); }
.rotulo { font-size: var(--t-2); color: var(--k-suave); margin-bottom: 2px; }
.cifra-grande { font-size: var(--t-6); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cifra-grande small, .cifra-banda small { font-size: var(--t-4); font-weight: 600; margin-right: 2px; opacity: .8; }
.cifra-banda small { font-size: var(--t-5); }
.cifra-media { font-size: var(--t-5); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vacio { color: var(--k-suave); text-align: center; padding: var(--k-esp-6) 0; margin: 0; font-size: var(--t-3); line-height: 2; }
:focus-visible { outline: 2px solid var(--c-comercio); outline-offset: 2px; }

/* ---------- Armazón ---------- */
/* dvh: la altura que de verdad se ve en el teléfono (sin contar las barras del navegador), para que la página no salte. */
.con-menu { min-height: 100vh; min-height: 100dvh; }
/* clip: la pantalla que entra de lado nunca ensancha la página (en el teléfono eso hacía saltar toda la UI y la barra). */
.lienzo { padding-bottom: 80px; overflow-x: clip; }
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--k-esp-3);
  padding: var(--k-esp-3) var(--k-esp-4); background: var(--c-fondo-app);
}
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marca b { font-size: var(--t-3); font-weight: 600; }
.logo-comercio {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--c-comercio); color: var(--c-sobre-comercio); font-weight: 700; font-size: var(--t-3);
}
.logo-comercio.en-banda { background: var(--c-sobre-comercio); color: var(--c-comercio); }
.logo-comercio.grande { width: 72px; height: 72px; font-size: var(--t-6); background: var(--c-sobre-comercio); color: var(--c-comercio); margin: 0 auto var(--k-esp-3); }
/* Franja de conexión: aparece solo si hay algo que decir y se va sola. */
#red {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: var(--k-esp-2);
  padding: 8px var(--k-esp-4) calc(8px + env(safe-area-inset-top) * 0); font-size: var(--t-2); font-weight: 600;
  background: color-mix(in srgb, var(--k-aviso) 14%, var(--k-papel)); color: var(--c-aviso-texto);
  transform: translateY(-100%); transition: transform .25s;
}
#red.visible { transform: none; }
#red .ico { width: 18px; height: 18px; }
.arranque { min-height: 100vh; display: grid; place-items: center; color: var(--c-comercio); }
.arranque .ico, .arranque img { width: 44px; height: 44px; animation: latir 1.2s ease-in-out infinite; }
.arranque img { width: 56px; height: 56px; border-radius: 14px; }
@keyframes latir { 50% { opacity: .35; } }
.logo-comercio.con-imagen { object-fit: contain; background: var(--k-papel); border-radius: 9px; padding: 4px; border: 1px solid var(--c-borde-bloque); }
.logo-comercio.grande.con-imagen { width: 92px; height: 92px; border-radius: 22px; padding: 12px; border: 0; }
.logo-comercio.en-hoja { width: 54px; height: 54px; border: 0; padding: 0; border-radius: 0; background: none; }
.saludo { font-size: var(--t-3); font-weight: 600; margin-bottom: var(--k-esp-1); }
.error-form { margin: 0; min-height: 0; color: var(--k-error); font-size: var(--t-3); }
.error-form:empty { display: none; }
.aviso-tasa { color: var(--c-aviso-texto) !important; max-width: 170px; }
.firma {
  margin: auto 0 var(--k-esp-6); padding-top: var(--k-esp-8); text-align: center; color: var(--k-suave);
  font-size: var(--t-1); font-weight: 600; letter-spacing: .16em;
}
.foto img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.foto-dia img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 12px; border: 1px solid var(--c-borde-bloque); }
.fila-agregar { display: flex; gap: var(--k-esp-2); margin-top: var(--k-esp-3); }
.fila-agregar .area { height: 46px; padding: 12px 12px; }
.selector-color {
  width: 52px; height: 44px; flex: none; padding: 4px; border: 1.5px solid var(--c-borde-bloque); border-radius: 12px;
  background: var(--k-papel); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.selector-color::-webkit-color-swatch-wrapper { padding: 0; }
.selector-color::-webkit-color-swatch { border: 0; border-radius: 8px; }
.selector-color::-moz-color-swatch { border: 0; border-radius: 8px; }
.selector-color:focus-visible { outline: 0; border-color: var(--c-comercio); box-shadow: 0 0 0 4px var(--c-comercio-suave); }
.selector-color:disabled { cursor: default; opacity: .6; }
.monto-caja input[inputmode="numeric"] { font-size: var(--t-3); }

.contenido { padding: var(--k-esp-2) var(--k-esp-4) var(--k-esp-4); max-width: 1080px; margin: 0 auto; display: grid; gap: var(--k-esp-3); }
.contenido.con-banda { padding-top: 0; }

.menu {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--k-papel); border-top: 1px solid var(--c-borde-bloque); padding-bottom: env(safe-area-inset-bottom);
  transform: translateZ(0);   /* capa propia: se queda quieta mientras la pantalla de arriba se anima */
}
.menu a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 12px; font-size: var(--t-1);
  color: var(--k-suave); position: relative; z-index: 1; transition: color .25s;
}
.menu a.activo { color: var(--c-comercio); font-weight: 600; }
.menu a .ico { width: 22px; height: 22px; transition: transform var(--m-medio) cubic-bezier(.34, 1.4, .5, 1); }
.menu a.activo .ico { transform: translateY(-1px) scale(1.1); }
/* Al tocar no queda marco verde; el marco de enfoque es solo para quien navega con teclado (José, 06/11). */
.menu a:focus { outline: none; }
.menu a:focus-visible { outline: 2px solid var(--c-comercio); outline-offset: -6px; border-radius: 14px; }
/* Indicador que se desliza bajo el ícono de la pestaña activa, con un pequeño rebote al llegar. */
.menu { --i: 0; }
.menu-indicador {
  position: absolute; top: 7px; left: 0; width: 25%; height: 32px; display: flex; justify-content: center;
  transform: translateX(calc(var(--i) * 100%)); transition: transform .32s cubic-bezier(.34, 1.25, .5, 1), opacity .2s;
  pointer-events: none;
}
.menu-indicador::before { content: ""; width: 60px; height: 100%; border-radius: 999px; background: var(--c-comercio-suave); }
.menu.sin-anim .menu-indicador, .menu.sin-anim a, .menu.sin-anim .ico { transition: none; }
.menu.sin-pestana .menu-indicador { opacity: 0; }

/* La pantalla nueva entra desde el lado hacia donde se movió el indicador. */
@keyframes entra-der { from { opacity: 0; transform: translateX(28px); } }
@keyframes entra-izq { from { opacity: 0; transform: translateX(-28px); } }
.contenido.entra-der { animation: entra-der var(--m-medio) var(--m-salida) both; }
.contenido.entra-izq { animation: entra-izq var(--m-medio) var(--m-salida) both; }
@media (prefers-reduced-motion: reduce) {
  .menu-indicador, .menu a .ico { transition: none; }
  .hoja, #capa.cerrando .hoja, .velo, #capa.cerrando .velo { animation-duration: .01s; }
  .contenido.entra-der, .contenido.entra-izq { animation: none; }
}
.menu-marca { display: none; }

/* ---------- Componentes ---------- */
.bloque {
  background: var(--k-papel); border: 1px solid var(--c-borde-bloque); border-radius: var(--c-radio-bloque);
  padding: var(--k-esp-4); min-width: 0;
}
.cabeza-bloque { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-esp-3); margin-bottom: var(--k-esp-2); }
.cabeza-bloque h2 { margin: 0; }
.subtotal { font-size: var(--t-3); color: var(--c-comercio); }
.cabeza-pagina { display: flex; align-items: center; justify-content: space-between; gap: var(--k-esp-3); min-height: 44px; }
.cabeza-pagina h1 { flex: 1; }
.cabeza-pagina .boton-icono + h1 { font-size: var(--t-4); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-esp-2);
  height: 46px; padding: 0 var(--k-esp-4); border-radius: 12px; border: 1px solid transparent;
  font: 600 var(--t-3) var(--k-letra); cursor: pointer; white-space: nowrap; transition: transform .1s, background .15s;
}
.boton:active { transform: scale(.98); }
.boton.primario { background: var(--c-comercio); color: var(--c-sobre-comercio); }
.boton.secundario { background: var(--k-papel); color: var(--k-tinta); border-color: var(--c-borde-bloque); }
.boton.invertido { background: var(--c-sobre-comercio); color: var(--c-comercio); margin-top: var(--k-esp-4); }
.boton.texto { background: none; color: var(--c-comercio); padding: 0; height: 44px; justify-self: start; }
.boton.grande { height: 54px; font-size: var(--t-3); }
.boton.ancho { width: 100%; }
.boton-icono {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px;
  border: 0; padding: 0; background: none; color: var(--k-tinta); cursor: pointer;
}
.boton-icono.chico { width: 44px; height: 44px; color: var(--k-suave); }
.boton-icono.chico .ico { width: 16px; height: 16px; }
.enlace { display: inline-flex; align-items: center; min-height: 24px; gap: 2px; color: var(--c-comercio); font-size: var(--t-3); font-weight: 600; white-space: nowrap; }
.enlace .ico { width: 16px; height: 16px; }
@media (max-width: 839px) { .enlace { min-height: 44px; } }
.etiqueta { font-size: var(--t-1); font-weight: 600; color: var(--c-comercio); background: var(--c-comercio-suave); border-radius: var(--k-radio-chip); padding: 2px 8px; }

.arqueo { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-2); font-weight: 600; }
.arqueo.ok { color: var(--k-ok); }
.arqueo.sobra { color: var(--c-aviso-texto); }
.arqueo.falta { color: var(--k-error); }
.arqueo.sin { color: var(--k-suave); }
.cambio { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-2); font-weight: 600; white-space: nowrap; }
.cambio .ico { width: 16px; height: 16px; }
.cambio.sube { color: var(--k-ok); }
.cambio.baja { color: var(--k-error); }

/* Sello del día (modelo A): tinta del estado, girado, como un sello de goma. */
.sello {
  display: inline-grid; justify-items: center; flex: none; padding: 4px 8px; border: 1.8px solid currentColor; border-radius: 6px;
  transform: rotate(-6deg); font-family: var(--c-mono); line-height: 1.15; min-width: 74px;
}
.sello b { font-size: var(--t-1); letter-spacing: .1em; text-transform: uppercase; }
.sello small { font-size: var(--t-1); max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sello.ok { color: var(--k-ok); }
.sello.falta { color: var(--k-error); }
.sello.sobra { color: var(--c-aviso-texto); }
.sello.sin { color: var(--k-suave); }
.sello.revisar, .arqueo.revisar, .t-l.revisar span:last-child, .hoja-contador .estado.revisar td:last-child { color: var(--c-aviso-texto); }
.chip-banda.revisar { background: var(--c-sobre-comercio); color: var(--c-aviso-texto); }  /* no se contó la gaveta: sin arqueo */
/* Días a medias en Inicio: aviso sobrio, una fila por día, se toca para seguir. */
.bloque-medias { padding-top: 4px; padding-bottom: 4px; border-color: color-mix(in srgb, var(--k-aviso) 35%, var(--c-borde-bloque)); }
.fila-medias { display: flex; align-items: center; gap: var(--k-esp-3); padding: 12px 0; color: var(--k-tinta); text-decoration: none; }
.fila-medias + .fila-medias { border-top: 1px solid var(--c-borde-bloque); }
.fila-medias > .ico { color: var(--c-aviso-texto); flex: none; }
.fila-medias > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.fila-medias small { color: var(--k-suave); font-size: var(--t-2); }
.fila-medias .enlace { flex: none; }
/* Tasa BCV en Reportes: la vigente arriba y cada cambio en una mini tabla con scroll. La variación va en neutro:
   que suba la tasa no es «bueno» ni «malo» para el comercio, es un dato. */
.variacion-periodo { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.variacion-periodo .ico { width: 15px; height: 15px; }
.tasa-vigente { display: grid; gap: 2px; }
.mini-tabla { max-height: 288px; overflow-y: auto; margin: 0 calc(-1 * var(--k-esp-4)); padding: 0 var(--k-esp-4); }
.mini-tabla thead th { position: sticky; top: 0; background: var(--k-papel); text-align: left; font-size: var(--t-1); font-weight: 600;
  color: var(--k-suave); padding: 8px 0; border-bottom: 1px solid var(--c-borde-bloque); }
.mini-tabla thead th:not(:first-child) { text-align: right; }
.mini-tabla td small { display: block; color: var(--k-suave); font-size: var(--t-1); }
.mini-tabla tr.vigente td:first-child { font-weight: 600; color: var(--c-comercio); }
.mini-tabla .variacion { color: var(--k-suave); }
button.enlace { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.sello.grande { padding: 8px 12px; border-width: 2.5px; border-radius: 8px; min-width: 104px; }
.sello.grande b { font-size: var(--t-3); }
.sello.grande small { font-size: var(--t-1); max-width: 130px; }
.sello.cae { animation: sellar var(--m-lento) cubic-bezier(.2, 1.4, .4, 1) .1s both; }
@keyframes sellar { from { transform: rotate(-18deg) scale(1.8); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }

/* ---------- Inicio: banda del comercio ---------- */
.banda {
  --radio-banda: 24px;
  position: relative; color: var(--c-sobre-comercio); margin: 0 calc(-1 * var(--k-esp-4));
  padding: var(--k-esp-3) var(--k-esp-4) var(--k-esp-6); border-radius: 0 0 var(--radio-banda) var(--radio-banda);
}
/* El fondo verde va aparte para poder «descolgarse» del borde con sus esquinas redondeadas (José, 06/11). */
.banda-fondo { position: absolute; inset: 0; background: var(--c-comercio); border-radius: inherit; z-index: 0; }
.banda > :not(.banda-fondo) { position: relative; z-index: 1; }
.banda-barra { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--k-esp-6); }
.banda-barra small { opacity: .8; font-size: var(--t-2); }
.rotulo-banda { font-size: var(--t-3); opacity: .85; }
.cifra-banda { font-size: var(--t-7); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; margin: 2px 0; }
.cifra-banda.texto { font-size: var(--t-6); }
.sub-banda { font-size: var(--t-3); opacity: .85; }
.chips-banda { display: flex; flex-wrap: wrap; gap: var(--k-esp-2); margin-top: var(--k-esp-4); }
.chip-banda {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-sobre-comercio) 16%, transparent); font-size: var(--t-2); font-weight: 600; color: inherit;
}
.chip-banda .ico { width: 16px; height: 16px; }
.chip-banda.falta, .chip-banda.sobra { background: var(--c-sobre-comercio); color: var(--k-error); }
.chip-banda.sobra { color: var(--c-aviso-texto); }
.rejilla-inicio { display: grid; gap: var(--k-esp-3); margin-top: var(--k-esp-1); }

/* Barras (una serie, color del comercio; hoy más oscuro; al tocar muestra su valor). */
.barras { display: flex; align-items: flex-end; gap: 0; height: 132px; margin-top: var(--k-esp-3); }
.barras.largas { gap: 4px; height: 150px; }
/* Cada día de la semana es un botón de 44 px de ancho: la barra ocupa el borde del bloque. */
.bloque-semana .barras { margin-left: calc(-1 * var(--k-esp-2)); margin-right: calc(-1 * var(--k-esp-2)); }
.barra-dia {
  flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.barra-dia .valor { font-size: var(--t-1); color: var(--k-suave); height: 13px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .15s; }
.barras.largas .barra-dia .valor { display: none; }
.barra-dia .letra { font-size: var(--t-1); color: var(--k-suave); }
.barra-dia.hoy .letra { color: var(--c-comercio); font-weight: 700; }
.pila { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pila i { display: block; width: 100%; max-width: 30px; border-radius: 6px; background: var(--c-comercio-claro); transition: background .15s; }
.barras.largas .pila i { border-radius: 4px; background: var(--c-comercio); opacity: .85; }
.barra-dia.vacia i { background: var(--c-borde-bloque); }

/* Tira de los últimos días con su sello. */
.tira { display: flex; gap: var(--k-esp-2); overflow-x: auto; margin: 0 calc(-1 * var(--k-esp-4)); padding: 4px var(--k-esp-4) 8px; scrollbar-width: none; }
.tira::-webkit-scrollbar { display: none; }
.tira-dia {
  flex: none; width: 92px; display: grid; justify-items: center; gap: 8px; padding: 12px 8px 12px;
  border: 1px solid var(--c-borde-bloque); border-radius: 12px; background: var(--c-fondo-app);
}
.tira-dia small { color: var(--k-suave); }
.tira-dia b { font-size: var(--t-4); }
.tira-dia.sin-cierre { border-style: dashed; background: transparent; color: var(--k-suave); }
.tira-dia.sin-cierre b { color: var(--k-suave); }
.etiqueta-vacia { font-size: var(--t-1); font-weight: 600; color: var(--k-suave); }
.riel.gasto i { background: color-mix(in srgb, var(--c-comercio) 55%, var(--k-suave)); }
.tira-dia .sello { min-width: 0; padding: 2px 4px; }
.tira-dia .sello b { font-size: var(--t-1); letter-spacing: .06em; }
.tira-dia .sello small { display: none; }  /* en la tira, solo la palabra; el monto está al abrir el día (UI-7) */

.barra-h { margin-bottom: var(--k-esp-3); }
.barra-h-txt { display: flex; justify-content: space-between; font-size: var(--t-3); margin-bottom: 4px; }
.barra-h-txt small { color: var(--k-suave); margin-left: 8px; }
.riel { height: 8px; background: var(--c-comercio-suave); border-radius: 4px; }
.riel i { display: block; height: 100%; background: var(--c-comercio); border-radius: 4px; }

/* ---------- Listas (historial) ---------- */
.lista-bloque { padding: 0; }
.fila {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--k-esp-4);
  padding: 12px var(--k-esp-4); border-top: 1px solid var(--c-borde-bloque); min-height: 62px;
}
.fila-dia { display: grid; }
.fila-dia b { font-weight: 600; }
.fila-dia b::first-letter { text-transform: uppercase; }
.fila-dia small, .fila-monto small { color: var(--k-suave); }
.fila-monto { display: grid; justify-items: end; }
.fila-monto b { font-weight: 600; }
.separador {
  display: flex; justify-content: space-between; padding: var(--k-esp-4) var(--k-esp-4) var(--k-esp-2);
  font-size: var(--t-2); font-weight: 600; color: var(--k-suave); background: var(--c-fondo-app);
}
/* Lista a sangre (José, 06/11): en teléfono y tablet de borde a borde, sin bordes laterales ni radios. */
.lista-bloque.a-sangre { margin: 0 calc(-1 * var(--k-esp-4)); border-left: 0; border-right: 0; border-radius: 0; }
.lista-bloque.a-sangre .separador:first-child { padding-top: var(--k-esp-3); }

/* Historial por mes (v1.6, UI-4): mes y filtro en dos píldoras; en pantallas grandes, lista y ficha lado a lado. */
.filtros-historial { display: flex; flex-wrap: wrap; gap: var(--k-esp-2); }
.historial-dos { display: grid; gap: var(--k-esp-4); align-items: start; }
.fila.elegida { background: var(--c-comercio-suave); box-shadow: inset 3px 0 0 var(--c-comercio); }
.panel-dia { display: grid; gap: var(--k-esp-3); min-width: 0; }
.panel-dia[hidden] { display: none; }
.panel-dia .cabeza-pagina .boton-icono { display: none; }
@media (min-width: 1200px) {
  .historial-dos { grid-template-columns: minmax(360px, 440px) 1fr; }
  .panel-dia { position: sticky; top: var(--k-esp-6); max-height: calc(100vh - var(--k-esp-12)); overflow-y: auto; }
}

/* ---------- Cierre ---------- */
.completa { min-height: 100vh; }
.pantalla-cierre { padding-bottom: 104px; }
.barra-cierre { padding-left: var(--k-esp-2); }
.barra-cierre .titulo { flex: 1; min-width: 0; }
.titulo b { display: block; font-size: var(--t-3); line-height: 1.2; }
.titulo small { display: block; color: var(--k-suave); }
.contenido.cierre { max-width: 560px; }
.tasa { display: flex; justify-content: space-between; align-items: center; padding-block: 12px; }

.monto { display: flex; justify-content: space-between; align-items: center; gap: var(--k-esp-3); padding: 8px 0; }
.monto + .monto { border-top: 1px solid var(--c-borde-bloque); }
.monto-nombre { font-weight: 600; display: grid; }
.monto-nombre small { color: var(--k-suave); font-weight: 400; font-variant-numeric: tabular-nums; }
.monto-caja {
  display: flex; align-items: center; width: 158px; height: 50px; flex: none; border: 1.5px solid var(--c-borde-bloque);
  border-radius: 12px; background: var(--c-fondo-app); padding: 0 var(--k-esp-3); gap: var(--k-esp-2); transition: border-color .15s, background .15s;
}
.monto-caja.corta { width: 132px; }
.monto-caja:focus-within { border-color: var(--c-comercio); background: var(--k-papel); box-shadow: 0 0 0 4px var(--c-comercio-suave); }
.monto-caja.error { border-color: var(--k-error); }
.monto-caja i { font-style: normal; font-size: var(--t-2); font-weight: 600; color: var(--k-suave); }
.monto-caja input {
  flex: 1; min-width: 0; align-self: stretch; border: 0; outline: 0; background: none; color: var(--k-tinta);
  font: 600 var(--t-4) var(--k-letra); text-align: right; font-variant-numeric: tabular-nums;
}
.monto.grande .monto-caja { width: 190px; height: 58px; }
.monto.grande input { font-size: var(--t-5); }

.salida { display: flex; align-items: center; gap: var(--k-esp-2); padding: 8px 0; border-bottom: 1px solid var(--c-borde-bloque); }
.salida > div { flex: 1; display: grid; }
.salida b { font-weight: 600; }
.salida small { color: var(--k-suave); }
.salida .cifra { font-weight: 600; }
.botones-fila { display: flex; gap: var(--k-esp-2); margin-top: var(--k-esp-3); flex-wrap: wrap; }
.botones-fila .boton { flex: 1; }
.contado + .contado { border-top: 1px solid var(--c-borde-bloque); }
.fondo-linea { display: flex; align-items: center; gap: var(--k-esp-3); padding: 4px 0 12px; border-bottom: 1px solid var(--c-borde-bloque); }
.fondo-linea .monto-nombre { flex: 1; }
.fondo-linea .boton.texto { height: 44px; }
#fondo-campos { border-bottom: 1px solid var(--c-borde-bloque); }
.monto-nombre small.ayuda { color: var(--k-suave); }
.monto-nombre small:empty { display: none; }
.boton.texto.rojo { color: var(--k-error); justify-self: center; margin-top: var(--k-esp-2); }
.boton.primario.peligro { background: var(--k-error); }
.contado-estado { text-align: right; }
.contado-estado:not(:empty) { padding-bottom: 8px; margin-top: -2px; }

.foto {
  width: 100%; display: flex; align-items: center; gap: var(--k-esp-3); padding: var(--k-esp-4);
  border: 1.5px dashed var(--c-borde-bloque); border-radius: 12px; background: var(--c-fondo-app);
  color: var(--k-suave); font: 600 var(--t-3) var(--k-letra); cursor: pointer; margin-bottom: var(--k-esp-3);
}
.foto.lista { border-style: solid; color: var(--k-ok); background: var(--k-papel); }
.area, .campo input, .campo textarea {
  width: 100%; border: 1.5px solid var(--c-borde-bloque); border-radius: 12px; padding: 12px;
  font: 400 var(--t-3) var(--k-letra); color: var(--k-tinta); background: var(--c-fondo-app); resize: vertical;
}
.area:focus, .campo input:focus, .campo textarea:focus { outline: 0; border-color: var(--c-comercio); background: var(--k-papel); box-shadow: 0 0 0 4px var(--c-comercio-suave); }
.campo { display: grid; gap: 8px; font-size: var(--t-2); font-weight: 600; color: var(--k-suave); }

.pie-cierre {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: var(--k-esp-4); padding: var(--k-esp-3) var(--k-esp-4) calc(var(--k-esp-3) + env(safe-area-inset-bottom));
  background: var(--k-papel); border-top: 1px solid var(--c-borde-bloque); box-shadow: var(--c-sombra-2);
}
.pie-cierre > div { display: grid; }
.pie-cierre small { color: var(--k-suave); font-size: var(--t-1); }
.pie-cierre b { font-size: var(--t-5); font-weight: 700; line-height: 1.15; }
.pie-cierre small.arqueo { font-size: var(--t-1); }
.pie-cierre small.arqueo.ok { color: var(--k-ok); }
.pie-cierre small.arqueo.falta { color: var(--k-error); }
.pie-cierre small.arqueo.sobra { color: var(--c-aviso-texto); }
.pie-cierre .boton { min-width: 148px; }

/* Resumen (confirmación y detalle del día) */
.resumen { display: grid; gap: var(--k-esp-3); }
.resumen-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--k-esp-3); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-3); }
.tabla td { padding: 8px 0; border-top: 1px solid var(--c-borde-bloque); vertical-align: top; }
.tabla td small { display: block; color: var(--k-suave); }
.tabla td.cifra { text-align: right; font-weight: 600; }
.tabla tr.grupo td { border-top: 0; padding: var(--k-esp-4) 0 4px; font-size: var(--t-2); font-weight: 600; color: var(--k-suave); }
.tabla tr.grupo:first-child td { padding-top: 0; }
.tabla tr.total td { font-weight: 700; border-top: 1.5px solid var(--k-tinta); }
.nota { display: flex; gap: var(--k-esp-2); margin: 0; padding: var(--k-esp-3); background: var(--c-fondo-app); border-radius: 12px; font-size: var(--t-3); }
.nota .ico { color: var(--k-suave); width: 18px; height: 18px; margin-top: 1px; }
.alerta { display: flex; gap: var(--k-esp-2); margin: 0; color: var(--c-aviso-texto); font-size: var(--t-3); }

/* Hoja inferior */
#capa { display: none; }
#capa.abierta { display: block; }
.velo { position: fixed; inset: 0; background: var(--c-velo); z-index: 40; animation: aparecer .15s ease-out; }
.hoja {
  /* Nunca debajo de la franja de conexión: el título de la hoja siempre se ve (testeo 07/11, TST-2). */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: calc(100dvh - var(--alto-red, 0px) - var(--k-esp-4)); overflow-y: auto;
  background: var(--k-papel); border-radius: 22px 22px 0 0; padding: var(--k-esp-3) var(--k-esp-4) calc(var(--k-esp-6) + env(safe-area-inset-bottom));
  display: grid; gap: var(--k-esp-3); animation: hoja-sube .3s cubic-bezier(.2, .9, .25, 1);
}
/* La hoja sube desde abajo al abrir y baja al cerrar, rápida pero visible (José, 06/11). */
@keyframes hoja-sube { from { transform: translateY(100%); } }
@keyframes hoja-baja { to { transform: translateY(100%); } }
@keyframes velo-sale { to { opacity: 0; } }
#capa.cerrando .hoja { animation: hoja-baja .21s cubic-bezier(.4, 0, 1, 1) forwards; }
#capa.cerrando .velo { animation: velo-sale .21s ease-in forwards; }
.hoja::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--c-borde-bloque); justify-self: center; }
.hoja-cabeza { display: flex; justify-content: space-between; align-items: center; }
.hoja-cabeza h2 { margin: 0; font-size: var(--t-4); }
.opciones { display: flex; flex-wrap: wrap; gap: var(--k-esp-2); }
.opcion {
  height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--c-borde-bloque);
  background: var(--k-papel); color: var(--k-tinta); font: 600 var(--t-3) var(--k-letra); cursor: pointer;
}
.opcion.activa { border-color: var(--c-comercio); background: var(--c-comercio-suave); color: var(--c-comercio); }
/* Turnos del día (v1.6): elegir el turno al cerrar; el que ya se cerró lleva su visto. */
.turnos-cierre { margin-bottom: var(--k-esp-3); }
.turnos-cierre .opcion { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 44px; }
.turnos-cierre .opcion.hecho:not(.activa) { color: var(--k-ok); }
.turnos-cierre .opcion svg { width: 16px; height: 16px; }
.acciones-fila { display: inline-flex; align-items: center; gap: var(--k-esp-2); }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
@keyframes aparecer { from { opacity: 0; } }

/* Ticket del cierre (modelo B). */
.hoja-ticket { background: var(--c-fondo-app); }
.logro { display: grid; justify-items: center; gap: 4px; text-align: center; padding: var(--k-esp-2) 0; }
.logro b { font-size: var(--t-4); margin-top: var(--k-esp-2); }
.logro .suave { font-size: var(--t-3); }
.ticket {
  background: var(--c-ticket-papel); color: var(--c-ticket-tinta); padding: 20px 20px 32px; font-family: var(--c-mono); font-size: var(--t-2);
  max-width: 360px; width: 100%; justify-self: center; filter: drop-shadow(0 6px 16px rgba(17, 17, 19, .1));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.t-comercio { text-align: center; font: 600 var(--t-3) var(--k-letra); }
.t-cab, .t-sub, .t-pie { text-align: center; color: var(--c-ticket-gris); font-size: var(--t-1); letter-spacing: .06em; }
.t-total { text-align: center; font-size: var(--t-6); font-weight: 700; letter-spacing: -.03em; margin-top: 12px; }
.t-sub { margin-bottom: 4px; letter-spacing: 0; font-size: var(--t-1); }
.ticket hr { border: 0; border-top: 1.5px dashed var(--c-ticket-raya); margin: 12px 0; }
.t-l { display: flex; justify-content: space-between; gap: var(--k-esp-3); padding: 2px 0; }
.t-l.fuerte { font-weight: 700; }
.t-l.ok span:last-child { color: var(--k-ok); }
.t-l.falta span:last-child { color: var(--k-error); }
.t-l.sobra span:last-child { color: var(--c-aviso-texto); }
.t-pie { margin-top: 12px; color: var(--c-ticket-gris); }

.aviso-flotante {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 8px;
  background: var(--k-tinta); color: var(--k-papel); padding: 12px 16px; border-radius: 12px; font-size: var(--t-3);
  box-shadow: var(--c-sombra-3); transition: opacity .3s; width: max-content; max-width: calc(100vw - 32px);
}
.aviso-flotante.fuera { opacity: 0; }

/* ---------- Reportes ---------- */
.selector { position: relative; display: inline-flex; align-items: center; }
.selector select {
  appearance: none; height: 44px; padding: 0 36px 0 16px; border-radius: 999px; border: 1.5px solid var(--c-borde-bloque);
  background: var(--k-papel); color: var(--k-tinta); font: 600 var(--t-3) var(--k-letra); cursor: pointer;
}
.selector .ico { position: absolute; right: 10px; width: 16px; height: 16px; pointer-events: none; color: var(--k-suave); }
.rejilla-reportes { display: grid; gap: var(--k-esp-3); }
.heroe-sub { display: flex; flex-wrap: wrap; gap: 4px var(--k-esp-3); align-items: center; font-size: var(--t-3); margin-top: 2px; }
.cifras-linea { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--k-esp-4) 0 var(--k-esp-2); border-top: 1px solid var(--c-borde-bloque); }
.cifras-linea > div { display: grid; padding: var(--k-esp-3) var(--k-esp-2) 0 0; min-width: 0; }
.cifras-linea > div + div { padding-left: var(--k-esp-3); border-left: 1px solid var(--c-borde-bloque); }
.cifras-linea small { color: var(--k-suave); }
.cifras-linea b { font-size: var(--t-3); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.contador-bloque { display: flex; align-items: center; gap: var(--k-esp-3); background: var(--c-comercio-suave); border-color: transparent; }
.contador-bloque > div { flex: 1; display: grid; }
.contador-bloque small { color: var(--k-suave); }
.contador-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--k-papel); color: var(--c-comercio); flex: none; }

/* ---------- Hoja para el contador (se imprime) ---------- */
.pantalla-contador { min-height: 100vh; }
.dias-contador { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--k-esp-2) var(--k-esp-2); }
.dias-contador b::first-letter { text-transform: uppercase; }
.desplazar { overflow-x: auto; padding: 0 var(--k-esp-4) var(--k-esp-6); }
.hoja-contador {
  background: var(--k-papel); color: var(--k-tinta); width: 900px; margin: 0 auto; padding: 28px 32px; font-size: 11.5px;
  border: 1px solid var(--c-borde-bloque); border-radius: 6px;
}
.hoja-contador .cabeza-hoja { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hoja-contador h1 { font-size: 16px; text-transform: uppercase; color: var(--c-comercio); letter-spacing: .02em; padding-bottom: 4px; border-bottom: 2px solid var(--c-detalle, var(--c-comercio)); display: inline-block; }
.hoja-contador .sub { margin: 2px 0 14px; color: var(--k-suave); font-size: 10.5px; }
/* Lo que no sale de una máquina fiscal lo dice arriba y en el pie (REPORTES, REP-1). */
.hoja-contador .no-fiscal { display: inline-block; margin-left: 10px; padding: 1px 6px; border: 1px solid var(--k-suave); border-radius: var(--k-radio-chip); color: var(--k-suave); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.hoja-contador .campos { display: flex; justify-content: flex-end; gap: 28px; margin-bottom: 14px; }
.hoja-contador h2 { font-size: 11px; margin: 16px 0 0; padding: 4px 6px; background: var(--c-comercio-suave); color: var(--c-comercio); text-transform: uppercase; }
.hoja-contador table { width: 100%; border-collapse: collapse; }
.hoja-contador table.angosta { width: 62%; }
.hoja-contador th { background: var(--c-comercio); color: var(--c-sobre-comercio); font-weight: 600; font-size: 10.5px; padding: 4px 6px; text-align: center; }
.hoja-contador th:first-child { text-align: left; }
.hoja-contador td { border: 1px solid color-mix(in srgb, var(--c-comercio) 22%, var(--k-borde)); padding: 3px 6px; }
.hoja-contador td:first-child { width: 46%; }
.hoja-contador td.cifra { text-align: right; }
.hoja-contador .total td { font-weight: 700; border-top: 1.5px solid var(--k-tinta); }
.hoja-contador .sangria { padding-left: 20px; }
.hoja-contador .estado td:last-child { font-weight: 700; }
.hoja-contador .estado.ok td:last-child { color: var(--k-ok); }
.hoja-contador .estado.falta td:last-child { color: var(--k-error); }
.hoja-contador .estado.sobra td:last-child { color: var(--c-aviso-texto); }
.hoja-contador .estado.sin td:last-child { color: var(--k-suave); }
.hoja-contador .nota-hoja { margin: 4px 0 0; color: var(--k-suave); font-style: italic; }
.hoja-contador .pie-hoja { margin: 18px 0 0; color: var(--k-suave); font-size: 10px; text-align: right; }
/* En el teléfono la hoja se ajusta al ancho (sin desplazarse de lado, UI-13); impresa sigue en A4 horizontal. */
@media (max-width: 939px) {
  .desplazar { padding: 0 var(--k-esp-2) var(--k-esp-6); overflow-x: visible; }
  .hoja-contador { width: auto; padding: var(--k-esp-4) var(--k-esp-3); font-size: 10px; }
  .hoja-contador .cabeza-hoja, .hoja-contador .campos { flex-wrap: wrap; gap: var(--k-esp-2) var(--k-esp-4); justify-content: flex-start; }
  .hoja-contador table.angosta { width: 100%; }
  .hoja-contador th, .hoja-contador td { padding: 2px 4px; }
  .hoja-contador td:first-child { width: auto; }
  .hoja-contador td.cifra { white-space: nowrap; }
}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: var(--k-papel); }
  .no-imprimir, .menu, #capa { display: none !important; }
  .desplazar { padding: 0; overflow: visible; }
  .hoja-contador { border: 0; width: auto; padding: 0; }
}

/* ---------- Ajustes ---------- */
.rejilla-ajustes { display: grid; gap: var(--k-esp-3); }
.fila-ajuste { display: flex; justify-content: space-between; align-items: center; gap: var(--k-esp-3); padding: 12px 0; border-top: 1px solid var(--c-borde-bloque); font-size: var(--t-3); min-height: 52px; }
.fila-ajuste > span:first-child { display: grid; }
.fila-ajuste .monto-caja { height: 48px; }
.fila-ajuste .monto-caja input { font-size: var(--t-3); }
.fila-ajuste small { color: var(--k-suave); }
.fila-ajuste b { font-weight: 600; text-align: right; }
.fila-ajuste.apagada > span:first-child { color: var(--k-suave); }
.logo-ajuste { display: flex; align-items: center; gap: var(--k-esp-3); }
.muestra-color { width: 32px; height: 32px; border-radius: 10px; background: var(--c-comercio); }
.segmento { display: flex; background: var(--c-fondo-app); border-radius: 12px; padding: 0; }
.segmento button { border: 0; background: none; padding: 0 var(--k-esp-3); min-height: 44px; border-radius: 12px; font: 600 var(--t-2) var(--k-letra); color: var(--k-suave); cursor: pointer; }
.segmento button.activo { background: var(--k-papel); color: var(--c-comercio); box-shadow: var(--c-sombra-1); }
.interruptor { border: 0; padding: 0; width: 52px; height: 44px; background: none; position: relative; cursor: pointer; flex: none; }
.interruptor::before { content: ""; position: absolute; left: 4px; top: 9px; width: 44px; height: 26px; border-radius: 999px; background: var(--c-borde-bloque); transition: background var(--m-rapido); }
.interruptor::after { content: ""; position: absolute; top: 12px; left: 7px; width: 20px; height: 20px; border-radius: 50%; background: var(--k-papel); box-shadow: var(--c-sombra-1); transition: transform var(--m-rapido); }
.interruptor.on::before { background: var(--c-comercio); }
.interruptor.on::after { transform: translateX(18px); }
.interruptor:disabled { cursor: default; opacity: .6; }
.vista-mensaje { margin-top: var(--k-esp-3); padding: var(--k-esp-3); background: var(--c-fondo-app); border-radius: 12px; font-size: var(--t-2); line-height: 1.6; }
.vista-mensaje b { display: block; }

/* ---------- Entrar ---------- */
.entrar { min-height: 100vh; display: flex; flex-direction: column; }
[data-hueco-instalar] { display: grid; }
[data-hueco-instalar][hidden] { display: none; }
.pasos { margin: 0; padding-left: 24px; display: grid; gap: var(--k-esp-2); font-size: var(--t-3); line-height: 1.5; }
.entrar-banda {
  background: var(--c-comercio); color: var(--c-sobre-comercio); text-align: center;
  padding: 72px var(--k-esp-4) 56px; border-radius: 0 0 32px 32px;
}
.entrar-banda h1 { font-size: var(--t-6); }
.logo-tarjeta { display: inline-block; background: var(--k-papel); border-radius: 22px; padding: 20px 28px; margin-bottom: var(--k-esp-4); box-shadow: var(--c-sombra-3); }
.logo-tarjeta img { display: block; height: 76px; max-width: 230px; object-fit: contain; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.entrar-banda.corta { padding-top: 48px; }
.entrar-banda p { margin: 4px 0 0; opacity: .85; }
.formulario { display: grid; gap: var(--k-esp-4); width: calc(100% - 32px); max-width: 380px; margin: calc(-1 * var(--k-esp-6)) auto 0; padding: var(--k-esp-6) var(--k-esp-4); background: var(--k-papel); border-radius: 20px; box-shadow: var(--c-sombra-3); }
.con-boton { position: relative; }
.con-boton .boton-icono { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--k-suave); }

/* ---------- Movimiento (José, 06/11: «le falta user feeling, todo es estático») ----------
   Rápido, con propósito y nunca bloquea: se lee mientras aparece. Se apaga con «reducir movimiento». */
.anim .aparece { animation: aparece var(--m-medio) var(--m-salida) both; animation-delay: calc(var(--n, 0) * 15ms); }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } }
.anim .pila i { transform-origin: bottom; animation: crecer .3s cubic-bezier(.25, 1.15, .4, 1) both; animation-delay: calc(60ms + var(--n, 0) * 15ms); }
@keyframes crecer { from { transform: scaleY(0); } }
.anim .riel i { transform-origin: left; animation: llenar .3s var(--m-salida) both; animation-delay: calc(80ms + var(--n, 0) * 20ms); }
@keyframes llenar { from { transform: scaleX(0); } }
/* La banda se descuelga del borde de arriba: el fondo verde crece hacia abajo con sus esquinas redondeadas
   (con un leve rebote al llegar) y el texto aparece cuando ya bajó. En escritorio, los hombros del notch quedan
   pegados al borde desde el inicio. */
.anim .banda.aparece { animation: none; }
.anim .banda-fondo { animation: banda-cae var(--m-lento) cubic-bezier(.3, 1.2, .45, 1) both; }
@keyframes banda-cae {
  from { clip-path: inset(0 0 100% 0 round 0 0 var(--radio-banda) var(--radio-banda)); }
  to { clip-path: inset(0 0 0 0 round 0 0 var(--radio-banda) var(--radio-banda)); }
}
.anim .banda .banda-barra, .anim .banda .rotulo-banda, .anim .banda .saludo, .anim .banda .cifra-banda, .anim .banda .sub-banda, .anim .banda .boton.invertido {
  animation: aparece var(--m-medio) var(--m-salida) both; animation-delay: 120ms; }
.anim .chip-banda { animation: aparece var(--m-medio) var(--m-salida) both; animation-delay: 140ms; }
.anim .chip-banda:nth-child(2) { animation-delay: 170ms; }
.anim .chip-banda:nth-child(3) { animation-delay: 200ms; }
.anim .tira-dia { animation: aparece var(--m-medio) var(--m-salida) both; animation-delay: calc(100ms + var(--n, 0) * 20ms); }
.anim .tira-dia .sello, .anim .fila .sello { animation: sello-entra .3s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(160ms + var(--n, 0) * 15ms); }
@keyframes sello-entra { from { opacity: 0; transform: rotate(-16deg) scale(1.45); } }
.anim .fila-ajuste { animation: aparece var(--m-medio) var(--m-salida) both; animation-delay: calc(var(--n, 0) * 10ms); }
.cifra-media small { font-size: var(--t-1); font-weight: 600; margin-right: 2px; opacity: .8; }

/* El total del cierre da un pequeño salto cuando cambia; el estado de la caja cambia de color con suavidad. */
.pulso { display: inline-block; animation: pulso .32s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pulso { 40% { transform: scale(1.07); } }
.pie-cierre small.arqueo { transition: color .25s; }
.monto-nombre small:not(.ayuda) { animation: aparece .2s ease-out; }

/* Avisos: bajan desde arriba con rebote y se van subiendo. */
.aviso-flotante.entra { animation: aviso-entra var(--m-medio) cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, -18px) scale(.94); } }
.aviso-flotante.fuera { opacity: 0; transform: translate(-50%, -14px); transition: opacity .3s, transform .3s; }

/* Respuesta al tocar (teléfono) y al pasar el mouse (computadora). */
.fila, .tira-dia, .opcion, .barra-dia, .enlace, .menu a { transition: background .18s, transform .18s, box-shadow .18s, color .2s; }
.tira-dia:active, .fila:active, .opcion:active { transform: scale(.97); }
.opcion.activa { animation: pulso .28s cubic-bezier(.3, 1.5, .5, 1); }
.interruptor:active::after { transform: scale(1.1); }
.interruptor.on:active::after { transform: translateX(18px) scale(1.1); }
.enlace .ico { transition: transform .2s; }
@media (hover: hover) {
  .tira-dia:hover { transform: translateY(-3px); box-shadow: var(--c-sombra-2); background: var(--k-papel); }
  .fila:hover { transform: translateX(3px); }
  .enlace:hover .ico { transform: translateX(3px); }
  .boton.primario:hover, .boton.invertido:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--c-comercio) 35%, transparent); }
  .boton.secundario:hover { transform: translateY(-1px); }
  .bloque.contador-bloque:hover .contador-ico { transform: rotate(-6deg) scale(1.06); }
}
.contador-ico { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.boton { transition: transform .12s, background .18s, box-shadow .18s; }

/* Entrar: el logo aparece con un pequeño rebote y la tarjeta sube. */
.entrar .logo-tarjeta, .entrar .logo-comercio.grande { animation: pop var(--m-lento) cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.82); } }
.entrar .entrar-banda p { animation: aparece var(--m-medio) .08s both; }
.entrar .formulario { animation: aparece var(--m-lento) .12s var(--m-salida) both; }

@media (prefers-reduced-motion: reduce) {
  .anim .banda-fondo, .anim .banda .rotulo-banda, .anim .banda .saludo, .anim .banda .cifra-banda, .anim .banda .sub-banda,
  .anim .aparece, .anim .pila i, .anim .riel i, .anim .chip-banda, .anim .tira-dia, .anim .sello, .anim .fila-ajuste,
  .pulso, .aviso-flotante.entra, .entrar .logo-tarjeta, .entrar .logo-comercio.grande, .entrar .formulario,
  .entrar .entrar-banda p, .opcion.activa { animation: none; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) { .tira-dia:hover, .fila:hover, .boton:hover { transform: none; } }

/* ---------- Tablet y escritorio ---------- */
@media (min-width: 768px) {
  .contenido { padding: var(--k-esp-4) var(--k-esp-6) var(--k-esp-6); gap: var(--k-esp-4); }
  .banda { margin: 0 calc(-1 * var(--k-esp-6)); padding: var(--k-esp-4) var(--k-esp-6) var(--k-esp-8); }
  .lista-bloque.a-sangre { margin: 0 calc(-1 * var(--k-esp-6)); }
  .rejilla-reportes { grid-template-columns: 1fr 1fr; }
  .rejilla-reportes .ancho-completo { grid-column: 1 / -1; }
  /* Ajustes: un bloque debajo del otro, a todo lo ancho, también en escritorio (José, 06/11). */
  .rejilla-inicio { grid-template-columns: 1fr 1fr; }
  .rejilla-inicio > .bloque-semana, .rejilla-inicio > .bloque-medias { grid-column: 1 / -1; }
  /* Tasa BCV: la vigente a la izquierda y la tabla a la derecha, para no leer de punta a punta de la pantalla. */
  .bloque-tasa { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; column-gap: var(--k-esp-6); align-items: start; }
  .bloque-tasa > .cabeza-bloque { grid-column: 1 / -1; }
  .bloque-tasa .mini-tabla { margin: 0; padding: 0; max-width: 520px; width: 100%; }
  /* Formularios y textos de Ajustes a su ancho de lectura, no a todo lo ancho (UI-14). */
  .fila-agregar { max-width: 560px; }
  .vista-mensaje, .rejilla-ajustes p { max-width: 480px; }
  [data-hueco-instalar] .boton.ancho { width: auto; justify-self: start; }
  /* La ficha del día se lee como un ticket: una columna de 600 px, sola o al lado de la lista. */
  .contenido:has(> section[data-turno]) { max-width: 600px; }
  .panel-dia { max-width: 600px; }
  .hoja { left: 50%; right: auto; width: 480px; transform: translateX(-50%); bottom: auto; top: 50%; translate: 0 -50%; border-radius: 22px; animation: dialogo-entra .22s cubic-bezier(.2, .9, .25, 1); }
  @keyframes dialogo-entra { from { opacity: 0; scale: .94; } }
  @keyframes dialogo-sale { to { opacity: 0; scale: .96; } }
  #capa.cerrando .hoja { animation: dialogo-sale .18s ease-in forwards; }
  .hoja::before { display: none; }
  .pie-cierre { left: 50%; transform: translateX(-50%); width: 560px; border-radius: 18px 18px 0 0; border: 1px solid var(--c-borde-bloque); border-bottom: 0; }
}
/* Teléfono en horizontal (poca altura): la banda de Inicio se compacta para que se vea lo de abajo (TST-5). */
@media (orientation: landscape) and (max-height: 500px) {
  .banda { padding-top: var(--k-esp-2); padding-bottom: var(--k-esp-4); }
  .banda-barra { margin-bottom: var(--k-esp-2); }
  .banda .saludo { display: none; }
  .cifra-banda { font-size: var(--t-6); }
  .chips-banda { margin-top: var(--k-esp-2); }
  .banda .boton.invertido { margin-top: var(--k-esp-2); height: 44px; }
}
/* Ventana mediana (600–1023 px: tablet vertical, teléfono horizontal): riel lateral de íconos con nombre (UI-5). */
@media (min-width: 600px) and (max-width: 1023px) {
  .con-menu { display: grid; grid-template-columns: 88px 1fr; }
  .lienzo { padding-bottom: 0; min-width: 0; }
  .menu {
    position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: stretch;
    gap: var(--k-esp-2); padding: var(--k-esp-4) var(--k-esp-2); border-top: 0; border-right: 1px solid var(--c-borde-bloque);
  }
  .menu-indicador { display: none; }
  .menu a { padding: var(--k-esp-2) 0; border-radius: 16px; gap: var(--k-esp-1); min-height: 56px; justify-content: center; }
  .menu a.activo { background: var(--c-comercio-suave); }
  .menu a.activo .ico { transform: none; }
  .pie-cierre { left: 50%; transform: translateX(-50%); width: min(560px, 100%); }
  /* La tira de días va a lo ancho: en media columna se cortaba y dejaba un hueco debajo. */
  .rejilla-inicio > .bloque-tira { grid-column: 1 / -1; }
  .banda .boton.invertido { width: auto; max-width: 360px; padding: 0 var(--k-esp-8); }
}
@media (min-width: 1024px) {
  .con-menu { display: grid; grid-template-columns: 232px 1fr; }
  .lienzo { padding-bottom: 0; min-width: 0; }
  .lienzo > .barra { display: none; }
  .menu {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: var(--k-esp-4) var(--k-esp-3);
    border-top: 0; border-right: 1px solid var(--c-borde-bloque);
  }
  .menu-marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px var(--k-esp-6); }
  .menu-marca div { display: grid; }
  .menu-marca small { color: var(--k-suave); }
  .menu a { flex-direction: row; gap: var(--k-esp-3); font-size: var(--t-3); padding: 12px 12px; border-radius: 10px; color: var(--k-tinta); }
  .menu a.activo { background: var(--c-comercio-suave); }
  .menu-indicador { display: none; }
  .menu a.activo .ico { transform: none; }
  .contenido, .contenido.con-banda { padding-top: var(--k-esp-6); }
  .lista-bloque.a-sangre { margin: 0; border: 1px solid var(--c-borde-bloque); border-radius: var(--c-radio-bloque); overflow: hidden; }
  /* Inicio en escritorio (José, 06/11): la banda cuelga del borde de arriba como el notch de una Mac (pegada arriba,
     esquinas de abajo redondeadas y curvas hacia adentro donde se une con el borde) y termina en la cifra:
     los chips van a la derecha. «Esta semana» a lo ancho y baja; abajo dos bloques lado a lado. */
  .contenido.con-banda { padding-top: 0; }
  .banda {
    --radio-banda: 36px;
    position: relative; margin: 0 calc(var(--k-esp-8) + 56px); border-radius: 0 0 var(--radio-banda) var(--radio-banda);
    padding: var(--k-esp-4) var(--k-esp-8) var(--k-esp-6);
    display: grid; grid-template-columns: 1fr auto; column-gap: var(--k-esp-8); align-items: end;
  }
  /* Hombros del notch: curva elíptica larga y baja, para que la caída hacia el borde se vea natural. */
  .banda::before, .banda::after { content: ""; position: absolute; top: 0; width: 56px; height: 30px; }
  .banda::before { left: -56px; background: radial-gradient(ellipse 56px 30px at 0 100%, transparent calc(100% - 1px), var(--c-comercio) 100%); }
  .banda::after { right: -56px; background: radial-gradient(ellipse 56px 30px at 100% 100%, transparent calc(100% - 1px), var(--c-comercio) 100%); }
  .banda > * { grid-column: 1; }
  /* El fondo no es una celda de la rejilla: así cubre la banda entera (si no, queda dentro de la columna 1). */
  .banda > .banda-fondo { grid-column: auto; grid-row: auto; }
  .banda-barra { grid-column: 1 / -1; margin-bottom: var(--k-esp-2); }
  .cifra-banda { font-size: var(--t-7); }
  .banda .chips-banda, .banda .boton.invertido { grid-column: 2; grid-row: 2 / span 4; align-self: end; justify-content: flex-end; margin-top: 0; }
  .banda .chips-banda { max-width: 420px; }
  .banda .boton.invertido { width: auto; padding: 0 var(--k-esp-8); }
  .rejilla-inicio { align-items: stretch; }
  .tira-7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 4px 0 8px; }
  .tira-7 .tira-dia { width: auto; align-content: center; }
  /* Los bloques de una fila se estiran al alto del vecino; la tira de días crece para no dejar hueco. */
  .rejilla-inicio > .bloque:not(.bloque-semana) { display: flex; flex-direction: column; }
  .rejilla-inicio .tira-7 { flex: 1; align-items: stretch; }
  .contenido { max-width: 1240px; }
  .bloque-semana { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; column-gap: var(--k-esp-8); align-items: center; }
  .bloque-semana .cabeza-bloque { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .bloque-semana .cifra-media { grid-column: 1; font-size: var(--t-6); }
  .bloque-semana .cifra-media small { font-size: var(--t-4); }
  .bloque-semana .barras { grid-column: 2; grid-row: 1 / span 2; height: 104px; margin-top: 0; }
  .bloque-semana .vacio { grid-column: 1 / -1; }
}

/* ---------- Personas, actividad y anulados (v1.6.0) ---------- */
.enlace-fila { color: inherit; text-decoration: none; }
.enlace-fila svg { color: var(--k-suave); flex: none; }
button.fila { width: 100%; background: none; border: 0; border-top: 1px solid var(--c-borde-bloque); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.fila-persona { grid-template-columns: 1fr auto; }
.fila-persona.apagada .fila-dia b { color: var(--k-suave); }
.fila-evento { grid-template-columns: 1fr; min-height: 56px; }
.fila-evento .fila-dia b::first-letter { text-transform: none; }
.fila.anulada { opacity: .72; }
.fila.anulada .fila-monto b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sello-anulado {
  flex: none; padding: 4px 8px; border: 1.8px solid currentColor; border-radius: 6px; transform: rotate(-6deg);
  font-family: var(--c-mono); font-size: var(--t-1); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--k-suave); min-width: 74px; text-align: center;
}
.lista-cambios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-esp-3); }
.lista-cambios > li { display: grid; gap: 2px; padding-left: var(--k-esp-3); border-left: 2px solid var(--c-borde-bloque); font-size: var(--t-3); }
.lista-cambios small, .lista-cambios .motivo { color: var(--k-suave); font-size: var(--t-2); }
.lista-cambios ul { margin: var(--k-esp-1) 0 0; padding-left: var(--k-esp-4); font-size: var(--t-2); }
.clave-grande {
  margin: var(--k-esp-4) 0; padding: var(--k-esp-4); text-align: center; font-size: var(--t-7); font-weight: 700; letter-spacing: .12em;
  border: 1px dashed var(--c-borde-bloque); border-radius: var(--k-radio-tarjeta); background: var(--c-comercio-suave); color: var(--c-comercio);
}
.acciones-ficha { display: grid; gap: var(--k-esp-2); margin-top: var(--k-esp-3); }
.acciones-ficha .boton, .fila-persona, .enlace-fila { min-height: 48px; }
.alerta + .resumen { margin-top: var(--k-esp-4); }

.barra-dia.hoy .valor, .barra-dia.activa .valor { opacity: 1; }
.barra-dia.hoy i, .barra-dia.activa i { background: var(--c-comercio); }

/* «Encima» solo con mouse: en el teléfono no queda pegado después de tocar (medidor, hover sin guarda). */
@media (hover: hover) and (pointer: fine) {
  .boton.primario:hover { background: var(--c-comercio-osc); }
  .boton.secundario:hover { border-color: var(--c-comercio-claro); }
  .boton-icono:hover { background: var(--c-comercio-suave); }
  .barra-dia.hoy .valor, .barra-dia.activa .valor, .barra-dia:hover .valor { opacity: 1; }
  .barra-dia.hoy i, .barra-dia.activa i, .barra-dia:hover i { background: var(--c-comercio); }
  .barras.largas .barra-dia:hover i { opacity: 1; }
  .fila:hover { background: var(--c-comercio-suave); }
  @media (min-width: 1024px) { .menu a:hover { background: var(--c-comercio-suave); } }
  .enlace-fila:hover > span:first-child { color: var(--c-comercio); }
}

/* Ayuda (v1.6.0): preguntas que se abren con un toque, del alto de un toque cómodo. */
.bloque-ayuda .pregunta { border-top: 1px solid var(--c-borde-bloque); }
.bloque-ayuda summary { display: flex; justify-content: space-between; align-items: center; gap: var(--k-esp-3); min-height: 48px;
  font-size: var(--t-3); font-weight: 600; cursor: pointer; list-style: none; }
.bloque-ayuda summary::-webkit-details-marker { display: none; }
.bloque-ayuda summary svg { flex: none; width: 18px; height: 18px; color: var(--k-suave); transition: transform var(--m-rapido) var(--m-salida); }
.bloque-ayuda details[open] summary svg { transform: rotate(90deg); }
.bloque-ayuda details p { margin: 0 0 var(--k-esp-4); color: var(--k-suave); font-size: var(--t-3); line-height: 1.5; }
.bloque-ayuda .boton { margin-top: var(--k-esp-4); }