/* Gimnasio · 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;
  --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;
  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;
  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; }
.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); }

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; }
.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); }
/* white-space normal: .delta trae nowrap (tabla de Comparar) y aquí, en
   tarjetas estrechas, reventaba la rejilla en móvil. */
.kpi-delta { font-size: 0.8rem; margin-top: 2px; white-space: normal; }

/* 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; }
.celda-dia.fuera-de-mes { background: var(--superficie-suave); color: var(--linea-fuerte); cursor: default; }
.celda-dia .numero-dia {
  font-size: 0.8667rem;
  font-weight: var(--peso-fuerte);
  color: var(--tinta-suave);
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.celda-dia.es-hoy .numero-dia { background: var(--acento); color: #fff; }
.celda-dia.sin-datos .numero-dia { color: var(--linea-fuerte); }

.pastilla {
  display: block;
  width: 100%;
  font-size: 0.7667rem;
  font-weight: var(--peso-fuerte);
  border-radius: 5px;
  padding: 2px 6px;
  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; }
.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;
}
.bloque-periodo h3 { 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; }
.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;
  gap: 8px;
}
.aviso {
  background: var(--tinta);
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.9333rem;
  font-weight: var(--peso-fuerte);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.aviso.error { background: var(--terracota); }

/* 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;
}

.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;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
  font-size: 0.7667rem;
  color: var(--tinta-suave);
}
.tarjeta-activacion footer time { white-space: nowrap; }
/* 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; gap: 5px; margin-left: auto; }
.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;
  color: var(--linea-fuerte);
  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 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; }

.lista-usuarios { display: flex; flex-direction: column; gap: 8px; }
.fila-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.fila-usuario.inactiva { opacity: .6; }
.fila-usuario .identidad { flex: 1; min-width: 150px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.fila-usuario .usuario-corto { color: var(--tinta-suave); font-size: 0.8333rem; }

.bloque-rol {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.cabecera-rol { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cabecera-rol .nota-ayuda { margin: 0; margin-left: auto; }
.permisos-rol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 14px;
}
.permiso { display: flex; align-items: center; gap: 8px; font-size: 0.8667rem; cursor: pointer; }
.permiso input { width: auto; min-height: 0; }

.clave-temporal {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 1.2rem;
  letter-spacing: 2px;
  background: var(--superficie-suave);
  border: 1px dashed var(--linea-fuerte);
  border-radius: 6px;
  padding: 8px 14px;
  user-select: all;
}

.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;
}
.casilla {
  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;
}

/* 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);
}

/* ---------- 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 móvil las tres en columna: en fila el texto de apoyo se parte en
     cuatro líneas y deja de ayudar. */
  .selector-tipo { grid-template-columns: minmax(0, 1fr); }
  .opcion-tipo { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* 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); }

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

/* ---------- 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ó). */
@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. */
  .rejilla-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { min-width: 0; }
  .kpi, .kpi-principal { grid-column: auto; }
  .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; }
  .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; }
  .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; }
  .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; }
  .pastilla { font-size: 0.7rem; padding: 2px 3px; letter-spacing: -.2px; }
  .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%; }
  .chip-reduccion { bottom: 88px; right: 80px; }
}

@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;
  }
  body { background: #fff; }
  .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 { 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;
  }

  /* --- El papel NO es un movil ---
     En A4 con margenes la pagina mide unos 718 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. */
  .tabla-lineas { display: table; width: 100%; }
  .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; }

  /* 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; }
}