/* =========================================================
   Quechua Express — LA CONSOLA
   =========================================================
   El panel interno no es una web: es un instrumento que se
   abre cada mañana. Por eso aquí manda la lectura — cifras
   en mono tabular, superficies en capas, una sola tinta de
   marca y el color semántico reservado al dinero.

   Hereda de portada.css la tipografía, pero REDEFINE la
   paleta bajo `body.panel` sin tocar la web pública ni la
   página de acceso, que viven fuera de esa clase.

   UNA SOLA PALETA, la clara, en las dos puertas (06/09/2026,
   por pedido de Aldair, que programa esto: «que solo exista 1
   paleta de colores, que es el blanco, en los 2, mesa y torre»). El tema oscuro
   —dos bloques de tokens espejo por cada suelo, el interruptor
   del riel y la memoria del navegador— se retiró entero.

   Regla del archivo: ningún color literal fuera del bloque
   de tokens (y del bloque 19, que es la puerta). Un color
   escrito a mano se sale de la paleta en silencio, que es la
   peor forma de salirse.
   ========================================================= */

/* =========================================================
   1. TOKENS — la paleta de la casa
   ========================================================= */
body.panel {
  /* --- superficies, en capas ---
     el fondo no es gris neutro: lleva una pizca del turquesa
     de la marca. Un gris puro se lee a plantilla. */
  --sup-0: #EDF3F5;          /* el suelo de la página */
  --sup-1: #FFFFFF;          /* la tarjeta */
  --sup-2: #F5F9FA;          /* relieve: filas al pasar, fichas */
  --sup-3: #E4EEF1;          /* rieles y rellenos suaves */
  --velo: rgba(255, 255, 255, .84);

  /* --- líneas --- */
  --linea: #E1EAEE;
  --linea-2: #C6D6DD;

  /* --- tinta, en tres pesos --- */
  --tinta: #0F1F29;
  --texto-2: #40525F;
  --gris: #6B7C88;

  /* --- la marca --- */
  --marca: #14808F;
  --marca-osc: #0A5A66;
  --marca-suave: #DBEDF0;
  --marca-vivo: #14808F;      /* el trazo de las gráficas */

  /* --- semántica del dinero, separada del acento ---
     verde = entró · ámbar = se demora · rojo = no llegó */
  --verde: #12855B;
  --verde-texto: #0F6E4B;
  --verde-suave: #DEF3E9;
  --ambar: #B4700B;
  --ambar-2: #DFA245;
  --ambar-suave: #FAF0DE;
  --rojo: #C42F2F;
  --rojo-suave: #FBE9E9;

  /* --- las familias de medio de pago (el anillo de Cobranza) ---
     efectivo lleva la marca; banco y Yape, dos tintas propias que se
     distinguen entre sí y de ella; el Yape personal va en naranja
     porque es dinero que entró a un celular y no a la empresa */
  --m-efectivo: #14808F;
  --m-banco: #3D5AE0;
  --m-yape: #7A3FD9;
  --m-yape_personal: #E0781E;
  --m-otro: #8A9AA5;

  /* --- la paleta PASTEL de Cobranza: cinco tintas suaves que conviven
     sin gritar (menta de la marca, lila, arena, coral y salvia) --- */
  --p-menta: #9ED4CC;
  --p-lila: #B9B4EA;
  --p-arena: #E8D3A3;
  --p-coral: #F0AE9B;
  --p-salvia: #B7D9C1;
  --p-gris: #C9D3D9;

  /* --- los nombres que ya usan las vistas: apuntan a los de arriba,
         para que un style= suelto hable la paleta de la casa --- */
  --blanco: var(--sup-1);
  --banda: var(--sup-3);
  --borde: var(--linea);
  --borde-fuerte: var(--linea-2);

  /* --- materia --- */
  --sombra-1: 0 1px 2px rgba(11, 34, 43, .05), 0 1px 1px rgba(11, 34, 43, .03);
  --sombra-2: 0 14px 34px -18px rgba(11, 34, 43, .30), 0 2px 6px rgba(11, 34, 43, .05);
  --sombra-suave: var(--sombra-1);
  --anillo: 0 0 0 3px rgba(20, 128, 143, .18);
  --r-1: .6rem;
  --r-2: .9rem;
  --r-3: 1.3rem;
  --micro: .655rem;

  background: var(--sup-0);
  color: var(--tinta);
  /* la textura del suelo: dos luces muy tenues, para que el fondo no
     sea una plancha muerta detrás de las tarjetas */
  background-image:
    radial-gradient(60rem 32rem at 12% -8%, rgba(20, 128, 143, .07), transparent 60%),
    radial-gradient(48rem 28rem at 92% 0%, rgba(20, 128, 143, .045), transparent 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   2b. TOKENS — EL SUELO NEUTRO
   =========================================================
   Un tablero de verdad es gris: suelo frío, tarjetas blancas,
   y el color guardado para el estado —un punto, una píldora—
   en vez de repartido por las gráficas. Este bloque cambia el
   suelo entero (fondo, tarjetas, líneas, tinta) y añade la
   ESCALA DE GRISES con que se pintan las gráficas.

   Solo lo enciende la pantalla que declara
   `@section('cuerpo-clase', 'gris')`; las demás siguen con la
   piel turquesa de la casa, y el menú lateral conserva su
   marca en las dos. Las tarjetas son blancas en las dos: es
   la misma paleta clara, con el suelo un punto más frío. */
body.panel.gris {
  --sup-0: #EAECEF;
  --sup-1: #FFFFFF;
  --sup-2: #F4F5F7;
  --sup-3: #E7E9ED;
  --velo: rgba(255, 255, 255, .9);
  --linea: #E5E7EC;
  --linea-2: #CDD3DA;
  --tinta: #14191F;
  --texto-2: #4A535D;
  --gris: #737D87;

  /* --- LA PALETA DE LOS DATOS ---
     El suelo es gris y las tarjetas blancas, pero los DATOS llevan color, y
     siempre el mismo: verde lo que entró, índigo lo que se emitió, rojo lo
     que falta cobrar, ámbar lo que va en camino, violeta la caja. Así el
     color es un índice —se reconoce la serie sin leer la leyenda— en vez de
     un adorno. Sin esto, con todo en gris, ninguna gráfica decía cuál era
     cuál. */
  --d-cobrado: #0E7C66;
  --d-cobrado-suave: #D8EFE8;
  --d-facturado: #3D56C4;
  --d-facturado-suave: #E0E4FA;
  --d-deuda: #C13B34;
  --d-deuda-suave: #FBE4E2;
  --d-camino: #B0730E;
  --d-camino-suave: #FAEEDA;
  --d-caja: #6D46B8;
  --d-caja-suave: #EBE4F9;
  --d-alerta: #DD6B33;
  --d-alerta-suave: #FCEAE0;

  /* la escala de las gráficas: de la tinta al casi nada */
  --gr-1: #1C232B;
  --gr-2: #4E5862;
  --gr-3: #7C8894;
  --gr-4: #A9B3BC;
  --gr-5: #D3D9DE;
  /* la única tinta cálida de la pantalla: lo que hay que mirar */
  --ojo: #C06A3E;
  --ojo-suave: #F7EAE3;

  background: var(--sup-0);
  /* sin las dos luces del suelo turquesa: un tablero no lleva atmósfera */
  background-image: none;
}
/* =========================================================
   3. BASE
   ========================================================= */
/* el subrayado de fábrica en las once puertas del menú era LA
   marca de época del panel: se quita en todo, y se devuelve
   solo donde un enlace vive dentro de un párrafo */
body.panel a { text-decoration: none; }
body.panel p a, body.panel .pista a, body.panel .solicitud-texto a {
  text-decoration: underline; text-underline-offset: 2px;
}
body.panel :focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }

/* la letra chica en versalitas: el eje de ANCHURA de Archivo la
   condensa, que es como una tipografía industrial rotula */
.tabla th, .quien .rol, .rotulo-dato, .kpi-rotulo, .micro {
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 88;
  color: var(--gris);
}

/* =========================================================
   4. CHIPS
   ========================================================= */
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .28rem .68rem; border-radius: 999px;
  font-size: .705rem; font-weight: 700; white-space: nowrap;
}
.chip::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; }
.chip.ok { background: var(--verde-suave); color: var(--verde-texto); }
.chip.transito { background: var(--ambar-suave); color: var(--ambar); }
.chip.gris { background: var(--sup-3); color: var(--gris); }
.chip.marca { background: var(--marca-suave); color: var(--marca-osc); }
.chip.urgente { background: var(--rojo-suave); color: var(--rojo); }
.chip.mini { font-size: .62rem; padding: .18rem .55rem; }

/* =========================================================
   5. LA COLUMNA DE PUERTAS
   =========================================================
   El menú vive a la IZQUIERDA. Estuvo arriba, en una fila, y
   con once puertas se desbordaba: había que rodarla de lado
   para llegar a la última, y las tres del final no existían
   para quien no supiera que estaban ahí.

   En columna caben todas de una vez, cada una con su trazo, y
   el ancho que se pierde a la izquierda lo recupera el lienzo,
   que ya no tiene que reservar sitio para una cabecera. */
.app { display: grid; grid-template-columns: 14.75rem minmax(0, 1fr); min-height: 100svh; }

.rail {
  position: sticky; top: 0; align-self: start;
  height: 100svh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem .7rem 1rem .8rem;
  background: var(--velo); backdrop-filter: blur(14px) saturate(1.4);
  border-right: 1px solid var(--linea);
  scrollbar-width: thin;
}
.rail-marca { display: flex; align-items: center; gap: .6rem; padding: .15rem .45rem .35rem; }
.rail-marca .marca-q { background: var(--marca); border-radius: 9px; padding: .32rem; flex: none; }
.rail-marca > span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.rail-marca b { font-size: .92rem; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); }
.rail-marca small {
  font-size: var(--micro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-variation-settings: 'wdth' 88; color: var(--gris);
}

.nav-panel { display: flex; flex-direction: column; gap: .08rem; }
.nav-panel a, .rail-sec {
  display: flex; align-items: center; gap: .6rem;
  padding: .48rem .65rem; border-radius: var(--r-1);
  font-size: .845rem; font-weight: 600; color: var(--texto-2);
  white-space: nowrap; transition: background .16s ease, color .16s ease;
}
.nav-panel a svg, .rail-sec svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--gris); transition: color .16s; }
.nav-panel a:hover, .rail-sec:hover { background: var(--sup-3); color: var(--tinta); }
.nav-panel a:hover svg, .rail-sec:hover svg { color: var(--marca); }
.nav-panel a.actual, .rail-sec.actual {
  background: var(--marca); color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px -10px var(--marca);
}
.nav-panel a.actual svg, .rail-sec.actual svg { color: currentColor; }
.rail-pie { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: .08rem; }
.rail-sec { font-size: .8rem; font-weight: 600; }

/* quién soy, y las dos acciones de la sesión */
.quien { display: flex; align-items: center; gap: .4rem; padding: .55rem .3rem .1rem; margin-top: .3rem; }
.quien .datos { line-height: 1.15; min-width: 0; flex: 1 1 auto; }
.quien .nombre { display: block; font-size: .8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien .rol { display: block; }
.quien form { display: flex; }
.boton-salir {
  display: grid; place-items: center; width: 1.95rem; height: 1.95rem; flex: none;
  border-radius: 999px; border: 1px solid var(--linea-2);
  background: transparent; color: var(--texto-2); cursor: pointer;
  font-family: inherit; padding: 0;
  transition: color .18s, border-color .18s, background .18s;
}
.boton-salir svg { width: 1rem; height: 1rem; }
.boton-salir:hover { color: var(--rojo); border-color: var(--rojo); background: var(--rojo-suave); }

.vista { min-width: 0; }

/* --- en el teléfono la columna se pliega --- */
.topbar-movil { display: none; }
.velo { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; left: 0; top: 0; z-index: 60; width: 15.5rem;
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 0 40px -8px rgba(0, 0, 0, .35);
    background: var(--sup-1);
  }
  .rail.abierta { transform: none; }
  .topbar-movil {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .9rem; background: var(--velo); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 40;
  }
  .topbar-movil b { font-size: .92rem; font-weight: 800; letter-spacing: -.02em; }
  .menu-toggle { background: transparent; border: 0; color: var(--tinta); cursor: pointer; display: grid; place-items: center; padding: .2rem; }
  .marca-q.chico { width: 1.7rem; height: 1.7rem; background: var(--marca); border-radius: 7px; padding: .25rem; }
  .marca-q.chico img { width: 100%; height: 100%; }
  .velo.visible { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(4, 20, 26, .45); }
}

/* =========================================================
   6. EL LIENZO Y LA CABECERA DE PÁGINA
   ========================================================= */
/* el lienzo ya no reserva sitio para una cabecera: empieza más arriba */
.lienzo-panel { max-width: 78rem; margin-inline: auto; padding: 1.7rem 1.6rem 4rem; }
.cab-pagina {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.35rem;
}
.cab-pagina h1 {
  font-size: clamp(1.45rem, 2.6vw, 1.8rem); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.1;
}
.cab-pagina p { margin-top: .3rem; color: var(--texto-2); font-size: .875rem; }
.cab-acciones { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }

/* =========================================================
   7. AVISOS
   ========================================================= */
.aviso-ok, .aviso-error {
  border-radius: var(--r-2); padding: .7rem 1rem;
  font-size: .85rem; font-weight: 600; margin-bottom: 1.1rem;
  border: 1px solid transparent;
}
.aviso-ok { background: var(--verde-suave); color: var(--verde-texto); border-color: color-mix(in srgb, var(--verde) 22%, transparent); }
.aviso-error { background: var(--rojo-suave); color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 22%, transparent); }

/* =========================================================
   8. TARJETAS
   ========================================================= */
.caja-blanca {
  background: var(--sup-1); border: 1px solid var(--linea);
  border-radius: var(--r-3); box-shadow: var(--sombra-1);
  padding: 1.15rem 1.3rem; margin-bottom: 1.15rem;
  transition: box-shadow .22s ease, border-color .22s ease;
}
.caja-blanca:hover { box-shadow: var(--sombra-2); border-color: var(--linea-2); }
.caja-blanca > h2 { font-size: .98rem; font-weight: 800; letter-spacing: -.015em; margin-bottom: .9rem; }

.caja-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin-bottom: .85rem;
}
.caja-cab h2 { font-size: .98rem; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.caja-cab .pista { margin: 0; }

/* =========================================================
   9. LAS CIFRAS — tarjetas de indicador
   =========================================================
   El rótulo VA ARRIBA. Debajo la cifra, grande y tabular, y
   al pie el contexto. Es el orden en que se lee un tablero:
   qué mides, cuánto, y comparado con qué. Antes el rótulo
   iba debajo, que es como se rotulaba una tabla de Excel. */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: .85rem; margin-bottom: 1.15rem;
}
.kpi {
  position: relative; overflow: hidden;
  background: var(--sup-1); border: 1px solid var(--linea);
  border-radius: var(--r-3); padding: .9rem 1.05rem .95rem;
  box-shadow: var(--sombra-1);
  display: flex; flex-direction: column;
  transition: box-shadow .22s ease, border-color .22s ease;
}
.kpi:hover { box-shadow: var(--sombra-2); border-color: var(--linea-2); }
/* el color de la tarjeta vive en la losa de su ícono, no en una raya */
.kpi.filo-marca { --filo: var(--marca); }
.kpi.filo-verde { --filo: var(--verde); }
.kpi.filo-ambar { --filo: var(--ambar-2); }
.kpi.filo-rojo { --filo: var(--rojo); }

.kpi-cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; min-height: 1.7rem; }
.kpi-rotulo { line-height: 1.2; flex: 1 1 auto; }
.kpi-icono {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border-radius: .6rem; background: color-mix(in srgb, var(--filo, var(--marca)) 13%, transparent);
  color: var(--filo, var(--marca));
}
.kpi-icono svg { width: 1rem; height: 1rem; }
.kpi b {
  display: block; font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 800; letter-spacing: -.035em; white-space: nowrap;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi span { font-size: .755rem; font-weight: 600; color: var(--texto-2); }
.kpi .kpi-pie {
  display: block; margin-top: .38rem; font-size: .73rem; font-weight: 600;
  color: var(--texto-2); line-height: 1.45;
}
.kpi .kpi-pie.texto-mal { color: var(--rojo); }
/* la chispa sangra hasta los bordes de la tarjeta */
.kpi .chispa { margin: .55rem -1.05rem -.95rem; width: calc(100% + 2.1rem); }

/* cinco tarjetas en UNA fila en escritorio: una huérfana abajo se lee a error */
.kpis-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.kpis-5 .kpi { padding: .85rem .95rem .9rem; }
.kpis-5 .kpi b { font-size: clamp(1.3rem, 1.85vw, 1.62rem); }
.kpis-5 .kpi .chispa { margin: .5rem -.95rem -.9rem; width: calc(100% + 1.9rem); }
@media (min-width: 1180px) { .kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* la variación contra el período anterior */
.delta {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .715rem; font-weight: 800; letter-spacing: -.01em;
  padding: .14rem .5rem; border-radius: 999px;
  background: var(--sup-3); color: var(--texto-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.delta svg { width: .72rem; height: .72rem; }
.delta.bien { background: var(--verde-suave); color: var(--verde-texto); }
.delta.mal { background: var(--rojo-suave); color: var(--rojo); }

/* el riel de avance bajo una cifra */
.riel { display: block; height: 5px; border-radius: 999px; background: var(--sup-3); overflow: hidden; margin-top: .5rem; }
.riel > span { display: block; height: 100%; background: var(--verde); border-radius: 999px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }

/* «Trabajando»: la pantalla existe y todavía no tiene qué enseñar. Se ve
   deliberada, no rota — una palabra y una llave, sin párrafos de excusa. */
.caja-blanca.trabajando {
  display: grid; justify-items: center; align-content: center; gap: .85rem;
  padding: 4.5rem 1.5rem; max-width: 34rem; margin-inline: auto;
  border-style: dashed; box-shadow: none; background: transparent;
}
.caja-blanca.trabajando:hover { box-shadow: none; border-color: var(--linea); }
.caja-blanca.trabajando svg { width: 2.6rem; height: 2.6rem; color: var(--gris); opacity: .5; }
.caja-blanca.trabajando b {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-variation-settings: 'wdth' 88; color: var(--gris);
}

/* =========================================================
   10. REJILLAS
   ========================================================= */
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 1.15rem; margin-bottom: 1.15rem; }
.rejilla-2 > .caja-blanca { margin-bottom: 0; }

/* =========================================================
   11. TABLAS
   ========================================================= */
.envoltura-tabla { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .845rem; }
.tabla th { text-align: left; padding: .45rem .7rem .5rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabla td { padding: .55rem .7rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .14s; }
.tabla tr:hover td { background: var(--sup-2); }
.tabla .mono { font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fila-inactiva td { opacity: .45; }
/* el nombre del cliente: enlace al extracto, sin subrayado permanente
   (con diez filas se volvía una pared de rayas) */
.tabla a.cliente { color: var(--marca-osc); font-weight: 700; }
.tabla a.cliente:hover, .tabla a.cliente:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
/* tablas de media pantalla: celdas apretadas para que las cuatro
   columnas entren sin scroll en un escritorio normal */
.tabla.compacta th, .tabla.compacta td { padding: .5rem .45rem; }
.tabla.compacta th { white-space: normal; line-height: 1.2; }
.tabla.compacta .mono { font-size: .765rem; }
.tabla.compacta .pista { font-size: .68rem; line-height: 1.4; white-space: nowrap; }
.tabla.compacta td .barrita { max-width: 8.5rem; }
.tabla td .barrita { max-width: 13rem; }

/* el puesto en un ranking: un número que ordena sin gritar */
.puesto {
  display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem;
  border-radius: 5px; background: var(--sup-3); color: var(--gris);
  font-size: .64rem; font-weight: 800; margin-right: .45rem; vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.tabla tbody tr:first-child .puesto { background: var(--marca-suave); color: var(--marca-osc); }

/* la barrita de proporción dentro de una celda */
.barrita { display: block; height: 4px; margin-top: .35rem; background: var(--sup-3); border-radius: 999px; overflow: hidden; }
.barrita > span { display: block; height: 100%; background: var(--marca); border-radius: 999px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.barrita.verde > span { background: var(--verde); }

/* =========================================================
   12. FORMULARIOS
   ========================================================= */
/* la base .campo vive aquí: portada.css no la trae (sus inputs van
   bajo .rastreador) y sin esta regla los campos del dinero salían
   como controles nativos del navegador */
.campo {
  font: inherit; font-size: .875rem; color: var(--tinta);
  background: var(--sup-1); border: 1px solid var(--linea-2);
  border-radius: var(--r-1); padding: .55rem .7rem; min-width: 0; outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.campo:focus-visible { border-color: var(--marca); box-shadow: var(--anillo); outline: none; }
.campo::placeholder { color: var(--gris); }
/* la letra chica gris de apoyo (quién contó, «hoy: N», avisos) */
.pista { font-size: .755rem; line-height: 1.6; color: var(--texto-2); font-weight: 500; }
.grid-crear { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; align-items: end; }
select.campo { width: 100%; }
.campo.chico, select.campo.chico { padding: .45rem .6rem; font-size: .8rem; border-radius: var(--r-1); }
.fila-form { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.fila-form.compacta { flex-wrap: nowrap; }
.boton-mini {
  padding: .5rem .9rem; border-radius: var(--r-1);
  background: var(--tinta); color: var(--sup-1); font-size: .775rem; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background .18s, transform .12s;
}
.boton-mini { display: inline-flex; align-items: center; gap: .4rem; }
.boton-mini svg { width: .9rem; height: .9rem; }
.boton-mini:hover { background: var(--marca); color: #fff; }
.boton-mini:active { transform: translateY(1px); }
.boton-mini.fantasma { background: transparent; color: var(--marca); border-color: var(--marca); }
.boton-mini.fantasma:hover { background: var(--marca-suave); color: var(--marca-osc); }
.nav-dia { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.nav-dia a { color: var(--marca); font-size: 1.25rem; font-weight: 700; }

/* el botón de ojo para mostrar/ocultar contraseñas (login y cambio) */
.campo-ojo { position: relative; }
.campo-ojo .campo { padding-right: 2.6rem; }
.ojo {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--gris);
  display: grid; place-items: center; padding: .3rem;
}
.ojo:hover { color: var(--marca); }

/* =========================================================
   13. EL PULSO — «esto está vivo»
   ========================================================= */
.latido { display: flex; align-items: center; gap: .5rem; color: var(--gris); font-size: .85rem; font-variant-numeric: tabular-nums; }
.latido-punto {
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 0 rgba(18, 133, 91, .45); animation: latir 2.4s infinite;
}
@keyframes latir {
  0% { box-shadow: 0 0 0 0 rgba(18, 133, 91, .45); }
  70% { box-shadow: 0 0 0 .5rem rgba(18, 133, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 133, 91, 0); }
}
/* cuando el refresco se detiene (la sesión terminó), el punto deja de
   latir y se apaga: «En vivo» no se finge */
.latido-punto.latido-quieto { animation: none; background: var(--gris); box-shadow: none; }

/* entrada escalonada: las tarjetas asoman en orden de lectura */
@keyframes asomar { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
body.panel .kpi, body.panel .caja-blanca { animation: asomar .42s cubic-bezier(.22, 1, .36, 1) backwards; }
body.panel .kpi:nth-child(2), body.panel .caja-blanca:nth-child(2) { animation-delay: .045s; }
body.panel .kpi:nth-child(3), body.panel .caja-blanca:nth-child(3) { animation-delay: .09s; }
body.panel .kpi:nth-child(4), body.panel .caja-blanca:nth-child(4) { animation-delay: .135s; }
body.panel .kpi:nth-child(5) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  body.panel *, body.panel *::before, body.panel *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* =========================================================
   14. GRÁFICAS — SVG servido, sin librería
   ========================================================= */
.grafica { display: block; width: 100%; height: auto; overflow: visible; }
.grafica text {
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; fill: var(--gris);
  font-variant-numeric: tabular-nums;
}
.grafica .g-linea { stroke: var(--linea); stroke-width: 1; }
.grafica .g-base { stroke: var(--linea-2); stroke-width: 1; }
.grafica .g-fact { fill: var(--marca-suave); transition: fill .14s; }
.grafica .g-cob { fill: var(--marca); }
.grafica g:hover .g-fact { fill: color-mix(in srgb, var(--marca) 40%, var(--marca-suave)); }
.grafica .g-area { fill: var(--marca); opacity: .13; }
.grafica .g-area-2 { fill: var(--verde); opacity: .16; }
.grafica .g-trazo { fill: none; stroke: var(--marca-vivo); stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.grafica .g-trazo-2 { fill: none; stroke: var(--verde); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.grafica .g-punto { fill: var(--marca-vivo); stroke: var(--sup-1); stroke-width: 2.5; }
.grafica .g-punto-2 { fill: var(--verde); stroke: var(--sup-1); stroke-width: 2.5; }
.grafica .g-guia { stroke: var(--linea-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .12s; }
.grafica g:hover .g-guia { opacity: 1; }

/* la chispa: la serie de un indicador, sin ejes ni números */
.chispa { display: block; height: 34px; overflow: visible; }
.chispa .c-area { fill: var(--marca-vivo); opacity: .13; }
.chispa .c-trazo { fill: none; stroke: var(--marca-vivo); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.chispa .c-punto { fill: var(--marca-vivo); }
.chispa.verde .c-area { fill: var(--verde); }
.chispa.verde .c-trazo { stroke: var(--verde); }
.chispa.verde .c-punto { fill: var(--verde); }

.leyenda { display: flex; gap: .9rem; font-size: .73rem; font-weight: 600; color: var(--texto-2); margin-bottom: .5rem; flex-wrap: wrap; }
.leyenda i { display: inline-block; width: .65rem; height: .65rem; border-radius: 3px; vertical-align: -1px; margin-right: .35rem; }
.leyenda .l-fact i { background: var(--marca-suave); }
.leyenda .l-cob i { background: var(--marca); }

/* la comparación semana contra semana, bajo la gráfica */
.semanas { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--linea); }
.semanas > div { display: grid; gap: .08rem; }
.semanas b { font-size: .92rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.semanas span { font-size: .715rem; font-weight: 600; color: var(--texto-2); }

/* las tarjetas por tipo de servicio */
.chips-tipo { display: flex; flex-wrap: wrap; gap: .65rem; }
.chip-tipo { display: flex; flex-direction: column; gap: .1rem; min-width: 9rem; padding: .55rem .85rem; border: 1px solid var(--linea); border-radius: var(--r-2); }
.chip-tipo b { font-size: .85rem; font-weight: 800; }

/* =========================================================
   15. COBRANZA — el tablero
   =========================================================
   Aquí manda otra piel, la de un tablero: tarjetas sin borde y muy
   redondas sobre el fondo, cifras grandes en la fuente del panel (no
   en monoespaciada), color solo en píldoras, puntos y anillos, una
   paleta pastel en las gráficas, personas con avatar, y el detalle
   plegado en pestañas con su conteo. Todo va bajo .cobranza para no
   tocar las demás pantallas. */
.cobranza { --radio: 1.5rem; }
.cobranza .cifra, .cobranza .kpi b, .cobranza .avatar {
  font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: -.015em;
  font-variation-settings: 'wdth' 94;
}
.cobranza .caja-blanca, .cobranza .kpi {
  border: 0; border-radius: var(--radio);
  box-shadow: 0 1px 2px rgba(11, 34, 43, .04), 0 14px 34px -26px rgba(11, 34, 43, .35);
}
.cobranza .caja-blanca { padding: 1.35rem 1.5rem; }
.cobranza .caja-blanca:hover, .cobranza .kpi:hover { box-shadow: 0 1px 2px rgba(11, 34, 43, .04), 0 18px 40px -26px rgba(11, 34, 43, .45); border-color: transparent; }
.cobranza .caja-cab { margin-bottom: 1rem; }
.cobranza .caja-cab h2 { font-size: 1.06rem; font-weight: 700; letter-spacing: -.02em; }
.cobranza .caja-cab .pista { font-size: .78rem; color: var(--gris); }
.cobranza .cab-cobranza { align-items: center; margin-bottom: 1.5rem; }
.cobranza .cab-cobranza h1 { margin: 0; font-size: clamp(1.55rem, 2.8vw, 1.95rem); }
.cobranza .cab-cobranza p { margin-top: .25rem; color: var(--gris); }
.cobranza .boton-mini { padding: .62rem 1.05rem; border-radius: 999px; font-size: .8rem; }
.cobranza .chip { padding: .38rem .8rem; }
.rejilla-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.15rem; margin-bottom: 1.15rem; }
.rejilla-2-1 > .caja-blanca { margin-bottom: 0; }
@media (max-width: 900px) { .rejilla-2-1 { grid-template-columns: minmax(0, 1fr); } }
.cobranza .rejilla-2, .cobranza .rejilla-2-1 { gap: 1.25rem; margin-bottom: 1.25rem; }
.cobranza .kpis { gap: 1rem; margin-bottom: 1.25rem; }

/* --- las cifras: ícono en círculo, rótulo en frase, número grande,
       la píldora y su contexto en una línea, y la chispa al pie --- */
.cobranza .kpi { padding: 1.15rem 1.3rem 1rem; }
.cobranza .kpi-cab { gap: .6rem; margin-bottom: .75rem; min-height: 0; }
.cobranza .kpi-icono {
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--sup-2); color: var(--tinta);
}
.cobranza .kpi-icono.alerta { background: var(--rojo-suave); color: var(--rojo); }
.cobranza .kpi-icono svg { width: 1.05rem; height: 1.05rem; }
.cobranza .kpi-rotulo {
  font-size: .86rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  font-variation-settings: normal; color: var(--texto-2);
}
.cobranza .kpi b {
  font-size: clamp(1.55rem, 2.1vw, 2rem); font-weight: 700; letter-spacing: -.035em; color: var(--tinta);
}
.cobranza .kpi b small { font-size: .52em; font-weight: 600; color: var(--gris); margin-right: .12em; letter-spacing: 0; }
.cobranza .kpi b small.de { margin: 0 0 0 .1em; }
.cobranza .kpi-linea { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; min-height: 1.35rem; flex-wrap: wrap; }
.cobranza .kpi-linea > span:not(.delta) { font-size: .76rem; font-weight: 500; color: var(--gris); }
.cobranza .kpi .kpi-pie { margin-top: .35rem; font-size: .74rem; color: var(--gris); font-weight: 500; }
.cobranza .kpi .chispa { margin: .5rem -1.3rem -1rem; width: calc(100% + 2.6rem); height: 30px; }
.cobranza .kpis-5 .kpi b { font-size: clamp(1.4rem, 1.8vw, 1.75rem); }
.cobranza .delta { font-size: .72rem; padding: .2rem .55rem; }
.cobranza .delta svg { width: .72rem; height: .72rem; }

/* --- la gráfica del tiempo: barras pastel anchas, la última en tinta de
       marca con su globo, y la curva de lo cobrado en tinta --- */
.cobranza .hero-cab { align-items: center; }
.cobranza .hero-cab .leyenda { margin: .4rem 0 0; }
.cobranza .grafica text { font-family: inherit; font-size: 9px; font-weight: 500; }
.cobranza .grafica .g-linea { stroke: var(--linea); }
.cobranza .grafica .g-base { stroke: transparent; }
.cobranza .grafica .g-fact { fill: var(--p-menta); opacity: .55; }
.cobranza .grafica g:hover .g-fact { opacity: .85; fill: var(--p-menta); }
.cobranza .grafica .g-ultimo .g-fact { fill: var(--marca); opacity: 1; }
.cobranza .grafica .g-eje-ultimo { fill: var(--tinta); font-weight: 700; }
.cobranza .grafica .g-area-2 { fill: var(--tinta); opacity: .05; }
.cobranza .grafica .g-trazo-2 { stroke: var(--tinta); stroke-width: 2; }
.cobranza .grafica .g-punto-2 { fill: var(--tinta); stroke: var(--sup-1); }
.cobranza .grafica .g-globo rect { fill: var(--tinta); }
.cobranza .grafica .g-globo text { fill: var(--sup-1); font-size: 8.8px; font-weight: 700; }
.cobranza .grafica .g-globo .g-globo-2 { font-weight: 500; opacity: .75; }
.cobranza .leyenda { font-size: .75rem; }
.cobranza .leyenda .l-fact i { background: var(--p-menta); }
.cobranza .leyenda .l-cob2 i { background: var(--tinta); height: 3px; border-radius: 2px; width: .9rem; }
.cobranza .chispa.verde .c-trazo { stroke: var(--marca); }
.cobranza .chispa.verde .c-area { fill: var(--marca); opacity: .1; }
.cobranza .chispa.verde .c-punto { fill: var(--marca); }

/* LA VENTANA: hoy · 7 días · 30 días · 12 meses · todo.
   Manda en TODA la pantalla, así que se ve como un mando —riel con borde,
   pastilla en tinta sobre la actual— y no como una etiqueta más. Vive arriba
   de la página y se repite dentro de cada lupa. */
.ventanas {
  display: inline-flex; padding: .25rem; gap: .1rem;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 999px;
}
.ventanas a, .ventanas span {
  padding: .44rem .95rem; border-radius: 999px; font-size: .8rem; font-weight: 650;
  color: var(--texto-2); white-space: nowrap; transition: background .16s, color .16s;
}
.ventanas a:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.ventanas .actual, .ventanas a.actual:hover { background: var(--tinta); color: var(--sup-1); }
.ventanas .a-mano { background: var(--marca); color: #fff; }
@media (max-width: 760px) {
  .ventanas { width: 100%; justify-content: space-between; }
  .ventanas a { padding: .42rem .5rem; font-size: .76rem; flex: 1; text-align: center; }
}

/* las losas: cuatro cifras de contexto en fichas grises bajo una gráfica */
.losas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .6rem; margin-top: 1rem; }
.losas > div { background: var(--sup-2); border-radius: 1rem; padding: .7rem .85rem; display: grid; gap: .15rem; }
.losas > div > span { font-size: .72rem; font-weight: 500; color: var(--gris); }
.losas > div > b { font-size: 1.05rem; font-weight: 700; color: var(--tinta); }
.losas > div > small { font-size: .7rem; color: var(--gris); font-weight: 500; }
.losas > div.mal { background: var(--rojo-suave); }
.losas > div.mal > b { color: var(--rojo); }

/* --- el anillo: grueso, pastel, con el total en el centro --- */
.cobranza { --m-efectivo: var(--p-menta); --m-banco: var(--p-lila); --m-yape: var(--p-arena); --m-yape_personal: var(--p-coral); --m-otro: var(--p-gris); }
.medios-anillo { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: center; }
@media (max-width: 420px) { .medios-anillo { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.anillo { display: block; width: 100%; max-width: 11.5rem; margin-inline: auto; height: auto; overflow: visible; }
.anillo .a-fondo { stroke: var(--sup-2); }
.anillo .a-parte { fill: var(--m); transition: opacity .14s; }
.anillo .a-parte:hover { opacity: .8; }
.anillo .a-centro { font-family: inherit; font-size: 19px; font-weight: 700; letter-spacing: -.03em; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.anillo .a-pie { font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; fill: var(--gris); }
.m-efectivo { --m: var(--m-efectivo); }
.m-banco { --m: var(--m-banco); }
.m-yape { --m: var(--m-yape); }
.m-yape_personal { --m: var(--m-yape_personal); }
.m-otro { --m: var(--m-otro); }
.medios-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.medios-lista li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: .6rem; align-items: center; padding: .4rem 0; font-size: .82rem; font-weight: 500; color: var(--texto-2);
}
.medios-lista li i { grid-row: 1 / 3; width: .7rem; height: .7rem; border-radius: 50%; background: var(--m); }
.medios-lista li .m-nombre { grid-column: 2; color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medios-lista li b { grid-column: 3; grid-row: 1; font-size: .86rem; color: var(--tinta); text-align: right; }
.medios-lista li .m-monto { grid-column: 3; grid-row: 2; font-size: .7rem; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
.aviso-personal {
  margin-top: 1rem; padding: .7rem .85rem; border-radius: 1rem;
  background: color-mix(in srgb, var(--p-coral) 22%, transparent);
  display: flex; gap: .65rem; align-items: center;
}
.aviso-personal > div { display: grid; gap: .1rem; min-width: 0; }
.aviso-icono {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%;
  background: var(--sup-1); color: var(--rojo);
}
.aviso-icono svg { width: 1rem; height: 1rem; }
.aviso-personal b { font-size: .82rem; color: var(--tinta); }
.aviso-personal span { font-size: .72rem; color: var(--texto-2); font-weight: 500; }

/* --- las personas: filas como transacciones, con avatar, nombre, sede y cifra --- */
.personas { display: grid; gap: .25rem; }
.persona {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem;
  padding: .6rem .7rem; border-radius: 1rem; transition: background .14s;
}
.persona:hover { background: var(--sup-2); }
.persona.resto { display: none; }
.avatar {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  background: var(--sup-3); color: var(--texto-2); font-size: .78rem; font-weight: 700;
}
.avatar.primero { background: var(--tinta); color: var(--sup-1); }
.avatar.chico { width: 1.9rem; height: 1.9rem; font-size: .66rem; }
.persona-datos { min-width: 0; display: grid; gap: .1rem; }
.persona-datos b { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-datos span { font-size: .74rem; color: var(--gris); font-weight: 500; }
.persona-cifra { text-align: right; display: grid; gap: .1rem; }
.persona-cifra b { font-size: .95rem; font-weight: 700; white-space: nowrap; }
.persona-cifra span { font-size: .7rem; color: var(--gris); font-weight: 500; white-space: nowrap; }
.ver-mas {
  justify-self: start; margin: .35rem 0 0 .7rem; background: transparent; border: 1px solid var(--linea-2);
  border-radius: 999px; padding: .38rem .85rem; font: inherit; font-size: .76rem; font-weight: 600;
  color: var(--texto-2); cursor: pointer; transition: background .14s, color .14s;
}
.ver-mas:hover { background: var(--sup-2); color: var(--tinta); }

/* --- el detalle: pestañas con conteo y un panel a la vez --- */
.detalle { padding-top: 1.1rem; }
.pestanas { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pestana {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--sup-1); color: var(--texto-2);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .14s, color .14s, border-color .14s;
}
.pestana:hover { background: var(--sup-2); color: var(--tinta); }
.pestana .cuenta {
  font-size: .68rem; font-weight: 700; padding: .08rem .48rem; border-radius: 999px;
  background: var(--sup-3); color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.pestana .cuenta.mal { background: var(--rojo-suave); color: var(--rojo); }
.pestana.actual, .pestana.actual:hover { background: var(--tinta); color: var(--sup-1); border-color: var(--tinta); }
.pestana.actual .cuenta { background: rgba(255, 255, 255, .18); color: inherit; }
.panel-pestana > .pista { margin-bottom: .9rem; }
.panel-pestana .caja-cab { margin-bottom: .8rem; }

/* tablas del detalle: bandas suaves, sin líneas, cabecera discreta */
.cobranza .tabla { font-size: .86rem; }
.cobranza .tabla th { font-size: .68rem; letter-spacing: .08em; padding: .4rem .8rem .5rem; border: 0; }
.cobranza .tabla.bandas { border-collapse: separate; border-spacing: 0 .4rem; }
.cobranza .tabla.bandas td { border: 0; background: var(--sup-2); padding: .7rem .8rem; vertical-align: middle; }
.cobranza .tabla.bandas td:first-child { border-radius: 1rem 0 0 1rem; }
.cobranza .tabla.bandas td:last-child { border-radius: 0 1rem 1rem 0; }
.cobranza .tabla.bandas tr:hover td { background: var(--sup-3); }
.cobranza .tabla .cifra { font-size: .86rem; white-space: nowrap; }
.cobranza .tabla .pista { font-size: .7rem; line-height: 1.35; white-space: nowrap; margin-top: .1rem; }
.cobranza .tabla a.cliente { color: var(--tinta); font-weight: 600; }
.cobranza .tabla a.cliente:hover { color: var(--marca); text-decoration: none; }
.cliente-fila, .plaza-fila { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.plaza-fila b { font-size: .88rem; }
.cobranza .tabla td .barrita { margin: .45rem 0 0 0; max-width: 11rem; height: 4px; }
.cobranza .barrita > span { background: var(--p-menta); }
@media (max-width: 640px) {
  .cobranza .tabla.bandas td:first-child { background: var(--sup-2); box-shadow: none; }
  .cobranza .tabla.bandas tr:hover td:first-child { background: var(--sup-3); }
}

/* el reloj de la deuda: un punto de color y los días */
.dias-chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600;
  color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dias-chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--p-salvia); flex: none; }
.dias-chip.medio::before { background: var(--p-arena); }
.dias-chip.tarde { color: var(--rojo); }
.dias-chip.tarde::before { background: var(--p-coral); }

/* las cajas de hoy: fichas con avatar y su estado */
.cajas-hoy { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .55rem; margin-bottom: .9rem; }
.caja-chip {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem;
  padding: .6rem .75rem; border-radius: 1rem; background: var(--sup-2);
}
.caja-chip > div { display: grid; gap: .05rem; min-width: 0; }
.caja-chip b { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caja-chip .cifra { font-size: .72rem; color: var(--gris); font-weight: 500; }
.caja-chip .caja-estado {
  grid-column: 1 / 3; margin-top: .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--estado, var(--gris)); display: inline-flex; align-items: center; gap: .35rem;
}
.caja-chip .caja-estado::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--estado, var(--gris)); }
.caja-chip.estado-cerrada { --estado: var(--verde); }
.caja-chip.estado-abierta { --estado: var(--marca); }
.caja-chip.estado-tarde { --estado: var(--ambar); }
.caja-chip.estado-sin_cerrar { --estado: var(--rojo); background: var(--rojo-suave); }
.caja-chip.estado-sin_cerrar .avatar { background: var(--rojo); color: #fff; }
.leyenda-pila { margin: .6rem 0 .3rem; }
.leyenda .l-ok i { background: var(--p-salvia); }
.leyenda .l-tarde i { background: var(--p-arena); }
.leyenda .l-mal i { background: var(--p-coral); }
.leyenda .l-abierta i { background: var(--p-menta); }
.g-pila .p-ok { fill: var(--p-salvia); }
.g-pila .p-tarde { fill: var(--p-arena); }
.g-pila .p-mal { fill: var(--p-coral); }
.g-pila .p-abierta { fill: var(--p-menta); }

/* la deuda por antigüedad y los egresos: barras gordas y redondas */
.edades { display: grid; gap: .55rem; }
.edad { display: grid; grid-template-columns: 7rem minmax(3rem, 1fr) auto auto; align-items: center; gap: .6rem; font-size: .84rem; }
.edad-rotulo { font-weight: 600; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edad-barra { display: block; height: 12px; border-radius: 999px; background: var(--sup-2); overflow: hidden; }
.edad-barra > span { display: block; height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
/* de la menta al coral: la escala es la EDAD, no el monto */
.edad-1 .edad-barra > span { background: var(--p-menta); }
.edad-2 .edad-barra > span { background: var(--p-salvia); }
.edad-3 .edad-barra > span { background: var(--p-arena); }
.edad-4 .edad-barra > span { background: color-mix(in srgb, var(--p-coral) 70%, var(--p-arena)); }
.edad-5 .edad-barra > span { background: var(--p-coral); }
.edad-eg .edad-barra > span { background: var(--p-coral); }
.edad b { font-size: .86rem; min-width: 5rem; text-align: right; }
.edad-n { color: var(--gris); font-size: .74rem; min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .edad { grid-template-columns: 6rem 1fr auto; } .edad-n { display: none; } }
.motivos { display: grid; gap: .35rem; align-content: start; }
.motivos > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .8rem; border-radius: .8rem; background: var(--sup-2); font-size: .8rem; }
.motivos > div > span { color: var(--texto-2); font-weight: 500; }

/* los comprobantes: la franja con/sin */
.franja { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--sup-2); margin: .1rem 0 1rem; }
.franja > span { display: block; height: 100%; }
.franja .f-con { background: var(--p-menta); }
.franja .f-sin { background: var(--p-arena); }

/* la barra del TMS: los cinco libros y las herramientas */
.tms-barra { display: grid; gap: .9rem; padding: 1rem 1.3rem; background: var(--sup-2); box-shadow: none; }
.cobranza .tms-barra:hover { box-shadow: none; }
.libros { display: flex; flex-wrap: wrap; gap: .4rem; }
.libro {
  display: grid; gap: .05rem; padding: .42rem .75rem; border-radius: .8rem;
  background: var(--sup-1); min-width: 7.5rem;
}
.libro b { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.libro span { font-size: .72rem; color: var(--gris); font-weight: 500; font-variant-numeric: tabular-nums; }
.libro.vacio { border: 1px dashed var(--linea-2); background: transparent; opacity: .7; }
.herramientas { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; }
.herramientas > form { margin: 0; }
.herramientas > p { display: none; }
.tms-barra .fila-form .campo { max-width: 11rem; }

/* --- LA ESCALA DE GRISES DE COBRANZA ---
   Lo de arriba dio la forma; esto da el tono. Las gráficas se
   pintan con los cinco grises de `body.panel.gris`, y el color
   queda para lo que pide atención: los puntos de estado, la
   píldora que baja, y `--ojo` —la única tinta cálida— en la
   deuda vieja, lo que falta facturar y el dinero que entró a un
   celular que no es de la empresa. */
.cobranza {
  /* los medios de pago: cuatro grises y el ojo para el que no cuadra */
  --m-efectivo: var(--d-cobrado);
  --m-banco: var(--d-facturado);
  --m-yape: var(--d-caja);
  --m-otro: var(--gr-3);
  --m-yape_personal: var(--d-alerta);
  /* los pasteles del primer intento apuntan ahora a la escala:
     así toda regla que los use hereda el tono sin repetirse */
  --p-menta: var(--gr-5);
  --p-salvia: var(--gr-4);
  --p-arena: var(--gr-3);
  --p-lila: var(--gr-2);
  --p-gris: var(--gr-4);
  --p-coral: var(--ojo);
}

/* la barra del día, la del último día, y las líneas del eje */
.cobranza .grafica .g-fact { fill: var(--gr-5); opacity: 1; }
.cobranza .grafica g:hover .g-fact { fill: var(--gr-4); }
.cobranza .grafica .g-ultimo .g-fact { fill: var(--gr-1); }
.cobranza .barrita > span { background: color-mix(in srgb, var(--tinta-dato, var(--gr-2)) 70%, transparent); }
.cobranza .ventanas .a-mano { background: var(--tinta); color: var(--sup-1); }

/* la deuda por antigüedad: el gris se oscurece con los días y el
   último balde —lo que ya nadie va a cobrar solo— lleva el ojo. La
   rampa arranca en el gris medio: el más claro se perdía contra el
   riel y el primer balde parecía vacío. */
.cobranza .edad-1 .edad-barra > span { background: color-mix(in srgb, var(--tinta-dato, var(--gr-1)) 28%, var(--gr-5)); }
.cobranza .edad-2 .edad-barra > span { background: color-mix(in srgb, var(--tinta-dato, var(--gr-1)) 46%, var(--gr-5)); }
.cobranza .edad-3 .edad-barra > span { background: color-mix(in srgb, var(--tinta-dato, var(--gr-1)) 64%, var(--gr-5)); }
.cobranza .edad-4 .edad-barra > span { background: color-mix(in srgb, var(--tinta-dato, var(--gr-1)) 82%, var(--gr-5)); }
.cobranza .edad-5 .edad-barra > span { background: var(--tinta-dato, var(--d-deuda)); }
.cobranza .edad-eg .edad-barra > span { background: var(--gr-2); }

/* los cierres de caja: hecho, tarde, sin cerrar, abierta */
.cobranza .g-pila .p-ok, .cobranza .leyenda .l-ok i { fill: var(--d-cobrado); background: var(--d-cobrado); }
.cobranza .g-pila .p-tarde, .cobranza .leyenda .l-tarde i { fill: var(--d-camino); background: var(--d-camino); }
.cobranza .g-pila .p-mal, .cobranza .leyenda .l-mal i { fill: var(--d-deuda); background: var(--d-deuda); }
.cobranza .g-pila .p-abierta, .cobranza .leyenda .l-abierta i { fill: var(--d-caja); background: var(--d-caja); }
.cobranza .g-pila rect { background: none; }
.cobranza .leyenda .l-fact i { background: var(--gr-5); }

/* los comprobantes: lo que lleva documento y lo que no */
.cobranza .franja .f-con { background: var(--d-facturado); }
.cobranza .franja .f-sin { background: var(--d-alerta); }

/* --- el color, solo donde es un estado --- */
.cobranza .chip { background: var(--sup-2); color: var(--texto-2); }
.cobranza .chip.ok::before { background: var(--verde); }
.cobranza .chip.transito::before { background: var(--ambar); }
.cobranza .chip.urgente::before { background: var(--rojo); }
.cobranza .chip.gris::before { background: var(--gris); }
.cobranza .chip.marca::before { background: var(--gr-2); }
.cobranza .delta { background: var(--sup-2); color: var(--texto-2); }
.cobranza .delta.bien { color: var(--verde-texto); }
.cobranza .delta.mal { color: var(--ojo); }
.cobranza .texto-mal, .cobranza .tabla .texto-mal { color: var(--ojo); }
.cobranza .texto-bien, .cobranza .tabla .texto-bien { color: var(--tinta); }
.cobranza .kpi-icono.alerta { background: var(--ojo-suave); color: var(--ojo); }
.cobranza .pestana .cuenta.mal { background: var(--ojo-suave); color: var(--ojo); }
.cobranza .losas > div.mal { background: var(--ojo-suave); }
.cobranza .losas > div.mal > b { color: var(--ojo); }
.cobranza .dias-chip::before { background: var(--verde); }
.cobranza .dias-chip.medio::before { background: var(--ambar); }
.cobranza .dias-chip.tarde { color: var(--ojo); }
.cobranza .dias-chip.tarde::before { background: var(--ojo); }
.cobranza .caja-chip.estado-abierta { --estado: var(--gr-2); }
.cobranza .caja-chip.estado-sin_cerrar { --estado: var(--ojo); background: var(--ojo-suave); }
.cobranza .caja-chip.estado-sin_cerrar .avatar { background: var(--ojo); color: #fff; }
.cobranza .aviso-personal { background: var(--ojo-suave); }
.cobranza .aviso-icono { color: var(--ojo); }
.cobranza .tabla a.cliente:hover { color: var(--ojo); }
.cobranza .boton-mini.fantasma { color: var(--texto-2); border-color: var(--linea-2); }
.cobranza .boton-mini.fantasma:hover { background: var(--sup-2); color: var(--tinta); }
.cobranza .boton-mini:hover { background: var(--gr-2); color: var(--sup-1); }
.cobranza .campo:focus-visible { border-color: var(--gr-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gr-3) 30%, transparent); }

/* --- EL PULSO — la gráfica principal ---
   Las CIFRAS viven arriba, en HTML y grandes; el dibujo se queda con la
   forma. Al entrar en una columna, esas mismas cifras pasan a ser las de ese
   cubo: la respuesta aparece siempre en el mismo sitio y con el mismo cuerpo,
   que es lo único que se lee de un vistazo. Dentro del SVG las cifras
   escalaban con el dibujo y en un teléfono se leían a la mitad. */
.pulso { display: grid; gap: .55rem; }
.pulso-cab { display: flex; align-items: center; gap: .5rem 1.4rem; flex-wrap: wrap; min-height: 3.2rem; }
.pulso-cuando {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sup-1); background: var(--tinta); padding: .28rem .7rem; border-radius: 999px;
  white-space: nowrap;
}
.pulso-cifras { display: flex; align-items: flex-end; gap: .5rem 1.6rem; flex-wrap: wrap; }
.pc { display: grid; gap: .1rem; }
.pc > b {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.02; color: var(--pc-color, var(--tinta));
}
.pc > span { display: flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 600; color: var(--gris); }
.pc > span > i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--pc-color, var(--gris)); flex: none; }
.pc em { font-style: normal; font-weight: 500; }
.pc em:not(:empty)::before { content: "\00b7"; margin: 0 .3rem 0 .1rem; }
.pc.s-a { --pc-color: var(--d-cobrado); }
.pc.s-b { --pc-color: var(--d-facturado); }
.pc.s-r { --pc-color: var(--tinta); }

.g-pulso { display: block; width: 100%; height: auto; overflow: visible; }
.g-pulso .g-linea { stroke: var(--linea); stroke-width: 1; }
.g-pulso .g-eje { font-size: 10px; font-weight: 600; fill: var(--gris); }
.g-pulso .g-eje-x { font-size: 11px; }
.g-pulso .g-eje-ultimo { fill: var(--tinta); font-weight: 800; }
/* la columna: de la tinta del cobrado a una versión más clara arriba, para
   que el bloque tenga peso abajo y no parezca un rectángulo plano */
.g-pulso .ga-1 { stop-color: var(--d-cobrado); stop-opacity: .78; }
.g-pulso .ga-2 { stop-color: var(--d-cobrado); stop-opacity: 1; }
.g-pulso .b-a { transition: opacity .12s; }
.g-pulso .g-area { fill: var(--d-facturado); opacity: .1; }
.g-pulso .g-trazo { fill: none; stroke: var(--d-facturado); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.g-pulso .g-punto { fill: var(--d-facturado); stroke: var(--sup-1); stroke-width: 3; }
.g-pulso .g-punto-b { fill: var(--d-facturado); stroke: var(--sup-1); stroke-width: 2.2; opacity: 0; transition: opacity .12s; }
.g-pulso .g-media { stroke: var(--gr-3); stroke-width: 1.4; stroke-dasharray: 6 5; }
/* las cifras que caen DENTRO del dibujo se separan de lo que tengan detrás con
   un halo del color de la tarjeta: sin él, «media S/ 17.5k» se leía encima de
   la curva del facturado */
.g-pulso .g-media-rot, .g-pulso .g-cifra, .g-pulso .g-eje:not(.g-eje-x) {
  paint-order: stroke fill; stroke: var(--sup-1); stroke-width: 3.5px; stroke-linejoin: round;
}
.g-pulso .g-media-rot { font-size: 9.5px; font-weight: 700; fill: var(--gr-3); }
.g-pulso .g-cifra { font-size: 10.5px; font-weight: 800; fill: var(--d-cobrado); }
.g-pulso .g-rasgado { fill: none; stroke: var(--sup-1); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* la columna bajo el ojo: se enciende ella y se apagan las demás */
.g-pulso .col { cursor: crosshair; outline: none; }
.g-pulso .col-zona { fill: transparent; transition: fill .12s; }
.g-pulso .col:hover .col-zona, .g-pulso .col.mirada .col-zona { fill: color-mix(in srgb, var(--tinta) 5%, transparent); }
.g-pulso .col:focus-visible .col-zona { fill: color-mix(in srgb, var(--tinta) 9%, transparent); stroke: var(--tinta); stroke-width: 1.4; }
.g-pulso .g-guia { stroke: var(--linea-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.g-pulso .col:hover .g-guia, .g-pulso .col.mirada .g-guia { opacity: 1; }
.g-pulso .col:hover .g-punto-b, .g-pulso .col.mirada .g-punto-b { opacity: 1; }
.g-pulso:has(.col:hover) .b-a, .g-pulso:has(.col.mirada) .b-a { opacity: .3; }
.g-pulso:has(.col:hover) .tira, .g-pulso:has(.col.mirada) .tira { opacity: .35; }
.g-pulso .col:hover .b-a, .g-pulso .col.mirada .b-a,
.g-pulso .col:hover .tira, .g-pulso .col.mirada .tira { opacity: 1; }

/* LA TIRA DE COBERTURA: una celda por cubo, del verde de lo cobrado al
   ámbar de lo que se facturó y no entró. Es la única parte del dibujo que
   contesta la pregunta del dueño sin hacer una resta con la vista. */
.g-pulso .tira { transition: opacity .12s; }
.g-pulso .tira.t-alta { fill: var(--d-cobrado); }
.g-pulso .tira.t-media { fill: var(--d-camino); }
.g-pulso .tira.t-baja { fill: var(--d-deuda); }
.g-pulso .tira.t-nada { fill: var(--linea); }
/* la hora que aún no ha pasado: presente en el reloj, sin juicio */
.g-pulso .tira.t-futuro { fill: var(--linea); opacity: .45; }
.pulso-pie { display: flex; align-items: center; gap: .3rem 1rem; flex-wrap: wrap; font-size: .72rem; font-weight: 500; color: var(--gris); margin: 0; }
.pulso-pie .l-tira { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--texto-2); }
.pulso-pie .l-tira i { width: .85rem; height: .5rem; border-radius: 2px; margin-left: .4rem; }
.pulso-pie .l-tira i:first-child { margin-left: 0; }
.pulso-pie .l-tira i.t-alta { background: var(--d-cobrado); }

/* una tarjeta sin nada que contar todavía: ni un hueco blanco ni una excusa,
   una nota corta centrada que dice qué aparecerá ahí */
.vacio-suave {
  display: grid; place-items: center; gap: .35rem; text-align: center;
  padding: 2.2rem 1rem; color: var(--gris);
}
.vacio-suave b { font-size: .92rem; color: var(--texto-2); }
.vacio-suave > span:last-child { font-size: .78rem; max-width: 22rem; }
.vacio-suave .kpi-icono { width: 2.4rem; height: 2.4rem; margin-bottom: .3rem; }
/* un rótulo que separa dos bloques dentro de una misma tarjeta */
.pista.separa { margin: 1rem 0 .5rem; padding-top: .8rem; border-top: 1px dashed var(--linea); font-weight: 600; color: var(--texto-2); }
.pulso-pie .l-tira i.t-media { background: var(--d-camino); }
.pulso-pie .l-tira i.t-baja { background: var(--d-deuda); }

/* --- EL COLOR EN LAS TARJETAS ---
   Cada cifra lleva su tinta en el ícono y en el número: es el mismo índice
   que en las gráficas, y por eso se reconocen sin leer el rótulo. */
/* la clase de color no es de la tarjeta sino del CONCEPTO: la misma tinta
   viaja de la cifra a la pantalla que se abre al pulsarla */
.cobranza .k-cobrado { --tinta-dato: var(--d-cobrado); --suave-dato: var(--d-cobrado-suave); }
.cobranza .k-facturado { --tinta-dato: var(--d-facturado); --suave-dato: var(--d-facturado-suave); }
.cobranza .k-deuda { --tinta-dato: var(--d-deuda); --suave-dato: var(--d-deuda-suave); }
.cobranza .k-camino { --tinta-dato: var(--d-camino); --suave-dato: var(--d-camino-suave); }
.cobranza .k-caja { --tinta-dato: var(--d-caja); --suave-dato: var(--d-caja-suave); }
.cobranza .kpi .kpi-icono { background: var(--suave-dato, var(--sup-2)); color: var(--tinta-dato, var(--tinta)); }
.cobranza .kpi b.cifra { color: var(--tinta-dato, var(--tinta)); }
.cobranza .kpi b.cifra small { color: var(--gris); }
.cobranza .chispa .c-trazo { stroke: var(--tinta-dato, var(--tinta)); stroke-width: 1.6; }
.cobranza .chispa .c-area { fill: var(--tinta-dato, var(--tinta)); opacity: .1; }
.cobranza .chispa .c-punto { fill: var(--tinta-dato, var(--tinta)); }

/* --- LA LUPA: una tarjeta abierta a pantalla completa ---
   Se pulsa una cifra y su tarjeta crece hasta ocupar la pantalla, con el
   detalle que no cabía: más gráficas, más cortes, la tabla entera. Es un
   <dialog> de verdad —cierra con Escape, atrapa el foco, oscurece el resto—
   y entra con una animación corta que dice de dónde salió. */
.kpi.abre { cursor: pointer; text-align: left; font: inherit; width: 100%; }
.kpi.abre:focus-visible { outline: 2px solid var(--tinta-dato, var(--marca)); outline-offset: 3px; }
.kpi.abre .kpi-lupa {
  position: absolute; top: .9rem; right: 1rem; width: 1.1rem; height: 1.1rem;
  color: var(--gris); opacity: 0; transition: opacity .16s;
}
.kpi.abre:hover .kpi-lupa, .kpi.abre:focus-visible .kpi-lupa { opacity: 1; }

.lupa {
  border: 0; padding: 0; background: transparent; max-width: 100%; max-height: 100%;
  width: 100%; height: 100%; overflow: visible;
  /* EL COLOR, A MANO Y NO POR HERENCIA. Un <dialog> abierto con showModal()
     vive en el top layer y el navegador le fija `color: CanvasText` en su
     hoja de estilos: con el SISTEMA del visitante en oscuro eso es blanco, y
     todo el texto que heredaba —los h2, las cifras, las celdas— salía blanco
     sobre tarjetas blancas. Invisible. Sigue pasando aunque el panel sea
     siempre claro, porque quien manda ahí es el sistema: la defensa son la
     tinta puesta a mano, este `color-scheme: inherit` y el
     <meta name="color-scheme" content="light"> de la plantilla. Si ese meta
     desaparece, la lupa vuelve a salir en blanco sobre blanco. */
  color: var(--tinta);
  color-scheme: inherit;
}
.lupa .lupa-caja { color: var(--tinta); }
.lupa::backdrop { background: rgba(8, 14, 20, .55); backdrop-filter: blur(3px); }
/* LA LUPA CABE EN LA PANTALLA. Antes era una columna larga y había que bajar
   por ella para llegar al segundo cuadro, que es justo lo contrario de abrir
   algo «a pantalla completa». Ahora la caja es una rejilla de dos filas: la
   cabecera arriba —con su ventana de tiempo y sus cifras de contexto— y
   debajo tarjetas de altura igual que se DESLIZAN POR DENTRO cuando su lista
   es larga. Lo que se desplaza es una lista, nunca la pantalla. */
.lupa-caja {
  position: absolute; inset: 2vh 2.5vw;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem;
  overflow: hidden; overscroll-behavior: contain;
  background: var(--sup-0); border-radius: 1.6rem; padding: 1.25rem 1.5rem 1.4rem;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5);
}
.lupa-cab {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .5rem 1rem; align-items: center; margin: 0;
}
.lupa-cab .kpi-icono { width: 2.6rem; height: 2.6rem; border-radius: .9rem; }
.lupa-cab .kpi-icono svg { width: 1.3rem; height: 1.3rem; }
.lupa-mandos { display: flex; align-items: center; gap: .6rem; }
.lupa-titulo { min-width: 0; }
.lupa-titulo h2 { font-size: 1rem; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--texto-2); }
.lupa-titulo .lupa-cifra { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.035em; color: var(--tinta-dato, var(--tinta)); line-height: 1.05; }
.lupa-titulo .lupa-cifra small { font-size: .5em; font-weight: 600; color: var(--gris); }
.lupa-titulo p { font-size: .8rem; color: var(--gris); margin-top: .1rem; }
/* las cifras de contexto suben a la cabecera: en el cuerpo se comían una fila */
.lupa-tiras { grid-column: 1 / -1; margin-top: .1rem; }
.lupa-tiras > div { padding: .5rem .75rem; }
.lupa-tiras > div > b { font-size: .95rem; }
.cerrar-lupa {
  flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--sup-1); color: var(--texto-2); cursor: pointer;
  transition: background .14s, color .14s;
}
.cerrar-lupa:hover { background: var(--tinta); color: var(--sup-1); border-color: var(--tinta); }
.cerrar-lupa svg { width: 1.05rem; height: 1.05rem; }
.lupa-rejilla {
  display: grid; gap: 1rem; min-height: 0; overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* la primera fila puede pedir más sitio (--f1: la gráfica); las de abajo se
     reparten lo que queda a partes iguales */
  grid-template-rows: minmax(0, var(--f1, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.lupa-rejilla > .caja-blanca {
  margin: 0; min-height: 0; overflow: hidden; padding: 1rem 1.15rem;
  display: flex; flex-direction: column;
}
.lupa-rejilla .ancha { grid-column: 1 / -1; }
.lupa-rejilla .caja-cab { margin-bottom: .7rem; }
/* lo que se desliza es la lista, no la pantalla */
.desliza { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: .25rem; }
.desliza::-webkit-scrollbar { width: 8px; height: 8px; }
.desliza::-webkit-scrollbar-thumb { background: var(--linea-2); border-radius: 999px; }
/* la gráfica dentro de una lupa se encoge hasta caber en su tarjeta */
.lupa-rejilla .pulso { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.lupa-rejilla .pulso .g-pulso { min-height: 0; height: 100%; }
/* las demás gráficas servidas hacen lo mismo dentro de su tarjeta */
.lupa-rejilla > .caja-blanca > .grafica { min-height: 0; flex: 1 1 auto; height: 100%; }

/* pantallas cortas o angostas: la lupa vuelve a ser una columna que se
   desplaza entera. Encajar a la fuerza dos filas en 500 px de alto no deja
   nada legible. */
@media (max-width: 900px), (max-height: 620px) {
  .lupa-caja { inset: 0; border-radius: 0; padding: 1rem 1rem 2rem; overflow: auto; grid-template-rows: auto auto; }
  .lupa-cab { grid-template-columns: auto minmax(0, 1fr); }
  .lupa-mandos { grid-column: 1 / -1; flex-wrap: wrap; }
  .lupa-rejilla { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-auto-rows: auto; overflow: visible; }
  .lupa-rejilla > .caja-blanca { overflow: visible; }
  .desliza { overflow: visible; }
  .lupa-rejilla .pulso, .lupa-rejilla .pulso .g-pulso { height: auto; }
}

/* la animación: la tarjeta crece desde su sitio y el fondo se oscurece */
@keyframes lupa-entra { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
.lupa[open] .lupa-caja { animation: lupa-entra .26s cubic-bezier(.22, 1, .36, 1); }
.lupa[open]::backdrop { animation: velo-entra .26s ease; }
@media (prefers-reduced-motion: reduce) {
  .lupa[open] .lupa-caja, .lupa[open]::backdrop { animation: none; }
}
/* mientras hay una lupa abierta, el fondo no se desplaza */
body.panel:has(.lupa[open]) { overflow: hidden; }

/* las barras horizontales de las pantallas abiertas: un rótulo, su barra y su cifra */
.barras-h { display: grid; gap: .55rem; }
.barra-h { display: grid; grid-template-columns: 8.5rem minmax(2.5rem, 1fr) auto auto; align-items: center; gap: .7rem; font-size: .84rem; }
.barra-h > span:first-child { font-weight: 600; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-h .riel-h { height: 14px; border-radius: 999px; background: var(--sup-2); overflow: hidden; }
.barra-h .riel-h > span { display: block; height: 100%; border-radius: 999px; background: var(--tinta-dato, var(--gr-3)); transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.barra-h > b { font-size: .86rem; font-weight: 700; min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.barra-h .barra-n { font-size: .74rem; color: var(--gris); min-width: 3.5rem; text-align: right; }
@media (max-width: 560px) { .barra-h { grid-template-columns: 6rem minmax(2rem, 1fr) auto auto; gap: .5rem; } .barra-h > b { min-width: 4.2rem; } }

/* --- LAS COLUMNAS DE CIERRES, PULSABLES ---
   Cada barra de la pila es un botón: enseña el día que representa. La zona
   sensible pasa de la barra a toda la columna, para no pedir puntería. */
.g-pila .col-caja { cursor: pointer; }
/* la zona de cada columna se ve de fábrica, tenue: sin eso nadie adivina
   que la gráfica se pulsa, y el detalle de abajo parecía suelto */
.g-pila .col-zona { fill: color-mix(in srgb, var(--tinta) 3.5%, transparent); transition: fill .12s; }
.g-pila .col-caja:hover .col-zona { fill: color-mix(in srgb, var(--tinta) 9%, transparent); }
.g-pila .col-caja:focus-visible { outline: none; }
.g-pila .col-caja:focus-visible .col-zona { fill: color-mix(in srgb, var(--tinta) 13%, transparent); stroke: var(--tinta); stroke-width: 1.5; }
.g-pila .col-caja.elegida .col-zona { fill: color-mix(in srgb, var(--d-caja) 16%, transparent); stroke: var(--d-caja); stroke-width: 1.2; }
.g-pila .p-vacia { fill: var(--linea-2); }

/* la invitación a pulsar, arriba de la gráfica y no perdida en la leyenda */
.cajas-invita {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: .9rem 0 .5rem; padding: .55rem .8rem; border-radius: var(--r-2);
  background: color-mix(in srgb, var(--d-caja) 9%, transparent);
}
.cajas-invita .invita-icono {
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none;
  border-radius: 50%; background: var(--sup-1); color: var(--d-caja);
}
.cajas-invita .invita-icono svg { width: .95rem; height: .95rem; }
.cajas-invita b { font-size: .82rem; font-weight: 700; color: var(--d-caja); }
.cajas-invita > span:last-child { font-size: .78rem; color: var(--texto-2); font-weight: 500; }

/* el día que se enseña al pulsar una columna */
.dias-caja { margin-top: .9rem; }
.dia-caja { border-top: 1px dashed var(--linea); padding-top: .8rem; }
.dia-cab {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem;
  padding-left: .7rem; border-left: 3px solid var(--d-caja);
}
.dia-cab > b { font-size: 1rem; font-weight: 700; }
.dia-cuentas { display: flex; gap: .4rem; flex-wrap: wrap; }
.dia-cuentas .dc {
  font-size: .7rem; font-weight: 700; padding: .16rem .55rem; border-radius: 999px;
  background: var(--sup-2); color: var(--texto-2);
}
.dia-cuentas .dc.ok { background: color-mix(in srgb, var(--d-cobrado) 15%, transparent); color: var(--d-cobrado); }
.dia-cuentas .dc.tarde { background: color-mix(in srgb, var(--d-camino) 18%, transparent); color: var(--d-camino); }
.dia-cuentas .dc.mal { background: color-mix(in srgb, var(--d-deuda) 15%, transparent); color: var(--d-deuda); }
.dia-cuentas .dc.abierta { background: color-mix(in srgb, var(--d-caja) 15%, transparent); color: var(--d-caja); }
.estado-caja {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600;
  color: var(--texto-2); white-space: nowrap;
}
.estado-caja::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gris); flex: none; }
.estado-caja.e-cerrada { color: var(--d-cobrado); }
.estado-caja.e-cerrada::before { background: var(--d-cobrado); }
.estado-caja.e-tarde { color: var(--d-camino); }
.estado-caja.e-tarde::before { background: var(--d-camino); }
.estado-caja.e-sin_cerrar { color: var(--d-deuda); }
.estado-caja.e-sin_cerrar::before { background: var(--d-deuda); }
.estado-caja.e-abierta { color: var(--d-caja); }
.estado-caja.e-abierta::before { background: var(--d-caja); }
.dia-faltaron { margin-top: .7rem; }
.dia-faltaron b { color: var(--d-deuda); }

/* --- LAS GRÁFICAS EN PANTALLAS ANGOSTAS ---
   El SVG escala entero con su columna: en un teléfono de 390 px el viewBox
   de 720 se dibuja a 310 y los 9 px del eje se ven a 4. Ilegible. Como el
   texto no puede escapar de esa escala, se agranda por escalones hasta que
   vuelve a leerse. Y el globo, que vive de :hover, se retira: sin ratón no
   sale nunca, y el mismo texto queda en el <title> de cada columna. */
@media (max-width: 640px) {
  .cobranza .grafica .g-eje { font-size: 12px; }
  .g-pulso .g-cifra, .g-pulso .g-media-rot { font-size: 14px; }
  .g-pulso .g-guia { display: none; }
  /* «pasa el ratón» no se le dice a quien no tiene ratón */
  .solo-raton { display: none; }
}
@media (max-width: 540px) {
  .cobranza .grafica .g-eje { font-size: 15px; }
  .g-pulso .g-cifra, .g-pulso .g-media-rot { font-size: 17px; }
}
@media (max-width: 430px) {
  .cobranza .grafica .g-eje { font-size: 19px; }
  .g-pulso .g-cifra, .g-pulso .g-media-rot { font-size: 21px; }
}

/* la pila de medios de pago en el tiempo */
.g-pila-medios .m-efectivo { fill: var(--d-cobrado); }
.g-pila-medios .m-banco { fill: var(--d-facturado); }
.g-pila-medios .m-yape { fill: var(--d-caja); }
.g-pila-medios .m-yape_personal { fill: var(--d-alerta); }
.g-pila-medios .m-otro { fill: var(--gr-3); }

/* =========================================================
   16. SOLICITUDES — fichas, no filas
   =========================================================
   Cada solicitud trae dirección, teléfonos y texto largo,
   que en una fila de tabla no se leen. */
.solicitudes { display: flex; flex-direction: column; gap: .85rem; }
.solicitud {
  border: 1px solid var(--linea); border-radius: var(--r-2);
  padding: .9rem 1.05rem; display: grid; gap: .65rem;
  background: var(--sup-1);
}
/* lo cerrado sigue a la vista —es el registro— pero sin pedir atención */
.solicitud.cerrada { background: var(--sup-2); border-style: dashed; }
.solicitud-cab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.solicitud-cab > b { font-size: .91rem; }
.solicitud-cab .cuando { margin-left: auto; font-size: .73rem; color: var(--gris); }
/* el reloj del que espera: a los tres días deja de ser dato y es aviso */
.espera { font-size: .715rem; font-weight: 700; color: var(--texto-2); }
.espera.tarde { color: var(--rojo); }
.solicitud-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .65rem 1.15rem; }
.solicitud-datos > div { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.solicitud-datos b { font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; }
.rotulo-dato { display: block; }
.solicitud .tel { font-size: .775rem; color: var(--texto-2); overflow-wrap: anywhere; }
a.tel:hover { color: var(--marca); }
.solicitud-texto { font-size: .86rem; line-height: 1.55; color: var(--texto-2); overflow-wrap: anywhere; }
.solicitud-texto .rotulo-dato { margin-bottom: .15rem; }
.solicitud-texto.respondida { background: var(--verde-suave); color: var(--tinta); border-radius: var(--r-1); padding: .6rem .8rem; }
.solicitud-nota { font-size: .81rem; color: var(--texto-2); background: var(--sup-2); border-radius: var(--r-1); padding: .45rem .7rem; }
.solicitud-nota b { color: var(--tinta); }
.solicitud-pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.solicitud-pie .fila-form { margin-left: auto; flex-wrap: wrap; }
.solicitud-pie .campo[type="text"] { min-width: 12rem; flex: 1 1 12rem; }
.form-respuesta { display: grid; gap: .5rem; justify-items: start; }
.form-respuesta textarea.campo { width: 100%; height: auto; padding: .55rem .7rem; line-height: 1.5; resize: vertical; }

/* =========================================================
   17. LA CAJA Y LA TESORERÍA — el cierre sin correo
   =========================================================
   El vocabulario visual del dinero: los medios de pago como
   botones, la diferencia que salta, y el resumen del cierre
   con la misma rejilla del PDF que este módulo jubila. */
.medios { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.medio { position: relative; }
.medio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.medio span {
  display: inline-block; font-size: .81rem; font-weight: 600; color: var(--tinta);
  border: 1px solid var(--linea-2); border-radius: 999px;
  padding: .38rem .85rem; cursor: pointer; transition: all .14s;
}
.medio input:checked + span { background: var(--marca); border-color: var(--marca); color: #fff; }
.medio.egreso input:checked + span { background: var(--rojo); border-color: var(--rojo); }
.medio input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.form-movimiento .fila-form { margin-bottom: .7rem; }
.campo-foto { font-size: .775rem; color: var(--gris); display: grid; gap: .3rem; }
.campo-foto input { font-size: .8rem; }
.cifra-diferencia { margin-top: .7rem; font-size: 1rem; font-weight: 700; color: var(--verde-texto); font-variant-numeric: tabular-nums; }
.cifra-diferencia.mal { color: var(--rojo); }
.texto-mal { color: var(--rojo); }
.texto-bien { color: var(--verde); }
/* en la letra chica de las tablas el verde de marca se queda corto de
   contraste (AA pide 4.5:1 en texto chico): un tono más oscuro solo ahí */
.tabla .texto-bien { color: var(--verde-texto); }
.resumen-cierre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; margin: 1rem 0 .4rem; }
.resumen-cierre div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--linea); padding-bottom: .35rem; }
.resumen-cierre dt { font-size: .755rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.resumen-cierre dd { font-size: .89rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fila-egreso td { color: var(--rojo); }
.adjunto-mini { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--linea); vertical-align: middle; }
.botones-desenlace { display: flex; gap: .4rem; }

/* =========================================================
   18. EL PANEL EN EL TELÉFONO
   =========================================================
   La cajera registra cobros (y fotografía vouchers) desde el
   celular: la primera columna acompaña el desplazamiento de
   la tabla, o al llegar a la última columna ya no se ve QUÉ
   fila es. */
@media (max-width: 640px) {
  .lienzo-panel { padding: 1.35rem 1rem 3rem; }
  .cab-pagina { flex-wrap: wrap; align-items: flex-start; }
  .nav-dia { flex-wrap: wrap; }
  .tabla th:first-child, .tabla td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--sup-1); box-shadow: 1px 0 0 var(--linea);
  }
  .tabla tr:hover td:first-child { background: var(--sup-2); }
}

/* =========================================================
   19. LA PUERTA — acceso y cambio de clave
   =========================================================
   Vive FUERA de body.panel: con colores propios, y por eso
   no lee los tokens de la paleta. Sus clases
   vivieron en la portada vieja y murieron en una reescritura
   sin que nadie mirara esta página: ahora tienen ámbito
   propio y no dependen de ninguna otra hoja. */
.pagina-acceso {
  min-height: 100svh; display: grid; place-items: center;
  background:
    radial-gradient(42rem 26rem at 80% 6%, rgba(20, 128, 143, .08), transparent 65%),
    #F4F7F9;
  padding: 1.5rem;
}
.tarjeta-acceso { width: 100%; max-width: 23.5rem; }
.tarjeta-acceso .tarjeta { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.tarjeta-acceso .tarjeta-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--hondo, #05222A); padding: 1.3rem 1.5rem;
}
.tarjeta-acceso .tarjeta-cab h2 { margin: 0; color: #fff; font-size: 1.25rem; font-weight: 800; }
.tarjeta-acceso .tarjeta-cab p { margin: .2rem 0 0; color: rgba(255, 255, 255, .65); font-size: .8rem; }
.tarjeta-acceso .tarjeta-cab .marca-q { width: 2.3rem; height: 2.3rem; border-radius: 9px; padding: .35rem; flex: none; }
.tarjeta-acceso .tarjeta-cuerpo { display: grid; gap: 1rem; padding: 1.5rem; }
.tarjeta-acceso .campo-caja { display: grid; gap: .35rem; }
.tarjeta-acceso .etiqueta { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #667581; }
.tarjeta-acceso .campo {
  font: inherit; font-size: .95rem; color: #14202B; background: #fff;
  border: 1px solid #C4CFD7; border-radius: 9px; padding: .7rem .8rem; width: 100%; outline: none;
}
.tarjeta-acceso .campo:focus-visible { border-color: #14808F; box-shadow: 0 0 0 3px rgba(20, 128, 143, .18); }
.tarjeta-acceso .boton-enviar {
  font: inherit; font-size: .95rem; font-weight: 700; color: #fff;
  background: #14808F; border: 0; border-radius: 9px;
  padding: .85rem 1rem; cursor: pointer; width: 100%; transition: background .15s;
}
.tarjeta-acceso .boton-enviar:hover { background: #0B5B67; }
.tarjeta-acceso details summary::-webkit-details-marker { color: #667581; }
.acceso-pie { margin-top: 1.1rem; text-align: center; font-size: .8rem; color: #667581; }
.acceso-pie a { color: #14808F; font-weight: 600; }

/* etiqueta que existe para el lector de pantalla y no para la vista */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================
   20. LA MESA — la puerta del equipo
   =========================================================
   El mismo panel servido en otro host (mesa.quechuaexpress.com) y con la
   misma paleta: lo que dice desde qué puerta se trabaja es el letrero del
   riel, no un color aparte. Las piezas propias de la Mesa
   (partes, extractos, hilos) se apilan aquí, fase a fase. */
body.panel.puerta-mesa .rail-marca small { color: var(--marca); }
body.panel.puerta-mesa .rail-marca .marca-q { box-shadow: var(--anillo); }
/* el hilo de un extracto o de un parte: lo que pasó, en orden, con lo
   observado en ámbar para que salte a la vista */
.hilo { display: grid; gap: .5rem; font-size: .86rem; line-height: 1.5; }
.hilo p { margin: 0; padding: .55rem .8rem; border-radius: .8rem; background: var(--sup-2); }
.hilo p.hilo-obs { background: color-mix(in srgb, var(--ambar, #D97706) 14%, var(--sup-1)); }
.pestanas a.pestana { text-decoration: none; }

/* --- EL PARTE DE CAJA (fase 2): la lista de cobros del día, pensada para
       el pulgar. Cada renglón dice cuánto, por dónde y a qué hora, y a la
       derecha lleva su prueba: la miniatura de la captura o el botón de
       adjuntarla. Lo que falta se marca con una línea ámbar a la izquierda,
       no con un color de fondo: la fila sigue leyéndose. --- */
.pagos-lista { display: grid; gap: .5rem; }
.pago-fila {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; border-radius: var(--r-1); background: var(--sup-2);
  border-left: 3px solid transparent;
}
.pago-fila.falta { border-left-color: var(--ambar); background: var(--ambar-suave); }
.pago-que { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.pago-que b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.pago-prueba { display: flex; align-items: center; gap: .5rem; }
.pago-prueba form { display: flex; }
.pago-prueba label.boton-mini { cursor: pointer; }
.pago-prueba .adjunto-mini { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--gris); font-size: .72rem; }
.pago-prueba .adjunto-mini img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--linea); }
form[data-foto].subiendo { opacity: .6; pointer-events: none; }
/* la advertencia que no es un error: se puede seguir, pero conviene saberlo */
.aviso-suave {
  margin: .2rem 0 .9rem; padding: .6rem .85rem; border-radius: var(--r-1);
  background: var(--ambar-suave); color: var(--ambar); font-size: .84rem; font-weight: 600;
}
td.falta, .mono.falta { color: var(--ambar); font-weight: 700; }
/* el campo con una atadura propuesta: escrita pero sin guardar todavía */
.campo.sugerido { border-style: dashed; color: var(--marca); }