/* =========================================================
   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 { opacity: .5; }  /* el relleno es el degradado del estuche: fill= en el SVG */
.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; --gd-tinta: var(--marca-vivo); }
/* el relleno es el degradado del estuche (fill= en el SVG), teñido por --gd-tinta */
.chispa .c-area { opacity: 1; }
.chispa .c-trazo { fill: none; stroke: var(--gd-tinta); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.chispa .c-punto { fill: var(--gd-tinta); stroke: var(--sup-1); stroke-width: 1.4; }
.chispa.verde { --gd-tinta: 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 { --gd-tinta: 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 { stroke: var(--m); fill: none; transition: filter .14s; }
.anillo .a-parte:hover { filter: brightness(.86); }
.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 { --gd-tinta: var(--d-cobrado); --gd-tinta-2: var(--d-facturado); }
.g-pulso .b-a { transition: opacity .12s; }
.g-pulso .g-area { opacity: .55; }
.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 { --gd-tinta: var(--tinta-dato, var(--tinta)); }
.cobranza .chispa .c-trazo { stroke-width: 1.6; }

/* --- 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); }
/* la línea entre tramos del riel: sin rótulo, el menú no se explica */
.nav-corte {
  display: block; height: 0; margin: .55rem .65rem;
  border-top: 1px solid var(--linea);
}

/* --- LA PRUEBA REAL (06/09, noche): la franja de lo que falta y la barra
       de acción de la cajera, las tres gráficas de tesorería y las cajas de
       oficina atenuadas en el tablero --- */
.franja-parte { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--r-1); font-weight: 700; font-size: .95rem; }
.franja-parte.ambar { background: var(--ambar-suave); color: var(--ambar); }
.franja-parte.ok { background: var(--verde-suave); color: var(--verde-texto); }
.kpi.kpi-ambar b { color: var(--ambar); }
/* el botón grande del panel: hasta hoy solo existía el chico, y «Enviar el
   parte» salía con la cara que le da el navegador */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.25rem; border-radius: var(--r-1);
  background: var(--marca); color: #fff; font: inherit; font-size: .95rem; font-weight: 700;
  border: 1px solid var(--marca); cursor: pointer; text-decoration: none;
  transition: background .18s, transform .12s;
}
.boton:hover { background: var(--marca-osc); border-color: var(--marca-osc); color: #fff; }
.boton:active { transform: translateY(1px); }
/* el rótulo sobre su campo, y el cuadro de texto a lo ancho */
.rotulo { display: block; font-size: .8rem; font-weight: 700; color: var(--texto-2); margin: 0 0 .4rem; }
textarea.campo { display: block; width: 100%; resize: vertical; }
.tabla td.dia { white-space: nowrap; }
/* la pila de medios fuera de Cobranza: los colores de la leyenda, que la Mesa sí tiene */
.plegable .g-pila-medios .m-efectivo { fill: var(--m-efectivo); }
.plegable .g-pila-medios .m-banco { fill: var(--m-banco); }
.plegable .g-pila-medios .m-yape { fill: var(--m-yape); }
.plegable .g-pila-medios .m-yape_personal { fill: var(--m-yape_personal); }
.plegable .g-pila-medios .m-otro { fill: var(--m-otro); }
.rejilla-graficas .hoy-medios { margin-top: .9rem; }
/* pegada abajo mientras se desliza: el botón que importa nunca se pierde */
.barra-accion {
  position: sticky; bottom: 0; z-index: 5; margin: .25rem -.25rem 0;
  padding: .75rem .25rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--sup-0) 70%, transparent);
}
.barra-accion .boton { width: 100%; font-size: 1.05rem; padding: .95rem 1rem; }
.rejilla-graficas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.15rem; margin-bottom: 1.15rem; }
.rejilla-graficas > .caja-blanca { margin-bottom: 0; min-width: 0; }
@media (max-width: 1100px) { .rejilla-graficas { grid-template-columns: 1fr; } }
tr.oficina td { color: var(--gris); }
tr.oficina td strong { font-weight: 600; color: var(--texto-2); }

/* --- LA CAPTURA POR OPERACIÓN: una transferencia paga varias órdenes y la
       foto es una. El grupo lleva su cabecera (total, medio, cuántos cobros,
       número de operación) y debajo la lista de sus cobros --- */
.pago-fila .pago-detalle {
  flex-basis: 100%; order: 5; margin: .2rem 0 0; padding: .35rem 0 0 .2rem; list-style: none;
  border-top: 1px dashed var(--linea); display: grid; gap: .2rem; font-size: .8rem; color: var(--texto-2);
}
.pago-fila .pago-detalle li { display: flex; gap: .6rem; align-items: baseline; }
.pago-fila .pago-detalle li .mono { min-width: 5.5rem; font-variant-numeric: tabular-nums; color: var(--tinta); }
.pago-prueba .chip-pdf { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 6px; border: 1px solid var(--linea); font-size: .74rem; font-weight: 700; text-decoration: none; color: var(--texto-2); }
/* --- EL TABLERO COMPACTO DE TESORERÍA (06/09, noche): una fila de
       tarjetas con lo que hay que hacer hoy, las cajas enseguida, y el
       gráfico de 14 días al final, plegado --- */
.kpi.kpi-marca b { color: var(--marca); }
.kpi .kpi-pie.ambar { color: var(--ambar); }
.caja-blanca.compacta { padding: .85rem 1.05rem .55rem; margin-bottom: .8rem; }
.caja-blanca.compacta h2 { margin-bottom: .4rem; }
.caja-blanca.compacta .tabla th, .caja-blanca.compacta .tabla td { padding-top: .42rem; padding-bottom: .42rem; }
details.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
details.plegable > summary::-webkit-details-marker { display: none; }
details.plegable > summary h2 { margin: 0; font-size: .98rem; font-weight: 800; letter-spacing: -.015em; }
details.plegable > summary .leyenda { margin: 0; }
details.plegable > summary::after { content: '+'; font-weight: 800; color: var(--gris); margin-left: auto; }
details.plegable[open] > summary::after { content: '–'; }
details.plegable[open] > summary { margin-bottom: .9rem; }
details.plegable .barras-h { margin-top: .9rem; }

/* --- LA MATRIZ DE CIERRES Y PARTES: cada caja de mostrador, día por día,
       en un color; cada celda abre su parte --- */
.matriz { border-collapse: separate; border-spacing: 3px 4px; font-size: .74rem; }
.matriz th { font-weight: 600; color: var(--texto-2); text-align: center; padding: 0 .05rem .15rem; white-space: nowrap; line-height: 1.15; }
.matriz th:first-child, .matriz td:first-child { text-align: left; position: sticky; left: 0; background: var(--sup-1); padding-right: .8rem; white-space: nowrap; z-index: 1; }
.matriz td { padding: 0; text-align: center; }
.matriz td:last-child, .matriz th:last-child { padding-left: .5rem; }
.celda { display: block; width: 1.3rem; height: 1.3rem; border-radius: 5px; background: var(--sup-2); margin: 0 auto; box-sizing: border-box; }
.matriz a.celda:hover { outline: 2px solid var(--tinta); outline-offset: 1px; }
/* El color cuenta el camino del parte, no adorna: verde cuando terminó,
   turquesa mientras viaja, ámbar cuando espera respuesta, arena cuando
   todavía no salió —arena y no ámbar: hoy son casi todas, y una rejilla
   entera en alarma no dice nada—, y rojo solo donde la caja ni se cerró. */
.celda.revisado { background: #0F7B57; }
.celda.enviado { background: #2F9AA6; }
.celda.observado { background: #DFA245; }
.celda.sin_parte { background: #E7D6B6; }
.celda.sin_cerrar { background: #C4553F; }
.celda.abierta { background: #DCEAEC; box-shadow: inset 0 0 0 1.5px #4FAEBB; }
.celda.nada { background: #EDF1F3; }
.matriz-leyenda { margin-top: .7rem; }
.matriz-leyenda i.celda { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -2px; border-radius: 3px; }
/* el texto de un egreso o el nombre de un cliente se lee entero, aunque envuelva */
.tabla td.texto { white-space: normal; max-width: 34rem; line-height: 1.4; }
/* =========================================================
   COBRADO POR MEDIO — la gráfica del tablero de tesorería
   =========================================================
   En HTML, no en SVG: la letra no se deforma al escalar. El color
   ordena en vez de decorar —una familia en cuatro pasos, del dinero
   que ya está en el banco al que sigue en el cajón, y un ámbar para
   lo que entró a un celular personal—. La rejilla es casi invisible,
   las cifras van en gris de apoyo, y el día se explica al pasar por
   encima: lo importante primero, el detalle cuando se pide.

   Las fechas viven FUERA del marco: dentro, las barras se apoyarían
   sobre ellas en vez de sobre la línea del cero. */
.gm { --gm-alto: 232px; --gm-eje: 3.6rem; }
.gm-marco { position: relative; height: var(--gm-alto); margin-left: var(--gm-eje); }

/* la rejilla, detrás */
.gm-rejilla { position: absolute; inset: 0; }
.gm-linea { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--linea); }
.gm-linea span {
  position: absolute; right: calc(100% + .7rem); top: -.62em;
  font-size: .68rem; font-weight: 500; color: var(--gris);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* las columnas: solo la barra y su cifra; se apoyan en el cero */
.gm-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1px; }
.gm-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.gm-cifra {
  display: block; text-align: center; font-size: .66rem; font-weight: 600; color: var(--gris);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-bottom: .3rem; white-space: nowrap;
}
.gm-barra {
  height: var(--v); min-height: 3px; width: 68%; max-width: 34px; margin: 0 auto;
  display: flex; flex-direction: column-reverse;
  border-radius: 5px 5px 2px 2px; overflow: hidden;
  transform-origin: bottom; animation: gm-crece .5s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--i) * 26ms);
}
.gm-seg { display: block; height: var(--s); min-height: 2px; }
@keyframes gm-crece { from { transform: scaleY(.02); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .gm-barra { animation: none; } }

/* el día que se sale de la escala: la punta se desvanece, como el corte
   de un eje; su cifra no, que es la única que dice cuánto fue de verdad */
.gm-col.recortada .gm-barra { border-radius: 0 0 2px 2px; }
.gm-col.recortada::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; pointer-events: none;
  background: linear-gradient(to bottom, var(--sup-1) 25%, transparent);
}
.gm-col.recortada .gm-cifra { position: relative; z-index: 2; }

/* al pasar por encima, lo demás se aparta */
.gm-barra, .gm-cifra { transition: opacity .18s; }
.gm-cols:hover .gm-col:not(:hover) .gm-barra,
.gm-cols:hover .gm-col:not(:hover) .gm-cifra { opacity: .3; }
.gm-col:hover .gm-cifra { opacity: 0; }

/* las fechas, alineadas con las columnas */
.gm-dias { display: flex; gap: 1px; margin-left: var(--gm-eje); padding-top: .45rem; }
.gm-dia {
  flex: 1 1 0; min-width: 0; text-align: center;
  font-size: .655rem; font-weight: 500; color: var(--gris);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gm-dia.hoy { color: var(--tinta); font-weight: 700; }
.gm-dia i { font-style: normal; }

/* la ficha del día */
.gm-ficha {
  position: absolute; bottom: calc(100% - 1.1rem); left: 50%; transform: translate(-50%, .3rem);
  z-index: 6; min-width: 11.5rem; padding: .6rem .7rem; border-radius: var(--r-1);
  background: var(--sup-1); border: 1px solid var(--linea); box-shadow: var(--sombra-2);
  display: grid; gap: .18rem; font-size: .74rem; line-height: 1.5;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s;
}
.gm-col:hover .gm-ficha { opacity: 1; transform: translate(-50%, 0); }
.gm-col:nth-child(-n+2) .gm-ficha { left: 0; transform: translate(0, .3rem); }
.gm-col:nth-child(-n+2):hover .gm-ficha { transform: translate(0, 0); }
.gm-col:nth-last-child(-n+2) .gm-ficha { left: auto; right: 0; transform: translate(0, .3rem); }
.gm-col:nth-last-child(-n+2):hover .gm-ficha { transform: translate(0, 0); }
.gm-ficha > b { font-size: .78rem; }
.gm-ficha-total { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: .18rem; }
.gm-ficha-total i { display: block; font-size: .68rem; font-weight: 600; font-style: normal; color: var(--ambar); letter-spacing: 0; }
.gm-ficha-linea { display: flex; align-items: center; gap: .45rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.gm-ficha-linea b { margin-left: auto; color: var(--tinta); font-weight: 600; }
.gm-ficha i { flex: none; width: .55rem; height: .55rem; border-radius: 2px; }

/* la leyenda, al pie y en gris: no compite con el dato */
.gm-leyenda { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: 1.1rem 0 0 var(--gm-eje); font-size: .72rem; font-weight: 500; color: var(--texto-2); }
.gm-leyenda span { display: inline-flex; align-items: baseline; gap: .4rem; }
.gm-leyenda b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.gm-leyenda i { width: .6rem; height: .6rem; border-radius: 2px; align-self: center; }

/* LA ESCALA DEL DINERO: cuanto más honda la tinta, más cerca del banco.
   El ámbar no es un quinto color: es el aviso de que ese dinero entró a
   un celular de alguien y no a la empresa. */
.s-banco { background: #0A5560; }
.s-yape { background: #4FAEBB; }
.s-efectivo { background: #BDD5DB; }
.s-yape_personal { background: #DFA245; }
.s-otro { background: #D3DDE2; }

@media (max-width: 820px) {
  .gm { --gm-alto: 178px; --gm-eje: 2.9rem; }
  .gm-cifra { display: none; }
  .gm-dia { font-size: .62rem; }
  .gm-dia i { display: none; }
  .gm-dia.salteada { visibility: hidden; }
  .gm-leyenda { gap: .2rem .8rem; font-size: .7rem; }
}
}


/* =====================================================================
   DE UNA FECHA A OTRA, Y EL LIBRO DE PAGOS (18/09/2026)
   El rango a mano junto al selector de ventana; la lista de pagos con
   sus dos parciales: rojo el que nadie explicó, violeta el que lleva la
   observación de quien cobró. El violeta es propio (--obs) para no
   pisar el de la caja, que solo existe en el suelo gris de Cobranza.
   ===================================================================== */
:root {
  --obs: #6B4FBB;
  --obs-suave: #EEE9FA;
}
.rango-fechas { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.rango-fechas .campo.chico { width: auto; min-width: 9.2rem; }
.rango-fechas .rango-a { font-size: .74rem; color: var(--gris); }
@media (max-width: 760px) {
  .rango-fechas { width: 100%; }
  .rango-fechas .campo.chico { flex: 1; min-width: 0; }
}

.chip.obs { background: var(--obs-suave); color: var(--obs); }
.losas > div.obs { background: var(--obs-suave); }
.losas > div.obs > b { color: var(--obs); }
.pagos-losas { margin-top: 0; margin-bottom: 1rem; }

.filtros-pagos { margin: .1rem 0 1rem; }
.filtros-pagos .campo.chico { max-width: 16rem; }
.filtros-pagos input[type="search"] { min-width: 14rem; }

.pagos-tabla th.num, .pagos-tabla td.num { text-align: right; }
.pagos-tabla td.texto { max-width: 15rem; }
.pagos-tabla td.obs { max-width: 18rem; font-size: .78rem; line-height: 1.3; }
.pagos-tabla .sin-obs { color: var(--rojo); font-weight: 700; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; }
.pagos-tabla tr.fila-parcial_sin td { background: color-mix(in srgb, var(--rojo-suave) 60%, transparent); box-shadow: inset 3px 0 0 var(--rojo); }
.pagos-tabla tr.fila-parcial_con td { background: color-mix(in srgb, var(--obs-suave) 75%, transparent); box-shadow: inset 3px 0 0 var(--obs); }
.pagos-tabla tr.fila-parcial_sin td + td, .pagos-tabla tr.fila-parcial_con td + td { box-shadow: none; }
.pestana.e-parciales_sin.actual, .pestana.e-parciales_sin.actual:hover { background: var(--rojo); border-color: var(--rojo); }
.pestana.e-parciales_con.actual, .pestana.e-parciales_con.actual:hover { background: var(--obs); border-color: var(--obs); }
.paginas { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }

/* en el parte de la cajera: la nota junto al cobro y el aviso de parcial */
.pago-obs { flex-basis: 100%; font-size: .74rem; color: var(--texto-2); font-style: italic; }
.pago-fila.parcial-sin { border-left-color: var(--rojo); background: var(--rojo-suave); }
.pago-fila.parcial-con { border-left-color: var(--obs); background: var(--obs-suave); }
.pago-detalle .pago-obs { flex-basis: auto; }


/* ---------------------------------------------------------------------
   LAS FOTOS DEL TMS Y EL TRAMO PROPIO DE LA CAJERA (18/09/2026)
   La captura que la cajera subió al TMS se enseña como las de la Mesa,
   con su rótulo «del TMS»; el casillero de parciales de Mi caja son losas
   que se pulsan para filtrar; el tablero de partes por tramo enseña el
   día bajo cada cajera.
   --------------------------------------------------------------------- */
.adjunto-mini.del-tms { position: relative; }
.adjunto-mini.del-tms > span { background: var(--marca-suave); color: var(--marca-osc); font-weight: 700; }
.losas > a { background: var(--sup-2); border-radius: 1rem; padding: .7rem .85rem; display: grid; gap: .15rem; text-decoration: none; color: inherit; border: 1px solid transparent; transition: border-color .14s, background .14s; }
.losas > a > span { font-size: .72rem; font-weight: 500; color: var(--gris); }
.losas > a > b { font-size: 1.05rem; font-weight: 700; color: var(--tinta); }
.losas > a > small { font-size: .7rem; color: var(--gris); font-weight: 500; }
.losas > a:hover { border-color: var(--linea-2); }
.losas > a.actual { border-color: var(--tinta); }
.losas > a.mal { background: var(--rojo-suave); }
.losas > a.mal > b { color: var(--rojo); }
.losas > a.obs { background: var(--obs-suave); }
.losas > a.obs > b { color: var(--obs); }
.tramo-propio .caja-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tramo-propio .fila-form { flex-wrap: wrap; }
.tabla .pista.dia { text-transform: capitalize; }


/* ---------------------------------------------------------------------
   MINIATURAS COMPACTAS Y EL VISOR (18/09/2026, noche)
   Toda captura, venga de la Mesa o del TMS, se enseña como un cuadrado
   de dos dedos (la miniatura de 360 px, no la foto entera); al pulsar,
   la foto entera se superpone en un <dialog> oscuro. En la tabla de
   tesorería el enlace lleva la miniatura y el rótulo «TMS» en fila.
   --------------------------------------------------------------------- */
.adjunto-mini { display: inline-flex; align-items: center; gap: .4rem; width: auto; height: auto; border: 0; border-radius: 0; overflow: visible; text-decoration: none; color: var(--gris); font-size: .72rem; cursor: zoom-in; }
.adjunto-mini img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--linea); display: block; background: var(--sup-2); }
.adjunto-mini:hover img { border-color: var(--marca); }
.adjunto-mini.del-tms > span { padding: .1rem .4rem; border-radius: 999px; }

.visor { border: 0; padding: 0; margin: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: #fff; color-scheme: inherit; }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(8, 14, 20, .86); backdrop-filter: blur(2px); }
.visor img { max-width: min(96vw, 1100px); max-height: 88vh; border-radius: 10px; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.visor .visor-cerrar {
  position: fixed; top: .8rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.visor .visor-cerrar:hover { background: rgba(255, 255, 255, .3); }
.visor .visor-abrir { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: .8rem; opacity: .8; }



/* =====================================================================
   EL ESTUCHE DE GRÁFICAS Y DEGRADADOS (18/09/2026, noche)
   Una sola tinta por gráfica (--gd-tinta) y de ella salen el relleno
   que se desvanece, la columna con peso abajo, el arco con degradado,
   la cifra pintada y la tablilla donde vive el dibujo. Los <defs> los
   pone panel/partes/gd dentro de cada SVG, con id propio; el color lo
   ponen estas reglas. Para teñir una gráfica basta cambiar --gd-tinta
   en su tarjeta: Cobranza lo hace con --tinta-dato y la chispa verde
   con su clase. Cómo se usa: docs/EL-ESTUCHE-DE-GRAFICAS.md.
   ===================================================================== */
body.panel {
  --gd-tinta: var(--marca);       /* la serie A */
  --gd-tinta-2: var(--verde);     /* la serie B */
  --gd-calido: var(--ambar-2);    /* el acento cálido: la cola del relleno «rico» y el arranque del arco */
}
body.panel.gris { --gd-tinta-2: var(--d-facturado); --gd-calido: var(--ojo); }

/* --- las paradas de los degradados SVG (panel/partes/gd) --- */
.gd-s1 { --s: var(--gd-tinta); }
.gd-s2 { --s: var(--gd-tinta-2); }
.gd-area-0 { stop-color: var(--s); stop-opacity: .5; }
.gd-area-1 { stop-color: var(--s); stop-opacity: .14; }
.gd-area-2 { stop-color: var(--gd-cola, var(--s)); stop-opacity: 0; }
.gd-barra-0 { stop-color: var(--s); stop-opacity: .74; }
.gd-barra-1 { stop-color: var(--s); stop-opacity: 1; }
.gd-arco-0 { stop-color: var(--gd-arco-de, color-mix(in srgb, var(--s) 52%, var(--sup-1))); }
.gd-arco-1 { stop-color: color-mix(in srgb, var(--s) 84%, var(--tinta)); }
/* «rico»: el relleno muere en el cálido y el arco arranca en él */
.gd-rico { --gd-cola: var(--gd-calido); --gd-arco-de: var(--gd-calido); }

/* --- la tablilla: el suelo de una gráfica dentro de su tarjeta --- */
.lienzo { position: relative; background: var(--sup-2); border-radius: 18px; padding: 1rem 1.1rem; }
.lienzo.cuadricula {
  background-image:
    linear-gradient(color-mix(in srgb, var(--tinta) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tinta) 5%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* --- la cifra pintada con el degradado --- */
.cifra-gd {
  display: inline-block;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gd-tinta) 80%, var(--tinta)), var(--gd-tinta) 55%, var(--gd-calido));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- el globo de vidrio: la ficha que flota sobre una gráfica --- */
.gd-vidrio, .gm-ficha {
  background: color-mix(in srgb, var(--sup-1) 64%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid color-mix(in srgb, #fff 82%, var(--linea));
  box-shadow: 0 12px 30px rgba(11, 34, 43, .14), inset 0 1px 0 rgba(255, 255, 255, .85);
}

/* --- el brillo: una luz arriba en toda barra de HTML que ya tiene su color --- */
.riel-h > span, .franja > span, .gm-barra, .riel-frente .tramo.listo { position: relative; }
.riel-h > span::after, .franja > span::after, .gm-barra::after, .riel-frente .tramo.listo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%);
}

/* --- la chispa de barras: una barrita por día, en una celda --- */
.chispa-barras { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; vertical-align: middle; }
.chispa-barras > i { flex: none; width: 3px; border-radius: 2px; background: var(--gd-tinta); height: var(--h, 0%); min-height: 2px; }
.chispa-barras > i.vacia { background: color-mix(in srgb, var(--gd-tinta) 16%, transparent); }
/* en una tabla va apretada: cuarenta y cinco días en 134 px, para que la fila siga cabiendo */
.tabla .chispa-barras { gap: 1px; height: 18px; }
.tabla .chispa-barras > i { width: 2px; }

/* --- el arco: una fracción en un anillo --- */
.g-arco { display: block; overflow: visible; flex: none; }
.g-arco .ar-fondo { stroke: color-mix(in srgb, var(--tinta) 8%, transparent); }
.g-arco .ar-cifra { font-family: inherit; font-size: 30px; font-weight: 800; letter-spacing: -.03em; fill: var(--tinta); font-variant-numeric: tabular-nums; }
.g-arco .ar-pie { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; fill: var(--gris); }

/* --- el área: la serie de una cifra grande, con sus fechas --- */
.g-area { display: grid; gap: .4rem; }
.g-area-lienzo {
  position: relative; height: var(--g-area-alto, 140px);
  background-image: linear-gradient(color-mix(in srgb, var(--tinta) 7%, transparent) 1px, transparent 1px);
  background-size: 100% 25%; background-position: 0 -1px;
  border-bottom: 1px dashed var(--linea-2);
}
.g-area-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.g-area .ga-trazo { fill: none; stroke: var(--gd-tinta); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.g-area .ga-punto {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--gd-tinta); border: 2px solid var(--sup-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gd-tinta) 18%, transparent);
}
.g-area .ga-tope { position: absolute; top: .15rem; left: 0; font-size: .66rem; font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; }
.g-area-eje { position: relative; height: 1rem; font-size: .68rem; font-weight: 700; color: var(--gris); }
.g-area-eje span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.g-area-eje span.pri { transform: none; }
.g-area-eje span.ult { transform: translateX(-100%); }

/* --- EQUIPO: el cuadro de arriba --- */
.equipo-cuadro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.15rem; margin-bottom: 1.15rem; }
.equipo-cuadro > .caja-blanca { margin-bottom: 0; min-width: 0; }
.equipo-losas { grid-template-columns: 1fr 1fr; margin-top: 0; align-content: start; }
.equipo-losas .losa-arco { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .7rem; }
.equipo-losas .losa-arco > div { display: grid; gap: .15rem; }
.equipo-losas .losa-arco > div > span { font-size: .72rem; font-weight: 500; color: var(--gris); }
.equipo-losas .losa-arco > div > b { font-size: 1.05rem; font-weight: 700; color: var(--tinta); }
.equipo-cifras { display: grid; gap: .15rem; margin-bottom: .7rem; }
.equipo-cifras > b { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.equipo-cifras span { font-size: .78rem; color: var(--gris); font-weight: 600; }
.tabla td.actividad { white-space: nowrap; }
/* bajo el nombre de la persona: la tira y cuántos, en gris */
.actividad-fila { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.actividad-fila small { font-size: .7rem; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.tabla td.actividad .chispa-barras { margin-right: .4rem; }
.tabla td.actividad .mono { font-size: .78rem; }
@media (max-width: 900px) { .equipo-cuadro { grid-template-columns: minmax(0, 1fr); } }


/* ---------------------------------------------------------------------
   LA PALETA DEL MODELO (18/09/2026, más tarde)
   El dueño vio Cobranza con el estuche puesto y dijo «sigue con el
   antiguo»: el color de la casa en las gráficas no se distinguía del de
   antes. Aquí entra la paleta del tablero de referencia, y SOLO en las
   gráficas y sus tablillas: verdes para lo que entra, oro para lo que se
   emite, piedra para lo neutro y una tablilla beige bajo cada dibujo.
   Tarjetas, riel, chips y suelo siguen siendo los de la casa.
   --------------------------------------------------------------------- */
body.panel {
  --e-verde-1: #166b4f;    /* la honda: el trazo, el pie de la columna */
  --e-verde-2: #3d9f80;    /* la tinta: la columna, el relleno */
  --e-verde-3: #9fd0bc;    /* la clara */
  --e-verde-4: #dcebe2;    /* el velo */
  --e-oro-1: #b59a4a;      /* el oro hondo: la segunda serie */
  --e-oro-2: #d9c27c;      /* el oro: el acento cálido */
  --e-oro-3: #e8d9a6;      /* el oro pálido: la cola de los rellenos */
  --e-piedra: #cfcbc0;     /* lo neutro: «otro», la media, la base */
  --e-tablilla: #f6f4ee;   /* la tablilla bajo cada gráfica */
  --e-linea: #e6e3da;      /* la rejilla */
  --e-tinta: #141a17;

  --gd-tinta: var(--e-verde-2);
  --gd-tinta-2: var(--e-oro-1);
  --gd-calido: var(--e-oro-2);
  --marca-vivo: var(--e-verde-2);   /* el trazo de las gráficas del suelo turquesa */
  /* los medios de pago, en la escala del modelo (el Yape personal sigue
     siendo la alerta naranja: es dinero que entró a un celular) */
  --m-efectivo: var(--e-verde-2);
  --m-banco: var(--e-verde-1);
  --m-yape: var(--e-verde-3);
  --m-otro: var(--e-piedra);
}
/* el suelo gris de Cobranza: el índice de cada dato cambia de tinta y la
   tinta viaja sola a su cifra, su ícono, su chispa y su columna */
body.panel.gris {
  --d-cobrado: #2f9a78;
  --d-cobrado-suave: var(--e-verde-4);
  --d-facturado: var(--e-oro-1);
  --d-facturado-suave: #f4eed8;
  --gd-tinta-2: var(--e-oro-1);
  --gd-calido: var(--e-oro-2);
}
.cobranza {
  --m-efectivo: var(--e-verde-2);
  --m-banco: var(--e-verde-1);
  --m-yape: var(--e-verde-3);
  --m-otro: var(--e-piedra);
  --p-menta: var(--e-verde-3);
  --p-salvia: var(--e-verde-4);
  --p-arena: var(--e-oro-3);
}
/* la escala del dinero de tesorería y de los partes, por familia */
.s-banco { background: var(--e-verde-1); }
.s-yape { background: var(--e-verde-2); }
.s-efectivo { background: var(--e-verde-3); }
.s-yape_personal { background: var(--e-oro-2); }
.s-otro { background: var(--e-piedra); }

/* --- las paradas, con la caída del modelo: tinta → clara → oro pálido --- */
.gd-area-0 { stop-opacity: .82; }
.gd-area-1 { stop-color: color-mix(in srgb, var(--s) 55%, #fff); stop-opacity: .5; }
.gd-area-2 { stop-color: var(--gd-cola, var(--e-oro-3)); stop-opacity: .15; }
/* la columna: la tinta arriba y la honda al pie, para que pese abajo */
.gd-barra-0 { stop-color: var(--s); stop-opacity: 1; }
.gd-barra-1 { stop-color: color-mix(in srgb, var(--s) 62%, var(--e-tinta)); stop-opacity: 1; }
.gd-arco-0 { stop-color: var(--gd-arco-de, var(--e-verde-3)); }
.gd-arco-1 { stop-color: color-mix(in srgb, var(--s) 78%, var(--e-tinta)); }

/* --- la tablilla beige, bajo cada dibujo y en las losas --- */
.lienzo { background: var(--e-tablilla); }
.lienzo-grafica { padding: .9rem .9rem .7rem; }
.lienzo-pulso { padding: .9rem .9rem .55rem; display: grid; gap: .55rem; }
.lienzo-anillo { padding: .9rem .8rem; }
/* dentro de la tablilla el anillo cede un dedo a la leyenda: «Yape personal» entero */
.lienzo-anillo .medios-anillo { grid-template-columns: 7.4rem minmax(0, 1fr); gap: .7rem; }
.losas > div, .losas > a { background: var(--e-tablilla); }
.gm { background: var(--e-tablilla); border-radius: 18px; padding: 1rem 1rem .9rem; }
.gm-linea { border-top-color: var(--e-linea); }
.gm-col.recortada::after { background: linear-gradient(to bottom, var(--e-tablilla) 25%, transparent); }
/* dentro de una lupa la tablilla del pulso se encoge con su tarjeta */
.lupa-rejilla .pulso { grid-template-rows: auto minmax(0, 1fr); }
.lupa-rejilla .lienzo-pulso { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }

/* --- los trazos: hondos sobre el relleno de la tinta, como en el modelo --- */
.grafica .g-base { stroke: var(--e-piedra); stroke-dasharray: 3 4; }
.grafica .g-linea, .g-pulso .g-linea { stroke: var(--e-linea); }
.grafica text, .g-pulso .g-eje { font-weight: 700; }
.g-pulso .g-trazo { stroke-width: 1.8; }
.g-pulso .g-area { opacity: .38; }
.g-pulso .g-media { stroke: var(--e-piedra); }
.g-pulso .g-punto, .g-pulso .g-punto-b, .g-pulso .g-rasgado,
.g-pulso .g-media-rot, .g-pulso .g-cifra, .g-pulso .g-eje:not(.g-eje-x) { stroke: var(--e-tablilla); }
.g-pila-medios path, .g-pila-medios rect.m-efectivo, .g-pila-medios rect.m-banco, .g-pila-medios rect.m-yape, .g-pila-medios rect.m-yape_personal, .g-pila-medios rect.m-otro { fill: var(--m); }
.g-pila path { transition: filter .12s; }
.g-pila .col-caja:hover path { filter: brightness(.9); }
.anillo .a-fondo { stroke: color-mix(in srgb, var(--e-tinta) 6%, transparent); }
.chispa .c-trazo { stroke: color-mix(in srgb, var(--gd-tinta) 74%, var(--e-tinta)); }
.chispa .c-punto { fill: color-mix(in srgb, var(--gd-tinta) 74%, var(--e-tinta)); }
.g-area .ga-trazo { stroke: color-mix(in srgb, var(--gd-tinta) 74%, var(--e-tinta)); }
.g-area .ga-punto { border-color: var(--e-tablilla); background: color-mix(in srgb, var(--gd-tinta) 74%, var(--e-tinta)); }
.g-area-lienzo { border-bottom-color: var(--e-piedra); }
.chispa-barras > i { background: var(--gd-tinta); }
.g-arco .ar-fondo { stroke: color-mix(in srgb, var(--e-tinta) 7%, transparent); }



/* =====================================================================
   LA CARA DEL MODELO (19/09/2026, madrugada)
   El dueño mandó un tablero de referencia (crypto-dashboard, 18/09) y
   pidió que el panel ENTERO se vea así: la letra, las tarjetas, las
   píldoras, las tablas, los campos, las gráficas. No solo las tintas.
   Este bloque va al final y con selectores «body.panel …» para pisar
   cada regla anterior, incluidas las del suelo gris de Cobranza: una
   sola cara para las dos puertas.

   El modelo, en cinco líneas: Manrope 500–800; suelo crema #ecebe4 con
   una luz diagonal; tarjetas blancas de 26 px de radio sin borde y con
   sombra honda; tablilla beige #f6f4ee de 18 px dentro; rótulos chicos
   en negrita al 50 % y cifras 800 con el tracking cerrado.
   ===================================================================== */
body.panel, body.panel.gris {
  --f-ui: "Manrope", system-ui, -apple-system, sans-serif;
  font-family: var(--f-ui);

  --sup-0: #ecebe4;
  --sup-1: #ffffff;
  --sup-2: #f6f4ee;
  --sup-3: #f0eee7;
  --velo: rgba(255, 255, 255, .72);
  --linea: #e6e3da;
  --linea-2: #dcd8cc;
  --tinta: #141a17;
  --texto-2: rgba(20, 26, 23, .7);
  --gris: rgba(20, 26, 23, .5);

  --marca: #2f9a78;
  --marca-osc: #166b4f;
  --marca-suave: #dcebe2;
  --marca-vivo: #3d9f80;
  --anillo: 0 0 0 3px rgba(61, 159, 128, .2);

  --verde: #2f9a78;
  --verde-texto: #166b4f;
  --verde-suave: #dcebe2;
  --ambar: #b59a4a;
  --ambar-2: #d9c27c;
  --ambar-suave: #f4eed8;
  --rojo: #c4463a;
  --rojo-suave: #f9e6e2;

  --sombra-1: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 50px rgba(30, 40, 35, .10);
  --sombra-2: 0 0 0 1px rgba(0, 0, 0, .06), 0 28px 56px rgba(30, 40, 35, .14);
  --sombra-suave: var(--sombra-1);
  --r-1: 12px;
  --r-2: 18px;
  --r-3: 26px;
  --radio: 26px;
  --micro: .66rem;

  /* el suelo gris de Cobranza, en la escala del modelo */
  --gr-1: #141a17;
  --gr-2: #4b514d;
  --gr-3: #8a8d85;
  --gr-4: #b8b4a8;
  --gr-5: #e6e3da;
  --d-deuda: #c4463a;
  --d-deuda-suave: #f9e6e2;
  --d-camino: #b0730e;
  --d-camino-suave: #f6eedc;
  --d-caja: #6d46b8;
  --d-caja-suave: #ebe4f9;
  --d-alerta: #dd6b33;
  --d-alerta-suave: #fcebe0;
  --ojo: #b0730e;
  --ojo-suave: #f6eedc;

  background: var(--sup-0);
  background-image: linear-gradient(160deg, #f3f1ea 0%, #e9ece4 100%);
  background-attachment: fixed;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}
body.panel .mono, body.panel .tabla .mono { font-family: var(--f-ui); font-variant-numeric: tabular-nums; font-weight: 600; }
body.panel a { color: var(--marca-osc); }

/* --- la letra chica: negrita, al 50 %, con un poco de aire --- */
body.panel .tabla th, body.panel .quien .rol, body.panel .rotulo-dato, body.panel .kpi-rotulo, body.panel .micro,
body.panel .rail-marca small, body.panel .caja-blanca.trabajando b, body.panel .cobranza .kpi-rotulo, body.panel .etiqueta {
  font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-variation-settings: normal; color: var(--gris);
}
body.panel .etiqueta { display: block; margin-bottom: .35rem; }
body.panel .cobranza .cifra, body.panel .cobranza .kpi b, body.panel .cobranza .avatar { font-variation-settings: normal; }
body.panel .pista { color: var(--gris); font-weight: 600; }

/* --- el lienzo y la cabecera de página --- */
body.panel .lienzo-panel { max-width: 84rem; padding: 2.6rem 3rem 5rem; }
body.panel .cab-pagina { margin-bottom: 1.4rem; }
body.panel .cab-pagina h1, body.panel .cobranza .cab-pagina h1 { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
body.panel .cab-pagina p { color: var(--gris); font-weight: 600; font-size: .85rem; margin-top: .45rem; }

/* --- las tarjetas: 26 px, sin borde, sombra honda --- */
body.panel .caja-blanca, body.panel .cobranza .caja-blanca, body.panel .kpi, body.panel .cobranza .kpi {
  border: 0; border-radius: 26px; box-shadow: var(--sombra-1);
  padding: 26px 28px; margin-bottom: 20px;
}
body.panel .kpi, body.panel .cobranza .kpi { padding: 22px 24px 20px; margin-bottom: 0; }
body.panel .caja-blanca:hover, body.panel .kpi:hover { box-shadow: var(--sombra-1); border-color: transparent; }
body.panel .caja-blanca > h2, body.panel .caja-cab h2, body.panel .cobranza .caja-cab h2 {
  font-size: 18px; font-weight: 700; letter-spacing: 0; margin-bottom: 0;
}
body.panel .caja-blanca > h2 { margin-bottom: 18px; }
body.panel .caja-cab { margin-bottom: 18px; align-items: center; }
body.panel .caja-cab .pista { font-size: .74rem; }
body.panel .kpis, body.panel .rejilla-2, body.panel .rejilla-2-1, body.panel .rejilla-graficas, body.panel .equipo-cuadro { gap: 20px; margin-bottom: 20px; }
body.panel .tms-barra { background: var(--sup-1); box-shadow: var(--sombra-1); padding: 22px 28px; }

/* --- la cifra: 800, tracking cerrado; el rótulo chico encima --- */
body.panel .kpi-cab { margin-bottom: .75rem; gap: .6rem; }
body.panel .kpi-icono, body.panel .cobranza .kpi-icono {
  width: 2.1rem; height: 2.1rem; border-radius: 10px;
  background: color-mix(in srgb, var(--filo, var(--tinta-dato, var(--marca))) 12%, var(--sup-2));
  color: var(--filo, var(--tinta-dato, var(--marca)));
}
body.panel .kpi b, body.panel .cobranza .kpi b {
  font-size: clamp(1.55rem, 2.3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
}
body.panel .kpis-5 .kpi b { font-size: clamp(1.4rem, 1.9vw, 1.75rem); }
body.panel .kpi span, body.panel .kpi .kpi-pie { font-size: .74rem; font-weight: 600; color: var(--gris); }
body.panel .kpi-linea { gap: .4rem; }
/* la variación: sin píldora, en la tinta del sentido y con su flecha, como «-6.92% ↙» */
body.panel .delta, body.panel .cobranza .delta { background: transparent; padding: 0; font-size: .74rem; font-weight: 700; color: var(--gris); }
body.panel .delta.bien, body.panel .cobranza .delta.bien { color: var(--verde); }
body.panel .delta.mal, body.panel .cobranza .delta.mal { color: var(--ambar); }
/* la chispa, en una banda beige al pie de la tarjeta */
body.panel .kpi .chispa, body.panel .kpis-5 .kpi .chispa {
  margin: .9rem -24px -20px; width: calc(100% + 48px); height: 52px; padding: 10px 0 0;
  background: var(--sup-2); box-sizing: border-box;
}

/* --- las píldoras: un grupo beige y la elegida en negro --- */
body.panel .ventanas, body.panel .pestanas, body.panel .cobranza .ventanas {
  display: inline-flex; align-items: center; gap: 0; padding: 3px; margin: 0;
  background: var(--sup-3); border: 0; border-radius: 999px;
}
body.panel .pestanas { margin-bottom: 18px; flex-wrap: wrap; }
body.panel .ventanas a, body.panel .ventanas span, body.panel .pestana, body.panel .cobranza .pestana {
  padding: 6px 12px; border: 0; border-radius: 999px; background: transparent;
  font-size: .74rem; font-weight: 700; color: var(--gris); line-height: 1.2;
}
body.panel .ventanas a:hover, body.panel .pestana:hover { background: rgba(255, 255, 255, .6); color: var(--tinta); }
body.panel .ventanas .actual, body.panel .ventanas .a-mano, body.panel .pestana.actual, body.panel .pestana.actual:hover,
body.panel .pestana.e-parciales_sin.actual, body.panel .pestana.e-parciales_con.actual {
  background: var(--tinta); color: #fff; border-color: var(--tinta);
}
body.panel .pestana .cuenta { background: rgba(20, 26, 23, .08); color: inherit; font-size: .66rem; }
body.panel .pestana.actual .cuenta { background: rgba(255, 255, 255, .18); }
body.panel .pestana .cuenta.mal { background: var(--rojo-suave); color: var(--rojo); }
body.panel .rango-fechas .campo.chico { min-width: 8.6rem; }

/* --- los chips: beige, con el punto de estado y su halo --- */
body.panel .chip, body.panel .cobranza .chip {
  padding: .42rem .85rem; gap: .5rem; font-size: .74rem; font-weight: 700;
  background: var(--sup-3); color: var(--texto-2);
}
body.panel .chip::before, body.panel .cobranza .chip::before {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
}
body.panel .chip.ok { color: var(--verde-texto); }
body.panel .chip.ok::before { background: var(--verde); box-shadow: 0 0 0 4px rgba(61, 159, 128, .2); }
body.panel .chip.transito { color: #8a6f2a; }
body.panel .chip.transito::before { background: var(--ambar); box-shadow: 0 0 0 4px rgba(181, 154, 74, .22); }
body.panel .chip.urgente { color: var(--rojo); }
body.panel .chip.urgente::before { background: var(--rojo); box-shadow: 0 0 0 4px rgba(196, 70, 58, .18); }
body.panel .chip.marca { color: var(--marca-osc); }
body.panel .chip.marca::before { background: var(--marca); box-shadow: 0 0 0 4px rgba(61, 159, 128, .2); }
body.panel .chip.gris { color: var(--gris); }
body.panel .chip.obs { color: var(--obs); }
body.panel .chip.mini { padding: .22rem .6rem; font-size: .64rem; gap: .38rem; }
body.panel .chip.mini::before { width: 6px; height: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }

/* --- botones: píldoras negras; el fantasma, beige --- */
body.panel .boton-mini, body.panel .cobranza .boton-mini {
  padding: .58rem 1.05rem; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: var(--tinta); color: #fff; border: 0;
}
body.panel .boton-mini:hover, body.panel .cobranza .boton-mini:hover { background: var(--marca-osc); color: #fff; }
body.panel .boton-mini.fantasma, body.panel .cobranza .boton-mini.fantasma { background: var(--sup-3); color: var(--tinta); border: 0; }
body.panel .boton-mini.fantasma:hover { background: var(--marca-suave); color: var(--marca-osc); }
body.panel .boton { border-radius: 999px; border: 0; font-weight: 800; padding: .85rem 1.5rem; background: var(--tinta); }
body.panel .boton:hover { background: var(--marca-osc); }
body.panel .nav-dia a { color: var(--tinta); }

/* --- los campos: beige, sin borde, 12 px --- */
body.panel .campo, body.panel .cobranza .campo {
  background: var(--sup-2); border: 1px solid transparent; border-radius: 12px;
  font-weight: 600; font-size: .85rem; padding: .6rem .85rem; color: var(--tinta);
}
body.panel .campo.chico { padding: .48rem .65rem; font-size: .8rem; }
/* en una fila de tabla el selector no se aplasta por debajo de su palabra */
body.panel .tabla select.campo.chico { min-width: 6.4rem; }
body.panel .tabla .fila-form .campo.chico { padding: .42rem .55rem; }
body.panel .campo:focus-visible { background: var(--sup-1); border-color: var(--marca); box-shadow: var(--anillo); }
body.panel .campo::placeholder { color: var(--gris); font-weight: 500; }
body.panel .campo.sugerido { border-style: dashed; border-color: var(--marca); }
/* la casilla llena su celda (el arreglo no cosmético que se fue con el revert del 08/09) */
body.panel .campo-caja > .campo { width: 100%; }
body.panel .medio input:checked + span { background: var(--tinta); border-color: var(--tinta); }

/* --- las tablas --- */
body.panel .tabla, body.panel .cobranza .tabla { font-size: .84rem; }
body.panel .tabla th, body.panel .cobranza .tabla th { padding: .5rem .8rem .7rem; border-bottom: 1px solid var(--linea); }
body.panel .tabla td, body.panel .cobranza .tabla td { padding: .75rem .8rem; border-bottom: 1px solid var(--linea); }
body.panel .tabla tbody tr:last-child td { border-bottom: 0; }
body.panel .tabla tr:hover td { background: var(--sup-2); }
body.panel .tabla td.texto { font-weight: 500; }
body.panel td.vacio { color: var(--gris); font-weight: 600; }

/* --- el riel de navegación: un panel claro, la puerta abierta en negro --- */
body.panel .rail { background: var(--velo); border-right: 0; box-shadow: 1px 0 0 rgba(0, 0, 0, .04); padding: 1.3rem 1rem 1.2rem; }
body.panel .rail-marca b { font-size: .95rem; font-weight: 800; letter-spacing: -.02em; }
body.panel .marca-q { background: var(--marca-osc); border-radius: 10px; }
body.panel .nav-panel a, body.panel .rail-sec {
  padding: .55rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--texto-2);
}
body.panel .nav-panel a:hover, body.panel .rail-sec:hover { background: var(--sup-3); color: var(--tinta); }
body.panel .nav-panel a:hover svg, body.panel .rail-sec:hover svg { color: var(--tinta); }
body.panel .nav-panel a.actual, body.panel .rail-sec.actual { background: var(--tinta); color: #fff; box-shadow: none; }
body.panel .nav-panel a.actual svg { color: #fff; }
body.panel .rail-pie { border-top: 1px solid var(--linea); }
body.panel .quien .nombre { font-weight: 800; }
body.panel .boton-salir { border-color: var(--linea-2); }
body.panel.puerta-mesa .rail-marca small { color: var(--marca-osc); }

/* --- avisos, losas, leyendas, avatares --- */
body.panel .aviso-ok, body.panel .aviso-error, body.panel .aviso-suave { border: 0; border-radius: 18px; padding: .85rem 1.1rem; font-weight: 700; }
body.panel .losas { gap: 12px; margin-top: 18px; }
body.panel .losas > div, body.panel .losas > a { background: var(--sup-2); border-radius: 14px; padding: 12px 14px; gap: 4px; }
body.panel .lienzo .losas > div, body.panel .lienzo .losas > a { background: var(--sup-1); }
body.panel .losas > div > span, body.panel .losas > a > span { font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
body.panel .losas > div > b, body.panel .losas > a > b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
body.panel .losas > div > small, body.panel .losas > a > small { font-size: .7rem; font-weight: 700; color: var(--gris); }
body.panel .losas > div.mal, body.panel .losas > a.mal { background: var(--rojo-suave); }
body.panel .losas > div.obs, body.panel .losas > a.obs { background: var(--obs-suave); }
body.panel .losas > a.actual { border-color: var(--tinta); }
body.panel .equipo-losas .losa-arco > div > span { font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body.panel .equipo-losas .losa-arco > div > b { font-size: 1.15rem; font-weight: 800; }
body.panel .leyenda { font-size: .74rem; font-weight: 600; color: var(--texto-2); gap: 1.1rem; }
body.panel .leyenda i { width: 10px; height: 10px; border-radius: 50%; margin-right: .45rem; }
body.panel .semanas b { font-weight: 800; }
body.panel .avatar { font-weight: 800; background: var(--sup-3); }
body.panel .avatar.primero { background: var(--tinta); }
body.panel .pulso-cuando { font-size: .66rem; letter-spacing: .06em; padding: .32rem .75rem; }
body.panel .pc > b { font-weight: 800; letter-spacing: -.02em; }
body.panel .pc > span { font-weight: 700; }
body.panel .pc > span > i { width: 9px; height: 9px; }
body.panel .pulso-pie { font-weight: 600; }
body.panel .medios-lista li { font-weight: 600; }
body.panel .medios-lista li i { width: 10px; height: 10px; }
body.panel .medios-lista li b { font-weight: 800; }
body.panel .cifra-gd { font-weight: 800; }
body.panel .equipo-cifras > b { font-size: clamp(1.7rem, 3vw, 2.5rem); }
body.panel .equipo-cifras span { font-weight: 700; }

/* --- la lupa y el visor --- */
body.panel .lupa-caja { border-radius: 26px; background: var(--sup-0); }
body.panel .lupa-cab h2 { font-weight: 700; }
body.panel .lupa-cifra { font-weight: 800; letter-spacing: -.02em; }
body.panel .lupa-rejilla > .caja-blanca { margin-bottom: 0; }

/* --- las gráficas: la letra del modelo en los ejes, el globo de vidrio --- */
body.panel .grafica text, body.panel .g-pulso .g-eje, body.panel .cobranza .grafica text {
  font-family: var(--f-ui); font-size: 10px; font-weight: 700; fill: var(--gris);
}
body.panel .g-pulso .g-eje-x { font-size: 11px; }
body.panel .g-pulso .g-eje-ultimo { fill: var(--tinta); font-weight: 800; }
body.panel .gm-cifra, body.panel .gm-dia, body.panel .gm-linea span { font-weight: 700; }
body.panel .gm-dia.hoy { font-weight: 800; }
body.panel .gm-ficha {
  border-radius: 12px; padding: .7rem .8rem; font-weight: 600;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .3));
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 16px 40px rgba(30, 40, 35, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
}
body.panel .gm-ficha-total { font-weight: 800; }
body.panel .gm-ficha i, body.panel .gm-leyenda i { border-radius: 50%; }
body.panel .gm-leyenda { font-weight: 600; }
body.panel .gm-leyenda b { font-weight: 800; }
body.panel .g-area-eje, body.panel .g-area .ga-tope { font-weight: 700; }
body.panel .anillo .a-centro { font-family: var(--f-ui); font-weight: 800; letter-spacing: -.02em; }
body.panel .anillo .a-pie, body.panel .g-arco .ar-pie { font-family: var(--f-ui); font-weight: 700; letter-spacing: .04em; }
body.panel .g-arco .ar-cifra { font-family: var(--f-ui); font-weight: 800; }
body.panel .medidor-cifra b { font-weight: 800; letter-spacing: -.02em; }
body.panel .barra-h > b, body.panel .semanas b, body.panel .cifra-viva b { font-weight: 800; letter-spacing: -.02em; }
body.panel .barra-h .riel-h { background: var(--sup-3); }
body.panel .riel, body.panel .barrita { background: var(--sup-3); }

/* --- la barra del TMS y las fichas de caja --- */
body.panel .libros .chip { background: var(--sup-2); }
body.panel .caja-chip { border-radius: 18px; background: var(--sup-2); }
body.panel .aviso-personal { border-radius: 18px; }

/* --- pantallas angostas: las tarjetas ceden aire --- */
@media (max-width: 760px) {
  body.panel .lienzo-panel { padding: 1.4rem 1rem 3rem; }
  body.panel .caja-blanca, body.panel .cobranza .caja-blanca { padding: 20px 18px; border-radius: 22px; }
  body.panel .kpi, body.panel .cobranza .kpi { padding: 18px 18px 16px; border-radius: 22px; }
  body.panel .kpi .chispa, body.panel .kpis-5 .kpi .chispa { margin: .8rem -18px -16px; width: calc(100% + 36px); }
  body.panel .ventanas { width: 100%; }
  body.panel .ventanas a, body.panel .ventanas span { flex: 1; text-align: center; padding: 6px 8px; }
}



/* =====================================================================
   LAS GRÁFICAS DEL MODELO (19/09/2026, madrugada)
   El dueño vio las gráficas teñidas y con la cara puesta y dijo «no
   está usando el estilo de los gráficos». Tenía razón: la forma seguía
   siendo la nuestra. Aquí van las suyas, pieza por pieza: las columnas
   en HTML con el eje a la izquierda (g-columnas), las mini-cajas del
   pulso, el donut con su total pintado, el medidor con aguja, el área
   con eje y el área «rica» con sus luces.
   ===================================================================== */

/* --- las columnas: eje de 44 px, rejilla cada cuarto, base punteada --- */
.gc { display: grid; gap: 14px; min-width: 0; }
.gc-leyenda { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-left: 54px; font-size: 12px; font-weight: 600; color: rgba(20, 26, 23, .65); }
.gc-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.gc-leyenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.gc-leyenda b { color: var(--tinta); font-weight: 800; }
.gc-cuerpo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; height: var(--gc-alto, 210px); }
.gc-eje { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 22px; font-size: 10px; font-weight: 700; color: var(--gris); text-align: right; white-space: nowrap; }
.gc-plano { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.gc-cols {
  flex: 1; display: flex; align-items: flex-end; gap: 6px; min-height: 0;
  border-bottom: 1px dashed #dcd8cc;
  background-image: linear-gradient(rgba(20, 26, 23, .07) 1px, transparent 1px); background-size: 100% 25%;
}
.gc-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; outline: none; }
.gc-barra {
  height: var(--v); min-height: 2px; display: flex; flex-direction: column-reverse;
  border-radius: 4px 4px 0 0; overflow: hidden; opacity: .85; transition: opacity .15s, filter .15s;
}
.gc-col:hover .gc-barra, .gc-col:focus-visible .gc-barra, .gc-col.mirada .gc-barra, .gc-col.elegida .gc-barra { opacity: 1; }
.gc-col[role="button"] { cursor: pointer; }
.gc-col[role="button"]:hover .gc-barra { filter: brightness(.9); }
.gc-seg { display: block; height: var(--s); min-height: 2px; }
.gc-col.marcada::before, .gc-col.elegida::before {
  content: ''; position: absolute; left: -3px; top: 0; bottom: 0; border-left: 1.5px dashed rgba(20, 26, 23, .45); pointer-events: none;
}
.gc-col.recortada .gc-barra { border-radius: 0; }
.gc-col.recortada::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16px; pointer-events: none;
  background: linear-gradient(to bottom, var(--e-tablilla) 20%, transparent);
}
.gc-dias { display: flex; gap: 6px; font-size: 10px; font-weight: 700; color: var(--gris); }
.gc-dias span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; }
.gc-dias span.hoy { color: var(--tinta); }
.gc-dias span.callada { visibility: hidden; }
/* finas (solo si se piden): columnas de 4 px repartidas a lo ancho, el «Total Vol.» del modelo */
.gc.fino .gc-cols { justify-content: space-between; gap: 0; }
.gc.fino .gc-col { flex: 0 0 4px; }
.gc.fino .gc-barra { border-radius: 2px 2px 0 0; opacity: 1; }
.gc.fino .gc-dias { gap: 0; }
/* las tintas de cada capa, en la escala del modelo */
body.panel .gc .c-cobrado { background: var(--e-verde-2); }
body.panel .gc .c-pendiente { background: var(--e-oro-2); }
body.panel .gc .p-ok { background: var(--e-verde-2); }
body.panel .gc .p-tarde { background: var(--e-oro-2); }
body.panel .gc .p-mal { background: var(--rojo); }
body.panel .gc .p-abierta { background: var(--e-piedra); }
body.panel .gc .m-efectivo { background: var(--m-efectivo); }
body.panel .gc .m-banco { background: var(--m-banco); }
body.panel .gc .m-yape { background: var(--m-yape); }
body.panel .gc .m-yape_personal { background: var(--m-yape_personal); }
body.panel .gc .m-otro { background: var(--m-otro); }
@media (max-width: 760px) {
  .gc-cuerpo { grid-template-columns: 34px minmax(0, 1fr); }
  .gc-leyenda { padding-left: 0; gap: 12px; }
  .gc-cols, .gc-dias { gap: 3px; }
}

/* --- el pulso: las mini-cajas y la tablilla --- */
.pulso { display: grid; gap: 14px; }
.pulso-cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pulso-cajas .pc { background: var(--sup-2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pulso-cajas .pc > span {
  display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris);
}
.pulso-cajas .pc > span > i { width: 8px; height: 8px; border-radius: 2px; background: var(--pc-color); flex: none; }
.pulso-cajas .pc > b { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; }
.pulso-cajas .pc > small { font-size: 11px; font-weight: 700; color: var(--gris); min-height: 1em; }
.pulso-cajas .pc.s-a { --pc-color: var(--e-verde-2); }
.pulso-cajas .pc.s-b { --pc-color: var(--e-oro-2); }
body.panel .lienzo-pulso { padding: 22px 20px 18px; display: block; }
.lupa-rejilla .pulso { grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; }
.lupa-rejilla .lienzo-pulso { min-height: 0; overflow: visible; }
@media (max-width: 560px) { .pulso-cajas { grid-template-columns: 1fr 1fr; } }

/* --- el donut y su total pintado --- */
body.panel .lienzo-anillo { display: grid; gap: 16px; padding: 22px 24px; }
body.panel .lienzo-anillo .medios-anillo { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; }
body.panel .medios-lista li .m-nombre { white-space: normal; line-height: 1.15; }
body.panel .anillo { max-width: 120px; margin-inline: 0; }
body.panel .anillo .a-fondo { stroke: color-mix(in srgb, var(--e-tinta) 6%, transparent); }
body.panel .medios-lista { gap: 6px; }
body.panel .medios-lista li { font-size: 12px; font-weight: 600; color: rgba(20, 26, 23, .65); padding: .2rem 0; }
body.panel .medios-lista li .m-nombre { font-weight: 600; color: rgba(20, 26, 23, .8); }
.medios-total { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--e-linea); }
.medios-total > b { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.02em; }
.medios-cifras { display: flex; flex-wrap: wrap; }
.medios-cifras > div { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; border-left: 1px solid var(--e-linea); }
.medios-cifras > div:first-child { padding-left: 0; border-left: 0; }
.medios-cifras b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.medios-cifras span { font-size: 10px; font-weight: 700; color: var(--gris); }
@media (max-width: 420px) { body.panel .lienzo-anillo .medios-anillo { grid-template-columns: minmax(0, 1fr); justify-items: center; } }


/* --- el área con su eje, y el área rica --- */
.g-area-cuerpo { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
.g-area-y { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 20px; font-size: 11px; font-weight: 700; color: var(--gris); text-align: right; white-space: nowrap; }
.g-area-plano { display: grid; gap: 8px; min-width: 0; }
body.panel .g-area .ga-tope { position: static; font-size: inherit; }
body.panel .g-area-lienzo { background-size: 100% 25%; border-bottom: 1px dashed #dcd8cc; }
body.panel .g-area .ga-trazo { stroke: var(--e-verde-1); stroke-width: 1.5; }
.g-area.rico .g-area-lienzo { display: none; }
.g-area.rico { position: absolute; inset: 0; }
.g-area.rico svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-area.rico .ga-resplandor { fill: var(--e-verde-2); opacity: .25; }
.g-area.rico .ga-trazo { stroke: #fff; stroke-width: 1.5; opacity: .9; }
.gd-rico-0 { stop-color: #2f9a78; }
.gd-rico-1 { stop-color: #3d9f80; }
.gd-rico-2 { stop-color: #7fb89a; }
.gd-rico-3 { stop-color: #c9d3b8; }
.gd-lado-0 { stop-color: #e8d9a6; stop-opacity: .95; }
.gd-lado-1 { stop-color: #e6d8a8; stop-opacity: .6; }
.gd-lado-2 { stop-color: #e6d8a8; stop-opacity: 0; }
/* la portada de Equipo: la tablilla con el área rica y las cifras encima */
body.panel .equipo-hero { position: relative; height: 230px; padding: 0; overflow: hidden; }
body.panel .equipo-hero .equipo-cifras { position: absolute; left: 22px; top: 22px; margin: 0; gap: 8px; }
body.panel .equipo-hero .equipo-tramo { font-size: 12px; font-weight: 600; color: rgba(20, 26, 23, .55); }
body.panel .equipo-hero .equipo-cifra { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--tinta); }
body.panel .equipo-hero .equipo-cifras > span:last-child { font-size: 15px; font-weight: 600; color: rgba(20, 26, 23, .7); }

/* --- el arco: el puntito de oro arriba --- */
.g-arco .ar-punto { fill: var(--e-oro-3); stroke: #fff; stroke-width: 2; }

/* --- la chispa de los indicadores, con la caída de las sparklines del modelo --- */
.chispa .gd-area-0 { stop-opacity: .45; }
.chispa .gd-area-1 { stop-color: var(--s); stop-opacity: .18; }
.chispa .gd-area-2 { stop-color: var(--s); stop-opacity: 0; }
body.panel .chispa .c-trazo { stroke-width: 1.8; }
body.panel .chispa .c-punto { stroke: var(--sup-2); stroke-width: 1.5; }

/* --- la franja de proporción, como «Net Worth»: tramos sueltos de 8 px --- */
body.panel .franja { height: 8px; gap: 6px; background: transparent; }
body.panel .franja > span { border-radius: 4px; }
body.panel .franja > span::after { display: none; }


/* ---------------------------------------------------------------------
   LO QUE PIDIÓ EL DUEÑO AL VER LAS GRÁFICAS DEL MODELO (19/09, madrugada)
   Fuera el medidor; el degradado radial de «New Protocol» en cada
   tablilla; las columnas finas y sin globo; el área de «Market Cap» de
   fondo en las tarjetas de cifras, tal cual; y las barras espejo de
   «Liquidations» en la lupa de Facturado.
   --------------------------------------------------------------------- */
body.panel { --e-degradado: radial-gradient(120% 120% at 20% 0%, #dcebe2 0%, #f6f4ee 60%); }
body.panel .lienzo, body.panel .lienzo-anillo, body.panel .lienzo-pulso, body.panel .lienzo-grafica,
body.panel .losas > div:not(.mal):not(.obs), body.panel .losas > a:not(.mal):not(.obs), body.panel .lienzo .losas > div,
body.panel .pulso-cajas .pc, body.panel .caja-chip, body.panel .equipo-hero,
body.panel .kpi, body.panel .cobranza .kpi { background: var(--e-degradado); }
body.panel .losas > div, body.panel .losas > a, body.panel .pulso-cajas .pc { border-radius: 18px; }

/* las tarjetas de cifras: la tablilla con el área rica de fondo y las cifras encima */
body.panel .kpi { position: relative; overflow: hidden; }
body.panel .kpi > * { position: relative; z-index: 1; }
body.panel .kpi > .g-area.rico { position: absolute; z-index: 0; inset: auto 0 0 0; height: 68%; pointer-events: none; }
body.panel .kpi .chispa { display: none; }
body.panel .kpi-fondo.oro .ga-resplandor { fill: var(--e-oro-2); }
body.panel .kpi-fondo.oro .gd-rico-0 { stop-color: #b59a4a; }
body.panel .kpi-fondo.oro .gd-rico-1 { stop-color: #d9c27c; }
body.panel .kpi-fondo.oro .gd-rico-2 { stop-color: #e6d8a8; }
body.panel .kpi-fondo.oro .gd-rico-3 { stop-color: #efe6c9; }
body.panel .kpi-fondo.oro .gd-lado-0 { stop-color: #9fd0bc; }
body.panel .kpi-fondo.oro .gd-lado-1 { stop-color: #9fd0bc; }
body.panel .kpi-fondo.oro .gd-lado-2 { stop-color: #9fd0bc; }

/* --- las barras espejo --- */
.ge { display: grid; gap: 14px; min-width: 0; }
.ge-leyenda { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-left: 54px; font-size: 12px; font-weight: 600; color: rgba(20, 26, 23, .65); }
.ge-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.ge-leyenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ge-total { margin-left: auto; font-weight: 800; color: var(--tinta); }
.ge-total b { color: var(--marca); font-weight: 800; }
.ge-cuerpo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; height: var(--ge-alto, 280px); }
.ge-eje { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 20px; font-size: 11px; font-weight: 700; color: var(--gris); text-align: right; white-space: nowrap; }
.ge-plano { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.ge-filas {
  flex: 1; display: grid; grid-template-rows: 1fr 1fr; min-height: 0;
  background-image: linear-gradient(rgba(20, 26, 23, .07) 1px, transparent 1px); background-size: 100% 25%;
}
.ge-arriba { display: flex; align-items: flex-end; gap: 5px; border-bottom: 1.5px dashed rgba(20, 26, 23, .3); min-height: 0; }
.ge-abajo { display: flex; align-items: flex-start; gap: 5px; min-height: 0; }
.ge-arriba > span { flex: 1 1 0; min-width: 0; border-radius: 4px 4px 0 0; min-height: 2px; transition: filter .15s; }
.ge-abajo > span { flex: 1 1 0; min-width: 0; border-radius: 0 0 4px 4px; min-height: 2px; transition: filter .15s; }
.ge-arriba > span:hover, .ge-abajo > span:hover { filter: brightness(.85); }
.ge.fino .ge-arriba, .ge.fino .ge-abajo { gap: 0; justify-content: space-between; }
.ge.fino .ge-arriba > span, .ge.fino .ge-abajo > span { flex: 0 0 4px; border-radius: 2px 2px 0 0; }
.ge.fino .ge-abajo > span { border-radius: 0 0 2px 2px; }
.ge-dias { display: flex; gap: 5px; font-size: 11px; font-weight: 700; color: var(--gris); }
.ge.fino .ge-dias { gap: 0; }
.ge-dias span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; }
.ge-dias span.hoy { color: var(--tinta); }
.ge-dias span.callada { visibility: hidden; }
body.panel .ge .c-cobrado { background: var(--e-verde-2); }
body.panel .ge .c-facturado { background: var(--e-oro-2); }
@media (max-width: 760px) {
  .ge-cuerpo { grid-template-columns: 34px minmax(0, 1fr); }
  .ge-leyenda { padding-left: 0; gap: 12px; }
}



/* =====================================================================
   EL VIDRIO (19/09/2026, madrugada)
   El dueño: «necesito una mejora brutal tipo glass, transparencia, algo
   más moderno; lo veo simple». Lo que cambia: el suelo lleva dos luces
   —menta arriba a la izquierda, oro a la derecha— para que el vidrio
   tenga qué refractar; las tarjetas son vidrio esmerilado (blanco al 60–
   78 %, desenfoque de 22 px, filo blanco y un brillo dentro); las
   tablillas, las píldoras, los chips y los campos son vidrio más fino con
   el degradado del modelo debajo; las columnas crecen al abrir la
   pantalla. Las columnas vuelven a ser gruesas (el dueño prefirió las de
   «BTC Liquidations») y el área de las cifras vive en una banda al pie,
   sin pisar el texto.
   ===================================================================== */
body.panel, body.panel.gris {
  background-image:
    radial-gradient(60rem 40rem at 6% -8%, rgba(61, 159, 128, .22), transparent 62%),
    radial-gradient(54rem 38rem at 102% 18%, rgba(217, 194, 124, .30), transparent 62%),
    radial-gradient(44rem 32rem at 48% 112%, rgba(159, 208, 188, .20), transparent 60%),
    linear-gradient(160deg, #f3f1ea 0%, #e9ece4 100%);
}

/* --- las tarjetas: vidrio esmerilado --- */
body.panel .caja-blanca, body.panel .cobranza .caja-blanca, body.panel .tms-barra {
  background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .6));
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 0 0 1px rgba(20, 26, 23, .035), 0 24px 50px rgba(30, 40, 35, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
}
body.panel .caja-blanca:hover { box-shadow: 0 0 0 1px rgba(20, 26, 23, .035), 0 24px 50px rgba(30, 40, 35, .10), inset 0 1px 0 rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .78); }

/* --- las tarjetas de cifras: vidrio con la menta del modelo y el área en una banda al pie --- */
body.panel .kpi, body.panel .cobranza .kpi {
  background: radial-gradient(120% 120% at 20% 0%, rgba(220, 235, 226, .9) 0%, rgba(246, 244, 238, .72) 60%);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 0 0 1px rgba(20, 26, 23, .035), 0 24px 50px rgba(30, 40, 35, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column;
}
body.panel .kpi.abre:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(20, 26, 23, .04), 0 30px 60px rgba(30, 40, 35, .15), inset 0 1px 0 rgba(255, 255, 255, .9); }
body.panel .kpi > .g-area.rico {
  position: relative; inset: auto; z-index: 0; height: 62px; flex: none;
  margin: auto -24px -20px; width: calc(100% + 48px); pointer-events: none;
}
body.panel .kpi > .g-area.rico svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 760px) { body.panel .kpi > .g-area.rico { margin: auto -18px -16px; width: calc(100% + 36px); } }

/* --- las tablillas: vidrio fino con el degradado del modelo debajo --- */
body.panel .lienzo, body.panel .lienzo-anillo, body.panel .lienzo-pulso, body.panel .lienzo-grafica,
body.panel .losas > div:not(.mal):not(.obs), body.panel .losas > a:not(.mal):not(.obs), body.panel .lienzo .losas > div,
body.panel .pulso-cajas .pc, body.panel .caja-chip, body.panel .equipo-hero {
  background: radial-gradient(120% 120% at 20% 0%, rgba(220, 235, 226, .82) 0%, rgba(246, 244, 238, .62) 60%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
body.panel .lienzo-pulso, body.panel .lienzo-grafica { border-radius: 18px; }
body.panel .losas > div.mal, body.panel .losas > a.mal { background: rgba(249, 230, 226, .8); border: 1px solid rgba(255, 255, 255, .6); }
body.panel .losas > div.obs, body.panel .losas > a.obs { background: rgba(238, 233, 250, .8); border: 1px solid rgba(255, 255, 255, .6); }

/* --- las píldoras, los chips, los campos y los botones --- */
body.panel .ventanas, body.panel .pestanas, body.panel .cobranza .ventanas, body.panel .chip, body.panel .cobranza .chip {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
body.panel .ventanas a:hover, body.panel .pestana:hover { background: rgba(255, 255, 255, .8); }
body.panel .campo, body.panel .cobranza .campo {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(20, 26, 23, .03);
}
body.panel .campo:focus-visible { background: rgba(255, 255, 255, .92); border-color: var(--marca); }
body.panel .boton-mini, body.panel .cobranza .boton-mini, body.panel .boton {
  background: linear-gradient(180deg, #24302b, #141a17);
  box-shadow: 0 8px 18px -8px rgba(20, 26, 23, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.panel .boton-mini:hover, body.panel .cobranza .boton-mini:hover, body.panel .boton:hover { background: linear-gradient(180deg, #1f7a5c, #166b4f); }
body.panel .boton-mini.fantasma, body.panel .cobranza .boton-mini.fantasma {
  background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .75); color: var(--tinta);
}
body.panel .avatar { background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
body.panel .avatar.primero { background: linear-gradient(180deg, #24302b, #141a17); border: 0; color: #fff; }
body.panel .tabla tr:hover td { background: rgba(255, 255, 255, .5); }

/* --- el riel y la lupa --- */
body.panel .rail {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .5));
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border-right: 1px solid rgba(255, 255, 255, .6); box-shadow: none;
}
body.panel .nav-panel a.actual, body.panel .rail-sec.actual {
  background: linear-gradient(180deg, #24302b, #141a17); box-shadow: 0 10px 22px -10px rgba(20, 26, 23, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.panel .lupa-caja {
  background: linear-gradient(160deg, rgba(243, 241, 234, .92), rgba(233, 236, 228, .88));
  -webkit-backdrop-filter: blur(30px) saturate(1.3); backdrop-filter: blur(30px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .7);
}
body.panel .lupa::backdrop { background: rgba(20, 26, 23, .35); backdrop-filter: blur(6px); }

/* --- las columnas: gruesas, y crecen al abrir la pantalla --- */
@keyframes gc-crece { from { transform: scaleY(.04); opacity: .3; } }
.gc-barra { transform-origin: bottom; animation: gc-crece .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 16ms); }
.ge-arriba > span { transform-origin: bottom; animation: gc-crece .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 16ms); }
.ge-abajo > span { transform-origin: top; animation: gc-crece .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 16ms); }
@media (prefers-reduced-motion: reduce) { .gc-barra, .ge-arriba > span, .ge-abajo > span { animation: none; } }


/* =====================================================================
   EL VIDRIO II (19/09/2026) · pegar al FINAL de panel.css, después de
   «EL VIDRIO». Orden de los trozos: suelo → vidrio → tablilla → cifras →
   columnas → bancos → compacto → mandos → lupa → movimiento.
   ===================================================================== */
/* --- el suelo: grano fino + luces con núcleo, fijas al desplazarse --- */
body.panel, body.panel.gris {
  --gris: rgba(20, 26, 23, .58);      /* la letra chica sube de .5 a .58: sobre vidrio con oro detrás, .5 rozaba 4:1 */
  --texto-2: rgba(20, 26, 23, .74);
  background-color: #ecebe4;
  background-image:
    /* grano SVG, alfa .045, tesela de 160 px: fuera del vidrio se ve nítido, detrás se disuelve; es lo que delata el esmerilado */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* menta arriba a la izquierda: núcleo denso y halo */
    radial-gradient(52rem 36rem at 4% -6%, rgba(61, 159, 128, .38) 0%, rgba(61, 159, 128, .16) 40%, transparent 66%),
    /* oro a la derecha */
    radial-gradient(48rem 34rem at 104% 14%, rgba(217, 194, 124, .46) 0%, rgba(217, 194, 124, .18) 42%, transparent 66%),
    /* un foco blanco en el centro: el reflejo que recogen las tarjetas */
    radial-gradient(30rem 22rem at 36% 34%, rgba(255, 255, 255, .55), transparent 62%),
    /* menta clara al pie */
    radial-gradient(40rem 30rem at 55% 108%, rgba(159, 208, 188, .34) 0%, rgba(159, 208, 188, .12) 45%, transparent 64%),
    /* verde hondo, chico, para que las tarjetas del centro también refracten algo */
    radial-gradient(22rem 22rem at 76% 58%, rgba(22, 107, 79, .12) 0%, transparent 65%),
    linear-gradient(160deg, #f3f1ea 0%, #e9ece4 100%);
  background-attachment: fixed;   /* las luces no viajan con el scroll: las tarjetas de abajo siguen teniendo color detrás */
}
@media print { body.panel, body.panel.gris { background: #fff; } }

/* --- la tarjeta: cristal tallado. Cuatro capas de fondo: destello de esquina, reflejo diagonal,
   cuerpo del vidrio (todas en padding-box) y el FILO en degradado (border-box, sobre border
   transparente): luz arriba-izquierda, sombra abajo-derecha. Sin pseudo-elementos ni mask. --- */
body.panel .caja-blanca, body.panel .cobranza .caja-blanca, body.panel .tms-barra {
  border: 1px solid transparent; border-radius: 22px;
  background:
    radial-gradient(60% 45% at 8% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 40%) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .40) 100%) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .42) 50%, rgba(20, 26, 23, .05) 100%) border-box;
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),   /* relieve: luz arriba e izquierda */
    inset 0 -1px 0 rgba(20, 26, 23, .025),    /* relieve: sombra abajo y derecha */
    inset 0 0 0 1px rgba(255, 255, 255, .22),       /* el vidrio tiene grosor */
    0 1px 0 rgba(255, 255, 255, .55),               /* la arista inferior que refleja */
    0 2px 6px rgba(30, 40, 35, .05),                /* contacto */
    0 22px 44px -14px rgba(30, 40, 35, .26),        /* sombra honda */
    0 40px 80px -30px rgba(30, 40, 35, .14);        /* sombra larga */
  transition: box-shadow .22s ease, transform .22s ease;
}
body.panel .caja-blanca:hover, body.panel .tms-barra:hover {
  border-color: transparent;   /* EL VIDRIO ponía borde blanco al pasar: pisaría el filo */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .025), inset 0 0 0 1px rgba(255, 255, 255, .26),
    0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(30, 40, 35, .06), 0 28px 52px -16px rgba(30, 40, 35, .32), 0 40px 80px -30px rgba(30, 40, 35, .14);
}
/* la tarjeta «trabajando» (vacía, punteada) no es vidrio */
body.panel .caja-blanca.trabajando, body.panel .caja-blanca.trabajando:hover {
  background: transparent; border: 1.5px dashed rgba(20, 26, 23, .16); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* el riel: el mismo cristal en vertical, un punto más denso para que el menú se lea siempre */
body.panel .rail {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .42));
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border-right: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .9), inset -1px 0 0 rgba(20, 26, 23, .05);
}
/* el globo de las gráficas de movimiento, en el mismo cristal */
body.panel .gm-ficha {
  background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .42));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .02), 0 14px 32px -12px rgba(30, 40, 35, .25);
}

/* --- la tablilla: un receso HUNDIDO en el cristal. Sin blur propio (vive dentro de una tarjeta
   ya desenfocada: no hay nada que desenfocar y cuesta GPU); sombra fina en el borde de arriba,
   luz en el de abajo, y un canto claro por fuera como un rebaje en el vidrio --- */
body.panel .lienzo, body.panel .lienzo-anillo, body.panel .lienzo-pulso, body.panel .lienzo-grafica,
body.panel .caja-chip, body.panel .equipo-hero {
  background:
    linear-gradient(180deg, rgba(20, 26, 23, .035) 0%, rgba(20, 26, 23, 0) 14px),
    radial-gradient(120% 120% at 20% 0%, rgba(220, 235, 226, .86) 0%, rgba(246, 244, 238, .54) 60%, rgba(255, 255, 255, .36) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 2px rgba(20, 26, 23, .07),
    inset 0 -1px 0 rgba(255, 255, 255, .85),
    inset 1px 0 0 rgba(20, 26, 23, .025),
    inset 0 0 0 1px rgba(255, 255, 255, .3),
    0 1px 0 rgba(255, 255, 255, .75);
}
body.panel .lienzo, body.panel .lienzo-grafica { padding: 14px 14px 12px; }
body.panel .lienzo-pulso { padding: 14px 14px 12px; border-radius: 16px; }
body.panel .lienzo-anillo { padding: 14px 16px; gap: 12px; }
body.panel .equipo-hero { height: 190px; }
/* --- las losas y las mini-cajas del pulso: vidrio EN RELIEVE (lo contrario de la tablilla) --- */
body.panel .losas > div:not(.mal):not(.obs), body.panel .losas > a:not(.mal):not(.obs), body.panel .lienzo .losas > div,
body.panel .pulso-cajas .pc {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .46) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .02), 0 6px 14px -8px rgba(30, 40, 35, .18);
}
body.panel .losas > div, body.panel .losas > a, body.panel .pulso-cajas .pc { border-radius: 14px; padding: 9px 12px; gap: 3px; }
body.panel .losas > div.mal, body.panel .losas > a.mal {
  background: linear-gradient(135deg, rgba(249, 230, 226, .92), rgba(249, 230, 226, .62));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(196, 70, 58, .1), 0 6px 14px -8px rgba(30, 40, 35, .18);
}
body.panel .losas > div.obs, body.panel .losas > a.obs {
  background: linear-gradient(135deg, rgba(238, 233, 250, .92), rgba(238, 233, 250, .62));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(107, 79, 187, .1), 0 6px 14px -8px rgba(30, 40, 35, .18);
}
body.panel .losas > a.actual { box-shadow: inset 0 0 0 1.5px #141a17, 0 6px 14px -8px rgba(30, 40, 35, .18); }
body.panel .losas { gap: 8px; margin-top: 12px; }
body.panel .losas > div > b, body.panel .losas > a > b { font-size: 1.1rem; }
body.panel .losas > div > span, body.panel .losas > a > span { font-size: .62rem; }
body.panel .losas > div > small, body.panel .losas > a > small { font-size: .68rem; }
body.panel .pulso-cajas { gap: 8px; }
body.panel .pulso-cajas .pc > b { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

/* --- las tarjetas de cifras: el mismo cristal tallado con la menta del modelo; la banda del área al pie --- */
body.panel .kpi, body.panel .cobranza .kpi {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid transparent; border-radius: 22px;
  padding: 16px 18px 14px; margin-bottom: 0;
  background:
    radial-gradient(60% 45% at 8% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 40%) padding-box,
    radial-gradient(120% 120% at 20% 0%, rgba(220, 235, 226, .80) 0%, rgba(246, 244, 238, .46) 58%, rgba(255, 255, 255, .32) 100%) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .42) 50%, rgba(20, 26, 23, .05) 100%) border-box;
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .025), inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 1px 0 rgba(255, 255, 255, .55), 0 2px 6px rgba(30, 40, 35, .05), 0 22px 44px -14px rgba(30, 40, 35, .26), 0 40px 80px -30px rgba(30, 40, 35, .14);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}
body.panel .kpis-5 .kpi { padding: 14px 16px 12px; }
body.panel .kpi:hover { border-color: transparent; }
body.panel .kpi.abre:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .025), inset 0 0 0 1px rgba(255, 255, 255, .26),
    0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(30, 40, 35, .06), 0 30px 56px -16px rgba(30, 40, 35, .34), 0 48px 90px -30px rgba(30, 40, 35, .16);
}
/* jerarquía compacta: rótulo 10 px / cifra 22–27 px / pie 11 px */
body.panel .kpi-cab, body.panel .cobranza .kpi-cab { margin-bottom: .45rem; gap: .5rem; min-height: 0; }
body.panel .kpi-icono, body.panel .cobranza .kpi-icono {
  width: 1.8rem; height: 1.8rem; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(20, 26, 23, .02), 0 1px 2px rgba(20, 26, 23, .06);
}
body.panel .kpi-icono svg, body.panel .cobranza .kpi-icono svg { width: .95rem; height: .95rem; }
body.panel .kpi-rotulo, body.panel .cobranza .kpi-rotulo { font-size: .62rem; letter-spacing: .05em; }
body.panel .kpi b, body.panel .cobranza .kpi b { font-size: clamp(1.4rem, 1.9vw, 1.75rem); letter-spacing: -.03em; line-height: 1; }
body.panel .kpis-5 .kpi b, body.panel .cobranza .kpis-5 .kpi b { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
body.panel .kpi b small { font-size: .5em; }
body.panel .kpi span, body.panel .kpi .kpi-pie, body.panel .cobranza .kpi-linea > span:not(.delta) { font-size: .7rem; line-height: 1.3; }
body.panel .kpi-linea, body.panel .cobranza .kpi-linea { margin-top: .3rem; gap: .35rem; min-height: 0; }
body.panel .cobranza .kpi .kpi-pie { margin-top: .2rem; }
body.panel .delta, body.panel .cobranza .delta { font-size: .7rem; }
body.panel .kpi.abre .kpi-lupa { top: .75rem; right: .8rem; }
/* la banda del área: 46 px al pie, sangra hasta el filo, con su costura de vidrio arriba; nunca pisa el texto */
body.panel .kpi > .g-area.rico {
  position: relative; inset: auto; z-index: 0; flex: none; pointer-events: none;
  height: 46px; margin: .5rem -18px -14px; width: calc(100% + 36px);
  border-top: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}
body.panel .kpis-5 .kpi > .g-area.rico { margin: .5rem -16px -12px; width: calc(100% + 32px); height: 40px; }
body.panel .kpi > .g-area.rico svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 760px) {
  body.panel .kpi, body.panel .cobranza .kpi, body.panel .kpis-5 .kpi { padding: 14px 14px 12px; border-radius: 18px; }
  body.panel .kpi > .g-area.rico, body.panel .kpis-5 .kpi > .g-area.rico { margin: .5rem -14px -12px; width: calc(100% + 28px); height: 38px; }
}

/* --- el plano: rejilla cada cuarto + un suelo de menta que sube desde la base y se apaga --- */
body.panel .gc-cols, body.panel .ge-filas {
  background-image:
    linear-gradient(rgba(20, 26, 23, .07) 1px, transparent 1px),
    linear-gradient(to top, rgba(22, 107, 79, .08) 0%, rgba(22, 107, 79, .025) 14%, transparent 30%);
  background-size: 100% 25%, 100% 100%;
  background-repeat: repeat, no-repeat;
}
body.panel .gc-cols { border-bottom: 1px dashed rgba(20, 26, 23, .22); }
body.panel .ge-arriba { border-bottom: 1.5px dashed rgba(20, 26, 23, .28); }
/* --- la barra: EL DEGRADADO TONAL, inclinado y suave. El dueño eligió la C del cuarto lote («Degradado tonal»)
   y pidió «no tan fuerte, algo más al original, inclinado» (19/09). La forma no se toca: mismo radio, mismo grosor.
   Cada tramo nace de SU color (--m, como ya lo declaran los medios) y en oklch gira unos grados hacia el matiz vecino
   (verde → verde azulado, oro → ocre, morado → violeta) mientras pierde un poco de luz hacia abajo a la derecha:
   la profundidad viene del tono, no del blanco ni del negro. Sin glint, sin cilindro. Del original quedan solo la
   sombra corta que despega la barra del suelo y la costura de 1 px entre tramos. Las tramas de los bancos se apilan
   ENCIMA del degradado (dos capas de background-image): BBVA y BCP siguen distinguibles.
   Si el navegador no sabe de colores relativos (oklch(from …)) el tramo queda en su color liso: nada se rompe. --- */
body.panel .gc-barra {
  position: relative; opacity: 1; border-radius: 5px 5px 0 0; overflow: hidden;
  box-shadow: 0 6px 12px -7px rgba(20, 26, 23, .24);
  transition: filter .15s, box-shadow .15s;
}
body.panel .gc-barra::after { content: none; }
/* la costura entre tramos apilados (column-reverse: el hermano siguiente es el de arriba) */
body.panel .gc-seg { position: relative; }
body.panel .gc-seg + .gc-seg { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .45); }
/* las capas que no son medios declaran su color en --m, y de ahí sale el tono */
.c-cobrado, .p-ok { --m: var(--e-verde-2); }
.c-pendiente, .c-facturado, .p-tarde { --m: var(--e-oro-2); }
.p-mal { --m: var(--rojo); }
.p-abierta { --m: var(--e-piedra); }
@supports (color: oklch(from red l c h)) {
  body.panel .gc .gc-col .gc-seg, body.panel .ge .ge-arriba > span, body.panel .ge .ge-abajo > span {
    /* la punta: el color exacto, un pelo más claro; el pie: 5 % menos de luz y 12° girado al vecino */
    --tono-1: oklch(from var(--m) calc(l + .02) c calc(h + 3));
    --tono-2: oklch(from var(--m) calc(l - .05) calc(c * 1.05) calc(h - 12));
    --tonal: linear-gradient(160deg, var(--tono-1) 0%, var(--m) 42%, var(--tono-2) 100%);
    background-image: var(--tonal);
  }
  /* la mitad de abajo del espejo crece hacia abajo: su punta es la de abajo */
  body.panel .ge .ge-abajo > span { --tonal: linear-gradient(20deg, var(--tono-1) 0%, var(--m) 42%, var(--tono-2) 100%); }
  /* los bancos: la trama encima, el tono debajo (las mismas tramas del bloque de bancos) */
  body.panel :is(.gc .gc-col .gc-seg, .ge .ge-arriba > span, .ge .ge-abajo > span):is(.m-yape_personal, .s-yape_personal) { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .42) 0 1px, transparent 1px 5px), var(--tonal); }
  body.panel :is(.gc .gc-col .gc-seg, .ge .ge-arriba > span, .ge .ge-abajo > span):is(.m-bbva, .s-bbva) { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .30) 0 1px, transparent 1px 5px), var(--tonal); }
  body.panel :is(.gc .gc-col .gc-seg, .ge .ge-arriba > span, .ge .ge-abajo > span):is(.m-bcp, .s-bcp) { background-image: repeating-linear-gradient(45deg, rgba(159, 208, 188, .70) 0 1px, transparent 1px 5px), var(--tonal); }
  body.panel :is(.gc .gc-col .gc-seg, .ge .ge-arriba > span, .ge .ge-abajo > span):is(.m-interbank, .s-interbank) { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .26) 0 1px, transparent 1px 6px), var(--tonal); }
  /* en columnas finas (4 px) ni tono ni trama: color liso */
  body.panel :is(.gc.fino .gc-col .gc-seg, .ge.fino .ge-arriba > span, .ge.fino .ge-abajo > span) { background-image: none; }
}
/* al pasar o elegir: sube un poco la saturación y la sombra; no oscurece ni blanquea */
body.panel .gc-col:hover .gc-barra, body.panel .gc-col:focus-visible .gc-barra, body.panel .gc-col.mirada .gc-barra,
body.panel .gc-col[role="button"]:hover .gc-barra {
  opacity: 1; filter: saturate(1.12);
  box-shadow: 0 8px 16px -8px rgba(20, 26, 23, .3);
}
body.panel .gc-col.elegida .gc-barra { filter: saturate(1.12); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 8px 16px -8px rgba(20, 26, 23, .3); }
body.panel .gc-col.marcada::before, body.panel .gc-col.elegida::before { border-left: 1.5px dashed rgba(20, 26, 23, .35); }
/* las columnas de 4 px (fino) no llevan sombra: sería ruido */
body.panel .gc.fino .gc-barra { box-shadow: none; border-radius: 2px 2px 0 0; }
/* las barras espejo (.ge): el mismo tono, cada mitad con su sombra corta hacia fuera */
body.panel .ge .ge-arriba > span, body.panel .ge .ge-abajo > span { position: relative; overflow: hidden; transition: filter .15s, box-shadow .15s; }
body.panel .ge .ge-arriba > span::after, body.panel .ge .ge-abajo > span::after { content: none; }
body.panel .ge .ge-arriba > span { box-shadow: 0 6px 12px -7px rgba(20, 26, 23, .2); }
body.panel .ge .ge-abajo > span { box-shadow: 0 -6px 12px -7px rgba(20, 26, 23, .12); }
body.panel .ge .ge-arriba > span:hover, body.panel .ge .ge-abajo > span:hover { filter: saturate(1.12); }
body.panel .ge.fino .ge-arriba > span, body.panel .ge.fino .ge-abajo > span { box-shadow: none; }
/* la leyenda enseña la misma muestra (con su trama), redondeada y con filo de vidrio */
body.panel .gc-leyenda i, body.panel .ge-leyenda i { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 1px 1px rgba(20, 26, 23, .15); }

/* --- los medios de pago: Yape morado, BBVA azul marino con líneas blancas, BCP azul con líneas verdes.
   Las variables se declaran en body.panel y en cada ámbito que hoy las pisa (.cobranza línea 714,
   .plegable, .lupa…) para que manden en todo el panel. Los datos YA llegan: MEDIOS_FINOS
   (PanoramaCobranza:50) y PagoTms::banco() están en el árbol; en Cobranza la pila lleva el prefijo
   «m-» (g-pila-medios) y en Partes las columnas llevan «s-» (g-medios-barras): se cubren los dos. --- */
body.panel, body.panel.gris,
body.panel :is(.cobranza, .plegable, .lupa, .lienzo-anillo, .g-pila-medios, .g-medios, .gc, .ge, .anillo, .medios-lista, .pulso, .rastreos) {
  --m-efectivo: #3d9f80;        /* la menta del modelo: lo que entra en caja */
  --m-yape: #7a2fd0;            /* morado Yape, liso */
  --m-yape_personal: #c9ad5c;   /* el oro del modelo, con líneas blancas: es Yape, pero fuera de la empresa (sigue siendo la alerta) */
  --m-bbva: #0b2a5b;            /* azul marino BBVA, líneas blancas a 135° */
  --m-bcp: #1f55b8;             /* azul BCP, líneas verdes (#9fd0bc) a 45° */
  --m-interbank: #1a8fa0;       /* azul verdoso Interbank, líneas blancas finas */
  --m-banco: #4a6b96;           /* otro banco / transferencia sin nombre: pizarra lisa */
  --m-otro: #cfcbc0;            /* la piedra del modelo */
}
/* el color plano por --m: lo leen el donut (.a-parte stroke), la pila SVG (rect fill) y los puntos de .medios-lista */
.m-efectivo, .s-efectivo { --m: var(--m-efectivo); }
.m-yape, .s-yape { --m: var(--m-yape); }
.m-yape_personal, .s-yape_personal { --m: var(--m-yape_personal); }
.m-bbva, .s-bbva { --m: var(--m-bbva); }
.m-bcp, .s-bcp { --m: var(--m-bcp); }
.m-interbank, .s-interbank { --m: var(--m-interbank); }
.m-banco, .s-banco { --m: var(--m-banco); }
.m-otro, .s-otro { --m: var(--m-otro); }
body.panel .g-pila-medios rect, body.panel .plegable .g-pila-medios :is(.m-efectivo, .m-yape, .m-yape_personal, .m-bbva, .m-bcp, .m-interbank, .m-banco, .m-otro) { fill: var(--m); }
body.panel .anillo .a-parte { stroke: var(--m); }
body.panel .medios-lista li i, body.panel .leyenda i, body.panel .gm-ficha-linea i, body.panel .gm-leyenda i { background: var(--m); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 1px 2px rgba(20, 26, 23, .15); }
/* los tramos en HTML y los cuadritos de leyenda: color + trama. Línea de 1 px cada 5 px, alfa ≤ .32: se lee como textura, no como rayas */
body.panel :is(.gc-seg, .gc-leyenda i, .ge-arriba > span, .ge-abajo > span, .gm-seg, .gm-ficha-linea i, .gm-leyenda i, .rastreos i):is(.m-efectivo, .s-efectivo) { background: var(--m-efectivo); }
body.panel :is(.gc-seg, .gc-leyenda i, .ge-arriba > span, .ge-abajo > span, .gm-seg, .gm-ficha-linea i, .gm-leyenda i, .rastreos i):is(.m-yape, .s-yape) { background: var(--m-yape); }
body.panel :is(.gc-seg, .gc-leyenda i, .ge-arriba > span, .ge-abajo > span, .gm-seg, .gm-ficha-linea i, .gm-leyenda i, .rastreos i):is(.m-yape_personal, .s-yape_personal) {
  background-color: var(--m-yape_personal);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .42) 0 1px, transparent 1px 5px);
}
body.panel :is(.gc-seg, .gc-leyenda i, .ge-arriba > span, .ge-abajo > span, .gm-seg, .gm-ficha-linea i, .gm-leyenda i, .rastreos i):is(.m-bbva, .s-bbva) {
  background-color: var(--m-bbva);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .30) 0 1px, transparent 1px 5px);
}
body.panel :is(.gc-seg, .gc-leyenda i, .ge-arriba > span, .ge-abajo > span, .gm-seg, .gm-ficha-linea i, .gm-leyenda i, .rastreos i):is(.m-bcp, .s-bcp) {
  background-color: var(--m-bcp);
  background-image: repeating-linear-gradient(45deg, rgba(159, 208, 188, .70) 0 1px, transparent 1px 5px);
}
body.panel :is(.gc-seg, .gc-leyenda i, .ge-arriba > span, .ge-abajo > span, .gm-seg, .gm-ficha-linea i, .gm-leyenda i, .rastreos i):is(.m-interbank, .s-interbank) {
  background-color: var(--m-interbank);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .26) 0 1px, transparent 1px 6px);
}
body.panel :is(.gc-seg, .gc-leyenda i, .ge-arriba > span, .ge-abajo > span, .gm-seg, .gm-ficha-linea i, .gm-leyenda i, .rastreos i):is(.m-banco, .s-banco) { background: var(--m-banco); }
body.panel :is(.gc-seg, .gc-leyenda i, .ge-arriba > span, .ge-abajo > span, .gm-seg, .gm-ficha-linea i, .gm-leyenda i, .rastreos i):is(.m-otro, .s-otro) { background: var(--m-otro); }
/* en columnas finas (4 px) la trama se lee como color medio: se apaga */
body.panel .gc.fino .gc-seg { background-image: none; }

/* --- la compactación: 25–30 % menos aire, misma legibilidad (la letra base y Manrope no se tocan) --- */
body.panel .lienzo-panel { max-width: 86rem; padding: 1.5rem 1.85rem 3rem; }
body.panel .cab-pagina { margin-bottom: 1rem; }
body.panel .cab-pagina h1, body.panel .cobranza .cab-pagina h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
body.panel .cab-pagina p { font-size: .78rem; margin-top: .3rem; }
/* tarjetas: 26/28 → 18/20; separación 20 → 14 */
body.panel .caja-blanca, body.panel .cobranza .caja-blanca { padding: 18px 20px; margin-bottom: 14px; }
body.panel .tms-barra { padding: 14px 20px; }
body.panel .caja-blanca > h2, body.panel .caja-cab h2, body.panel .cobranza .caja-cab h2 { font-size: 15px; }
body.panel .caja-blanca > h2 { margin-bottom: 12px; }
body.panel .caja-cab { margin-bottom: 12px; }
body.panel .caja-cab .pista { font-size: .7rem; }
body.panel .kpis, body.panel .rejilla-2, body.panel .rejilla-2-1, body.panel .rejilla-graficas, body.panel .equipo-cuadro { gap: 14px; margin-bottom: 14px; }
body.panel .kpis-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
@media (min-width: 1180px) { body.panel .kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* gráficas: las columnas bajan de 210 a 180 y las espejo de 280 a 220 (el --gc-alto inline queda como techo) */
body.panel .gc, body.panel .ge, body.panel .pulso { gap: 10px; }
body.panel .gc-cuerpo { height: min(var(--gc-alto, 210px), 180px); }
body.panel .ge-cuerpo { height: min(var(--ge-alto, 280px), 220px); }
body.panel .gc-leyenda, body.panel .ge-leyenda { font-size: 11px; gap: 14px; }
body.panel .medios-total { gap: 8px; padding-top: 10px; }
body.panel .medios-total > b { font-size: clamp(1.5rem, 2.4vw, 2rem); }
/* tablas: .84 → .8rem; filas de 30–34 px */
body.panel .tabla, body.panel .cobranza .tabla { font-size: .8rem; }
body.panel .tabla th, body.panel .cobranza .tabla th { padding: .35rem .65rem .5rem; font-size: .62rem; }
body.panel .tabla td, body.panel .cobranza .tabla td { padding: .5rem .65rem; }
body.panel .tabla .fila-form .campo.chico, body.panel .tabla select.campo.chico { padding: .34rem .5rem; font-size: .76rem; }
body.panel .quien-lista li, body.panel .quien { padding-block: .4rem; }
body.panel .avatar { width: 2.05rem; height: 2.05rem; font-size: .72rem; }
/* mandos */
body.panel .ventanas a, body.panel .ventanas span, body.panel .pestana, body.panel .cobranza .pestana { padding: 5px 10px; font-size: .72rem; }
body.panel .pestanas { margin-bottom: 12px; }
body.panel .boton-mini, body.panel .cobranza .boton-mini { padding: .48rem .9rem; font-size: .74rem; }
body.panel .boton { padding: .7rem 1.25rem; }
body.panel .campo, body.panel .cobranza .campo { padding: .48rem .75rem; font-size: .82rem; }
body.panel .campo.chico { padding: .4rem .6rem; font-size: .78rem; }
body.panel .chip, body.panel .cobranza .chip { padding: .34rem .72rem; font-size: .7rem; }
body.panel .chip.mini { padding: .2rem .55rem; font-size: .62rem; }
/* el riel */
body.panel .rail { padding: 1rem .85rem 1rem; }
body.panel .nav-panel { gap: .05rem; }
body.panel .nav-panel a, body.panel .rail-sec { padding: .44rem .8rem; font-size: .79rem; }
body.panel .nav-panel a svg, body.panel .rail-sec svg { width: .95rem; height: .95rem; }
/* los pocos avisos que queden */
body.panel .aviso-ok, body.panel .aviso-error, body.panel .aviso-suave { padding: .6rem .9rem; border-radius: 14px; font-size: .78rem; }
body.panel .caja-chip { border-radius: 14px; }
@media (max-width: 760px) {
  body.panel .lienzo-panel { padding: 1rem .85rem 2.5rem; }
  body.panel .caja-blanca, body.panel .cobranza .caja-blanca { padding: 14px 14px; border-radius: 18px; }
}

/* --- píldoras: un riel de cristal hundido; la elegida en ónice con canto de luz --- */
body.panel .ventanas, body.panel .pestanas, body.panel .cobranza .ventanas {
  padding: 3px; gap: 2px;
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 2px rgba(20, 26, 23, .07), inset 0 0 0 1px rgba(255, 255, 255, .3), 0 1px 0 rgba(255, 255, 255, .8);
}
/* las píldoras de la cabecera viven sobre el suelo, no sobre una tarjeta: esas sí desenfocan */
body.panel .cab-pagina .ventanas { -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
body.panel .ventanas a:hover, body.panel .pestana:hover { background: rgba(255, 255, 255, .75); color: var(--tinta); }
body.panel .ventanas .actual, body.panel .ventanas .a-mano, body.panel .pestana.actual, body.panel .pestana.actual:hover,
body.panel .pestana.e-parciales_sin.actual, body.panel .pestana.e-parciales_con.actual {
  background: linear-gradient(180deg, #2a3630, #141a17); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -6px rgba(20, 26, 23, .6);
}
/* chips: pastilla de cristal en relieve */
body.panel .chip, body.panel .cobranza .chip {
  background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .4));
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .02), 0 1px 2px rgba(20, 26, 23, .06);
}
/* campos: pocillo hundido; al foco casi blanco con el anillo menta */
body.panel .campo, body.panel .cobranza .campo {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .72); border-radius: 11px;
  box-shadow: inset 0 1px 2px rgba(20, 26, 23, .08), inset 0 0 0 1px rgba(20, 26, 23, .025), 0 1px 0 rgba(255, 255, 255, .8);
  transition: background .15s, box-shadow .15s, border-color .15s;
}
body.panel .campo.chico { border-radius: 10px; }
body.panel .campo:hover { background: rgba(255, 255, 255, .64); }
body.panel .campo:focus-visible {
  background: rgba(255, 255, 255, .94); border-color: var(--marca);
  box-shadow: inset 0 1px 2px rgba(20, 26, 23, .05), 0 0 0 3px rgba(61, 159, 128, .22), 0 1px 0 rgba(255, 255, 255, .8);
}
body.panel .campo.sugerido { border-style: dashed; border-color: var(--marca); background: rgba(255, 255, 255, .55); }
/* botones: ónice pulido (bisel arriba, sombra que cae) y el fantasma en cristal */
body.panel .boton-mini, body.panel .cobranza .boton-mini, body.panel .boton {
  background: linear-gradient(180deg, #2a3630 0%, #141a17 100%); color: #fff; border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 1px 2px rgba(20, 26, 23, .2), 0 10px 20px -10px rgba(20, 26, 23, .7);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
body.panel .boton-mini:hover, body.panel .cobranza .boton-mini:hover, body.panel .boton:hover { background: linear-gradient(180deg, #23906e 0%, #166b4f 100%); color: #fff; }
body.panel .boton-mini:active, body.panel .boton:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 10px -6px rgba(20, 26, 23, .6); }
body.panel .boton-mini.fantasma, body.panel .cobranza .boton-mini.fantasma {
  background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .4)); color: var(--tinta);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .02), 0 1px 2px rgba(20, 26, 23, .06);
}
body.panel .boton-mini.fantasma:hover { background: rgba(255, 255, 255, .88); color: var(--marca-osc); }
/* el riel: la puerta abierta con el mismo bisel del botón */
body.panel .nav-panel a.actual, body.panel .rail-sec.actual {
  background: linear-gradient(180deg, #2a3630, #141a17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px -10px rgba(20, 26, 23, .65);
}
body.panel .nav-panel a:hover, body.panel .rail-sec:hover { background: rgba(255, 255, 255, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
/* el avatar: una perla de vidrio */
body.panel .avatar { background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .5)); border: 1px solid rgba(255, 255, 255, .88); box-shadow: inset 1px 1px 0 #fff, inset 0 -1px 0 rgba(20, 26, 23, .02), 0 2px 5px -2px rgba(20, 26, 23, .2); }
body.panel .tabla tr:hover td { background: rgba(255, 255, 255, .42); }

/* --- la lupa: una hoja lateral de 600 px en cristal, pegada a la derecha; el tablero sigue viéndose a la
   izquierda tras un velo suave. Dentro, UNA columna que se desliza entera y gráficas a su altura natural.
   Solo a partir de 901 px de ancho y 621 de alto: por debajo sigue la pantalla completa de siempre. --- */
@media (min-width: 901px) and (min-height: 621px) {
  body.panel .lupa::backdrop { background: rgba(20, 26, 23, .24); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
  body.panel .lupa-caja {
    position: absolute; inset: 12px 12px 12px auto; width: min(600px, calc(100vw - 24px));
    display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px;
    padding: 16px 18px 18px; border-radius: 24px;
    border: 1px solid transparent;
    background:
      radial-gradient(60% 40% at 8% 0%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%) padding-box,
      linear-gradient(160deg, rgba(246, 244, 238, .84) 0%, rgba(236, 235, 228, .74) 100%) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .42) 50%, rgba(20, 26, 23, .05) 100%) border-box;
    -webkit-backdrop-filter: blur(32px) saturate(1.6); backdrop-filter: blur(32px) saturate(1.6);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .025),
      -24px 0 60px -20px rgba(30, 40, 35, .35), 0 24px 50px rgba(30, 40, 35, .18);
  }
  /* cabecera compacta */
  body.panel .lupa-cab { gap: .35rem .75rem; }
  body.panel .lupa-cab .kpi-icono { width: 2rem; height: 2rem; border-radius: 10px; }
  body.panel .lupa-cab .kpi-icono svg { width: 1rem; height: 1rem; }
  body.panel .lupa-titulo h2 { font-size: .78rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
  body.panel .lupa-titulo .lupa-cifra { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; }
  body.panel .lupa-titulo p { font-size: .74rem; font-weight: 600; }
  body.panel .lupa-mandos { gap: .45rem; flex-wrap: wrap; }
  body.panel .lupa-mandos .ventanas a, body.panel .lupa-mandos .ventanas span { padding: 4px 9px; font-size: .68rem; }
  body.panel .cerrar-lupa { width: 2rem; height: 2rem; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .02); }
  body.panel .lupa-tiras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: .25rem; }
  body.panel .lupa-tiras > div { padding: 8px 11px; }
  body.panel .lupa-tiras > div > b { font-size: .95rem; }
  /* el cuerpo: una columna, filas a su alto, y es la rejilla la que se desliza (no cada tarjeta) */
  body.panel .lupa-rejilla {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; align-content: start;
    gap: 10px; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(20, 26, 23, .18) transparent;
  }
  body.panel .lupa-rejilla::-webkit-scrollbar { width: 6px; }
  body.panel .lupa-rejilla::-webkit-scrollbar-thumb { background: rgba(20, 26, 23, .18); border-radius: 999px; }
  /* las tarjetas de dentro son losas en relieve (sin blur: ya están sobre la hoja desenfocada) */
  body.panel .lupa-rejilla > .caja-blanca, body.panel .lupa-rejilla > .caja-blanca:hover {
    overflow: visible; min-height: 0; margin: 0; padding: 12px 14px 14px; border-radius: 16px; transform: none;
    border: 1px solid rgba(255, 255, 255, .8);
    background: linear-gradient(135deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .44) 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .02), 0 6px 14px -8px rgba(30, 40, 35, .18);
  }
  body.panel .lupa-rejilla .ancha { grid-column: auto; }
  body.panel .lupa-rejilla .caja-cab { margin-bottom: .5rem; }
  body.panel .lupa-rejilla .caja-cab h2 { font-size: .9rem; }
  body.panel .lupa-rejilla .desliza { overflow: visible; max-height: none; padding-right: 0; }
  body.panel .lupa-rejilla > .caja-blanca > .grafica { height: auto; flex: none; min-height: 0; }
  /* las gráficas dentro: altura fija y corta, eje de 38 px (mandan sobre el --gc-alto inline) */
  body.panel .lupa-rejilla .gc { gap: 8px; }
  body.panel .lupa-rejilla .gc-cuerpo { height: 160px; grid-template-columns: 38px minmax(0, 1fr); }
  body.panel .lupa-rejilla .ge-cuerpo { height: 200px; grid-template-columns: 38px minmax(0, 1fr); }
  body.panel .lupa-rejilla .g-area-lienzo { height: 140px; }
  body.panel .lupa-rejilla .gc-leyenda, body.panel .lupa-rejilla .ge-leyenda { padding-left: 48px; gap: 12px; font-size: 11px; }
  body.panel .lupa-rejilla .gc-cols { gap: 4px; }
  body.panel .lupa-rejilla .lienzo, body.panel .lupa-rejilla .lienzo-grafica, body.panel .lupa-rejilla .lienzo-pulso { padding: 12px 12px 10px; }
  body.panel .lupa-rejilla .pulso, body.panel .lupa-rejilla .pulso .g-pulso { height: auto; min-height: 0; grid-template-rows: auto auto; }
  body.panel .lupa-rejilla .pulso-cajas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  body.panel .lupa-rejilla .pulso-cajas .pc { padding: 9px 11px; }
  body.panel .lupa-rejilla .pulso-cajas .pc > b { font-size: 1.1rem; }
  body.panel .lupa-rejilla .tabla { font-size: .76rem; }
  body.panel .lupa-rejilla .tabla td { padding: .42rem .55rem; }
  body.panel .lupa-rejilla .tabla th { padding: .3rem .55rem .45rem; }
  /* entra desde la derecha (keyframe propio: lupa-entra sigue valiendo en angosto) */
  @keyframes lupa-lado { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  body.panel .lupa[open] .lupa-caja { animation: lupa-lado .28s cubic-bezier(.22, 1, .36, 1); }
}
/* la lupa que trae DOS gráficas anchas (Facturado: barras espejo + tabla) puede pedir una hoja de 780 px
   con dos columnas añadiendo la clase «ancha-2» al <dialog>: class="lupa k-facturado ancha-2" */
@media (min-width: 1200px) and (min-height: 621px) {
  body.panel .lupa.ancha-2 .lupa-caja { width: min(780px, calc(100vw - 24px)); }
  body.panel .lupa.ancha-2 .lupa-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.panel .lupa.ancha-2 .lupa-rejilla .ancha { grid-column: 1 / -1; }
}

/* --- micro-interacciones: cortas (120–280 ms), la curva del modelo, sin rebote; ninguna si se pide calma --- */
body.panel .caja-blanca:not(.trabajando):hover { transform: translateY(-1px); }
body.panel .kpi.abre:active { transform: translateY(0); }
body.panel .kpi.abre .kpi-lupa { transition: opacity .16s, transform .16s; transform: translateY(2px); }
body.panel .kpi.abre:hover .kpi-lupa, body.panel .kpi.abre:focus-visible .kpi-lupa { opacity: 1; transform: none; }
body.panel .losas > a { transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease, background .16s ease; }
body.panel .losas > a:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(20, 26, 23, .02), 0 10px 18px -8px rgba(30, 40, 35, .24); }
body.panel .ventanas a, body.panel .pestana, body.panel .chip, body.panel .nav-panel a { transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
body.panel .tabla tbody tr td { transition: background .12s ease; }
/* las columnas ya crecen con gc-crece (16 ms de escalón); se acorta a .45 s y el brillo viaja con la barra */
body.panel .gc-barra, body.panel .ge-arriba > span, body.panel .ge-abajo > span { animation-duration: .45s; }
/* la lupa entra de lado (lupa-lado, en su bloque) y el velo funde en .2 s */
@keyframes velo-suave { from { opacity: 0; } to { opacity: 1; } }
body.panel .lupa[open]::backdrop { animation: velo-suave .2s ease; }
@media (prefers-reduced-motion: reduce) {
  body.panel .caja-blanca, body.panel .kpi, body.panel .kpi.abre, body.panel .losas > a, body.panel .boton-mini, body.panel .boton,
  body.panel .ventanas a, body.panel .pestana, body.panel .chip, body.panel .nav-panel a, body.panel .campo, body.panel .tabla tbody tr td,
  body.panel .gc-barra, body.panel .ge-arriba > span, body.panel .ge-abajo > span, body.panel .kpi.abre .kpi-lupa { transition: none; animation: none; }
  body.panel .caja-blanca:hover, body.panel .kpi.abre:hover, body.panel .losas > a:hover, body.panel .boton-mini:active, body.panel .boton:active, body.panel .kpi.abre .kpi-lupa { transform: none; }
  body.panel .lupa[open] .lupa-caja, body.panel .lupa[open]::backdrop { animation: none; }
  body.panel .gc-col:hover .gc-barra, body.panel .gc-col[role="button"]:hover .gc-barra, body.panel .ge-arriba > span:hover, body.panel .ge-abajo > span:hover { filter: none; }
}



/* =====================================================================
   RETOQUES DEL VIDRIO (19/09/2026, ~01:15)
   El dueño: «no me gusta ese relieve, parece un efecto del 2005; métele
   algo sutil, un gradient suave». Los insets duros de 1,5 px se
   sustituyen arriba por un solo brillo de 1 px y el filo pasa a un
   degradado más tenue. La banda de las cifras vuelve a ser la chispa
   limpia (la malla y el resplandor del área rica se veían mal a 60 px).
   En la hoja lateral las tarjetas van a su alto natural: se montaban.
   ===================================================================== */
body.panel .kpi .chispa, body.panel .kpis-5 .kpi .chispa {
  display: block; height: 52px; padding: 8px 0 0; flex: none; box-sizing: border-box;
  margin: auto -18px -14px; width: calc(100% + 36px);
  background: linear-gradient(180deg, transparent, rgba(220, 235, 226, .35));
}
body.panel .kpi .chispa .c-trazo { stroke-width: 1.6; }
body.panel .kpi .chispa .c-punto { stroke: #f6f4ee; }
@media (max-width: 760px) {
  body.panel .kpi .chispa, body.panel .kpis-5 .kpi .chispa { margin: auto -14px -12px; width: calc(100% + 28px); height: 40px; }
}
@media (min-width: 901px) and (min-height: 621px) {
  body.panel .lupa-rejilla { grid-template-rows: none; grid-auto-rows: max-content; align-content: start; }
  body.panel .lupa-rejilla > .caja-blanca, body.panel .lupa-rejilla > .caja-blanca:hover { display: block; height: auto; max-height: none; overflow: hidden; }
  body.panel .lupa-rejilla .desliza { display: block; overflow: visible; max-height: none; height: auto; }
  body.panel .lupa-rejilla > .caja-blanca > .grafica, body.panel .lupa-rejilla .pulso, body.panel .lupa-rejilla .pulso .g-pulso { height: auto; }
}


/* =====================================================================
   ÓRDENES DE SERVICIO EN LA MESA (19/09/2026)
   La lista del TMS con su factura, su guía y su medio de pago; la hoja
   de la O.S. se abre superpuesta en un marco (el visor de las capturas,
   con una hoja en vez de una foto) y desde ahí se imprime o se guarda
   en PDF. La factura y la guía abren su PDF oficial en su pestaña.
   ===================================================================== */
.os-tabla th.num, .os-tabla td.num { text-align: right; }
.os-tabla td.texto { max-width: 16rem; }
.os-tabla .os-cliente { display: block; font-size: .72rem; color: var(--texto-2); font-weight: 500; white-space: normal; line-height: 1.3; max-width: 16rem; }
.os-tabla a.doc { color: var(--marca-osc); font-weight: 700; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; }
.os-tabla a.doc svg { width: .85rem; height: .85rem; flex: none; opacity: .75; }
.os-tabla a.doc:hover, .os-tabla a.doc:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.os-tabla a.doc.hoja { color: var(--tinta); }
.os-tabla .medios { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 15rem; }
.os-tabla .medios .chip { white-space: nowrap; }
.os-tabla tr.fila-anulada td { color: var(--gris); text-decoration: line-through; }
.os-tabla tr.fila-anulada td .chip { text-decoration: none; }
.os-tabla .sin { color: var(--gris); }
.os-tabla td.doc-ref { white-space: nowrap; line-height: 1.25; }
.os-tabla td.ops { font-size: .74rem; line-height: 1.35; }
.os-tabla td.fotos { white-space: nowrap; }
.os-tabla td.fotos .adjunto-mini img { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--linea); }
.os-tabla td.fotos .adjunto-mini + .adjunto-mini { margin-left: .25rem; }
.os-tabla td.doc-ref .pista { font-size: .66rem; letter-spacing: .03em; }
.chip.destino { background: var(--ambar-suave); color: var(--ambar); }
.chip.ruta { background: var(--marca-suave); color: var(--marca-osc); }
.chip.preparando { background: var(--sup-3); color: var(--gris); }
.chip.entregada { background: var(--verde-suave); color: var(--verde-texto); }
.chip.anulada { background: var(--rojo-suave); color: var(--rojo); }
.filtros-os .campo.chico { max-width: 16rem; }
.filtros-os input[type="search"] { min-width: 14rem; }

/* el visor con una hoja adentro: el marco ocupa casi toda la pantalla */
.visor.visor-hoja[open] { display: grid; grid-template-rows: auto 1fr; place-items: stretch; padding: .75rem; gap: .5rem; }
.visor-hoja .visor-barra { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
.visor-hoja .visor-barra b { margin-right: auto; font-size: .9rem; color: #fff; }
.visor-hoja .visor-barra .boton-mini { background: #fff; color: var(--tinta); border-color: transparent; }
.visor-hoja .visor-barra .boton-mini:hover { background: var(--marca); color: #fff; }
.visor-hoja .visor-barra .visor-cerrar { position: static; }
.visor-hoja iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }


/* =====================================================================
   LOS ACCESOS DEL EQUIPO (19/09/2026)
   En Equipo, a qué paneles entra cada cuenta, por puerta: un fieldset
   en el alta y un plegable en cada fila, con las casillas atadas al
   formulario de la fila.
   ===================================================================== */
.accesos { grid-column: 1 / -1; border: 1px solid var(--linea); border-radius: var(--r-2); padding: .6rem .85rem .7rem; margin: 0; display: grid; gap: .45rem; }
.accesos > legend { padding: 0 .3rem; }
.accesos-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.accesos-grupo > b { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); min-width: 3.2rem; }
.acceso { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.acceso input { accent-color: var(--marca); }
.accesos-fila { margin-top: .4rem; font-size: .76rem; }
.accesos-fila > summary { cursor: pointer; color: var(--marca-osc); font-weight: 700; list-style: none; }
.accesos-fila > summary::-webkit-details-marker { display: none; }
.accesos-fila > summary::before { content: "›"; display: inline-block; margin-right: .3rem; transition: transform .15s; }
.accesos-fila[open] > summary::before { transform: rotate(90deg); }
.accesos-fila .accesos-grupo { margin-top: .35rem; }
.accesos-fila .acceso { font-size: .76rem; }


/* =====================================================================
   LA BÓVEDA (19/09/2026)
   El dinero por bolsillo (BBVA, BCP, Yape empresa, Yapes personales,
   efectivo, en caja) y la matriz personas × medios con la fila TOTAL
   primero. Un punto de color por medio; la columna «En caja» va separada
   por un filo porque no depende de la ventana.
   ===================================================================== */
.punto { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; vertical-align: 0; background: var(--m, var(--gris)); }
.punto.m-efectivo { --m: #3d9f80; }
.punto.m-bbva { --m: #0a3d91; }
.punto.m-bcp { --m: #1e6fd9; }
.punto.m-interbank { --m: #0f9d58; }
.punto.m-banco { --m: #6b7280; }
.punto.m-yape { --m: #7a3fd9; }
.punto.m-yape_personal { --m: #e0781e; }
.punto.m-otro { --m: #9aa0a6; }
.punto.m-caja { --m: #141a17; }
.boveda-losas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.boveda-losas > div > span { display: inline-flex; align-items: center; }
.boveda-losas > div.corte { border-left: 3px solid var(--tinta); }
.boveda-tabla th.num, .boveda-tabla td.num { text-align: right; white-space: nowrap; }
.boveda-tabla th .punto { margin-right: .3rem; }
.boveda-tabla td .pista { display: block; white-space: nowrap; }
.boveda-tabla td b { font-weight: 700; }
.boveda-tabla tr.fila-total td { background: var(--sup-2); border-bottom: 2px solid var(--linea-2); }
.boveda-tabla th.corte, .boveda-tabla td.corte { border-left: 2px solid var(--linea-2); padding-left: .7rem; }
.boveda-tabla td.corte .chip { display: inline-flex; margin-top: .15rem; }
.boveda-tabla td:first-child .pista { max-width: 18rem; white-space: normal; }
.boveda-tabla td:first-child .chip { margin-left: .3rem; vertical-align: 1px; }
.boveda-yapes td.num { text-align: right; white-space: nowrap; }
.boveda-yapes td .pista { display: block; }
.boveda-yapes td.quienes { display: flex; flex-wrap: wrap; gap: .25rem; }
.boveda-yapes tr.fila-grande td:first-child b { color: var(--rojo); }
.boveda-tesoreria { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
   UNA CAJA DE UNA FECHA A OTRA (19/09/2026)
   La pantalla de tesorería que pidió el dueño: una caja del TMS, un
   tramo del calendario y lo suyo en general. El selector de caja va
   dentro del rango de fechas (aquí sí se envuelve); en el tablero es un
   <select> que lleva a la pantalla y en el parte, un enlace junto al
   nombre de la caja.
   ===================================================================== */
.caja-tramo .rango-fechas { flex-wrap: wrap; justify-content: flex-end; }
.caja-tramo .rango-fechas select.campo.chico { width: auto; max-width: 14rem; min-width: 0; }
.selector-caja { width: auto; max-width: 13rem; }
.cab-pagina h1 .enlace-tramo { font-size: .78rem; font-weight: 700; color: var(--marca-osc); text-decoration: none; margin-left: .35rem; white-space: nowrap; letter-spacing: 0; }
.cab-pagina h1 .enlace-tramo:hover, .cab-pagina h1 .enlace-tramo:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.caja-jornadas td.dia { text-transform: capitalize; white-space: nowrap; }