/* Befit · Administración
   Dirección visual: la marca del cliente es SOLO blanco y negro, y así va
   TODO lo que es marca — barra lateral, botones, navegación, selección —
   con el acento en tinta pura (negro en claro, blanco en oscuro).
   El color queda reservado a los DATOS, con el par contable de siempre:
   verde lo que entra, rojo lo que sale. No es decoración: en un cierre de
   caja es lo que permite leer de un vistazo el signo de una cifra.
   Los tonos se eligen con luminancias distintas (verde 9,22:1 y rojo
   5,56:1 en claro) para que también se separen en escala de grises: en
   rojo y verde puros la luminancia es casi la misma y quien tiene
   daltonismo no los distingue. Aun así el color nunca va solo — el signo
   «−$» y la etiqueta dicen lo mismo sin depender de la vista.
   Una sola familia tipográfica; los importes siempre con cifras
   tabulares para que las columnas cuadren.  */

:root {
  /* --- Ajustes de accesibilidad (los mueve la pestaña Accesibilidad) ---
     La escala multiplica el tamaño raíz, así que TODO lo que esté en rem
     crece con ella. Por eso en esta hoja no queda ningún font-size en px:
     uno solo en px sería un texto que el usuario no puede agrandar.       */
  --escala: 1;
  --peso-texto: 400;         /* texto corrido; 500 en modo "letra gruesa" */
  --peso-fuerte: 600;        /* etiquetas y encabezados; 700 en grueso    */
  --peso-medio: 500;         /* navegacion y etiquetas; 600 en grueso     */
  --peso-cifra: 700;         /* importes y KPIs; 800 en grueso            */
  --peso-maximo: 800;        /* la marca; 900 en grueso                   */

  /* --- Tema claro --- (contrastes medidos sobre tarjeta blanca) */
  --papel: #f2f2f2;          /* fondo de trabajo                          */
  --papel-carta: #ffffff;    /* tarjetas                                  */
  --tinta: #121212;          /* texto principal              18,73:1      */
  --tinta-suave: #595959;    /* texto secundario              7,00:1      */
  --linea: #e2e2e2;          /* bordes                                    */
  --linea-fuerte: #c2c2c2;
  --acento: #121212;         /* acciones y selección: tinta, no color     */
  --acento-fuerte: #000000;
  --acento-tenue: #ebebeb;
  --verde: #0a5238;          /* ganancias e ingresos             9,22:1   */
  --verde-tenue: #e2efe8;
  --terracota: #b4432a;      /* importes negativos               5,56:1   */
  --terracota-tenue: #f7e6e1;
  --ambar: #3d3d3d;          /* vencidos: gris, lo dice su etiqueta 10,86:1*/
  --ambar-tenue: #ededed;
  --lateral: #0a0a0a;        /* barra lateral: negro                      */
  --lateral-texto: #b0b0b0;  /*                               9,13:1      */
  --lateral-activo: #1f1f1f;
  --foco: #121212;
  /* Avisos flotantes. Fijos en los dos temas: un aviso va ENCIMA de la
     aplicacion, no dentro, y siguiendo al tema acababa siendo blanco sobre
     blanco en el modo oscuro (1,17:1, medido). Contrastes con letra blanca:
     17,04:1 el normal y 7,63:1 el de error. */
  --aviso-fondo: #1c1c1c;
  --aviso-error: #9c2a12;
  --aviso-tinta: #ffffff;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  --rejilla-grafica: #e2e2e2; /* líneas de las gráficas (lo lee Chart.js) */
  --serie-alterna: #6e6e6e;   /* 2ª serie: proyección, periodo B          */
  /* Paleta de CATEGORÍAS (planes, formas de pago, conceptos). Son grupos
     sin signo: no hay nada que "entre" ni "salga", así que aquí el color
     solo sirve para separar. Evita a propósito el verde y el rojo, que en
     esta aplicación significan entra y sale — un plan en rojo se leería
     como una pérdida. Contrastes sobre blanco: 5,19 / 3,92 / 5,93 / 5,31 /
     5,90. El cuarto es GRIS a propósito: con dos azules o dos morados, un
     ojo con deuteranopía los junta, y el gris se separa por luminancia.
     Simulando deuteranopía el par más parecido queda a distancia 98 (104 en
     oscuro). Aun así el nombre y la cifra van siempre en la leyenda: el
     color nunca es el único modo de distinguirlos. */
  --cat-1: #0072b2;
  --cat-2: #c26a00;
  --cat-3: #7c4fa8;
  --cat-4: #595959;
  --cat-5: #b3417a;
  /* Rampas por signo. Contrastes sobre tarjeta blanca: verde 14,8 / 9,2 /
     4,9 / 3,1 y rojo 12,2 / 7,8 / 5,6 / 3,7 — todas por encima del 3:1 que
     pide un elemento gráfico. Los segmentos contiguos se separan además con
     el borde de 2px del color de la tarjeta. */
  --entra-1: #052e1e;
  --entra-2: #0a5238;
  --entra-3: #12805a;
  --entra-4: #2aa478;
  --sale-1: #5e2216;
  --sale-2: #8f3522;
  --sale-3: #b4432a;
  --sale-4: #d4644a;
  --superficie-suave: #f0f0f0;  /* hover y franjas alternas               */
  --superficie-media: #e4e4e4;  /* pulsado                                */
  --sobre-acento: #ffffff;      /* texto sobre el acento negro  18,73:1   */
  --destacado-fondo: #fff4c2;   /* el resaltador del cuaderno            */
  --destacado-borde: #b78a09;
  /* Avisos sin resolver y alertas: tienen que saltar a la vista (lo pidió
     Maira, v34). Ámbar para lo que hay que atender, coral para la alarma.
     Medido: tinta sobre fondo 7,47:1 y 6,82:1; borde sobre tarjeta 3,88:1;
     texto blanco sobre el sólido 5,86:1 y 5,56:1. */
  --aviso-pendiente-fondo: #fff1d6;
  --aviso-pendiente-borde: #c46a00;
  --aviso-pendiente-tinta: #7a3e00;
  --aviso-pendiente-solido: #9a5200;
  --sobre-aviso: #ffffff;
  --alarma-fondo: #fbe3dc;
  --alarma-borde: #b4432a;
  --alarma-tinta: #8f2a14;
  --sobre-alarma: #ffffff;
  color-scheme: light;
}

/* --- Tema oscuro (el que se sirve por defecto) ---
   El acento se invierte: en claro es negro, aquí es blanco. La barra
   lateral se hunde un paso por debajo del fondo de trabajo (#050505 contra
   #0e0e0e) para seguir siendo la segunda capa neutra y no fundirse con el
   contenido. Contrastes medidos sobre la tarjeta #1a1a1a: tinta 14,87:1,
   tinta-suave 7,32:1, acento 17,40:1, rojo 6,54:1, aviso 11,28:1.        */
[data-tema="oscuro"] {
  --papel: #0e0e0e;
  --papel-carta: #1a1a1a;
  --tinta: #ededed;
  --tinta-suave: #a8a8a8;
  --linea: #2e2e2e;          /* en oscuro la tarjeta se separa por borde,
                                no por sombra: la sombra no se ve         */
  --linea-fuerte: #454545;
  --acento: #ffffff;
  --acento-fuerte: #ffffff;
  --acento-tenue: #262626;
  --verde: #4ecb94;          /* ganancias                        8,53:1   */
  --verde-tenue: #12301f;
  --terracota: #e8836a;      /* el rojo se aclara: el #b4432a da 2,4:1
                                sobre este fondo y sería ilegible         */
  --terracota-tenue: #3a201a;
  --ambar: #d0d0d0;
  --ambar-tenue: #2a2a2a;
  --lateral: #050505;
  --lateral-texto: #a8a8a8;
  --lateral-activo: #202020;
  --foco: #ffffff;
  --sombra: none;
  --rejilla-grafica: #2e2e2e;
  --serie-alterna: #8f8f8f;
  --cat-1: #56b4e9;
  --cat-2: #e69f00;
  --cat-3: #b79cf0;
  --cat-4: #8a8a8a;
  --cat-5: #f085bb;
  --entra-1: #e2fbef;
  --entra-2: #8ce8c0;
  --entra-3: #4ecb94;
  --entra-4: #227a58;
  --sale-1: #ffe0d6;
  --sale-2: #f4ab96;
  --sale-3: #e8836a;
  --sale-4: #a94b34;
  --superficie-suave: #242424;
  --superficie-media: #2e2e2e;
  /* Sobre el acento blanco el texto tiene que ser el fondo (19,3:1). */
  --sobre-acento: #0e0e0e;
  --destacado-fondo: #3a300f;
  --destacado-borde: #e0b64a;
  /* Medido: tinta sobre fondo 9,21:1 y 7,79:1; borde sobre la tarjeta
     #1a1a1a 8,10:1 y 6,79:1; texto oscuro sobre el sólido 8,79:1 y 7,54:1. */
  --aviso-pendiente-fondo: #3a2606;
  --aviso-pendiente-borde: #f0a032;
  --aviso-pendiente-tinta: #ffc56b;
  --aviso-pendiente-solido: #f0a032;
  --sobre-aviso: #1a0f00;
  --alarma-fondo: #3d1a12;
  --alarma-borde: #ff7a5c;
  --alarma-tinta: #ff9f87;
  --sobre-alarma: #1a0906;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Cualquier display propio (.boton, .cajon...) le gana al display:none
   que el navegador aplica a [hidden]; esta regla devuelve la autoridad al
   atributo. Ya nos mordió dos veces. */
[hidden] { display: none !important; }

/* 0.9375rem = los 15px de siempre cuando el navegador está en su tamaño
   por defecto. Se parte de rem (y no de 15px fijos) para que quien tenga
   subida la letra del navegador la conserve; --escala se multiplica encima
   y es lo que mueve el control de la pestaña Accesibilidad.
   En el elemento raíz, rem se resuelve contra el tamaño inicial del
   navegador, no contra sí mismo: no hay referencia circular.             */
html {
  -webkit-text-size-adjust: 100%;
  font-size: calc(0.9375rem * var(--escala));
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  font-weight: var(--peso-texto);
  line-height: 1.45;
  color: var(--tinta);
  background: var(--papel);
}

/* Los importes y contadores usan cifras tabulares SIEMPRE. */
.cifra, td.num, .kpi-valor, .pastilla, input[type="number"], input[type="date"] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Estructura general ---------- */
.aplicacion { display: flex; min-height: 100vh; }

.lateral {
  width: 216px;
  flex-shrink: 0;
  background: var(--lateral);
  color: var(--lateral-texto);
  display: flex;
  flex-direction: column;
  padding: 20px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 18px;
  color: #fff;
  font-weight: var(--peso-cifra);
  font-size: 1.2667rem;
  letter-spacing: .2px;
}
/* La chapa lleva su propio negro y la lateral tambien es negra en los dos
   temas, asi que el cuadro no se ve: queda solo la marca. El borde redondeado
   es de la chapa, no del logo. */
.marca .chapa {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
}
.marca small {
  display: block;
  font-size: 0.7333rem;
  font-weight: var(--peso-medio);
  color: var(--lateral-texto);
  letter-spacing: .4px;
}

.navegacion { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }

.pestania {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lateral-texto);
  font: inherit;
  font-weight: var(--peso-medio);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.pestania svg { flex-shrink: 0; opacity: .85; }
.pestania:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pestania:active { background: rgba(255, 255, 255, .12); }
.pestania[aria-current="page"] {
  background: var(--lateral-activo);
  color: #fff;
  font-weight: var(--peso-fuerte);
  box-shadow: inset 2px 0 0 #ffffff;
}
.pestania:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.lateral .pie {
  margin-top: auto;
  padding: 10px;
  font-size: 0.8rem;
  color: #8a8a8a;
}

.contenido {
  flex: 1;
  min-width: 0;
  padding: 26px 30px 60px;
  max-width: 1240px;
}

.vista { display: none; }
.vista.visible { display: block; }

.cabecera-vista {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 18px;
}
.cabecera-vista h1 { font-size: 1.4667rem; margin: 0; letter-spacing: -.2px; }
.cabecera-vista .subtitulo { color: var(--tinta-suave); font-size: 0.9333rem; }
.acciones-vista { margin-left: auto; display: flex; gap: 8px; }

/* ---------- Controles ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--linea-fuerte);
  background: var(--papel-carta);
  color: var(--tinta);
  font: inherit;
  font-weight: var(--peso-fuerte);
  font-size: 0.9333rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.boton:hover { background: var(--superficie-suave); border-color: var(--tinta-suave); }
.boton:active { background: var(--superficie-media); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
/* Un boton primario desactivado con opacidad .5 sobre relleno blanco baja a
   ~2,2:1 de contraste efectivo: WCAG exime los controles inactivos, pero
   este es la accion principal de la pantalla y hay que poder leer lo que
   dice. Se apaga cambiando de relleno a contorno, no bajando la opacidad. */
.boton-primario:disabled {
  opacity: 1;
  background: transparent;
  color: var(--tinta-suave);
  border-color: var(--linea-fuerte);
}
.boton:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.boton-primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
}
.boton-primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton-primario:active { background: var(--acento-fuerte); }

.boton-peligro {
  color: var(--terracota);
  border-color: var(--terracota);
}
.boton-peligro:hover { background: var(--terracota-tenue); border-color: var(--terracota); }

.boton-fantasma { border-color: transparent; background: transparent; }
.boton-fantasma:hover { background: var(--superficie-suave); }

.boton-icono {
  min-width: 38px;
  padding: 7px;
}

/* Los tipos van uno a uno y no con un "input" pelado para no pisar las
   casillas y los botones de archivo. Ojo: si se anade un tipo nuevo hay
   que meterlo aqui — el de password se quedo fuera y los cinco campos de
   contrasena de la app salian sin estilo, a 177px en vez de 266. */
input[type="text"], input[type="number"], input[type="date"],
input[type="password"], input[type="search"], select, textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--papel-carta);
  border: 1px solid var(--linea-fuerte);
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 38px;
  width: 100%;
}
input:hover, select:hover, textarea:hover { border-color: var(--linea-fuerte); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
  border-color: var(--foco);
}
input:disabled { background: var(--superficie-suave); color: var(--tinta-suave); }
/* El texto de ejemplo llevaba el gris del navegador: 3,78 de contraste, por
   debajo del 4,5 que pide WCAG AA, y es justo lo que peor se lee con el
   teléfono en el mostrador. Con este gris sube a 7,0 y se sigue
   distinguiendo de lo escrito (medido el 19/09). */
input::placeholder, textarea::placeholder { color: var(--tinta-suave); opacity: 1; }

label { font-size: 0.8667rem; font-weight: var(--peso-fuerte); color: var(--tinta-suave); display: block; margin-bottom: 4px; }

/* Selector de rango de fechas (chips de atajo + fechas propias) */
.filtro-fechas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  background: var(--papel-carta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 10px 12px;
  margin-bottom: 20px;
  box-shadow: var(--sombra);
}
.grupo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--linea-fuerte);
  background: transparent;
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 0.8667rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  cursor: pointer;
  min-height: 34px;
}
.chip:hover { background: var(--superficie-suave); color: var(--tinta); }
.chip[aria-pressed="true"] {
  background: var(--acento-tenue);
  border-color: var(--acento);
  color: var(--acento-fuerte);
}
.chip:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fechas-propias { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* El filtro de cuenta va con los chips y no con las fechas: filtra QUE
   se ve, no CUANDO. */
.filtro-cuenta select { width: auto; min-width: 150px; min-height: 34px; padding: 5px 8px; }
.fechas-propias input { width: 148px; min-height: 34px; padding: 5px 8px; }
.fechas-propias .separador { color: var(--tinta-suave); }

/* ---------- Tarjetas y KPIs ---------- */
.tarjeta {
  background: var(--papel-carta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
}
/* Caja normal y color de tinta: en versalitas grises pequeñas el título
   se lee peor y hacía que el panel pareciera cualquier plantilla. */
.tarjeta h2 {
  margin: 0 0 12px;
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta);
}

/* 15 columnas para poder partir la fila en 3 y en 5 sin dos contenedores:
   arriba las tres cifras del cierre de caja (span 5), abajo las cinco de
   contexto (span 3). Antes las ocho medían igual y el panel no decía por
   dónde empezar a mirar. */
.rejilla-kpis {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.kpi { padding: 14px 16px; grid-column: span 3; }
.kpi-principal { grid-column: span 5; }
.kpi .kpi-titulo { font-size: 0.8667rem; font-weight: var(--peso-fuerte); color: var(--tinta-suave); }
.kpi .kpi-valor { font-size: 1.2rem; font-weight: var(--peso-cifra); letter-spacing: -.2px; margin-top: 2px; }
.kpi-principal .kpi-valor { font-size: 2.1333rem; letter-spacing: -.4px; }
/* Los cinco conteos dejan de ser tarjeta. Con caja, sombra y borde iguales a
   las tres de dinero, el panel enseñaba ocho hermanas; en el teléfono, donde
   la rejilla las iguala a 173x110 px, la jerarquía desaparecía del todo. Sin
   caja se siguen leyendo igual de bien (mismo cuerpo de letra, mismo color)
   y ya no compiten con lo que sí es dinero. El filete de arriba las cose en
   una sola tira en vez de dejarlas sueltas. */
.kpi.kpi-apoyo {
  background: none;
  box-shadow: none;
  border-color: transparent;
  border-top-color: var(--linea);
  border-radius: 0;
  padding: 10px 2px 2px;
}
.kpi .kpi-detalle { font-size: 0.8333rem; color: var(--tinta-suave); margin-top: 2px; }
.kpi-positivo .kpi-valor { color: var(--verde); }
.kpi-negativo .kpi-valor { color: var(--terracota); }
.kpi-aviso .kpi-valor { color: var(--ambar); }
/* Los recuadros de avisos y alertas de Ventas llevan el color de sus
   tarjetas: si hay algo sin atender, se ve desde arriba de la pantalla. */
.tarjeta.kpi-pendiente {
  background: var(--aviso-pendiente-fondo);
  border-color: var(--aviso-pendiente-borde);
}
.tarjeta.kpi-pendiente .kpi-valor, .tarjeta.kpi-pendiente .kpi-detalle { color: var(--aviso-pendiente-tinta); }
.tarjeta.kpi-alarma {
  background: var(--alarma-fondo);
  border-color: var(--alarma-borde);
}
.tarjeta.kpi-alarma .kpi-valor, .tarjeta.kpi-alarma .kpi-detalle { color: var(--alarma-tinta); }
/* white-space normal: .delta trae nowrap (tabla de Comparar) y aquí, en
   tarjetas estrechas, reventaba la rejilla en móvil. */
/* Con .kpi delante, y no solo .kpi-delta: .delta (la tabla de Comparar) va
   más abajo con la misma especificidad y su nowrap ganaba. En el teléfono la
   línea medía 156 px en una tarjeta de 139 (foto de Maira, 19/09). */
.kpi .kpi-delta { font-size: 0.8rem; margin-top: 2px; white-space: normal; }

/* La pestaña de cumpleaños es un formulario de tres campos: a todo el ancho
   de un monitor, el campo del día medía 960 px. */
#vista-cumpleanos .tarjeta { max-width: 640px; }

/* Dónde entró la venta: debajo de las tres cifras de dinero, a lo ancho. */
.desglose-venta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-top: -4px;
}
.rotulo-desglose {
  font-size: 0.8667rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  margin-right: 2px;
}
.trozo-desglose {
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.9rem;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.trozo-desglose strong { color: var(--tinta); font-weight: var(--peso-cifra); }

/* Barra de meta mensual */
.barra-meta { padding: 12px 18px; margin-bottom: 14px; }
.meta-texto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 8px;
  font-size: 0.9333rem;
}
.meta-texto strong { color: var(--acento-fuerte); }
.meta-texto span { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.pista-meta {
  height: 10px;
  border-radius: 999px;
  background: var(--superficie-suave);
  overflow: hidden;
}
.relleno-meta {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, var(--acento));
  transition: width .3s ease-out;
}
.relleno-meta.superada { background: var(--acento); }

.rejilla-graficas {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 14px;
}
/* min-width:0 es obligatorio aquí: el <canvas> de Chart.js conserva su
   ancho anterior al achicar la ventana y, sin esto, la columna no puede
   encoger por debajo de su contenido — la página se quedaba con 250px de
   scroll horizontal hasta recargar. Mismo fallo que mordió en el
   calendario móvil. */
.rejilla-graficas > * { min-width: 0; }
.rejilla-graficas .ancho-total { grid-column: 1 / -1; }
.lienzo { position: relative; height: 260px; }
.lienzo-bajo { height: 220px; }

/* ---------- Calendario tipo Notion ---------- */
.barra-calendario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.barra-calendario h2 {
  font-size: 1.1333rem;
  margin: 0;
  min-width: 170px;
}
.leyenda-calendario {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-size: 0.8333rem;
  color: var(--tinta-suave);
}
.leyenda-calendario .punto {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 3px;
  margin-right: 5px;
}

.calendario {
  background: var(--papel-carta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.calendario-cabecera {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--linea);
}
.calendario-cabecera div {
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: var(--peso-cifra);
  color: var(--tinta-suave);
}
.calendario-cuerpo {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.celda-dia {
  border: 0;
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
  background: var(--papel-carta);
  min-width: 0; /* sin esto, las pastillas nowrap impiden encoger la columna y el domingo se sale en móvil */
  min-height: 104px;
  padding: 7px 8px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .12s;
}
.celda-dia:first-child, .calendario-cuerpo .celda-dia:nth-child(7n+1) { border-left: 0; }
.celda-dia:hover { background: var(--superficie-suave); }
.celda-dia:active { background: var(--superficie-suave); }
.celda-dia:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; z-index: 1; }
/* Sin `color`: estas celdas van vacias (el calendario solo pinta los dias
   del mes), asi que ese color no llega a verse nunca. Se quita porque era
   --linea-fuerte, un color de BORDE usado como tinta, y es justo el
   patron que dejo el numero de los dias a 1,82:1 y la estrella invisible. */
.celda-dia.fuera-de-mes { background: var(--superficie-suave); cursor: default; }
.celda-dia .numero-dia {
  font-size: 0.8667rem;
  font-weight: var(--peso-fuerte);
  /* El numero del dia es el dato que se busca para orientarse: va en tinta
     plena. El dia sin movimiento se atenua abajo, pero sin bajar de 7:1. */
  color: var(--tinta);
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
/* Un dia sin movimiento se atenua, pero sigue siendo una fecha que hay que
   poder leer: --linea-fuerte es un color de borde y daba 1,82:1. */
.celda-dia.sin-datos .numero-dia { color: var(--tinta-suave); }
/* HOY va DESPUES de sin-datos y no antes: un dia puede ser las dos cosas a la
   vez (hoy y sin movimiento), las dos reglas tienen la misma especificidad y
   a igual especificidad gana la ultima. Puesto antes, el numero de hoy salia
   gris claro sobre el circulo blanco: 2,38:1. Se vio en produccion y NO en
   local, porque la base de aqui si tenia un renglon para hoy y la celda no
   llevaba sin-datos. Asi son 19,3:1.
   Y el color es --sobre-acento, no un #fff a mano: en el tema oscuro el
   acento ES blanco y el numero quedaba blanco sobre blanco. */
.celda-dia.es-hoy .numero-dia { background: var(--acento); color: var(--sobre-acento); }

/* La cifra de la miniatura: de 11,5 a 14 px en el ordenador (se leía mal,
   21/09). La celda mide 143 px y «+$3.729» ocupa unos 60. */
.pastilla {
  display: block;
  width: 100%;
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
  border-radius: 5px;
  padding: 3px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pastilla-venta { background: var(--verde-tenue); color: var(--verde); }
.pastilla-gasto { background: var(--terracota-tenue); color: var(--terracota); }
.pastilla-vencidos { background: var(--ambar-tenue); color: var(--ambar); }

/* Panel de detalle del día (cajón lateral) */
.cajon-fondo {
  position: fixed;
  inset: 0;
  background: rgba(19, 31, 25, .32);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.cajon-fondo.visible { opacity: 1; pointer-events: auto; }
.cajon {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 94vw;
  background: var(--papel-carta);
  border-left: 1px solid var(--linea);
  box-shadow: -8px 0 30px rgba(28, 36, 32, .14);
  z-index: 41;
  transform: translateX(102%);
  transition: transform .2s ease-out, visibility .2s;
  /* Cerrado se retira del todo: aparcado solo con transform seguía
     contando para el ancho del documento (4px de scroll horizontal en
     móvil) y sus botones seguían siendo enfocables con el tabulador. */
  visibility: hidden;
  display: flex;
  flex-direction: column;
}
.cajon.visible { transform: translateX(0); visibility: visible; }

/* La ventana del día del calendario: centrada y grande, no un cajón lateral
   de 420 px (21/09). El cuerpo es lo que se desplaza: la cabecera, con las
   flechas para cambiar de día, se queda siempre a la vista. */
.cajon.cajon-centrado {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(1000px, 94vw);
  max-width: 94vw;
  max-height: min(92vh, 1000px);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  transform: translate(-50%, -47%);
  opacity: 0;
  /* Al CERRAR, la visibilidad espera a que acabe el fundido; al ABRIR cambia
     en el acto (regla de abajo). Con una sola transición para las dos cosas,
     en el instante de abrir seguía oculta y el focus() al botón de cerrar
     no hacía nada: el foco se quedaba en la página de detrás. */
  transition: transform .18s ease-out, opacity .18s, visibility 0s linear .18s;
  /* El navegador se queda el desplazamiento vertical y deja el lateral para
     deslizar de un día a otro. */
  touch-action: pan-y;
}
.cajon.cajon-centrado.visible {
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: transform .18s ease-out, opacity .18s, visibility 0s;
}
/* Y también en el cuerpo, que es el que se desplaza: touch-action no se
   hereda, y el navegador mira hasta el primer contenedor con scroll. Solo en
   la ventana, el gesto lateral se lo quedaba el navegador y lo cancelaba. */
.cajon-centrado .cajon-cuerpo { flex: 1 1 auto; min-height: 0; touch-action: pan-y; }
.navegar-dia { display: flex; align-items: center; gap: 6px; min-width: 0; }
.navegar-dia h3 { min-width: 0; }
.navegar-dia .boton-icono { font-size: 1.4rem; line-height: 1; }
.navegar-dia .boton-icono:disabled { opacity: .35; cursor: default; }
.acciones-dia { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* La pista solo tiene sentido con el dedo. */
.pista-deslizar { display: none; }
@media (pointer: coarse) {
  .pista-deslizar {
    display: block;
    margin: 0;
    padding: 6px 20px;
    font-size: 0.8rem;
    color: var(--tinta-suave);
    border-bottom: 1px solid var(--linea);
  }
}
/* Mientras llega el día nuevo el anterior se atenúa, no desaparece: una
   ventana en blanco medio segundo parece que se ha roto. */
.cajon-cuerpo.cargando-dia { opacity: .45; pointer-events: none; transition: opacity .12s; }
@keyframes entra-desde-derecha { from { transform: translateX(28px); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes entra-desde-izquierda { from { transform: translateX(-28px); opacity: .3; } to { transform: none; opacity: 1; } }
.cajon-cuerpo.entra-derecha { animation: entra-desde-derecha .18s ease-out; }
.cajon-cuerpo.entra-izquierda { animation: entra-desde-izquierda .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .cajon.cajon-centrado { transition: none; }
  .cajon-cuerpo.entra-derecha, .cajon-cuerpo.entra-izquierda { animation: none; }
}

/* Cifras de resumen: las del día (dentro de la ventana) y las del mes
   (encima del calendario). El dinero lleva caja; los conteos, no: el mismo
   par de rangos que el panel desde v43. */
.resumen-dia, .resumen-mes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.cifra-dia {
  min-width: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 10px 14px;
  background: var(--papel-carta);
}
.cifra-dia > span { display: block; font-size: 0.8333rem; font-weight: var(--peso-fuerte); color: var(--tinta-suave); }
.cifra-dia > strong { display: block; font-size: 1.6rem; font-weight: var(--peso-cifra); letter-spacing: -.3px; }
.cifra-dia > small { display: block; font-size: 0.8rem; color: var(--tinta-suave); margin-top: 2px; }
.cifra-dia.entra > strong { color: var(--verde); }
.cifra-dia.sale > strong { color: var(--terracota); }
.cifra-dia.apoyo {
  border-color: transparent;
  border-top-color: var(--linea);
  border-radius: 0;
  background: none;
  padding: 8px 2px 2px;
}
.cifra-dia.apoyo > strong { font-size: 1.1333rem; }
.resumen-mes { margin: 0 0 14px; }

.bloque-dia { min-width: 0; }
.bloque-dia h4:first-child { margin-top: 4px; }
/* Los tramos de la ventana del día: cifras, gráficas del día y el mes. */
.tramo-dia {
  margin: 22px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta);
}
/* Las tablas del día en dos columnas que se reparten solas: con una
   rejilla, la de planes (~400 px) dejaba un hueco al lado de la de cuentas.
   En el teléfono cabe una sola (340 px de mínimo). */
.cifras-dia { columns: 2 340px; column-gap: 26px; }
.cifras-dia .bloque-dia { break-inside: avoid; margin-bottom: 8px; }
/* Las gráficas del día: tarjetas iguales, de tres en tres. */
.graficas-del-dia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.caja-grafica-dia {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 10px 12px 8px;
}
.boton-ancho { width: 100%; }
.apagado { color: var(--tinta-suave); font-weight: var(--peso-medio); }

.tabla-planes { width: 100%; border-collapse: collapse; font-size: 0.9333rem; margin-bottom: 6px; }

/* Las gráficas del panel dentro de la ventana del día (v45): el mes entero,
   con el día abierto marcado. Separadas de lo del día por un filete, para
   que no se lean como cifras de ese día. */
.mes-del-dia { margin: 0 0 18px; }
.rejilla-graficas-dia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 22px;
}
.caja-grafica-dia { min-width: 0; }
.caja-grafica-dia .lienzo { margin: 0; }
.caja-grafica-dia.ancho-total { grid-column: 1 / -1; }
.caja-grafica-dia h5 { margin: 0 0 6px; font-size: 0.8333rem; color: var(--tinta-suave); font-weight: var(--peso-fuerte); }
.tabla-planes th, .tabla-planes td { padding: 6px 4px; border-bottom: 1px dashed var(--linea); text-align: left; }
.tabla-planes thead th { font-size: 0.8rem; color: var(--tinta-suave); font-weight: var(--peso-fuerte); }
.tabla-planes tbody th { font-weight: var(--peso-fuerte); }
.tabla-planes .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-planes tfoot th, .tabla-planes tfoot td { border-bottom: 0; font-weight: var(--peso-cifra); }
.cajon-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linea);
}
.cajon-cabecera h3 { margin: 0; font-size: 1.0667rem; }
.cajon-cuerpo { padding: 16px 20px 30px; overflow-y: auto; }

.linea-dato {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--linea);
  font-size: 0.9333rem;
}
.linea-dato dt { color: var(--tinta-suave); margin: 0; }
.linea-dato dd { margin: 0; font-weight: var(--peso-fuerte); }
.linea-dato.total { border-bottom: 0; font-size: 1rem; }
.linea-dato.total dd { font-weight: var(--peso-cifra); }
dl { margin: 0 0 18px; }
.cajon-cuerpo h4 {
  font-size: 0.8333rem;
  color: var(--tinta-suave);
  margin: 18px 0 6px;
}

/* ---------- Registro del día (formato cuaderno) ---------- */
.rejilla-registro {
  display: grid;
  /* minmax(0, 1fr) y no 1fr: una columna "1fr" no baja del ancho mínimo de
     su contenido, así que una tarjeta con una fila de campos anchos estiraba
     la columna a 538px dentro de un contenedor de 358 y se salía media
     pantalla. Es el mismo fallo que mordió en la rejilla de gráficas. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.rejilla-registro > * { min-width: 0; }
.rejilla-registro .ancho-total { grid-column: 1 / -1; }

.fila-campos { display: flex; gap: 12px; flex-wrap: wrap; }
/* min-width:0 es lo que permite encoger: con el 130px de base y sin esto,
   en un móvil de 390px los campos de la derecha se salían de la tarjeta. */
.fila-campos > div { flex: 1 1 140px; min-width: 0; }

/* Las tablas de líneas se desplazan dentro de su caja en vez de empujar la
   página: en móvil las cinco columnas no caben y la de borrar se cortaba. */
.tabla-desplazable { overflow-x: auto; }
.tabla-lineas { width: 100%; border-collapse: collapse; }
.tabla-lineas th {
  text-align: left;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  padding: 4px 6px;
}
.tabla-lineas td { padding: 4px 6px; vertical-align: middle; }
.tabla-lineas td.num { text-align: right; font-weight: var(--peso-fuerte); }
.tabla-lineas input, .tabla-lineas select { min-height: 36px; }
.tabla-lineas .gasto-monto { min-width: 74px; }
.tabla-lineas .gasto-forma { min-width: 118px; padding: 6px 6px; }
.tabla-lineas .quitar {
  color: var(--tinta-suave);
  border-color: transparent;
  background: transparent;
  min-height: 36px;
  min-width: 36px;
}
.tabla-lineas .quitar:hover { color: var(--terracota); background: var(--terracota-tenue); }

.resumen-vivo {
  background: var(--acento-tenue);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 14px 16px;
}
.resumen-vivo .linea-dato { border-bottom-color: var(--linea-fuerte); }
.resumen-vivo .negativo dd { color: var(--terracota); }

/* Desglose de pagos por forma (cajón del día): la forma con su total en
   cabecera y debajo, sangrados, los gastos pagados con ella. */
.grupo-forma { margin-bottom: 6px; }
.grupo-forma .cabecera-forma dt { color: var(--tinta); font-weight: var(--peso-cifra); }
.grupo-forma .cabecera-forma dd { color: var(--terracota); font-weight: var(--peso-cifra); }
.linea-dato.desglose { padding-left: 14px; border-bottom-style: dotted; }
.linea-dato.desglose dd { font-weight: var(--peso-medio); }

.pie-registro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.mensaje-guardado { font-size: 0.9333rem; font-weight: var(--peso-fuerte); color: var(--acento-fuerte); }
.mensaje-guardado.error { color: var(--terracota); }

/* Cabecera del resumen en vivo del registro. */
.titulo-cierre {
  margin: 0 0 10px;
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta);
}

/* ---------- Comparar ---------- */
.rejilla-comparar {
  display: grid;
  /* minmax(0,...) por lo mismo que la rejilla de registro: entre 961 y 1100px
     la tabla de comparación fija el mínimo de la columna y la estira. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
/* h2 y no h3: debajo del h1 de la pantalla saltaba un nivel, y quien
   navega por encabezados con lector de pantalla se encuentra un hueco.
   El tamaño se queda como estaba: el nivel es semantico, no visual. */
.bloque-periodo h2 { margin: 0 0 8px; font-size: 0.9333rem; }
.bloque-periodo .fechas-propias { margin-left: 0; }
.periodo-a h3 span, .periodo-b h3 span {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 6px;
}
.periodo-a h3 span { background: var(--acento); }
.periodo-b h3 span { background: var(--serie-alterna); }

.tabla-comparar { width: 100%; border-collapse: collapse; font-size: 0.9333rem; }
.tabla-comparar th, .tabla-comparar td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--linea);
  text-align: right;
}
.tabla-comparar th:first-child, .tabla-comparar td:first-child { text-align: left; }
.tabla-comparar thead th { font-size: 0.8667rem; font-weight: var(--peso-fuerte); color: var(--tinta-suave); }
.delta { font-weight: var(--peso-cifra); white-space: nowrap; }
.delta.sube { color: var(--verde); }
.delta.baja { color: var(--terracota); }
.delta.igual { color: var(--tinta-suave); }

/* ---------- Ajustes ---------- */
.lista-formas { display: flex; flex-direction: column; gap: 8px; }
.fila-forma {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Envuelve: la fila lleva nombre + saldo + estado + botón, y en un móvil
     de 390px el botón de desactivar se salía 72px por la derecha. */
  flex-wrap: wrap;
}
.fila-forma input[type="text"] { flex: 1; }
/* Titulos de columna de una lista de filas editables. Se alinean con la
   fila-forma de debajo (flex con el mismo reparto) en vez de con una rejilla:
   la fila envuelve en movil y una rejilla fija se descolocaria. */
.titulos-lista {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
}
.titulos-lista > span:first-child { flex: 1; }
.titulos-lista > span:nth-child(2) { flex: 0 0 130px; }  /* igual que el campo */
.titulos-lista > span:last-child { flex: 0 0 auto; }

.fila-forma .estado-forma {
  font-size: 0.8rem;
  font-weight: var(--peso-cifra);
  border-radius: 5px;
  padding: 3px 8px;
}
.estado-forma.activa { background: var(--acento-tenue); color: var(--acento-fuerte); }
.estado-forma.inactiva { background: var(--superficie-suave); color: var(--tinta-suave); }

.nota-ayuda { font-size: 0.8667rem; color: var(--tinta-suave); margin-top: 10px; }

/* ---------- Estados vacíos y carga ---------- */
.esqueleto {
  background: linear-gradient(90deg, var(--superficie-suave) 25%, var(--superficie-suave) 50%, var(--superficie-suave) 75%);
  background-size: 200% 100%;
  animation: brillo-esqueleto 1.2s infinite linear;
  border-radius: 8px;
  min-height: 20px;
}
@keyframes brillo-esqueleto {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.estado-vacio {
  text-align: center;
  color: var(--tinta-suave);
  padding: 30px 16px;
  font-size: 0.9333rem;
}
.estado-vacio strong { display: block; color: var(--tinta); margin-bottom: 4px; }

.oculto-accesible {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Aviso flotante de acciones (guardado, restaurado...) */
.avisos {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* La columna ocupa alto aunque este vacia y va por encima de todo: sin
     esto se traga las pulsaciones de lo que hay debajo. Solo el aviso en si
     recibe el raton, para que su aspa se pueda pulsar. */
  pointer-events: none;
}
.aviso { pointer-events: auto; }

/* La pagina, quieta mientras haya un dialogo encima. El `top` negativo lo
   pone aislarFondo() con el desplazamiento que habia, para que el fondo no
   salte al principio al abrirse el cajon. */
body.sin-desplazar {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.aviso {
  background: var(--aviso-fondo);
  color: var(--aviso-tinta);
  border-radius: 8px;
  /* El filo claro es lo que despega el aviso del fondo en el tema oscuro,
     donde la pagina tambien es casi negra. */
  border: 1px solid rgba(255, 255, 255, .28);
  padding: 10px 16px;
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.aviso.error { background: var(--aviso-error); }

/* Chip de vista reducida: discreto pero presente, para que quien opera la app
   nunca olvide que los números en pantalla no son los reales. */
.chip-reduccion {
  position: fixed;
  bottom: 26px;
  right: 16px;   /* la esquina ya está libre: el chat se retiró */
  z-index: 35;
  border: 1px solid var(--linea-fuerte);
  background: var(--papel-carta);
  color: var(--tinta-suave);
  font: inherit;
  font-size: 0.8rem;
  font-weight: var(--peso-cifra);
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  padding: 5px 11px;
  box-shadow: var(--sombra);
  cursor: pointer;
}
.chip-reduccion:hover { color: var(--tinta); border-color: var(--tinta-suave); }
.chip-reduccion:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }


/* El display:flex de arriba le ganaría al atributo hidden (el display:none
   del navegador tiene menor prioridad): se repone a mano. */
/* Los selectores de cuenta traen nombres largos ("Punto de venta") y
   salían recortados: la columna necesita ancho propio. */
.tabla-lineas .venta-cuenta,
.tabla-lineas .gasto-forma { min-width: 132px; }

/* ---------- Activaciones (tarjetas) ----------
   OJO, esto se hizo al revés antes y se cambió a propósito (5 sept 2026):
   el destacado teñía la tarjeta de amarillo, "el resaltador del cuaderno".
   Se midió y el tinte le quitaba contraste justo a la cifra que quería
   resaltar: el monto pasaba de 8,53:1 a 6,40:1. Un destacado que hace la
   cifra MENOS legible no destaca, estorba.

   Y había un segundo problema: en la misma rejilla el ámbar (una elección
   de la persona) competía con el coral de "Sin repartir" (un problema de
   verdad). Dos colores de alarma y ninguna forma de saber cuál pide acción.

   Ahora el destacado se marca como el resto de la marca marca lo elegido:
   sin color, con peso. Filo sólido de tinta a la izquierda, igual que la
   pestaña activa del lateral, y el borde de la tarjeta en tinta. Son tres
   señales que no dependen del tono (grosor, filo y estrella rellena), así
   que funcionan igual para quien no distinga colores.
   El papel de la tarjeta NO cambia, y por eso el monto conserva sus 8,53:1.
   El amarillo se queda solo donde sí significa algo: la franja de "estás en
   datos de prueba".                                                       */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 12px;
  /* Cada tarjeta mide lo que mide su contenido. Por defecto la rejilla las
     estira a la altura de la más alta de la fila: el aviso «Se dio en la
     mañana», que es un título y nada más, medía 203 px porque al lado tenía
     el del representante de la radio, con cuatro líneas de nota. Dos bloques
     del mismo tamaño con contenidos que no se parecen es justo lo que hace
     que la lista se lea como una masa. Medido el 19/09: 203 -> 137 px. */
  align-items: start;
}

.tarjeta-activacion {
  position: relative;   /* ancla del filo de las destacadas */
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-carta);
  box-shadow: var(--sombra);
  padding: 13px 15px;
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s, transform .15s;
}
.tarjeta-activacion:hover { border-color: var(--linea-fuerte); }
.tarjeta-activacion:active { transform: scale(.995); }
.tarjeta-activacion:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.tarjeta-activacion.destacada {
  /* El papel se queda igual: es lo que salva el contraste del monto. */
  border-color: var(--tinta);
}
/* El filo va en un pseudoelemento y NO en box-shadow. Se intentó
   "box-shadow: inset 4px 0 0 var(--tinta), var(--sombra)" y desaparecía
   entero: en tema oscuro --sombra vale "none", y "none" no puede ser un
   miembro de una lista de sombras, así que el navegador rechaza toda la
   declaración sin avisar. Además así la tarjeta conserva su sombra y el
   contenido no se desplaza respecto a las tarjetas normales. */
.tarjeta-activacion.destacada::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: var(--tinta);
  border-radius: var(--radio) 0 0 var(--radio);
}
.tarjeta-activacion.destacada:hover { border-color: var(--tinta); }

.tarjeta-activacion header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tarjeta-activacion .cedula {
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tarjeta-activacion .monto {
  font-size: 1.2rem;
  font-weight: var(--peso-cifra);
  color: var(--verde);
  white-space: nowrap;
}

.cuentas-tarjeta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.etiqueta-cuenta {
  font-size: 0.7667rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.etiqueta-cuenta.sin-cuenta { border-style: dashed; color: var(--terracota); }

.nota-tarjeta {
  margin: 8px 0 0;
  font-size: 0.8333rem;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

.tarjeta-activacion footer {
  display: flex;
  align-items: center;
  /* Envuelve. Sin esto, con la letra grande el boton «Resolver» se salia
     102 px por el borde derecho de la tarjeta: medido a escala 1,5 en 360 px.
     Era lo que el cliente veia como «textos que se salen de la tarjeta». */
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
  font-size: 0.7667rem;
  color: var(--tinta-suave);
}
/* La hora no se parte en medio, pero SI puede bajar de linea: con el autor
   detras y la letra crecida no cabe, y en nowrap se salia de la tarjeta. */
.tarjeta-activacion footer time {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* El nombre no compite con la hora: misma línea, un punto menos de peso. */
.quien-registro { color: var(--tinta-suave); }
.tarjeta-activacion .marcas { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.tarjeta-activacion footer > .boton { flex: 0 0 auto; margin-left: auto; }
/* Pagar · Editar · Eliminar de una deuda: SIEMPRE en su propia línea y a la
   derecha. Compartiendo línea con la fecha, en unas tarjetas cabían (a la
   derecha) y en otras saltaban de línea y quedaban a la izquierda (la
   «Vencida», o cualquiera en el móvil): cada tarjeta con los botones en un
   sitio distinto. Visto en la captura, no medido a ojo. */
.acciones-deuda {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 100%;
  gap: 6px;
}
.acciones-deuda .boton { flex: 0 0 auto; min-height: 36px; }
/* Eliminar en rojo tenue: es la única acción que no se deshace. */
.acciones-deuda .boton-eliminar-deuda { color: var(--terracota); }
.marca-capture, .marca-descuadre {
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: var(--peso-fuerte);
}
.marca-capture { background: var(--acento-tenue); color: var(--tinta); }
.marca-descuadre { background: var(--terracota-tenue); color: var(--terracota); }

/* Medía 22x21 px: por debajo del mínimo de 24x24 de WCAG 2.2, y es el único
   control de la tarjeta. En móvil sube a 44 (ver la media query del final). */
.estrella {
  border: 0;
  background: transparent;
  /* Apagada pero visible: es un control, y WCAG 1.4.11 pide 3:1. Con
     --linea-fuerte daba 1,82:1 en el tema oscuro y no se veia que la
     tarjeta tuviera estrella. Encendida va en tinta plena (17:1). */
  color: var(--tinta-suave);
  font-size: 1.1333rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: color .15s, background-color .15s, transform .15s;
}
.estrella:hover { color: var(--tinta); background: var(--superficie-suave); }
.estrella:active { transform: scale(.9); }
.estrella[aria-pressed="true"] { color: var(--tinta); }
.estrella[aria-pressed="true"]:hover { background: var(--superficie-media); }
.estrella:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
/* Sin animación para quien la haya desactivado en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .estrella { transition: none; }
  .estrella:active { transform: none; }
}

/* --- Cajón de la activación --- */
.aviso-cuadre { margin: 8px 0 0; font-size: 0.8333rem; min-height: 1.2em; }
.aviso-cuadre.pendiente { color: var(--ambar); font-weight: var(--peso-fuerte); }
.aviso-cuadre.error { color: var(--terracota); font-weight: var(--peso-fuerte); }

.zona-capture {
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 12px;
  margin-top: 6px;
}
.zona-capture img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin: 0 auto 10px;
  border-radius: 6px;
  border: 1px solid var(--linea);
}
.acciones-capture { display: flex; gap: 8px; flex-wrap: wrap; }
/* El <input type=file> queda oculto y se acciona desde su <label>, que se
   pinta como botón: el control nativo no se puede estilar de forma fiable. */
.acciones-capture label.boton { cursor: pointer; }

/* ---------- Cuentas (dónde está el dinero) ---------- */
.panel-cuentas { margin-bottom: 20px; }
.cabecera-cuentas {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 12px;
}
.cabecera-cuentas h2 { margin: 0; }
.cabecera-cuentas .nota-ayuda { margin: 0; }
.total-cuentas {
  margin-left: auto;
  font-size: 1.4667rem;
  font-weight: var(--peso-cifra);
  color: var(--verde);
  letter-spacing: -.3px;
}

.lista-cuentas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.cuenta {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  background: var(--papel);
  min-width: 0;
}
.cuenta-nombre {
  font-size: 0.8667rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
}
.cuenta-nombre small { font-weight: var(--peso-texto); }
.cuenta-saldo {
  font-size: 1.2rem;
  font-weight: var(--peso-cifra);
  color: var(--verde);
  margin-top: 2px;
}
/* Una cuenta en negativo es un error de registro o un descubierto: se ve. */
.cuenta.en-rojo .cuenta-saldo { color: var(--terracota); }
.cuenta.inactiva { opacity: .62; }
.cuenta-detalle {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.cuenta-detalle .entra { color: var(--verde); }
.cuenta-detalle .sale { color: var(--terracota); }
/* En el panel, ingresos y gastos son cifras con nombre y no una línea en
   letra pequeña: con los signos solos no se entendía qué eran. */
.cuenta-movimientos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
}
.cifra-cuenta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rotulo-cifra {
  font-size: 0.7333rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cifra-cuenta .cifra {
  font-size: 1.0667rem;
  font-weight: var(--peso-cifra);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cifra-cuenta.entra .cifra { color: var(--verde); }
.cifra-cuenta.sale .cifra { color: var(--terracota); }

/* En Ajustes cada cuenta lleva nombre + saldo inicial en la misma fila.
   Los input heredan width:100%, así que sin fijar el del saldo se comía la
   fila entera y dejaba el nombre en 22px. */
.fila-forma .saldo-inicial,
.fila-forma #nuevo-saldo,
.fila-forma #nueva-tarifa { width: 130px; flex: 0 0 130px; }
.fila-forma input[type="text"] { flex: 1 1 auto; min-width: 120px; width: auto; }

/* ---------- Franja del modo de prueba ----------
   Permanente y arriba del todo: si alguien registra el cierre del día
   creyendo estar en los datos reales y estaba en pruebas, ese trabajo se
   pierde. Verlo tiene que ser inevitable, no un aviso que se desvanece. */
.franja-prueba {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 9px 16px;
  background: var(--destacado-fondo);
  /* La tinta del tema, NO un color fijo: el fondo del destacado es amarillo
     claro en tema claro y marrón oscuro en oscuro. Con el negro fijo que
     había antes, en oscuro quedaba a 1,4:1 — ilegible. Con la tinta da
     16,92:1 en claro y 11,14:1 en oscuro. */
  color: var(--tinta);
  border-bottom: 2px solid var(--destacado-borde);
  font-size: 0.8667rem;
  font-weight: var(--peso-medio);
  text-align: center;
}
.franja-prueba strong { font-weight: var(--peso-cifra); }
.texto-franja { max-width: 62ch; }
.franja-prueba .boton {
  min-height: 30px;
  padding: 3px 12px;
  font-size: 0.8rem;
  background: transparent;
  color: var(--tinta);
  border-color: var(--destacado-borde);
}
.franja-prueba .boton:hover { background: var(--destacado-borde); color: var(--destacado-fondo); }
.franja-prueba .boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* El lateral de escritorio es una columna sticky de alto completo: con la
   franja encima tiene que encoger lo que ella ocupa. En móvil el lateral es
   una tira fija abajo y esta regla NO aplica — de ahí la media query.
   Iba sin ella y convertía la barra inferior en un panel de 1158px que
   tapaba toda la pantalla. */
@media (min-width: 761px) {
  body.con-franja .lateral { height: calc(100vh - 44px); }
}

/* ---------- Acceso, sesión y usuarios ---------- */
.pagina-acceso {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.caja-acceso {
  width: 100%;
  max-width: 380px;
  background: var(--papel-carta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 28px 26px;
}
/* La marca va sobre su negro y a sangre por arriba: la caja de acceso es
   blanca en tema claro, y el logo es blanco. */
.marca-acceso {
  background: #0a0a0a;
  margin: -28px -26px 16px;
  padding: 26px 20px 22px;
  border-radius: var(--radio) var(--radio) 0 0;
  text-align: center;
}
.marca-acceso img {
  width: auto;
  height: 128px;
  display: inline-block;
}
.rotulo-acceso {
  margin: 0 0 18px;
  text-align: center;
  font-weight: var(--peso-medio);
  font-size: 0.8rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.caja-acceso h1 { font-size: 1.2667rem; margin: 0 0 16px; }
.caja-acceso form > div { margin-bottom: 12px; }
.caja-acceso .boton { width: 100%; }
.error-acceso {
  margin: 12px 0 0;
  min-height: 1.2em;
  color: var(--terracota);
  font-size: 0.8667rem;
  font-weight: var(--peso-fuerte);
}
.pie-acceso { margin: 18px 0 0; }

/* Identidad y salida, en el pie de la barra lateral */
.identidad-sesion { margin-bottom: 8px; line-height: 1.3; }
.identidad-sesion strong { display: block; color: #fff; font-size: 0.8667rem; }
.identidad-sesion span { font-size: 0.7667rem; }
.lateral .pie .boton {
  width: 100%;
  min-height: 32px;
  color: var(--lateral-texto);
  border-color: rgba(255, 255, 255, .16);
  background: transparent;
}
.lateral .pie .boton:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* El nombre de usuario, debajo del nombre de la persona. La lista de
   personas es una tabla desde v27: las reglas de las filas sueltas y del
   editor de permisos viejo vivian aqui y se quitaron, porque definian las
   mismas clases que las nuevas y a igual especificidad gana la ultima. */
.usuario-corto { color: var(--tinta-suave); font-size: 0.8333rem; }


.subtitulo-cuentas {
  font-size: 0.8667rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  margin: 18px 0 8px;
}

/* Exonerado: entró sin pagar. Se distingue en gris y con el texto, no solo
   por el color: la tarjeta tiene que leerse igual sin verlo. */
.tarjeta-activacion.exonerada { border-style: dashed; }
.tarjeta-activacion.exonerada .monto {
  color: var(--tinta-suave);
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
}
.etiqueta-cuenta.exonerada { border-style: dashed; color: var(--tinta-suave); }
.boton-exonerar {
  border: 1px solid var(--linea);
  background: transparent;
  border-radius: 999px;
  padding: 1px 8px;
  font: inherit;
  font-size: 0.7333rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  cursor: pointer;
}
.boton-exonerar:hover { background: var(--superficie-suave); color: var(--tinta); }
.boton-exonerar[aria-pressed="true"] {
  background: var(--superficie-media);
  color: var(--tinta);
  border-style: dashed;
}
.boton-exonerar:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }

/* ---------- Accesibilidad ----------
   Dos ajustes que el usuario controla desde su pestaña. El tamaño lo lleva
   --escala sobre el rem raíz; el grosor sube TODA la escala de pesos un
   escalón de golpe, para que la jerarquía entre texto, etiqueta y cifra se
   mantenga en vez de aplanarse cuando se engorda la letra.               */
[data-letra="gruesa"] {
  --peso-texto: 500;
  --peso-medio: 600;
  --peso-fuerte: 700;
  --peso-cifra: 800;
  --peso-maximo: 900;
}

/* Grupo de opciones (tema, tamaño, grosor). Reutiliza el .chip que ya usa
   el filtro de fechas: misma forma de control en toda la aplicación. */
.grupo-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 2px;
}
.grupo-opciones .chip { min-width: 84px; justify-content: center; }

.campo-accesible { margin-bottom: 18px; }
.campo-accesible > .etiqueta-grupo {
  display: block;
  font-size: 0.8667rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  margin-bottom: 6px;
}

/* Muestra en vivo: el usuario ve el efecto sin salir de la pestaña. */
.muestra-texto {
  margin-top: 6px;
  padding: 12px 14px;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel);
}
.muestra-texto p { margin: 0 0 6px; }
.muestra-texto .cifra-muestra {
  font-size: 1.6rem;
  font-weight: var(--peso-cifra);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* Botón de instalar: aparece solo cuando el navegador ofrece instalar y
   se esconde en cuanto la aplicación ya está instalada. */
.fila-instalar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.estado-instalacion { color: var(--tinta-suave); font-size: 0.8667rem; }

/* ---------- Impresión ----------
   El botón «Imprimir» del panel imprime la vista visible; con el cajón del
   día abierto se imprime SOLO el cierre de ese día (clase cajon-abierto). */


/* ---------- Marcas de una activación ---------- */
.marcas-activacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 12px 0 4px;
}
/* 24px de alto minimo: es una zona pulsable y WCAG 2.2 (2.5.8) no baja de
   24x24. Medida antes: 91x20. La casilla en si mide 18px, pero lo que se
   pulsa es la etiqueta entera, que es la que tiene que dar la talla. */
.casilla {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  /* El label hereda el estilo de los de campo (gris y pequeño) y aquí es una
     opción que se pulsa, no el rótulo de un campo. */
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta);
}
/* Ancho y alto fijos: la regla base de los campos les pone width:100% y una
   casilla ocuparía toda la línea. */
.casilla input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--acento);
  flex: 0 0 auto;
}

/* ---------- Clases de los instructores ---------- */
.titulo-seccion {
  font-size: 1.0667rem;
  margin: 22px 0 10px;
}

/* La franja de días: un cuadrito por día que dio clase. Se ve de un golpe si
   viene seguido o a salto de mata, que es lo que no dice un número solo. */
.franja-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.dia-marcado {
  min-width: 22px;
  padding: 2px 4px;
  text-align: center;
  font-size: 0.7333rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  background: var(--superficie-media);
  border-radius: 5px;
}

.tarjeta-profesor { cursor: default; }
.tarjeta-profesor footer {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.tarjeta-profesor .boton-tarifa { flex: 0 0 auto; }

/* ---------- El tablero: tres tipos de tarjeta en la misma rejilla ----------
   El tipo NO estrena color. Lo dice el par contable que ya usa toda la
   aplicación: verde lo que entra (una activación), terracota lo que sale (lo
   que se le debe al instructor por esa clase) y NADA cuando no hay dinero
   (un aviso). Esa ausencia de cifra es lo que más rápido separa un aviso del
   resto al recorrer la rejilla con la vista.
   El filo de la izquierda se queda con lo que ya significaba — tinta =
   destacada, coral = alerta — y no pasa a significar tipo: cambiarle el
   sentido a una señal que la gente ya aprendió es peor que no tenerla. */

.monto.sale { color: var(--terracota); }
/* Un cero no sale de la caja: en terracota grande se leeria como una alarma
   que no existe. Conserva el tamano para que las tarjetas sigan alineadas. */
.monto.neutro { color: var(--tinta-suave); }
/* Ni "No vino" ni "Sin tarifa" son importes; en rojo grande parecerían una
   alarma que no existe. Sin cifras tabulares, que no son números. */
.monto.apagado {
  color: var(--tinta-suave);
  font-size: 0.8667rem;
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

/* La etiqueta de tipo se distingue de las de cuenta por el relleno, no por
   otro color: en una fila de píldoras iguales el ojo busca la que tiene
   fondo. */
.etiqueta-cuenta.etiqueta-tipo {
  background: var(--acento-tenue);
  border-color: transparent;
  color: var(--tinta);
  font-weight: var(--peso-medio);
}

/* Una clase que no se dio queda como constancia, no como trabajo hecho. */
.tarjeta-activacion.sin-dar { opacity: .68; }
.tarjeta-activacion.sin-dar:hover { opacity: 1; }

/* Un select con su boton de "+" al lado. El boton es cuadrado y del alto
   del campo para que no parezca un anadido: es parte del campo. */
.campo-con-boton {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.campo-con-boton select { flex: 1 1 auto; min-width: 0; }
.campo-con-boton .boton {
  flex: 0 0 auto;
  width: 44px;            /* WCAG 2.2: objetivo tactil */
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
}
/* Lo que paga cada cédula de un plan de grupo, al lado de su cédula. Ancho
   fijo: con el width:100% que heredan los campos se comía media fila. */
.campo-con-boton .parte-cedula { flex: 0 0 96px; width: 96px; }
.campo-con-boton input:not(.parte-cedula) { flex: 1 1 auto; min-width: 0; }
/* Con partes, la cédula ocupa su renglón entero: en la columna de 180px del
   cajón de escritorio, cédula + parte + botón dejaban la cédula en 30px y
   solo se leía «3:» (medido en la captura). */
.fila-campos > .con-partes { flex-basis: 100%; }
.nota-partes { margin: 6px 0 0; }
.nota-partes.error { color: var(--terracota); font-weight: var(--peso-fuerte); }
.nota-ventas-eventos { margin: 4px 0 0; }

/* --- Turnos (v35): cada recepcionista con su color ---
   Los cinco colores de categoría, que ya están medidos sobre la tarjeta en
   los dos temas (ver --cat-N). El color va en una franja y en la muestra, no
   en el texto: el nombre del turno se lee siempre en tinta. */
.turno-color-1 { --turno: var(--cat-1); }
.turno-color-2 { --turno: var(--cat-2); }
.turno-color-3 { --turno: var(--cat-3); }
.turno-color-4 { --turno: var(--cat-4); }
.turno-color-5 { --turno: var(--cat-5); }
.muestra-turno {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  background: var(--turno);
  vertical-align: baseline;
}
/* En la tabla: franja a la izquierda de cada fila (un borde, que se imprime
   sin «gráficos de fondo») y un tinte muy suave para seguir el turno. */
#tabla-lista-ventas tr[class*="turno-color-"] td:first-child,
#pliego-cuaderno tr[class*="turno-color-"] td:first-child { border-left: 4px solid var(--turno); }
#tabla-lista-ventas tr[class*="turno-color-"]:not(.fila-turno) td {
  background: color-mix(in srgb, var(--turno) 7%, transparent);
}
#tabla-lista-ventas tr.fila-turno td,
#pliego-cuaderno tr.fila-turno td {
  padding-top: 10px;
  padding-bottom: 6px;
  background: color-mix(in srgb, var(--turno) 16%, transparent);
  border-top: 2px solid var(--turno);
  font-size: 0.8667rem;
}
.estado-turno { color: var(--tinta-suave); }
/* El total de cada turno, al pie de sus ventas; y en el cuaderno, el del
   día entero con doble raya, que es el que se cuadra al día siguiente. */
#tabla-lista-ventas tr.fila-total-turno td {
  font-weight: var(--peso-cifra);
  border-bottom: 2px solid var(--turno);
}
#tabla-lista-ventas tr.fila-total-turno td.desglose-cuentas,
#tabla-lista-ventas tr.fila-total td.desglose-cuentas { font-weight: var(--peso-texto); }
.desglose-cuentas .efectivo { font-weight: var(--peso-cifra); }
.cuaderno .tabla-lineas .fila-total.fila-total-dia td { border-top: 3px double var(--tinta); }
.cabecera-turno {
  grid-column: 1 / -1;
  padding: 6px 10px;
  border-left: 4px solid var(--turno);
  background: color-mix(in srgb, var(--turno) 12%, transparent);
  border-radius: 6px;
  font-size: 0.8667rem;
}
.cajas-del-dia { margin: 0 0 12px; }
.chip-caja[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--turno); }
.ir-a-filtros { margin-left: auto; }
.resumen-ventas { margin-top: 24px; }
/* Lo que llegó al banco, debajo de lo calculado y más pequeño. */
.bs-banco { font-size: 0.8rem; color: var(--tinta-suave); font-weight: var(--peso-texto); }
.reparto-bs-banco { min-width: 0; }
.nota-ventas-eventos.error { color: var(--terracota); font-weight: var(--peso-fuerte); }

/* El ojo de las contraseñas, dentro del campo a la derecha. 40px de lado:
   por encima del mínimo de 24 de WCAG 2.2 y cómodo con el dedo. */
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 46px; }
.boton-ver-clave {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--tinta-suave);
  cursor: pointer;
}
.boton-ver-clave:hover { color: var(--tinta); background: var(--superficie-suave); }
.boton-ver-clave:active { background: var(--superficie-media); }
.boton-ver-clave:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.boton-ver-clave[aria-pressed="true"] { color: var(--tinta); }

/* Un dato que la aplicacion calcula y nadie teclea. Se ve como cifra, no
   como campo: un input deshabilitado invita a pulsarlo igual. */
.dato-calculado {
  margin: 0;
  padding: 9px 0 0;
  font-size: 1.0667rem;
  font-weight: var(--peso-cifra);
  color: var(--tinta);
}
/* El campo si existe (se guarda) pero lo llena el programa. El fondo dice
   que no se escribe ahi sin gritarlo con un gris de deshabilitado. */
.campo-calculado {
  background: var(--superficie-suave);
  cursor: default;
}
/* Un abono adelantado no es una cuenta ni una alerta: se separa con el
   verde del dinero que entra, que es lo que es. */
.etiqueta-cuenta.etiqueta-abono {
  border-color: var(--verde);
  color: var(--verde);
}
.aviso-abonos {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 4px solid var(--verde);
  background: var(--verde-tenue);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 0.8667rem;
  color: var(--tinta);
}

/* Un campo que hace falta y esta vacio: se marca al escribir, no cuando el
   servidor devuelve un error seco. */
.reparto-ref.falta,
input.falta,
select.falta {
  border-color: var(--terracota);
  background: var(--terracota-tenue);
}
/* Una referencia ya usada en esa cuenta. Es aviso, no bloqueo: pueden ser
   dos pagos distintos y quien esta en el mostrador lo sabe. */
.reparto-ref.ref-repetida {
  border-color: var(--terracota);
  outline: 2px solid var(--terracota);
}
/* Bolivares calculados con una tasa escrita a mano: se distingue de los que
   salen de la del dia, o nadie sabria cual se uso. */
.reparto-bs.tasa-propia { color: var(--cat-2); font-style: italic; }
.reparto-bs { white-space: nowrap; }
/* La tabla de reparto tiene ahora siete columnas. */
.tabla-lineas .reparto-ref { min-width: 120px; }
.tabla-lineas .reparto-fecha { min-width: 140px; }
.tabla-lineas .reparto-tasa { min-width: 84px; }

/* ---------- Caja ---------- */
/* Las trabas van arriba y en coral: son lo que impide cerrar, y enterarse
   al pulsar el boton es enterarse tarde. */
.avisos-caja { margin: 0 0 14px; }
.avisos-caja .traba {
  margin: 0 0 6px;
  padding: 10px 12px;
  border-left: 4px solid var(--terracota);
  background: var(--terracota-tenue);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 0.8667rem;
  color: var(--tinta);
}
/* Una sola tarjeta en la rejilla de dos columnas: que ocupe el ancho entero
   en vez de dejar medio folio en blanco al lado. */
.rejilla-registro.una-sola { grid-template-columns: minmax(0, 1fr); }

.resumen-arqueo { margin: 12px 0; }
.resumen-arqueo dl { margin: 0; }
.diferencia-celda.cuadra, .linea-dato.cuadra dd { color: var(--verde); }
.tabla-lineas td.num .arqueo-contado { width: 110px; text-align: right; }

/* Una cuenta se abre al tocarla y se queda marcada mientras se mira. */
.tarjeta-cuenta { cursor: pointer; }
.tarjeta-cuenta.abierta { border-color: var(--tinta); }
.tarjeta-cuenta.abierta::before {
  content: "";
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 4px;
  background: var(--tinta);
  border-radius: var(--radio) 0 0 var(--radio);
}
/* Una transferencia ya confirmada se apaga: lo que pide atencion es lo que
   falta por confirmar. */
.tabla-transferencias tr.conciliada { opacity: .62; }
.tabla-transferencias tr.conciliada:hover { opacity: 1; }
.tabla-transferencias .conciliar.hecho { color: var(--verde); }
.tabla-transferencias .ref-celda { white-space: nowrap; }
.tabla-transferencias td.tasa-propia { color: var(--cat-2); font-style: italic; }
.ver-capture { cursor: pointer; text-decoration: underline; }
.grupo-repetida { margin-bottom: 14px; }
.grupo-repetida .linea-dato { gap: 10px; }

/* Un cumpleanos no es una alarma: va en el gris de la marca, no en coral. */
.aviso-cumple {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 4px solid var(--acento);
  background: var(--acento-tenue);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 0.8667rem;
}

/* ---------- El reparto dentro del cajon ----------
   Siete columnas no caben en un cajon de 420 px: medido, la tabla ocupaba
   573 px dentro de un contenedor de 364 y el select de la cuenta quedaba en
   40 px, ilegible, con Tasa y Bs fuera de la pantalla. Aqui NO es una tabla:
   es una ficha por transferencia, que es el mismo patron que ya se usa en
   movil. El cajon es tan estrecho como un movil y se trata igual. */
#cajon-activacion .tabla-desplazable { overflow: visible; }
#cajon-activacion #tabla-reparto,
#cajon-activacion #tabla-reparto tbody { display: block; }
#cajon-activacion #tabla-reparto thead { display: none; }
#cajon-activacion #tabla-reparto tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie-suave);
}
#cajon-activacion #tabla-reparto td {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  min-height: 0;
}
#cajon-activacion #tabla-reparto td::before {
  content: attr(data-etiqueta);
  font-size: 0.7333rem;
  color: var(--tinta-suave);
  /* La regla general del movil le pone flex:0 0 96px a esta etiqueta porque
     alli va al LADO del valor. Aqui la celda es una columna, asi que esos
     96px se convertian en 96px de ALTO: cada celda medía 140px y el reparto
     de un solo pago ocupaba 468px, pantalla y media de telefono. Medido. */
  flex: 0 0 auto;
  /* Pegada a la izquierda, encima de su campo. Heredando el text-align de
     la celda, la etiqueta de una columna de numeros salia centrada sobre un
     campo alineado a la izquierda. */
  align-self: flex-start;
}
#cajon-activacion #tabla-reparto td input,
#cajon-activacion #tabla-reparto td select { width: 100%; min-width: 0; }
/* Los Bs son un dato calculado, no un campo: se alinean con su etiqueta y
   no se estiran. */
#cajon-activacion #tabla-reparto td.reparto-bs {
  justify-content: flex-end;
  text-align: left;
  padding-bottom: 6px;
}
/* Quitar la fila ocupa el ancho entero y va a la derecha: es destructivo y
   no debe quedar al lado de un campo que se rellena. */
#cajon-activacion #tabla-reparto td.celda-quitar {
  grid-column: 1 / -1;
  /* En fila: la estrella del renglón y el aspa de quitarlo, a la derecha y
     una al lado de la otra (v39). En columna quedaban una debajo de otra y
     el cajón crecía sin necesidad. */
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
#cajon-activacion #tabla-reparto td.celda-quitar::before { content: none; }
/* v38: la moneda va pegada al importe, a su izquierda y sin estirarse. */
#cajon-activacion #tabla-reparto .monto-con-moneda {
  display: flex;
  gap: 6px;
  min-width: 0;
  /* El 100% es necesario: la celda es una columna con align-items:center
     (regla del movil), asi que NO estira a sus hijos y la casilla de Bs se
     salia de su celda -- 194 px dentro de 148 px, medido en el telefono. */
  width: 100%;
}
#cajon-activacion #tabla-reparto .monto-con-moneda select { width: auto; flex: 0 0 auto; }
#cajon-activacion #tabla-reparto .monto-con-moneda input { flex: 1 1 auto; width: auto; }
/* En Bs, el $ calculado es un dato y no un campo, como los Bs en $. */
#cajon-activacion #tabla-reparto tr.en-bs td.reparto-bs { font-weight: var(--peso-fuerte); }

/* v40: la hoja del cuaderno con anchos declarados. Con table-layout fijo,
   las columnas miden lo que dice el colgroup y la tabla NUNCA se sale del
   papel: lo que no cabe se parte en dos líneas. Antes la tabla medía su
   contenido y Chrome cortaba la derecha (había que imprimir al 50 %). */
.tabla-lineas.de-ancho-fijo { table-layout: fixed; }
/* Cuánto encoge la letra de la cabecera del cuaderno al imprimir. La pone
   cada tabla (pintarInformeCuaderno) solo cuando con muchas cuentas la
   palabra no cabe entera; por defecto, nada. */
#pliego-cuaderno { --escala-cabecera: 1; }
.tabla-lineas.de-ancho-fijo td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* El encabezado parte por palabras, nunca por letras: «ZELLE (SUPLEMENTOS)»
   salía como «SUPLEMENTO / S)» y se leía fatal. */
.tabla-lineas.de-ancho-fijo th {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
/* Las cifras no se parten a mitad de número: prefieren encoger la columna
   de al lado. */
.tabla-lineas.de-ancho-fijo td.num { overflow-wrap: normal; }
.aviso-hoja { margin: 10px 0 4px; font-weight: var(--peso-fuerte); }

/* v39: el cuaderno con sus rayas, como el de papel. Maira lo marcó a mano
   sobre la hoja impresa (18/09): rayas verticales entre columnas y las filas
   de total separadas. Van en pantalla y en papel, para que se vea igual. */
#pliego-cuaderno .tabla-lineas th,
#pliego-cuaderno .tabla-lineas td,
#pliego-transferencias .tabla-lineas th,
#pliego-transferencias .tabla-lineas td {
  border-right: 1px solid var(--linea);
}
#pliego-cuaderno .tabla-lineas th:last-child,
#pliego-cuaderno .tabla-lineas td:last-child,
#pliego-transferencias .tabla-lineas th:last-child,
#pliego-transferencias .tabla-lineas td:last-child { border-right: 0; }
#pliego-cuaderno .tabla-lineas tr.fila-total td,
#pliego-cuaderno .tabla-lineas tr.fila-total-dia td {
  border-top: 2px solid var(--tinta);
}

/* v39: las miniaturas de los captures dentro del cajón. */
.lista-captures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.ficha-capture-cajon {
  margin: 0;
  display: grid;
  gap: 4px;
  justify-items: center;
}
.ficha-capture-cajon img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  cursor: zoom-in;
}
.ficha-capture-cajon.pendiente img { opacity: 0.7; border-style: dashed; }
.ficha-capture-cajon .quitar-capture { font-size: 0.8rem; padding: 2px 8px; }

/* El cierre del día, encima de los turnos. */
#bloque-cierre-dia { margin-bottom: 14px; }
#bloque-cierre-dia .fila-turno-dia { color: var(--tinta-suave); }

/* v39: las casillas de número, sin contador. Las flechitas ocupan sitio, se
   pulsan sin querer y con la rueda del ratón cambiaban el importe al pasar
   por encima («al usar la rueda del mouse siempre se joden», Maira). El foco
   se quita en app.js; aquí se apagan las flechas. */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Los Bs calculados por tasa (nadie dijo lo que llegó al banco) van más
   apagados: es una cuenta, no un hecho. */
.bs-calculado { color: var(--tinta-suave); font-style: italic; }

/* La estrella de un renglón del reparto. Apagada es «se puede destacar»;
   encendida, destacado (v39). */
.estrella-pago {
  padding: 4px 8px;
  line-height: 1;
  color: var(--tinta-suave);
  background: transparent;
}
.estrella-pago.marcada { color: var(--cat-2); font-weight: var(--peso-maximo); }

/* El botón de actualizar, en la barra lateral sobre las pestañas. */
.refrescar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 10px;
  font-size: 0.8667rem;
}
.refrescar.girando svg { animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* v38: los turnos cerrados de una caja, en una lista corta bajo sus chips. */
.turnos-caja {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 0.8667rem;
  color: var(--tinta-suave);
}
.turnos-caja li[aria-current="true"] { color: var(--tinta); font-weight: var(--peso-fuerte); }
.turnos-caja .cambio-turno { color: var(--alarma-tinta); }

/* v38: «recarga». Abajo y a lo ancho, por encima del cajón: si la pantalla
   es vieja o la sesión cambió, lo que se escriba puede no guardarse bien. */
.barra-recarga {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: var(--radio);
  background: var(--aviso-fondo);
  color: var(--aviso-tinta);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  font-weight: var(--peso-fuerte);
}
.barra-recarga .texto-recarga { min-width: 0; }
.barra-recarga .boton { flex: 0 0 auto; }

/* ---------- Mas opciones ----------
   Lo que casi nunca se toca. El resumen es un control: 44 px de alto y con
   su foco visible, no un texto que resulta que se puede pulsar. */
.mas-opciones {
  margin: 18px 0 0;
  border-top: 1px solid var(--linea);
}
.mas-opciones > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 2px;
  cursor: pointer;
  font-weight: var(--peso-medio);
  color: var(--tinta-suave);
  list-style: none;
}
/* El titulo se parte en dos lineas: el rotulo fijo y, debajo, lo que hay
   guardado dentro. Va en el summary y no dentro del desplegable porque su
   razon de ser es leerse CON el desplegable cerrado. */
.mas-opciones > summary { flex-wrap: wrap; }
/* Base 0, no auto. Al repartir items en lineas el navegador usa el tamaño
   HIPOTETICO (con base auto, el ancho maximo del texto), no el que tendra
   despues de encogerse: con base auto el rotulo no cabia junto al "+" y se
   iba a una linea, dejando al "+" solo en la suya. Encoger es cosa de
   despues del reparto; para el reparto manda la base. */
.rotulo-opciones { flex: 1 1 0; min-width: 0; }
.pista-opciones {
  flex: 1 0 100%;
  font-weight: var(--peso-texto);
  font-size: 0.8333rem;
  color: var(--tinta-suave);
}
.pista-opciones:empty { display: none; }
/* Abierto no hace falta: los campos estan a la vista. */
.mas-opciones[open] .pista-opciones { display: none; }

.mas-opciones > summary::-webkit-details-marker { display: none; }
.mas-opciones > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 6px;
  font-weight: var(--peso-cifra);
}
.mas-opciones[open] > summary::before { content: "\2212"; }
.mas-opciones > summary:hover { color: var(--tinta); }
.mas-opciones > summary:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
.mas-opciones[open] > summary { color: var(--tinta); }

/* ---------- Historico por dias ----------
   Una lista plana mezcla el lunes con el viernes. El encabezado dice el dia
   y lo que entro ese dia, que es lo que se busca al mirar hacia atras. */
.dia-historico {
  grid-column: 1 / -1;      /* la rejilla es de tarjetas: el dia las cruza */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--linea);
}
.dia-historico:first-child { margin-top: 0; }
/* El grupo de lo urgente se marca con el coral de las alertas: es lo unico
   de la pantalla que pide accion ahora mismo. */
.dia-historico.urgente { border-bottom-color: var(--terracota); }
.dia-historico.urgente h3,
.dia-historico.urgente .resumen-dia { color: var(--terracota); }
.dia-historico h3 {
  margin: 0;
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
}
.dia-historico .resumen-dia {
  font-size: 0.8rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* ---------- Bolivares debajo de cada importe ----------
   El gimnasio cobra en $ pero la gente paga en Bs. La cifra manda y los
   bolivares van debajo, pequenos y en tinta suave: informan, no compiten. */
.columna-monto {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}
.en-bolivares {
  font-size: 0.7333rem;
  font-weight: var(--peso-medio);
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Filtros plegados ----------
   Ocupaban la primera pantalla entera: tres filas de chips, dos
   desplegables, dos fechas y el buscador. El resumen de lo que hay puesto
   va en el propio boton para no mirar cifras a ciegas. */
.cajon-filtros { margin: 0 0 16px; }
.cajon-filtros > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-carta);
}
.cajon-filtros > summary::-webkit-details-marker { display: none; }
.cajon-filtros > summary::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  /* Embudo: dice «filtro» sin depender de que se lea la palabra. */
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E");
}
.cajon-filtros > summary:hover { border-color: var(--tinta); }
.cajon-filtros > summary:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
.etiqueta-filtros { font-weight: var(--peso-fuerte); }
.resumen-filtros {
  color: var(--tinta-suave);
  font-size: 0.8667rem;
  overflow-wrap: anywhere;
}
.cajon-filtros[open] > summary { margin-bottom: 12px; }

/* ---------- Que la letra grande no corte nada ----------
   Con la escala al 1,5 un input[type=date] recorta por dentro y ensena
   «dd/mm/» sin el ano. No lo delata scrollWidth: hay que darle sitio. */
.fechas-propias input[type="date"] { min-width: 0; flex: 1 1 auto; }
@media (max-width: 620px) {
  /* La fila se apila y unos titulos en horizontal ya no dicen a que columna
     se refieren; cada campo lleva su propia etiqueta accesible. */
  .titulos-lista { display: none; }
  /* Cada fecha en su linea: dos no caben con la letra crecida. */
  .fechas-propias { flex-wrap: wrap; }
  .fechas-propias input[type="date"] { flex: 1 1 100%; }
  .fechas-propias .separador { display: none; }
}
/* La cabecera del calendario pedia 374 px en 326: se deja desplazar dentro
   de su tarjeta en vez de recortar los dias. */
.calendario, .calendario-cabecera { min-width: 0; }
.envoltura-calendario { overflow-x: auto; }

/* ---------- Las cuentas, arriba en Ventas ----------
   Siempre las mismas y en el mismo sitio, aunque no haya entrado nada: si
   aparecieran y desaparecieran habria que leer cual falta en vez de mirar
   una cifra. */
.rejilla-cuentas-fijas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.tarjeta-cuenta-fija {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel-carta);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.tarjeta-cuenta-fija:hover { border-color: var(--linea-fuerte); }
.tarjeta-cuenta-fija:active { transform: scale(.995); }
.tarjeta-cuenta-fija:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
/* Una cuenta por la que no entro nada sigue estando, pero apagada: ocupa su
   sitio sin pedir atencion. */
.tarjeta-cuenta-fija.vacia .monto { color: var(--tinta-suave); }
.tarjeta-cuenta-fija.vacia { opacity: .72; }
.tarjeta-cuenta-fija.vacia:hover { opacity: 1; }
/* Lo que entro y no se sabe por donde: eso SI pide atencion. */
.tarjeta-cuenta-fija.sin-cuenta { border-color: var(--terracota); opacity: 1; }
.tarjeta-cuenta-fija.sin-cuenta .nombre-cuenta { color: var(--terracota); }
.nombre-cuenta {
  font-weight: var(--peso-fuerte);
  font-size: 0.8667rem;
  overflow-wrap: anywhere;
}
.tarjeta-cuenta-fija .monto { font-size: 1.2rem; }
.pie-cuenta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 0.7333rem;
  color: var(--tinta-suave);
}
.pie-cuenta .sin-confirmar { color: var(--terracota); }

/* ---------- El cajon de una cuenta ---------- */
.resumen-cuenta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}
.resumen-cuenta .monto { font-size: 1.4667rem; }
.resumen-cuenta .nota-ayuda { flex: 1 1 100%; margin: 0; }
.lista-pagos { display: flex; flex-direction: column; gap: 10px; }
/* Un pago no es una fila de tabla: en el cajon no caben siete columnas y
   aqui se repasa de uno en uno, no se comparan. */
.lista-pagos .pago {
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie-suave);
}
.lista-pagos .pago header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.lista-pagos .pago footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
/* Ya confirmada: sigue ahi pero lo que pide trabajo es la que no lo esta. */
.lista-pagos .pago.conciliado { opacity: .7; }
.lista-pagos .pago.conciliado:hover { opacity: 1; }
.boton.conciliar-pago.hecho { color: var(--verde); border-color: var(--verde); }
/* Los tres ultimos digitos, que son los que se mandan por fuera. */
.etiqueta-cuenta.ref strong { color: var(--tinta); font-weight: var(--peso-cifra); }
.para-copiar {
  width: 100%;
  margin-bottom: 12px;
  font-family: inherit;
  font-size: 0.8667rem;
}

/* Cuando una venta lleva varias personas. */
.mas-personas { color: var(--tinta-suave); font-weight: var(--peso-medio); }
.fila-cedula { margin-top: 6px; }
/* El destacado, suelto y pegado al importe. */
.marcas-activacion.marca-suelta { margin: 0; align-self: end; }

/* ---------- Fila de tipos ---------- */
.fila-tipos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
/* Los dos interruptores no son un tipo más: se separan con una línea para
   que no se lean como la quinta opción del grupo de la izquierda. */
.fila-tipos .interruptores {
  padding-left: 12px;
  border-left: 1px solid var(--linea);
}
@media (max-width: 700px) {
  .fila-tipos .interruptores { padding-left: 0; border-left: 0; }
}

.cabecera-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.cabecera-seccion .titulo-seccion { margin-bottom: 0; }

/* ---------- Selector de tipo del cajón ----------
   Es la primera pregunta del formulario, así que ocupa como una pregunta y
   no como una fila de botones: al abrir en blanco hay que poder cambiar de
   idea sin buscar dónde. */
.selector-tipo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.opcion-tipo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  min-height: 44px;              /* WCAG 2.2: objetivo táctil */
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-carta);
  color: var(--tinta);
  cursor: pointer;
  font: inherit;
  transition: border-color .15s, background .15s;
}
.opcion-tipo:hover { border-color: var(--tinta); background: var(--superficie-suave); }
.opcion-tipo:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.opcion-tipo:active { background: var(--superficie-media); }
/* La elegida se marca con el fondo de tinta y no solo con el borde: un borde
   de 1 px de diferencia no se ve en un móvil a un brazo de distancia. */
.opcion-tipo.elegida {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--papel-carta);
}
.opcion-tipo.elegida .opcion-detalle { color: var(--papel-carta); opacity: .82; }
/* Deshabilitado = tarjeta ya guardada. Se sigue leyendo cuál es (por eso no
   baja de 4,5:1) pero no invita a pulsarla. */
.opcion-tipo:disabled { cursor: default; }
.opcion-tipo:disabled:not(.elegida) { opacity: .45; }
.opcion-tipo:disabled:hover {
  border-color: var(--linea-fuerte);
  background: var(--papel-carta);
}
.opcion-tipo.elegida:disabled:hover { background: var(--acento); border-color: var(--acento); }
.opcion-nombre { font-weight: var(--peso-fuerte); }
.opcion-detalle { font-size: 0.7667rem; color: var(--tinta-suave); }

@media (max-width: 560px) {
  /* En el móvil, las tres EN FILA y sin el texto de apoyo: en columna
     ocupaban 170 px antes del primer campo, y elegir el tipo es lo que
     menos se toca (el 95 % de las veces es una activación). El texto de
     apoyo sigue en el aria-label del grupo. Auditoría del 19/09. */
  .selector-tipo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
  .opcion-tipo { align-items: center; text-align: center; padding: 8px 6px; }
  .opcion-tipo .opcion-detalle { display: none; }
  .opcion-nombre { font-size: 0.8rem; }
}

/* El fieldset solo está para poder deshabilitar el grupo entero de una vez;
   no debe dibujar nada. */
.grupo-tipo {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;      /* sin esto un fieldset no encoge y desborda en móvil */
}

/* ---------- Alerta: lo que hay que mirar ya ----------
   El coral es el único color de alarma de la aplicación, así que una tarjeta
   en alerta lo usa en el filo, igual que las destacadas usan la tinta. Las
   dos marcas pueden convivir en la misma tarjeta: destacar es para calcular,
   alertar es para que salte a la vista. */
.tarjeta-activacion.en-alerta {
  border-color: var(--terracota);
}
.tarjeta-activacion.en-alerta::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 4px;
  background: var(--terracota);
  border-radius: var(--radio) 0 0 var(--radio);
}
/* Si está destacada Y en alerta manda la alerta: es la que pide acción. */
.tarjeta-activacion.destacada.en-alerta::before { background: var(--terracota); }

/* v34: con solo el filo, una alerta y un aviso pendiente se pasaban por alto
   en una rejilla de cuarenta tarjetas (lo dijo Maira). Ahora llevan fondo,
   filo más ancho y la marca en sólido. Van DESPUÉS de las reglas de arriba
   a propósito: a igual especificidad gana la última. */
.tarjeta-activacion.en-alerta {
  background: var(--alarma-fondo);
  border-color: var(--alarma-borde);
  box-shadow: 0 0 0 1px var(--alarma-borde);
}
.tarjeta-activacion.en-alerta::before,
.tarjeta-activacion.destacada.en-alerta::before { width: 6px; background: var(--alarma-borde); }
.tarjeta-activacion.en-alerta .marca-descuadre {
  background: var(--alarma-borde);
  color: var(--sobre-alarma);
}
.tarjeta-activacion.aviso-pendiente {
  background: var(--aviso-pendiente-fondo);
  border-color: var(--aviso-pendiente-borde);
  box-shadow: 0 0 0 1px var(--aviso-pendiente-borde);
}
.tarjeta-activacion.aviso-pendiente::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 6px;
  background: var(--aviso-pendiente-borde);
  border-radius: var(--radio) 0 0 var(--radio);
}
.tarjeta-activacion.aviso-pendiente .etiqueta-tipo {
  background: var(--aviso-pendiente-solido);
  color: var(--sobre-aviso);
}
.tarjeta-activacion.aviso-pendiente .boton-resolver { color: var(--aviso-pendiente-tinta); }

/* Resuelta o pagada: sigue ahí como constancia, pero sin pedir atención. */
.tarjeta-activacion.resuelta { opacity: .6; }
.tarjeta-activacion.resuelta:hover { opacity: 1; }

/* «Hay que llamar» se abre con seis y un botón. Con las 26 de golpe medía
   1.007 px —más que las ocho tarjetas KPI juntas— y empujaba las cuentas y
   las gráficas una pantalla entera hacia abajo (medido el 19/09). */
.ver-mas-vencimientos {
  margin-top: 10px;
  width: 100%;
  justify-content: center;
  /* Fantasma del todo se leía como una línea de texto centrada, y en el
     teléfono no hay hover que lo desmienta. Lleva filo, y del mismo trazo
     discontinuo con el que se separan las filas de arriba: así se lee como
     la continuación de la lista y no como un botón pegado. Va DESPUÉS de
     .boton-fantasma a propósito: a igual especificidad gana la última. */
  border: 1px dashed var(--linea);
  color: var(--tinta-suave);
}
.ver-mas-vencimientos:hover { color: var(--tinta); border-style: solid; }
.fila-vencimiento.vencimiento-de-mas { display: none; }

/* ---------- Reporte ---------- */
.tabla-reporte th.num, .tabla-reporte td.num { text-align: right; }
/* El total se separa con un filo, no con negrita sola: en una tabla de
   cifras tabulares la negrita se confunde con una fila cualquiera. */
.tabla-reporte .fila-total td {
  border-top: 2px solid var(--linea-fuerte);
  font-weight: var(--peso-cifra);
}
/* Un saldo en rojo es dinero que falta en esa cuenta, y el signo menos lo
   dice igual sin depender del color. */
.tabla-reporte td.negativo { color: var(--terracota); }
.marca-bloqueado { font-size: 0.8667rem; }

.acciones-formulario {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* El botón del candado se separa del de guardar: pulsar uno por el otro
   sería bloquear un día sin querer. */
#bloquear-dia { margin-left: 8px; }
#bloquear-dia[aria-pressed="true"] {
  border-color: var(--tinta);
  color: var(--tinta);
}

/* ---------- Buscar una persona ---------- */
.buscador-persona { margin-bottom: 16px; }
.fila-buscador {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* min-width:0 para que el campo pueda encoger: un input[type=search] trae
   ancho mínimo propio y en 360px empujaba el botón fuera de la tarjeta. */
.fila-buscador input { flex: 1 1 180px; min-width: 0; }
.fila-buscador .boton { flex: 0 0 auto; }
/* En 360px no caben los tres en una línea y «Limpiar» baja a la suya. Con el
   tamaño normal se leía como un título de sección, así que va en pequeño. */
.fila-buscador #limpiar-busqueda {
  font-size: 0.8667rem;
  padding: 4px 10px;
  min-height: 0;
  font-weight: 400;   /* no hay token para el peso normal en este proyecto */
}

.ficha-persona {
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 12px;
}
.cabecera-persona {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cedula-persona { font-size: 1.0667rem; }
/* La nota se lleva el hueco sobrante y así la cifra queda a la derecha. */
.cabecera-persona .nota-ayuda { flex: 1 1 auto; }

.visitas-persona { margin-top: 8px; }
.fila-visita {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--linea);
}
.fila-visita:last-child { border-bottom: 0; }
.fecha-visita { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.fila-visita .cifra { flex: 0 0 auto; }
/* Una visita exonerada se atenúa: está ahí como constancia, pero no es
   dinero y no debe leerse con el mismo peso que un cobro. */
.fila-visita.exonerada { opacity: .72; }

/* ---------- Menú de descarga ---------- */
/* El contenedor tiene que estar posicionado o el menu se ancla al body y
   acaba fuera de la pantalla: lo medi en y=-45. */
.acciones-vista { position: relative; }
.menu-descarga {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--papel-carta);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--sombra);
}
.menu-descarga .boton { justify-content: flex-start; text-align: left; }

/* ---------- Clave sin cambiar ---------- */
/* Con la clave de fábrica o temporal el servidor solo responde a tres rutas.
   Dejar las pestañas a la vista sería ofrecer botones que devuelven 403: se
   esconden hasta que la persona cambie la clave. */
body.clave-pendiente .pestania:not([data-vista="cuenta"]),
body.clave-pendiente .chip-reduccion { display: none; }

/* ---------- Vencimientos: a quién llamar ---------- */
/* Va antes que las cuentas en el panel: es lo que hay que hacer hoy. */
.fila-vencimiento {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--linea);
}
.fila-vencimiento:last-child { border-bottom: 0; }
.cedula-vencimiento { flex: 0 0 auto; font-weight: var(--peso-fuerte); }
/* El plazo se lleva el espacio sobrante para que la cifra quede alineada
   a la derecha sin necesidad de una rejilla. */
.plazo-vencimiento { flex: 1 1 auto; color: var(--tinta-suave); font-size: 0.8667rem; }
.fila-vencimiento .cifra { flex: 0 0 auto; }
/* Lo ya vencido en rojo; lo que aún no, en tinta normal. El color aquí SÍ
   informa: separa "ya lo perdiste" de "aún estás a tiempo". */
.fila-vencimiento.vencida .cedula-vencimiento,
.fila-vencimiento.vencida .plazo-vencimiento { color: var(--terracota); }

.atajos-vencimiento {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* ---------- Cobro sin cuenta ---------- */
/* El select se marca en rojo hasta que se elige cuenta: el día entero se
   rechaza si falta, así que hay que verlo antes de pulsar Guardar. */
.tabla-lineas select.sin-cuenta {
  border-color: var(--terracota);
}

/* ---------- Móvil ----------
   OJO: estas media queries van al FINAL del archivo a propósito: a igual
   especificidad gana la última regla, y estar dentro de una media query
   no da prioridad (nos pasó con un scroll de pestañas que nunca funcionó). */
/* ===========================================================================
   Avisos: el error NO se escapa
   ===========================================================================
   Antes el acierto y el fallo eran la misma caja de 10px que se iba sola a
   los 3,5 segundos. Cobrando con el telefono en la mano, el fallo pasaba sin
   verse y la venta se quedaba sin guardar. Ahora el error ocupa, lleva un
   aspa para cerrarlo y se queda hasta que alguien lo cierre. */
.aviso {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aviso .icono-aviso {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: var(--peso-maximo);
  background: rgba(255, 255, 255, .22);
}
.aviso .texto-aviso { min-width: 0; }
.aviso.error {
  /* Rojo fijo, NO --terracota: en el tema oscuro ese token es claro (es un
     color de texto) y dejaba letra blanca a 2,66:1. Asi son 7,63:1. */
  background: var(--aviso-error);
  /* Mas grande que el aviso normal a proposito: el tamaño es lo que hace
     que se mire. Y borde claro para que se despegue del fondo oscuro. */
  padding: 13px 12px 13px 16px;
  font-size: 1rem;
  max-width: min(92vw, 520px);
  border: 2px solid #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  align-items: flex-start;
  animation: sacudir .28s ease-in-out;
}
.aviso.error .icono-aviso {
  width: 24px;
  height: 24px;
  font-size: 1rem;
  background: var(--aviso-tinta);
  color: var(--aviso-error);   /* 7,63:1 dentro del circulo */
  margin-top: 1px;
}
.aviso .cerrar-aviso {
  flex: 0 0 auto;
  /* 44x44 de zona tactil: es lo minimo que se acierta con el pulgar. */
  min-width: 44px;
  min-height: 44px;
  margin: -12px -8px -12px 4px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 1.0667rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.aviso .cerrar-aviso:hover { background: rgba(255, 255, 255, .18); }
.aviso .cerrar-aviso:active { background: rgba(255, 255, 255, .32); }
.aviso .cerrar-aviso:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}
@keyframes sacudir {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* Quien entro a nombre del instructor. Se separa de la linea de arriba con
   un filo: son dos cuentas distintas (cuanta gente habia en su clase y
   cuanta gente vino por el) y seguidas sin nada en medio se leen como una
   sola frase. */
.entraron-por-el {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dotted var(--linea);
  color: var(--tinta);
}
.entraron-por-el strong { font-variant-numeric: tabular-nums; }

/* El buscador de la tabla de ventas: pegado a la tabla, no flotando. */
.buscador-tabla {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.buscador-tabla input { flex: 1 1 auto; min-width: 0; }
.buscador-tabla .nota-ayuda { flex: 0 0 auto; margin: 0; }
/* Una fila de la tabla de ventas se abre como la tarjeta: se dice con el
   cursor y con el resalte, no solo esperando que alguien lo pruebe. */
/* El rayado del cuaderno, que es lo que aquí ya se sabe leer: raya fina
   entre filas, raya vertical entre columnas y la cabecera subrayada. Sin
   esto las filas eran texto flotando y seguir un renglón de la cédula hasta
   la nota no había por dónde. */
#tabla-lista-ventas { border-collapse: collapse; }
#tabla-lista-ventas th,
#tabla-lista-ventas td {
  border-bottom: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  padding: 7px 10px;
}
#tabla-lista-ventas th:last-child,
#tabla-lista-ventas td:last-child { border-right: 0; }
#tabla-lista-ventas thead th {
  border-bottom: 2px solid var(--tinta);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  /* Se queda arriba al desplazar: con cuarenta filas, a media tabla ya no
     se sabe qué columna es cuál. */
  position: sticky;
  top: 0;
  background: var(--papel-carta);
  z-index: 1;
}
/* Franja alterna: ayuda a no cambiarse de renglón a mitad de camino. */
#tabla-lista-ventas tbody tr:nth-child(even) { background: var(--superficie-suave); }

#tabla-lista-ventas tbody tr { cursor: pointer; }
/* El hover, con color Y con un filo a la izquierda: en una tabla ancha un
   cambio de fondo suave no se ve al otro extremo de la fila. */
#tabla-lista-ventas tbody tr:hover,
#tabla-lista-ventas tbody tr:nth-child(even):hover {
  background: var(--acento-tenue);
  box-shadow: inset 3px 0 0 var(--acento);
}
#tabla-lista-ventas tbody tr:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}
#tabla-lista-ventas .fila-sin-cobro { color: var(--tinta-suave); }
/* Lo que en el teléfono va debajo de la cédula: en el ordenador tiene su
   columna y aquí no sale. */
#tabla-lista-ventas .dia-en-movil,
#tabla-lista-ventas .nota-en-movil,
#tabla-lista-ventas .rotulo-total-movil { display: none; }
/* Los importes, con cifras tabulares: si no, las columnas de dinero no
   quedan alineadas por la coma y comparar dos filas cuesta. */
#tabla-lista-ventas td.num { font-variant-numeric: tabular-nums; }

/* Un campo que rellena la aplicacion se ve distinto del que se teclea: si
   no, nadie sabe si ese numero lo puso una persona o el programa, y se
   guarda sin mirarlo. Sigue siendo editable. */
/* Va con el elemento delante A PROPOSITO. La regla base de los campos es
   `input[type="date"], input[type="number"]...`, y un selector de atributo
   pesa lo mismo que una clase: (0,1,1) contra el (0,1,0) de `.campo-sugerido`
   a secas. Ganaba la base y el borde discontinuo no se veia NUNCA, justo en
   los campos de fecha y de numero, que son los que se rellenan solos.
   Igualados a (0,1,1), manda este por ir despues en el fichero. */
input.campo-sugerido,
select.campo-sugerido,
textarea.campo-sugerido {
  border-style: dashed;
  border-color: var(--linea-fuerte);
}
/* Al escribir en el se vuelve normal: ya no lo puso la aplicacion. */
input.campo-sugerido:focus,
select.campo-sugerido:focus,
textarea.campo-sugerido:focus {
  border-style: solid;
}
.nota-sugerida:empty { display: none; }
/* Cuanto dura un plan: el numero, corto (es un entero de una o dos cifras),
   y al lado su unidad. Mas estrechos que el precio. */
.fila-forma .dura-plan { width: 70px; flex: 0 0 70px; }
.fila-forma .unidad-plan { width: 100px; flex: 0 0 100px; }
/* El rotulo "Cuanto dura" cubre las DOS columnas: 70 + 10 de hueco + 100.
   Va con id y no con la clase porque las otras listas (cuentas,
   instructores, tipos de clase) tienen sus propias columnas y esto les
   descuadraria los titulos. */
#titulos-planes > span:nth-child(3) { flex: 0 0 180px; }

/* Un renglon por cedula dentro de una celda. La cedula y su parte del
   importe van en celdas distintas y tienen que quedar a la MISMA altura: por
   eso los dos usan el mismo bloque con la misma altura de linea. */
/* Sin partir: con la estrella de destacada, «19752088 ★» saltaba a dos
   lineas y la cedula de debajo quedaba a otra altura que su parte. */
td > .renglon,
.cedula > .renglon { display: block; line-height: 1.45; white-space: nowrap; }
/* El dia tampoco se parte: «2026-09-01» salia en dos lineas en cada fila. */
#tabla-lista-ventas td:first-child { white-space: nowrap; }
.parte-cedula { color: var(--tinta-suave); font-weight: var(--peso-texto); }
/* El total de la tabla de Ventas: se distingue sin ser otra tabla. */
#tabla-lista-ventas .fila-total td {
  border-top: 2px solid var(--tinta);
  font-weight: var(--peso-fuerte);
  background: var(--papel-carta);
  cursor: default;
}
#tabla-lista-ventas .fila-total:hover { box-shadow: none; }

/* ---------- La tabla de personas ----------
   Antes eran filas sueltas con un selector y tres botones, sin encabezado
   que dijera que es cada cosa. */
.identidad-usuario { display: flex; flex-direction: column; gap: 1px; }
.identidad-usuario .usuario-corto {
  font-size: 0.8rem;
  color: var(--tinta-suave);
}
.acciones-usuario { display: flex; gap: 6px; flex-wrap: wrap; }
/* Una cuenta desactivada se ve apagada, pero legible: sigue siendo
   informacion y hay que poder leer de quien es. */
#tabla-usuarios .fila-inactiva .identidad-usuario { opacity: .7; }

/* ---------- Grupos plegables ----------
   Todo abierto a la vez es un muro: nueve tarjetas en Ajustes y setenta y
   ocho casillas en Usuarios. Plegados, se ve la lista de secciones y se abre
   la que se busca. */
.grupo-ajustes > summary,
.bloque-rol > summary {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  /* 44px: es el control que se pulsa para abrir cada sección. */
  min-height: 44px;
  padding: 8px 4px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--linea);
}
.grupo-ajustes > summary::-webkit-details-marker,
.bloque-rol > summary::-webkit-details-marker { display: none; }
/* El triangulo, dibujado: el del navegador no obedece al tema ni al tamaño
   de letra de Accesibilidad. */
.grupo-ajustes > summary::before,
.bloque-rol > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: rotate(-45deg);
  transition: transform .15s ease-out;
}
.grupo-ajustes[open] > summary::before,
.bloque-rol[open] > summary::before { transform: rotate(45deg); }
.grupo-ajustes > summary:focus-visible,
.bloque-rol > summary:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}
.grupo-ajustes > summary .subtitulo:empty { display: none; }
/* Lo de dentro respira un poco respecto al título que lo abre. */
.grupo-ajustes > .rejilla-registro,
.grupo-ajustes > .tarjeta,
.grupo-ajustes > #lista-roles { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .grupo-ajustes > summary::before,
  .bloque-rol > summary::before { transition: none; }
}

/* ---------- Ajustes, por grupos ----------
   Eran nueve tarjetas seguidas en una columna de 3.479px y en un orden que
   no responde a nada. Ahora van en cuatro grupos con titulo, y arriba unos
   enlaces para saltar: con nueve tarjetas, lo que de verdad cuesta es
   desplazarse a ciegas buscando una. */
.saltos-ajustes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.saltos-ajustes .chip { text-decoration: none; }
.grupo-ajustes { margin-bottom: 28px; }
/* El salto deja el titulo pegado al borde de arriba y tapado por nada: con
   scroll-margin queda un respiro y se ve que se llego a esa seccion. */
.grupo-ajustes { scroll-margin-top: 16px; }
.grupo-ajustes > .cabecera-seccion { margin-bottom: 10px; }

/* ---------- Roles y permisos ----------
   Con 25 permisos una lista plana de casillas no se puede leer, y sobre todo
   no se puede DECIDIR. Se agrupan, y cada uno lleva debajo la linea que dice
   que abre: sin eso, repartir permisos es marcar claves a ciegas. */
.bloque-rol {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--papel-carta);
}
.cabecera-rol {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.titulo-rol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.titulo-rol strong { font-size: 1.0667rem; }
.titulo-rol .nota-ayuda { margin: 0; }
.acciones-rol { display: flex; gap: 8px; flex-wrap: wrap; }

.permisos-rol { display: block; }
.grupo-permisos {
  margin: 16px 0 6px;
  font-size: 0.8rem;
  font-weight: var(--peso-fuerte);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--linea);
  padding-bottom: 4px;
}
.grupo-permisos:first-child { margin-top: 0; }
.permiso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* 24px minimo de zona pulsable, como el resto de casillas. */
  min-height: 24px;
  margin: 8px 0;
  cursor: pointer;
  font-weight: var(--peso-texto);
}
.permiso input { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.texto-permiso { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.texto-permiso strong { font-weight: var(--peso-fuerte); }
.nombre-permiso {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.explica-permiso { font-size: 0.8333rem; color: var(--tinta-suave); }
/* Un permiso que no se puede quitar se ve apagado, pero legible: es
   informacion, no un adorno. */
.permiso:has(input:disabled) { cursor: default; }
.permiso:has(input:disabled) .texto-permiso { opacity: .8; }

.etiqueta-instructor {
  border-color: var(--linea-fuerte);
  font-weight: var(--peso-fuerte);
}

/* ===========================================================================
   La hoja de informes, en formato cuaderno
   ===========================================================================
   El gimnasio se lleva desde siempre en un cuaderno de renglones: columnas
   separadas por una raya fina, el total subrayado dos veces al final del
   bloque y las cifras alineadas por la coma. Esto es eso mismo en pantalla,
   para que quien lo lee no tenga que aprender a leerlo. Sigue el tema de la
   aplicacion (no se pone blanco en el tema oscuro) y al imprimir, el
   bloque de impresion del final ya lo pasa todo a papel claro. */
.hoja-informe {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  overflow: hidden;
}
.barra-informe {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linea-fuerte);
  background: var(--papel-carta);
}
.barra-informe h2 {
  margin: 0;
  font-size: 1.0667rem;
  flex: 0 0 auto;
}
.barra-informe .grupo-chips { flex: 1 1 auto; }
.acciones-informe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.cuaderno {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 16px 60px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.cabecera-cuaderno {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  /* Doble raya bajo el encabezado: es la marca del cuaderno y separa la
     portada de los renglones sin necesidad de un titulo mas. */
  border-bottom: 3px double var(--tinta);
  margin-bottom: 20px;
}
.sello-cuaderno { flex: 0 0 auto; border-radius: 6px; }
.titulo-cuaderno { display: flex; flex-direction: column; min-width: 0; }
.titulo-cuaderno strong {
  font-size: 1.2rem;
  font-weight: var(--peso-maximo);
  letter-spacing: .02em;
}
.titulo-cuaderno span { color: var(--tinta-suave); font-size: 0.9333rem; }
.periodo-cuaderno {
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-fuerte);
  min-width: 0;
}
.periodo-cuaderno .nota-ayuda { margin: 2px 0 0; font-weight: var(--peso-texto); }

.bloque-cuaderno {
  margin: 0 0 26px;
  break-inside: auto;
}
.bloque-cuaderno h3 {
  margin: 0 0 2px;
  font-size: 1.0667rem;
}
.cabecera-cuenta-cuaderno {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--tinta);
  padding-bottom: 4px;
}
.cabecera-cuenta-cuaderno .total-cuenta {
  font-weight: var(--peso-cifra);
  font-variant-numeric: tabular-nums;
  font-size: 1.0667rem;
}
.pie-cuaderno {
  margin: 4px 0 10px;
  color: var(--tinta-suave);
  font-size: 0.8667rem;
}
.vacio-cuaderno { font-style: italic; }
.resumen-cuaderno { border-top: 3px double var(--tinta); padding-top: 12px; }
.total-grande {
  margin: 6px 0 2px;
  font-size: 1.7333rem;
  font-weight: var(--peso-cifra);
  font-variant-numeric: tabular-nums;
}

/* Los renglones. La raya vertical entre columnas es lo que convierte una
   tabla en una pagina de cuaderno; sin ella los numeros flotan. */
.cuaderno .tabla-lineas { border-collapse: collapse; width: 100%; }
.cuaderno .tabla-lineas th,
.cuaderno .tabla-lineas td {
  border-bottom: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  padding: 5px 8px;
}
.cuaderno .tabla-lineas th:last-child,
.cuaderno .tabla-lineas td:last-child { border-right: 0; }
.cuaderno .tabla-lineas thead th {
  border-bottom: 2px solid var(--tinta);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cuaderno .tabla-lineas tbody tr:nth-child(even) { background: var(--superficie-suave); }
.cuaderno .tabla-lineas .fila-total td {
  border-top: 2px solid var(--tinta);
  border-bottom: 3px double var(--tinta);
  font-weight: var(--peso-cifra);
  background: none;
}
/* Las destacadas, como con el marcador en el papel: fondo amarillo y
   subrayadas. El subrayado es un borde, así que sale aunque la impresora
   no imprima fondos. Lo pidió Maira (v34). */
.cuaderno .tabla-lineas tr.fila-destacada td {
  background: var(--destacado-fondo);
  border-bottom: 2px solid var(--destacado-borde);
}
.cuaderno .tabla-lineas .fila-total.fila-destacado td {
  border-top: 1px solid var(--destacado-borde);
  background: var(--destacado-fondo);
}
.total-destacado {
  display: inline-block;
  margin: 6px 0 0;
  padding: 2px 8px;
  border-bottom: 2px solid var(--destacado-borde);
  background: var(--destacado-fondo);
  font-weight: var(--peso-cifra);
}

/* Los captures, dos por fila, con sus datos al lado. En papel cada ficha se
   queda entera en su hoja: media imagen con la mitad de los datos en la
   pagina siguiente no sirve para archivar. */
/* Una ficha por fila y la imagen a todo el ancho: el capture esta para
   LEERLO (banco, monto, referencia), y al 40% de media hoja no se lee. */
.rejilla-captures {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.ficha-capture {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  padding: 12px;
  background: var(--papel-carta);
  break-inside: avoid;
}
.ficha-capture img {
  width: 100%;
  max-width: 100%;
  /* Tope por alto: un capture de movil es muy alargado y sin esto una sola
     imagen ocuparia tres pantallas. Con 78vh entra entera de una vez. */
  max-height: 78vh;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--superficie-suave);
  /* Para poder mirar el detalle sin salir de la hoja. */
  cursor: zoom-in;
}
/* Pulsando la imagen se pone a tamano completo, por si la referencia esta
   escrita en pequeno. */
.ficha-capture img.ampliada {
  max-height: none;
  cursor: zoom-out;
}
.datos-capture { min-width: 0; }
.datos-capture strong { display: block; margin-bottom: 6px; font-size: 1.0667rem; }
/* Los datos, en columnas debajo de la imagen: en una sola columna a lo
   ancho de la hoja, la etiqueta y el valor quedaban en extremos opuestos
   con 60 cm de nada en medio. */
.datos-capture dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 0 18px;
}
.datos-capture .linea-dato {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dotted var(--linea);
  padding: 3px 0;
  font-size: 0.9333rem;
}
.datos-capture dt { color: var(--tinta-suave); min-width: 0; }
.datos-capture dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-fuerte);
  /* Una referencia larga parte donde haga falta antes que salirse. */
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 960px) {
  /* Se anula el span de la rejilla de 15 columnas: en dos columnas cada
     tarjeta ocupa una celda y la jerarquía la lleva el tamaño de la cifra. */
  /* minmax(0,...) y no 1fr: en un movil de 360px el texto del delta
     ("vs periodo anterior") fijaba el minimo de la columna en 183px, asi que
     las dos columnas sumaban 378 y la pagina entera se desplazaba 34px. */
  /* Seis columnas y no dos: con «auto» las ocho medían lo mismo y la
     jerarquía que da el span en pantalla grande se perdía entera en el
     teléfono. Ahora entra/sale van a media fila y el acumulado, que es la
     resta de las dos, ocupa la fila: se lee como una cuenta, no como
     ocho cifras sueltas. */
  .rejilla-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpi { min-width: 0; }
  .kpi, .kpi-principal { grid-column: span 3; }
  .kpi-principal.kpi-acumulado { grid-column: span 6; }
  .rejilla-graficas { grid-template-columns: minmax(0, 1fr); }
  .rejilla-registro { grid-template-columns: minmax(0, 1fr); }
  .rejilla-comparar { grid-template-columns: minmax(0, 1fr); }
  .contenido { padding: 18px 16px 90px; }
}

@media (max-width: 760px) {
  .aplicacion { flex-direction: column; }
  .lateral {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0; right: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index: 30;
    border-top: 1px solid #000;
  }
  .marca, .lateral .pie { display: none; }
  /* Con ocho pestañas ya no caben repartidas: se desplazan en horizontal
     y cada una conserva su etiqueta. Ocho iconos sin texto no se
     distinguen, que es justo lo que pasaba al añadir Usuarios y Mi cuenta.
     OJO: esta media query va al final del archivo a propósito; a igual
     especificidad gana la última regla y estar dentro de una media query
     no da prioridad. */
  .navegacion {
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;              /* la barra tapaba las etiquetas */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .navegacion::-webkit-scrollbar { display: none; }
  /* «Actualizar» va SIN texto en el teléfono: con él se llevaba 109 px de
     los 390 de la barra y solo quedaban tres pestañas a la vista, con
     Ventas y Reporte fuera (medido el 19/09). El nombre sigue estando en el
     aria-label del botón para quien use un lector de pantalla. */
  .refrescar { margin: 0 4px 0 0; padding: 8px; }
  .refrescar .texto-refrescar { display: none; }
  .pestania {
    flex-direction: column;
    gap: 3px;
    font-size: 0.7333rem;
    padding: 6px 6px;
    /* width:auto anula el width:100% de la regla de escritorio: con
       flex-basis auto, cada pestaña se quedaba con el ancho entero de la
       barra y solo se veía la primera. */
    flex: 0 0 auto;
    width: auto;
    min-width: 62px;
    align-items: center;
    text-align: center;
    scroll-snap-align: center;
  }
  .pestania[aria-current="page"] { box-shadow: inset 0 2px 0 #ffffff; }
  /* En móvil la franja se resume: el mensaje largo ocupaba 100px de alto
     antes de ver un solo dato. Lo que hace falta ahí es saber en qué modo
     estás y poder salir. */
  .franja-prueba { padding: 7px 12px; gap: 4px 10px; font-size: 0.8rem; }
  /* En móvil el nombre de la cuenta ocupa su propia línea y debajo van el
     saldo y las acciones, en vez de apretarse los cuatro. */
  .fila-forma input[type="text"] { flex: 1 1 100%; }
  /* El saldo no crece: si crece, empuja el botón a una tercera línea y cada
     cuenta ocupa el triple de alto. Con 96px caben saldo, estado y acción. */
  .fila-forma .saldo-inicial,
  .fila-forma #nuevo-saldo { flex: 0 1 96px; width: auto; min-width: 0; }
  /* Lo mismo con la duracion del plan: el numero se queda corto y la unidad
     encoge, para que el estado y el boton no se vayan a otra linea. */
  .fila-forma .dura-plan { flex: 0 1 62px; width: auto; min-width: 0; }
  .fila-forma .unidad-plan { flex: 0 1 88px; width: auto; min-width: 0; }
  .fila-forma .boton { padding: 5px 10px; }
  /* En móvil las líneas dejan de ser una tabla y pasan a ser fichas
     apiladas. Con cinco columnas en 360px el campo del plan se quedaba en
     25px: cabía en pantalla pero no se leía el número, que es peor que
     desbordar. La etiqueta sale de data-etiqueta porque el thead se oculta y
     sin ella no se sabe qué es cada campo. */
  .tabla-lineas, .tabla-lineas tbody, .tabla-lineas tr, .tabla-lineas td {
    display: block;
    width: auto;
  }
  .tabla-lineas thead { display: none; }
  .tabla-lineas tr {
    border: 1px solid var(--linea);
    border-radius: 10px;
    /* El hueco de la derecha es de toda la ficha y no solo del primer
       campo: si solo lo lleva el primero, ese campo queda 34px mas corto
       que los demas y la columna de campos se ve torcida. */
    padding: 6px 40px 6px 10px;
    margin-bottom: 8px;
    position: relative;
  }
  .tabla-lineas td {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    border: 0;
  }
  .tabla-lineas td::before {
    content: attr(data-etiqueta);
    flex: 0 0 96px;
    font-size: 0.8667rem;
    font-weight: var(--peso-fuerte);
    color: var(--tinta-suave);
  }
  .tabla-lineas td > input,
  .tabla-lineas td > select { flex: 1 1 auto; min-width: 0; }
  /* El arqueo es lo que se rellena contando billetes con el telefono en la
     otra mano: el nombre de la cuenta como titulo de la ficha y debajo las
     tres cifras con su nombre delante. */
  #tabla-arqueo tr { padding: 10px 12px; }
  #tabla-arqueo td:first-child {
    font-weight: var(--peso-cifra);
    font-size: 1rem;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--linea);
  }
  #tabla-arqueo td:first-child::before { content: none; }
  /* «Según el sistema» no cabe en los 96px de la etiqueta general y se
     partia en dos lineas. Con 116 entra de una. */
  #tabla-arqueo td::before { flex-basis: 116px; }
  /* 44px de alto: es el campo que se rellena con el pulgar. */
  #tabla-arqueo .arqueo-contado { min-height: 44px; }
  .tabla-lineas td.num { justify-content: flex-start; text-align: left; }
  /* El aspa de quitar va arriba a la derecha de la ficha: en su propia fila
     ocupaba 38px de alto por línea sin decir nada. */
  .tabla-lineas td.celda-quitar {
    position: absolute;
    top: 4px; right: 6px;
    padding: 0;
  }
  .tabla-lineas td.celda-quitar::before { content: none; }
  /* La acción de la cabecera va con el título, no en una línea propia. */
  .acciones-vista { margin-left: 0; }
  .cabecera-vista h1 { font-size: 1.3333rem; }
  .texto-franja .largo { display: none; }
  .fechas-propias { margin-left: 0; width: 100%; }
  /* min-width:0 obligatorio: un input[type=date] tiene ancho minimo propio
     (153px por el formato dd/mm/aaaa) y flex:1 no baja de ahi, asi que dos
     no cabian en los 290px de la tarjeta a 360px de pantalla. */
  .fechas-propias input { flex: 1 1 0; width: auto; min-width: 0; }
  /* 44x44 en táctil: es el control que más se falla con el pulgar. */
  .estrella { width: 44px; height: 44px; font-size: 1.2667rem; }
  .celda-dia { min-height: 72px; padding: 4px 4px; }
  /* 12 px y no 10,5: en el teléfono la celda mide 51 px y «+3729» cabe
     justo; de 10.000 para arriba el importe va en miles («+13,7k»). */
  .pastilla { font-size: 0.8rem; padding: 2px 2px; letter-spacing: -.3px; }
  .pastilla-vencidos { display: none; }  /* en móvil caben 2 pastillas por celda */
  .leyenda-calendario { display: none; } /* desborda; el color y el signo ya lo dicen */
  .kpi .kpi-valor { font-size: 1.1333rem; }
  .kpi-principal .kpi-valor { font-size: 1.6rem; }
  .cajon { width: 100%; max-width: 100%; }
  /* En el teléfono la ventana del día ocupa la pantalla entera: centrada en
     390 px quedaría un marco de 10 px que solo quita sitio. */
  .cajon.cajon-centrado {
    top: 0; left: 0;
    width: 100%; max-width: 100%;
    height: 100%; max-height: none;
    border: 0; border-radius: 0;
    transform: translateY(14px);
  }
  .cajon.cajon-centrado.visible { transform: none; }
  .rejilla-graficas-dia { grid-template-columns: minmax(0, 1fr); }
  /* Con la leyenda debajo, el anillo necesita más alto que 220 px. */
  .caja-grafica-dia .lienzo-bajo { height: 260px; }
  .resumen-dia, .resumen-mes { gap: 6px; }
  .cifra-dia { padding: 8px 8px; }
  .cifra-dia > strong { font-size: 1.1333rem; letter-spacing: -.4px; }
  .cifra-dia > span, .cifra-dia > small { font-size: 0.7667rem; }
  .cifra-dia.apoyo > strong { font-size: 1rem; }
  .chip-reduccion { bottom: 88px; right: 80px; }
  /* Por encima de la barra de pestañas, que en movil vive abajo. Un aviso
     de error se queda hasta que se cierra: encima de la barra taparia la
     navegacion entera. */
  .avisos {
    bottom: calc(78px + env(safe-area-inset-bottom));
    left: 8px;
    right: 8px;
    transform: none;
  }
  .aviso.error { max-width: 100%; }

  /* --- El cajon, a una sola columna ---
     En 360px dos campos por renglon dejan 154px por campo, y con el «+» de
     las cedulas al lado se queda en 104. Uno debajo de otro se lee todo y
     ademas la nota de ayuda deja de ser una columna de cinco lineas. */
  .cajon .fila-campos { gap: 10px; }
  .cajon .fila-campos > div { flex: 1 1 100%; }
  /* «Destacada» va pegada al monto, no en su propio renglon con aire de
     sobra: son la misma decision. */
  .cajon .marcas-activacion.marca-suelta { margin-top: -4px; }
  /* Los atajos de vencimiento caben los cinco si no llevan tanto hueco. */
  .atajos-vencimiento { gap: 6px; }

  /* --- La hoja de informes en el telefono ---
     La barra de arriba ocupaba 176px de los 740 de la pantalla: el titulo en
     una linea, los cuatro chips en dos y los botones en otra. Medido. Ahora
     el titulo se va (el rotulo del cuaderno ya dice que informe es), los
     chips se desplazan en horizontal en UNA linea y los botones van al lado.
     Resultado: unos 56px. */
  .barra-informe { padding: 8px 10px; gap: 8px; flex-wrap: nowrap; }
  .barra-informe h2 { display: none; }
  .barra-informe .grupo-chips {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
  }
  .barra-informe .grupo-chips::-webkit-scrollbar { display: none; }
  .barra-informe .chip { flex: 0 0 auto; }
  .acciones-informe { flex: 0 0 auto; }
  .cuaderno { padding: 14px 12px 40px; }
  .cabecera-cuaderno { flex-wrap: wrap; gap: 8px 12px; }
  .periodo-cuaderno { margin-left: 0; text-align: left; width: 100%; }
  /* Un capture al lado de sus datos en 360px deja 130px para la imagen y
     130 para el texto: no se lee ninguno de los dos. Se apila. */
  .ficha-capture { flex-direction: column; }
  .ficha-capture img { flex: 0 0 auto; max-width: 100%; }
  /* Las tablas del cuaderno tambien se apilan en movil: las rayas verticales
     entre columnas sobran cuando ya no hay columnas, y la de la derecha
     dejaba un filo suelto en cada renglon. */
  .cuaderno .tabla-lineas td { border-right: 0; }
  .cuaderno .tabla-lineas th { border-right: 0; }

  /* La fila de pestañas se desplaza en horizontal y con once no se ve que
     hay mas a la derecha. Un degradado en el borde lo dice sin ocupar sitio
     ni anadir un boton que tambien habria que alcanzar con el pulgar. */
  .lateral { position: fixed; }
  .navegacion {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
}

/* La tabla de Ventas en el teléfono (v36). Maira: «en el teléfono la tabla
   no sale chévere como en la computadora». Pasaba a fichas apiladas (una
   pantalla por venta); ahora es la tabla de verdad, que se desplaza de lado,
   con la letra un punto más pequeña. El rótulo del turno se queda pegado a la
   izquierda al desplazar, para leerlo entero. Solo `screen`: la hoja impresa
   también mide menos de 760px y va con sus propias reglas. */
@media screen and (max-width: 760px) {
  /* v44: y ahora cabe ENTERA. A su ancho natural medía 786 px en una
     pantalla de 358 y solo se veían Día, Cédula y medio Monto (foto de
     Maira, 19/09: «que se vea completo, está muy raro en el celular»). El
     día y la nota dejan de ser columnas y van debajo de la cédula. */
  #tabla-lista-ventas { display: table; width: 100%; font-size: 0.8rem; }
  #tabla-lista-ventas .col-dia,
  #tabla-lista-ventas .col-nota,
  #tabla-lista-ventas td.nota-cuaderno { display: none; }
  #tabla-lista-ventas .dia-en-movil,
  #tabla-lista-ventas .nota-en-movil {
    display: block;
    font-size: 0.7667rem;
    color: var(--tinta-suave);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #tabla-lista-ventas .rotulo-total-movil { display: inline; }
  #tabla-lista-ventas thead th { font-size: 0.7rem; letter-spacing: .02em; padding: 6px 5px; }
  #tabla-lista-ventas thead { display: table-header-group; }
  #tabla-lista-ventas tbody { display: table-row-group; }
  #tabla-lista-ventas tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  #tabla-lista-ventas td {
    display: table-cell;
    padding: 6px 5px;
    /* Parte línea (las cuentas, sobre todo): con nowrap cada celda se
       estiraba a su texto entero. Los importes, no: van enteros. */
    white-space: normal;
    border-bottom: 1px solid var(--linea);
    vertical-align: top;
  }
  #tabla-lista-ventas td.num { white-space: nowrap; }
  #tabla-lista-ventas td::before { content: none; }
  #tabla-lista-ventas td.num { text-align: right; }
  /* Ancho FIJO y no mínimo: con la tabla a su ancho natural, una celda que
     puede partir líneas se estiraba al texto entero y la tabla medía 1642px
     (medido); con ancho fijo la nota y el desglose parten línea. */
  #tabla-lista-ventas td.desglose-cuentas { white-space: normal; width: auto; min-width: 0; }
  #tabla-lista-ventas .celda-turno > .texto-turno {
    display: inline-block;
    position: sticky;
    left: 8px;
    max-width: calc(100vw - 72px);
    white-space: normal;
  }
}

/* Carta, que es el papel del gimnasio. Maira imprimia y le salia cortado el
   lado derecho: el dialogo maquetaba para un papel mas ancho que la carta de
   la bandeja. Con el tamaño aqui, Chrome maqueta en carta y no deja elegir
   otro. Va FUERA del bloque de impresion a proposito: ese bloque tiene que
   seguir siendo el ultimo del fichero (hay una prueba). */
@page {
  size: letter;
  margin: 12mm 10mm;
}

@media print {
  /* En papel manda SIEMPRE el tema claro. Con el oscuro puesto salian las
     tarjetas en negro sobre folio blanco (tinta a lo bestia) y el titulo en
     blanco sobre blanco: invisible. Se redeclara con [data-tema] para ganarle
     en especificidad al bloque del tema oscuro, que tambien es un atributo. */
  :root, :root[data-tema] {
    --papel: #ffffff;
    --papel-carta: #ffffff;
    --tinta: #121212;
    --tinta-suave: #4a4a4a;
    --linea: #d5d5d5;
    --linea-fuerte: #a8a8a8;
    --acento: #121212;
    --acento-fuerte: #000000;
    --acento-tenue: #ededed;
    --verde: #0a5238;
    --verde-tenue: #e2efe8;
    --terracota: #b4432a;
    --terracota-tenue: #f7e6e1;
    --ambar: #3d3d3d;
    --ambar-tenue: #ededed;
    --superficie-suave: #f4f4f4;
    --superficie-media: #e8e8e8;
    --rejilla-grafica: #c2c2c2;
    --sombra: none;
    /* El resaltador y las alarmas también en claro: con el tema oscuro
       puesto salían en marrón casi negro sobre el folio. */
    --destacado-fondo: #fff4c2;
    --destacado-borde: #b78a09;
    --aviso-pendiente-fondo: #fff1d6;
    --aviso-pendiente-borde: #c46a00;
    --aviso-pendiente-tinta: #7a3e00;
    --aviso-pendiente-solido: #9a5200;
    --sobre-aviso: #ffffff;
    --alarma-fondo: #fbe3dc;
    --alarma-borde: #b4432a;
    --alarma-tinta: #8f2a14;
    --sobre-alarma: #ffffff;
    /* Aqui y no solo en `html` de abajo: `html` pesa (0,0,1) y el tema oscuro
       pone color-scheme dark con :root[data-tema] (0,2,0), asi que en papel
       seguia oscuro (medido). Con eso el navegador pintaba NEGROS los margenes
       de la hoja al guardar en PDF, alrededor del contenido blanco. */
    color-scheme: light;
  }
  /* Blanco dicho con todas las letras, y no heredado de un token: un PDF
     tiene que salir en blanco pase lo que pase con el tema. color-scheme
     light es lo que hace que el navegador pinte de claro lo SUYO -- campos,
     barras de desplazamiento -- que no obedece a nuestros colores. */
  html, body {
    background: #ffffff !important;
    color-scheme: light;
  }
  .tarjeta { border-color: var(--linea); }
  /* Lo que no se imprime: mandos. En papel un chip o un buscador solo
     ocupan sitio, y la fila de tipos vacia dejaria un hueco sin explicacion. */
  .lateral, .filtro-fechas, .fechas-propias, .boton, .chip,
  .chip-reduccion, .avisos, .cajon-fondo, .fila-tipos, .buscador-persona,
  .selector-tipo, .estrella,
  .pie-registro, .leyenda-calendario, .barra-recarga { display: none !important; }
  .contenido { padding: 0; max-width: none; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
  .rejilla-graficas, .rejilla-kpis { break-inside: avoid; }
  body.cajon-abierto .aplicacion { display: none; }
  body.cajon-abierto .cajon {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    border: 0;
    box-shadow: none;
  }
  /* La ventana centrada lleva translate(-50%, -50%) con más especificidad
     que la regla de arriba: sin esto, en papel salía desplazada media hoja. */
  body.cajon-abierto .cajon.cajon-centrado.visible {
    transform: none;
    top: auto; left: auto;
    max-height: none;
    border-radius: 0;
    opacity: 1;
  }
  body.cajon-abierto .cajon-centrado .cajon-cuerpo { overflow: visible; }
  .pista-deslizar { display: none !important; }

  /* --- El papel NO es un movil ---
     En carta con los margenes de @page la pagina mide unos 740 px, por debajo
     del corte de 760 px de la version movil. Sin esto las tablas se convertian en fichas
     apiladas y las del reporte, que no llevan data-etiqueta, salian como
     columnas de numeros sueltos sin encabezado: ilegibles.
     Este bloque va al FINAL del fichero a proposito: a igual especificidad
     gana la ultima regla, y las media queries de movil estan mas arriba. */
  /* Un punto mas pequeña que en pantalla: el 01/09 real, 40 ventas, eran
     cuatro hojas. */
  .tabla-lineas { display: table; width: 100%; font-size: 0.8667rem; }
  .tabla-lineas thead { display: table-header-group; }
  .tabla-lineas tbody { display: table-row-group; }
  .tabla-lineas tr {
    display: table-row;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    break-inside: avoid;      /* una fila no se parte entre dos paginas */
  }
  .tabla-lineas td {
    display: table-cell;
    gap: 0;
    padding: 4px 6px;
    border: 0;
    min-height: 0;
  }
  .tabla-lineas td::before { content: none; }
  .tabla-lineas td.num { text-align: right; display: table-cell; }
  .tabla-desplazable { overflow: visible; }

  /* Cinco KPIs de dos en dos gastaban una hoja entera. */
  .rejilla-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-registro, .rejilla-graficas { grid-template-columns: minmax(0, 1fr); }

  /* Una tabla larga puede seguir en la pagina siguiente: si la tarjeta
     entera fuera indivisible, saltaria de pagina y dejaria medio folio en
     blanco. Lo que no se parte es cada fila y cada KPI. */
  .tarjeta { break-inside: auto; }
  .kpi, .caja-grafica { break-inside: avoid; }
  /* En papel no hay «Ver más» que pulsar: salen las 26. */
  .fila-vencimiento.vencimiento-de-mas { display: flex; }
  .ver-mas-vencimientos { display: none; }

  /* Chart.js fija el ancho del lienzo EN PIXELES al dibujarlo en pantalla.
     En papel la pagina es mas estrecha y las barras se salian de la tarjeta:
     la tercera quedaba cortada por el borde. Se escala el lienzo entero, que
     en un grafico de barras se lee igual de bien. El !important es porque
     esos px van en el atributo style del canvas. */
  .caja-grafica, .lienzo { height: auto; }
  .caja-grafica canvas, .lienzo canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  .tarjeta h2 { break-after: avoid; }

  /* --- La hoja de informes en papel ---
     Con la hoja abierta se imprime SOLO ella: la aplicacion entera se
     esconde. Asi el mismo Ctrl+P sirve para los cuatro informes y no hay
     que mantener cuatro caminos distintos hasta el PDF. */
  body.con-informe .aplicacion,
  body.con-informe .franja-prueba,
  body.con-informe .chip-reduccion,
  body.con-informe .cajon-fondo { display: none !important; }
  body.con-informe .hoja-informe {
    position: static;
    display: block;
    overflow: visible;
    background: #fff;
  }
  /* El candado del fondo (body.sin-desplazar, position:fixed para que no se
     mueva la pagina de detras de un dialogo) seguia puesto al imprimir: el
     documento medía lo que la ventana, 900px, y el cuaderno del 01/09 salia
     en UNA hoja con 15 de sus 40 renglones y el resto cortado. Medido. En
     papel no hay nada que desplazar. El top va con !important porque
     aislarFondo() lo escribe en el style del body. */
  body.sin-desplazar {
    position: static;
    overflow: visible;
    top: auto !important;
  }
  .barra-informe { display: none !important; }
  .cuaderno {
    padding: 0;
    max-width: none;
    overflow: visible;
  }
  /* La franja alterna se quita en papel: depende de que el navegador
     imprima fondos, y por defecto NO los imprime. Las rayas de las
     columnas, que son bordes, si salen siempre. */
  .cuaderno .tabla-lineas tbody tr:nth-child(even) { background: none; }
  /* El resaltador SÍ se imprime aunque no se marquen los gráficos de fondo:
     es lo que distingue una destacada en el papel. */
  .cuaderno .tabla-lineas tr.fila-destacada td,
  .cuaderno .tabla-lineas .fila-destacado td,
  .total-destacado {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* La hoja del cuaderno en carta vertical. Con 6 cuentas son 10 columnas:
     la NOTA se quedaba en una palabra por línea (tres renglones por venta)
     y el 01/09 ocupaba tres hojas. Encabezados sin espaciado y más juntos,
     cifras sin partir y la nota con un tercio del ancho. */
  #pliego-cuaderno .tabla-lineas { font-size: 0.8rem; }
  #pliego-cuaderno .tabla-lineas th,
  #pliego-cuaderno .tabla-lineas td { padding: 3px 4px; }
  /* Sin mayúsculas: «PROVINCIAL» medía 59 px en un hueco de 49 y se
     partía; «Provincial» cabe. El ancho de cada cuenta se calcula con esta
     misma letra (anchoParaCuentas). */
  #pliego-cuaderno .tabla-lineas thead th {
    font-size: calc(0.6667rem * var(--escala-cabecera, 1));
    letter-spacing: 0;
    text-transform: none;
  }
  /* Las cifras, sin partir; el resto se parte antes que salirse. La nota ya
     no lleva ancho suelto: lo dice el colgroup de la tabla (v40). */
  #pliego-cuaderno .tabla-lineas td.num { white-space: nowrap; }
  /* El día entero va en UNA tabla con todas sus columnas: lo que se corta
     son las FILAS, que siguen en la página siguiente. El encabezado se
     repite arriba de cada página (thead es table-header-group) y ninguna
     fila se parte por la mitad. */
  #pliego-cuaderno .tabla-lineas tr { break-inside: avoid; }
  #pliego-cuaderno .tabla-lineas thead { display: table-header-group; }
  .cabecera-cuaderno { break-after: avoid; }
  .bloque-cuaderno h3, .cabecera-cuenta-cuaderno { break-after: avoid; }
  .resumen-cuaderno { break-inside: avoid; }
  /* En papel, UNA por cara y lo mas grande que quepa: el capture se
     imprime para poder leer la transferencia, no para tenerla archivada de
     adorno. 200mm de alto caben en una carta con sus margenes y la ficha de
     datos debajo. (Aqui habia ademas un max-height de 62mm de antes, DESPUES
     de este, que le ganaba: medido en impresion, 234px. Se quito.) */
  .ficha-capture {
    break-inside: avoid;
    border-color: #a8a8a8;
    flex-direction: column;
  }
  .ficha-capture img {
    flex: 0 0 auto;
    max-width: 100%;
    max-height: 200mm;
  }
  .rejilla-captures { grid-template-columns: minmax(0, 1fr); gap: 10mm; }

  /* --- El volcado de la base NO cabe como tabla ---
     `activaciones` tiene 16 columnas. Medido en A4 con margenes: la tabla
     pedia 1410px sobre una pagina de 718 y se cortaba por la mitad, sin
     aviso, justo donde estan los importes. En papel cada fila se escribe
     como una ficha «campo: valor», que es como se lee un volcado de todas
     formas. Es la misma forma que ya tiene en el movil, y la etiqueta sale
     del data-etiqueta que se copia del encabezado al pintar. */
  #pliego-base .tabla-lineas,
  #pliego-base .tabla-lineas tbody,
  #pliego-base .tabla-lineas tr,
  #pliego-base .tabla-lineas td { display: block; width: auto; }
  #pliego-base .tabla-lineas thead { display: none; }
  #pliego-base .tabla-lineas tr {
    border: 1px solid #a8a8a8;
    border-radius: 6px;
    padding: 5px 9px;
    margin-bottom: 6px;
    break-inside: avoid;
  }
  #pliego-base .tabla-lineas td {
    display: flex;
    gap: 10px;
    padding: 1px 0;
    border: 0;
    font-size: 0.8rem;
  }
  #pliego-base .tabla-lineas td::before {
    content: attr(data-etiqueta);
    flex: 0 0 120px;
    font-weight: 600;
    color: #4a4a4a;
  }
  #pliego-base .tabla-lineas td.num { text-align: left; display: flex; }
}