/* =========================================================
   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;
  /* el azul pastel de lo ya recogido en la Recolección (27/09/2026) */
  --azul-pastel: #DCE8F8;
  --azul-borde: #9DB8E3;
  --azul-texto: #2C5A9C;
  --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;

  /* --- las sedes del árbol de Equipo: todas grises, cada una con una
     pizca de color propia (pizarra, salvia, arena, malva, agua, arcilla,
     oliva, índigo) para distinguirlas sin que ninguna grite. Llevan letra
     blanca encima: son grises de peso medio --- */
  --sede-0: #5E6A78;
  --sede-1: #62705F;
  --sede-2: #7A6B5C;
  --sede-3: #6F6379;
  --sede-4: #58706E;
  --sede-5: #7B6461;
  --sede-6: #6C6C57;
  --sede-7: #5F6582;

  /* --- las etiquetas de los cargos (Tesorería, Caja…): un fondo muy
     suave y su letra del mismo color, más oscura. Ocho, distintas entre sí
     y de los grises de las sedes --- */
  --etq-0-fondo: #E6EEF8; --etq-0-tinta: #2F5B8A;
  --etq-1-fondo: #E3F2EA; --etq-1-tinta: #2C6B4C;
  --etq-2-fondo: #F7EEDB; --etq-2-tinta: #7A5A17;
  --etq-3-fondo: #EEE8F6; --etq-3-tinta: #5A4585;
  --etq-4-fondo: #F7E6EA; --etq-4-tinta: #8A3A52;
  --etq-5-fondo: #E0F1F1; --etq-5-tinta: #1F6363;
  --etq-6-fondo: #F9EADF; --etq-6-tinta: #8A4B1F;
  --etq-7-fondo: #E8ECEF; --etq-7-tinta: #44525E;

  /* --- el dorado de los roles superiores en el árbol --- */
  --oro: #B08A2E;
  --oro-2: #DDBE6A;
  --oro-osc: #7C5F17;

  /* --- 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 .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); }
/* 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): las tres gráficas de tesorería y
       las cajas de oficina atenuadas en el tablero --- */
.kpi.kpi-ambar b { color: var(--ambar); }
/* el botón grande del panel: hasta el 06/09 solo existía el chico */
.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; }
.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 la revisión de la caja, no adorna: verde con el visto
   bueno, ámbar cuando está observada, arena mientras nadie la revisó
   —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.observado { background: #DFA245; }
.celda.por_revisar { 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; }
.visor .visor-paso {
  position: fixed; top: 50%; transform: translateY(-50%); width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.visor .visor-paso:hover { background: rgba(255, 255, 255, .3); }
.visor .visor-paso[hidden] { display: none; }
.visor .visor-ant { left: 1rem; }
.visor .visor-sig { right: 1rem; }
.visor .visor-cuenta { position: fixed; top: 1.2rem; left: 50%; transform: translateX(-50%); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }



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


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

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

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


/* =====================================================================
   EL EQUIPO: EL ÁRBOL Y EL CAJÓN (22/09/2026)
   Arriba la casa con su dueño; de ella cuelgan las áreas y de cada área
   su gente, cada persona un círculo con la misma silueta. El árbol es
   fijo: solo la persona se arrastra a su lugar. Las líneas son los bordes de
   cada rama (el organigrama en CSS puro, sin librería). A la derecha, el
   cajón con la ficha que se tocó; el engranaje abre roles y cajas.
   ===================================================================== */
.figuras { position: absolute; width: 0; height: 0; overflow: hidden; }

body.panel a.eq-boton { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--sup-1); border: 1px solid var(--linea); color: var(--texto-2); text-decoration: none; }
body.panel a.eq-boton:hover, body.panel a.eq-boton:focus-visible { border-color: var(--marca); color: var(--marca); }
.eq-boton svg { width: 1.15rem; height: 1.15rem; }

/* los tonos de las ramas: cada rol el suyo, atado a su id */
.tono-0 { --tono: var(--marca); }
.tono-1 { --tono: var(--m-banco); }
.tono-2 { --tono: var(--m-yape); }
.tono-3 { --tono: var(--m-yape_personal); }
.tono-4 { --tono: var(--marca-osc); }
.tono-5 { --tono: var(--texto-2); }
.tono-casa { --tono: var(--tinta); }
/* las áreas del árbol (las sedes): su gris con su pizca, atado a su id (Area::tinte) */
.tinte-0 { --tono: var(--sede-0); }
.tinte-1 { --tono: var(--sede-1); }
.tinte-2 { --tono: var(--sede-2); }
.tinte-3 { --tono: var(--sede-3); }
.tinte-4 { --tono: var(--sede-4); }
.tinte-5 { --tono: var(--sede-5); }
.tinte-6 { --tono: var(--sede-6); }
.tinte-7 { --tono: var(--sede-7); }
.tono-nadie { --tono: var(--gris); }

.arbol-marco { position: relative; overflow-x: auto; padding: 1.6rem .75rem 2.2rem; border-radius: var(--r-3);
  background-color: var(--sup-1); border: 1px solid var(--linea);
  background-image: radial-gradient(var(--linea) 1px, transparent 1px); background-size: 22px 22px; }
.arbol { display: flex; justify-content: center; min-width: max-content; }
.arbol ul { position: relative; display: flex; justify-content: center; margin: 0; padding: 1.6rem 0 0; }
.arbol > ul { padding-top: 0; }
.arbol li { position: relative; list-style: none; display: flex; flex-direction: column; align-items: center; padding: 1.6rem .38rem 0; }
.arbol > ul > li { padding-top: 0; }
/* los hilos: cada rama dibuja su mitad del travesaño y su bajada */
.arbol li::before, .arbol li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 1.6rem; border-top: 2px solid var(--linea-2); }
.arbol li::after { right: auto; left: 50%; border-left: 2px solid var(--linea-2); }
.arbol li:only-child::before, .arbol li:only-child::after, .arbol > ul > li::before, .arbol > ul > li::after { display: none; }
.arbol li:only-child { padding-top: 0; }
.arbol li:first-child::before, .arbol li:last-child::after { border: 0 none; }
.arbol li:last-child::before { border-right: 2px solid var(--linea-2); border-radius: 0 12px 0 0; }
.arbol li:first-child::after { border-radius: 12px 0 0 0; }
.arbol ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 1.6rem; border-left: 2px solid var(--linea-2); }

.nodo-casa { --tono: var(--tinta); display: grid; justify-items: center; gap: .6rem; padding: .95rem 1.3rem 1rem;
  border-radius: 1.2rem; background: var(--sup-1); border: 2px solid var(--tinta); box-shadow: var(--sombra-2); }
.casa-sello { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--marca); }
.casa-sello img { width: 1.65rem; height: 1.65rem; }
.nodo-casa > b { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; color: var(--tinta); }

.nodo-area { display: grid; justify-items: center; gap: .6rem; min-width: 6.4rem; max-width: 12rem; padding: .55rem .55rem .7rem;
  border-radius: 1.1rem; background: var(--sup-1); border: 2px solid var(--tono); }
/* un rol sin nadie: solo su etiqueta hueca, sin caja alrededor */
.nodo-area.vacio { min-width: 0; padding: 0; border: 0; background: none; }
body.panel .area-nombre { display: inline-block; max-width: 100%; padding: .3rem .8rem; border-radius: 1rem; background: var(--tono); color: var(--sup-1);
  font-size: .74rem; font-weight: 800; line-height: 1.25; letter-spacing: .01em; text-align: center; text-decoration: none; }
body.panel a.area-nombre:hover, body.panel a.area-nombre:focus-visible { box-shadow: 0 0 0 4px var(--marca-suave); }
body.panel .nodo-area.vacio .area-nombre { background: var(--sup-1); color: var(--tono); box-shadow: inset 0 0 0 1.5px var(--tono); }

.nodo-gente { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .2rem; max-width: 10.8rem; }
.nodo-casa .nodo-gente { max-width: 16.5rem; }
body.panel a.miembro { display: grid; justify-items: center; align-content: start; gap: .3rem; width: 5.2rem; padding: .2rem 0; border-radius: .8rem;
  color: var(--tinta); text-decoration: none; }
.miembro-circulo { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; flex: none;
  background: var(--tono, var(--marca)); color: var(--sup-1); transition: transform .15s, box-shadow .15s; }
.miembro-circulo svg { width: 1.85rem; height: 1.85rem; fill: currentColor; }
/* el nombre entero en dos renglones como mucho, sin cortarlo a la mitad */
.miembro-nombre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%;
  font-size: .7rem; font-weight: 700; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.miembro:hover .miembro-circulo, .miembro:focus-visible .miembro-circulo { transform: translateY(-2px); box-shadow: 0 0 0 4px var(--marca-suave); }
.miembro.es .miembro-circulo { box-shadow: 0 0 0 3px var(--sup-1), 0 0 0 5px var(--tono, var(--marca)); }
.miembro.espera .miembro-circulo { outline: 2px dashed var(--ambar-2); outline-offset: 3px; }
.miembro.apagada .miembro-circulo { background: var(--sup-3); color: var(--gris); }
.miembro.apagada .miembro-nombre { color: var(--gris); }
.miembro-rol { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -.15rem;
  font-size: .62rem; font-weight: 600; line-height: 1.2; color: var(--gris); text-align: center; }
/* sin cuenta o sin rol: solo su persona, en gris */
.miembro.gris .miembro-circulo, .miembro-circulo.gris { background: var(--sup-3); color: var(--gris); }
.miembro.gris .miembro-nombre { color: var(--texto-2); font-weight: 600; }
/* un rol superior: dorado, dentro de su sede */
.miembro.oro .miembro-circulo, .miembro-circulo.oro { background: linear-gradient(145deg, var(--oro), var(--oro-osc)); color: var(--sup-1);
  box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 3.5px var(--oro-2); }
.miembro.oro:hover .miembro-circulo, .miembro.oro:focus-visible .miembro-circulo { box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 3.5px var(--oro-2), 0 0 0 7px var(--marca-suave); }
/* el dorado abierto en el cajón, y el dorado que aún no puso su clave */
.miembro.oro.es .miembro-circulo { box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 3.5px var(--oro-2), 0 0 0 6px var(--oro-osc); }
.miembro.oro.espera .miembro-circulo { outline-color: var(--oro-osc); outline-offset: 6px; }
.miembro.oro .miembro-rol { color: var(--oro-osc); font-weight: 700; }
/* chico: aparte y en la bandeja */
body.panel a.miembro.chico { width: 4.4rem; gap: .2rem; }
.miembro.chico .miembro-circulo { width: 2.2rem; height: 2.2rem; }
.miembro.chico .miembro-circulo svg { width: 1.35rem; height: 1.35rem; }
.miembro.chico .miembro-nombre { font-size: .64rem; }
.miembro.chico .miembro-rol { font-size: .58rem; }
/* la etiqueta del rol, bajo el nombre: el mismo rol, el mismo color */
.miembro-etiqueta { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  margin-top: -.05rem; padding: .1rem .45rem; border-radius: 999px; background: var(--etq-fondo); color: var(--etq-tinta);
  font-size: .6rem; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
.miembro.chico .miembro-etiqueta { font-size: .56rem; padding: .08rem .4rem; }
.etq-0 { --etq-fondo: var(--etq-0-fondo); --etq-tinta: var(--etq-0-tinta); }
.etq-1 { --etq-fondo: var(--etq-1-fondo); --etq-tinta: var(--etq-1-tinta); }
.etq-2 { --etq-fondo: var(--etq-2-fondo); --etq-tinta: var(--etq-2-tinta); }
.etq-3 { --etq-fondo: var(--etq-3-fondo); --etq-tinta: var(--etq-3-tinta); }
.etq-4 { --etq-fondo: var(--etq-4-fondo); --etq-tinta: var(--etq-4-tinta); }
.etq-5 { --etq-fondo: var(--etq-5-fondo); --etq-tinta: var(--etq-5-tinta); }
.etq-6 { --etq-fondo: var(--etq-6-fondo); --etq-tinta: var(--etq-6-tinta); }
.etq-7 { --etq-fondo: var(--etq-7-fondo); --etq-tinta: var(--etq-7-tinta); }

/* aparte: chico, colgado a la izquierda de la casa. Tres columnas y las de los
   costados iguales, para que la casa siga al centro, encima de sus ramas */
.casa { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.casa > .nodo-casa { grid-column: 2; grid-row: 1; }
.casa-lado { grid-column: 1; grid-row: 1; justify-self: end; display: flex; align-items: center; }
.lado-gente { display: flex; gap: .2rem; padding: .3rem .25rem; border-radius: 1rem; background: var(--sup-1);
  border: 1px dashed var(--linea-2); --tono: var(--texto-2); }
.lado-hilo { width: 1.3rem; border-top: 2px solid var(--linea-2); }
/* en el teléfono no cabe al costado: va encima, colgado igual */
@media (max-width: 560px) {
  .casa { grid-template-columns: auto; justify-items: center; }
  .casa > .nodo-casa { grid-column: 1; grid-row: 2; }
  .casa-lado { justify-self: center; flex-direction: column; }
  .lado-hilo { width: 0; height: .9rem; border-top: 0; border-left: 2px solid var(--linea-2); }
}

/* la bandeja: quien todavía no tiene área */
.arbol-bandeja { display: grid; gap: .5rem; margin: 1.8rem .5rem 0; padding-top: 1rem; border-top: 1px dashed var(--linea-2); --tono: var(--gris); }
.arbol-bandeja > b { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.bandeja-gente { display: flex; flex-wrap: wrap; gap: .45rem .15rem; }

/* EL MAPA: tocar abre la ficha a la derecha; mantener y arrastrar lleva a otra área */
body.panel a.miembro[data-globo] { cursor: grab; -webkit-user-drag: none; }
.arbol-marco.arrastrando, .arbol-marco.arrastrando * { cursor: grabbing; user-select: none; }
.miembro.arrastrada, .miembro.soltada { opacity: .35; }
.miembro.fantasma { position: fixed; left: 0; top: 0; z-index: 90; margin: 0; pointer-events: none; }
.miembro.fantasma .miembro-circulo { transform: scale(1.08); box-shadow: var(--sombra-2); }
.arbol-marco [data-destino] { transition: outline-color .12s, box-shadow .12s; }
.arbol-marco.arrastrando [data-destino] { outline: 1.5px dashed var(--linea-2); outline-offset: 5px; }
.arbol-marco.arrastrando [data-destino].sugerida { outline: 2px dashed var(--marca); outline-offset: 5px; }
.arbol-marco.arrastrando [data-destino].iman { outline: 2.5px solid var(--tono, var(--marca)); outline-offset: 6px; box-shadow: 0 0 0 10px var(--marca-suave); }
.arbol-bandeja.vacia { display: none; }
.arbol-marco.arrastrando .arbol-bandeja.vacia { display: grid; min-height: 4rem; }
/* la recién creada llama la atención: espera a que la lleven a su lugar */
.miembro.recien .miembro-circulo { animation: recien 1.3s ease-out 4; }
@keyframes recien { from { box-shadow: 0 0 0 0 var(--marca); } to { box-shadow: 0 0 0 16px var(--marca-suave); } }
@media (prefers-reduced-motion: reduce) { .miembro.recien .miembro-circulo { animation: none; box-shadow: 0 0 0 4px var(--marca); } }

/* el aviso de lo que se hizo en el mapa: abajo, a la vista, un momento */
.mapa-aviso { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 80; transform: translateX(-50%);
  display: flex; align-items: center; gap: .7rem; max-width: min(34rem, calc(100vw - 2rem)); padding: .65rem .8rem .65rem 1rem;
  border-radius: var(--r-3); background: var(--tinta); color: var(--sup-1); font-size: .82rem; font-weight: 600; box-shadow: var(--sombra-2); }
.mapa-aviso.error { background: var(--rojo); }
.mapa-aviso[hidden] { display: none; }
.mapa-aviso button { border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: .8; }
.mapa-aviso button:hover, .mapa-aviso button:focus-visible { opacity: 1; }

/* LA FICHA, en el cajón: renglones grandes en tarjetas, como los ajustes de
   un teléfono; letra que se lee, botones que se tocan, nada de aire suelto */
.ficha { display: grid; gap: .75rem; }
.ficha-cab { display: flex; align-items: center; gap: .9rem; margin: 0 2.8rem .15rem 0; }
.ficha-quien { min-width: 0; }
.ficha-quien h2 { margin: 0; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }
.ficha-quien p { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .3rem 0 0; font-size: .86rem; color: var(--texto-2); }
.ficha-quien .miembro-etiqueta { font-size: .72rem; padding: .16rem .55rem; }
.ficha-tarjeta { border: 1px solid var(--linea); border-radius: var(--r-3); background: var(--sup-1); overflow: hidden; }
.ficha-renglon { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); align-items: center; gap: .6rem;
  min-height: 3.2rem; padding: .4rem .55rem .4rem .9rem; border-top: 1px solid var(--linea); }
.ficha-tarjeta > :first-child, .ficha-tarjeta > .cuenta:first-child > :first-child { border-top: 0; }
.ficha-rotulo { font-size: .86rem; font-weight: 700; color: var(--texto-2); }
body.panel .ficha .campo { width: 100%; min-height: 2.6rem; font-size: .95rem; border-radius: var(--r-2); }
.ficha-renglon-titulo { min-height: 2.4rem; background: var(--sup-2); }
.ficha-renglon-titulo .ficha-rotulo { font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
/* la cuenta */
.cuenta-correo-renglon { grid-template-columns: minmax(0, 1fr) auto; }
.cuenta-correo { font-size: .92rem; font-weight: 700; overflow-wrap: anywhere; }
.cuenta-estado { display: flex; align-items: center; gap: .35rem; }
.ficha-dato { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-height: 0; padding-top: .55rem; padding-bottom: .55rem;
  font-size: .84rem; color: var(--texto-2); }
.ficha-cerrada { grid-template-columns: minmax(0, 1fr) auto; font-size: .84rem; color: var(--gris); }
.ficha-darle { display: grid; gap: .5rem; padding: .7rem .9rem .9rem; }
.ficha-nota { display: grid; gap: .25rem; padding: .8rem .9rem 0; font-size: .9rem; }
.ficha-nota span { color: var(--texto-2); }
/* los botones grandes: sutiles, anchos, con su palabra */
.ficha-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .5rem; padding: .7rem .9rem .9rem; border-top: 1px solid var(--linea); }
.ficha-botones form { display: grid; }
.ficha-boton { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; min-height: 2.8rem; padding: .5rem 1rem;
  border: 1px solid var(--linea-2); border-radius: var(--r-2); background: var(--sup-1); color: var(--tinta);
  font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; list-style: none; }
.ficha-boton::-webkit-details-marker { display: none; }
.ficha-boton:hover, .ficha-boton:focus-visible { border-color: var(--marca); color: var(--marca-osc); outline: none; box-shadow: var(--anillo); }
.ficha-boton.principal { background: var(--tinta); border-color: var(--tinta); color: var(--sup-1); }
.ficha-boton.principal:hover, .ficha-boton.principal:focus-visible { background: var(--marca-osc); border-color: var(--marca-osc); color: var(--sup-1); }
.ficha-boton.peligro { color: var(--rojo); border-color: var(--rojo-suave); }
.ficha-boton.peligro:hover, .ficha-boton.peligro:focus-visible { border-color: var(--rojo); color: var(--rojo); }
.ficha-boton.peligro.lleno { background: var(--rojo); border-color: var(--rojo); color: var(--sup-1); }
/* el botón que se abre con un dato: el nombre a la izquierda, el dato a la derecha, sutil */
.ficha-boton.ficha-boton-dato { justify-content: space-between; padding-left: 1.1rem; padding-right: 2.2rem; position: relative; }
.ficha-boton-meta { font-size: .78rem; font-weight: 500; color: var(--gris); font-variant-numeric: tabular-nums; }
.ficha-boton.ficha-boton-dato::after { content: ""; position: absolute; right: 1rem; top: 50%; width: .42rem; height: .42rem;
  border-right: 1.6px solid var(--gris); border-bottom: 1.6px solid var(--gris); transform: translateY(-65%) rotate(45deg); transition: transform .15s ease; }
.ficha-desplegable[open] > .ficha-boton.ficha-boton-dato::after { transform: translateY(-25%) rotate(-135deg); }
/* la clave inicial: abajo de su cuenta, una sola vez */
.clave-inicial { display: grid; gap: .1rem; margin: 0 .9rem .9rem; padding: .35rem .4rem .5rem .9rem; border: 1px solid var(--ambar-2);
  border-radius: var(--r-2); background: var(--ambar-suave); }
.clave-inicial .ficha-renglon { border-top: 0; min-height: 2.7rem; padding: 0; grid-template-columns: 6.2rem minmax(0, 1fr) auto; }
.clave-inicial b { font-size: 1.05rem; letter-spacing: .03em; overflow-wrap: anywhere; }
.clave-inicial .ficha-boton { min-height: 2.3rem; padding: .3rem .8rem; }
.clave-inicial p { margin: 0; font-size: .8rem; font-weight: 700; color: var(--ambar); }
/* su rol no le da Mi caja: la caja es suya, pero no le abre nada */
.caja-sin-rol { color: var(--gris); }
/* los logins del Titanic */
.ficha-logins { display: flex; flex-wrap: wrap; gap: .4rem; }
.ficha-logins .chip.login { padding: .4rem .7rem; font-size: .8rem; }
.ficha-logins .chip.login.suspendido { color: var(--gris); border-style: dashed; }
/* su libro: una línea por hecho, compacta */
.ficha-desplegado.historia { display: block; margin: 0; padding: .3rem .9rem; list-style: none; max-height: 22rem; overflow-y: auto; }
.historia li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; padding: .4rem 0; border-top: 1px solid var(--linea); font-size: .84rem; }
.historia li:first-child { border-top: 0; }
.historia-cuando { grid-row: span 2; font-size: .74rem; color: var(--gris); padding-top: .1rem; }
.historia-que { color: var(--tinta); overflow-wrap: anywhere; }
.historia-quien { font-size: .74rem; color: var(--gris); }
.historia li.historia-mas { display: block; font-size: .78rem; color: var(--gris); }
/* lo que hizo: un renglón por cosa, cuánto y entre qué fechas */
.ficha-desplegado.hizo { gap: 0; padding: .3rem .9rem .7rem; }
.hizo-renglon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .6rem; padding: .45rem 0; border-top: 1px solid var(--linea); }
.hizo-renglon:first-child { border-top: 0; }
.hizo-que { font-size: .88rem; color: var(--tinta); }
.hizo-cuanto { font-size: .95rem; font-variant-numeric: tabular-nums; text-align: right; }
.hizo-cuando { grid-column: 1 / -1; font-size: .74rem; color: var(--gris); }
.hizo-cajas { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .5rem; }
/* lo que se abre al tocarlo */
.ficha-desplegable > .ficha-boton { margin: 0; }
.ficha-desplegable[open] > .ficha-boton { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ficha-desplegado { display: grid; gap: .5rem; padding: .7rem; border: 1px solid var(--linea-2); border-top: 0;
  border-radius: 0 0 var(--r-2) var(--r-2); background: var(--sup-2); }


/* de baja, en el engranaje */
.bajas { display: grid; }
.bajas-grupo { margin-top: .9rem; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); }
.bajas-grupo:first-child { margin-top: 0; }
.baja-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--linea); }
body.panel a.baja-nombre { font-weight: 700; color: var(--tinta); text-decoration: none; }
body.panel a.baja-nombre:hover { color: var(--marca); }

/* el cajón del costado */
.cajon { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(30rem, 100vw); overflow-y: auto;
  padding: calc(1.3rem + env(safe-area-inset-top, 0px)) 1.4rem calc(2rem + env(safe-area-inset-bottom, 0px));
  background: var(--sup-1); border-left: 1px solid var(--linea); box-shadow: var(--sombra-2); }
body.panel a.cajon-cerrar { position: absolute; top: calc(.85rem + env(safe-area-inset-top, 0px)); right: .85rem; display: grid; place-items: center;
  width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--sup-3); color: var(--texto-2); cursor: pointer; }
body.panel a.cajon-cerrar:hover, body.panel a.cajon-cerrar:focus-visible { color: var(--tinta); }
.cajon-cerrar svg { width: 1rem; height: 1rem; }
.cajon > .aviso-ok, .cajon > .aviso-error { margin: 0 2.6rem 1rem 0; }
.cajon-cab { display: flex; align-items: center; gap: .85rem; margin: .1rem 2.6rem 1rem 0; }
.cajon-cab h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.cajon-cab p { margin: .15rem 0 0; font-size: .8rem; color: var(--gris); overflow-wrap: anywhere; }
.miembro-circulo.grande { width: 3.4rem; height: 3.4rem; }
.miembro-circulo.grande svg { width: 2rem; height: 2rem; }
.cajon-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 1.1rem; }
.cajon-chips a.chip { text-decoration: none; }
.cajon-dato { font-size: .74rem; color: var(--gris); }
.cajon-form { display: grid; gap: .9rem; }
.cajon-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: end; }
.cajon-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .9rem; }
.cajon-reinvitar { display: flex; align-items: center; gap: .35rem; margin-right: auto; font-size: .76rem; color: var(--gris); }
.cajon-reinvitar input { accent-color: var(--marca); }
.cajon-bloque { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--linea); }
.cajon-bloque > b { font-size: .88rem; }
.cajon-seccion { display: grid; gap: .9rem; margin-top: 1.1rem; }
.cajon-seccion .cuenta { display: grid; gap: .75rem; padding: .85rem .9rem; border: 1px solid var(--linea); border-radius: var(--r-2); background: var(--sup-2); }
.cuenta-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.cuenta-separar { margin-left: auto; }
.cuenta-separar button { border: 0; padding: 0 .2rem; background: none; color: var(--gris); font-size: 1rem; line-height: 1; cursor: pointer; }
.cuenta-separar button:hover, .cuenta-separar button:focus-visible { color: var(--rojo); }
.cuenta-correo { margin-right: .3rem; font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.cuenta-rol { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.cuenta-rol > b { font-size: .85rem; }
.cajon-chips.logins { margin: 0; }
.chip.login { gap: .3rem; }
.chip.login form { display: inline; }
.chip.login button { border: 0; padding: 0 .1rem; background: none; color: var(--gris); font-size: .8rem; line-height: 1; cursor: pointer; }
.chip.login button:hover, .chip.login button:focus-visible { color: var(--rojo); }
.cajon-fila { display: flex; gap: .5rem; align-items: center; }
.cajon-fila .campo { flex: 1; min-width: 0; }
body.panel .boton-mini.boton-quitar { background: var(--sup-1); color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo-suave); }
.cajon-quitar { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--linea-2); }
.cajon-entra { font-size: .76rem; line-height: 1.5; color: var(--gris); }
body.panel a.cajon-enlace { font-size: .76rem; font-weight: 700; color: var(--marca); text-decoration: none; white-space: nowrap; }

/* lo que guarda el engranaje */
.cajon-pestanas { display: flex; gap: .25rem; width: max-content; max-width: calc(100% - 2.6rem); margin: 0 0 1.1rem;
  padding: .25rem; border-radius: 999px; background: var(--sup-3); }
body.panel .cajon-pestanas a { padding: .38rem .95rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--texto-2); text-decoration: none; }
body.panel .cajon-pestanas a.es { background: var(--sup-1); color: var(--tinta); box-shadow: var(--sombra-1); }
.roles-lista { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.2rem; }
body.panel a.rol-boton { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .75rem; border-radius: 999px;
  border: 1.5px solid var(--tono, var(--linea-2)); background: var(--sup-1); color: var(--tinta);
  font-size: .76rem; font-weight: 700; text-decoration: none; }
body.panel a.rol-boton small { font-size: .68rem; font-weight: 600; color: var(--gris); }
body.panel a.rol-boton[class*="etq-"] { background: var(--etq-fondo); color: var(--etq-tinta); border-color: var(--etq-fondo); }
body.panel a.rol-boton.es { background: var(--tono); color: var(--sup-1); }
body.panel a.rol-boton[class*="etq-"].es { background: var(--etq-tinta); border-color: var(--etq-tinta); color: var(--sup-1); }
body.panel a.rol-boton.es small { color: var(--sup-1); }
body.panel a.rol-boton.apagado { opacity: .55; }
body.panel a.rol-boton.superior { --tono: var(--oro-osc); box-shadow: inset 0 0 0 1.5px var(--oro-2); }
.acceso.acceso-superior { color: var(--oro-osc); font-weight: 700; }
body.panel a.rol-boton.nuevo { --tono: var(--marca); border-style: dashed; color: var(--marca); }
body.panel a.rol-boton.nuevo.es { color: var(--sup-1); }
.rol-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; margin-bottom: .95rem; }
.rol-cab h2 { margin: 0; font-size: 1.1rem; }
.rol-cab p { margin: .1rem 0 0; font-size: .74rem; color: var(--gris); }
.rol-mover form { display: flex; gap: .3rem; }
.rol-mover button { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--linea); background: var(--sup-1); color: var(--texto-2); cursor: pointer; }
.rol-mover button:hover, .rol-mover button:focus-visible { border-color: var(--marca); color: var(--marca); }
.rol-mover svg { width: 1rem; height: 1rem; }
.cajas-lista { display: grid; }
.caja-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto 9.5rem; align-items: center; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--linea); }
.caja-fila:first-child { border-top: 0; }
.caja-fila.apagada .caja-quien { opacity: .6; }
.caja-quien { display: grid; min-width: 0; }
.caja-quien b { font-size: .82rem; }
.caja-quien small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; color: var(--gris); }
.caja-fila .caja-jornadas { font-size: .78rem; color: var(--gris); }

@media (max-width: 560px) {
  .cajon-campos { grid-template-columns: 1fr; }
  .caja-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .caja-fila form { grid-column: 1 / -1; }
}

/* LAS PUERTAS DE UN ROL (22/09, noche): un interruptor por puerta; abierta,
   enseña sus pantallas y sus poderes; cerrada, no guarda nada de lo suyo */
.puertas { display: grid; gap: .55rem; }
.puerta { border: 1px solid var(--linea); border-radius: var(--r-2); padding: .6rem .8rem; background: var(--sup-1); }
.puerta.abierta { border-color: var(--marca); background: var(--sup-2); }
.puerta-llave { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.puerta-llave b { font-size: .86rem; font-weight: 800; }
.puerta-llave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puerta-interruptor { position: relative; flex: none; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: var(--linea-2); transition: background .15s; }
.puerta-interruptor::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--sup-1); box-shadow: var(--sombra-1); transition: transform .15s; }
.puerta-llave input:checked + .puerta-interruptor { background: var(--marca); }
.puerta-llave input:checked + .puerta-interruptor::after { transform: translateX(.9rem); }
.puerta-llave input:focus-visible + .puerta-interruptor { box-shadow: 0 0 0 3px var(--marca-suave); }
.puerta-dentro { display: grid; gap: .5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--linea); }
/* cerrada, lo de dentro no se ve (el display de arriba le ganaría a [hidden]) */
.puerta-dentro[hidden] { display: none; }
.puerta-dentro .poderes { padding-top: .5rem; border-top: 1px dashed var(--linea); }
.puerta-general { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .2rem .2rem 0; }
/* el color de la etiqueta del rol: se elige viendo la etiqueta misma */
.rol-colores { display: flex; flex-wrap: wrap; gap: .3rem; }
.rol-color { position: relative; cursor: pointer; }
.rol-color input { position: absolute; opacity: 0; pointer-events: none; }
.rol-color span { display: inline-block; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .18rem .55rem;
  border-radius: 999px; background: var(--etq-fondo); color: var(--etq-tinta); font-size: .68rem; font-weight: 700; box-shadow: inset 0 0 0 1px var(--sup-1); }
.rol-color input:checked + span { box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 3.5px var(--etq-tinta); }
.rol-color input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 3px; }
/* de baja: su ficha queda */
.cajon-baja { display: grid; gap: .45rem; margin: 0 0 1.1rem; padding: .8rem .9rem; border-radius: var(--r-2); background: var(--sup-3); }
.cajon-baja > b { font-size: .86rem; }
.cajon-baja > span { font-size: .78rem; color: var(--texto-2); }
.cajon-quitar .campo { flex: 1; min-width: 0; }
.cuenta-cerrada { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .9rem; border: 1px dashed var(--linea-2);
  border-radius: var(--r-2); font-size: .8rem; color: var(--gris); }

/* las casillas de un rol: sus pantallas por puerta y sus poderes */
.accesos { 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); }


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

/* --- MI CAJA EN HOJA (25/09/2026). El dueño: «como una app de datos
       reales, como un Excel, todo compactado… no necesito que se vea
       bonito, necesito seriedad», y que no haga falta deslizar. Solo en
       Mi caja (body.mi-caja): filas finas, cifras tabulares, bordes de
       un pixel y ninguna tarjeta; cada hoja se desplaza en su marco.
       Misma tarde: fuera los atajos de 7/30/12 meses («de tal día a tal
       día»), una sola gráfica clara y una hoja a la vez --- */
body.panel:is(.mi-caja, .en-hoja) .lienzo-panel { max-width: 112rem; padding: .75rem 1.1rem .8rem; }
body.panel:is(.mi-caja, .en-hoja) .lienzo-panel > .aviso-ok, body.panel:is(.mi-caja, .en-hoja) .lienzo-panel > .aviso-error { margin-bottom: .5rem; }
.mc-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mc-titulo { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; min-width: 0; }
.mc-titulo h1 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--tinta); }
.mc-meta { font-size: .8rem; color: var(--texto-2); }
.mc-mandos { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* LA CABECERA DEL DÍA, SOBRIA (25/09/2026): la hoja de calendario (mes
   y número), el día de la semana en versalitas, la fecha entera y, a la
   derecha, el control segmentado ‹ Hoy › anclado: nada se corre */
.mc-dia-nav { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.mc-hoja-cal {
  flex: none; width: 2.85rem; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden;
  background: var(--sup-1); text-align: center; box-shadow: 0 1px 2px rgba(15, 31, 41, .07);
}
.mc-hoja-mes { display: block; background: var(--marca); color: #FFFFFF; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .14rem 0 .12rem; }
.mc-hoja-num { display: block; font-size: 1.28rem; font-weight: 800; line-height: 1.35; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mc-fecha-txt { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.mc-dow { font-size: .82rem; font-weight: 600; color: var(--texto-2); }
.mc-hoja-anio { display: block; font-size: .56rem; font-weight: 700; color: var(--gris); padding-bottom: .12rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.mc-tramo-cab { display: flex; align-items: center; gap: .6rem; }
.mc-al { font-size: .82rem; font-weight: 700; color: var(--gris); }
.mc-tramo-dias { display: grid; justify-items: start; line-height: 1.05; margin-left: .5rem; padding-left: .85rem; border-left: 1px solid var(--linea); }
.mc-tramo-dias b { font-size: 1.3rem; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mc-tramo-dias span { font-size: .72rem; font-weight: 600; color: var(--texto-2); }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mc-fecha { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0; color: var(--tinta); white-space: nowrap; transition: opacity .12s; }
.mc-dia-nav.cargando .mc-fecha { opacity: .45; }
.mc-seg { display: inline-flex; height: 2rem; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; background: var(--sup-1); }
.mc-seg > a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; padding: 0 .7rem;
  font-size: .8rem; font-weight: 700; color: var(--texto-2); text-decoration: none; transition: background .12s, color .12s;
}
.mc-seg > a + a { border-left: 1px solid var(--linea); }
.mc-seg > a:hover { background: var(--sup-2); color: var(--tinta); }
.mc-seg > a:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.mc-seg > a.mc-flecha { padding: 0; width: 2.1rem; }
.mc-seg > a[aria-disabled="true"] { color: color-mix(in srgb, var(--gris) 35%, transparent); pointer-events: none; }
.mc-seg > a.mc-a-hoy.es-hoy { color: var(--marca-osc); background: color-mix(in srgb, var(--marca) 9%, var(--sup-1)); }
.mc-seg > a.actual { color: var(--marca-osc); background: color-mix(in srgb, var(--marca) 9%, var(--sup-1)); }
@media (max-width: 640px) {
  /* una caja en el teléfono: el nombre se lee entero, junto a su hoja de calendario */
  .mc-dia-nav:has(.pv-nombre) { flex-wrap: wrap; }
  .mc-dia-nav .pv-nombre { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .mc-fecha, .mc-seg > a { transition: none; } }

/* Hoy y el tramo: dos botones de la misma familia */
.mc-hoy, .mc-boton, .mc-rango > summary {
  display: inline-flex; align-items: center; gap: .45rem; height: 2rem; padding: 0 .8rem;
  border: 1px solid var(--linea); border-radius: 6px; background: var(--sup-1);
  font-size: .8rem; font-weight: 600; color: var(--texto-2); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.mc-hoy:hover, .mc-boton:hover, .mc-rango > summary:hover { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 30%, var(--linea)); }
.mc-hoy.actual, .mc-rango.actual > summary { background: var(--tinta); border-color: var(--tinta); color: var(--sup-1); }
.mc-hoy:focus-visible, .mc-boton:focus-visible, .mc-rango > summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.mc-rango { position: relative; }
.mc-rango > summary { list-style: none; }
.mc-rango > summary::-webkit-details-marker { display: none; }
.mc-rango > summary::after { content: ''; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: .1rem; opacity: .7; }
.mc-rango[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.mc-rango-panel {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40; width: max-content; max-width: calc(100vw - 2rem);
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; padding: .75rem .8rem .7rem;
  box-shadow: 0 18px 40px -18px rgba(15, 31, 41, .38), 0 2px 6px -2px rgba(15, 31, 41, .12);
  display: grid; gap: .6rem;
}
.mc-cal-meses { display: flex; gap: 1.4rem; }
.mc-cal-meses .mc-cal-mes + .mc-cal-mes { padding-left: 1.4rem; border-left: 1px solid var(--linea); }
.mc-cal-cab { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .35rem; }
.mc-cal-cab b { font-size: .82rem; font-weight: 700; color: var(--tinta); text-transform: capitalize; }
.mc-cal-cab button { width: 1.75rem; height: 1.75rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup-1); color: var(--tinta); font-size: 1rem; line-height: 1; cursor: pointer; }
.mc-cal-cab button:hover:not(:disabled) { background: var(--sup-2); }
.mc-cal-cab button:disabled { opacity: .3; cursor: default; }
.mc-cal-cab button:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.mc-rango-campos[hidden] { display: none; }
.mc-cal-rejilla { display: grid; grid-template-columns: repeat(7, 2.05rem); row-gap: 2px; }
.mc-cal-sem { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); text-align: center; padding-bottom: .2rem; }
.mc-cal-dia {
  height: 1.9rem; border: 0; background: transparent; font: inherit; font-size: .78rem; font-variant-numeric: tabular-nums;
  color: var(--tinta); cursor: pointer; border-radius: 0;
}
.mc-cal-dia:hover:not(:disabled):not(.inicio):not(.fin) { background: var(--sup-2); border-radius: 6px; }
.mc-cal-dia.dentro:hover:not(:disabled) { background: color-mix(in srgb, var(--marca) 22%, var(--sup-1)); border-radius: 0; }
.mc-cal-dia.dentro { background: color-mix(in srgb, var(--marca) 13%, var(--sup-1)); border-radius: 0; }
.mc-cal-dia.inicio, .mc-cal-dia.fin { background: var(--tinta); color: var(--sup-1); font-weight: 700; }
.mc-cal-dia.inicio { border-radius: 6px 0 0 6px; }
.mc-cal-dia.fin { border-radius: 0 6px 6px 0; }
.mc-cal-dia.inicio.fin { border-radius: 6px; }
.mc-cal-dia.hoy:not(.inicio):not(.fin) { box-shadow: inset 0 0 0 1px var(--marca); border-radius: 6px; }
.mc-cal-dia:disabled { color: color-mix(in srgb, var(--gris) 45%, transparent); cursor: default; }
.mc-cal-dia:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: 6px; }
.mc-rango-campos { display: flex; gap: .6rem; flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: .55rem; }
.mc-rango-campos label { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; color: var(--gris); }
body.panel .mc-rango-campos .campo { height: 1.85rem; padding: 0 .45rem; font-size: .76rem; width: 8.8rem; border-radius: 6px; }
.mc-rango-pie { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.mc-rango-sel { display: flex; align-items: center; gap: .55rem; }
.mc-rango-caja { display: grid; gap: .05rem; padding: .3rem .6rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--relieve, var(--sup-2)); min-width: 6.4rem; }
.mc-rango-caja span { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.mc-rango-caja b { font-size: .86rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-rango-caja b.pendiente { color: var(--gris); font-weight: 600; font-style: italic; }
.mc-rango-hacia { color: var(--gris); flex: none; }
.mc-rango-dias { display: grid; justify-items: center; line-height: 1.05; margin-left: .35rem; padding-left: .8rem; border-left: 1px solid var(--linea); }
.mc-rango-dias b { font-size: 1.15rem; font-weight: 800; color: var(--marca-osc); font-variant-numeric: tabular-nums; }
.mc-rango-dias span { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
body.panel .mc-rango-pie .boton-mini { height: 1.9rem; padding: 0 1.1rem; border-radius: 6px; }

/* la tira de cifras: cada una toma el ancho de lo que dice */
.mc-cifras { display: flex; flex-wrap: wrap; background: var(--sup-1); border: 1px solid var(--linea); border-radius: 6px; margin-bottom: .5rem; overflow: hidden; }
.mc-cifras > div { flex: 1 0 auto; padding: .32rem .7rem .36rem; border-right: 1px solid var(--linea); box-shadow: 0 1px 0 var(--linea); }
.mc-cifras > div:last-child { border-right: 0; }
.mc-cifras span { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.mc-cifras b { display: block; font-size: .92rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-cifras .alerta b { color: var(--ambar); }
.mc-cifras b.txt-mal { color: var(--rojo); }

.mc-vacio { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup-1); font-size: .85rem; }
.mc-vacio span { color: var(--texto-2); font-size: .8rem; }
.mc-avisos { border: 1px solid var(--linea); border-left: 3px solid var(--ambar); border-radius: 6px; background: var(--sup-1); padding: .3rem .65rem; margin-bottom: .5rem; font-size: .78rem; color: var(--texto-2); max-height: 4.6rem; overflow: auto; }
.mc-avisos p { margin: .1rem 0; }
.mc-avisos p.obs b { color: var(--ambar); }

/* Hoy: los cobros y, al lado, los egresos */
.mc-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.mc-cuerpo.con-lado { grid-template-columns: minmax(0, 1fr) minmax(13rem, 20rem); }

/* De una fecha a otra: la gráfica y el reparto por medio */
.mc-analisis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem); gap: .5rem; margin-bottom: .5rem; }
.mc-panel { background: var(--sup-1); border: 1px solid var(--linea); border-radius: 6px; padding: .5rem .7rem .45rem; min-width: 0; }
.mc-panel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .35rem; }
.mc-panel-cab b { font-size: .8rem; font-weight: 700; color: var(--tinta); }
.mc-panel-cab span { font-size: .78rem; font-weight: 700; color: var(--tinta); }
.mcm { width: 100%; border-collapse: collapse; font-size: .76rem; }
.mcm th { font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); text-align: left; padding: 0 .3rem .25rem; border-bottom: 1px solid var(--linea); }
.mcm td { padding: .28rem .3rem .3rem; border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent); vertical-align: top; }
.mcm tr:last-child td { border-bottom: 0; }
.mcm .num { text-align: right; }
.mcm .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: .74rem; }
.mcm-barra { display: block; height: 3px; background: var(--sup-2); border-radius: 2px; margin-top: .22rem; overflow: hidden; }
.mcm-barra i { display: block; height: 100%; background: var(--m, var(--gris)); border-radius: 2px; }

/* LA GRÁFICA (26/09/2026, tercera vuelta): lo cobrado cubo a cubo,
   partido por medio de pago con los colores de la tabla de al lado. Sin
   degradados, sin rejilla y sin tarjetas de cifras. La leyenda es un
   selector (el medio elegido baja al piso y el resto queda en gris); un
   punto bajo la barra solo cuando el cierre pide atención. Las alturas
   llegan en píxeles enteros desde panel/partes/mc-grafica (--mcg-h = $alto) */
.mcg {
  --mcg-h: 150px;                  /* alto de la barra mayor: el mismo número que $alto */
  --mcg-aire: 16px;                /* sitio para la cifra del cubo mayor */
  --mcg-bw: min(62%, 22px);        /* ancho de la barra: nunca gorda */
  --mcg-min: 18px;                 /* ancho mínimo de un cubo antes de desplazar a lo ancho */
  --mcg-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; margin: 0; color: var(--tinta);
}
.mcg.es-denso { --mcg-min: 7px; }
.mcg *, .mcg *::before { box-sizing: border-box; }
.mcg-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .3rem; }
.mcg-cab > b { font-size: .8rem; font-weight: 700; color: var(--tinta); }
.mcg-cierres { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .7rem; font-weight: 600; color: var(--texto-2); }
.mcg-cierres > span { white-space: nowrap; }
.mcg-cierres i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-right: .32rem; vertical-align: middle; }
.mcg-cierres b { margin-left: .12rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mcg .c-ok { background: var(--verde); }
.mcg .c-tarde { background: var(--ambar); }
.mcg .c-mal { background: var(--rojo); }
.mcg .c-abierta { background: var(--gr-3); }
.mcg .c-vacio { background: var(--gr-4); }

/* la leyenda: un botón por medio, con su total del tramo */
.mcg-leyenda { display: flex; flex-wrap: wrap; gap: 0 1.15rem; margin: 0 0 .15rem; }
.mcg-medio {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; margin: 0; padding: .2rem 0;
  font: inherit; display: inline-flex; align-items: center; gap: .42rem; cursor: pointer;
  font-size: .7rem; font-weight: 600; color: var(--texto-2); white-space: nowrap;
  transition: color 140ms var(--mcg-ease);
}
.mcg-medio i { width: 8px; height: 8px; border-radius: 1.5px; background: var(--m); transition: background-color 140ms var(--mcg-ease); }
.mcg-medio b { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; transition: color 140ms var(--mcg-ease); }
.mcg-medio:hover { color: var(--tinta); }
/* con el ancla .mcg para ganarle al anillo global (body.panel :focus-visible) */
.mcg .mcg-medio:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 2px; }
.mcg[data-solo] .mcg-medio:not(.es-solo), .mcg[data-solo] .mcg-medio:not(.es-solo) b { color: var(--gris); }
.mcg[data-solo] .mcg-medio:not(.es-solo) i { background: var(--gr-5); }
.mcg[data-solo] .mcg-medio.es-solo { color: var(--tinta); }

/* el lienzo: un cubo por columna; la columna entera es el blanco del ratón */
.mcg-marco { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.mcg-lienzo { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); min-width: calc(var(--n) * var(--mcg-min)); padding-bottom: 1px; }
.mcg-dia { position: relative; display: flex; flex-direction: column; align-items: center; outline: 0; cursor: default; }
.mcg-dia::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--mcg-aire) - 3px); bottom: 0; width: min(calc(100% - 2px), 44px); transform: translateX(-50%);
  background: color-mix(in srgb, var(--sup-3) 55%, var(--sup-1)); border-radius: 3px; opacity: 0; transition: opacity 120ms var(--mcg-ease);
}
.mcg-dia:hover::before, .mcg-dia.es-foco::before { opacity: 1; }
.mcg .mcg-dia:focus-visible { outline: none; }
.mcg-dia:focus-visible::before { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--marca); }
.mcg-area { position: relative; width: 100%; height: calc(var(--mcg-aire) + var(--mcg-h)); }
.mcg-col {
  position: absolute; bottom: 0; left: 50%; width: var(--mcg-bw); margin-left: calc(var(--mcg-bw) / -2);
  height: calc(var(--h) * 1px); border-radius: 2px 2px 0 0; overflow: hidden; transform-origin: 50% 100%;
  animation: mcg-sube 420ms var(--mcg-ease) backwards; animation-delay: calc(var(--d) * 1ms);
}
@keyframes mcg-sube { from { transform: scaleY(0); } }
/* cada tramo parte de la base y sube lo que miden los de abajo */
.mcg-seg {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--f) * 1px);
  transform: translateY(calc(var(--oo, var(--o)) * -1px)); background: var(--m);
  transition: transform 160ms var(--mcg-ease), background-color 140ms var(--mcg-ease);
}
/* 1.5 px de papel entre tramos: lo cede el de arriba, así la base queda exacta; uno de 1–2 px no cede nada */
.mcg:not([data-solo]) .mcg-seg + .mcg-seg:not(.es-fino) { box-shadow: inset 0 -1.5px 0 var(--sup-1); }
.mcg[data-solo] .mcg-seg { background: var(--gr-5); }
.mcg[data-solo] .mcg-seg.es-solo { z-index: 1; background: var(--m); box-shadow: 0 -1.5px 0 var(--sup-1); }
/* la cifra del cubo mayor: la única, para dar la escala */
.mcg-pico {
  position: absolute; left: 50%; bottom: calc(var(--h) * 1px + 4px); transform: translateX(-50%);
  font-size: .62rem; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity 140ms var(--mcg-ease);
}
.mcg-pico.a-der { left: auto; right: calc(50% - var(--mcg-bw) / 2); transform: none; }
.mcg-pico.a-izq { left: calc(50% - var(--mcg-bw) / 2); transform: none; }
.mcg[data-solo] .mcg-pico { opacity: 0; }
/* domingo o día sin caja: un hueco, sin barra */
.mcg-hueco { position: absolute; bottom: 0; left: 50%; width: 4px; height: 2px; margin-left: -2px; border-radius: 1px; background: var(--gr-5); }
.mcg-cierre { position: relative; width: 4px; height: 4px; border-radius: 50%; margin: 5px 0 2px; }
.mcg-fecha, .mcg-mes { position: relative; font-size: .6rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mcg-fecha { font-weight: 600; color: var(--gris); min-height: .72rem; }
.mcg.es-denso .mcg-fecha.es-lunes { color: var(--texto-2); font-weight: 700; }
.mcg-fecha.es-domingo { color: var(--gr-3); font-weight: 500; }
.mcg-fecha.es-hoy { color: var(--tinta); font-weight: 800; }
.mcg-mes { font-weight: 700; color: var(--texto-2); min-height: .72rem; }
.mcg.es-denso .mcg-dia:first-child :is(.mcg-fecha, .mcg-mes) { align-self: flex-start; }
.mcg.es-denso .mcg-dia:last-child :is(.mcg-fecha, .mcg-mes) { align-self: flex-end; }

/* la ficha: una sola, que el script lleva junto a la barra */
.mcg-ficha {
  position: absolute; z-index: 5; top: 0; left: 0; min-width: 11.5rem; padding: .5rem .6rem .45rem;
  background: var(--sup-1); border: 1px solid var(--linea-2); border-radius: 4px;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tinta) 22%, transparent);
  font-size: .7rem; pointer-events: none; visibility: hidden;
}
.mcg-ficha.es-visible { visibility: visible; }
.mcg-ficha-dia { font-size: .66rem; font-weight: 700; color: var(--texto-2); }
.mcg-ficha-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .1rem; padding-bottom: .35rem; border-bottom: 1px solid var(--linea); }
.mcg-ficha-tot b { font-size: .92rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.mcg-ficha-tot.es-cero b { color: var(--gris); }
.mcg-ficha-tot span { font-size: .66rem; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.mcg-ficha ul { list-style: none; margin: 0; padding: .3rem 0; display: grid; gap: .16rem; }
.mcg-ficha li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: .45rem; color: var(--texto-2); font-weight: 600; }
.mcg-ficha li i { width: 8px; height: 8px; border-radius: 1.5px; background: var(--m); }
.mcg-ficha li b { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; text-align: right; }
.mcg[data-solo] .mcg-ficha li:not(.es-solo), .mcg[data-solo] .mcg-ficha li:not(.es-solo) b { color: var(--gris); }
.mcg[data-solo] .mcg-ficha li:not(.es-solo) i { background: var(--gr-5); }
.mcg-ficha-estado { display: flex; align-items: center; gap: .4rem; padding-top: .35rem; border-top: 1px solid var(--linea); font-weight: 700; color: var(--tinta); }
.mcg-ficha-tot + .mcg-ficha-estado { border-top: 0; }
.mcg-ficha-estado i { width: 6px; height: 6px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .mcg-col { animation: none; }
  .mcg-seg, .mcg-medio, .mcg-medio i, .mcg-medio b, .mcg-pico, .mcg-dia::before { transition: none; }
}

/* ÓRDENES DE SERVICIO EN HOJA (26/09/2026): la cara de Mi caja —«todo
   ahí está bien, solo mejorar el UI/UX»—. Las pestañas de estado y los
   filtros en una barra; una orden por renglón, sin tarjetas ni chips; el
   estado con un punto de color y el monto abonado a medias en ámbar */
.os-barra { display: flex; align-items: center; justify-content: space-between; gap: .4rem .8rem; flex-wrap: wrap; margin-bottom: .4rem; }
.os-pestanas { display: flex; gap: .3rem; flex-wrap: wrap; }
.os-barra .os-pestanas a {
  font-size: .76rem; font-weight: 600; padding: .24rem .7rem; border: 1px solid var(--linea); border-radius: 5px;
  background: var(--sup-1); color: var(--texto-2); text-decoration: none; white-space: nowrap;
}
.os-barra .os-pestanas a b { font-variant-numeric: tabular-nums; color: var(--tinta); margin-left: .3rem; }
.os-barra .os-pestanas a.mal b { color: var(--rojo); }
.os-barra .os-pestanas a:hover { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 30%, var(--linea)); }
.os-barra .os-pestanas a.actual { background: var(--tinta); border-color: var(--tinta); color: var(--sup-1); }
.os-barra .os-pestanas a.actual b { color: var(--sup-1); }
.os-barra .os-pestanas a:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
/* los filtros en una sola línea, del alto de las pestañas */
.os-filtros { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.os-filtros .campo.chico, .os-filtros select.campo.chico {
  width: auto; max-width: 11.5rem; height: 1.95rem; padding: 0 .5rem; font-size: .76rem;
  background-color: var(--sup-1); border: 1px solid var(--linea); border-radius: 5px; box-shadow: none;
}
.os-filtros input[type="search"].campo.chico { width: 15.5rem; max-width: none; }
.os-filtros .boton-mini { height: 1.95rem; }
.os-barra .os-limpiar { font-size: .74rem; font-weight: 600; color: var(--texto-2); }
@media (max-width: 760px) { .os-filtros { flex-wrap: wrap; } .os-filtros input[type="search"].campo.chico { width: 100%; } }
.hoja-os { max-height: calc(100vh - 12.4rem); min-height: 12rem; }
/* remitente y destinatario se reparten lo que sobra y cortan con «…» (el nombre entero, al pasar) */
.hoja-os .hoja td.texto { max-width: 0; width: 42%; min-width: 7.5rem; }
.hoja a.doc { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; white-space: nowrap; }
.hoja a.doc svg { width: .8rem; height: .8rem; flex: none; opacity: .7; }
.hoja a.os-doc { color: var(--tinta); }
.os-ref { white-space: nowrap; }
.os-medios { white-space: nowrap; }
.os-medios .mc-medio + .mc-medio { margin-left: .55rem; }
.hoja td.ops { font-size: .72rem; }
.hoja td.fotos { white-space: nowrap; }
.hoja td.fotos .adjunto-mini + .adjunto-mini { margin-left: .2rem; }
/* LAS CAPTURAS EN PILA (26/09/2026): la primera, las demás como hojas detrás
   y su cuenta; mide lo mismo que una sola, así no se sale de la columna */
.os-pila { position: relative; display: inline-block; vertical-align: middle; line-height: 0; }
.os-pila.varias::before, .os-pila.varias::after {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--linea); border-radius: 3px; background: var(--sup-2);
}
.os-pila.varias::before { transform: translate(3px, -2px) rotate(5deg); }
.os-pila.varias::after { transform: translate(1.5px, -1px) rotate(2.5deg); }
.os-pila > a { position: relative; z-index: 1; }
.os-pila > a[hidden] { display: none; }
.os-pila-n {
  position: absolute; z-index: 2; right: -.45rem; top: -.4rem; min-width: .95rem; height: .95rem; padding: 0 .22rem; border-radius: .5rem;
  background: var(--tinta); color: var(--sup-1); font-size: .56rem; font-weight: 800; line-height: .95rem; text-align: center; font-variant-numeric: tabular-nums;
}
.hoja td.fotos .os-pila + .chip-pdf { margin-left: .5rem; }
.os-estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.os-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gr-4); }
.os-estado.e-ruta::before { background: var(--ambar); }
.os-estado.e-destino::before { background: var(--marca); }
.os-estado.e-entregada::before { background: var(--verde); }
.os-estado.e-anulada::before { background: var(--rojo); }
.hoja tr.fila-anulada td { color: var(--gris); }
.hoja tr.fila-anulada td.num { text-decoration: line-through; }
.os-centinela td { padding: 0; border: 0; height: 1px; }
.os-paginas { display: flex; gap: .4rem; justify-content: flex-end; margin-top: .4rem; }
.os-paginas[hidden] { display: none; }

/* MONITOREO DE CAJAS EN HOJA (26/09/2026): «un gran rectángulo para un
   par de datos se ve mal». Las jornadas de todas las plazas en una sola
   hoja, con un renglón de cabecera por plaza; la matriz de cierres y lo
   cobrado por medio en hojas hermanas; los estados con un punto de color */
.mc-mandos .selector-caja {
  width: auto; max-width: 14rem; height: 2rem; padding: 0 .6rem; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--linea); border-radius: 6px; background-color: var(--sup-1); color: var(--texto-2); box-shadow: none;
}
#tb-h-jornadas:checked ~ .mc-selector label[for="tb-h-jornadas"],
#tb-h-cierres:checked ~ .mc-selector label[for="tb-h-cierres"] { background: var(--tinta); border-color: var(--tinta); color: var(--sup-1); }
#tb-h-jornadas:checked ~ .mc-selector label[for="tb-h-jornadas"] b { color: var(--sup-1); }
#tb-h-jornadas:focus-visible ~ .mc-selector label[for="tb-h-jornadas"],
#tb-h-cierres:focus-visible ~ .mc-selector label[for="tb-h-cierres"] { outline: 2px solid var(--marca); outline-offset: 1px; }
.tb-hojas > .tb-hoja-jornadas, .tb-hojas > .tb-hoja-cierres { display: none; }
#tb-h-jornadas:checked ~ .tb-hojas .tb-hoja-jornadas,
#tb-h-cierres:checked ~ .tb-hojas .tb-hoja-cierres { display: block; }
/* del alto de lo que tiene, hasta el borde de la pantalla: con pocas cajas no queda un rectángulo vacío */
.hoja-tablero { max-height: calc(100vh - 12.2rem); }
.hoja tr.tb-grupo td {
  background: var(--sup-2); padding-top: .4rem; padding-bottom: .32rem; font-size: .72rem; color: var(--texto-2);
  border-bottom: 1px solid var(--linea);
}
.tb-grupo b { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta); margin-right: .8rem; }
.tb-grupo span { margin-right: .9rem; font-weight: 600; white-space: nowrap; }
.hoja tr.tb-oficina td { color: var(--gris); }
.tb-quien { font-weight: 600; }
.tb-estado { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.tb-estado::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gr-4); }
.tb-estado.t-ok::before { background: var(--verde); }
.tb-estado.t-transito::before { background: var(--marca); }
.tb-estado.t-marca::before { background: var(--ambar); }
.tb-estado.t-urgente::before { background: var(--rojo); }
.hoja td.tb-abrir { text-align: right; }
.tb-abrir a { font-weight: 700; }
/* la matriz, dentro de su hoja y con los colores de la casa */
.tb-matriz { margin: .45rem .55rem .15rem; border-spacing: 3px 3px; }
.tb-matriz th { font-size: .6rem; font-weight: 700; color: var(--gris); }
.tb-matriz th:first-child, .tb-matriz td:first-child { font-size: .74rem; font-weight: 600; color: var(--tinta); background: var(--sup-1); }
.tb-matriz td.txt-obs { color: var(--ambar); font-weight: 700; }
.tb-matriz .celda { width: 1.05rem; height: 1.05rem; border-radius: 3px; }
.tb-hojas .celda.revisado { background: var(--verde); }
.tb-hojas .celda.observado { background: var(--ambar-2); }
.tb-hojas .celda.por_revisar { background: color-mix(in srgb, var(--ambar-2) 38%, var(--sup-1)); }
.tb-hojas .celda.sin_cerrar { background: var(--rojo); }
.tb-hojas .celda.abierta { background: var(--sup-1); box-shadow: inset 0 0 0 1.5px var(--marca); }
.tb-hojas .celda.nada { background: var(--sup-3); }
.tb-leyenda { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: .35rem .85rem .6rem; font-size: .66rem; color: var(--gris); }
.tb-leyenda i.celda { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.tb-vacio { padding: .8rem; margin: 0; }

/* LAS PLAZAS EN CUBOS (26/09/2026): cada plaza un cubo; dentro, cada caja
   es su TICKET de caja registradora con el sello RECTANGULAR de lo que aún
   pide mirarse (sin cerrar, en curso, por revisar, oficina), o el sello
   REDONDO de tesorería cuando ya se revisó (visto bueno, observada), con su
   resumen dentro y su ticket al pasar. La plaza con todo el visto bueno se
   pinta de verde. Los dientes del papel son una máscara SVG (forma, no color) */
.tk {
  container: tk / inline-size;
  --tk-diente-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z'/%3E%3C/svg%3E");
  --tk-diente-arriba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 4h8L4 0z'/%3E%3C/svg%3E");
  /* la tinta ocre del sello «Observada»: el ámbar del panel no llega a 4.5:1 en letra de sello */
  --tk-ocre: color-mix(in srgb, color-mix(in srgb, var(--ambar) 85%, var(--rojo)) 70%, var(--tinta));
  position: relative; color: var(--tinta);
}
.tk *, .tk *::before, .tk *::after { box-sizing: border-box; }
.tk { --tk-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); --tk-fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .26  0 0 0 0 .2  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); }
.tk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* LAS PLAZAS, EMPACADAS (26/09/2026): «hay mucho espacio que deja cada
   panel». Una rejilla de columnas del ancho de un ticket (--tk-col); cada
   plaza ocupa tantas como cajas tiene (--n), sin pasar de las que caben
   (--max, según el ancho), y el acomodo denso mete las plazas chicas en los
   huecos. Cada plaza abraza su alto: no se estira al de la vecina */
.tk-plazas {
  --tk-w: 170px; --tk-col: 196px; --max: 8;
  --tk-m: 12px; --tk-ren: 20px; --tk-px: 12px; --tk-bt: 14px; --tk-bx: 12px; --tk-bp: 14px; --tk-gap: 10px; --tk-pie: 96px; --tk-sello-d: 90px;
  --tk-nom: 13.5px; --tk-rect: 14.5px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tk-col), 1fr)); grid-auto-flow: row dense; align-items: start;
  gap: 12px; margin: 0; padding: 0; list-style: none;
}
.tk-plazas > .tk-cubo { grid-column: span min(var(--n), var(--max)); }
/* cuántas columnas caben: floor((ancho + 12) / (196 + 12)) */
@container tk (max-width: 1651px) { .tk-plazas { --max: 7; } }
@container tk (max-width: 1443px) { .tk-plazas { --max: 6; } }
@container tk (max-width: 1235px) { .tk-plazas { --max: 5; } }
@container tk (max-width: 1027px) { .tk-plazas { --max: 4; } }
@container tk (max-width: 819px) { .tk-plazas { --max: 3; } }
@container tk (max-width: 611px) { .tk-plazas { --max: 2; } }
@container tk (max-width: 355px) { .tk-plazas { --max: 1; } }
/* el cubo */
.tk-cubo { display: flex; flex-direction: column; min-width: 0; background: var(--sup-1); border: 1px solid var(--linea); border-radius: 6px; }
.tk-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px 9px; border-bottom: 1px solid var(--linea); border-radius: 5px 5px 0 0; }
.tk-cab h3 { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-suma { font: 500 12.5px/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap; }
/* los tickets arrancan arriba: un renglón de tickets no se reparte el alto sobrante */
.tk-bandeja { flex: 1; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: flex-start; gap: 16px var(--tk-gap); padding: var(--tk-bt) var(--tk-bx) var(--tk-bp); background: var(--sup-3); border-radius: 0 0 5px 5px; }
/* EL PAISAJE DE LA PLAZA (26/09/2026): su ilustración en pastel. «¿Cómo
   haríamos para que se vea?»: la franja del nombre es una POSTAL —el paisaje
   nítido, con el nombre y el total en etiquetas claras encima— y, detrás de
   los tickets, queda como marca de agua. Así cada plaza se reconoce aunque
   esté llena de cajas */
.tk-plazas > .tk-con-fondo, .pv-tk .tk-cubo.tk-con-fondo { position: relative; isolation: isolate; }
.tk-plazas > .tk-con-fondo::before, .pv-tk .tk-cubo.tk-con-fondo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--tk-fondo) center 58% / cover no-repeat; opacity: .55; filter: saturate(.9);
}
.tk-con-fondo .tk-cab {
  /* wrap-reverse: la primera línea (el nombre) queda abajo; si el total no
     cabe a su lado, pasa a la línea de arriba, a la derecha */
  position: relative; flex-wrap: wrap-reverse; align-items: flex-start; align-content: space-between; row-gap: 6px;
  min-height: 66px; padding: 8px 10px; border-bottom: 0;
  background: var(--tk-fondo) center var(--tk-foco, 42%) / cover no-repeat;
  box-shadow: inset 0 -12px 16px -12px color-mix(in srgb, var(--tinta) 22%, transparent);
}
.tk-con-fondo .tk-cab h3, .tk-con-fondo .tk-suma, .tk-con-fondo .tk-cab .pv-plaza {
  padding: 4px 8px 3px; border-radius: 4px; background: color-mix(in srgb, var(--sup-1) 86%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 14%, transparent);
}
.tk-con-fondo .tk-suma { color: var(--tinta); margin-left: auto; }
.tk-con-fondo .tk-bandeja { background: color-mix(in srgb, var(--sup-3) 52%, transparent); }
.tk-con-fondo.tk-hecho .tk-cab h3, .tk-con-fondo.tk-hecho .tk-suma, .tk-con-fondo.tk-hecho .tk-cab .pv-plaza { background: color-mix(in srgb, var(--verde-suave) 92%, transparent); }
.tk-con-fondo.tk-hecho .tk-bandeja { background: color-mix(in srgb, var(--verde-suave) 62%, transparent); }
/* la plaza con todo el visto bueno: el cubo se pinta */
.tk-cubo.tk-hecho { border-color: color-mix(in srgb, var(--verde) 45%, var(--linea)); }
.tk-hecho .tk-cab { background: var(--verde-suave); border-bottom-color: color-mix(in srgb, var(--verde) 30%, var(--linea)); }
.tk-hecho .tk-cab h3, .tk-hecho .tk-suma { color: var(--verde-texto); }
/* con visto bueno, la postal sigue: el verde queda en las etiquetas (27/09/2026) */
.tk-con-fondo.tk-hecho .tk-cab { background: var(--tk-fondo) center var(--tk-foco, 42%) / cover no-repeat; border-bottom: 0; }
.tk-hecho .tk-bandeja { background: var(--verde-suave); }
/* la plaza sin actividad: presente y callada */
/* las plazas sin actividad: juntas, en una línea al pie */
.tk-quietas { margin: 10px 2px 0; font: 600 10.5px/1.6 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.tk-quietas > span { font-weight: 800; color: var(--gris); margin-right: .7em; }

/* EL TICKET */
.tk-tk {
  --tk-papel: var(--sup-1);
  /* el papel es un contenedor (26/09/2026): el sello y el login miden según SU ancho */
  container-type: inline-size;
  position: relative; flex: 1 1 var(--tk-w, 12rem); max-width: calc(var(--tk-w, 12rem) * 1.45); min-width: 0;
  display: flex; flex-direction: column; padding: 13px var(--tk-px) 0;
  /* papel térmico (26/09/2026): «que los papeles tengan textura de papel» —un
     grano fino y unas fibras apenas, sobre el color de siempre— */
  background: var(--tk-grano), var(--tk-fibra), var(--tk-papel); background-size: 180px 180px, 240px 240px, auto;
  color: var(--tinta); text-decoration: none;
  font: 400 var(--tk-m)/var(--tk-ren) var(--f-mono); font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 .5px color-mix(in srgb, var(--tinta) 45%, transparent)) drop-shadow(0 1px 1px color-mix(in srgb, var(--tinta) 8%, transparent));
  transition: transform .16s ease;
}
.tk-tk::before, .tk-tk.tk-cortado::after {
  content: ""; position: absolute; left: 0; right: 0; height: 4px; background: var(--tk-papel);
  -webkit-mask: var(--tk-diente-arriba) 0 0 / 8px 4px round no-repeat; mask: var(--tk-diente-arriba) 0 0 / 8px 4px round no-repeat;
}
.tk-tk::before { top: -4px; }
.tk-tk.tk-cortado::after { bottom: -4px; -webkit-mask-image: var(--tk-diente-abajo); mask-image: var(--tk-diente-abajo); }
/* sin cortar: el papel sigue saliendo de la impresora */
.tk-tk.tk-cinta { align-self: stretch; margin-bottom: calc(-1 * var(--tk-bp)); padding-bottom: var(--tk-bp); }
.tk-tk.tk-cinta::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--gr-2); }
.tk-tk:hover { transform: translateY(-3px); color: var(--tinta); text-decoration: none; }
.tk-tk.tk-cinta:hover { transform: none; }
/* las cajas son enlaces: su tinta le gana al color de enlace del panel (body.panel a) */
.tk a.tk-tk, .tk a.tk-tk:hover { color: var(--tinta); }
.tk a.tk-tk.tk-ofi, .tk a.tk-tk.tk-ofi:hover { color: var(--gris); }
.tk a.tk-tk:focus-visible { outline: 2px solid var(--tinta); outline-offset: 5px; border-radius: 0; }
.tk-nom { font: 700 var(--tk-nom)/1.3 var(--f-ui); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-tk:hover .tk-nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tk-usu { display: flex; min-width: 0; font-size: max(9px, calc(var(--tk-m) - 2.5px)); line-height: 1.7; letter-spacing: .06em; color: var(--texto-2); white-space: nowrap; }
.tk-usu > span:first-child { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tk-usu > span + span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-usu > .tk-sc::before { content: "\00a0·\00a0"; }
/* un papel angosto: «SIN CUENTA» baja a su línea en vez de cortarse */
@container (max-width: 160px) {
  .tk-usu { flex-wrap: wrap; }
  .tk-usu > .tk-sc { flex-basis: 100%; }
  .tk-usu > .tk-sc::before { content: none; }
}
.tk-corte { display: block; height: 0; border-top: 1px dotted var(--gr-4); margin: 7px 0 6px; }
.tk-ren { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.tk-ren > span:first-child { color: var(--texto-2); letter-spacing: .03em; font-size: calc(var(--tk-m) - 1px); }
.tk-ren sup { font-size: max(8.5px, .72em); vertical-align: .35em; line-height: 0; margin-left: 2px; font-weight: 600; }
.tk-falta { color: var(--rojo); font-weight: 600; }
.tk-nulo { color: var(--gr-3); }
.tk-tot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 10px; font-size: calc(var(--tk-m) + 2.5px); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.tk-tot > span:first-child { font-size: calc(var(--tk-m) - 1px); font-weight: 500; color: var(--texto-2); letter-spacing: .03em; }
.tk-tot > span:last-child { margin-left: auto; white-space: nowrap; }
.tk-semana .tk-tot { font-size: calc(var(--tk-m) + 1.5px); }
/* el sello rectangular, al pie */
.tk-pie { position: relative; height: var(--tk-pie); }
.tk-rect {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-6deg);
  /* cabe en su papel: «POR REVISAR» mide ~8.2 em con su marco; la letra baja
     con el ancho del ticket (cqi) y no pasa de la de siempre */
  font-size: min(var(--tk-rect), calc((100cqi + 2 * var(--tk-px) - 10px) / 8.4));
  padding: .32em .7em .38em; border: 3px double currentColor; border-radius: 3px; text-align: center; line-height: 1; white-space: nowrap;
  mix-blend-mode: multiply; opacity: .92; animation: tk-golpe .18s ease-out .15s both;
}
.tk-rect b { display: block; font: 800 1em/1 var(--f-ui); font-variant-caps: all-small-caps; letter-spacing: .08em; }
.tk-rect small { display: block; margin-top: .2em; font: 500 max(6.5px, .6em)/1 var(--f-mono); letter-spacing: .12em; }
@keyframes tk-golpe { from { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1.08); } to { opacity: .92; transform: translate(-50%, -50%) rotate(-6deg) scale(1); } }
.tk-sin .tk-rect { color: var(--rojo); }
.tk-sin .tk-cierre > span:last-child { color: var(--rojo); font-weight: 600; }
.tk-pend .tk-rect { color: var(--tinta); }
.tk-curso .tk-rect { color: var(--gr-3); }
.tk-ofi { --tk-papel: var(--sup-2); color: var(--gris); filter: drop-shadow(0 0 .5px color-mix(in srgb, var(--tinta) 22%, transparent)); }
.tk-ofi .tk-ren > span:first-child, .tk-ofi .tk-tot > span:first-child, .tk-ofi .tk-usu { color: var(--gr-3); }
.tk-ofi .tk-rect { color: var(--gr-4); }
/* EL AVANCE DE LA REVISIÓN, en el ticket del tramo (26/09/2026): una barra
   fina bajo las jornadas —verde el visto bueno, ocre lo observado— sobre la
   pista de lo que falta; y «sin cerrar» en rojo, solo si hay */
.tk-avance { display: flex; height: 5px; margin: 2px 0 5px; border-radius: 1px; overflow: hidden; background: color-mix(in srgb, var(--tinta) 9%, transparent); }
.tk-avance i { display: block; height: 100%; }
.tk-av-vb { background: var(--verde); }
.tk-av-obs { background: var(--ambar); }
.tk-sin-cerrar > span { color: var(--rojo); font-weight: 600; }
.tk-sin-cerrar > span:first-child { color: var(--rojo); }

/* EL SELLO REDONDO, al pie del ticket de la caja ya revisada: un fechador de
   tesorería —anillo doble, «VISTO BUENO» u «OBSERVADA» en el arco de arriba,
   «TESORERÍA» abajo y la fecha en la banda— con el grano de la goma */
.tk-vb { --tk-papel: color-mix(in srgb, var(--verde-suave) 55%, var(--sup-1)); --tk-t: var(--verde-texto); }
.tk-obs { --tk-papel: color-mix(in srgb, var(--ambar-suave) 55%, var(--sup-1)); --tk-t: var(--tk-ocre); }
/* el mismo pie que el sello rectangular, en todos los tickets: el redondo cabe
   entero en él, sin estirar el papel ni tapar las cifras */
.tk-redondo {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: min(var(--tk-sello-d), 84cqi); aspect-ratio: 1; color: var(--tk-t);
  transform: translate(calc(-50% + var(--tk-dx, 0px)), calc(-50% + var(--tk-dy, 0px))) rotate(var(--tk-giro, -12deg)); mix-blend-mode: multiply;
  animation: tk-golpe-redondo .18s ease-out .15s both;
}
@keyframes tk-golpe-redondo { from { opacity: 0; transform: translate(calc(-50% + var(--tk-dx, 0px)), calc(-50% + var(--tk-dy, 0px))) rotate(var(--tk-giro, -12deg)) scale(1.08); } }
.tk-redondo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tk-tinta { fill: none; stroke: currentColor; opacity: .92; }
.tk-tinta text, .tk-sep { fill: currentColor; stroke: none; }
.tk-a1 { stroke-width: 3.6; }
.tk-a2 { stroke-width: 1.1; }
.tk-a3 { stroke-width: 1.5; }
.tk-banda { stroke-width: 1.3; }
.tk-arr { font: 800 19px var(--f-ui); letter-spacing: .08em; }
.tk-aba { font: 800 20.5px var(--f-ui); letter-spacing: .06em; }
.tk-aba.tk-aba-largo { font-size: 17px; letter-spacing: .02em; }
.tk-fecha { font: 600 18px var(--f-mono); letter-spacing: .04em; }
.tk-fecha.tk-fecha-larga { font-size: 12px; letter-spacing: 0; }

@container tk (max-width: 1300px) {
  .tk-plazas { --tk-m: 11px; --tk-ren: 19px; --tk-px: 9px; --tk-bt: 12px; --tk-bx: 9px; --tk-bp: 12px; --tk-gap: 8px; --tk-pie: 88px; --tk-nom: 12.5px; --tk-rect: 12.5px; --tk-sello-d: 82px; }
  .tk-cab { padding: 8px 10px 7px; }
  .tk-cab h3 { font-size: 11px; letter-spacing: .08em; }
  .tk-suma { font-size: 11px; }
}
@container tk (max-width: 560px) {
  /* en el teléfono, columnas de 172: dos por fila */
  .tk-plazas { --tk-w: 146px; --tk-col: 172px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-rect, .tk-redondo { animation: none; }
  .tk-tk { transition: none; }
  .tk-tk:hover { transform: none; }
}

/* LA JORNADA EN HOJA (26/09/2026): «usa las interfaces que tenemos». La
   página de una jornada con la cara de Mi caja —la hoja de calendario, la
   tira de cifras, la hoja de cobros con sus egresos al lado— y, a la
   izquierda, su ticket del monitoreo con el sello de tesorería y, debajo,
   la revisión: el hilo y observar o dar el visto bueno */
.pv-cuerpo { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: .5rem; align-items: start; }
.pv-lado { display: grid; gap: .5rem; min-width: 0; }
.pv-nombre { overflow: hidden; text-overflow: ellipsis; }
.pv-login { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; }
.pv-tk { --tk-m: 12px; --tk-ren: 21px; --tk-px: 14px; --tk-bt: 18px; --tk-bx: 16px; --tk-bp: 16px; --tk-gap: 0px; --tk-pie: 104px; --tk-sello-d: 98px; --tk-nom: 14.5px; --tk-rect: 16px; }
.pv-tk .tk-cab { padding: 10px 14px 9px; }
.pv-tk .tk-tk { flex: 0 1 15rem; }
.pv-tk .tk-bandeja { justify-content: center; }
.pv-tk .tk-tk:hover { transform: none; }
.pv-tk .tk-tk:hover .tk-nom { text-decoration: none; }
.pv-plaza { margin: 0; min-width: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-hecho .pv-plaza { color: var(--verde-texto); }
.pv-rev {
  --tk-ocre: color-mix(in srgb, color-mix(in srgb, var(--ambar) 85%, var(--rojo)) 70%, var(--tinta));
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 6px; overflow: hidden;
}
.pv-rev > h2 { margin: 0; padding: .32rem .7rem; background: var(--sup-2); border-bottom: 1px solid var(--linea); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.pv-hilo { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow: auto; }
.pv-hilo li { padding: .45rem .7rem .5rem; font-size: .78rem; }
.pv-hilo li + li { border-top: 1px solid var(--linea); }
.pv-hilo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.pv-hilo-cab b { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.pv-hilo-cab span { font-size: .68rem; color: var(--gris); white-space: nowrap; }
.pv-observacion .pv-hilo-cab b { color: var(--tk-ocre); }
.pv-revision .pv-hilo-cab b { color: var(--verde-texto); }
.pv-hilo p { margin: .2rem 0 0; line-height: 1.4; color: var(--tinta); overflow-wrap: anywhere; }
.pv-autor { display: block; margin-top: .15rem; font-size: .7rem; color: var(--texto-2); }
.pv-nada { margin: 0; padding: .45rem .7rem; font-size: .78rem; color: var(--gris); }
.pv-acciones { display: grid; gap: .45rem; padding: .55rem .7rem .65rem; border-top: 1px solid var(--linea); }
.pv-acciones .pv-nada { padding: 0; }
.pv-form { display: grid; gap: .4rem; margin: 0; }
.pv-form .campo { width: 100%; }
.pv-acciones .mc-boton { justify-content: center; width: 100%; font-family: inherit; }
.pv-acciones .pv-sellar { background: var(--verde-texto); border-color: var(--verde-texto); color: var(--sup-1); }
.pv-acciones .pv-sellar:hover { background: color-mix(in srgb, var(--verde-texto) 82%, var(--tinta)); border-color: color-mix(in srgb, var(--verde-texto) 82%, var(--tinta)); color: var(--sup-1); }
.pv-observar > summary { list-style: none; }
.pv-observar > summary::-webkit-details-marker { display: none; }
.pv-observar > summary::after { content: ''; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: .1rem; opacity: .7; }
.pv-observar[open] > summary { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 30%, var(--linea)); }
.pv-observar[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.pv-observar > .pv-form { margin-top: .45rem; }
.pv-error { margin: 0; font-size: .74rem; font-weight: 600; color: var(--rojo); }
/* LA REVISIÓN SE DESLIZA (26/09/2026): una línea de tres puntos —por revisar,
   observada, visto bueno— con una perilla que es un puño; en el visto bueno
   levanta el pulgar. Se guarda al soltar */
.rv { --pos: 0; --rv-tinta: var(--gris); padding: .7rem .8rem .6rem; border-bottom: 1px solid var(--linea); }
.rv[data-pos="observado"] { --rv-tinta: var(--tk-ocre); }
.rv[data-pos="revisado"] { --rv-tinta: var(--verde); }
.rv-pista { position: relative; height: 40px; margin: 0 20px; }
.rv-pista::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--linea); }
.rv-lleno { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; width: calc(var(--pos) * 50%); background: var(--rv-tinta); transition: width .22s ease, background .22s ease; }
.rv-punto {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border-radius: 50%;
  border: 2px solid var(--gr-4); background: var(--sup-1); cursor: pointer;
}
.rv-punto[data-punto="por_revisar"] { left: 0; }
.rv-punto[data-punto="observado"] { left: 50%; }
.rv-punto[data-punto="revisado"] { left: 100%; }
.rv[data-puede-vb="0"] .rv-punto[data-punto="revisado"] { border-style: dashed; cursor: not-allowed; }
.rv-perilla {
  position: absolute; top: 50%; left: calc(var(--pos) * 50%); z-index: 1; display: grid; place-items: center;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 2px solid var(--rv-tinta); background: var(--sup-1); color: var(--rv-tinta);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tinta) 18%, transparent);
  cursor: grab; touch-action: none; transition: left .24s cubic-bezier(.3, 1.3, .5, 1), background .2s ease, border-color .2s ease, color .2s ease;
}
.rv.arrastrando .rv-perilla { cursor: grabbing; transition: none; }
.rv-perilla:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
.rv[data-pos="observado"] .rv-perilla, .rv[data-pos="revisado"] .rv-perilla { background: var(--rv-tinta); color: var(--sup-1); }
.rv.guardando .rv-perilla { opacity: .75; }
/* la mano: el puño y el pulgar, que se levanta en el visto bueno */
.rv-mano { width: 26px; height: 26px; overflow: visible; fill: var(--sup-1); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rv[data-pos="observado"] .rv-mano, .rv[data-pos="revisado"] .rv-mano { fill: var(--rv-tinta); }
.rv-dedo { transform-box: view-box; transform-origin: 9.6px 11.6px; transform: rotate(90deg); transition: transform .5s cubic-bezier(.34, 1.7, .5, 1) .08s; }
.rv[data-pos="revisado"] .rv-dedo { transform: rotate(0deg); }
.rv[data-pos="revisado"] .rv-perilla { animation: rv-golpe .5s ease-out; }
@keyframes rv-golpe { 0% { scale: 1; } 40% { scale: 1.16; } 100% { scale: 1; } }
.rv-rotulos { display: flex; justify-content: space-between; margin-top: .35rem; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.rv-rotulos span { cursor: pointer; }
.rv[data-pos="por_revisar"] .rv-rotulos span:nth-child(1),
.rv[data-pos="observado"] .rv-rotulos span:nth-child(2),
.rv[data-pos="revisado"] .rv-rotulos span:nth-child(3) { color: var(--rv-tinta); }
.rv-nota { min-height: 1.1rem; margin: .3rem 0 0; font-size: .72rem; color: var(--gris); }
.rv-nota.mal { color: var(--rojo); font-weight: 600; }
.rv-obs { position: relative; margin-top: .4rem; }
.rv-obs textarea { padding-right: 2.4rem; resize: vertical; }
.rv-enviar {
  position: absolute; right: .35rem; bottom: .45rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0;
  border: 0; border-radius: 5px; background: var(--tk-ocre); color: var(--sup-1); cursor: pointer;
}
.rv-enviar:hover { background: color-mix(in srgb, var(--tk-ocre) 85%, var(--tinta)); }
.rv-obs .pv-error { margin-top: .3rem; }
@media (prefers-reduced-motion: reduce) {
  .rv-perilla, .rv-lleno, .rv-dedo { transition: none; }
  .rv[data-pos="revisado"] .rv-perilla { animation: none; }
}
.hoja td.pv-cliente { max-width: 11rem; }
/* los egresos al lado miden lo que tienen, no el alto de los cobros */
.pv-cuerpo .mc-cuerpo { align-items: start; }
/* un mc-boton que es enlace lleva el gris de su familia (Historial), no el color de enlace del panel */
body.panel a.mc-boton { color: var(--texto-2); }
body.panel a.mc-boton:hover { color: var(--tinta); }
/* el controlador: sin hoja de cobros, el ticket y la revisión lado a lado */
.pv-cuerpo.sin-hoja { grid-template-columns: minmax(0, 1fr); }
.sin-hoja .pv-lado { grid-template-columns: 16.5rem minmax(0, 30rem); align-items: start; }
@media (max-width: 1700px) {
  /* con el ticket al lado, los egresos bajan bajo los cobros antes que en Mi caja */
  .pv-cuerpo .mc-cuerpo.con-lado { grid-template-columns: minmax(0, 1fr); }
  .pv-cuerpo .mc-cuerpo.con-lado .hoja-alta { max-height: calc(100vh - 17.5rem); }
  .pv-cuerpo .mc-cuerpo.con-lado .hoja-lado { max-height: 7.5rem; }
}
@media (max-width: 1000px) {
  .pv-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pv-lado, .sin-hoja .pv-lado { grid-template-columns: 16.5rem minmax(0, 1fr); align-items: start; }
  .pv-cuerpo .mc-cuerpo.con-lado .hoja-alta { max-height: 70vh; }
}
@media (max-width: 640px) {
  .pv-lado, .sin-hoja .pv-lado { grid-template-columns: minmax(0, 1fr); }
}

/* la barra de hojas: cobros, jornadas o egresos, una a la vez */
.mc-radio { position: absolute; opacity: 0; pointer-events: none; }
.mc-selector { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.mc-selector > label { font-size: .76rem; font-weight: 600; padding: .24rem .7rem; border: 1px solid var(--linea); border-radius: 5px; background: var(--sup-1); color: var(--texto-2); cursor: pointer; }
.mc-selector > label b { font-variant-numeric: tabular-nums; color: var(--tinta); margin-left: .25rem; }
#mc-h-cobros:checked ~ .mc-selector label[for="mc-h-cobros"],
#mc-h-jornadas:checked ~ .mc-selector label[for="mc-h-jornadas"] { background: var(--tinta); border-color: var(--tinta); color: var(--sup-1); }
#mc-h-cobros:checked ~ .mc-selector label[for="mc-h-cobros"] b,
#mc-h-jornadas:checked ~ .mc-selector label[for="mc-h-jornadas"] b { color: var(--sup-1); }
#mc-h-cobros:focus-visible ~ .mc-selector label[for="mc-h-cobros"],
#mc-h-jornadas:focus-visible ~ .mc-selector label[for="mc-h-jornadas"] { outline: 2px solid var(--marca); outline-offset: 1px; }
.mc-filtros { display: flex; gap: .3rem; flex-wrap: wrap; margin-left: auto; }
#mc-h-cobros:not(:checked) ~ .mc-selector .mc-solo-cobros { display: none; }
.mc-filtros a { font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border: 1px solid transparent; border-radius: 5px; color: var(--texto-2); text-decoration: none; white-space: nowrap; }
.mc-filtros a:hover { border-color: var(--linea); background: var(--sup-1); }
.mc-filtros a b { font-variant-numeric: tabular-nums; color: var(--tinta); margin-left: .2rem; }
.mc-filtros a.mal b { color: var(--rojo); }
.mc-filtros a.actual { background: var(--sup-1); border-color: var(--tinta); color: var(--tinta); }
.mc-hojas .mc-hoja-jornadas, .mc-hojas .mc-hoja-cobros { display: none; }
#mc-h-cobros:checked ~ .mc-hojas .mc-hoja-cobros,
#mc-h-jornadas:checked ~ .mc-hojas .mc-hoja-jornadas { display: block; }

.hoja-marco { background: var(--sup-1); border: 1px solid var(--linea); border-radius: 6px; overflow: auto; min-width: 0; }
.hoja-marco:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.hoja-alta { max-height: calc(100vh - 10.5rem); }
/* la cabecera, la tira, la gráfica y la barra de hojas miden 29 rem: la hoja llena el resto, sin que la página se deslice */
.hoja-tramo { max-height: calc(100vh - 30rem); min-height: 9rem; }
/* sin la gráfica (el controlador no ve soles), la hoja toma su lugar */
.mc-hojas-altas .hoja-tramo { max-height: calc(100vh - 12.5rem); }
/* LA HOJA LLENA EL RESTO (26/09/2026): en el tramo de Mi caja y en una caja, la
   página mide la ventana y la hoja toma lo que queda debajo de la cabecera, la
   tira, la gráfica y la barra de hojas —se parta como se parta la cabecera—:
   la página no se desliza, solo la hoja (los altos de arriba quedan de respaldo) */
@media (min-width: 1001px) {
  body.panel:is(.mi-caja, .en-hoja) .lienzo-panel:has(> .mc-hojas) { display: flex; flex-direction: column; height: 100svh; box-sizing: border-box; }
  .lienzo-panel:has(> .mc-hojas) > .mc-hojas { flex: 1 1 0; min-height: 9rem; display: flex; flex-direction: column; }
  .lienzo-panel:has(> .mc-hojas) > .mc-hojas > .hoja-tramo { flex: 0 1 auto; min-height: 0; max-height: none; }
}
.hoja { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .76rem; line-height: 1.25; color: var(--tinta); }
.hoja th { position: sticky; top: 0; z-index: 1; background: var(--sup-2); text-align: left; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); padding: .32rem .55rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.hoja td { padding: .24rem .55rem; border-bottom: 1px solid var(--linea); white-space: nowrap; vertical-align: middle; }
.hoja td + td, .hoja th + th { border-left: 1px solid color-mix(in srgb, var(--linea) 70%, transparent); }
.hoja tbody tr:hover td { background: var(--sup-2); }
.hoja .num { text-align: right; }
.hoja .mono { font-family: var(--f-mono); font-size: .74rem; font-variant-numeric: tabular-nums; }
.hoja td.texto { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
.hoja td.texto.ancho { max-width: 40rem; }
.hoja tfoot td { position: sticky; bottom: 0; background: var(--sup-2); font-weight: 700; border-top: 1px solid var(--texto-2); border-bottom: 0; }
/* el rótulo del total: «TOTAL» chico en mayúsculas y la cuenta en gris (26/09/2026, «sutil nada más») */
.hoja-total { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); margin-right: .55rem; }
.hoja-cuenta { font-weight: 600; color: var(--gris); }
.hoja a { color: var(--marca-osc); text-decoration: none; }
.hoja a:hover { text-decoration: underline; text-underline-offset: 2px; }
.hoja tr.fila-parcial_sin td { background: color-mix(in srgb, var(--rojo) 5%, var(--sup-1)); }
.hoja tr.fila-parcial_con td { background: color-mix(in srgb, var(--ambar) 6%, var(--sup-1)); }
/* LOS ÍCONOS DE LOS MEDIOS (App\Servicios\IconoDeMedio): el fajo de
   soles en verde, el ícono de la app Yape (con punto de oro si fue a un
   celular personal), el logo de cada banco y, si no hay logo, el edificio */
/* mc-medio y no «medio»: .medio span es el botón-píldora de la caja propia de agosto */
.mc-medio { display: inline-flex; align-items: center; gap: .42rem; }
/* el cobro repartido en varios medios (05/10/2026): «que no se vea 2 veces Yape»; lo dicen sus partes (medios-cobro) */
.mc-medio.mc-repartido { display: none; }
.ico-medio { flex: none; display: inline-block; vertical-align: middle; }
.ico-efectivo { width: 1.65rem; height: .95rem; color: var(--verde); }
.ico-banco, .ico-otro { width: 1.1rem; height: 1.1rem; color: var(--m-banco, var(--gris)); }
.ico-otro { color: var(--gris); }
.ico-app { width: 1.15rem; height: 1.15rem; border-radius: 22%; }
.ico-app.con-punto { position: relative; }
.ico-app .ico-app-img { width: 100%; height: 100%; border-radius: 22%; display: block; }
.ico-app.con-punto b { position: absolute; right: -.18rem; top: -.18rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--m-yape_personal); box-shadow: 0 0 0 1.5px var(--sup-1); }
.logo-medio { height: .95rem; width: auto; max-width: 5.5rem; display: inline-block; vertical-align: middle; }
.logo-medio.logo-bbva { height: .8rem; }
.mc-cifras .ico-medio { margin-right: .35rem; vertical-align: -.18em; }
.mc-cifras .ico-efectivo { width: 1.25rem; height: .72rem; }
.mc-cifras .ico-app, .mc-cifras .ico-banco { width: .9rem; height: .9rem; }
.hoja .txt-gris, .mc-medios .txt-gris { color: var(--gris); }
.hoja .txt-mal, .mc-cifras .txt-mal { color: var(--rojo); font-weight: 600; }
.hoja .txt-obs { color: var(--ambar); font-weight: 600; }
.hoja .txt-bien { color: var(--verde-texto); }
.hoja .adjunto-mini img { width: 1.35rem; height: 1.35rem; border-radius: 3px; }
.hoja .adjunto-mini .chip-pdf { font-size: .62rem; padding: 0 .3rem; }
/* LA CAPTURA EN SU CELDA (26/09/2026): la del TMS lleva una etiqueta chica,
   sutil; la que la cajera sube desde Mi caja, nada (y una × para quitarla
   mientras no haya visto bueno); sin foto, en Mi caja, «Subir» */
.cap { display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; }
.cap-tms { font-size: .54rem; font-weight: 700; line-height: 1; letter-spacing: .08em; color: var(--gris); padding: .16rem .26rem .14rem; border: 1px solid var(--linea); border-radius: 3px; background: var(--sup-2); }
/* la captura que NO CUADRA con el cobro (el lector, 02/10/2026): la celda en amarillo, la foto con filo ámbar y su chip */
.hoja td:has(> .cap-alerta), .hoja td:has(> .cap.cap-alerta) { background: color-mix(in srgb, var(--ambar-2) 26%, var(--sup-1)); }
.cap-alerta .adjunto-mini { border-color: var(--ambar); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ambar-2) 70%, transparent); }
.cap-no { font-size: .54rem; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); padding: .16rem .26rem .14rem; border: 1px solid color-mix(in srgb, var(--ambar) 45%, var(--linea)); border-radius: 3px; background: color-mix(in srgb, var(--ambar-2) 35%, var(--sup-1)); cursor: help; }
/* la foto que NO ES UN COMPROBANTE (o no se deja leer): la celda en rojo (02/10/2026: «cuando no es legible, pon también una alerta en rojo») */
.hoja td:has(> .cap-ilegible), .hoja td:has(> .cap.cap-ilegible) { background: var(--rojo-suave); }
.cap-ilegible .adjunto-mini { border-color: var(--rojo); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rojo) 35%, transparent); }
.cap-no.cap-mal { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 45%, var(--linea)); background: var(--rojo-suave); }
.cap-quitar { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--gris); cursor: pointer; }
.cap-quitar:hover { color: var(--rojo); background: var(--sup-2); }
.cap-quitar:disabled { opacity: .4; cursor: progress; }
.cap-subir {
  position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem .1rem .38rem;
  border: 1px dashed color-mix(in srgb, var(--rojo) 55%, var(--linea)); border-radius: 4px;
  font-size: .7rem; font-weight: 700; color: var(--rojo); cursor: pointer; white-space: nowrap;
}
.cap-subir:hover { background: color-mix(in srgb, var(--rojo) 6%, var(--sup-1)); }
.cap-subir:focus-within { outline: 2px solid var(--marca); outline-offset: 1px; }
.cap-subir input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.cap-subir.subiendo { color: var(--gris); border-color: var(--linea); cursor: progress; }
.cap-error { display: block; margin-top: .15rem; max-width: 14rem; font-size: .66rem; font-weight: 600; line-height: 1.25; color: var(--rojo); white-space: normal; }
/* en el teléfono, blancos para el dedo */
@media (pointer: coarse) {
  .cap-subir { padding: .32rem .65rem .32rem .55rem; font-size: .76rem; }
  .cap-quitar { width: 1.9rem; height: 1.9rem; }
}

@media (max-width: 1500px) {
  /* Hoy: los egresos bajan bajo los cobros, en una franja baja */
  .mc-cuerpo.con-lado { grid-template-columns: minmax(0, 1fr); }
  .mc-cuerpo.con-lado .hoja-alta { max-height: calc(100vh - 17.5rem); }
  .mc-cuerpo.con-lado .hoja-lado { max-height: 6.2rem; }
}
@media (max-width: 1100px) {
  .mc-analisis { grid-template-columns: minmax(0, 1fr); }
  .mc-cal-meses { flex-direction: column; }
}
@media (max-width: 1000px) {
  .hoja-alta, .hoja-tramo, .mc-cuerpo.con-lado .hoja-alta, .mc-hojas-altas .hoja-tramo { max-height: 70vh; }
  .mc-rango-panel { position: fixed; left: 1rem; right: 1rem; top: 4rem; width: auto; }
}

/* ===== EL LATERAL (27/09/2026) =====
   «Íconos svg reales de una biblioteca… algo mucho más corporativo». De
   cinco propuestas, el dueño tomó el color y los íconos de una —verde
   petróleo, Phosphor— y la forma de otra: la marca con su puerta, la
   persona arriba (la cajera, con el paisaje de su plaza), los tramos con
   su título y las acciones en una fila al pie. Va al final y con
   `.rail.lat` para ganarle a las capas viejas del riel. */
body.panel .rail.lat {
  --lat-fondo: #16393C; --lat-fondo-2: #0F2B2E; --lat-texto: #C3D5D2; --lat-claro: #FFFFFF;
  --lat-icono: #A9C8C2; --lat-tenue: #8FB0AB; --lat-menta: #6FD6B2; --lat-linea: rgba(255, 255, 255, .08);
  --lat-velo: rgba(255, 255, 255, .06); --lat-activo: rgba(255, 255, 255, .1);
  gap: 12px; padding: 14px 12px 12px; overflow-x: hidden;
  background: linear-gradient(180deg, var(--lat-fondo), var(--lat-fondo-2));
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-right: 0; box-shadow: none; color: var(--lat-texto);
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
/* Hugeicons (27/09/2026): a 20 px, su tamaño de dibujo más cercano, para que la línea caiga limpia */
body.panel .rail.lat .ic { width: 20px; height: 20px; flex: none; }
body.panel .rail.lat :is(a, button):focus-visible { outline: 2px solid var(--lat-menta); outline-offset: 2px; }

/* la marca y su puerta */
/* la marca y, debajo, su puerta en letra tenue (27/09/2026: «debajo del logo, más sutil») */
body.panel .rail.lat .lat-marca { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: 2px 4px; color: var(--lat-claro); text-decoration: none; }
body.panel .rail.lat .lat-marca .marca-q { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border-radius: 8px; background: var(--marca); }
body.panel .rail.lat .lat-marca .marca-q img { width: 70%; height: 70%; }
body.panel .rail.lat .lat-mt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
body.panel .rail.lat .lat-marca b { font-size: .92rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
body.panel .rail.lat .lat-marca small { font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: var(--lat-tenue); opacity: .8; }

/* la persona: su banda (el paisaje de su plaza, o el verde de la marca), sus iniciales y quién es */
body.panel .rail.lat .lat-perfil {
  display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; flex: none;
  padding: 0 10px 12px; border-radius: 12px; background: var(--lat-velo); box-shadow: inset 0 0 0 1px var(--lat-linea);
}
body.panel .rail.lat .lat-banda { align-self: stretch; height: 58px; margin: 0 -10px; background: linear-gradient(120deg, var(--marca-osc), var(--marca)); }
body.panel .rail.lat .lat-banda.con-plaza { background: var(--tk-fondo) center var(--tk-foco, 42%) / cover no-repeat; }
body.panel .rail.lat .lat-av {
  display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
  background: var(--lat-menta); color: var(--lat-fondo-2); font-size: .9rem; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 0 0 3px var(--lat-fondo); overflow: hidden;
}
body.panel .rail.lat .lat-foto { width: 100%; height: 100%; object-fit: cover; }
body.panel .rail.lat .lat-nombre { margin-top: 6px; max-width: 100%; font-size: .9rem; font-weight: 800; color: var(--lat-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.panel .rail.lat .lat-perfil small { font-size: .74rem; font-weight: 600; color: var(--lat-tenue); }

/* los tramos, con su título, y las puertas */
body.panel .rail.lat .lat-nav { display: flex; flex-direction: column; gap: 10px; }
body.panel .rail.lat .lat-g { display: flex; flex-direction: column; gap: 2px; }
body.panel .rail.lat .lat-g + .lat-g { padding-top: 8px; border-top: 1px solid var(--lat-linea); }
body.panel .rail.lat .lat-tit { padding: 0 12px 4px; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lat-tenue); }
body.panel .rail.lat .lat-it {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 34px; padding: 0 10px 0 12px; border-radius: 7px;
  font-size: .86rem; font-weight: 600; color: var(--lat-texto); text-decoration: none; transition: background .15s, color .15s;
}
body.panel .rail.lat .lat-it .ic { color: var(--lat-icono); transition: color .15s; }
body.panel .rail.lat .lat-it:hover { background: var(--lat-velo); color: var(--lat-claro); }
body.panel .rail.lat .lat-it:hover .ic { color: var(--lat-claro); }
body.panel .rail.lat .lat-it.actual { background: var(--lat-activo); color: var(--lat-claro); font-weight: 700; }
body.panel .rail.lat .lat-it.actual .ic { color: var(--lat-menta); }
body.panel .rail.lat .lat-it.actual::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lat-menta); }

/* al pie: Mi clave, la web, la otra puerta y salir, en una fila */
/* 27/09/2026: «sutiles, más pequeños, más integrados»: dos íconos chicos,
   sin marco, alineados con los del menú */
body.panel .rail.lat .lat-pie { margin-top: auto; display: flex; align-items: center; gap: 2px; padding: 8px 0 0 4px; border-top: 1px solid var(--lat-linea); }
body.panel .rail.lat .lat-pie form { display: flex; }
body.panel .rail.lat .lat-bt {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--lat-tenue); opacity: .85; transition: color .15s, background .15s, opacity .15s;
}
body.panel .rail.lat .lat-bt .ic { width: 18px; height: 18px; }
body.panel .rail.lat .lat-bt:hover, body.panel .rail.lat .lat-bt.actual { color: var(--lat-claro); background: var(--lat-velo); opacity: 1; }
body.panel .rail.lat .lat-bt.actual { color: var(--lat-menta); }
body.panel .rail.lat .lat-bt.salir:hover { color: #F08A8A; }
/* el TMS, ahora (02/10/2026): cuándo llegó la última foto y el botón que la trae ya */
body.panel .rail.lat .lat-tms { display: flex; align-items: center; gap: 5px; min-width: 0; margin-left: auto; padding-left: 6px; }
body.panel .rail.lat .lat-tms-t { font-size: .64rem; font-weight: 800; letter-spacing: .14em; color: var(--lat-tenue); }
body.panel .rail.lat .lat-tms-c { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; color: var(--lat-texto); }
body.panel .rail.lat .lat-tms-recargar { padding: 0; border: 0; background: none; font: inherit; color: var(--lat-menta); font-weight: 700; cursor: pointer; }
body.panel .rail.lat .lat-tms-bt:disabled { cursor: default; opacity: .5; }
body.panel .rail.lat .lat-tms:is([data-estado="pedido"], [data-estado="curso"]) .lat-tms-bt { opacity: 1; color: var(--lat-menta); }
body.panel .rail.lat .lat-tms:is([data-estado="pedido"], [data-estado="curso"]) .lat-tms-bt .ic { animation: lat-tms-gira 1.1s linear infinite; }
@keyframes lat-tms-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.panel .rail.lat .lat-tms .lat-tms-bt .ic { animation: none; } }
@media (prefers-reduced-motion: reduce) { body.panel .rail.lat :is(.lat-it, body.panel .rail.lat .lat-it .ic, body.panel .rail.lat .lat-bt) { transition: none; } }

/* el número de lo que espera en un acceso del lateral (27/09/2026: las remesas en camino) */
body.panel .rail.lat .lat-cuenta {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--lat-menta); color: var(--lat-fondo-2);
  font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* 28/09/2026: si en el Buzón hay algo urgente, el número va en rojo con la campanita que se mueve */
body.panel .rail.lat .lat-cuenta.lat-urgente { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px 0 5px; background: var(--rojo); color: #FFFFFF; }
body.panel .rail.lat .lat-cuenta.lat-urgente .lat-campana { flex: none; width: 12px; height: 12px; overflow: visible; transform-origin: 50% 10%; animation: bzn-campana 2.4s ease-in-out infinite; }
body.panel .rail.lat .lat-cuenta.lat-urgente .lat-campana path:last-child { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { body.panel .rail.lat .lat-cuenta.lat-urgente .lat-campana { animation: none; } }

/* ===== LAS REMESAS (27/09/2026) =====
   El efectivo que cada caja tiene por rendir y sus envíos a tesorería. La
   cifra grande va en el mismo petróleo del lateral; el resto, en hoja. */
.rm-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.rm-cab h1 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); }
.rm-cab p { margin: .12rem 0 0; font-size: .82rem; color: var(--texto-2); }
.rm-boton {
  display: inline-flex; align-items: center; gap: .45rem; height: 2.1rem; padding: 0 .9rem; border: 1px solid var(--linea-2); border-radius: 7px;
  background: var(--sup-1); color: var(--tinta); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.rm-boton .ic { width: 18px; height: 18px; flex: none; }
.rm-boton:hover { border-color: var(--marca); color: var(--marca-osc); }
.rm-boton.rm-primario { background: var(--marca-osc); border-color: var(--marca-osc); color: #FFFFFF; }
.rm-boton.rm-primario:hover { background: var(--marca); border-color: var(--marca); color: #FFFFFF; }
.rm-boton:focus-visible, .rm-mini:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.rm-boton:disabled, .rm-boton:disabled:hover { opacity: .45; cursor: default; border-color: var(--linea); }
.rm-boton.rm-primario:disabled, .rm-boton.rm-primario:disabled:hover { background: var(--marca-osc); border-color: var(--marca-osc); color: #FFFFFF; }
.rm-tit { margin: .9rem 0 .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

.rm-grande {
  --rm-fondo: #16393C; --rm-fondo-2: #0F2B2E; --rm-tenue: #8FB0AB; --rm-claro: #A9C8C2;
  display: grid; grid-template-columns: minmax(15rem, auto) 1fr; margin-bottom: .6rem; overflow: hidden;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px;
}
.rm-cifra { display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: .95rem 1.3rem; background: linear-gradient(135deg, var(--rm-fondo), var(--rm-fondo-2)); color: #FFFFFF; }
.rm-cifra span { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rm-tenue); }
.rm-cifra b { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-cifra small { font-size: .74rem; color: var(--rm-claro); }
/* el verde es el saldo (01/10/2026): en rojo claro si quedó debajo de cero */
.rm-cifra b.rm-neg { color: #F6B4B4; }
/* el billete de la casa, grande, encima de «Efectivo»: se entiende de un vistazo que
   ese cuadro es el efectivo; en un verde que se lee sobre el fondo oscuro */
.rm-cifra-ico { margin-bottom: .45rem; line-height: 0; }
.rm-cifra-ico .ico-efectivo { width: 5.2rem; height: 3rem; color: color-mix(in srgb, var(--verde) 60%, #FFFFFF); }
@media (max-width: 640px) {
  .rm-grande { grid-template-columns: 1fr; }
  .rm-cifra b { font-size: 2rem; }
}

.hoja tr.rm-elegida td { background: color-mix(in srgb, var(--marca-suave) 55%, var(--sup-1)); }
.rm-estado { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.rm-e-en_camino { background: var(--ambar-suave); color: var(--ambar); }
.rm-e-recibida { background: var(--verde-suave); color: var(--verde-texto); }
.rm-e-con_diferencia { background: var(--rojo-suave); color: var(--rojo); }
.rm-e-en_curso { background: var(--sup-3); color: var(--texto-2); }
.rm-e-arqueo { background: var(--marca-suave); color: var(--marca-osc); }
.rm-quitar { width: 1%; white-space: nowrap; text-align: right; }
.hoja td.rm-quitar { padding-top: 0; padding-bottom: 0; }
.rm-quitar form { display: inline; }
.rm-mini {
  height: 1.35rem; padding: 0 .55rem; border: 1px solid var(--linea-2); border-radius: 5px; background: var(--sup-1);
  font: inherit; font-size: .72rem; font-weight: 700; line-height: 1; color: var(--texto-2); cursor: pointer;
}
.rm-mini:hover { border-color: var(--marca); color: var(--marca-osc); }
.rm-mini.rm-mini-fuerte { background: var(--marca-osc); border-color: var(--marca-osc); color: #FFFFFF; }

/* los diálogos */
.rm-dialogo { width: min(31rem, calc(100vw - 32px)); margin: auto; padding: 0; border: 0; border-radius: 14px; background: var(--sup-1); color: var(--tinta); box-shadow: 0 30px 60px -20px rgba(15, 31, 41, .45); }
.rm-dialogo::backdrop { background: rgba(15, 31, 41, .38); }
.rm-dialogo form { display: grid; gap: .85rem; padding: 0 1.3rem 1.25rem; }
/* la cabecera del diálogo: el ícono de lo que se hace y el título, sobre una banda (27/09/2026, noche) */
.rm-dialogo h2 { display: flex; align-items: center; gap: .65rem; margin: 0 -1.3rem .15rem; padding: .85rem 1.3rem; border-bottom: 1px solid var(--linea); background: var(--sup-2); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.rm-h2-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: var(--marca-suave); color: var(--marca-osc); flex: none; }
.rm-h2-ico .ic { width: 19px; height: 19px; }
.rm-quien { margin: -.3rem 0 0; font-size: .82rem; color: var(--texto-2); }
.rm-campo { display: grid; gap: .3rem; min-width: 0; align-content: start; }
.rm-campo > span:first-child { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.rm-campo input, .rm-campo textarea, .rm-campo select, .rm-sobre input {
  width: 100%; min-width: 0; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--linea-2); border-radius: 8px;
  background: var(--sup-1); color: var(--tinta); font: inherit; font-size: .9rem; box-sizing: border-box;
}
.rm-campo input:hover, .rm-campo textarea:hover, .rm-campo select:hover, .rm-sobre input:hover { border-color: color-mix(in srgb, var(--linea-2) 60%, var(--gris)); }
/* el monto, con su moneda dentro y en grande */
.rm-monto-caja { position: relative; display: block; }
.rm-monto-caja i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .82rem; font-weight: 700; color: var(--texto-2); pointer-events: none; }
.rm-campo .rm-monto-caja input { padding-left: 2.2rem; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rm-campo textarea { height: auto; padding: .5rem .7rem; resize: vertical; }
.rm-campo input:focus-visible, .rm-campo textarea:focus-visible, .rm-campo select:focus-visible, .rm-sobre input:focus-visible { outline: 2px solid var(--marca); outline-offset: 0; border-color: var(--marca); }
.rm-fila2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; align-items: start; }
/* con el selector de fecha abierto, ese campo toma la fila entera: el mes necesita su sitio */
.rm-fila2 > .rm-campo:has(.fh-panel:not([hidden])) { grid-column: 1 / -1; }
.rm-sobres { display: grid; gap: .4rem; }
.rm-sobre { display: grid; grid-template-columns: 6rem 1fr 2.1rem; gap: .4rem; }
.rm-x { border: 1px solid var(--linea); border-radius: 7px; background: var(--sup-2); color: var(--gris); font-size: 1.1rem; cursor: pointer; }
.rm-x:hover { color: var(--rojo); border-color: var(--rojo); }
.rm-sobres-pie { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .2rem; }
.rm-suma { font-size: .78rem; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.rm-suma.mal { color: var(--rojo); }
.rm-seg { display: inline-flex; width: max-content; border: 1px solid var(--linea-2); border-radius: 7px; overflow: hidden; }
.rm-seg label { position: relative; }
.rm-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rm-seg span { display: block; padding: .4rem .9rem; font-size: .82rem; font-weight: 700; color: var(--texto-2); }
.rm-seg label + label span { border-left: 1px solid var(--linea-2); }
.rm-seg input:checked + span { background: var(--marca-osc); color: #FFFFFF; }
.rm-seg input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: -2px; }
.rm-pie { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .2rem; }
@media (max-width: 480px) { .rm-fila2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rm-boton { transition: none; } }

/* ===== EL SELLO PERMANENTE (27/09/2026) =====
   Con visto bueno la perilla queda quieta con el pulgar arriba; la ventana
   que lo confirma lleva el resumen de la caja */
.rv[data-sellada="1"] .rv-perilla { cursor: default; }
.rv[data-sellada="1"] .rv-punto, .rv[data-sellada="1"] .rv-rotulos span { cursor: default; pointer-events: none; }
.rv-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem; margin: 0; }
.rv-resumen > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.rv-resumen dt { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.rv-resumen dd { margin: 0; font-size: .92rem; font-weight: 700; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-resumen .falta dd { color: var(--ambar); }
.rv-permanente { margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--linea); font-size: .8rem; font-weight: 600; color: var(--texto-2); }

/* ============================================================
   LO REVISADO, A LA VISTA (27/09/2026). En el calendario del Historial, el
   día con el visto bueno va en verde suave y el observado —o revisado a
   medias, en el vistazo de todas las cajas— en ámbar suave; el tramo
   elegido pasa a gris para no confundirse con el verde. En las hojas, la
   fila del cobro o de la orden revisada, igual y más leve (cada fila con el
   color de SU jornada: PartesDeCaja::revisionPorCobro).
   ============================================================ */
.mc-cal-dia.dentro { background: color-mix(in srgb, var(--tinta) 8%, var(--sup-1)); }
.mc-cal-dia.dentro:hover:not(:disabled) { background: color-mix(in srgb, var(--tinta) 14%, var(--sup-1)); }
.mc-cal-dia.r-vb:not(.inicio):not(.fin) { background: var(--verde-suave); color: var(--verde-texto); border-radius: 6px; }
.mc-cal-dia.r-obs:not(.inicio):not(.fin) { background: var(--ambar-suave); border-radius: 6px; }
.mc-cal-dia.dentro.r-vb:not(.inicio):not(.fin), .mc-cal-dia.dentro.r-obs:not(.inicio):not(.fin) { border-radius: 0; }
.mc-cal-dia.r-vb:hover:not(:disabled):not(.inicio):not(.fin) { background: color-mix(in srgb, var(--verde) 24%, var(--sup-1)); }
.mc-cal-dia.r-obs:hover:not(:disabled):not(.inicio):not(.fin) { background: color-mix(in srgb, var(--ambar) 24%, var(--sup-1)); }

/* el aviso del cobro que dejó su orden a medias (fila-parcial_*) manda sobre el color */
.hoja tr[data-revision="revisado"]:not(.fila-parcial_sin):not(.fila-parcial_con) td { background: color-mix(in srgb, var(--verde-suave) 62%, var(--sup-1)); }
.hoja tr[data-revision="observado"]:not(.fila-parcial_sin):not(.fila-parcial_con) td { background: color-mix(in srgb, var(--ambar-suave) 78%, var(--sup-1)); }
.hoja tbody tr[data-revision="revisado"]:not(.fila-parcial_sin):not(.fila-parcial_con):hover td { background: var(--verde-suave); }
.hoja tbody tr[data-revision="observado"]:not(.fila-parcial_sin):not(.fila-parcial_con):hover td { background: var(--ambar-suave); }

/* ============================================================
   LA CAJA EN TRES COLUMNAS (27/09/2026, segunda vuelta). El dueño dibujó:
   la cifra con sus cobros en efectivo, al lado unos cuadros chicos con todo
   lo que cobró de siempre por banco y Yape (solo datos), y abajo tres columnas —ingresos,
   egresos, envíos— cada una con su «+». Pieza: panel/partes/remesas-caja.
   ============================================================ */
/* COMPACTA (27/09/2026, tarde): «no me gusta los espaciados». El verde y, a
   su lado, «Banco y Yape», los dos a la misma altura y a su ancho
   natural; sin sitio, el panel baja. (Noche: el verde ya no lleva la lista de
   jornadas, y los cuadros sueltos de banco y Yape —«parecen sin alma»— son un
   libro: medio, su parte del total, cobros y monto.) */
.rm-arriba { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; margin-bottom: .7rem; }
.rm-arriba .rm-grande { flex: 0 0 auto; width: max-content; min-width: 19rem; max-width: 100%; margin-bottom: 0; grid-template-columns: 1fr; }
.rm-arriba .rm-cifra { justify-content: center; gap: .3rem; padding: 1.1rem 1.5rem; }
.rm-arriba .rm-cifra b { font-size: 2.45rem; }

.rm-medios { flex: 1 1 26rem; max-width: 40rem; min-width: 0; display: flex; flex-direction: column; background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.rm-medios-cab { display: flex; align-items: baseline; gap: .6rem; padding: .6rem .95rem .5rem; border-bottom: 1px solid var(--linea); }
.rm-medios-cab h2 { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.rm-medios-cab span { font-size: .74rem; color: var(--texto-2); }
.rm-medios-cab b { margin-left: auto; font-size: 1.02rem; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-mt { width: 100%; border-collapse: collapse; font-size: .8rem; }
.rm-mt th { padding: .38rem .95rem .3rem; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); text-align: left; background: var(--sup-2); border-bottom: 1px solid var(--linea); }
.rm-mt td { padding: .42rem .95rem; border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent); vertical-align: middle; white-space: nowrap; }
.rm-mt tbody tr:last-child td { border-bottom: 0; }
.rm-mt tbody tr:hover td { background: color-mix(in srgb, var(--sup-2) 70%, var(--sup-1)); }
.rm-mt .num { text-align: right; }
.rm-mt .mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.rm-mt td b { font-weight: 700; color: var(--tinta); }
.rm-mt .mc-medio > span { font-weight: 600; color: var(--tinta); }
.rm-mt .rm-mt-parte { width: 42%; }
.rm-mt td.rm-mt-parte > div { display: flex; align-items: center; gap: .55rem; }
.rm-mt-barra { flex: 1; height: 6px; border-radius: 3px; background: var(--sup-2); overflow: hidden; }
.rm-mt-barra i { display: block; height: 100%; border-radius: 3px; background: var(--m, var(--gris)); }
.rm-mt-parte small { width: 2.6rem; text-align: right; font-size: .7rem; color: var(--texto-2); }
.rm-medios-pie { margin-top: auto; padding: .35rem .95rem .45rem; border-top: 1px solid var(--linea); font-size: .68rem; color: var(--gris); text-align: right; }
/* EL BCP, GLOBAL (29/09/2026): «BCP será global y bajo que haya BCP transferencia y Yape transferencia, que la
   suma de los 2 dé el monto final». Debajo de su fila, colgadas del logo con la rama fina de la Configuración,
   la Transferencia y el Yape —sus partes—, sangradas y en tono menor; entre el BCP y sus partes no hay raya */
.rm-mt { --rm-rama: color-mix(in srgb, var(--m-bcp) 38%, var(--linea)); --rm-rama-x: 1.3rem; }
.rm-mt tr.rm-mt-con-subs td, .rm-mt tr.rm-mt-sub:has(+ tr.rm-mt-sub) td { border-bottom-color: transparent; }
.rm-mt tr.rm-mt-sub td { padding-top: .28rem; padding-bottom: .28rem; }
.rm-mt tr.rm-mt-sub td:first-child { position: relative; padding-left: calc(var(--rm-rama-x) + .95rem); }
.rm-mt tr.rm-mt-sub td:first-child::before {
  content: ''; position: absolute; left: var(--rm-rama-x); top: 0; height: 50%; width: .6rem; pointer-events: none;
  border-left: 1.5px solid var(--rm-rama); border-bottom: 1.5px solid var(--rm-rama); border-bottom-left-radius: 4px;
}
/* la primera sube hasta el logo; la de en medio sigue hasta la de abajo: ├ y └ */
.rm-mt tr.rm-mt-con-subs + tr.rm-mt-sub td:first-child::before { top: -.3rem; height: calc(50% + .3rem); }
.rm-mt tr.rm-mt-sub:has(+ tr.rm-mt-sub) td:first-child::after { content: ''; position: absolute; left: var(--rm-rama-x); top: 50%; bottom: 0; border-left: 1.5px solid var(--rm-rama); pointer-events: none; }
.rm-mt tr.rm-mt-sub .mc-medio { gap: .38rem; }
.rm-mt tr.rm-mt-sub .mc-medio > span { font-size: .76rem; font-weight: 600; color: var(--texto-2); }
.rm-mt tr.rm-mt-sub .ico-app { width: 1rem; height: 1rem; }
.rm-mt tr.rm-mt-sub td.mono { font-size: .76rem; color: var(--texto-2); }
.rm-mt tr.rm-mt-sub .rm-mt-barra { height: 4px; }
.rm-mt tr.rm-mt-sub .rm-mt-parte small { font-size: .66rem; }
.ico-transferencia { width: 1rem; height: 1rem; color: var(--m-bcp, var(--texto-2)); }
@media (max-width: 1180px) {
  .rm-medios { flex-basis: 100%; max-width: none; }
}
/* en el teléfono: el verde a lo ancho y el libro sin la barra */
@media (max-width: 640px) {
  .rm-arriba .rm-grande { width: 100%; min-width: 0; }
  .rm-mt th, .rm-mt td { padding-left: .6rem; padding-right: .6rem; }
  .rm-mt { --rm-rama-x: .95rem; }
  .rm-mt tr.rm-mt-sub td:first-child { padding-left: calc(var(--rm-rama-x) + .85rem); }
  .rm-mt .rm-mt-parte { width: auto; }
  .rm-mt-barra { display: none; }
}

.rm-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.rm-col { background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; min-width: 0; container-type: inline-size; }
.rm-col-cab { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem .45rem .85rem; border-bottom: 1px solid var(--linea); background: var(--sup-2); }
.rm-col-cab { flex-wrap: wrap; row-gap: .15rem; }
.rm-col-cab h2 { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.rm-col-cab small { font-size: .72rem; font-weight: 700; color: var(--ambar); white-space: nowrap; }
/* columna angosta: «En camino» baja a su propia línea y el «+» no se sale */
@container (max-width: 23rem) {
  .rm-col-cab small { order: 9; flex-basis: 100%; }
}
.rm-col-cab b { margin-left: auto; font-size: .95rem; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-mas { width: 1.7rem; height: 1.7rem; border: 1px solid var(--marca-osc); border-radius: 7px; background: var(--marca-osc); color: #FFFFFF; font-size: 1.15rem; line-height: 1; cursor: pointer; flex: none; }
.rm-mas:hover { background: var(--marca); border-color: var(--marca); }
.rm-mas:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.rm-lista { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 24rem); overflow: auto; }
.rm-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .6rem; align-items: center; padding: .38rem .85rem; border-bottom: 1px solid var(--linea); font-size: .8rem; }
.rm-item:last-child { border-bottom: 0; }
.rm-item .rm-cuando { color: var(--texto-2); font-size: .74rem; white-space: nowrap; }
.rm-item .rm-que { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); }
.rm-item > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-item .rm-pie-item { grid-column: 2 / -1; display: flex; align-items: center; gap: .5rem; margin-top: .15rem; }
.rm-item .rm-pie-item form { display: inline; }
.rm-vacio { padding: .6rem .85rem; font-size: .78rem; color: var(--gris); }
/* el número de serie de cada ingreso y egreso, su comprobante y el clip de su foto (29/09/2026);
   lo anulado queda a la vista, tachado, con su motivo, y no cuenta */
.rm-item .rm-serie.mono { display: inline-block; margin-right: .45rem; font-family: var(--f-mono); font-size: .7rem; font-weight: 500; letter-spacing: .02em; color: var(--texto-2); }
.rm-item-mov .rm-pie-item { flex-wrap: wrap; row-gap: .2rem; font-size: .72rem; color: var(--texto-2); }
.rm-comp { font-weight: 700; color: var(--verde-texto); white-space: nowrap; }
.rm-comp.rm-comp-sin { color: var(--ambar); }
.rm-contra { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-clip { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 6px; color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linea-2); }
.rm-clip .ic { width: 14px; height: 14px; }
.rm-clip:hover { color: var(--marca-osc); box-shadow: inset 0 0 0 1px var(--marca); }
.rm-clip:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.rm-mini.rm-mini-anular { margin-left: auto; }
.rm-e-anulado { max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--rojo-suave); color: var(--rojo); }
.rm-anulado .rm-que, .rm-anulado > b { color: var(--gris); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rojo) 70%, transparent); }
.rm-anulado .rm-serie { color: var(--rojo); }
.rm-anular-que { margin: 0 0 .8rem; font-size: .84rem; color: var(--texto-2); }
.bcj-serie { font-family: var(--f-mono); font-size: .92em; color: var(--texto-2); }
.bcj-anulado { color: var(--gris); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rojo) 70%, transparent); }
.bcj-anulado .bcj-serie { display: inline-block; color: var(--rojo); }
.bvl-serie { margin-right: .4rem; font-family: var(--f-mono); font-size: .92em; font-weight: 500; color: var(--texto-2); white-space: nowrap; }
@media (max-width: 900px) {
  .rm-columnas { grid-template-columns: 1fr; }
  .rm-lista { max-height: none; }
}

/* ============================================================
   LA BÓVEDA, UNA CÁMARA (27/09/2026, noche). «Como entrar a una cámara donde
   están los depósitos: solo la plata que hay, con sus logos grandes». El
   verde (el efectivo de la bóveda, con su arqueo) y los bolsillos de banco y
   Yape; abajo, Llegadas · Salidas · Recolección, las columnas de Remesa.
   ============================================================ */
.bv-camara { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; margin-bottom: .7rem; }
.bv-camara .bv-efectivo { flex: 0 0 auto; width: max-content; min-width: 19rem; max-width: 100%; margin-bottom: 0; grid-template-columns: 1fr; }
.bv-efectivo .rm-cifra { position: relative; justify-content: center; gap: .3rem; padding: 1.1rem 1.5rem 1.2rem; }
.bv-efectivo .rm-cifra b { font-size: clamp(1.6rem, 9cqi, 2.45rem); }
.bv-efectivo .rm-cifra { container-type: inline-size; }
.bv-camara .bv-efectivo { min-width: 21rem; }
/* (el botón «Configurar» de la cámara, .bv-arqueo, se fue el 28/09/2026: ahora es el tornillo, .bv-tornillo) */

/* 29/09/2026: tres tarjetas y nada más (BCP, BBVA, Yapes personales): se reparten el ancho de la fila,
   sin huecos al final (una rejilla dejaba vacías las columnas de Interbank y Transferencias) */
.bv-bolsillos { flex: 1 1 30rem; min-width: 0; display: flex; flex-wrap: wrap; gap: .6rem; align-content: flex-start; }
.bv-bolsillo { --bv-px: 1rem; --bv-pb: .8rem; flex: 1 1 12.5rem; display: flex; flex-direction: column; gap: .2rem; padding: .85rem var(--bv-px) var(--bv-pb); background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; border-top: 3px solid var(--m, var(--linea)); container-type: inline-size; min-width: 0; }
.bv-logo { display: flex; align-items: center; gap: .55rem; min-height: 2.2rem; margin-bottom: .2rem; }
.bv-logo span { font-size: .95rem; font-weight: 700; color: var(--tinta); }
.bv-logo .logo-medio { height: 1.7rem; max-width: 7.5rem; }
.bv-logo .logo-medio.logo-bbva { height: 1.35rem; }
.bv-logo .ico-app { width: 2.1rem; height: 2.1rem; }
.bv-logo .ico-banco, .bv-logo .ico-otro { width: 2rem; height: 2rem; }
/* el monto cabe siempre: se achica con el cuadro (S/ 1,328,705.91 en un cuadro de 12.5 rem) */
.bv-bolsillo > b { font-size: clamp(.95rem, 7.4cqi, 1.3rem); font-weight: 800; color: var(--tinta); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bv-bolsillo > small { font-size: .72rem; color: var(--texto-2); }
/* 01/10/2026: cada tarjeta de la Bóveda elige su libro (panel/partes/boveda-cuentas-js): el efectivo,
   de entrada; un banco, su historial. La elegida lleva el anillo de su color */
.bv-camara [data-cuenta] { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.bv-camara [data-cuenta]:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.bv-bolsillo.bv-elegida { box-shadow: 0 0 0 2px var(--m, var(--marca)); }
.bv-efectivo[data-cuenta].bv-elegida { box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 55%, transparent); }
.bv-hist[hidden] { display: none; }
.bv-vacio { flex: 1 0 100%; margin: 0; font-size: .68rem; color: var(--gris); text-align: right; }
.bv-vacio { text-align: left; font-size: .8rem; }
/* EL BCP, GLOBAL Y CON SU DESGLOSE (29/09/2026): «BCP será global y bajo que haya BCP transferencia y Yape
   transferencia, que la suma de los 2 dé el monto final de BCP, y eso también va para la Bóveda». Colgado del
   total, en una rama fina, lo que lo compone —el saldo inicial del acta, la Transferencia y el Yape desde el
   acta—, en columnas: nombre, su fecha o sus cobros, y el monto. En la tarjeta angosta, la fecha o los
   cobros bajan bajo el nombre y el monto queda a la derecha */
.bv-partes {
  --rama: color-mix(in srgb, var(--m, var(--linea-2)) 45%, var(--linea));
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: .55rem; row-gap: .3rem; margin: .45rem 0 .55rem; padding: 0;
}
.bv-parte { position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding-left: 1rem; min-width: 0; font-size: .72rem; line-height: 1.3; }
.bv-parte > span { min-width: 0; font-weight: 700; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-parte > small { font-size: .64rem; color: var(--gris); text-align: right; white-space: nowrap; }
.bv-parte.p-inicial > small { font-family: var(--f-mono); font-size: .62rem; }
.bv-parte > b { font-size: .82rem; font-weight: 700; color: var(--tinta); text-align: right; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* la rama: baja del total (o de la hermana de arriba) hasta el nombre… */
.bv-parte::before {
  content: ''; position: absolute; left: .25rem; top: -.3rem; height: calc(.3rem + .68em); width: .5rem; pointer-events: none;
  border-left: 1.5px solid var(--rama); border-bottom: 1.5px solid var(--rama); border-bottom-left-radius: 4px;
}
.bv-parte:first-child::before { top: -.45rem; height: calc(.45rem + .68em); }
/* …y el tronco sigue hasta la de abajo */
.bv-parte:not(:last-child)::after { content: ''; position: absolute; left: .25rem; top: .68em; bottom: -.3rem; border-left: 1.5px solid var(--rama); pointer-events: none; }
@container (max-width: 14.5rem) {
  .bv-partes { grid-template-columns: minmax(0, 1fr) auto; row-gap: .4rem; }
  .bv-parte { align-items: center; }
  .bv-parte > span { grid-column: 1; grid-row: 1; }
  .bv-parte > small { grid-column: 1; grid-row: 2; text-align: left; line-height: 1.15; }
  .bv-parte > b { grid-column: 2; grid-row: 1 / 3; }
}
/* la más angosta (la Bóveda con la Recolección al lado, de 1500 px para arriba): el nombre entero arriba y, debajo,
   la fecha o los cobros y el monto */
@container (max-width: 12rem) {
  .bv-parte { align-items: baseline; }
  .bv-parte > span { grid-column: 1 / -1; }
  .bv-parte > b { grid-row: 2; }
}
/* LAS SUB-CUENTAS DEL BCP: BCP Tesorería y BCP Dólares son otra cosa —no suman al BCP ni vienen del TMS—:
   aparte del desglose, en su bandeja al pie de la tarjeta (otra raya, otro fondo), lado a lado, cada una con
   su moneda */
.bv-subs {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(5.4rem, 1fr)); gap: .35rem .9rem;
  margin: auto calc(-1 * var(--bv-px)) calc(-1 * var(--bv-pb)); padding: .5rem var(--bv-px) calc(var(--bv-pb) - .1rem);
  background: var(--sup-2); border-top: 1px dashed var(--linea-2); border-radius: 0 0 7px 7px;
}
.bv-sub { display: grid; gap: .05rem; min-width: 0; }
.bv-sub > span { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-sub > b { font-size: .84rem; font-weight: 800; line-height: 1.25; color: var(--tinta); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bv-sub > b i { font-style: normal; font-size: .64rem; font-weight: 700; letter-spacing: 0; color: var(--texto-2); }

@media (min-width: 901px) {
  .bv-columnas .rm-lista { max-height: max(14rem, calc(100vh - 26rem)); }
}
.bv-camino .rm-que b, .bv-columnas .rm-que b { font-weight: 700; color: var(--tinta); }
.bv-anulada .rm-que, .bv-anulada > b { text-decoration: line-through; color: var(--gris); }
.bv-recoleccion { display: flex; flex-direction: column; }
.rm-pedido .rm-que b { color: var(--azul-texto); }
.rm-pedido { background: color-mix(in srgb, var(--azul-pastel) 45%, var(--sup-1)); }
/* lo que la Bóveda le mandó a la caja y aún no recibe (01/10/2026) */
.rm-por-recibir { background: var(--ambar-suave); }
.rm-por-recibir .rm-que b { color: color-mix(in srgb, var(--ambar) 72%, var(--tinta)); }
.rm-por-recibir .rm-pie-item { flex-wrap: wrap; row-gap: .2rem; }
.rm-nota-bv { font-size: .72rem; color: var(--texto-2); overflow-wrap: anywhere; }
.rm-recibir-nota:empty { display: none; }
.rm-recibir-nota { margin: -.2rem 0 .1rem; font-size: .8rem; color: var(--texto-2); }
.rm-recibir-dif { margin: -.2rem 0 0; font-size: .78rem; font-weight: 700; color: var(--rojo); }
.rm-col-cab .rc-etq { margin-left: auto; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.rm-col-cab .rc-etq + b { margin-left: 0; }
/* la Configuración: lo que viene en camino, dicho antes de contar (02/10/2026) */
.bvc-transito { margin: 0 0 .5rem; padding: .4rem .7rem; border: 1px solid color-mix(in srgb, var(--ambar) 35%, var(--linea)); border-radius: 6px; background: color-mix(in srgb, var(--ambar) 9%, var(--sup-1)); font-size: .74rem; line-height: 1.35; color: var(--texto-2); }

/* EL CALENDARIO DE LA RECOLECCIÓN: cada día con su plata y su color */
.rc-cal { display: grid; gap: .35rem; }
.rc-cab { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.rc-cab b { font-size: .82rem; font-weight: 700; color: var(--tinta); text-transform: capitalize; }
.rc-cab button { width: 1.75rem; height: 1.75rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup-1); color: var(--tinta); font-size: 1rem; line-height: 1; cursor: pointer; }
.rc-cab button:hover:not(:disabled) { background: var(--sup-2); }
.rc-cab button:disabled { opacity: .3; cursor: default; }
.rc-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.rc-sem { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); text-align: center; padding-bottom: .15rem; }
.rc-nada { min-height: 2.55rem; }
.rc-dia {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 2.75rem; padding: .3rem 0 .15rem;
  border: 1px solid var(--linea); border-radius: 7px; background: var(--sup-1); color: var(--tinta); font: inherit; cursor: pointer;
}
.rc-dia i { position: absolute; top: 2px; left: 4px; font-size: .5rem; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
.rc-dia b { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-dia small { font-size: .6rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.rc-dia:hover:not(:disabled) { border-color: var(--gris); }
.rc-dia:disabled { background: transparent; color: color-mix(in srgb, var(--gris) 45%, transparent); cursor: default; }
.rc-dia.rc-sin b { color: var(--gris); font-weight: 500; }
.rc-dia.rc-hoy { box-shadow: inset 0 0 0 1px var(--texto-2); }
.rc-dia.rc-recogido { background: var(--azul-pastel); border-color: color-mix(in srgb, var(--azul-borde) 55%, transparent); cursor: default; }
.rc-dia.rc-recogido b, .rc-dia.rc-recogido small { color: var(--azul-texto); }
.rc-dia.rc-camino { background: var(--ambar-suave); border-color: color-mix(in srgb, var(--ambar-2) 60%, transparent); cursor: default; }
.rc-dia.rc-camino b, .rc-dia.rc-camino small { color: var(--ambar); }
.rc-dia.rc-pedido { border: 1.5px dashed var(--azul-borde); cursor: default; }
.rc-dia.rc-sel { background: color-mix(in srgb, var(--tinta) 9%, var(--sup-1)); border-color: color-mix(in srgb, var(--tinta) 18%, transparent); }
.rc-dia.rc-ini, .rc-dia.rc-fin { background: var(--tinta); border-color: var(--tinta); }
.rc-dia.rc-ini b, .rc-dia.rc-fin b, .rc-dia.rc-ini small, .rc-dia.rc-fin small { color: var(--sup-1); }
.rc-dia:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.rc-fijo .rc-dia { cursor: default; }
.rc-dia.rc-abierto { background: transparent; border: 1px dashed var(--linea-2); }
.rc-dia.rc-abierto b, .rc-dia.rc-abierto small { color: var(--gris); }
.rc-leyenda { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .64rem; color: var(--texto-2); }
.rc-leyenda span::before { content: ''; display: inline-block; width: .68rem; height: .68rem; margin-right: .3rem; border-radius: 3px; vertical-align: -1px; border: 1px solid transparent; background: var(--sup-1); }
.rc-leyenda .rc-recogido::before { background: var(--azul-pastel); border-color: var(--azul-borde); }
.rc-leyenda .rc-camino::before { background: var(--ambar-suave); border-color: var(--ambar-2); }
.rc-leyenda .rc-pedido::before { border: 1.5px dashed var(--azul-borde); }
.rc-leyenda .rc-abierto::before { border: 1px dashed var(--linea-2); }
.rc-pie { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .45rem .1rem 0; border-top: 1px solid var(--linea); font-size: .82rem; font-weight: 600; color: var(--tinta); }
.rc-pie b { font-size: 1.05rem; font-weight: 800; color: var(--tinta); }
.rm-dialogo .rc-cal { max-width: 22rem; }

/* en el calendario (28/09/2026): rojo lo remesable, amarillo lo que viene en camino,
   gris lo recogido; lo que se elige para solicitar, amarillo fuerte con borde */
.rc-leyenda .rc-remesable::before { background: var(--rojo-suave); border-color: var(--rojo); }
.rc-dia.rc-remesable:not(.rc-sel) { background: var(--rojo-suave); border-color: color-mix(in srgb, var(--rojo) 40%, transparent); }
.rc-dia.rc-remesable:not(.rc-sel) b, .rc-dia.rc-remesable:not(.rc-sel) small { color: var(--rojo); }
.rc-dia.rc-camino { background: var(--ambar-suave); border: 1px solid color-mix(in srgb, var(--ambar-2) 70%, transparent); }
.rc-dia.rc-camino b, .rc-dia.rc-camino small { color: var(--ambar); }
.rc-leyenda .rc-camino::before { background: var(--ambar-suave); border: 1px solid var(--ambar-2); }
.rc-dia.rc-recogido { background: color-mix(in srgb, var(--linea-2) 45%, var(--sup-1)); border-color: color-mix(in srgb, var(--linea-2) 80%, transparent); }
.rc-dia.rc-recogido b, .rc-dia.rc-recogido small { color: var(--texto-2); }
.rc-leyenda .rc-recogido::before { background: color-mix(in srgb, var(--linea-2) 45%, var(--sup-1)); border-color: var(--linea-2); }
.rc-dia.rc-pedido:not(.rc-sel) { border: 1.5px dashed var(--azul-texto); }
/* lo elegido para solicitar: amarillo lleno y con borde, más fuerte que el amarillo pálido de 4–7 días */
.rc-dia.rc-sel { background: color-mix(in srgb, var(--ambar-2) 72%, var(--sup-1)); border: 2px solid var(--ambar); }
.rc-dia.rc-ini, .rc-dia.rc-fin { background: var(--ambar-2); border: 2px solid var(--ambar); box-shadow: inset 0 0 0 1px var(--sup-1); }
.rc-dia.rc-sel b, .rc-dia.rc-sel small, .rc-dia.rc-ini b, .rc-dia.rc-fin b, .rc-dia.rc-ini small, .rc-dia.rc-fin small { color: var(--tinta); }

@media (max-width: 640px) {
  .bv-camara .bv-efectivo { width: 100%; min-width: 0; }
}

/* ============================================================
   LA RECOLECCIÓN EN DOS PANTALLAS (27/09/2026, noche). El dueño, tras
   el desplegable («no se entiende nada») y la cinta de días («esos gráficos
   confunden mucho»): «voy a necesitar 2 interfaces: una global en
   cuadraditos y otra seleccionando la caja».
   LA GLOBAL, en la Bóveda: cada caja en su cuadradito —lo que tiene por
   entregar en grande y UN sello con su situación en palabras, como los
   tickets de Control de cajas—. LA CAJA (panel/boveda-caja): la lista de
   cajas a la izquierda y la elegida a la derecha.
   ============================================================ */
.bv-recoleccion { background: color-mix(in srgb, var(--sup-3) 80%, var(--sup-1)); }
/* 28/09/2026: «ahí debe mostrarse cuánto efectivo tienen» y, donde iba el sello,
   «un calendario de cuadrados en 7 filas, pintado de verde, amarillo y rojo según
   la antigüedad». Todo tiene que caber sin desplazar */
.bv-cuadros { display: grid; align-content: start; gap: 7px; padding: 8px; max-height: max(14rem, calc(100vh - 25rem)); overflow: auto; overscroll-behavior: contain; }
/* en pantalla ancha los bancos van en una fila y sobra alto: la Recolección lo usa para caber entera */
@media (min-width: 1500px) and (min-height: 820px) { .bv-cuadros { max-height: calc(100vh - 19.5rem); } }
.bv-cuadros > ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.bv-cuadros > ul > li { display: flex; min-width: 0; }
body.panel a.bv-cuadro {
  flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px;
  padding: 7px 10px 7px 11px; border: 1px solid var(--linea); border-radius: 4px; background: var(--sup-1); color: var(--tinta);
  transition: background-color .14s ease, border-color .14s ease;
}
body.panel a.bv-cuadro:hover { background: var(--sup-2); border-color: var(--linea-2); }
body.panel a.bv-cuadro:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
body.panel a.bv-cuadro.actual { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
body.panel a.bv-cuadro.cero { background: transparent; border-color: var(--linea-2); }
body.panel a.bv-cuadro.cero:hover { background: var(--sup-1); }
.bv-cuadro.cero .bv-cu-nom { color: var(--texto-2); }
.bv-cuadro.cero .bv-cu-mon { font-weight: 600; color: var(--gris); }
.bv-cu-texto { display: grid; gap: 1px; min-width: 0; }
.bv-cu-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 700; line-height: 1.25; }
.bv-cu-pla { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; font-weight: 500; line-height: 1.25; color: var(--texto-2); }
.bv-cu-mon { margin-top: 2px; font-size: 1.12rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bv-cu-mon small { margin-right: .22rem; font-size: .62rem; font-weight: 700; letter-spacing: 0; color: var(--gris); }
.bv-cu-est { margin-top: 2px; font-size: .61rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
.bv-cu-est.t-remesable { color: var(--tinta); }
.bv-cu-est.t-aldia { color: var(--gris); }
.bv-cu-sec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; font-weight: 600; line-height: 1.35; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.bv-cu-sec.pedido { color: var(--azul-texto); }
/* el calendario de la caja: las semanas hacia abajo, de lunes a domingo («quiero vertical
   el calendario»); rojo lo remesable, amarillo lo que viene en camino, gris lo recogido
   («verde no existirá: rojo los días remesables y amarillo en camino, para dar un panorama») */
.bv-calw { display: grid; gap: 2px; justify-items: start; }
.bv-cal-dias, .bv-cal { display: grid; grid-template-columns: repeat(7, 9px); gap: 2px; }
.bv-cal { grid-auto-rows: 9px; }
.bv-cal-dias i { font-size: .5rem; font-style: normal; font-weight: 800; line-height: 1; text-align: center; color: var(--gris); }
.bv-cal i, .bv-cu-leyenda span::before { border-radius: 2px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea); }
.bv-cal .k-x { background: transparent; box-shadow: none; }
.bv-cal .k-r, .bv-cu-leyenda .k-r::before { background: color-mix(in srgb, var(--linea-2) 75%, var(--sup-1)); box-shadow: none; }
.bv-cal .k-c, .bv-cu-leyenda .k-c::before { background: var(--ambar-2); box-shadow: none; }
.bv-cal .k-d, .bv-cu-leyenda .k-d::before { background: var(--rojo); box-shadow: none; }
.bv-cal .k-h { background: transparent; box-shadow: inset 0 0 0 1.5px var(--texto-2); }
/* lo que la Bóveda ya solicitó: su color, con un punto blanco al medio */
.bv-cal .p, .bv-cu-leyenda .p::before { background-image: radial-gradient(circle, var(--sup-1) 0 1.6px, transparent 2px); }
.bv-cu-leyenda { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin: 0 2px; font-size: .64rem; color: var(--texto-2); }
.bv-cu-leyenda span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: .3rem; vertical-align: -1px; }
/* el sello (la pantalla de una caja): tinta de goma, marco doble, apenas girado */
.bv-sello {
  display: inline-block; margin: 7px 0 3px 1px; padding: 3px 7px 3px 8px; border: 3px double currentColor; border-radius: 3px;
  font-size: .66rem; font-weight: 800; line-height: 1.25; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  font-variant-numeric: tabular-nums; transform: rotate(-2.5deg); transform-origin: 0 50%; mix-blend-mode: multiply; opacity: .94;
}
.bv-sello.t-remesable { color: var(--tinta); }
.bv-sello.t-aldia { color: var(--texto-2); }
.bv-sello.t-pedido { color: var(--azul-texto); border: 2px dashed currentColor; padding: 4px 8px 4px 9px; }
@container (max-width: 25rem) {
  .bv-cuadros > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  body.panel a.bv-cuadro { gap: 6px; padding: 7px 7px 8px 9px; }
  .bv-cu-mon { font-size: .95rem; }
  .bv-cu-est { white-space: normal; }
  .bv-cal-dias, .bv-cal { grid-template-columns: repeat(7, 7px); gap: 1.5px; }
  .bv-cal { grid-auto-rows: 7px; }
  .bv-cal-dias i { font-size: .42rem; }
}

/* LA RECOLECCIÓN A TODO LO ALTO (28/09/2026): a la izquierda la plata que hay y el libro de
   Llegadas y Salidas; a la derecha, de arriba abajo, todas las cajas. En pantallas angostas,
   todo en una columna */
.bv-marco { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.bv-izq { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.bv-izq .bv-camara { margin-bottom: 0; }
/* el libro de Llegadas y Salidas: su propio alto, y se desplaza por dentro */
.bv-izq > .bvl-envase { height: max(30rem, calc(100vh - 7rem)); }
/* angosta: la Recolección baja, a todo lo ancho, con todas sus cajas a la vista */
.bv-marco > .bv-recoleccion .bv-cuadros { max-height: none; }
@media (min-width: 1500px) {
  /* todo cabe en la pantalla: la izquierda (la plata y el libro) y la Recolección miden lo mismo */
  .bv-marco { grid-template-columns: minmax(0, 1fr) minmax(23rem, 31%); align-items: stretch; height: calc(100vh - 4.9rem); min-height: 34rem; }
  .bv-izq { min-height: 0; }
  /* con el aviso de arriba (lo que se acaba de asentar), el marco cede su alto */
  .lienzo-panel:has(> .aviso-ok, > .aviso-error) .bv-marco { height: calc(100vh - 8.1rem); }
  .bv-izq > .bvl-envase { flex: 1 1 0; height: auto; min-height: 0; }
  /* la columna mide lo que mide la izquierda; lo que no quepa, se desplaza adentro */
  .bv-marco > .bv-recoleccion { contain: size; min-height: 0; }
  .bv-marco > .bv-recoleccion .bv-cuadros { flex: 1 1 auto; min-height: 0; max-height: none; }
  .bv-izq .bv-camara .bv-efectivo { min-width: 17.5rem; }
  .bv-izq .bv-bolsillos { gap: .5rem; }
  .bv-izq .bv-bolsillo { --bv-px: .7rem; --bv-pb: .7rem; flex-basis: 9.2rem; padding-top: .75rem; }
  .bv-izq .bv-logo { gap: .4rem; min-width: 0; }
  .bv-izq .bv-logo span { min-width: 0; font-size: .8rem; line-height: 1.15; }
  .bv-izq .bv-logo .logo-medio { max-width: 6.2rem; }
  .bv-izq .bv-logo .ico-banco, .bv-izq .bv-logo .ico-otro { width: 1.5rem; height: 1.5rem; }
  .bv-izq .bv-logo .ico-app { width: 1.8rem; height: 1.8rem; }
}

.rm-e-pedido { background: transparent; color: var(--azul-texto); box-shadow: inset 0 0 0 1.5px var(--azul-borde); }
/* el arqueo, un acta: lo que dice el sistema, lo contado y la diferencia (28/09/2026) */
.bc-acta-sis { display: flex; align-items: center; height: 2.5rem; font-size: 1.05rem; font-weight: 700; color: var(--texto-2); }
.bc-acta-dif { margin: -.3rem 0 0; min-height: 1.2em; font-size: .86rem; font-weight: 800; }
.bc-acta-dif.cuadra { color: var(--verde-texto); }
.bc-acta-dif.no-cuadra { color: var(--rojo); }

/* ============================================================
   LA CONFIGURACIÓN DE LA BÓVEDA (28/09/2026, noche): el tornillo. Una hoja
   para recorrer la Bóveda por bolsillo y cada caja —lo que dice el sistema,
   la casilla «Real» y la diferencia en vivo—, la confirmación con el resumen
   y, abajo, las actas anteriores con el sello de la casa.
   ============================================================ */
/* el tornillo, arriba a la derecha del efectivo de la cámara (solo los admins) */
.bv-tornillo {
  position: absolute; top: .7rem; right: .75rem; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid color-mix(in srgb, var(--rm-claro) 40%, transparent); border-radius: 8px; color: var(--rm-claro); transition: background .15s, color .15s, transform .25s;
}
.bv-tornillo .ic { width: 18px; height: 18px; }
/* al pasar, toma el color del texto de la cámara (el de la cifra) */
.bv-tornillo:hover { background: color-mix(in srgb, var(--rm-claro) 16%, transparent); color: inherit; transform: rotate(30deg); }
.bv-tornillo:focus-visible { outline: 2px solid var(--rm-claro); outline-offset: 2px; }

.bvc, .bvc-actas, .bvc-confirmar { --bvc-num: "Archivo", "Manrope", system-ui, sans-serif; }
.bvc-cab { align-items: flex-end; margin-bottom: .7rem; }
.bvc-volver { display: inline-flex; align-items: center; gap: .25rem; margin-bottom: .15rem; font-size: .74rem; font-weight: 700; color: var(--texto-2); text-decoration: none; }
.bvc-volver .ic { width: 15px; height: 15px; }
.bvc-volver:hover { color: var(--marca-osc); }
.bvc-fecha { display: flex; align-items: center; gap: .6rem; }
.bvc-etq { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.bvc-fh { font-family: var(--f-mono); font-size: .78rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bvc-n { font-family: var(--bvc-num, "Archivo", sans-serif); font-stretch: 88%; font-variant-numeric: tabular-nums; }

/* las dos hojas: la Bóveda a la izquierda, las cajas a la derecha; angosta, una bajo la otra */
.bvc-marco { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; align-items: start; }
/* de 1700 px para arriba caben las dos hojas enteras, lado a lado; antes, una bajo la otra (sin deslizar) */
@media (min-width: 1700px) { .bvc-marco { grid-template-columns: minmax(38rem, 2fr) minmax(0, 3fr); } }
.bvc-bloque { background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; min-width: 0; }
/* una bajo la otra, la hoja de la Bóveda (cuatro columnas) no se estira a todo lo ancho */
.bvc-bov { max-width: 50rem; }
.bvc-bloque .hoja-marco { border: 0; border-radius: 0; }
.bvc-hoja td { height: 2.75rem; }
.bvc-hoja tbody tr:hover td { background: var(--sup-2); }
.bvc-hoja td.bvc-quien { min-width: 0; }
.bvc-quien > span:not(.bvc-ico) { display: inline-flex; flex-direction: column; gap: .05rem; vertical-align: middle; }
.bvc-quien b { font-weight: 700; color: var(--tinta); }
.bvc-quien small { font-size: .68rem; color: var(--texto-2); }
.bvc-ico { display: inline-flex; align-items: center; justify-content: center; width: 3.3rem; height: 1.7rem; margin-right: .5rem; vertical-align: middle; }
.bvc-ico .logo-medio { height: 1.15rem; max-width: 3.3rem; }
.bvc-ico .logo-medio.logo-bbva { height: .95rem; }
.bvc-ico .ico-app { width: 1.45rem; height: 1.45rem; }
.bvc-ico .ico-banco, .bvc-ico .ico-otro { width: 1.4rem; height: 1.4rem; color: var(--texto-2); }
.bvc-ico .ico-efectivo { width: 2.4rem; height: 1.4rem; color: var(--verde); }
.bvc-sis { color: var(--texto-2); font-family: var(--bvc-num); font-stretch: 88%; font-size: .86rem; font-variant-numeric: tabular-nums; }
.bvc-arq { color: var(--texto-2); font-size: .74rem; }
.bvc-sin { color: var(--gris); }
/* la casilla «Real»: vacía, no se toca; llena, la fila se tiñe y la diferencia sale al instante */
.bvc-caja { position: relative; display: inline-block; width: 8.6rem; max-width: 100%; vertical-align: middle; }
.bvc-caja i { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .68rem; font-weight: 700; color: var(--gris); pointer-events: none; }
.bvc-caja input, .bvc-nota input {
  width: 100%; height: 2.05rem; border: 1px solid var(--linea-2); border-radius: 6px; background: var(--sup-1); color: var(--tinta);
  font: inherit; font-size: .84rem; box-sizing: border-box; transition: border-color .15s;
}
.bvc-caja input { padding: 0 .55rem 0 1.75rem; font-family: var(--bvc-num); font-stretch: 88%; font-weight: 700; font-size: .92rem; text-align: right; font-variant-numeric: tabular-nums; }
.bvc-nota input { min-width: 9rem; padding: 0 .55rem; }
.bvc-caja input:hover, .bvc-nota input:hover { border-color: color-mix(in srgb, var(--linea-2) 60%, var(--gris)); }
.bvc-caja input:focus-visible, .bvc-nota input:focus-visible { outline: 2px solid var(--marca); outline-offset: 0; border-color: var(--marca); }
.bvc-hoja tr.bvc-llena td, .bvc-hoja tbody tr.bvc-llena:hover td { background: color-mix(in srgb, var(--marca-suave) 40%, var(--sup-1)); }
.bvc-hoja tr.bvc-llena .bvc-caja input { border-color: var(--marca); }
.bvc-dif { min-width: 6.5rem; }
.bvc-d { font-family: var(--bvc-num, "Archivo", sans-serif); font-stretch: 88%; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bvc-d.cuadra { color: var(--verde-texto); }
.bvc-d.sobra { color: var(--ambar); }
.bvc-d.falta { color: var(--rojo); }
/* LAS SUB-CUENTAS DEL BCP (29/09/2026): BCP Tesorería y BCP Dólares cuelgan del logo del BCP con una
   línea fina, sangradas a la altura de los nombres —de la familia, cada una con su monto—. La moneda
   se escribe solo donde no es la de siempre: US$ en BCP Dólares */
.bvc-hoja tr.bvc-sub td { height: 2.45rem; }
.bvc-rama { position: relative; display: inline-flex; align-items: center; padding-left: 3.8rem; vertical-align: middle; }
.bvc-rama b { font-size: .8rem; font-weight: 700; color: var(--texto-2); }
.bvc-rama::before {
  content: ''; position: absolute; left: 1.6rem; bottom: 50%; width: 1.7rem; height: 2.9rem; pointer-events: none;
  border-left: 1.5px solid color-mix(in srgb, var(--m-bcp) 38%, var(--linea)); border-bottom: 1.5px solid color-mix(in srgb, var(--m-bcp) 38%, var(--linea)); border-bottom-left-radius: 5px;
}
/* la primera cuelga del logo (la fila del BCP es más alta y el logo ocupa su medio); las siguientes suben
   hasta la de arriba y la cruzan: ├ la de en medio, └ la última */
.bvc-hoja tr:not(.bvc-sub) + tr.bvc-sub .bvc-rama::before { height: 1.9rem; }
.bvc-mon { font-style: normal; font-size: .72em; font-weight: 700; letter-spacing: .02em; color: var(--gris); }
.bvc-caja.t-usd input { padding-left: 2.4rem; }
/* las ramas del acta, solo fuera del teléfono (allí el bloque va sangrado con su línea): el :has() pesa más
   que cualquier «content: none» de abajo, así que no se apagan, no se encienden */
@media (min-width: 641px) {
  .bvc-acta-tabla tr.bvc-a-sub td:first-child { position: relative; padding-left: 1.2rem; }
  .bvc-acta-tabla tr.bvc-a-sub td:first-child::before {
    content: ''; position: absolute; left: .45rem; top: 0; height: 50%; width: .5rem;
    border-left: 1px solid color-mix(in srgb, var(--m-bcp) 38%, var(--linea)); border-bottom: 1px solid color-mix(in srgb, var(--m-bcp) 38%, var(--linea)); border-bottom-left-radius: 4px;
  }
  .bvc-acta-tabla tr.bvc-a-sub:has(+ tr.bvc-a-sub) td:first-child::after {
    content: ''; position: absolute; left: .45rem; top: 50%; bottom: -1px; border-left: 1px solid color-mix(in srgb, var(--m-bcp) 38%, var(--linea));
  }
}
/* la diferencia del acta, con su tono (cuadra, sobra, falta), por encima del gris de las cifras */
.bvc-acta-tabla td.bvc-d.cuadra { color: var(--verde-texto); }
.bvc-acta-tabla td.bvc-d.sobra { color: var(--ambar); }
.bvc-acta-tabla td.bvc-d.falta { color: var(--rojo); }
/* la nota del acta y «Establecer» (deshabilitado hasta que haya un «Real») */
.bvc-pie { display: flex; align-items: flex-end; gap: .8rem; margin-top: .8rem; }
.bvc-pie .rm-campo { flex: 1 1 20rem; max-width: 44rem; }
.bvc-pie .rm-boton { height: 2.5rem; padding: 0 1.5rem; font-weight: 800; white-space: nowrap; }

/* la confirmación: el resumen exacto de lo que se va a fijar */
.bvc-confirmar { width: min(37rem, calc(100vw - 32px)); }
.bvc-cf { display: grid; gap: .7rem; padding: 0 1.3rem 1.2rem; }
.bvc-cf-linea { display: flex; gap: .7rem; align-items: baseline; margin: 0; font-size: .88rem; }
.bvc-cf-linea .bvc-fh { font-size: .88rem; font-weight: 600; }
.bvc-cf-grupo h3 { margin: 0 0 .2rem; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bvc-cf-tabla { width: 100%; border-collapse: collapse; font-size: .84rem; }
.bvc-cf-tabla td { padding: .32rem 0; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.bvc-cf-tabla td + td { padding-left: .8rem; }
.bvc-cf-tabla td small { display: block; font-size: .7rem; color: var(--texto-2); }
.bvc-cf-tabla td.num { text-align: right; white-space: nowrap; font-family: var(--bvc-num, "Archivo", sans-serif); font-stretch: 88%; font-variant-numeric: tabular-nums; }
.bvc-cf-tabla td.num small { display: inline; margin-right: .4rem; font-family: var(--f-ui, inherit); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.bvc-cf-tabla td.num b { font-weight: 800; }
.bvc-cf .rv-permanente { margin-top: 0; }

/* las actas: cuándo, quién, la nota, lo que fijó y EL SELLO de goma de la casa (sellado ·
   quién · dd/mm HH:MM · las últimas letras del sello); en rojo, un acta que no cuadra con su sello */
.bvc-actas { margin-top: 1.1rem; }
/* los puntos de caja y sus series (29/09/2026): una hoja, como un Excel */
.bvc-puntos { margin-top: 1.1rem; }
.bvc-pt-hoja { overflow-x: auto; background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; }
.bvc-pt { width: 100%; border-collapse: collapse; font-size: .8rem; }
.bvc-pt th { text-align: left; padding: .45rem .7rem; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); background: var(--sup-2); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.bvc-pt td { padding: .4rem .7rem; border-bottom: 1px solid var(--linea); vertical-align: middle; color: var(--tinta); }
.bvc-pt tbody tr:last-child td { border-bottom: 0; }
.bvc-pt .num { text-align: right; white-space: nowrap; }
body.panel .bvc-pt td.mono { font-family: var(--f-mono); font-weight: 500; font-size: .76rem; color: var(--texto-2); }
body.panel .bvc-pt td.bvc-pt-n { font-weight: 600; color: var(--tinta); }
.bvc-pt .bvc-login { font-size: .7rem; color: var(--gris); }
.bvc-pt-desde { display: block; font-size: .68rem; color: var(--gris); }
.bvc-pt-libre { font-weight: 700; color: var(--ambar); }
.bvc-pt-acc { width: 1%; text-align: right; }
/* «+ Caja» (30/09/2026): una caja propia, sin TMS, para una cuenta */
.bvc-pt-cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.bvc-pt-cab .bvc-h2 { margin: 0; }
.bvc-pt-cab .rm-mini { margin-left: auto; }
.bvc-h2 { margin: 0 0 .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.bvc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.bvc-acta { background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; padding: .7rem .95rem .85rem; }
.bvc-acta.bvc-rota { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.bvc-acta-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .4rem 1.2rem; }
.bvc-acta-tit { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; min-width: 0; flex: 1 1 16rem; }
.bvc-acta-tit h3 { margin: 0; font-size: .92rem; font-weight: 800; color: var(--tinta); }
.bvc-acta-tit .bvc-fh { font-size: .8rem; color: var(--texto-2); }
.bvc-acta-nota { flex: 1 1 100%; min-width: 0; font-size: .8rem; color: var(--texto-2); }
.bvc-acta-cab .bv-sello { display: inline-grid; gap: 1px; margin: 0; padding: 4px 9px 5px 10px; text-align: center; flex: none; }
.bvc-acta-cab .bv-sello b { font-weight: 800; }
.bvc-acta-cab .bv-sello small { font-size: .56rem; font-weight: 700; letter-spacing: .05em; }
.bvc-letras { font-family: var(--f-mono); font-weight: 700; letter-spacing: .1em; margin-left: .25rem; }
.bv-sello.t-sellado { color: var(--marca-osc); }
.bv-sello.t-roto { color: var(--rojo); }
/* las hojas del acta van una junto a otra y cada una con su ancho: sola, la de la Bóveda no se estira a toda la tarjeta */
.bvc-acta-cuerpo { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: .6rem; align-items: flex-start; }
.bvc-acta-hoja { flex: 1 1 21rem; min-width: 0; overflow-x: auto; }
.bvc-acta-hoja.t-bov { max-width: 34rem; }
.bvc-acta-hoja.t-caj { max-width: 52rem; }
.bvc-acta-tabla { width: 100%; border-collapse: collapse; font-size: .76rem; }
.bvc-acta-tabla caption { text-align: left; padding: 0 0 .25rem; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bvc-acta-tabla th { text-align: left; padding: .15rem .35rem; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gris); border-bottom: 1px solid var(--linea); white-space: nowrap; }
.bvc-acta-tabla td { padding: .25rem .35rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.bvc-acta-tabla .num { text-align: right; white-space: nowrap; font-family: var(--bvc-num, "Archivo", sans-serif); font-stretch: 88%; font-variant-numeric: tabular-nums; }
.bvc-acta-tabla td.num { color: var(--texto-2); }
.bvc-acta-tabla td.num b { font-weight: 800; color: var(--tinta); }
.bvc-acta-tabla td.bvc-d { font-weight: 800; }
.bvc-acta-tabla .bvc-login { font-size: .68rem; color: var(--gris); }
.bvc-acta-cn { color: var(--texto-2); white-space: normal; }

/* en el teléfono la hoja se apila: cada fila, un bloque con sus rótulos; nada se sale a lo ancho */
@media (max-width: 640px) {
  .bvc-cab { align-items: flex-start; }
  .bvc-hoja thead { display: none; }
  .bvc-hoja tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .7rem; padding: .55rem .65rem .6rem; border-bottom: 1px solid var(--linea); }
  .bvc-hoja td, .bvc-hoja td + td { display: block; height: auto; padding: 0; border: 0; white-space: normal; text-align: left; }
  .bvc-hoja td.bvc-quien, .bvc-hoja td.bvc-nota, .bvc-hoja td.bvc-arq { grid-column: 1 / -1; }
  .bvc-hoja td[data-t]::before { content: attr(data-t); display: block; margin-bottom: .1rem; font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
  .bvc-hoja tr.bvc-llena, .bvc-hoja tr.bvc-llena td { background: color-mix(in srgb, var(--marca-suave) 40%, var(--sup-1)); }
  /* las sub-cuentas del BCP: el bloque entero sangrado, colgado de una línea fina */
  .bvc-hoja tr.bvc-sub { margin-left: 1.35rem; padding-left: .7rem; border-left: 1.5px solid color-mix(in srgb, var(--m-bcp) 38%, var(--linea)); }
  .bvc-hoja tr.bvc-sub td { height: auto; }
  .bvc-rama { padding-left: 0; }
  .bvc-rama::before { content: none; }
  .bvc-caja { width: 100%; }
  .bvc-dif { min-width: 0; }
  /* sin diferencia que decir, la celda no ocupa sitio */
  .bvc-hoja td.bvc-dif:has(> span:empty) { display: none; }
  /* en columna, la casilla de la nota mide lo suyo (nada de 20rem de alto) y el botón va pegado */
  .bvc-pie { flex-direction: column; align-items: stretch; }
  .bvc-pie .rm-campo { flex: 0 0 auto; max-width: none; }
  .bvc-acta-cab { gap: .3rem .7rem; }
  /* las hojas de cada acta también se apilan: cada fila, un bloque con sus rótulos; nada se desliza a lo ancho */
  .bvc-acta-hoja { overflow: visible; }
  .bvc-acta-tabla, .bvc-acta-tabla tbody, .bvc-acta-tabla caption { display: block; }
  .bvc-acta-tabla thead { display: none; }
  .bvc-acta-tabla tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .15rem .5rem; padding: .4rem 0 .45rem; border-bottom: 1px solid var(--linea); }
  .bvc-acta-tabla td, .bvc-acta-tabla td.num { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .bvc-acta-tabla td:first-child, .bvc-acta-tabla td.bvc-acta-cn { grid-column: 1 / -1; }
  .bvc-acta-tabla td:first-child { font-weight: 700; color: var(--tinta); }
  .bvc-acta-tabla td[data-t]::before { content: attr(data-t); display: block; margin-bottom: .05rem; font-size: .52rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
  .bvc-acta-tabla td.bvc-acta-cn:empty { display: none; }
  /* las sub-cuentas del BCP en el acta: el bloque entero sangrado, colgado de su línea fina */
  .bvc-acta-tabla tr.bvc-a-sub { margin-left: .9rem; padding-left: .65rem; border-left: 1px solid color-mix(in srgb, var(--m-bcp) 38%, var(--linea)); }
}
@media (prefers-reduced-motion: reduce) { .bv-tornillo, .bvc-caja input, .bvc-nota input { transition: none; } .bv-tornillo:hover { transform: none; } }

/* ============================================================
   EL LIBRO DE LA BÓVEDA (28/09/2026) — Llegadas y Salidas. De varias
   propuestas el dueño eligió «el lomo con horas» y, de sus pulidos, «el
   libro alineado». Piezas: panel/partes/boveda-libro(-js).
   Es «El lomo con horas» (l2) con el libro puesto a escuadra:
   once columnas fijas que comparten la cabecera, los nudos y los
   asientos —margen del sello · cifras · barra · hora · lomo · hora ·
   barra · cifras · margen—, de modo que las cifras forman columna
   (con el Entró y el Salió del día como subtotal), el sello va pegado
   a su cifra y la hora queda de su lado, entre la barra y el punto.
   Arriba, la bandeja de lo por asentar en renglones de una línea.
   ============================================================ */
.bvl {
  --bvl-num: "Archivo", "Manrope", system-ui, sans-serif;
  --bvl-mono: "IBM Plex Mono", ui-monospace, monospace;
  --bvl-amb: color-mix(in srgb, var(--ambar) 72%, var(--tinta));
  --bvl-amb-f: color-mix(in srgb, var(--ambar) 52%, var(--tinta));
  --bvl-lomo: color-mix(in srgb, var(--marca-osc) 34%, var(--sup-1));
  --bvl-fondo: var(--sup-1);
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden;
  container-type: inline-size; color: var(--tinta); font-size: .8rem; line-height: 1.3;
}
.bvl-envase { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bvl-envase > .bvl { flex: 1 1 auto; }
.bvl [hidden] { display: none !important; }
.bvl button, .bvl input, .bvl textarea { font: inherit; }
.bvl button:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.bvl input:focus-visible, .bvl textarea:focus-visible { outline: 2px solid var(--marca); outline-offset: -1px; }
.bvl-n { font-family: var(--bvl-num); font-stretch: 88%; font-variant-numeric: tabular-nums; letter-spacing: .005em; }

.bvl-libro {
  /* las once columnas del libro: afuera · margen · cifras · barra · hora | lomo | hora · barra · cifras · margen · afuera */
  --bvl-m: 8.8em; --bvl-cw: 4.8em; --bvl-hw: 3.4em; --bvl-e: 1.3em; --bvl-bmax: 17.5rem;
  --bvl-cols: minmax(0, 1fr) var(--bvl-m) var(--bvl-cw) minmax(0, var(--bvl-bmax)) var(--bvl-hw) var(--bvl-e)
             var(--bvl-hw) minmax(0, var(--bvl-bmax)) var(--bvl-cw) var(--bvl-m) minmax(0, 1fr);
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent;
}

/* ---------- el sello de goma: el mismo cuño que la Recolección (.bv-sello) ---------- */
.bvl-sello {
  display: inline-flex; flex-direction: column; align-items: center; box-sizing: border-box;
  padding: 3px 7px 3px 8px; border: 3px double currentColor; border-radius: 3px;
  font-size: .66rem; font-weight: 800; line-height: 1.25; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  font-variant-numeric: tabular-nums; transform: rotate(-2.5deg); transform-origin: 0 50%; mix-blend-mode: multiply; opacity: .94;
}
.bvl-sello b { font-weight: 800; }
.bvl-sello i { font-style: normal; font-weight: 700; font-size: .9em; letter-spacing: .05em; }
.bvl-sello.s-ok { color: var(--verde-texto); }
.bvl-sello.s-dif { color: var(--rojo); }
.bvl-sello.s-sal { color: var(--texto-2); }
.bvl-sello.s-anul { color: var(--gris); }
/* la remesa de salida que la caja aún no recibe (01/10/2026): en camino, en ámbar */
.bvl-sello.s-cam { color: var(--bvl-amb); }
/* un ingreso o un egreso de la Bóveda (01/10/2026): su número y la persona */
.bvl-sello.s-ing { color: var(--verde-texto); }
.bvl-sello.s-egr { color: var(--tinta); }
.bvl-acc { display: flex; flex-wrap: wrap; align-items: center; gap: .9em; }
.bvl-acc a { color: var(--marca-osc); font-size: .9em; font-weight: 700; text-decoration: none; }
.bvl-acc a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* el borrador: el mismo sello, con la tinta a medias */
.bvl-sello.bvl-borr { border: 2px dashed currentColor; padding: 4px 8px 4px 9px; opacity: .5; }
.bvl-sellar { animation: bvl-sellar 320ms cubic-bezier(.2, .8, .3, 1) both; }
@keyframes bvl-sellar { from { opacity: 0; transform: scale(1.35) rotate(0deg); } to { opacity: .94; transform: scale(1) rotate(-2.5deg); } }

/* ---------- LA BANDEJA: lo por asentar, un renglón por remesa ---------- */
.bvl-bandeja {
  --bvl-bcols: 8em minmax(0, 25em) 5.4em 8.9em 7.6em minmax(6.6em, 1fr);
  margin: .6em .6em .75em; overflow: hidden;
  background: color-mix(in srgb, var(--ambar-suave) 58%, var(--sup-1));
  border: 1px solid color-mix(in srgb, var(--ambar) 28%, var(--sup-1)); border-radius: 6px;
}
.bvl-b-cab { display: flex; align-items: baseline; gap: .6em; min-width: 0; padding: .55em .95em .5em .8em; white-space: nowrap; }
.bvl-b-tit { font-size: .76em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bvl-amb); }
.bvl-b-n { font-size: .9em; font-weight: 700; color: var(--bvl-amb); }
.bvl-b-carro { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .86em; font-weight: 600; color: var(--texto-2); }
.bvl-b-carro::before { content: "·"; margin-right: .55em; color: var(--gris); }
.bvl-b-tot { margin-left: auto; display: flex; align-items: baseline; gap: .5em; }
.bvl-b-tot small { font-size: .8em; font-weight: 600; color: var(--gris); }
.bvl-b-tot b { font-size: 1.1em; font-weight: 800; color: var(--bvl-amb); }
.bvl-b-nada { font-size: .86em; font-weight: 600; color: var(--gris); }

.bvl-rem {
  display: grid; grid-template-columns: var(--bvl-bcols); grid-template-rows: minmax(2.7em, auto); column-gap: .9em; align-items: center;
  padding: 0 .95em 0 .8em; border-top: 1px solid color-mix(in srgb, var(--ambar) 20%, var(--sup-1));
}
.bvl-r-acc { display: flex; align-items: center; }
.bvl-recibir {
  height: 1.95em; padding: 0 .9em; border: 0; border-radius: 5px; background: var(--verde); color: #FFFFFF;
  font-size: .9em; font-weight: 700; cursor: pointer; transition: background-color 150ms;
}
.bvl-recibir:hover { background: var(--verde-texto); }
.bvl-contando { font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bvl-amb); }
.bvl-r-quien { display: flex; align-items: baseline; gap: .55em; min-width: 0; white-space: nowrap; }
.bvl-r-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bvl-r-nom b { font-weight: 700; }
.bvl-r-nom span { font-weight: 500; color: var(--gris); }
.bvl-r-quien em { flex: none; font-style: normal; font-size: .8em; font-weight: 700; color: var(--azul-texto); }
.bvl-r-fec { justify-self: end; font-size: .94em; font-weight: 500; color: var(--texto-2); white-space: nowrap; }
.bvl-r-viaje { justify-self: end; font-size: .86em; font-weight: 600; color: var(--gris); white-space: nowrap; }
.bvl-r-viaje b { font-size: 1.1em; font-weight: 700; color: var(--texto-2); }
.bvl-r-viaje.bvl-largo, .bvl-r-viaje.bvl-largo b { color: var(--bvl-amb-f); }
.bvl-r-sobres { display: flex; align-items: center; gap: 3px; min-width: 0; color: var(--bvl-amb); white-space: nowrap; }
.bvl-r-sobres i { margin-left: .4em; font-style: normal; font-family: var(--bvl-mono); font-size: .8em; color: var(--gris); }
.bvl-sobre { display: block; flex: none; width: 17px; height: 12px; fill: var(--sup-1); stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; transition: fill 150ms, color 150ms; }
.bvl-sobre circle { fill: currentColor; stroke: none; }
.bvl-sb { display: block; color: var(--bvl-amb); }
.bvl-sb.bvl-ok { color: var(--verde); } .bvl-sb.bvl-ok .bvl-sobre { fill: var(--verde-suave); }
.bvl-sb.bvl-mal { color: var(--rojo); } .bvl-sb.bvl-mal .bvl-sobre { fill: var(--rojo-suave); }
.bvl-r-monto { justify-self: end; font-size: 1.04em; font-weight: 700; color: var(--bvl-amb); white-space: nowrap; }
.bvl-resto {
  width: 100%; grid-template-rows: minmax(2.25em, auto); margin: 0; background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--ambar) 20%, var(--sup-1));
  color: var(--texto-2); text-align: left; cursor: pointer; transition: background-color 150ms;
}
.bvl-resto:hover { background: color-mix(in srgb, var(--ambar-suave) 85%, var(--sup-1)); }
.bvl-resto .bvl-r-quien { grid-column: 2; font-size: .9em; font-weight: 600; }
.bvl-resto .bvl-r-monto { grid-column: 6; font-size: .94em; font-weight: 600; color: var(--texto-2); }
.bvl-rem.bvl-abierta { background: var(--sup-1); }
.bvl-rem.bvl-abierta .bvl-r-monto { color: var(--gris); }

/* la mesa de conteo, dentro de la remesa abierta */
.bvl-mesa {
  grid-column: 1 / -1; display: grid; grid-template-columns: fit-content(26em) minmax(15em, 25em); justify-content: start; gap: .9em 2.2em; align-items: start;
  margin-top: .1em; padding: .8em 0 .85em calc(5.9em + .9em); border-top: 1px dashed color-mix(in srgb, var(--ambar) 40%, var(--sup-1));
}
.bvl-sobres { width: 100%; border-collapse: collapse; font-size: .95em; }
.bvl-sobres th, .bvl-sobres td { padding: .32em .45em; border-bottom: 1px solid var(--linea); text-align: right; white-space: nowrap; }
.bvl-sobres thead th { padding-top: 0; font-size: .7em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bvl-sobres th:first-child { text-align: left; padding-left: 0; }
.bvl-sobres td:last-child, .bvl-sobres th:last-child { padding-right: 0; }
.bvl-sobres tbody th { font-weight: 600; }
.bvl-sobres tbody th > span { display: inline-flex; align-items: center; gap: .45em; font-family: var(--bvl-mono); font-size: .92em; font-weight: 500; color: var(--bvl-amb); }
.bvl-sobres tbody th .bvl-sobre { width: 19px; height: 13px; }
.bvl-so.bvl-ok th > span { color: var(--verde-texto); } .bvl-so.bvl-ok th .bvl-sobre { fill: var(--verde-suave); color: var(--verde); }
.bvl-so.bvl-mal th > span { color: var(--rojo); } .bvl-so.bvl-mal th .bvl-sobre { fill: var(--rojo-suave); }
.bvl-so.bvl-gris th > span { color: var(--texto-2); }
.bvl-sobres tfoot th, .bvl-sobres tfoot td { border-bottom: 0; border-top: 1.5px solid var(--tinta); font-weight: 700; }
.bvl-sobres tfoot tr + tr th, .bvl-sobres tfoot tr + tr td { border-top: 0; padding-top: 0; font-weight: 600; color: var(--texto-2); }
.bvl-in {
  box-sizing: border-box; width: 6.8em; height: 2.1em; padding: 0 .55em; border: 1px solid var(--linea-2); border-radius: 4px;
  background: var(--sup-1); color: var(--tinta); font-weight: 600; text-align: right;
}
.bvl-so.bvl-malo .bvl-in { border-color: var(--rojo); }
.bvl-velo { display: inline-block; width: 3.8em; height: .8em; border-bottom: 2px dotted var(--linea-2); vertical-align: middle; }
.bvl-cuadra { font-weight: 600; color: var(--verde-texto); }
.bvl-falta { font-weight: 600; color: var(--rojo); }
.bvl-sobres tfoot .bvl-cuadra, .bvl-sobres tfoot .bvl-falta, .bvl-cmp-pie .bvl-cuadra, .bvl-cmp-pie .bvl-falta { font-weight: 800; }

.bvl-lado { display: flex; flex-direction: column; gap: .85em; min-width: 0; color: var(--texto-2); }
.bvl-dl { display: grid; gap: .25em; margin: 0; font-size: .94em; }
.bvl-dl > div { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: .6em; align-items: baseline; }
.bvl-dl dt { font-size: .74em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bvl-dl dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.bvl-dl b { font-weight: 700; color: var(--tinta); }
.bvl-dl .bvl-misma { display: block; color: var(--bvl-amb); font-weight: 600; }
.bvl-debia { font-weight: 700; color: var(--bvl-amb); }

/* lo contado contra lo enviado: un tramo por sobre */
.bvl-cmp { display: grid; gap: .35em; }
.bvl-cmp-cab, .bvl-cmp-pie { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; white-space: nowrap; }
.bvl-cmp-cab small { margin-right: .4em; font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bvl-cmp-cab b { font-size: 1.1em; font-weight: 700; }
.bvl-cmp-c { color: var(--gris); }
.bvl-cmp-c.bvl-algo { color: var(--verde-texto); }
.bvl-cmp-e { color: var(--bvl-amb); }
.bvl-cmp-barra { display: flex; gap: 3px; height: .9em; }
.bvl-seg {
  position: relative; flex: 1 1 0; box-sizing: border-box; overflow: hidden; border: 1px dashed var(--bvl-amb); border-radius: 2px;
  background: color-mix(in srgb, var(--ambar-suave) 60%, var(--sup-1)); transition: border-color 150ms;
}
.bvl-seg > i, .bvl-seg > b { position: absolute; top: 0; bottom: 0; }
.bvl-seg > i { left: 0; width: 0; background: var(--verde); transition: width 180ms ease-out; }
.bvl-seg > b { right: 0; width: 0; background: var(--rojo); }
.bvl-seg.bvl-ok { border: 1px solid var(--verde); }
.bvl-seg.bvl-ok > i { width: 100%; }
.bvl-seg.bvl-mal { border: 1px solid var(--rojo); }
.bvl-seg.bvl-mal > i { width: calc(var(--c) * 100%); }
.bvl-seg.bvl-mal > b { width: max(6px, calc(var(--x) * 100%)); }
.bvl-cmp-pie { font-size: .88em; font-weight: 600; color: var(--gris); }
.bvl-cmp-pie .bvl-cuadra, .bvl-cmp-pie .bvl-falta { font-size: 1.04em; }

.bvl-campo { display: grid; gap: .25em; min-width: 0; }
.bvl-campo > span { font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bvl-campo input, .bvl-campo textarea, .bvl-campo select {
  box-sizing: border-box; width: 100%; padding: .35em .55em; border: 1px solid var(--linea-2); border-radius: 4px;
  background: var(--sup-1); color: var(--tinta); font-size: .98em; font-weight: 600;
}
.bvl-campo input, .bvl-campo select { height: 2.2em; }
.bvl-campo textarea { min-height: 3.3em; resize: vertical; }
.bvl-nota.bvl-pide > span { color: var(--rojo); }
.bvl-cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7em 1em; min-height: 2.9em; }
.bvl-pre { display: flex; align-items: center; min-height: 2.6em; padding-left: 2px; }
.bvl-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45em; margin-left: auto; }
.bvl-pri, .bvl-sec, .bvl-peligro {
  height: 2.45em; padding: 0 1.05em; border-radius: 6px; font-size: .96em; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color 150ms, opacity 150ms;
}
.bvl-pri { border: 0; background: var(--marca-osc); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.bvl-pri:hover { background: var(--marca); }
.bvl-sec { border: 1px solid var(--linea-2); background: var(--sup-1); color: var(--texto-2); }
.bvl-sec:hover { background: var(--sup-2); }
.bvl-peligro { border: 0; background: var(--rojo); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.bvl-pri:disabled, .bvl-peligro:disabled, .bvl-sec:disabled { opacity: .38; cursor: not-allowed; }

/* ---------- LA CABECERA DEL LIBRO ---------- */
.bvl-cab, .bvl-dia, .bvl-mov { display: grid; grid-template-columns: var(--bvl-cols); }
.bvl-cab {
  position: sticky; top: 0; z-index: 4; min-height: 2.75em; align-items: center;
  background: var(--sup-1); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.bvl-cab::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bvl-lomo); }
.bvl-c-l { grid-column: 2 / 6; justify-self: end; display: flex; align-items: center; gap: 1em; min-width: 0; padding-right: .35em; }
.bvl-c-s { grid-column: 7 / 11; justify-self: start; display: flex; align-items: center; gap: 1em; min-width: 0; padding-left: .35em; }
.bvl-c-tit { font-size: .8em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.bvl-c-l .bvl-c-tit { color: var(--verde-texto); }
.bvl-c-s .bvl-c-tit { color: var(--texto-2); }
.bvl-mas {
  display: inline-flex; align-items: center; gap: .35em; height: 2.05em; padding: 0 .8em; border: 0; border-radius: 6px;
  background: var(--marca-osc); color: #FFFFFF; font-size: .92em; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color 150ms;
}
.bvl-mas:hover { background: var(--marca); }
.bvl-mas span { font-size: 1.2em; line-height: 1; }
/* el recordatorio de lo que viene en camino, cuando la bandeja queda arriba */
.bvl-aviso {
  display: inline-flex; align-items: baseline; gap: .4em; padding: .1em 0; border: 0; background: none; color: var(--bvl-amb);
  font-size: .86em; font-weight: 600; white-space: nowrap; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 150ms, visibility 0s 150ms;
}
.bvl-aviso b { font-weight: 700; }
.bvl-aviso:hover { text-decoration: underline; text-underline-offset: 3px; }
.bvl-lejos .bvl-aviso { opacity: 1; visibility: visible; transition: opacity 150ms; }

/* ---------- EL NUDO DE CADA DÍA: Entró · Quedó · Salió ---------- */
.bvl-dia {
  position: relative; box-sizing: border-box; height: 2.7em; align-items: center;
  background: color-mix(in srgb, var(--sup-2) 42%, var(--sup-1)); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.bvl-dia.bvl-primero { border-top: 0; }
.bvl-dia > * { grid-row: 1; }
.bvl-dia::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bvl-lomo); }
.bvl-primero::before { top: 50%; }
.bvl-d-le, .bvl-d-ls { font-size: .8em; font-weight: 600; color: var(--gris); white-space: nowrap; }
.bvl-d-le { grid-column: 2; justify-self: end; padding-right: .75em; }
.bvl-d-ls { grid-column: 8; justify-self: end; padding-right: .75em; }
.bvl-d-en, .bvl-d-sa { font-size: 1em; font-weight: 700; white-space: nowrap; text-align: right; }
.bvl-d-en { grid-column: 3; justify-self: end; color: var(--verde-texto); }
.bvl-d-sa { grid-column: 9; justify-self: end; color: var(--tinta); }
.bvl-dia .bvl-cero { color: var(--gris); font-weight: 500; }
.bvl-nudo {
  grid-column: 4 / 9; justify-self: center; position: relative; z-index: 1; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 9.4em; height: 2.2em; padding: 0 .75em;
  background: var(--sup-1); border: 1px solid var(--bvl-lomo); border-radius: 4px; white-space: nowrap; line-height: 1.05;
}
.bvl-n-dia { font-size: .7em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.bvl-n-dia em { font-style: normal; color: var(--marca-osc); margin-left: .35em; }
.bvl-n-qd { display: flex; align-items: baseline; gap: .4em; }
.bvl-n-qd small { font-size: .74em; font-weight: 600; color: var(--gris); }
.bvl-n-qd b { font-size: 1.04em; font-weight: 800; color: var(--marca-osc); }
.bvl-hoy .bvl-dia { background: color-mix(in srgb, var(--marca-suave) 30%, var(--sup-1)); }
.bvl-hoy .bvl-nudo { border: 1.5px solid var(--marca-osc); background: color-mix(in srgb, var(--marca-suave) 50%, var(--sup-1)); }
.bvl-hoy .bvl-nudo.bvl-previo { border-style: dashed; }
.bvl-cambia b { animation: bvl-cambia 420ms ease-out both; }
@keyframes bvl-cambia { from { opacity: .15; } to { opacity: 1; } }
.bvl-ap { padding-bottom: 1.2em; }
.bvl-ap .bvl-dia { background: transparent; border-bottom: 0; }
.bvl-ap .bvl-dia::before { top: 0; bottom: 50%; }
.bvl-ap .bvl-nudo { border: 3px double var(--bvl-lomo); }

/* ---------- UN ASIENTO: dos renglones, colgado del lomo ---------- */
.bvl-mov {
  position: relative; grid-template-rows: auto auto auto; align-items: center; row-gap: .2em; padding: .62em 0 .66em;
  background: var(--bvl-fondo); cursor: pointer; transition: background-color 160ms;
}
.bvl-mov:hover { --bvl-fondo: color-mix(in srgb, var(--sup-2) 55%, var(--sup-1)); }
.bvl-mov::before, .bvl-mov::after { content: ""; position: absolute; bottom: 0; height: 1px; background: var(--linea); }
.bvl-mov::before { left: 0; right: calc(50% + var(--bvl-e) / 2 + 2px); }
.bvl-mov::after { right: 0; left: calc(50% + var(--bvl-e) / 2 + 2px); }
.bvl-dia-g > .bvl-mov:last-child::before, .bvl-dia-g > .bvl-mov:last-child::after { display: none; }
.bvl-eje { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--bvl-lomo); }

.bvl-mov > .bvl-mg { grid-row: 1 / 3; align-self: center; display: flex; align-items: center; gap: .75em; min-width: 0; }
.bvl-lleg > .bvl-mg { grid-column: 2; justify-self: end; padding-right: .8em; }
.bvl-sal > .bvl-mg { grid-column: 10; justify-self: start; padding-left: .8em; position: relative; }
/* «Anular» cuelga bajo el sello sin mover el asiento; la salida vigente tiene un poco más de pie */
.bvl-sal > .bvl-mg > .bvl-anular { position: absolute; top: 100%; left: .8em; margin-top: -1px; }
.bvl-lleg > .bvl-mg { position: relative; }
.bvl-lleg > .bvl-mg > .bvl-anular { position: absolute; top: 100%; right: .8em; margin-top: -1px; padding: .1em .15em 0 0; }
.bvl-mov.bvl-vigente { padding-bottom: 1.15em; }
.bvl-mov > .bvl-nm { grid-row: 1; min-width: 0; font-size: 1em; }
.bvl-lleg > .bvl-nm { grid-column: 3 / 6; text-align: right; }
.bvl-sal > .bvl-nm { grid-column: 7 / 10; text-align: left; }
.bvl-mov > .bvl-cifra { grid-row: 2; font-size: 1.04em; font-weight: 700; text-align: right; white-space: nowrap; line-height: 1.2; }
.bvl-lleg > .bvl-cifra { grid-column: 3; color: var(--verde-texto); }
.bvl-sal > .bvl-cifra { grid-column: 9; color: var(--tinta); }
.bvl-mov > .bvl-bc { grid-row: 2; display: flex; align-items: center; min-width: 0; height: 100%; }
.bvl-lleg > .bvl-bc { grid-column: 4; justify-content: flex-end; padding-left: .8em; }
.bvl-sal > .bvl-bc { grid-column: 8; justify-content: flex-start; padding-right: .8em; }
.bvl-mov > .bvl-hora {
  grid-row: 2; justify-self: center; position: relative; z-index: 1; padding: 0 .3em; background: var(--bvl-fondo); transition: background-color 160ms;
  font-size: .925em; font-weight: 600; line-height: 1.2; color: var(--tinta); white-space: nowrap;
}
.bvl-lleg > .bvl-hora { grid-column: 5; }
.bvl-sal > .bvl-hora { grid-column: 7; }
.bvl-mov > .bvl-hilo { grid-row: 2; align-self: center; height: 1px; background: currentColor; opacity: .5; }
.bvl-lleg > .bvl-hilo { grid-column: 5 / 7; margin-right: calc(var(--bvl-e) / 2); color: var(--verde); }
.bvl-sal > .bvl-hilo { grid-column: 6 / 8; margin-left: calc(var(--bvl-e) / 2); color: var(--tinta); }
.bvl-mov > .bvl-punto {
  grid-row: 2; grid-column: 6; justify-self: center; position: relative; z-index: 2; box-sizing: border-box;
  width: 11px; height: 11px; border: 2px solid var(--bvl-fondo); border-radius: 50%; background: currentColor; transition: border-color 160ms;
}
.bvl-lleg > .bvl-punto { color: var(--verde); }
.bvl-sal > .bvl-punto { color: var(--tinta); }
.bvl-dif > .bvl-punto { color: var(--rojo); }
.bvl-mov > .bvl-exp { grid-row: 3; }
.bvl-lleg > .bvl-exp { grid-column: 2 / 6; }
.bvl-sal > .bvl-exp { grid-column: 7 / 11; }

.bvl-nom {
  display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.bvl-nm b { font-weight: 700; color: var(--tinta); }
.bvl-nm span { font-weight: 500; color: var(--gris); }
.bvl-nm span::before { content: " · "; }
.bvl-mov:hover .bvl-nom b { text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 2px; }

/* la barra: a escala del asiento más grande, crece desde el lomo */
.bvl-barra { position: relative; display: block; flex: none; height: .62rem; min-width: 2px; width: calc(var(--p, 0) * 100%); }
.bvl-lleg .bvl-barra { background: var(--verde); border-radius: 2px 0 0 2px; }
.bvl-sal .bvl-barra { background: color-mix(in srgb, var(--tinta) 76%, var(--sup-1)); border-radius: 0 2px 2px 0; }
/* con diferencia: contorno punteado = lo enviado; relleno = lo contado; rojo = lo que falta (o lo que sobra) */
.bvl-lleg .bvl-comp { background: transparent; }
.bvl-comp > i { position: absolute; top: 0; bottom: 0; right: 0; }
.bvl-comp > .e { box-sizing: border-box; width: calc(var(--e) * 100%); border: 1px dashed var(--verde-texto); border-right: 0; border-radius: 2px 0 0 2px; }
.bvl-comp > .c { width: calc(var(--c) * 100%); background: var(--verde); }
.bvl-comp > .x { right: calc(var(--x0) * 100%); width: max(6px, calc((var(--x1) - var(--x0)) * 100%)); background: var(--rojo); border-radius: 2px 0 0 2px; }

/* el margen: sellos, «Anular» y lo que quedará */
.bvl-anular {
  padding: .1em 0 0 .15em; border: 0; background: none; color: var(--gris); font-size: .8em; font-weight: 600; cursor: pointer;
  opacity: 0; transition: opacity 150ms, color 150ms;
}
.bvl-mov:hover .bvl-anular, .bvl-anular:focus-visible { opacity: 1; }
.bvl-anular:hover { color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: none) { .bvl-anular { opacity: 1; } }
.bvl-quedara { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; white-space: nowrap; }
.bvl-quedara small { font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.bvl-quedara b { font-size: 1em; font-weight: 700; color: var(--marca-osc); }
.bvl-quedara.bvl-no small, .bvl-quedara.bvl-no b { color: var(--rojo); }

/* salidas: anulada y borrador */
.bvl-anulada .bvl-nm b, .bvl-anulada .bvl-nm span, .bvl-anulada .bvl-cifra { color: var(--gris); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--gris) 70%, var(--sup-1)); }
.bvl-anulada .bvl-bc .bvl-barra { box-sizing: border-box; background: transparent; border: 1px dashed var(--linea-2); border-left: 0; }
.bvl-anulada > .bvl-punto { background: var(--bvl-fondo); border: 1.5px solid var(--gris); width: 9px; height: 9px; }
.bvl-anulada > .bvl-hora { color: var(--gris); }
.bvl-anulada > .bvl-hilo { color: var(--gris); }
.bvl-borrador { --bvl-fondo: color-mix(in srgb, var(--sup-2) 70%, var(--sup-1)); cursor: default; }
.bvl-borrador:hover { --bvl-fondo: color-mix(in srgb, var(--sup-2) 70%, var(--sup-1)); }
.bvl-borrador .bvl-bc .bvl-barra { box-sizing: border-box; background: color-mix(in srgb, var(--tinta) 10%, var(--sup-1)); border: 1.5px dashed var(--tinta); border-left: 0; transition: width 160ms ease-out; }
.bvl-borrador > .bvl-punto { background: var(--bvl-fondo); border: 1.5px solid var(--tinta); width: 9px; height: 9px; }
.bvl-borrador .bvl-nm b { color: var(--texto-2); }

/* lo que se abre: queda de su lado del lomo */
.bvl-exp { position: relative; z-index: 3; display: grid; gap: .7em; min-width: 0; margin: .5em .7em .1em; padding: .75em .85em .85em; background: var(--sup-1); border: 1px solid var(--linea-2); border-radius: 6px; cursor: default; }
/* la ficha: la tabla de sobres a su medida y los datos al lado, o debajo si no caben */
.bvl-ficha { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8em 1.6em; }
.bvl-ficha > .bvl-sobres { flex: 0 1 auto; width: auto; min-width: 14em; }
.bvl-ficha > .bvl-dl { flex: 1 1 20em; }
.bvl-nw { white-space: nowrap; }
.bvl-form { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.bvl-form [data-campo="placa"] { text-transform: uppercase; }
/* sin conductor (01/10/2026): el botón al lado del conductor, que lo deja vacío a propósito */
.bvl-cond { display: flex; gap: .4em; min-width: 0; }
.bvl-cond > input { flex: 1 1 auto; min-width: 0; }
.bvl-sin {
  flex: none; padding: 0 .65em; border: 1px solid var(--linea-2); border-radius: 5px; background: var(--sup-1);
  font: inherit; font-size: .78em; font-weight: 700; color: var(--texto-2); white-space: nowrap; cursor: pointer;
}
.bvl-sin:hover:not([aria-pressed="true"]) { background: var(--sup-2); color: var(--tinta); }
.bvl-sin[aria-pressed="true"] { border-color: var(--tinta); background: var(--tinta); color: #FFFFFF; }
.bvl-sin:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.bvl-campo input:disabled { opacity: .55; }
.bvl-exp .bvl-botones { grid-column: 1 / -1; }
.bvl-exp-dice { grid-column: 1 / -1; margin: 0; font-size: .92em; color: var(--texto-2); }
.bvl-exp-dice b { color: var(--marca-osc); font-weight: 700; }
.bvl-ficha .bvl-sobres { font-size: .9em; }
.bvl-ficha .bvl-sobres th, .bvl-ficha .bvl-sobres td { padding: .26em .35em; }

.bvl-mov.bvl-abierta { --bvl-fondo: color-mix(in srgb, var(--sup-2) 60%, var(--sup-1)); }
.bvl-nuevo { animation: bvl-baja 300ms ease-out both, bvl-tinte 1.5s ease-out .5s backwards; }
@keyframes bvl-baja { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes bvl-tinte { from { background-color: color-mix(in srgb, var(--verde-suave) 70%, var(--sup-1)); } }
.bvl-nuevo.bvl-sal { animation-name: bvl-baja, bvl-tinte-s; }
@keyframes bvl-tinte-s { from { background-color: color-mix(in srgb, var(--sup-3) 80%, var(--sup-1)); } }
@media (prefers-reduced-motion: reduce) {
  .bvl *, .bvl *::before, .bvl *::after { animation: none !important; transition: none !important; }
}

/* ---------- ancho (la pantalla del dueño): todo sube un punto ---------- */
@container (min-width: 60rem) {
  .bvl-libro { font-size: .86rem; }
  .bvl-sello { font-size: .7rem; }
  .bvl-barra { height: .72rem; }
}

/* ---------- mediano (1366): la bandeja se aprieta ---------- */
@container (max-width: 52rem) {
  .bvl-bandeja { --bvl-bcols: 8em minmax(0, 1fr) 5em 4.8em 3.7em 6.4em; }
  .bvl-r-viaje span, .bvl-r-sobres i { display: none; }
  .bvl-libro { --bvl-m: 9em; --bvl-hw: 3.2em; }
  .bvl-lleg > .bvl-mg { padding-right: .65em; }
  .bvl-sal > .bvl-mg { padding-left: .65em; }
  .bvl-sal > .bvl-mg > .bvl-anular { left: .65em; }
  .bvl-lleg > .bvl-mg > .bvl-anular { right: .65em; }
}

/* ---------- angosto (teléfono): el lomo sigue al centro; el sello y «Anular» bajo el nombre ---------- */
@container (max-width: 40rem) {
  .bvl-libro { --bvl-cw: 5em; --bvl-hw: 3em; --bvl-e: 1em; --bvl-cols: var(--bvl-cw) minmax(0, 1fr) var(--bvl-hw) var(--bvl-e) var(--bvl-hw) minmax(0, 1fr) var(--bvl-cw); }
  .bvl-sello { font-size: .62rem; }
  .bvl-bandeja { margin: .5em .45em .6em; }
  .bvl-b-cab { flex-wrap: wrap; row-gap: .15em; padding: .5em .7em .45em; }
  .bvl-b-carro { order: 3; flex: 1 0 100%; }
  .bvl-b-sin { order: 4; flex: 1 0 100%; }
  .bvl-b-carro::before { content: none; }
  .bvl-rem {
    grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "quien quien quien monto" "sobres fec viaje acc";
    grid-template-rows: auto auto; column-gap: .7em; row-gap: .3em; padding: .5em .7em;
  }
  .bvl-r-acc { grid-area: acc; } .bvl-r-quien { grid-area: quien; } .bvl-r-fec { grid-area: fec; justify-self: start; }
  .bvl-r-viaje { grid-area: viaje; justify-self: start; } .bvl-r-sobres { grid-area: sobres; } .bvl-r-monto { grid-area: monto; }
  .bvl-resto { grid-template-areas: "quien quien quien monto"; grid-template-rows: auto; padding: .45em .7em; }
  .bvl-resto .bvl-r-quien { grid-area: quien; } .bvl-resto .bvl-r-monto { grid-area: monto; }
  .bvl-mesa { grid-template-columns: minmax(0, 1fr); padding: .7em 0 .2em; }
  .bvl-in { width: 5.8em; }
  .bvl-velo { width: 2.8em; }
  .bvl-sobres th, .bvl-sobres td { padding: .3em .28em; }

  .bvl-c-l { grid-column: 1 / 4; flex-wrap: wrap; justify-content: flex-end; gap: .35em .6em; padding-top: .35em; padding-bottom: .35em; }
  .bvl-c-s { grid-column: 5 / 8; flex-wrap: wrap; gap: .35em .6em; padding-top: .35em; padding-bottom: .35em; }
  .bvl-c-tit { font-size: .74em; letter-spacing: .12em; }
  .bvl-aviso { display: none; }
  .bvl-mas { height: 1.9em; padding: 0 .65em; }

  .bvl-dia { height: 2.9em; }
  .bvl-d-le, .bvl-d-ls { display: none; }
  .bvl-d-en { grid-column: 1; padding-left: .6em; }
  .bvl-d-sa { grid-column: 7; padding-right: .6em; }
  .bvl-d-en::before, .bvl-d-sa::before { display: block; font-family: "Manrope", system-ui, sans-serif; font-size: .66em; font-weight: 600; letter-spacing: .02em; color: var(--gris); line-height: 1.1; }
  .bvl-d-en::before { content: "Entró"; }
  .bvl-d-sa::before { content: "Salió"; }
  .bvl-nudo { grid-column: 2 / 7; min-width: 8.4em; padding: 0 .55em; }

  .bvl-mov { grid-template-rows: auto auto auto auto; padding: .6em 0 .6em; }
  .bvl-mov > .bvl-nm { white-space: normal; }
  .bvl-nom { white-space: normal; }
  .bvl-nm b, .bvl-nm span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bvl-nm span { font-size: .9em; }
  .bvl-nm span::before { content: none; }
  .bvl-lleg > .bvl-nm { grid-column: 1 / 4; padding-left: .6em; }
  .bvl-sal > .bvl-nm { grid-column: 5 / 8; padding-right: .6em; }
  .bvl-mov > .bvl-mg { grid-row: 2; padding: .2em 0 .25em; }
  .bvl-lleg > .bvl-mg { grid-column: 1 / 4; justify-self: end; padding-right: .2em; }
  .bvl-sal > .bvl-mg { grid-column: 5 / 8; justify-self: start; padding-left: .2em; }
  .bvl-sal > .bvl-mg > .bvl-anular, .bvl-lleg > .bvl-mg > .bvl-anular { position: static; margin: 0; }
  .bvl-mov.bvl-vigente { padding-bottom: .6em; }
  .bvl-mov > .bvl-cifra, .bvl-mov > .bvl-bc, .bvl-mov > .bvl-hora, .bvl-mov > .bvl-hilo, .bvl-mov > .bvl-punto { grid-row: 3; }
  .bvl-lleg > .bvl-cifra { grid-column: 1; }
  .bvl-lleg > .bvl-bc { grid-column: 2; padding-left: .5em; }
  .bvl-lleg > .bvl-hora { grid-column: 3; }
  .bvl-lleg > .bvl-hilo { grid-column: 3 / 5; }
  .bvl-sal > .bvl-hora { grid-column: 5; }
  .bvl-sal > .bvl-hilo { grid-column: 4 / 6; }
  .bvl-sal > .bvl-bc { grid-column: 6; padding-right: .5em; }
  .bvl-sal > .bvl-cifra { grid-column: 7; padding-right: .6em; }
  .bvl-lleg > .bvl-cifra { padding-left: .6em; }
  .bvl-mov > .bvl-punto { grid-column: 4; }
  .bvl-mov > .bvl-exp { grid-row: 4; grid-column: 1 / -1; margin: .5em .45em .1em; }
  .bvl-anular { opacity: 1; }
  .bvl-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ============================================================
   LA PANTALLA DE UNA CAJA (28/09/2026) — de varias propuestas el dueño eligió
   «el libro de la caja» y, de sus pulidos, «un solo cuerpo». Piezas:
   panel/boveda-caja y panel/partes/boveda-caja-js.
   ============================================================ */
/* ============================================================
   bcj · CALENDARIO Y LIBRO, UN SOLO CUERPO  (pulido de k3 «El libro de la caja»)
   Arriba, la ficha de la caja (su efectivo, sin sello, y la regla que lo
   reparte en Solicitado y Remesable) y el talón de solicitud con su
   calendario de semanas hacia abajo. Abajo, el libro: la plata de cada día
   pegada a su fecha en el lomo (hoy arriba) y, abrazado por una llave, lo que
   pasó con esos días. Calendario, talón y libro son la misma cosa vista dos
   veces: cada semana del calendario lleva a su izquierda la misma llave del
   libro en miniatura; pasar por un día, una semana o un asiento enciende lo
   mismo en los tres; lo elegido se pinta de amarillo fuerte en el calendario,
   en la regla, en el libro y en la llave; y lo bloqueado se explica en el talón.
   ============================================================ */
.bcj {
  --bcj-num: "Archivo", "Manrope", system-ui, sans-serif;
  --bcj-mono: "IBM Plex Mono", ui-monospace, monospace;
  --bcj-rem: var(--rojo);
  --bcj-rem-s: var(--rojo-suave);
  --bcj-sol: var(--azul-texto);
  --bcj-sol-s: var(--azul-pastel);
  --bcj-sol-b: var(--azul-borde);
  --bcj-sol-barra: color-mix(in srgb, var(--azul-texto) 72%, var(--sup-1));
  --bcj-cam: color-mix(in srgb, var(--ambar) 80%, var(--tinta));
  --bcj-cam-s: color-mix(in srgb, var(--ambar-suave) 55%, var(--sup-1));
  --bcj-cam-b: var(--ambar-2);
  --bcj-cam-barra: color-mix(in srgb, var(--ambar-2) 58%, var(--sup-1));
  --bcj-rec: var(--texto-2);
  --bcj-rec-s: color-mix(in srgb, var(--linea-2) 48%, var(--sup-1));
  --bcj-rec-b: color-mix(in srgb, var(--linea-2) 82%, var(--tinta));
  --bcj-sel: color-mix(in srgb, var(--ambar-2) 80%, var(--sup-1));
  --bcj-sel-b: var(--ambar);
  --bcj-sel-t: color-mix(in srgb, var(--ambar) 62%, var(--tinta));
  --bcj-sel-fila: color-mix(in srgb, var(--ambar-suave) 80%, var(--sup-1));
  --bcj-pre: color-mix(in srgb, var(--ambar-2) 28%, var(--sup-1));
  --bcj-eco: color-mix(in srgb, var(--tinta) 6%, var(--sup-1));
  --bcj-lomo: color-mix(in srgb, var(--tinta) 24%, var(--sup-1));
  --bcj-cw: 3.45rem;
  --bcj-ch: 2.1rem;
  --bcj-kw: .8rem;
  position: relative; display: flex; flex-direction: column; gap: .6rem; min-width: 0;
  color: var(--tinta); font-size: .8rem; line-height: 1.3;
}
@media (min-width: 901px) { .bcj { height: calc(100svh - 1.6rem); } }
.bcj-vista { display: contents; }
.bcj [hidden] { display: none !important; }
.bcj button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
.bcj button:focus-visible, .bcj a:focus-visible, .bcj input:focus-visible, .bcj textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.bcj-n { font-family: var(--bcj-num); font-stretch: 88%; font-variant-numeric: tabular-nums; letter-spacing: .005em; white-space: nowrap; }
.bcj-mono { font-family: var(--bcj-mono); font-size: .94em; font-weight: 500; white-space: nowrap; }
.bcj-caps { font-size: .65625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.bcj-nw { white-space: nowrap; }
.bcj-candado { display: inline-block; width: .78em; height: .9em; flex: none; vertical-align: -.08em; }
.bcj-hoja { min-width: 0; background: var(--sup-1); border: 1px solid var(--linea); border-radius: 8px; }

/* botones de la casa: tinta para lo principal, papel para lo demás */
.bcj .bcj-pri {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em; height: 2.35rem; padding: 0 1.1em; border-radius: 6px;
  background: var(--tinta); color: #FFFFFF; font-weight: 700; white-space: nowrap; transition: background-color 150ms, opacity 150ms;
}
.bcj .bcj-pri:hover:not(:disabled) { background: color-mix(in srgb, var(--tinta) 82%, var(--sup-1)); }
.bcj .bcj-pri:disabled { background: color-mix(in srgb, var(--tinta) 7%, var(--sup-1)); color: color-mix(in srgb, var(--tinta) 38%, var(--sup-1)); box-shadow: inset 0 0 0 1px var(--linea-2); cursor: not-allowed; }
.bcj .bcj-sec {
  display: inline-flex; align-items: center; justify-content: center; height: 2.1rem; padding: 0 .95em; border: 1px solid var(--linea-2); border-radius: 6px;
  background: var(--sup-1); color: var(--tinta); font-weight: 700; white-space: nowrap; transition: background-color 150ms, border-color 150ms, color 150ms;
}
.bcj .bcj-sec:hover { background: var(--sup-2); }
.bcj .bcj-link { padding: .1rem .2rem; font-size: .75rem; font-weight: 700; color: var(--texto-2); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 2px; }
.bcj .bcj-link:hover { color: var(--tinta); text-decoration-color: currentColor; }

/* ---------- EL SELLO: tinta de goma, marco doble, apenas girado ---------- */
.bcj-sello {
  display: inline-grid; justify-items: center; gap: 1px; padding: 3px 8px 3px 9px; border: 3px double currentColor; border-radius: 3px;
  font-size: .69rem; font-weight: 800; line-height: 1.2; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  font-variant-numeric: tabular-nums; transform: rotate(-2.5deg); transform-origin: 0 50%; mix-blend-mode: multiply; opacity: .94;
}
.bcj-sello > span { display: inline-flex; align-items: center; gap: .4em; }
.bcj-sello > small { font-size: .86em; font-weight: 700; letter-spacing: .06em; }
.bcj-s-rem { color: var(--bcj-rem); }
.bcj-s-sol { color: var(--bcj-sol); }
.bcj-s-cam { color: var(--bcj-cam); }
.bcj-s-rec { color: var(--texto-2); }
.bcj-s-dif { color: var(--bcj-rem); }
.bcj-s-bor { color: var(--bcj-sel-t); border: 1.5px dashed var(--bcj-sel-b); background: var(--bcj-sel); padding: 2px 9px 2px 10px; transform: none; mix-blend-mode: normal; opacity: 1; }
.bcj-cae { animation: bcj-cae 190ms cubic-bezier(.3, 1.4, .6, 1) both; }
@keyframes bcj-cae { from { transform: rotate(-2.5deg) scale(1.3); opacity: 0; } to { transform: rotate(-2.5deg) scale(1); opacity: .94; } }

/* ============================================================
   ARRIBA: la ficha de la caja y el talón con su calendario
   ============================================================ */
.bcj-banda { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: stretch; }

.bcj-ficha { display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; padding: .8rem 1.2rem 1rem; }
.bcj-f-cab { display: flex; align-items: flex-start; gap: 1rem; }
.bcj-quien { flex: 1 1 auto; min-width: 0; }
.bcj a.bcj-volver { display: inline-flex; align-items: baseline; gap: .35em; font-size: .92em; font-weight: 700; color: var(--texto-2); }
.bcj a.bcj-volver span { font-size: 1.25em; line-height: 1; }
.bcj a.bcj-volver i { font-style: normal; font-weight: 600; color: var(--gris); }
.bcj a.bcj-volver:hover { color: var(--tinta); }
.bcj-quien h2 { margin-top: .2rem; font-size: 1.5em; font-weight: 800; letter-spacing: -.012em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcj-quien p { margin-top: .1rem; font-size: .95em; color: var(--texto-2); }
.bcj-arq { display: grid; justify-items: end; gap: .3rem; flex: none; }
.bcj-arq small { font-size: .75rem; color: var(--gris); white-space: nowrap; }
.bcj-arq small b { font-weight: 700; color: var(--texto-2); }
/* la diferencia del último arqueo contra lo que decía el sistema (28/09/2026) */
.bcj-arq-d { font-style: normal; font-weight: 800; }
.bcj-arq-d.cuadra { color: var(--verde-texto); }
.bcj-arq-d.sobra { color: var(--ambar); }
.bcj-arq-d.falta { color: var(--rojo); }

/* el efectivo, solo: cifra impresa */
.bcj-ef { display: grid; gap: .2rem; justify-items: start; }
.bcj-ef b { font-size: 2.875rem; font-weight: 800; line-height: 1; letter-spacing: -.015em; }
.bcj-ef b span { margin-right: .16em; font-size: .44em; font-weight: 700; letter-spacing: 0; color: var(--gris); }

/* la regla del efectivo: lo que tiene la caja, repartido; y lo que ya salió */
.bcj-cuenta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.6rem; align-items: end; }
.bcj-regla { display: flex; gap: 3px; min-width: 0; }
.bcj-seg { flex: var(--p) 1 0; min-width: 8.5rem; display: grid; align-content: start; gap: .35rem; }
.bcj-rg { position: relative; display: block; height: .7rem; border-radius: 2px; background: var(--c); }
.bcj-seg-sol { --c: var(--bcj-sol-barra); }
.bcj-seg-rem { --c: var(--bcj-rem); }
.bcj-seg-nada { --c: var(--linea-2); }
.bcj-seg-nada .bcj-rg { height: 1px; margin: calc(.35rem - .5px) 0; }
.bcj-rg-elg {
  position: absolute; top: -3px; bottom: -3px; left: 0; width: 0; border-radius: 2px; text-decoration: none;
  background: var(--bcj-pre); outline: 1.5px dashed var(--bcj-sel-b); outline-offset: -1.5px; opacity: 0;
  transition: left 150ms, width 150ms, opacity 120ms;
}
.bcj-rg-elg.bcj-ver, .bcj-rg-eco.bcj-ver { opacity: 1; }
.bcj-rg-eco { position: absolute; top: -3px; bottom: -3px; left: 0; width: 0; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--tinta); opacity: 0; transition: left 150ms, width 150ms, opacity 120ms; }
.bcj-rg-elg.bcj-fuerte { background: var(--bcj-sel); outline: 2px solid var(--bcj-sel-b); outline-offset: -2px; }
.bcj-fig { display: grid; gap: .1rem; min-width: 0; }
.bcj-fig dt { display: flex; align-items: center; gap: .4em; font-size: .65625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bcj-fig dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6em; min-width: 0; }
.bcj-fig dd b { font-size: 1rem; font-weight: 800; }
.bcj-fig dd small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; font-weight: 600; color: var(--texto-2); }
.bcj-fig dd small.bcj-elg-t { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: var(--bcj-sel-t); }
.bcj-fig dd small.bcj-elg-t i { width: .7em; height: .7em; border-radius: 2px; background: var(--bcj-sel); box-shadow: inset 0 0 0 1.5px var(--bcj-sel-b); }
.bcj-seg-sol .bcj-fig dt, .bcj-seg-sol .bcj-fig dd b { color: var(--bcj-sol); }
.bcj-seg-rem .bcj-fig dt, .bcj-seg-rem .bcj-fig dd b { color: var(--bcj-rem); }
.bcj-fuera { display: flex; gap: 1.5rem; padding-left: 1.4rem; border-left: 3px double var(--linea-2); }
.bcj-fuera .bcj-fig dd, .bcj-regla .bcj-fig dd { flex-direction: column; align-items: flex-start; gap: 0; }
.bcj-regla .bcj-fig dd small { max-width: 100%; }
.bcj-fuera .bcj-fig dd b { font-size: .9375rem; font-weight: 700; }
.bcj-fuera .bcj-fig dt::before { content: ""; width: .6em; height: .6em; border-radius: 2px; background: var(--c); }
.bcj-f-cam { --c: var(--bcj-cam-b); }
.bcj-f-cam dd b { color: var(--bcj-cam); }
.bcj-f-rec { --c: var(--bcj-rec-b); }
.bcj-fig b.bcj-cero { font-weight: 600; color: var(--gris); }

/* ---------- el calendario: semanas hacia abajo, cada una con su llave ---------- */
.bcj-pedir { display: grid; grid-template-columns: auto 14.2rem; }
.bcj-cal-z { padding: .75rem .9rem .7rem .55rem; min-width: 0; }
.bcj-cal-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .45rem calc(var(--bcj-kw) + 5px); }
.bcj-cal-cab b { font-size: .98em; font-weight: 800; }
.bcj-sem, .bcj-cw { display: grid; grid-template-columns: var(--bcj-kw) repeat(7, var(--bcj-cw)); column-gap: 3px; }
.bcj-sem { margin-bottom: 3px; padding: 0 2px; }
.bcj-sem i { font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-align: center; color: var(--gris); }
.bcj-cal { display: grid; row-gap: 3px; padding: 2px; max-height: calc(var(--bcj-ch) * 6 + 19px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bcj-cw { position: relative; height: var(--bcj-ch); }
.bcj-cw::after { content: ""; position: absolute; inset: -2px -2px -2px calc(var(--bcj-kw) + 1px); border: 1.5px solid transparent; border-radius: 7px; pointer-events: none; transition: border-color 120ms; }
.bcj-cw.bcj-eco-sem::after, .bcj-cw.bcj-sem-on::after { border-color: var(--tinta); }

/* la llave en miniatura: el mismo corchete del libro, semana por semana */
.bcj .bcj-llv { position: relative; display: flex; flex-direction: column; width: var(--bcj-kw); height: 100%; padding: 0; border-radius: 3px; }
.bcj-llv::before { content: ""; position: absolute; inset: -1px -2px; border-radius: 3px; background: transparent; transition: background-color 120ms; }
.bcj-llv:hover::before, .bcj-llv.bcj-eco::before, .bcj-cw.bcj-sem-on .bcj-llv::before { background: var(--bcj-eco); }
.bcj-llv > i { position: relative; display: block; min-height: 0; flex-basis: 0; }
.bcj-mk { margin-left: calc(var(--bcj-kw) - .5rem); border-left: 2.5px solid var(--c); }
.bcj-mk.bcj-mk-a { border-top: 2px solid var(--c); border-top-left-radius: 2px; }
.bcj-mk.bcj-mk-z { border-bottom: 2px solid var(--c); border-bottom-left-radius: 2px; }
.bcj-mk.bcj-mk-sig { margin-bottom: -3px; }
.bcj-mk.bcj-t-borrador { border-left-style: dashed; }
.bcj-llv.bcj-eco .bcj-mk, .bcj-llv:hover .bcj-mk, .bcj-cw.bcj-sem-on .bcj-mk { border-left-width: 3.5px; }

.bcj .bcj-cd {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 0; height: 100%; padding: 0;
  border: 1px solid var(--linea); border-radius: 5px; background: var(--sup-1); color: var(--tinta); text-align: center;
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms;
}
.bcj-cd b { font-size: .8125rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bcj-cd small { font-family: var(--bcj-num); font-stretch: 88%; font-size: .625rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.bcj-cd i { position: absolute; top: 2px; left: 4px; font-size: .5rem; font-style: normal; font-weight: 800; letter-spacing: .06em; color: var(--gris); }
.bcj-cd .bcj-candado { position: absolute; top: 3px; right: 3px; width: 7px; height: 8px; }
.bcj .bcj-cd-x { border: 0; background: transparent; }
.bcj .bcj-cd-fut { border: 0; background: transparent; color: var(--linea-2); cursor: default; }
.bcj-cd-fut b { font-size: .75rem; font-weight: 600; }
.bcj-cd-fut i { color: var(--linea-2); }
.bcj .bcj-cd.bcj-e-remesable { background: var(--bcj-rem-s); border-color: color-mix(in srgb, var(--bcj-rem) 38%, transparent); color: var(--bcj-rem); }
.bcj .bcj-cd.bcj-e-sin { border-color: var(--linea); color: var(--texto-2); }
.bcj .bcj-cd.bcj-e-remesable:not(.bcj-sel):not(.bcj-pre):hover, .bcj .bcj-cd.bcj-e-sin:not(.bcj-sel):not(.bcj-pre):hover { border-color: var(--bcj-rem); }
.bcj .bcj-cd.bcj-e-pedido { background: var(--bcj-sol-s); border: 1.5px solid color-mix(in srgb, var(--bcj-sol) 60%, transparent); color: var(--bcj-sol); cursor: not-allowed; }
.bcj .bcj-cd.bcj-e-camino { background: var(--bcj-cam-s); border: 1.5px dotted var(--bcj-cam-b); color: var(--bcj-cam); cursor: not-allowed; }
.bcj .bcj-cd.bcj-e-recogido { background: var(--bcj-rec-s); border-color: var(--linea-2); color: var(--texto-2); cursor: not-allowed; }
.bcj .bcj-cd.bcj-e-hoy { background: transparent; border: 1.5px dashed var(--texto-2); cursor: not-allowed; }
.bcj-cd.bcj-e-hoy small { font-family: inherit; font-stretch: 100%; font-size: .5rem; font-weight: 800; letter-spacing: .1em; color: var(--texto-2); }
.bcj .bcj-cd.bcj-pre { background: var(--bcj-pre); border: 1px dashed var(--bcj-sel-b); color: var(--bcj-sel-t); }
.bcj .bcj-cd.bcj-sel { background: var(--bcj-sel); border: 2px solid var(--bcj-sel-b); color: var(--tinta); }
.bcj .bcj-cd.bcj-ini, .bcj .bcj-cd.bcj-fin { box-shadow: inset 0 0 0 1px var(--sup-1); }
.bcj .bcj-cd.bcj-eco { box-shadow: 0 0 0 1.5px var(--tinta); }
.bcj .bcj-cd.bcj-toque { box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 3.5px var(--tinta); z-index: 1; }

.bcj-ley { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: .6rem 0 0 calc(var(--bcj-kw) + 5px); font-size: .65625rem; color: var(--texto-2); }
.bcj-ley span { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
.bcj-ley span::before { content: ""; width: .95em; height: .8em; border-radius: 2px; border: 1px solid transparent; box-sizing: border-box; }
.bcj-ley .l-rem::before { background: var(--bcj-rem-s); border-color: var(--bcj-rem); }
.bcj-ley .l-sol::before { background: var(--bcj-sol-s); border: 1.5px solid var(--bcj-sol); }
.bcj-ley .l-sol { color: var(--bcj-sol); font-weight: 700; }
.bcj-ley .l-cam::before { background: var(--bcj-cam-s); border: 1.5px dotted var(--bcj-cam-b); }
.bcj-ley .l-rec::before { background: var(--bcj-rec-s); border-color: var(--linea-2); }
.bcj-ley .l-sel::before { background: var(--bcj-sel); border: 2px solid var(--bcj-sel-b); }

/* ---------- el talón: la solicitud, o el porqué de lo bloqueado ---------- */
.bcj-talon-z { display: grid; min-width: 0; }
.bcj-talon {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: .75rem 1rem .8rem 1.1rem;
  border-left: 1.5px dashed var(--linea-2); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--sup-2) 75%, var(--sup-1));
  transition: background-color 150ms;
}
.bcj-talon.bcj-activo { background: color-mix(in srgb, var(--ambar-suave) 70%, var(--sup-1)); }
.bcj-t-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; height: 1.25rem; min-width: 0; }
.bcj-t-tag { display: inline-flex; align-items: center; gap: .4em; min-width: 0; overflow: hidden; white-space: nowrap; font-size: .65625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.bcj-t-tag.bcj-mono { font-family: var(--bcj-mono); font-size: .7rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.bcj-t-tag::before { content: ""; flex: none; width: .7em; height: .7em; border-radius: 2px; background: var(--c, transparent); }
.bcj-t-tag.bcj-mono::before { display: none; }
.bcj-tg-remesable { --c: var(--bcj-rem); color: var(--bcj-rem); }
.bcj-tg-pedido { --c: var(--bcj-sol-barra); color: var(--bcj-sol); }
.bcj-tg-camino, .bcj-tg-en_camino { --c: var(--bcj-cam-b); color: var(--bcj-cam); }
.bcj-tg-recogido, .bcj-tg-recibida, .bcj-tg-con_diferencia { --c: var(--bcj-rec-b); color: var(--texto-2); }
.bcj-tg-borrador { --c: var(--bcj-sel); color: var(--bcj-sel-t); }
.bcj-tg-sin, .bcj-tg-semana { --c: var(--linea-2); color: var(--texto-2); }
.bcj-tg-hoy { --c: var(--tinta); color: var(--tinta); }
.bcj-t-f { display: grid; gap: .25rem; margin-top: .45rem; }
.bcj-t-f > div { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: baseline; }
.bcj-t-f dt { font-size: .65625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bcj-t-f dd { height: 1.65rem; padding-top: .1rem; border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 30%, transparent); font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.bcj-prev { color: color-mix(in srgb, var(--tinta) 42%, var(--sup-1)); }
.bcj-t-d { height: 1.1rem; margin: .3rem 0 0 2.1rem; font-size: .75rem; font-weight: 600; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcj-t-m { display: grid; gap: .1rem; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--linea-2); }
.bcj-t-m b { height: 1.75rem; font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.bcj-t-m b span { margin-right: .2em; font-size: .55em; font-weight: 700; color: var(--gris); }
.bcj-t-m b .bcj-prev { margin: 0; font-size: 1em; font-weight: 800; color: color-mix(in srgb, var(--tinta) 42%, var(--sup-1)); }
.bcj-raya { display: inline-block; width: 100%; }
.bcj-t-m .bcj-raya { width: 6em; height: 1em; border-bottom: 1.5px dotted color-mix(in srgb, var(--tinta) 30%, transparent); vertical-align: baseline; font-size: .6em; }
.bcj-t-acc { display: grid; gap: .3rem; margin-top: auto; padding-top: .5rem; }
.bcj-t-acc .bcj-pri { width: 100%; }
.bcj-t-pie { display: flex; justify-content: center; align-items: center; height: 1.2rem; min-width: 0; }
.bcj-t-nota { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; font-weight: 600; color: var(--texto-2); }
.bcj-t-nota b { color: var(--bcj-sol); font-weight: 800; }

/* el porqué: el talón se vuelve la ficha de lo bloqueado */
.bcj-talon.bcj-exp { --c: var(--tinta); --cs: var(--sup-2); background: color-mix(in srgb, var(--cs) 55%, var(--sup-1)); border-left: 3px solid var(--c); padding-left: 1rem; }
.bcj-talon.bcj-x-pedido { --c: var(--bcj-sol); --cs: var(--bcj-sol-s); }
.bcj-talon.bcj-x-camino { --c: var(--bcj-cam); --cs: var(--ambar-suave); }
.bcj-talon.bcj-x-recogido { --c: var(--texto-2); --cs: var(--bcj-rec-s); }
.bcj-talon.bcj-x-hoy { --c: var(--tinta); --cs: var(--sup-3); }
.bcj-x-cab { display: inline-flex; align-items: center; gap: .45em; color: var(--c); }
.bcj .bcj-x-cerrar { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: -.4rem; border-radius: 4px; font-size: 1.05rem; line-height: 1; color: var(--gris); }
.bcj .bcj-x-cerrar:hover { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--tinta); }
.bcj-x-por { margin-top: .35rem; font-size: .8125rem; font-weight: 700; line-height: 1.3; color: var(--tinta); }
.bcj-x-por b { color: var(--c); }
.bcj-x-tk { display: grid; justify-items: start; gap: .3rem; margin-top: .55rem; padding: .55rem .65rem .6rem; background: var(--sup-1); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); border-radius: 5px; min-width: 0; }
.bcj-x-tk .bcj-sello { font-size: .64rem; }
.bcj-x-l { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; width: 100%; min-width: 0; }
.bcj-x-l b { font-size: .8125rem; font-weight: 800; color: var(--c); }
.bcj-x-l strong { font-size: 1rem; font-weight: 800; }
.bcj-x-q { width: 100%; min-width: 0; font-size: .75rem; line-height: 1.35; color: var(--texto-2); }
.bcj-x-q q { font-style: italic; color: var(--tinta); quotes: "«" "»"; }
.bcj-x-q.bcj-mal { font-weight: 700; color: var(--bcj-rem); }
.bcj-x-acc { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bcj-x-acc .bcj-link { padding-left: 0; }
.bcj .bcj-x-acc .bcj-sec, .bcj .bcj-x-acc .bcj-pri { height: 2rem; padding: 0 .9em; }
.bcj .bcj-x-anular:hover { border-color: var(--bcj-rem); color: var(--bcj-rem); background: var(--bcj-rem-s); }

/* ============================================================
   EL LIBRO: nota | barra · cifra | fecha en el lomo | llave | asiento
   ============================================================ */
.bcj-libro {
  --bcj-cols: 17em minmax(3em, 22em) 6.9em 6.4em 1.5em minmax(0, 1fr);
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; position: relative;
  scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent; scrollbar-gutter: stable;
}
.bcj-lb-cab {
  position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: var(--bcj-cols); align-items: center; height: 2.35rem;
  padding: 0 .4rem 0 .6rem; background: var(--sup-1); border-bottom: 1px solid var(--linea);
}
.bcj-lb-cab > span { grid-row: 1; font-size: .65625rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.bcj-lc-nota { grid-column: 1; justify-self: end; padding-right: 1em; }
.bcj-lc-dia { grid-column: 2 / 4; justify-self: end; padding-right: .6em; }
.bcj-lc-lomo { grid-column: 4; justify-self: center; }
.bcj-lc-rem { grid-column: 6; padding-left: .85em; }
.bcj-lc-tot { grid-column: 6; justify-self: end; padding-right: .75em; letter-spacing: .02em !important; text-transform: none !important; font-size: .75rem !important; font-weight: 600 !important; color: var(--texto-2) !important; }

.bcj-lb { position: relative; display: grid; grid-template-columns: var(--bcj-cols); grid-auto-rows: minmax(1.95em, auto); padding: .3rem .4rem .9rem .6rem; }
.bcj-espina { grid-column: 4; justify-self: center; position: relative; z-index: 1; width: 6px; margin: .5em 0; border-left: 1.5px solid var(--bcj-lomo); border-right: 1.5px solid var(--bcj-lomo); pointer-events: none; }
.bcj-fil { grid-column: 1 / -1; align-self: end; height: 0; border-bottom: 1px solid var(--linea-2); pointer-events: none; }

/* un día: su nota, su barra, su cifra pegada a la fecha */
.bcj .bcj-d {
  --bcj-fondo: var(--sup-1);
  grid-column: 1 / 5; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 1.95em; padding: 0;
  background: transparent; border-radius: 3px; transition: background-color 120ms;
}
.bcj-d.bcj-bloq { cursor: not-allowed; }
.bcj-d-nota { grid-column: 1; min-width: 0; padding: .2em 1em .2em .3em; text-align: right; font-size: .75rem; line-height: 1.25; color: var(--gris); }
.bcj-d-nota b { font-family: var(--bcj-num); font-stretch: 88%; font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bcj-d-b { grid-column: 2; display: flex; justify-content: flex-end; min-width: 0; padding: 0 .45em 0 .4em; }
.bcj-d-b i { display: block; height: .55em; width: calc(var(--p, 0) * 100%); border-radius: 2px 0 0 2px; background: var(--bcj-rec-b); transition: background-color 120ms; }
.bcj-d-m {
  grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: .35em; height: 1.6em; padding: 0 .55em; border-radius: 3px;
  font-size: .8125rem; font-weight: 700; color: var(--gris); transition: background-color 120ms, box-shadow 120ms;
}
.bcj-d-m .bcj-candado { margin-right: auto; width: .7em; height: .8em; }
.bcj-d-f {
  grid-column: 4; justify-self: center; position: relative; z-index: 2; display: inline-flex; align-items: baseline; justify-content: center; gap: .4em;
  min-width: 5.2em; padding: .2em .35em; background: var(--bcj-fondo); border-radius: 3px; font-size: .75rem; line-height: 1.1; color: var(--texto-2); white-space: nowrap;
  transition: background-color 120ms;
}
.bcj-d-f em { font-style: normal; font-size: .625rem; font-weight: 800; letter-spacing: .08em; color: var(--gris); }
.bcj-d-f span { font-family: var(--bcj-num); font-stretch: 88%; font-weight: 700; font-variant-numeric: tabular-nums; }
.bcj-d.bcj-cero .bcj-d-f span { font-weight: 500; color: var(--gris); }
.bcj-d.bcj-cero .bcj-d-f em { color: color-mix(in srgb, var(--gris) 70%, var(--sup-1)); }
.bcj .bcj-d.bcj-e-hoy .bcj-d-f { background: var(--tinta); color: #FFFFFF; padding: .28em .5em; }
.bcj .bcj-d.bcj-e-hoy .bcj-d-f em, .bcj .bcj-d.bcj-e-hoy .bcj-d-f span { color: #FFFFFF; font-weight: 800; }
.bcj-d.bcj-e-hoy .bcj-d-m { font-size: .65625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }

.bcj-d.bcj-e-remesable .bcj-d-m { background: var(--bcj-rem-s); color: var(--bcj-rem); }
.bcj-d.bcj-e-remesable .bcj-d-b i { background: var(--bcj-rem); }
.bcj-d.bcj-e-pedido .bcj-d-m { background: var(--bcj-sol-s); color: var(--bcj-sol); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bcj-sol) 45%, transparent); }
.bcj-d.bcj-e-pedido .bcj-d-b i { background: var(--bcj-sol-barra); }
.bcj-d.bcj-e-camino .bcj-d-m { background: var(--bcj-cam-s); color: var(--bcj-cam); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bcj-cam-b) 70%, transparent); outline: 1px dotted var(--bcj-cam-b); outline-offset: -1px; }
.bcj-d.bcj-e-camino .bcj-d-b i { background: var(--bcj-cam-barra); }
.bcj-d.bcj-e-recogido .bcj-d-m { background: var(--bcj-rec-s); color: var(--texto-2); }
.bcj-d.bcj-cero .bcj-d-m { background: transparent !important; box-shadow: none !important; outline: 0 !important; }
.bcj-d.bcj-pre .bcj-d-m { background: var(--bcj-pre); color: var(--bcj-sel-t); box-shadow: inset 0 0 0 1px var(--bcj-sel-b); outline: 0; }
.bcj-d.bcj-pre .bcj-d-b i { background: color-mix(in srgb, var(--ambar-2) 70%, var(--sup-1)); }
.bcj .bcj-d.bcj-sel { --bcj-fondo: var(--bcj-sel-fila); background: var(--bcj-fondo); }
.bcj-d.bcj-sel .bcj-d-m { background: var(--bcj-sel); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--bcj-sel-b); outline: 0; }
.bcj-d.bcj-sel .bcj-d-b i { background: var(--bcj-sel-b); }
.bcj .bcj-d.bcj-eco, .bcj .bcj-d.bcj-sem-on { --bcj-fondo: var(--bcj-eco); background: var(--bcj-fondo); }
.bcj .bcj-d.bcj-sel.bcj-eco { --bcj-fondo: color-mix(in srgb, var(--ambar-2) 34%, var(--sup-1)); }
.bcj-d.bcj-eco .bcj-d-f span, .bcj-d.bcj-sem-on .bcj-d-f span { color: var(--tinta); }
.bcj .bcj-d.bcj-toque { --bcj-fondo: var(--bcj-eco); background: var(--bcj-fondo); }
.bcj-d.bcj-toque .bcj-d-f { outline: 2px solid var(--tinta); outline-offset: 1px; }
.bcj .bcj-d.bcj-e-remesable:not(.bcj-sel):hover .bcj-d-m, .bcj .bcj-d.bcj-e-sin:not(.bcj-sel):hover .bcj-d-m { box-shadow: inset 0 0 0 1px var(--bcj-rem); }

/* días seguidos sin plata: un solo renglón */
.bcj-d.bcj-pliego { cursor: default; }
.bcj-pliego .bcj-d-m { font-family: var(--bcj-num); font-stretch: 100%; font-size: .75rem; font-weight: 600; font-style: italic; color: var(--gris); }
.bcj-pliego .bcj-d-f span { font-weight: 600; color: var(--gris); }

/* el pie del libro: el arqueo con que empezó la caja */
.bcj-pie { --bcj-fondo: var(--sup-1); grid-column: 1 / 5; display: grid; grid-template-columns: subgrid; align-items: center; min-height: 2.5em; }
.bcj-pie .bcj-pie-t { grid-column: 2; justify-self: end; padding-right: .45em; font-size: .65625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.bcj-pie .bcj-d-m { color: var(--texto-2); }
.bcj-pie .bcj-d-f { border: 3px double var(--bcj-lomo); padding: .15em .45em; }

/* lo que pasó: la llave abraza sus días; el asiento, con su sello */
.bcj-ll { grid-column: 5; justify-self: start; position: relative; z-index: 1; width: .6em; margin: .5em 0 .45em .3em; border: 2px solid var(--c); border-left: 0; border-radius: 0 3px 3px 0; pointer-events: none; transition: border-width 120ms; }
.bcj-ll.bcj-ll-1 { align-self: center; width: .75em; height: 0; margin: 0 0 0 .3em; border-width: 2px 0 0 0; border-radius: 0; }
.bcj-ll.bcj-t-borrador { border-style: dashed; }
.bcj-ll.bcj-eco, .bcj-ll.bcj-senal { border-width: 3px; border-left: 0; }
.bcj-ll.bcj-ll-1.bcj-eco, .bcj-ll.bcj-ll-1.bcj-senal { border-width: 3px 0 0 0; }
.bcj-t-pedido { --c: var(--bcj-sol); }
.bcj-t-en_camino { --c: var(--bcj-cam-b); }
.bcj-t-recibida, .bcj-t-con_diferencia { --c: var(--bcj-rec-b); }
.bcj-t-remesable { --c: var(--bcj-rem); }
.bcj-t-borrador { --c: var(--bcj-sel-b); }

.bcj-as-z { grid-column: 6; position: relative; z-index: 3; min-width: 0; padding-left: .15em; }
.bcj-as {
  position: sticky; top: 2.45rem; display: grid; grid-template-columns: 12.4em minmax(0, 1fr) 8em 8.6em; column-gap: 1.1em; align-items: baseline;
  padding: 0 .75em .5em .7em; border-radius: 6px; background: var(--sup-1); transition: background-color 150ms, box-shadow 150ms;
}
.bcj-as.bcj-eco { background: color-mix(in srgb, var(--c) 7%, var(--sup-1)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.bcj-as.bcj-senal { background: color-mix(in srgb, var(--c) 9%, var(--sup-1)); box-shadow: inset 0 0 0 1.5px var(--c); }
.bcj-as.bcj-t-borrador { background: color-mix(in srgb, var(--ambar-suave) 80%, var(--sup-1)); box-shadow: inset 0 0 0 1.5px var(--bcj-sel-b); }
.bcj-as-sello { justify-self: start; min-width: 0; }
.bcj-as-txt { display: grid; gap: .25em; min-width: 0; padding-top: 3px; }
.bcj-as-r { display: flex; align-items: baseline; gap: .6em; min-width: 0; white-space: nowrap; }
.bcj-as-r b { font-size: .8125rem; font-weight: 800; }
.bcj-as-r i { font-style: normal; font-size: .75rem; font-weight: 600; color: var(--gris); }
.bcj-as-meta { min-width: 0; font-size: .75rem; line-height: 1.35; color: var(--texto-2); }
.bcj-as-meta q { font-style: italic; color: var(--tinta); quotes: "«" "»"; }
.bcj-as-meta .bcj-mal { font-weight: 700; color: var(--bcj-rem); }
.bcj-as-sob { display: flex; flex-wrap: wrap; gap: .2em 1em; font-size: .75rem; }
.bcj-sob { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; color: var(--bcj-cam); }
.bcj-sob svg { width: 15px; height: 11px; fill: var(--sup-1); stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.bcj-sob span { font-family: var(--bcj-mono); font-size: .92em; font-weight: 500; }
.bcj-sob b { font-family: var(--bcj-num); font-stretch: 88%; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.bcj-as-mon { display: grid; justify-items: end; gap: .15em; min-width: 0; }
.bcj-as-mon > b { font-size: 1rem; font-weight: 800; }
.bcj-t-pedido .bcj-as-mon > b { color: var(--bcj-sol); }
.bcj-t-en_camino .bcj-as-mon > b { color: var(--bcj-cam); }
.bcj-t-recibida .bcj-as-mon > b, .bcj-t-con_diferencia .bcj-as-mon > b { color: var(--texto-2); }
.bcj-t-remesable .bcj-as-mon > b { color: var(--bcj-rem); }
.bcj-t-borrador .bcj-as-mon > b { color: var(--bcj-sel-t); }
.bcj-as-mon small { font-size: .75rem; font-weight: 700; white-space: nowrap; }
.bcj-as-mon small.bcj-mal { color: var(--bcj-rem); }
.bcj-as-acc { justify-self: end; min-width: 0; }
.bcj-as-acc > * { margin: -6px 0; }
.bcj .bcj-anular { padding: .05em .1em; font-size: .75rem; font-weight: 700; color: var(--texto-2); text-decoration: underline; text-decoration-color: var(--linea-2); text-underline-offset: 2px; }
.bcj .bcj-anular:hover { color: var(--bcj-rem); text-decoration-color: currentColor; }
.bcj .bcj-as .bcj-pri { height: 1.75rem; padding: 0 .9em; font-size: .75rem; }
.bcj .bcj-elegir { height: 1.75rem; padding: 0 .8em; border: 1px solid color-mix(in srgb, var(--bcj-rem) 45%, transparent); border-radius: 6px; font-size: .75rem; color: var(--bcj-rem); font-weight: 700; transition: background-color 150ms; }
.bcj .bcj-elegir:hover { background: var(--bcj-rem-s); }
.bcj-porrem { display: inline-flex; align-items: center; gap: .5em; font-size: .65625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bcj-rem); white-space: nowrap; }
.bcj-porrem::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--bcj-rem); }

/* tramos de uno o dos días: el asiento en una o dos líneas, sello de un renglón */
.bcj-as.bcj-c1, .bcj-as.bcj-c2 { padding-bottom: .15em; }
.bcj-c1 .bcj-as-txt { display: flex; align-items: baseline; gap: .8em; }
.bcj-c1 .bcj-as-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcj-c1 .bcj-sello, .bcj-c2 .bcj-sello { padding-top: 1px; padding-bottom: 1px; }
.bcj .bcj-c1 .bcj-pri, .bcj .bcj-c1 .bcj-elegir { height: 1.45rem; }
.bcj-c2 .bcj-as-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- los diálogos: recibir y arqueo ---------- */
.bcj-dlg { margin: auto; width: min(27rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--linea); border-radius: 10px; background: var(--sup-1); color: var(--tinta); font-size: .82rem; }
.bcj-dlg::backdrop { background: color-mix(in srgb, var(--tinta) 38%, transparent); }
.bcj-dlg form { display: grid; gap: .8rem; padding: 1.1rem 1.25rem 1.1rem; }
.bcj-dlg h3 { font-size: 1.15em; font-weight: 800; }
.bcj-dlg-q { margin-top: .2rem; font-size: .92em; color: var(--texto-2); }
.bcj-dlg-sob { width: 100%; border-collapse: collapse; font-size: .95em; }
.bcj-dlg-sob th, .bcj-dlg-sob td { padding: .35em 0; border-bottom: 1px solid var(--linea); text-align: right; font-weight: 600; }
.bcj-dlg-sob th:first-child { text-align: left; }
.bcj-dlg-sob thead th { padding-top: 0; font-size: .65625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bcj-dlg-sob tbody th { font-family: var(--bcj-mono); font-weight: 500; color: var(--bcj-cam); }
.bcj-dlg-sob td { font-family: var(--bcj-num); font-stretch: 88%; font-variant-numeric: tabular-nums; }
.bcj-dlg-sob tfoot th, .bcj-dlg-sob tfoot td { border-bottom: 0; border-top: 1.5px solid var(--tinta); font-weight: 800; }
.bcj-campo { display: grid; gap: .3rem; }
.bcj-campo > span { font-size: .65625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bcj-campo input, .bcj-campo textarea, .bcj-campo output {
  width: 100%; padding: .45em .65em; border: 1px solid var(--linea-2); border-radius: 6px; background: var(--sup-1); color: var(--tinta); font: inherit; font-size: 1em; font-weight: 600;
}
.bcj-campo output { background: var(--sup-2); color: var(--texto-2); }
.bcj-campo textarea { resize: vertical; min-height: 3.2em; }
.bcj-monto { position: relative; display: block; }
.bcj-monto i { position: absolute; left: .8em; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 1.05em; font-weight: 700; color: var(--gris); }
.bcj .bcj-monto input { height: 2.7rem; padding-left: 2.2em; font-family: var(--bcj-num); font-stretch: 88%; font-size: 1.6em; font-weight: 700; font-variant-numeric: tabular-nums; }
.bcj-dlg-dif { min-height: 1.2em; font-size: .92em; font-weight: 700; color: var(--texto-2); }
.bcj-dlg-dif.bcj-mal { color: var(--bcj-rem); }
.bcj-dlg-pie { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .3rem; }
.bcj-dlg-pie .bcj-pri { height: 2.2rem; }

/* ============================================================
   PANTALLAS MEDIANAS Y EL TELÉFONO
   ============================================================ */
@media (max-width: 1500px) {
  .bcj { --bcj-cw: 3rem; --bcj-ch: 2.05rem; }
  .bcj-pedir { grid-template-columns: auto 12.8rem; }
  .bcj-talon { padding-left: .95rem; padding-right: .85rem; }
  .bcj-ef b { font-size: 2.35rem; }
  .bcj-seg { min-width: 7.5rem; }
  .bcj-cuenta { grid-template-columns: minmax(0, 1fr); row-gap: .55rem; }
  .bcj-fuera { gap: 2.2rem; padding-left: 0; border-left: 0; padding-top: .5rem; border-top: 3px double var(--linea-2); }
  .bcj-fuera .bcj-fig dd, .bcj-regla .bcj-fig dd { flex-direction: row; align-items: baseline; gap: 0 .6em; }
  .bcj-ficha { gap: .45rem; }
  .bcj-libro { --bcj-cols: 10.5em minmax(2em, 9em) 6.6em 6em 1.4em minmax(0, 1fr); }
  .bcj-as { grid-template-columns: 12.2em minmax(0, 1fr) 7.2em 8em; column-gap: .9em; }
}
@media (max-width: 900px) {
  .bcj { --bcj-ch: 2.55rem; --bcj-kw: .75rem; gap: .5rem; }
  .bcj-banda { grid-template-columns: minmax(0, 1fr); }
  .bcj-ficha { padding: .75rem .85rem .85rem; }
  .bcj-f-cab { flex-wrap: wrap; }
  .bcj-arq { justify-items: start; }
  .bcj-quien h2 { white-space: normal; }
  .bcj-ef b { font-size: 2.1rem; }
  .bcj-seg { min-width: 6.5rem; }
  .bcj-fuera { gap: 1.2rem; }
  .bcj-pedir { grid-template-columns: minmax(0, 1fr); }
  .bcj-cal-z { padding: .7rem .6rem .65rem .4rem; }
  .bcj-sem, .bcj-cw { grid-template-columns: var(--bcj-kw) repeat(7, minmax(0, 1fr)); }
  .bcj-cal { max-height: none; }
  .bcj-talon { border-left: 0; border-top: 1.5px dashed var(--linea-2); border-radius: 0 0 8px 8px; padding: .6rem .85rem .65rem; }
  .bcj-talon:not(.bcj-exp) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "f m" "d acc"; column-gap: .8rem; row-gap: .45rem; align-items: center;
  }
  .bcj-talon:not(.bcj-exp) .bcj-t-cab { display: none; }
  .bcj-talon:not(.bcj-exp) .bcj-t-f { grid-area: f; display: flex; gap: .9rem; margin: 0; }
  .bcj-talon:not(.bcj-exp) .bcj-t-f > div { display: flex; align-items: baseline; gap: .45rem; }
  .bcj-talon:not(.bcj-exp) .bcj-t-f dd { height: auto; min-width: 3.1em; padding: 0; font-size: 1rem; }
  .bcj-talon:not(.bcj-exp) .bcj-t-d { grid-area: d; margin: 0; display: flex; gap: .7rem; align-items: center; }
  .bcj-talon:not(.bcj-exp) .bcj-t-m { grid-area: m; margin: 0; padding: 0; border: 0; justify-items: end; }
  .bcj-talon:not(.bcj-exp) .bcj-t-m .bcj-caps { display: none; }
  .bcj-talon:not(.bcj-exp) .bcj-t-m b { height: auto; font-size: 1.2rem; }
  .bcj-talon:not(.bcj-exp) .bcj-t-acc { grid-area: acc; margin: 0; padding: 0; }
  .bcj-talon:not(.bcj-exp) .bcj-t-acc .bcj-pri { height: 2.2rem; width: auto; padding: 0 1.3em; }
  .bcj-talon:not(.bcj-exp) .bcj-t-pie { display: none; }
  .bcj-talon:not(.bcj-exp) .bcj-t-d .bcj-t-nota { font-size: .75rem; }
  .bcj-talon:not(.bcj-exp) .bcj-t-d .bcj-link { padding-left: 0; }
  .bcj-talon.bcj-fijo { position: fixed; left: .5rem; right: .5rem; bottom: .5rem; z-index: 40; border: 1px solid var(--c, var(--bcj-sel-b)); border-radius: 8px; box-shadow: 0 8px 24px color-mix(in srgb, var(--tinta) 18%, transparent); }
  .bcj-talon.bcj-exp.bcj-fijo { border-left-width: 3px; max-height: calc(100svh - 5rem); overflow-y: auto; }
  .bcj-libro { --bcj-cols: 0 0 5.9em 4.9em 1.2em minmax(0, 1fr); overflow: visible; flex: none; }
  .bcj-lb-cab { position: static; padding: 0 .45rem 0 .5rem; }
  .bcj-lb { padding-left: .5rem; padding-right: .45rem; }
  .bcj-d-nota, .bcj-d-b, .bcj-lc-tot, .bcj-lc-nota, .bcj-pie .bcj-pie-t { display: none; }
  .bcj-d-m { padding: 0 .4em; }
  .bcj-d-f { min-width: 4.3em; padding: .2em .25em; gap: .3em; }
  .bcj-lc-dia { grid-column: 3 / 5; justify-self: start; padding: 0 0 0 .4em; }
  .bcj .bcj-d.bcj-e-hoy .bcj-d-f span { display: none; }
  .bcj-lc-lomo { display: none; }
  .bcj-as { position: relative; top: auto; grid-template-columns: minmax(0, 1fr) auto; row-gap: .35em; column-gap: .6em; padding: .45em .5em .55em .5em; align-items: start; }
  .bcj-as-sello { grid-column: 1 / -1; }
  .bcj-as-txt { grid-column: 1; grid-row: 2 / 4; }
  .bcj-as-mon { grid-column: 2; grid-row: 2; }
  .bcj-as-acc { grid-column: 2; grid-row: 3; }
  .bcj-c1 .bcj-as-txt { display: grid; }
  .bcj-c1 .bcj-as-meta, .bcj-c2 .bcj-as-meta { white-space: normal; }
  .bcj-mas { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bcj *, .bcj *::before, .bcj *::after { transition: none !important; animation: none !important; }
}

/* 28/09/2026: los meses marcados (en el calendario y en el libro), lo de antes del último
   arqueo al pie del libro, y el arqueo como acta */
.lienzo-panel:has(> .aviso-ok, > .aviso-error) .bcj { height: calc(100svh - 5.4rem); }
.bcj-cmes { padding: .35rem 0 .05rem calc(var(--bcj-kw) + 3px); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.bcj-cmes:first-child { padding-top: 0; }
.bcj-mes { grid-column: 1 / 5; display: flex; align-items: flex-end; justify-content: flex-end; padding: .7rem 1.4rem .15rem 0; border-bottom: 1px solid var(--linea-2); }
.bcj-mes span { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.bcj-antes { display: grid; gap: .1rem; margin: 0 .6rem .8rem; padding: .6rem .7rem; border-top: 1px solid var(--linea-2); }
.bcj-antes-f { display: grid; grid-template-columns: 8em minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .25rem 0; border-bottom: 1px dotted var(--linea); font-size: .8rem; color: var(--texto-2); }
.bcj-antes-f > b:last-child { color: var(--tinta); }
/* los ingresos y egresos con número, al pie del libro, con su hoja para firmar (30/09/2026) */
.bcj-mov-f { grid-template-columns: 8.2em 6.6em minmax(0, 1fr) auto 1.6em; }
.bcj-mov-f .bcj-mov-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcj-mov-f .bcj-mov-q b { color: var(--tinta); font-weight: 600; }
.bcj-mov-f > b.bcj-n { color: var(--tinta); }
.bcj-imp { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 6px; color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linea-2); }
.bcj-imp svg { width: 14px; height: 14px; }
.bcj-imp:hover { color: var(--marca-osc); box-shadow: inset 0 0 0 1px var(--marca); }
.bcj-dlg-sis { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: .5rem .7rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup-2); }
.bcj-dlg-sis dt { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.bcj-dlg-sis dd { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--texto-2); }
.bcj-dlg-acta { margin: 0; font-size: .74rem; color: var(--texto-2); }


/* ============================================================
   EL BUZÓN (28/09/2026) — de cinco propuestas el dueño eligió el
   «talonario por urgencia». Piezas: panel/buzon y panel/partes/buzon-js.
   ============================================================ */
/* EL BUZÓN, POR PRIORIDAD Y POR TIEMPO (bzn): cuatro horizontes —Hoy, Esta semana, Después, Hecho—
   y dentro de cada uno las tareas por prioridad, como tickets de talonario: el talón lleva a quien
   le toca (su color de rol), el cuerpo el sello del tipo y la tarea. Arriba, el equipo. */
.bzn {
  --bzn-num: "Archivo", "Manrope", system-ui, sans-serif;
  --bzn-mono: "IBM Plex Mono", ui-monospace, monospace;
  --bzn-ui: "Manrope", system-ui, sans-serif;
  --bzn-bandeja: color-mix(in srgb, var(--sup-3) 68%, var(--linea-2));
  --bzn-ocre: color-mix(in srgb, var(--ambar) 70%, var(--tinta));
  --bzn-borde: color-mix(in srgb, var(--linea-2) 70%, var(--linea));
  /* el naranja de la media luna (no es token del panel): entre el amarillo y el rojo */
  --bzn-naranja: color-mix(in srgb, var(--ambar-2) 45%, var(--rojo));
  --bzn-sombra-menu: 0 0 0 1px var(--linea-2), 0 22px 48px -18px color-mix(in srgb, var(--tinta) 42%, transparent);
  --bzn-diente-arriba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 4h8L4 0z'/%3E%3C/svg%3E");
  --bzn-diente-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z'/%3E%3C/svg%3E");
  --bzn-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  container: bzn / inline-size;
  display: flex; flex-direction: column; gap: 10px;
  height: calc(100vh - 1.55rem); min-height: 34rem;
  color: var(--tinta); font-family: var(--bzn-ui); font-size: 14px; line-height: 1.35;
}
.bzn *, .bzn *::before, .bzn *::after { box-sizing: border-box; }
.bzn :where(button) { font: inherit; color: inherit; cursor: pointer; }
.bzn [hidden] { display: none !important; }
.bzn :focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 4px; }
.bzn .bzn-n { font-family: var(--bzn-num); font-stretch: 88%; font-variant-numeric: tabular-nums; }
.bzn-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- los colores de cada rol: el talón (fondo) y el avatar (tinta) ---------- */
.bzn .bzn-t0 { --bzn-rf: var(--etq-0-fondo); --bzn-rt: var(--etq-0-tinta); }
.bzn .bzn-t1 { --bzn-rf: var(--etq-1-fondo); --bzn-rt: var(--etq-1-tinta); }
.bzn .bzn-t2 { --bzn-rf: var(--etq-2-fondo); --bzn-rt: var(--etq-2-tinta); }
.bzn .bzn-t3 { --bzn-rf: var(--etq-3-fondo); --bzn-rt: var(--etq-3-tinta); }
.bzn .bzn-t4 { --bzn-rf: var(--etq-4-fondo); --bzn-rt: var(--etq-4-tinta); }
.bzn .bzn-t5 { --bzn-rf: var(--etq-5-fondo); --bzn-rt: var(--etq-5-tinta); }
.bzn .bzn-t6 { --bzn-rf: var(--etq-6-fondo); --bzn-rt: var(--etq-6-tinta); }
.bzn .bzn-t7 { --bzn-rf: var(--etq-7-fondo); --bzn-rt: var(--etq-7-tinta); }

/* el avatar: iniciales blancas sobre la tinta de su rol (como el árbol de Equipo) */
.bzn .bzn-av {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--bzn-rt, var(--texto-2)); color: #FFFFFF; font: 800 12px/1 var(--bzn-ui); letter-spacing: .02em;
}
.bzn .bzn-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bzn .bzn-av.bzn-xs { width: 18px; height: 18px; font-size: 7.5px; letter-spacing: 0; }
.bzn .bzn-av.bzn-s { width: 24px; height: 24px; font-size: 9.5px; }
.bzn .bzn-av.bzn-l { width: 46px; height: 46px; font-size: 15px; box-shadow: 0 0 0 3px var(--sup-1); }
.bzn .bzn-av.bzn-vacio { background: var(--sup-1); box-shadow: none; outline: 1.5px dashed var(--gris); outline-offset: -1.5px; }
/* el sistema: cuadrado, sin rol, con su chip */
.bzn .bzn-sis {
  display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 4px;
  background: var(--tinta); color: #FFFFFF;
}
.bzn .bzn-sis svg { width: 13px; height: 13px; }
.bzn .bzn-sis.bzn-s { width: 24px; height: 24px; border-radius: 5px; }
.bzn .bzn-sis.bzn-s svg { width: 17px; height: 17px; }
/* la etiqueta del rol: la misma de Equipo */
.bzn .bzn-rolp {
  display: inline-block; max-width: 100%; padding: 1px 7px; border-radius: 999px; border: 0;
  background: var(--bzn-rf); color: var(--bzn-rt); font: 700 10.5px/1.45 var(--bzn-ui); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}

/* ---------- el sello de goma (el cuño de la Bóveda) ---------- */
.bzn .bzn-sello {
  display: inline-flex; align-items: baseline; gap: 4px; flex: none; padding: 1px 5px 1px 6px; border: 3px double currentColor; border-radius: 3px;
  font: 800 9.5px/1.3 var(--bzn-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-2.5deg); transform-origin: 0 50%; mix-blend-mode: multiply; opacity: .92;
}
.bzn .bzn-sello i { font: 600 9px/1 var(--bzn-mono); letter-spacing: .02em; font-style: normal; }
.bzn .bzn-f-dinero { color: var(--azul-texto); }
.bzn .bzn-f-caja { color: var(--bzn-ocre); }
.bzn .bzn-f-cliente { color: var(--marca-osc); }
.bzn .bzn-f-interna { color: var(--texto-2); }
.bzn .bzn-sello.bzn-s-vencida { color: var(--rojo); transform: rotate(-5deg); font-size: 10.5px; padding: 1px 6px 1px 7px; }
.bzn .bzn-sello.bzn-s-hecho { color: var(--verde-texto); transform: rotate(-4deg); }
.bzn .bzn-golpe { animation: bzn-golpe .2s ease-out both; }
@keyframes bzn-golpe { from { opacity: 0; transform: scale(1.4) rotate(0deg); } to { opacity: .92; } }

/* =========================================================== LA CABECERA */
.bzn-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.bzn-tit { margin: 0; font: 800 22px/1 var(--bzn-ui); letter-spacing: -.02em; }
.bzn-hoy { font: 500 12px/1 var(--bzn-mono); color: var(--gris); letter-spacing: .02em; }
.bzn-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 8px; background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2); }
.bzn-seg > button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  font-size: 12.5px; font-weight: 700; color: var(--texto-2); white-space: nowrap; transition: background .15s, color .15s;
}
.bzn-seg > button b { font: 700 11.5px/1 var(--bzn-num); font-stretch: 88%; font-variant-numeric: tabular-nums; color: var(--gris); }
.bzn-seg > button:hover { color: var(--tinta); background: var(--sup-2); }
.bzn-seg > button[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; }
.bzn-seg > button[aria-pressed="true"] b { color: color-mix(in srgb, var(--sup-1) 75%, transparent); }
.bzn-sedes { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.bzn-sedes > button {
  min-height: 26px; padding: 0 9px; border: 1px solid var(--linea-2); border-radius: 999px; background: transparent;
  font-size: 12px; font-weight: 600; color: var(--texto-2); white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.bzn-sedes > button:hover { background: var(--sup-1); color: var(--tinta); }
.bzn-sedes > button[aria-pressed="true"] { background: var(--sup-1); border-color: var(--tinta); color: var(--tinta); font-weight: 800; }
.bzn-esp { flex: 1 1 0; }
.bzn-filtro {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 4px 0 4px; border-radius: 999px;
  background: var(--sup-1); box-shadow: inset 0 0 0 1.5px var(--tinta); font-size: 12.5px; font-weight: 700;
}
.bzn-filtro > button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--sup-3); font-size: 15px; line-height: 1; }
.bzn-filtro > button:hover { background: var(--linea-2); }
.bzn-nueva {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 8px;
  background: var(--marca-osc); color: #FFFFFF; font-size: 13px; font-weight: 800; letter-spacing: .01em; white-space: nowrap;
  transition: background .15s, transform .15s;
}
.bzn-nueva:hover { background: color-mix(in srgb, var(--marca-osc) 85%, var(--tinta)); }
.bzn-nueva span { font-size: 17px; line-height: 1; margin-top: -1px; }

/* =========================================================== EL EQUIPO */
.bzn-equipo {
  display: flex; align-items: flex-start; gap: 6px 22px; flex-wrap: wrap; min-width: 0;
  padding: 8px 14px 6px; border-radius: 8px; background: var(--sup-1); border: 1px solid var(--linea);
}
.bzn-grupo { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.bzn-grupo > .bzn-rolp { font-size: 10px; padding: 0 7px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; }
.bzn-grupo > .bzn-rolp:hover { box-shadow: inset 0 0 0 1px var(--bzn-rt); }
.bzn-grupo > .bzn-rolp[aria-pressed="true"] { background: var(--bzn-rt); color: #FFFFFF; }
.bzn-gente { display: flex; gap: 2px; }
.bzn-per {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 56px; padding: 2px 0 3px; border: 0; border-radius: 8px;
  background: transparent; transition: background .15s, opacity .15s;
}
.bzn-per:hover { background: var(--sup-2); }
.bzn-per .bzn-av { width: 36px; height: 36px; font-size: 12.5px; transition: transform .15s, box-shadow .15s; }
.bzn-per-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--texto-2); }
.bzn-per.bzn-yo .bzn-per-n { color: var(--tinta); font-weight: 800; }
.bzn-per.bzn-yo .bzn-per-n { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bzn-per[aria-pressed="true"] .bzn-av { box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 4px var(--tinta); }
.bzn-per[aria-pressed="true"] .bzn-per-n { color: var(--tinta); font-weight: 800; }
.bzn-equipo.bzn-con-filtro .bzn-per:not([aria-pressed="true"]):not(.bzn-del-rol) { opacity: .45; }
.bzn-equipo.bzn-con-filtro .bzn-per:hover { opacity: 1; }
/* sin entrar hoy: el color baja; nunca entró: borde de espera */
.bzn-per.bzn-fuera .bzn-av { background: color-mix(in srgb, var(--bzn-rt) 45%, var(--sup-3)); }
.bzn-per.bzn-nunca .bzn-av { background: var(--sup-3); color: var(--gris); outline: 1.5px dashed var(--linea-2); outline-offset: 2px; }
/* conectado: el punto; ahora mismo, lleno */
.bzn .bzn-pres { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--sup-1); box-shadow: 0 0 0 2px var(--sup-1); }
.bzn .bzn-pres::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--verde); }
.bzn .bzn-pres.bzn-ahora::after { background: var(--verde); box-shadow: none; }
/* las urgentes: la cifra roja en la esquina */
.bzn .bzn-urg {
  position: absolute; top: -5px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--rojo); color: #FFFFFF; box-shadow: 0 0 0 2px var(--sup-1);
  font: 800 10.5px/18px var(--bzn-num); font-stretch: 88%; font-variant-numeric: tabular-nums; text-align: center;
}
/* soltar sobre una persona = dársela */
.bzn.bzn-arrastrando .bzn-per .bzn-av { box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 3.5px color-mix(in srgb, var(--bzn-rt) 35%, transparent); }
.bzn.bzn-arrastrando .bzn-per.bzn-sobre { background: var(--bzn-rf); }
.bzn.bzn-arrastrando .bzn-per.bzn-sobre .bzn-av { transform: scale(1.12); box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 4.5px var(--bzn-rt); }

/* =========================================================== EL TABLERO */
.bzn-tablero {
  flex: 1 1 0; min-height: 0; display: grid; gap: 10px;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr);
}
.bzn-col {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--bzn-bandeja); border: 1px solid var(--linea); border-radius: 8px; transition: box-shadow .15s, border-color .15s;
}
.bzn-col-cab {
  position: relative; display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 9px; min-width: 0;
  border-bottom: 1px solid var(--linea); background: var(--sup-1); border-radius: 7px 7px 0 0;
}
.bzn-col-t { margin: 0; font: 800 15px/1.1 var(--bzn-ui); letter-spacing: -.01em; white-space: nowrap; }
.bzn-col-t button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: default; }
.bzn-col-f { font: 500 11.5px/1 var(--bzn-mono); color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bzn-col-venc { flex: none; padding: 1px 6px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--rojo); color: var(--rojo); font: 800 10px/1.4 var(--bzn-ui); letter-spacing: .06em; text-transform: uppercase; }
.bzn-col-n { margin-left: auto; font: 700 18px/1 var(--bzn-num); font-stretch: 85%; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.bzn-col[data-bzn-col="hoy"] .bzn-col-cab { box-shadow: inset 0 3px 0 var(--tinta); }
.bzn-col[data-bzn-col="hecho"] { background: color-mix(in srgb, var(--verde-suave) 45%, var(--bzn-bandeja)); }
.bzn-col[data-bzn-col="hecho"] .bzn-col-t { color: var(--verde-texto); }
.bzn-lista {
  container: bznl / inline-size; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 10px 14px; scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent;
}
/* el destino, mientras se arrastra */
.bzn.bzn-arrastrando .bzn-col.bzn-sobre { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.bzn.bzn-arrastrando .bzn-col-cab.bzn-sobre { background: var(--tinta); color: #FFFFFF; }
.bzn.bzn-arrastrando .bzn-col-cab.bzn-sobre .bzn-col-f, .bzn.bzn-arrastrando .bzn-col-cab.bzn-sobre .bzn-col-n { color: color-mix(in srgb, var(--sup-1) 80%, transparent); }

/* ---------- las franjas de prioridad dentro de cada horizonte ---------- */
.bzn-banda + .bzn-banda { margin-top: 2px; }
.bzn-sep {
  display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 2px;
  font: 800 10.5px/1 var(--bzn-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2);
}
.bzn-sep i { flex: 1 1 auto; height: 0; border-top: 1px solid var(--bzn-borde); }
.bzn-sep .bzn-sep-n { font: 700 11px/1 var(--bzn-num); font-stretch: 88%; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--gris); }
.bzn-banda[data-bzn-prio="urgente"] .bzn-sep b { color: var(--rojo); }
.bzn-banda.bzn-vacia .bzn-sep { height: 20px; opacity: .5; }
.bzn-banda-lista { display: flex; flex-direction: column; gap: 12px; padding: 5px 0 6px; min-height: 0; }
.bzn-banda.bzn-vacia .bzn-banda-lista { padding: 0; }
.bzn.bzn-arrastrando .bzn-banda.bzn-sobre .bzn-sep { opacity: 1; color: var(--tinta); }
.bzn.bzn-arrastrando .bzn-banda.bzn-sobre .bzn-sep i { border-top: 2px solid var(--tinta); }
.bzn.bzn-arrastrando .bzn-banda.bzn-sobre .bzn-banda-lista { padding-top: 5px; padding-bottom: 6px; }
.bzn-nada { margin: 18px 4px; font-size: 12.5px; font-weight: 600; color: var(--gris); text-align: center; }

/* =========================================================== EL TICKET */
.bzn-tk {
  position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 84px;
  color: var(--tinta); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  filter: drop-shadow(0 0 .5px color-mix(in srgb, var(--tinta) 42%, transparent)) drop-shadow(0 1px 1px color-mix(in srgb, var(--tinta) 9%, transparent));
  transition: transform .15s ease;
}
.bzn-tk:hover { transform: translateY(-2px); }
.bzn .bzn-tk:focus-visible { outline: 2px solid var(--tinta); outline-offset: 7px; border-radius: 2px; }
/* el talón: a quién le toca, en el color de su rol */
.bzn-talon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0;
  padding: 8px 3px; background: var(--bzn-rf); border-right: 1.5px dashed color-mix(in srgb, var(--bzn-rt) 38%, transparent);
}
.bzn-talon b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 10.5px/1.1 var(--bzn-ui); color: var(--bzn-rt); }
.bzn-talon .bzn-av { width: 32px; height: 32px; font-size: 11.5px; }
.bzn-cuerpo {
  position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px 10px 8px 11px;
  background: var(--bzn-grano), var(--sup-1); background-size: 180px 180px, auto;
}
/* los dientes del papel, arriba y abajo (el talón con su color) */
.bzn-talon::before, .bzn-talon::after, .bzn-cuerpo::before, .bzn-cuerpo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 4px;
  -webkit-mask: var(--bzn-diente-arriba) 0 0 / 8px 4px round no-repeat; mask: var(--bzn-diente-arriba) 0 0 / 8px 4px round no-repeat;
}
.bzn-talon::before, .bzn-talon::after { background: var(--bzn-rf); right: -1.5px; }
.bzn-cuerpo::before, .bzn-cuerpo::after { background: var(--sup-1); }
.bzn-talon::before, .bzn-cuerpo::before { top: -4px; }
.bzn-talon::after, .bzn-cuerpo::after { bottom: -4px; -webkit-mask-image: var(--bzn-diente-abajo); mask-image: var(--bzn-diente-abajo); }

.bzn-tk-cab { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 20px; }
.bzn-est { font: 800 9.5px/1 var(--bzn-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); white-space: nowrap; }
.bzn-est.bzn-e-nuevo { color: var(--marca-osc); }
.bzn-est.bzn-e-nuevo::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--marca); vertical-align: 1px; }
.bzn-est.bzn-e-esperando { color: var(--bzn-ocre); }
.bzn-num { margin-left: auto; font: 500 10.5px/1 var(--bzn-mono); color: var(--gris); letter-spacing: .02em; white-space: nowrap; }
.bzn-num small { margin-right: 3px; font: 700 9.5px/1 var(--bzn-ui); letter-spacing: 0; }
.bzn-tk.bzn-hecho .bzn-mas { margin-left: auto; }
.bzn-mas {
  display: grid; place-items: center; flex: none; width: 24px; height: 22px; margin: -2px -5px -2px -2px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--gris); cursor: pointer;
}
.bzn-mas i { display: block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: -5px 0 0 currentColor, 5px 0 0 currentColor; }
.bzn-mas:hover, .bzn-mas[aria-expanded="true"] { background: var(--sup-3); color: var(--tinta); }
.bzn-tk-tit {
  margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 700 13.5px/1.3 var(--bzn-ui); letter-spacing: -.005em; overflow-wrap: anywhere;
}
.bzn-tk.bzn-p-urgente .bzn-tk-tit { font-weight: 800; }
.bzn-tk.bzn-p-normal .bzn-tk-tit { font-weight: 600; }
.bzn-tk.bzn-p-baja .bzn-tk-tit { font-weight: 600; color: var(--texto-2); }
.bzn-tk-pie {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; margin-top: auto; padding-top: 6px;
  border-top: 1px dotted color-mix(in srgb, var(--tinta) 28%, transparent);
}
.bzn-de { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-size: 11.5px; font-weight: 600; color: var(--texto-2); }
.bzn-de > small { font-size: 10px; font-weight: 700; color: var(--gris); letter-spacing: .02em; }
.bzn-de > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bzn-pie-der { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.bzn-monto { font: 600 12.5px/1 var(--bzn-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.bzn-vence { font: 500 11px/1 var(--bzn-mono); color: var(--texto-2); white-space: nowrap; }
.bzn-vence.bzn-vhoy { font-family: var(--bzn-ui); font-weight: 800; font-size: 11px; color: var(--bzn-ocre); letter-spacing: .02em; }
/* el globo de los comentarios, con su cola */
.bzn-glob {
  position: relative; display: inline-grid; place-items: center; min-width: 19px; height: 15px; padding: 0 4px; border-radius: 4px;
  box-shadow: inset 0 0 0 1.3px var(--texto-2); font: 700 10px/1 var(--bzn-num); color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.bzn-glob::after { content: ""; position: absolute; left: 4px; bottom: -4px; border: 4px solid transparent; border-top-color: var(--texto-2); border-bottom: 0; border-left-width: 0; }
.bzn-adj { font: 600 10.5px/1 var(--bzn-mono); color: var(--texto-2); }
/* hecho: el papel se apaga y lleva su sello verde */
.bzn-tk.bzn-hecho { min-height: 0; grid-template-columns: 40px minmax(0, 1fr); }
.bzn-tk.bzn-hecho .bzn-talon { padding: 6px 2px; }
.bzn-tk.bzn-hecho .bzn-talon b { display: none; }
.bzn-tk.bzn-hecho .bzn-talon .bzn-av { width: 24px; height: 24px; font-size: 9.5px; }
.bzn-tk.bzn-hecho .bzn-cuerpo { gap: 4px; padding-top: 6px; padding-bottom: 6px; }
.bzn-tk.bzn-hecho .bzn-tk-tit { -webkit-line-clamp: 1; font-weight: 600; font-size: 12.5px; color: var(--texto-2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tinta) 30%, transparent); }
.bzn-tk.bzn-hecho .bzn-tk-cab { min-height: 22px; }
/* recién movida o creada */
.bzn-tk.bzn-recien { animation: bzn-recien 1.1s ease-out 1; }
@keyframes bzn-recien { 0% { transform: translateY(-3px) scale(1.015); } 100% { transform: none; } }
.bzn-tk.bzn-recien .bzn-cuerpo { animation: bzn-luz 1.4s ease-out 1; }
@keyframes bzn-luz { 0% { box-shadow: inset 0 0 0 2px var(--tinta); } 100% { box-shadow: inset 0 0 0 2px transparent; } }

/* medidas del ticket según el ancho de su columna */
@container bznl (max-width: 330px) {
  .bzn-tk { grid-template-columns: 46px minmax(0, 1fr); }
  .bzn-talon .bzn-av { width: 28px; height: 28px; font-size: 10.5px; }
  .bzn-talon b { font-size: 9.5px; }
  .bzn-num { display: none; }
  .bzn-est { font-size: 9px; letter-spacing: .06em; }
  .bzn-tk-cab { gap: 6px; }
  .bzn-tk-cab .bzn-pi, .bzn-tk-cab .bzn-campana { margin-left: auto; }
  .bzn-tk-tit { font-size: 13px; }
  .bzn-de > small { display: none; }
}
@container bznl (max-width: 270px) {
  .bzn-est { display: none; }
  .bzn-tk-cab .bzn-sello:not(.bzn-s-hecho) { font-size: 8.5px; letter-spacing: .06em; }
  .bzn-tk-pie { gap: 4px 6px; }
  .bzn-de > span:last-child { max-width: 5.5em; }
}

/* ---------- el arrastre ---------- */
.bzn.bzn-arrastrando, .bzn.bzn-arrastrando * { cursor: grabbing !important; user-select: none; }
.bzn-tk.bzn-origen { display: none; }
.bzn-hueco {
  flex: none; border-radius: 4px; border: 1.5px dashed color-mix(in srgb, var(--tinta) 45%, transparent);
  background: color-mix(in srgb, var(--sup-1) 55%, transparent);
}
.bzn-fantasma { container: bznl / inline-size; position: fixed; left: 0; top: 0; z-index: 95; margin: 0; pointer-events: none; will-change: transform; }
.bzn-fantasma .bzn-tk {
  transform: rotate(-1.6deg) scale(1.02); transition: none;
  filter: drop-shadow(0 0 .5px color-mix(in srgb, var(--tinta) 50%, transparent)) drop-shadow(0 14px 18px color-mix(in srgb, var(--tinta) 24%, transparent));
}
.bzn-chip-dest {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); padding: 4px 9px; border-radius: 6px;
  background: var(--tinta); color: #FFFFFF; font: 800 11.5px/1.2 var(--bzn-ui); white-space: nowrap; letter-spacing: .01em;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--tinta) 25%, transparent);
}
.bzn-chip-dest:empty { display: none; }
.bzn-fantasma.bzn-compacto .bzn-tk { transform: rotate(-2deg) scale(.6); transform-origin: 0 0; }
.bzn-fantasma.bzn-compacto .bzn-chip-dest { left: 0; top: -4px; transform: translateY(-100%); }

/* =========================================================== EL MENÚ DE LA TARJETA */
.bzn-menu {
  position: fixed; z-index: 85; width: 21rem; padding: 8px; border-radius: 8px; background: var(--sup-1);
  box-shadow: 0 0 0 1px var(--linea-2), 0 18px 36px -12px color-mix(in srgb, var(--tinta) 30%, transparent);
  display: flex; flex-direction: column; gap: 4px;
}
.bzn-menu-t { padding: 4px 4px 0; font: 800 10px/1.2 var(--bzn-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.bzn-menu-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.bzn-menu-f.bzn-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bzn-menu button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 6px; border: 0; border-radius: 5px;
  background: var(--sup-2); font-size: 12px; font-weight: 700; color: var(--tinta); white-space: nowrap;
}
.bzn-menu button:hover { background: var(--sup-3); }
.bzn-menu button[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; }
.bzn-menu hr { width: 100%; margin: 3px 0; border: 0; border-top: 1px solid var(--linea); }
.bzn-menu .bzn-menu-l { justify-content: flex-start; padding: 0 8px; background: transparent; }
.bzn-menu .bzn-menu-l:hover { background: var(--sup-2); }

/* =========================================================== EL CAJÓN (el detalle de una tarea) */
.bzn-velo { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--tinta) 24%, transparent); opacity: 0; visibility: hidden; transition: opacity .18s, visibility 0s .18s; }
.bzn-velo.bzn-abierto { opacity: 1; visibility: visible; transition: opacity .18s; }
.bzn-cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 75; display: flex; flex-direction: column; width: min(30rem, 100vw);
  background: var(--sup-1); box-shadow: -20px 0 44px -20px color-mix(in srgb, var(--tinta) 40%, transparent);
  transform: translateX(104%); visibility: hidden; transition: transform .19s cubic-bezier(.2, .8, .3, 1), visibility 0s .19s;
}
.bzn-cajon.bzn-abierto { transform: none; visibility: visible; transition: transform .19s cubic-bezier(.2, .8, .3, 1); }
.bzn-cj-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.bzn-cj-talon {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 56px 16px 20px; background: var(--bzn-rf, var(--sup-3));
  border-bottom: 1.5px dashed color-mix(in srgb, var(--bzn-rt, var(--tinta)) 35%, transparent);
}
.bzn-cj-quien { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1 1 auto; }
.bzn-cj-quien small { font: 800 10px/1 var(--bzn-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--bzn-rt, var(--gris)); }
.bzn-cj-quien b { font: 800 17px/1.15 var(--bzn-ui); letter-spacing: -.01em; overflow-wrap: anywhere; }
.bzn-cj-quien > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.bzn-cj-quien .bzn-rolp { background: var(--sup-1); }
.bzn-x {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--sup-1) 70%, transparent); color: var(--tinta);
}
.bzn-x::before, .bzn-x::after { content: ""; position: absolute; left: 9px; right: 9px; top: 15px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.bzn-x::after { transform: rotate(-45deg); }
.bzn-x:hover { background: var(--sup-1); }
.bzn-bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--linea-2); border-radius: 7px;
  background: var(--sup-1); font-size: 12.5px; font-weight: 700; color: var(--tinta); white-space: nowrap; transition: background .15s, border-color .15s;
}
.bzn-bt:hover { border-color: var(--tinta); }
.bzn-bt[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.bzn-bt.bzn-pri { background: var(--marca-osc); border-color: var(--marca-osc); color: #FFFFFF; font-weight: 800; }
.bzn-bt.bzn-pri:hover { background: color-mix(in srgb, var(--marca-osc) 85%, var(--tinta)); }
.bzn-bt:disabled { opacity: .45; cursor: not-allowed; }
.bzn-cj-papel {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px;
  background: var(--bzn-grano), var(--sup-1); background-size: 180px 180px, auto; border-bottom: 1px solid var(--linea);
}
.bzn-cj-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.bzn-cj-cab .bzn-sello { font-size: 11px; }
.bzn-cj-cab .bzn-num-cj { margin-left: 0; }
.bzn-cj-papel h2 { margin: 2px 0 0; font: 800 19px/1.25 var(--bzn-ui); letter-spacing: -.015em; overflow-wrap: anywhere; }
.bzn-cj-papel p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--texto-2); }
.bzn-cj-monto { font: 700 24px/1.1 var(--bzn-num); font-stretch: 85%; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bzn-cj-de { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px dotted color-mix(in srgb, var(--tinta) 28%, transparent); font-size: 12.5px; color: var(--texto-2); }
.bzn-cj-de b { color: var(--tinta); }
.bzn-cj-de time { margin-left: auto; font: 500 11.5px/1 var(--bzn-mono); color: var(--gris); }
.bzn-cj-ctrl { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.bzn-fila { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; gap: 10px; }
.bzn-fila.bzn-col1 { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.bzn-rot { font: 800 10.5px/1.2 var(--bzn-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--gris); }
.bzn-cj-ctrl .bzn-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.bzn-cj-ctrl .bzn-seg > button { justify-content: center; padding: 0 6px; min-height: 32px; }
.bzn-campo {
  width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--linea-2); border-radius: 7px; background: var(--sup-1);
  font: 600 13.5px/1.35 var(--bzn-ui); color: var(--tinta);
}
.bzn-campo:focus { outline: 2px solid var(--tinta); outline-offset: -1px; border-color: transparent; }
.bzn textarea.bzn-campo { resize: vertical; min-height: 58px; }
/* el selector de personas (reasignar): el equipo por rol */
.bzn-pk { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 8px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea); }
.bzn-pk-g { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: start; gap: 8px; }
.bzn-pk-g > .bzn-rolp { justify-self: start; margin-top: 9px; }
.bzn-pk-gente { display: flex; flex-wrap: wrap; gap: 2px; }
.bzn-pk-p { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 52px; padding: 3px 0; border: 0; border-radius: 7px; background: transparent; }
.bzn-pk-p:hover { background: var(--sup-1); }
.bzn-pk-p span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--texto-2); }
.bzn-pk-p .bzn-av { width: 30px; height: 30px; font-size: 10.5px; }
.bzn-pk-p[aria-pressed="true"] { background: var(--sup-1); }
.bzn-pk-p[aria-pressed="true"] .bzn-av { box-shadow: 0 0 0 2px var(--sup-1), 0 0 0 4px var(--tinta); }
.bzn-pk-p[aria-pressed="true"] span:last-child { color: var(--tinta); }
.bzn-cj-reas { padding: 12px 20px 4px; }
/* los comentarios */
.bzn-cj-com { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 20px; }
.bzn-cj-com h3 { margin: 0; display: flex; align-items: baseline; gap: 8px; font: 800 10.5px/1.2 var(--bzn-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--gris); }
.bzn-cj-com ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bzn-cj-com li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; }
.bzn-cj-com li b { font-size: 12.5px; }
.bzn-cj-com li time { margin-left: 6px; font: 500 11px/1 var(--bzn-mono); color: var(--gris); }
.bzn-cj-com li p { margin: 3px 0 0; padding: 7px 10px; border-radius: 2px 8px 8px 8px; background: var(--sup-2); font-size: 13px; line-height: 1.4; }
.bzn-cj-escribir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bzn-cj-pie { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--linea); background: var(--sup-1); }
.bzn-cj-pie .bzn-bt { min-height: 38px; }
.bzn-cj-pie .bzn-pri { margin-left: auto; }

/* =========================================================== EL AVISO (con Deshacer) */
.bzn-aviso {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 90; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: min(36rem, calc(100vw - 24px)); padding: 9px 9px 9px 14px; border-radius: 9px;
  background: var(--tinta); color: #FFFFFF; font-size: 13px; font-weight: 600; box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--tinta) 45%, transparent);
}
.bzn-aviso > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bzn-aviso button { flex: none; min-height: 28px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--sup-1) 40%, transparent); border-radius: 6px; background: transparent; color: #FFFFFF; font-size: 12.5px; font-weight: 800; }
.bzn-aviso button:hover { background: color-mix(in srgb, var(--sup-1) 14%, transparent); }
.bzn-cajon.bzn-abierto ~ .bzn-aviso { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
/* con el desplegable de Vence abierto el aviso se esconde: no tapa horas ni días (vuelve al cerrarse) */
.bzn.bzn-con-pop > .bzn-aviso { visibility: hidden; }
@media (max-width: 520px) {
  .bzn-fila { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bzn-cj-talon { padding: 16px 52px 14px 16px; }
  .bzn-cj-papel, .bzn-cj-ctrl, .bzn-cj-com { padding-left: 16px; padding-right: 16px; }
  .bzn-cj-reas { padding: 12px 16px 4px; }
  .bzn-cj-pie { padding: 10px 16px; }
}

/* =========================================================== ANGOSTO: los horizontes pasan a pestañas */
@container bzn (max-width: 1180px) {
  .bzn-equipo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px 10px; padding: 7px 10px 5px; }
  .bzn-grupo { flex: none; }
  .bzn-per { width: 51px; }
  .bzn-per .bzn-av { width: 32px; height: 32px; font-size: 11.5px; }
  .bzn-per-n { font-size: 10px; letter-spacing: -.01em; }
  .bzn-tablero { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .74fr); }
  .bzn-col-cab { flex-wrap: wrap; row-gap: 4px; padding: 9px 10px 8px; }
  .bzn-col-f { order: 5; flex-basis: 100%; }
  .bzn-lista { padding: 6px 8px 12px; }
}
@container bzn (max-width: 760px) {
  .bzn-cab { gap: 8px 10px; }
  .bzn-tit { font-size: 20px; }
  .bzn-hoy { display: none; }
  .bzn-sedes { flex-wrap: nowrap; order: 9; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .bzn-esp { display: none; }
  .bzn-nueva { margin-left: auto; }
  .bzn-equipo { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 12px; padding: 7px 8px 5px; }
  .bzn-grupo { flex: none; }
  .bzn-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0; flex: none; }
  .bzn-col { display: contents; }
  .bzn-col-cab {
    grid-row: 1; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 7px; border: 1px solid var(--linea); border-bottom-color: var(--linea-2);
    border-radius: 8px 8px 0 0; background: var(--sup-2); box-shadow: none !important; margin-right: -1px;
  }
  .bzn-col-t { font-size: 13px; }
  .bzn-col-t button { cursor: pointer; }
  .bzn-col-t button::after { content: ""; position: absolute; inset: 0; }
  .bzn-col-f { display: none; }
  .bzn-col-venc { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 0 4px; background: var(--sup-1); font-size: 8.5px; white-space: nowrap; }
  .bzn-col-n { margin: 0; font-size: 15px; }
  .bzn-lista { grid-row: 2; grid-column: 1 / -1; display: none; overflow: visible; padding: 8px 8px 16px; background: var(--bzn-bandeja); border: 1px solid var(--linea); border-top: 0; border-radius: 0 0 8px 8px; }
  .bzn-col[data-bzn-col="hecho"] .bzn-lista { background: color-mix(in srgb, var(--verde-suave) 45%, var(--bzn-bandeja)); }
  .bzn-tablero[data-activa="hoy"] .bzn-col[data-bzn-col="hoy"] .bzn-lista,
  .bzn-tablero[data-activa="semana"] .bzn-col[data-bzn-col="semana"] .bzn-lista,
  .bzn-tablero[data-activa="despues"] .bzn-col[data-bzn-col="despues"] .bzn-lista,
  .bzn-tablero[data-activa="hecho"] .bzn-col[data-bzn-col="hecho"] .bzn-lista { display: block; }
  .bzn-tablero[data-activa="hoy"] .bzn-col[data-bzn-col="hoy"] .bzn-col-cab,
  .bzn-tablero[data-activa="semana"] .bzn-col[data-bzn-col="semana"] .bzn-col-cab,
  .bzn-tablero[data-activa="despues"] .bzn-col[data-bzn-col="despues"] .bzn-col-cab,
  .bzn-tablero[data-activa="hecho"] .bzn-col[data-bzn-col="hecho"] .bzn-col-cab { background: var(--bzn-bandeja); border-bottom-color: transparent; z-index: 1; }
  .bzn-tablero[data-activa="hecho"] .bzn-col[data-bzn-col="hecho"] .bzn-col-cab { background: color-mix(in srgb, var(--verde-suave) 45%, var(--bzn-bandeja)); }
  .bzn-tablero[data-activa] .bzn-col-cab::before { content: ""; position: absolute; left: 10px; right: 10px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: transparent; }
  .bzn-tablero[data-activa="hoy"] .bzn-col[data-bzn-col="hoy"] .bzn-col-cab::before,
  .bzn-tablero[data-activa="semana"] .bzn-col[data-bzn-col="semana"] .bzn-col-cab::before,
  .bzn-tablero[data-activa="despues"] .bzn-col[data-bzn-col="despues"] .bzn-col-cab::before,
  .bzn-tablero[data-activa="hecho"] .bzn-col[data-bzn-col="hecho"] .bzn-col-cab::before { background: var(--tinta); }
  .bzn.bzn-arrastrando .bzn-col-cab.bzn-sobre { background: var(--tinta); }
  .bzn-menu { width: min(21rem, calc(100vw - 16px)); }
  .bzn-pk-g { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bzn-pk-g > .bzn-rolp { margin-top: 0; }
}
@media (max-width: 900px) {
  .bzn { height: auto; min-height: 0; }
  .bzn-col-cab { position: sticky; top: 49px; }
}
@media (prefers-reduced-motion: reduce) {
  .bzn *, .bzn *::before, .bzn *::after { animation: none !important; transition: none !important; }
  .bzn-tk:hover { transform: none; }
}

/* 28/09/2026: lo que le pasó a la tarea, apagado */
.bzn-cj-com li.bzn-ev p { font-style: italic; color: var(--texto-2); }
.bzn-cj-com li.bzn-ev b { color: var(--texto-2); }

/* 28/09/2026: LO URGENTE ES UNA CAMPANITA ROJA QUE SE MUEVE (el dueño). Suena en la tarea
   y en su cajón; en la franja, el menú y los botones de prioridad se queda quieta. */
.bzn .bzn-campana { display: inline-grid; place-items: center; flex: none; width: 15px; height: 15px; color: var(--rojo); }
.bzn .bzn-campana svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 10%; }
.bzn .bzn-campana.bzn-suena svg { animation: bzn-campana 2.4s ease-in-out infinite; }
.bzn .bzn-campana.bzn-suena .bzn-badajo { animation: bzn-badajo 2.4s ease-in-out infinite; }
.bzn-tk-cab .bzn-campana { width: 16px; height: 16px; }
.bzn-cj-cab .bzn-campana { width: 19px; height: 19px; }
.bzn-seg > button[aria-pressed="true"] .bzn-campana, .bzn-menu button[aria-pressed="true"] .bzn-campana { color: #FFFFFF; }
@keyframes bzn-campana {
  0%, 50%, 100% { transform: rotate(0); }
  5% { transform: rotate(18deg); }
  12% { transform: rotate(-16deg); }
  19% { transform: rotate(12deg); }
  26% { transform: rotate(-9deg); }
  33% { transform: rotate(6deg); }
  40% { transform: rotate(-3deg); }
}
@keyframes bzn-badajo {
  0%, 50%, 100% { transform: translateX(0); }
  7% { transform: translateX(-1.6px); }
  14% { transform: translateX(1.6px); }
  21% { transform: translateX(-1.2px); }
  28% { transform: translateX(1px); }
  35% { transform: translateX(-.6px); }
}

/* 28/09/2026: LOS ADJUNTOS. En la tarea, el clip con cuántos; en el cajón, las fotos en
   miniatura (se abren en el visor) y los documentos como fichas; al escribir, lo que se va
   a mandar, con su × para quitarlo. */
.bzn-adj { display: inline-flex; align-items: center; gap: 2px; font: 700 10.5px/1 var(--bzn-num); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.bzn-adj svg { width: 13px; height: 13px; }
.bzn-adjs { display: flex; flex-direction: column; gap: 6px; }
.bzn-cj-com .bzn-adjs { margin-top: 6px; }
.bzn-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.bzn-foto { display: block; aspect-ratio: 1; max-width: 100%; border-radius: 6px; overflow: hidden; background: var(--sup-3); box-shadow: inset 0 0 0 1px var(--linea); }
.bzn-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.bzn-foto:hover img { transform: scale(1.04); }
.bzn-foto:focus-visible, .bzn-doc:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.bzn-doc { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--linea-2); border-radius: 8px; background: var(--sup-1); color: var(--tinta); text-decoration: none; }
.bzn-doc:hover { border-color: var(--tinta); }
.bzn-doc svg { flex: none; width: 24px; height: 24px; color: var(--texto-2); }
.bzn-doc span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bzn-doc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.bzn-doc small { font: 500 11px/1 var(--bzn-mono); color: var(--gris); }
.bzn-subir { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; width: 100%; }
.bzn-subir li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 28px; align-items: center; gap: 8px; padding: 4px 4px 4px 6px; border-radius: 7px; background: var(--sup-2); }
.bzn-subir img, .bzn-subir svg { display: block; width: 32px; height: 32px; border-radius: 5px; object-fit: cover; }
.bzn-subir svg { padding: 4px; color: var(--texto-2); }
.bzn-subir span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bzn-subir b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bzn-subir small { font: 500 10.5px/1 var(--bzn-mono); color: var(--gris); }
.bzn-quitar { position: relative; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--texto-2); cursor: pointer; }
.bzn-quitar:hover { background: var(--sup-3); color: var(--tinta); }
.bzn-quitar::before, .bzn-quitar::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.8px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.bzn-quitar::after { transform: rotate(-45deg); }
.bzn-escribir-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.bzn-clip svg { width: 16px; height: 16px; }
.bzn-cajon.bzn-soltando::after {
  content: ""; position: absolute; inset: 8px; z-index: 2; border: 2px dashed var(--tinta); border-radius: 10px;
  background: color-mix(in srgb, var(--sup-1) 55%, transparent); pointer-events: none;
}

/* el visor de una foto adjunta: encima de todo, con flechas si hay varias */
.bzn-visor { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 24px 68px; background: color-mix(in srgb, var(--tinta) 84%, transparent); }
.bzn-visor[hidden] { display: none; }
.bzn-visor figure { margin: 0; display: flex; flex-direction: column; gap: 10px; max-width: 100%; max-height: 100%; min-height: 0; }
.bzn-visor img {
  display: block; max-width: min(100%, 1400px); max-height: calc(100vh - 120px); margin: 0 auto; border-radius: 6px; object-fit: contain;
  background: var(--sup-1); box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--tinta) 80%, transparent);
}
.bzn-visor figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #FFFFFF; font-size: 12.5px; font-weight: 600; }
.bzn-visor figcaption span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bzn-visor figcaption .bzn-bt { text-decoration: none; }
.bzn-vis-flecha {
  position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--sup-1) 16%, transparent); color: #FFFFFF; cursor: pointer;
}
.bzn-vis-flecha:hover { background: color-mix(in srgb, var(--sup-1) 30%, transparent); }
.bzn-vis-flecha::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border: solid currentColor; border-width: 2px 2px 0 0; }
.bzn-vis-ant { left: 12px; }
.bzn-vis-ant::before { transform: translate(-35%, -50%) rotate(-135deg); }
.bzn-vis-sig { right: 12px; }
.bzn-vis-sig::before { transform: translate(-65%, -50%) rotate(45deg); }
@media (max-width: 600px) {
  .bzn-visor { padding: 16px 16px 76px; }
  .bzn-vis-flecha { top: auto; bottom: 16px; margin-top: 0; }
}

/* 28/09/2026: «EL TICKET EN VIVO». De cinco propuestas para «+ Tarea» el dueño eligió la hoja partida
   en dos: a la izquierda la columna del Buzón donde caerá la tarea, con el ticket que se arma mientras
   se escribe y salta de franja; a la derecha los mandos. Y pidió la prioridad como una media luna chica y
   minimalista, de cuatro áreas de color sólido —verde, amarillo, naranja, rojo— con la aguja que salta,
   imantada, al área más cercana. Las barritas salen de todo el Buzón. Pieza: panel/partes/buzon-js. */

/* ---------- la prioridad del ticket: la media luna en chico (el arco en su color hasta su tramo, y la aguja) ---------- */
.bzn .bzn-pi { display: block; flex: none; width: 18px; height: 11.9px; overflow: visible; }
.bzn .bzn-pi path { fill: none; }
.bzn .bzn-pi .bzn-pi-pista { stroke: color-mix(in srgb, var(--tinta) 15%, transparent); stroke-width: 2.3px; }
.bzn .bzn-pi .bzn-pi-lleno { stroke: currentColor; stroke-width: 2.3px; }
.bzn .bzn-pi .bzn-pi-aguja { stroke: var(--tinta); stroke-width: 1.5px; stroke-linecap: round; }
.bzn .bzn-pi .bzn-pi-eje { fill: var(--tinta); }
.bzn .bzn-pi-0 { color: var(--verde); }
.bzn .bzn-pi-1 { color: var(--ambar-2); }
.bzn .bzn-pi-2 { color: var(--bzn-naranja); }
.bzn .bzn-cj-cab .bzn-pi { width: 22px; height: 14.6px; }
.bzn-menu button[aria-pressed="true"] .bzn-pi .bzn-pi-pista { stroke: color-mix(in srgb, #FFFFFF 30%, transparent); }
.bzn-menu button[aria-pressed="true"] .bzn-pi .bzn-pi-aguja { stroke: #FFFFFF; }
.bzn-menu button[aria-pressed="true"] .bzn-pi .bzn-pi-eje { fill: #FFFFFF; }

/* ---------- LA MEDIA LUNA: cuatro áreas sólidas; la elegida plena, las otras apagadas; la aguja salta ---------- */
.bzn .bzn-luna {
  position: relative; flex: none; width: 118px; margin: 25px 78px 0 66px; border-radius: 8px; cursor: pointer; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
/* con el teclado, el anillo abraza el arco (no tapa los nombres) */
body.panel .bzn .bzn-luna:focus-visible { outline: none; }
body.panel .bzn .bzn-luna:focus-visible > svg { outline: 2px solid var(--tinta); outline-offset: 4px; border-radius: 64px 64px 8px 8px / 64px 64px 8px 8px; }
.bzn .bzn-luna > svg { display: block; width: 100%; height: auto; overflow: visible; }
.bzn .bzn-l-a { fill: none; stroke-width: 14px; }
/* apagadas, pero cada una reconocible: el naranja y el rojo no se confunden en reposo */
.bzn .bzn-l-0 { stroke: color-mix(in srgb, var(--verde) 46%, var(--sup-2)); }
.bzn .bzn-l-1 { stroke: color-mix(in srgb, var(--ambar-2) 58%, var(--sup-2)); }
.bzn .bzn-l-2 { stroke: color-mix(in srgb, var(--bzn-naranja) 54%, var(--sup-2)); }
.bzn .bzn-l-3 { stroke: color-mix(in srgb, var(--rojo) 50%, var(--sup-2)); }
.bzn .bzn-ln-0 .bzn-l-0 { stroke: var(--verde); }
.bzn .bzn-ln-1 .bzn-l-1 { stroke: var(--ambar-2); }
.bzn .bzn-ln-2 .bzn-l-2 { stroke: var(--bzn-naranja); }
.bzn .bzn-ln-3 .bzn-l-3 { stroke: var(--rojo); }
/* sin giro: la aguja va directo al centro del área */
.bzn .bzn-l-aguja { stroke: var(--tinta); stroke-width: 2.4px; stroke-linecap: round; transform-box: view-box; transform-origin: 60px 60px; transition: none; }
.bzn .bzn-ln-0 .bzn-l-aguja { transform: rotate(-67.5deg); }
.bzn .bzn-ln-1 .bzn-l-aguja { transform: rotate(-22.5deg); }
.bzn .bzn-ln-2 .bzn-l-aguja { transform: rotate(22.5deg); }
.bzn .bzn-ln-3 .bzn-l-aguja { transform: rotate(67.5deg); }
.bzn .bzn-l-eje { fill: var(--tinta); }
.bzn .bzn-l-nom {
  position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 2px 3px; border-radius: 4px;
  font: 700 11px/1.1 var(--bzn-ui); color: var(--gris); white-space: nowrap; cursor: pointer;
}
.bzn .bzn-l-nom:hover { color: var(--tinta); }
.bzn .bzn-l-n0 { right: calc(100% + 6px); top: 78%; transform: translateY(-50%); }
.bzn .bzn-l-n1 { right: 64%; bottom: calc(100% + 5px); }
.bzn .bzn-l-n2 { left: 64%; bottom: calc(100% + 5px); }
.bzn .bzn-l-n3 { left: calc(100% + 6px); top: 78%; transform: translateY(-50%); }
.bzn .bzn-l-nom .bzn-campana { width: 12px; height: 12px; color: color-mix(in srgb, var(--rojo) 50%, var(--gris)); }
.bzn .bzn-ln-0 .bzn-l-n0 { color: var(--verde-texto); font-weight: 800; }
.bzn .bzn-ln-1 .bzn-l-n1 { color: var(--bzn-ocre); font-weight: 800; }
.bzn .bzn-ln-2 .bzn-l-n2 { color: color-mix(in srgb, var(--bzn-naranja) 72%, var(--tinta)); font-weight: 800; }
.bzn .bzn-ln-3 .bzn-l-n3, .bzn .bzn-ln-3 .bzn-l-n3 .bzn-campana { color: var(--rojo); font-weight: 800; }
/* una tarea hecha: la prioridad se ve, apagada, y no se toca */
.bzn .bzn-luna-quieta { cursor: default; }
.bzn .bzn-luna-quieta .bzn-l-a { stroke: var(--sup-3); }
.bzn .bzn-luna-quieta .bzn-l-aguja { stroke: var(--gris); }
.bzn .bzn-luna-quieta .bzn-l-eje { fill: var(--gris); }
.bzn .bzn-luna-quieta .bzn-l-nom { cursor: default; color: var(--gris); font-weight: 700; }
.bzn .bzn-luna-quieta .bzn-l-nom .bzn-campana { color: var(--gris); }
.bzn .bzn-fila.bzn-fila-luna { padding: 2px 0 4px; }

/* ---------- VENCE: el campo y su desplegable de fecha y hora ---------- */
.bzn .bzn-vence-btn {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 42px; padding: 0 10px 0 12px; border: 0; border-radius: 9px;
  background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2); text-align: left; transition: box-shadow .16s;
}
.bzn .bzn-vence-btn:hover { box-shadow: inset 0 0 0 1px var(--texto-2); }
.bzn .bzn-vence-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--tinta), 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent); }
.bzn .bzn-vence-btn > svg { flex: none; width: 17px; height: 17px; color: var(--texto-2); }
.bzn .bzn-vence-btn .bzn-chev { width: 15px; height: 15px; margin-left: auto; color: var(--gris); transition: transform .16s; }
.bzn .bzn-vence-btn[aria-expanded="true"] .bzn-chev { transform: rotate(180deg); }
.bzn .bzn-cj-ctrl .bzn-vence-btn { height: 38px; }
.bzn .bzn-vc { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.bzn .bzn-vc-d { font: 700 14px/1 var(--bzn-ui); color: var(--tinta); }
.bzn .bzn-vc-d.bzn-vc-mono { font: 500 13px/1 var(--bzn-mono); }
.bzn .bzn-vc-d.bzn-vc-sin { color: var(--gris); font-weight: 600; }
.bzn .bzn-vc-d.bzn-vc-venc { color: var(--rojo); }
.bzn .bzn-vc-h { font: 500 13px/1 var(--bzn-mono); color: var(--texto-2); }
.bzn .bzn-pop {
  position: fixed; z-index: 86; width: 26rem; max-width: calc(100vw - 24px); padding: 12px;
  background: var(--sup-1); border-radius: 12px; box-shadow: var(--bzn-sombra-menu);
}
.bzn .bzn-pop.bzn-entra { animation: bzn-baja .14s ease-out; }
@keyframes bzn-baja { from { opacity: 0; transform: translateY(-4px); } }
.bzn .bzn-pp-atajos { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 11px; border-bottom: 1px solid var(--linea); }
.bzn .bzn-pp-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: var(--sup-2);
  box-shadow: inset 0 0 0 1px var(--linea); font: 700 12.5px/1 var(--bzn-ui); color: var(--texto-2); white-space: nowrap;
  transition: background .16s, color .16s;
}
.bzn .bzn-pp-chip .bzn-vc-mono { font: 500 12px/1 var(--bzn-mono); }
.bzn .bzn-pp-chip:hover:not([aria-pressed="true"]):not(:disabled) { background: var(--sup-3); color: var(--tinta); }
.bzn .bzn-pp-chip[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; box-shadow: none; }
.bzn .bzn-pp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 8.75rem; gap: 16px; padding-top: 10px; }
.bzn .bzn-pp-mes-cab { display: flex; align-items: center; justify-content: space-between; height: 30px; margin-bottom: 2px; }
.bzn .bzn-pp-mes-cab b { font: 800 13px/1 var(--bzn-ui); text-transform: capitalize; }
.bzn .bzn-pp-mes-cab b span { margin-left: 4px; font: 500 12px/1 var(--bzn-mono); color: var(--gris); text-transform: none; }
.bzn .bzn-pp-nav { display: flex; gap: 2px; }
.bzn .bzn-pp-nav button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--texto-2); }
.bzn .bzn-pp-nav button:hover:not(:disabled) { background: var(--sup-2); color: var(--tinta); }
.bzn .bzn-pp-nav button:disabled { opacity: .3; cursor: default; }
.bzn .bzn-pp-nav svg { width: 16px; height: 16px; }
.bzn .bzn-pp-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.bzn .bzn-pp-dsem { display: grid; place-items: center; height: 22px; font: 800 9.5px/1 var(--bzn-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.bzn .bzn-pp-dia {
  height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent;
  font: 600 12.5px/1 var(--bzn-num); font-stretch: 90%; font-variant-numeric: tabular-nums; color: var(--tinta);
}
.bzn .bzn-pp-dia:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--sup-2); }
.bzn .bzn-pp-dia.bzn-pp-uno { position: relative; }
.bzn .bzn-pp-dia.bzn-pp-uno small { position: absolute; left: 0; right: 0; top: 1px; font: 800 7.5px/1 var(--bzn-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.bzn .bzn-pp-dia.bzn-pp-uno[aria-pressed="true"] small { color: color-mix(in srgb, #FFFFFF 70%, transparent); }
.bzn .bzn-pp-dia.bzn-pp-finde { color: var(--texto-2); }
.bzn .bzn-pp-dia.bzn-pp-hoy { box-shadow: inset 0 0 0 1.5px var(--linea-2); font-weight: 800; }
.bzn .bzn-pp-dia[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; box-shadow: none; }
.bzn .bzn-pp-dia:disabled { color: color-mix(in srgb, var(--tinta) 24%, transparent); cursor: default; }
.bzn .bzn-pp-horas-col { display: flex; flex-direction: column; min-width: 0; padding-left: 16px; border-left: 1px solid var(--linea); }
.bzn .bzn-pop .bzn-pp-horas-col .bzn-rot { display: flex; align-items: center; height: 30px; margin: 0 0 2px; }
.bzn .bzn-pp-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.bzn .bzn-pp-hora {
  height: 30px; padding: 0; border: 0; border-radius: 7px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea);
  font: 500 12.5px/1 var(--bzn-mono); color: var(--tinta); transition: background .16s;
}
.bzn .bzn-pp-hora:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--sup-3); }
.bzn .bzn-pp-hora[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; box-shadow: none; }
.bzn .bzn-pp-hora:disabled { background: transparent; color: color-mix(in srgb, var(--tinta) 26%, transparent); text-decoration: line-through; cursor: default; }
.bzn .bzn-pp-exacta { display: flex; align-items: center; gap: 7px; height: 32px; margin-top: 6px; padding: 0 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--linea-2); }
.bzn .bzn-pp-exacta:focus-within { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.bzn .bzn-pp-exacta.bzn-pp-marcada { background: var(--tinta); box-shadow: none; }
.bzn .bzn-pp-exacta.bzn-pp-marcada input, .bzn .bzn-pp-exacta.bzn-pp-marcada svg { color: #FFFFFF; }
.bzn .bzn-pp-exacta.bzn-pp-mal { box-shadow: inset 0 0 0 1.5px var(--rojo); }
.bzn .bzn-pp-exacta svg { flex: none; width: 15px; height: 15px; color: var(--gris); }
.bzn .bzn-pp-exacta input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: 500 12.5px/1 var(--bzn-mono); color: var(--tinta); }
.bzn .bzn-pp-exacta input::placeholder { color: color-mix(in srgb, var(--tinta) 32%, transparent); }
.bzn .bzn-pp-sinhora { justify-content: center; width: 100%; margin-top: 6px; }
.bzn .bzn-pp-horas-col.bzn-pp-apagada .bzn-pp-horas, .bzn .bzn-pp-horas-col.bzn-pp-apagada .bzn-pp-exacta, .bzn .bzn-pp-horas-col.bzn-pp-apagada .bzn-pp-sinhora { opacity: .35; }

/* ---------- LA HOJA «+ Tarea»: centrada, con su velo ---------- */
.bzn .bzn-nt { position: fixed; inset: 0; z-index: 80; display: grid; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.bzn .bzn-nt-velo { position: fixed; inset: 0; background: color-mix(in srgb, var(--tinta) 44%, transparent); }
.bzn .bzn-nt-velo.bzn-entra { animation: bzn-aparece .18s ease-out; }
@keyframes bzn-aparece { from { opacity: 0; } }
.bzn .bzn-nt-hoja {
  position: relative; z-index: 1; margin: auto; width: min(60rem, 100%);
  display: grid; grid-template-columns: 23.5rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "escena cab" "escena cuerpo" "escena pie";
  background: var(--sup-1); border-radius: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 9%, transparent), 0 44px 90px -36px color-mix(in srgb, var(--tinta) 60%, transparent), 0 10px 28px -14px color-mix(in srgb, var(--tinta) 32%, transparent);
}
.bzn .bzn-nt-hoja.bzn-entra { animation: bzn-nt-entra .2s ease-out; }
@keyframes bzn-nt-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.bzn .bzn-nt-hoja.bzn-nt-soltando::after {
  content: ""; position: absolute; inset: 6px; z-index: 30; border-radius: 11px; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--tinta); background: color-mix(in srgb, var(--marca) 6%, transparent);
}
/* la escena: la columna donde cae la tarea */
.bzn .bzn-nt-escena {
  grid-area: escena; position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--bzn-bandeja); border-right: 1px solid var(--linea); border-radius: 14px 0 0 14px;
}
.bzn .bzn-nt-col-cab {
  display: flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 54px; padding: 19px 16px 0;
  background: var(--sup-1); border-bottom: 1px solid var(--linea); border-radius: 14px 0 0 0; transition: box-shadow .16s;
}
.bzn .bzn-nt-col-cab.bzn-nt-es-hoy { box-shadow: inset 0 3px 0 var(--tinta); }
.bzn .bzn-nt-col-t { font: 800 15px/1.1 var(--bzn-ui); letter-spacing: -.01em; white-space: nowrap; }
.bzn .bzn-nt-col-f { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1 var(--bzn-mono); color: var(--gris); }
.bzn .bzn-nt-col-t.bzn-nt-cambia, .bzn .bzn-nt-col-f.bzn-nt-cambia { animation: bzn-nt-cambia .2s ease-out; }
@keyframes bzn-nt-cambia { from { opacity: 0; transform: translateY(-4px); } }
.bzn .bzn-nt-col-prio { display: none; }
.bzn .bzn-nt-bandas { padding: 8px 14px 18px; }
.bzn .bzn-nt-banda + .bzn-nt-banda { margin-top: 2px; }
.bzn .bzn-nt-banda .bzn-sep { opacity: .45; transition: opacity .16s; }
.bzn .bzn-nt-banda[data-prio="urgente"] .bzn-sep b { color: var(--rojo); }
.bzn .bzn-nt-banda.bzn-nt-activa .bzn-sep { opacity: 1; color: var(--tinta); }
.bzn .bzn-nt-banda.bzn-nt-activa .bzn-nt-banda-lista { padding: 7px 0 12px; }
/* el ticket vivo: el mismo papel del tablero, quieto */
.bzn .bzn-nt-tk { zoom: 1.06; cursor: default; }
.bzn .bzn-nt-tk:hover { transform: none; }
.bzn .bzn-nt-tk [data-accion] { cursor: pointer; }
.bzn .bzn-nt-tk.bzn-nt-sin { --bzn-rf: var(--sup-2); --bzn-rt: var(--gris); }
.bzn .bzn-nt-tk .bzn-talon[data-accion]:hover { background: color-mix(in srgb, var(--tinta) 5%, var(--bzn-rf)); }
.bzn .bzn-nt-tprio { display: inline-flex; align-items: center; margin: -3px -3px -3px auto; padding: 3px; border-radius: 4px; }
.bzn .bzn-nt-tprio:hover { background: var(--sup-2); }
.bzn .bzn-nt-sello { display: inline-flex; }
.bzn .bzn-tk-tit.bzn-en-blanco { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 17.5px; }
.bzn .bzn-tk-tit.bzn-en-blanco::before, .bzn .bzn-tk-tit.bzn-en-blanco::after { content: ""; display: block; height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.bzn .bzn-tk-tit.bzn-en-blanco::before { width: 78%; }
.bzn .bzn-tk-tit.bzn-en-blanco::after { width: 46%; }
.bzn .bzn-vence.bzn-vhoy i { font: 500 11px/1 var(--bzn-mono); font-style: normal; letter-spacing: 0; }
/* la hora del vence: «· 18:00» con el punto medio angosto */
.bzn .bzn-vence .bzn-vh { font-style: normal; }
.bzn .bzn-vence .bzn-vh::before { content: "·"; margin: 0 .2em 0 .24em; }
/* el pie del ticket vivo en una sola línea: si falta un poco, se acorta el nombre de «De»; si no cabe ni
   el comienzo del nombre (la escena angosta de una tableta), el vence baja a su línea como en el tablero */
.bzn .bzn-nt-tk .bzn-tk-pie { gap: 4px 6px; }
.bzn .bzn-nt-tk .bzn-de { flex: 1 1 0; min-width: 6em; }
.bzn .bzn-nt-tk .bzn-pie-der { flex: none; gap: 6px; }
.bzn .bzn-nt-tk.bzn-nt-sacude { animation: bzn-nt-sacude .24s ease-out; }
@keyframes bzn-nt-sacude { 55% { transform: translateY(1.5px); } }
/* creada: el cuño verde encima, un momento */
.bzn .bzn-nt-cuno {
  position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 11px 4px 12px;
  border: 4px double currentColor; border-radius: 4px; color: var(--verde-texto); background: color-mix(in srgb, var(--sup-1) 72%, transparent);
  font: 800 15px/1.2 var(--bzn-ui); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-7deg);
}
.bzn .bzn-nt-cuno i { font: 600 11px/1 var(--bzn-mono); font-style: normal; letter-spacing: 0; }
.bzn .bzn-nt-cuno.bzn-nt-golpe { animation: bzn-nt-cuno .26s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes bzn-nt-cuno {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9) rotate(-16deg); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(-6deg); }
  100% { transform: translate(-50%, -50%) rotate(-7deg); }
}
.bzn .bzn-nt-hoja.bzn-nt-creada .bzn-nt-cuerpo, .bzn .bzn-nt-hoja.bzn-nt-creada .bzn-nt-pie { opacity: .38; pointer-events: none; transition: opacity .2s; }

/* la cabecera y el pie */
.bzn .bzn-nt-cab { grid-area: cab; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 12px 0 24px; border-bottom: 1px solid var(--linea); }
.bzn .bzn-nt-cab h2 { margin: 0; font: 800 17px/1 var(--bzn-ui); letter-spacing: -.015em; }
.bzn .bzn-nt-x { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); }
.bzn .bzn-nt-x:hover { background: var(--sup-2); color: var(--tinta); }
.bzn .bzn-nt-x svg { width: 19px; height: 19px; }
.bzn .bzn-nt-pie { grid-area: pie; display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px 24px; border-top: 1px solid var(--linea); }
.bzn .bzn-nt-sec { height: 40px; margin-left: -14px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; font: 700 13.5px/1 var(--bzn-ui); color: var(--texto-2); }
.bzn .bzn-nt-sec:hover { background: var(--sup-2); color: var(--tinta); }
.bzn .bzn-nt-crear {
  display: inline-flex; align-items: center; gap: 12px; height: 42px; margin-left: auto; padding: 0 7px 0 18px; border: 0; border-radius: 9px;
  background: var(--marca-osc); color: #FFFFFF; font: 800 14px/1 var(--bzn-ui); letter-spacing: .01em; white-space: nowrap;
  transition: background .16s, color .16s;
}
.bzn .bzn-nt-crear:hover:not(:disabled) { background: color-mix(in srgb, var(--marca-osc) 85%, var(--tinta)); }
.bzn .bzn-nt-crear kbd { padding: 5px 6px; border-radius: 5px; background: color-mix(in srgb, #FFFFFF 15%, transparent); font: 500 10.5px/1 var(--bzn-mono); color: color-mix(in srgb, #FFFFFF 82%, transparent); }
.bzn .bzn-nt-crear:disabled { background: var(--sup-3); color: var(--gris); cursor: not-allowed; }
.bzn .bzn-nt-crear:disabled kbd { background: color-mix(in srgb, var(--tinta) 6%, transparent); color: var(--gris); }

/* los mandos */
.bzn .bzn-nt-cuerpo { grid-area: cuerpo; display: flex; flex-direction: column; gap: 15px; min-width: 0; padding: 16px 24px 18px; transition: opacity .2s; }
.bzn .bzn-nt .bzn-rot { display: block; margin: 0 0 6px 1px; }
.bzn .bzn-nt-campo {
  display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; border-radius: 9px; background: var(--sup-1);
  box-shadow: inset 0 0 0 1px var(--linea-2); transition: box-shadow .16s;
}
.bzn .bzn-nt-campo:focus-within, .bzn .bzn-nt-papel:focus-within { box-shadow: inset 0 0 0 1.5px var(--tinta), 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent); }
.bzn .bzn-nt-campo > svg { flex: none; width: 17px; height: 17px; color: var(--gris); }
.bzn .bzn-nt-campo input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: 600 14px/1 var(--bzn-ui); color: var(--tinta); }
.bzn .bzn-nt-papel ::placeholder { color: color-mix(in srgb, var(--tinta) 38%, transparent); font-weight: 500; }
/* para quién */
.bzn .bzn-nt-para { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.bzn .bzn-nt-para > .bzn-nt-campo { flex: 1 1 auto; min-width: 0; }
.bzn .bzn-nt-frecs { display: flex; flex: none; gap: 6px; }
.bzn .bzn-nt-frec {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 13px 0 5px; border: 0; border-radius: 999px;
  background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2); font: 700 13px/1 var(--bzn-ui); color: var(--texto-2); white-space: nowrap;
  transition: background .16s, box-shadow .16s, color .16s;
}
.bzn .bzn-nt-frec .bzn-av, .bzn .bzn-nt-elegido .bzn-av, .bzn .bzn-nt-op .bzn-av { width: 32px; height: 32px; font-size: 11.5px; }
.bzn .bzn-nt-frec .bzn-pres, .bzn .bzn-nt-elegido .bzn-pres, .bzn .bzn-nt-op .bzn-pres { width: 10px; height: 10px; }
.bzn .bzn-nt-frec:hover { background: var(--bzn-rf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bzn-rt) 35%, transparent); color: var(--tinta); }
.bzn .bzn-nt-elegido { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 5px; border-radius: 999px; background: var(--bzn-rf); }
.bzn .bzn-nt-elegido.bzn-entra { animation: bzn-nt-elige .18s ease-out; }
@keyframes bzn-nt-elige { from { opacity: .3; transform: scale(.98); } }
.bzn .bzn-nt-elegido-n { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.bzn .bzn-nt-elegido-n b { overflow: hidden; text-overflow: ellipsis; font: 800 14px/1.2 var(--bzn-ui); color: var(--tinta); }
.bzn .bzn-nt-elegido-n small { overflow: hidden; text-overflow: ellipsis; font: 700 11.5px/1.2 var(--bzn-ui); color: var(--bzn-rt); }
.bzn .bzn-nt-elegido-n small span { font-weight: 600; opacity: .8; }
.bzn .bzn-nt-quitar {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--bzn-rt) 10%, transparent); color: var(--bzn-rt);
}
.bzn .bzn-nt-quitar:hover { background: color-mix(in srgb, var(--bzn-rt) 20%, transparent); }
.bzn .bzn-nt-quitar svg { width: 16px; height: 16px; }
/* las listas que se abren bajo la lupa */
.bzn .bzn-nt-lista {
  position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; width: min(100%, 23rem); max-height: 19rem; margin: 0; padding: 5px;
  overflow-y: auto; overscroll-behavior: contain; list-style: none; background: var(--sup-1); border-radius: 11px; box-shadow: var(--bzn-sombra-menu);
  scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent;
}
.bzn .bzn-nt-lista.bzn-entra { animation: bzn-baja .14s ease-out; }
.bzn .bzn-nt-op { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 9px; border-radius: 8px; cursor: pointer; }
.bzn .bzn-nt-op:hover { background: var(--sup-2); }
.bzn .bzn-nt-op[aria-selected="true"] { background: var(--sup-2); box-shadow: inset 2.5px 0 0 var(--tinta); }
.bzn .bzn-nt-op-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bzn .bzn-nt-op-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px/1.2 var(--bzn-ui); }
.bzn .bzn-nt-op-n small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px/1.2 var(--bzn-ui); color: var(--gris); }
.bzn .bzn-nt-op-n small .bzn-rolp { margin-right: 3px; padding: 0 6px; font-size: 10px; }
.bzn .bzn-nt-op-grupo { padding: 9px 9px 3px; }
.bzn .bzn-nt-op-grupo:first-child { padding-top: 4px; }
.bzn .bzn-nt-op-grupo .bzn-rolp { padding: 0 7px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
.bzn .bzn-nt-op-nada { padding: 10px 12px; font: 600 12.5px/1.2 var(--bzn-ui); color: var(--gris); }
.bzn .bzn-nt-op-etq { justify-content: space-between; min-height: 38px; }
.bzn .bzn-nt-op-etq .bzn-sello { font-size: 10.5px; }
.bzn .bzn-nt-op-etq small { font: 700 10.5px/1 var(--bzn-ui); letter-spacing: .04em; color: var(--gris); }
.bzn .bzn-nt-op-etq mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
/* qué y detalle: un solo papel */
.bzn .bzn-nt-papel { border-radius: 10px; background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2); transition: box-shadow .16s; }
.bzn .bzn-nt-que {
  display: block; width: 100%; height: 46px; padding: 0 14px; border: 0; outline: 0; background: transparent;
  border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 26%, transparent);
  font: 700 15.5px/1 var(--bzn-ui); letter-spacing: -.005em; color: var(--tinta);
}
.bzn .bzn-nt-det {
  display: block; width: 100%; height: 60px; min-height: 60px; max-height: 128px; padding: 9px 14px 10px; border: 0; outline: 0; resize: none; background: transparent;
  font: 500 13.5px/1.45 var(--bzn-ui); color: var(--texto-2);
}
/* la etiqueta: la lupa y los sellos a mano */
.bzn .bzn-nt-etq { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.bzn .bzn-nt-etq > .bzn-nt-campo { flex: 1 1 9rem; min-width: 9rem; }
.bzn .bzn-nt-etq > .bzn-nt-lista { width: min(100%, 17rem); max-height: 15.5rem; }
.bzn .bzn-nt-usadas { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.bzn .bzn-nt-usada { display: inline-flex; padding: 6px 5px; border: 0; border-radius: 6px; background: transparent; }
.bzn .bzn-nt-usada .bzn-sello { padding: 1px 6px 1px 7px; font-size: 10.5px; opacity: .42; transition: opacity .16s, background .16s; }
.bzn .bzn-nt-usada:hover .bzn-sello { opacity: .8; }
.bzn .bzn-nt-usada[aria-pressed="true"] .bzn-sello { opacity: .95; background: color-mix(in srgb, currentColor 9%, transparent); }
/* prioridad (la media luna) y, al lado, vence y adjuntos */
.bzn .bzn-nt-doble { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.bzn .bzn-nt-prio { min-width: 0; }
.bzn .bzn-nt-prio .bzn-luna { margin-top: 27px; }
.bzn .bzn-nt-lado { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
/* adjuntos: fichas */
.bzn .bzn-nt-adjs { display: flex; flex-wrap: wrap; gap: 8px; }
.bzn .bzn-nt-adj-mas {
  display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 1.5px dashed var(--linea-2); border-radius: 10px;
  background: transparent; color: var(--texto-2); transition: background .16s, border-color .16s, color .16s;
}
.bzn .bzn-nt-adj-mas:hover, .bzn .bzn-nt-hoja.bzn-nt-soltando .bzn-nt-adj-mas { border-color: var(--tinta); color: var(--tinta); background: var(--sup-2); }
.bzn .bzn-nt-adj-mas svg { width: 21px; height: 21px; }
.bzn .bzn-nt-ficha { position: relative; width: 60px; }
.bzn .bzn-nt-ficha.bzn-nt-entra { animation: bzn-nt-elige .18s ease-out; }
.bzn .bzn-nt-ficha-img {
  display: grid; place-items: center; width: 60px; height: 60px; overflow: hidden; border-radius: 10px;
  background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea); color: var(--texto-2);
}
.bzn .bzn-nt-ficha-img img { width: 100%; height: 100%; object-fit: cover; }
.bzn .bzn-nt-ficha-doc { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bzn .bzn-nt-ficha-doc svg { width: 22px; height: 22px; }
.bzn .bzn-nt-ficha-doc b { font: 600 9px/1 var(--bzn-mono); letter-spacing: .04em; color: var(--texto-2); }
.bzn .bzn-nt-ficha-doc.bzn-nt-pdf { color: var(--rojo); }
.bzn .bzn-nt-ficha-n { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10px/1.2 var(--bzn-ui); color: var(--texto-2); }
.bzn .bzn-nt-ficha-x {
  position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 21px; height: 21px; padding: 0;
  border: 2px solid var(--sup-1); border-radius: 50%; background: var(--tinta); color: #FFFFFF;
}
.bzn .bzn-nt-ficha-x svg { width: 11px; height: 11px; }
.bzn .bzn-nt-ficha-x:hover { background: var(--rojo); }

/* el anillo de foco de la casa (body.panel) sin deformar las piezas: los campos ya se enmarcan solos */
body.panel .bzn .bzn-nt input:focus-visible, body.panel .bzn .bzn-nt textarea:focus-visible, body.panel .bzn .bzn-pop input:focus-visible { outline: none; }
body.panel .bzn .bzn-nt-frec:focus-visible, body.panel .bzn .bzn-pp-chip:focus-visible, body.panel .bzn .bzn-nt-quitar:focus-visible, body.panel .bzn .bzn-nt-ficha-x:focus-visible { border-radius: 999px; }
body.panel .bzn .bzn-nt-crear:focus-visible, body.panel .bzn .bzn-nt-sec:focus-visible, body.panel .bzn .bzn-nt-x:focus-visible, body.panel .bzn .bzn-vence-btn:focus-visible { border-radius: 9px; }
body.panel .bzn .bzn-nt-adj-mas:focus-visible { border-radius: 10px; }
body.panel .bzn .bzn-pp-dia:focus-visible, body.panel .bzn .bzn-pp-hora:focus-visible, body.panel .bzn .bzn-pp-nav button:focus-visible { border-radius: 7px; }

/* ---------- el teléfono: la hoja a pantalla completa; arriba, solo la franja donde cae ---------- */
@media (max-width: 600px) {
  .bzn .bzn-nt { padding: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .bzn .bzn-nt-hoja {
    width: 100%; height: 100%; margin: 0; border-radius: 0;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "cab" "escena" "cuerpo" "pie";
  }
  .bzn .bzn-nt-hoja.bzn-entra { animation-name: bzn-nt-sube; }
  .bzn .bzn-pop.bzn-entra { animation-name: bzn-nt-sube; }
  @keyframes bzn-nt-sube { from { transform: translateY(24px); opacity: 0; } }
  .bzn .bzn-nt-cab { min-height: 50px; padding: 0 8px 0 16px; }
  .bzn .bzn-nt-cab h2 { font-size: 16px; }
  .bzn .bzn-nt-escena { padding: 0 12px 12px; border-right: 0; border-bottom: 1px solid var(--linea); border-radius: 0; }
  .bzn .bzn-nt-col-cab { align-items: center; min-height: 0; margin: 0 -12px; padding: 9px 14px 3px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .bzn .bzn-nt-col-cab.bzn-nt-es-hoy { box-shadow: none; }
  .bzn .bzn-nt-col-prio { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 800 10px/1 var(--bzn-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); }
  .bzn .bzn-nt-col-prio.bzn-nt-urg { color: var(--rojo); }
  .bzn .bzn-nt-col-prio .bzn-campana { width: 13px; height: 13px; }
  .bzn .bzn-nt-bandas { padding: 0; }
  .bzn .bzn-nt-banda:not(.bzn-nt-activa), .bzn .bzn-nt-banda .bzn-sep { display: none; }
  .bzn .bzn-nt-banda.bzn-nt-activa .bzn-nt-banda-lista { padding: 5px 0 0; }
  .bzn .bzn-nt-tk { zoom: 1; }
  .bzn .bzn-nt-cuerpo { overflow-y: auto; overscroll-behavior: contain; gap: 16px; padding: 14px 16px 22px; }
  .bzn .bzn-nt-frec { padding: 0 5px; }
  .bzn .bzn-nt-frec span:not(.bzn-av) { display: none; }
  .bzn .bzn-nt-elegido-n { flex-direction: column; gap: 1px; }
  .bzn .bzn-nt-etq > .bzn-nt-campo { flex: 1 1 100%; }
  .bzn .bzn-nt-doble { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bzn .bzn-nt-prio .bzn-luna { margin: 27px auto 0; }
  .bzn .bzn-nt-pie { padding: 10px 16px 12px; }
  .bzn .bzn-nt-sec { margin-left: -8px; }
  .bzn .bzn-nt-crear { flex: 1 1 auto; justify-content: center; height: 46px; }
  .bzn .bzn-nt-crear kbd { display: none; }
  .bzn .bzn-pop {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; max-height: 88vh; overflow-y: auto;
    padding: 14px 16px 18px; border-radius: 16px 16px 0 0;
    box-shadow: 0 -1px 0 var(--linea-2), 0 -30px 60px -20px color-mix(in srgb, var(--tinta) 45%, transparent);
  }
  .bzn .bzn-pp-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bzn .bzn-pp-dia { height: 38px; font-size: 14px; }
  .bzn .bzn-pp-horas-col { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--linea); }
  .bzn .bzn-pop .bzn-pp-horas-col .bzn-rot { height: auto; margin-bottom: 8px; }
  .bzn .bzn-pp-horas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bzn .bzn-pp-hora { height: 36px; }
}
/* ---------- a media anchura (tabletas): la escena más angosta; hasta 880 px, la luna sobre Vence y los
   frecuentes solo con su cara (como en el teléfono) ---------- */
@media (min-width: 601px) and (max-width: 960px) {
  .bzn .bzn-nt-hoja { grid-template-columns: 18rem minmax(0, 1fr); }
  .bzn .bzn-nt-tk { zoom: 1; }
  .bzn .bzn-nt-cab { padding-left: 20px; }
  .bzn .bzn-nt-cuerpo { padding-left: 20px; padding-right: 20px; }
  .bzn .bzn-nt-pie { padding-left: 20px; }
}
@media (min-width: 601px) and (max-width: 880px) {
  .bzn .bzn-nt-frec { padding: 0 5px; }
  .bzn .bzn-nt-frec span:not(.bzn-av) { display: none; }
  .bzn .bzn-nt-doble { grid-template-columns: minmax(0, 1fr); gap: 15px; }
}
@media (min-width: 1600px) {
  .bzn .bzn-nt-hoja { width: min(62rem, 100%); grid-template-columns: 25rem minmax(0, 1fr); }
  .bzn .bzn-nt-tk { zoom: 1.12; }
  .bzn .bzn-nt-cuerpo { gap: 18px; padding: 20px 26px 22px; }
  .bzn .bzn-nt-cab { padding-left: 26px; }
  .bzn .bzn-nt-pie { padding-left: 26px; padding-right: 18px; }
}


/* ============================================================
   FECHA Y HORA DE LA CASA (27/09/2026, noche). El selector del navegador
   «parecía una construcción muy básica»: un botón con el día y la hora que
   abre debajo un mes chico, la hora en dos casillas, «Ahora» y «Listo».
   Pieza: panel/partes/fecha-hora.
   ============================================================ */
.fh { display: grid; gap: .4rem; min-width: 0; }
.fh-boton {
  display: flex; align-items: center; gap: .55rem; width: 100%; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--linea-2); border-radius: 8px;
  background: var(--sup-1); color: var(--tinta); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.fh-boton svg { width: 16px; height: 16px; color: var(--gris); flex: none; }
.fh-boton span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-boton b { font-weight: 700; font-variant-numeric: tabular-nums; }
.fh-boton:hover { border-color: color-mix(in srgb, var(--linea-2) 60%, var(--gris)); }
.fh-boton[aria-expanded="true"], .fh-boton:focus-visible { border-color: var(--marca); outline: 2px solid var(--marca); outline-offset: 0; }
.fh-panel { display: grid; gap: .45rem; padding: .6rem .7rem .65rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--sup-1); }
.fh-panel[hidden] { display: none; }
.fh-cab { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.fh-cab b { font-size: .8rem; font-weight: 700; color: var(--tinta); text-transform: capitalize; }
.fh-cab button { width: 1.7rem; height: 1.7rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup-1); color: var(--tinta); font-size: 1rem; line-height: 1; cursor: pointer; }
.fh-cab button:hover { background: var(--sup-2); }
.fh-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.fh-sem { font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); text-align: center; padding-bottom: .15rem; }
.fh-dia { height: 1.9rem; border: 0; border-radius: 6px; background: transparent; color: var(--tinta); font: inherit; font-size: .78rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.fh-dia:hover:not(:disabled) { background: var(--sup-2); }
.fh-dia:disabled { color: color-mix(in srgb, var(--gris) 45%, transparent); cursor: default; }
.fh-dia.fh-hoy { box-shadow: inset 0 0 0 1px var(--marca); }
.fh-dia.fh-sel { background: var(--tinta); color: var(--sup-1); font-weight: 700; }
.fh-dia:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.fh-pie { display: flex; align-items: center; gap: .45rem; padding-top: .5rem; border-top: 1px solid var(--linea); }
.fh-hh { display: inline-flex; align-items: center; gap: .2rem; margin-right: auto; }
.fh .fh-hh input { width: 2.7rem; height: 2rem; padding: 0; border: 1px solid var(--linea-2); border-radius: 6px; background: var(--sup-1); color: var(--tinta); font: inherit; font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.fh .fh-hh input:focus-visible { outline: 2px solid var(--marca); outline-offset: 0; border-color: var(--marca); }
.fh-hh i { font-style: normal; font-weight: 800; color: var(--texto-2); }

/* ============================================================
   LA FICHA DE UN INGRESO O UN EGRESO (29/09/2026): «La rendición con
   comprobante», la elegida por el dueño entre cinco. Una hoja con su folio
   —el número de serie del punto de caja, `E007-000054`—, el movimiento a la
   izquierda y el comprobante con su foto a la derecha. panel/partes/remesas-mov.
   ============================================================ */
.rmv {
  --rmv-eg: color-mix(in srgb, var(--rojo) 78%, var(--tinta));
  --rmv-in: var(--verde-texto);
  --rmv-ink: var(--rmv-eg);
  --rmv-ui: Manrope, system-ui, sans-serif;
  --rmv-num: "Archivo", Manrope, sans-serif;
  --rmv-mono: "IBM Plex Mono", ui-monospace, monospace;
  --rmv-et: 7.2rem;
  position: fixed; inset: 0; z-index: 97; display: grid; overflow-y: auto; overscroll-behavior: contain;
  padding: 28px 24px; box-sizing: border-box;
  font-family: var(--rmv-ui); color: var(--tinta); -webkit-font-smoothing: antialiased;
}
.rmv *, .rmv *::before, .rmv *::after { box-sizing: border-box; }
.rmv[data-tipo="ingreso"] { --rmv-ink: var(--rmv-in); }
.rmv[hidden], .rmv [hidden] { display: none !important; }
:where(.rmv) button { font: inherit; color: inherit; cursor: pointer; }
:where(.rmv) button:disabled { cursor: default; }
.rmv svg { display: block; flex: none; }
:where(.rmv) :is(p, h3) { margin: 0; }

.rmv-velo { position: fixed; inset: 0; background: color-mix(in srgb, var(--tinta) 46%, transparent); }
.rmv-velo.rmv-anim { animation: rmv-aparece .18s ease-out; }
.rmv-hoja {
  position: relative; z-index: 1; margin: auto; width: min(64rem, 100%);
  background: var(--sup-1); border-radius: 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 10%, transparent), 0 40px 80px -36px color-mix(in srgb, var(--tinta) 55%, transparent);
}
.rmv-hoja.rmv-anim { animation: rmv-entra .2s cubic-bezier(.2, .8, .3, 1); }
@keyframes rmv-aparece { from { opacity: 0; } }
@keyframes rmv-entra { from { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes rmv-sube { from { transform: translateY(28px); } }

/* ---------- la cabecera: el tipo, quien registra y el folio ---------- */
.rmv-cab { display: flex; align-items: flex-start; gap: 20px; padding: 20px 20px 18px 24px; border-bottom: 3px double var(--linea-2); }
.rmv-cab-izq { display: grid; gap: 11px; min-width: 0; }
.rmv-conm { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--sup-3); box-shadow: inset 0 0 0 1px var(--linea); justify-self: start; }
.rmv-conm button {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 13px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texto-2); font: 700 .95rem/1 var(--rmv-ui); transition: background .16s, color .16s, box-shadow .16s;
}
.rmv-conm button svg { width: 19px; height: 19px; }
.rmv-conm button:hover:not([aria-checked="true"]) { color: var(--tinta); background: color-mix(in srgb, var(--sup-1) 60%, transparent); }
.rmv-conm button[aria-checked="true"] { background: var(--rmv-ink); color: #FFFFFF; box-shadow: 0 6px 14px -8px var(--rmv-ink); }
.rmv-firma { display: flex; align-items: center; gap: 9px; min-width: 0; font: 600 .8rem/1.2 var(--rmv-ui); color: var(--texto-2); white-space: nowrap; }
.rmv-firma b { color: var(--tinta); font-weight: 700; }
.rmv-ini { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-osc); font: 800 .62rem/1 var(--rmv-ui); letter-spacing: .02em; flex: none; }

.rmv-folio { margin-left: auto; display: grid; min-width: 15rem; border: 1.5px solid var(--rmv-ink); border-radius: 7px; text-align: center; overflow: hidden; transition: border-color .16s; }
.rmv-folio small { padding: 7px 14px 6px; font: 700 .6rem/1 var(--rmv-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.rmv-folio b { padding: 7px 14px; background: var(--rmv-ink); color: #FFFFFF; font: 800 .74rem/1 var(--rmv-ui); letter-spacing: .22em; text-transform: uppercase; transition: background .16s; }
.rmv-folio > span { padding: 8px 14px 9px; font: 600 1.1rem/1 var(--rmv-mono); letter-spacing: .03em; color: var(--tinta); }
.rmv-folio > span i { font-style: normal; }
.rmv-folio > span em { margin-right: 6px; font: 500 .78rem/1 var(--rmv-mono); font-style: normal; color: var(--gris); }
.rmv-x { display: grid; place-items: center; width: 34px; height: 34px; margin: -6px -4px 0 -6px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--gris); transition: background .14s, color .14s; }
.rmv-x:hover { background: var(--sup-2); color: var(--tinta); }
.rmv-x svg { width: 18px; height: 18px; }

/* ---------- el cuerpo: dos fichas de renglones, como una hoja de rendición ---------- */
.rmv-cuerpo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 16px 24px 24px; }
.rmv-col { min-width: 0; transition: opacity .2s; }
.rmv-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-height: 34px; margin-bottom: 8px; padding: 0 2px 0 1px; }
.rmv-sec > span:first-child { padding-bottom: 2px; font: 800 .66rem/1 var(--rmv-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.rmv-ficha { position: relative; display: grid; border: 1px solid var(--linea-2); border-radius: 8px; background: var(--sup-1); }
.rmv-ficha-d { overflow: hidden; }
.rmv-fila { position: relative; display: grid; grid-template-columns: var(--rmv-et) minmax(0, 1fr); border-top: 1px solid var(--linea); margin-top: -1px; }
.rmv-ficha-i > .rmv-fila:first-child { border-top: 0; margin-top: 0; }
.rmv-ficha-i > .rmv-fila:first-child > .rmv-et { border-top-left-radius: 7px; }
.rmv-ficha-i > .rmv-fila:last-child > .rmv-et { border-bottom-left-radius: 7px; }
.rmv-et {
  display: flex; align-items: center; min-height: 46px; padding: 0 12px; background: var(--sup-2); border-right: 1px solid var(--linea);
  font: 800 .62rem/1.25 var(--rmv-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); transition: color .14s, background .14s;
}
.rmv-f-concepto > .rmv-et, .rmv-f-foto > .rmv-et, .rmv-f-ctipo > .rmv-et { align-items: flex-start; padding-top: 18px; }
.rmv-val { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; transition: background .14s, box-shadow .14s; }
.rmv-val:focus-within { box-shadow: inset 0 0 0 1.5px var(--marca); }
.rmv-fila.rmv-apagada > .rmv-et, .rmv-fila.rmv-apagada > .rmv-val { opacity: .45; }
/* SIN CONDUCTOR (01/10/2026): el conductor y, a su lado, el botón que lo deja vacío a propósito */
.rmv-val.rmr-con-sin { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
/* el pago que se eliminó en el TMS (02/10/2026): en su jornada, tachado y sin contar */
.hoja tbody tr.fila-eliminada > td { color: var(--gris); text-decoration: line-through; background: var(--sup-2); }
.hoja tbody tr.fila-eliminada > td.fila-eliminada-dice { text-decoration: none; font-weight: 600; }
/* el cobro que otro usuario editó en el TMS (02/10/2026): un lápiz con quién, junto a su medio */
.cobro-editado { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: .74em; font-weight: 600; color: var(--gris); white-space: nowrap; cursor: help; vertical-align: middle; }
.cobro-editado .ic { width: .95em; height: .95em; }
body.panel a.cobro-editado { color: var(--gris); text-decoration: none; cursor: pointer; }
body.panel a.cobro-editado:hover, body.panel a.cobro-editado:focus-visible { color: var(--tinta); }
/* la lista de correcciones (02/10/2026): lo eliminado, en gris; lo que cambió, a lo ancho */
.hoja-correcciones tbody tr.cor-eliminado > td.cor-dice { color: var(--rojo); font-weight: 600; }
.hoja-correcciones td.cor-dice { white-space: normal; overflow: visible; text-overflow: clip; min-width: 16rem; max-width: 40rem; line-height: 1.3; }
.mc-boton .ic { width: 15px; height: 15px; }
/* el lápiz solo (lo editó su propia caja): que se vea */
.cobro-editado.solo .ic { width: 1.25em; height: 1.25em; }
/* VARIOS MEDIOS (03/10/2026): junto al medio de un cobro, sus partes (logo y monto) y el botón que abre el diálogo */
.vm-partes { display: inline-flex; align-items: center; gap: .45rem; margin-left: .4rem; padding-left: .45rem; border-left: 1px solid var(--linea-2); vertical-align: middle; white-space: nowrap; }
.vm-parte { display: inline-flex; align-items: center; gap: .25rem; font-size: .92em; color: var(--tinta); }
.vm-parte svg, .vm-parte img { height: 1.05em; width: auto; flex: none; }
.vm-parte b { font-weight: 700; }
.vm-nombre { font-weight: 600; color: var(--texto-2); }
.vm-sin-efecto { border-left-color: var(--ambar-2); font-size: .82em; font-weight: 700; color: var(--ambar); cursor: help; }
.vm-abrir { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-left: .25rem; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--gris); cursor: pointer; vertical-align: middle; }
.vm-abrir:hover { border-color: var(--linea-2); background: var(--sup-1); color: var(--marca-osc); }
.vm-abrir:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.vm-abrir:active { transform: translateY(1px); }
@media (pointer: coarse) { .vm-abrir { width: 2.25rem; height: 2.25rem; } }
.rm-dialogo.vm { width: min(26rem, calc(100vw - 24px)); }
.vm-cobro { display: flex; align-items: baseline; gap: .6rem; margin: 0; font-size: .86rem; color: var(--texto-2); }
.vm-cobro > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-cobro b { font-size: 1.15rem; font-weight: 800; color: var(--tinta); }
.vm-filas { display: grid; gap: .45rem; }
.vm-filas [data-vm="otras"] { display: grid; gap: .45rem; }
.vm-fila { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 2.25rem; align-items: center; gap: .45rem; }
.vm-fila select, .vm-fila input, .vm-nota { height: 2.5rem; padding: 0 .65rem; border: 1px solid var(--linea-2); border-radius: 8px; background: var(--sup-1); color: var(--tinta); font: inherit; font-size: .92rem; min-width: 0; }
.vm-fila input { text-align: right; font-variant-numeric: tabular-nums; }
.vm-fila select:focus, .vm-fila input:focus, .vm-nota:focus { outline: none; border-color: var(--marca); box-shadow: var(--anillo); }
.vm-suya { padding: 0 3.35rem 0 .65rem; height: 2.5rem; grid-template-columns: minmax(0, 1fr) auto; border-radius: 8px; background: var(--sup-2); font-size: .92rem; font-weight: 700; }
.vm-suya output { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vm-suya output.vm-mal { color: var(--rojo); }
.vm-quitar { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 8px; background: none; color: var(--gris); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.vm-quitar:hover { background: var(--sup-2); color: var(--rojo); }
.vm-quitar:focus-visible, .vm-mas:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.vm-mas { justify-self: start; padding: .3rem .6rem; border: 1px dashed var(--linea-2); border-radius: 8px; background: none; color: var(--marca-osc); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.vm-mas:hover { border-color: var(--marca); }
.vm-error { margin: 0; font-size: .84rem; font-weight: 700; color: var(--rojo); }
.vm-nota { width: 100%; }
/* un ajuste al saldo inicial de un acta (02/10/2026): debajo de lo real, chico */
.bvc-ajuste { display: block; margin-top: 2px; font-size: .74em; font-weight: 600; color: var(--texto-2); white-space: nowrap; cursor: help; }
.rmv-val.rmr-con-sin > .rmv-err { grid-column: 1 / -1; }
.rmr-sin-cond { margin-right: 8px; }

.rmv-in { width: 100%; height: 46px; padding: 0 12px; border: 0; background: transparent; color: var(--tinta); font: 600 .92rem/1 var(--rmv-ui); outline: 0; }
.rmv .rmv-in:focus-visible, .rmv .rmv-monto input:focus-visible, .rmv .rmv-fecha:focus-visible { outline: none; }
.rmv-in.rmv-mono { font: 500 .9rem/1 var(--rmv-mono); letter-spacing: .03em; text-transform: uppercase; }
.rmv-in::placeholder, .rmv-monto input::placeholder { color: color-mix(in srgb, var(--tinta) 28%, transparent); text-transform: none; }
.rmv-in:disabled { cursor: not-allowed; }

/* monto: S/ a la izquierda, la cifra a la derecha, como en el libro */
.rmv-monto { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 14px; }
.rmv-monto > span { font: 600 1rem/1 var(--rmv-num); color: var(--gris); }
.rmv-monto input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: 0; text-align: right;
  font: 700 1.8rem/1 var(--rmv-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--tinta);
}

/* fecha y hora: el botón y el desplegable de la casa */
.rmv-fecha { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 12px; border: 0; background: transparent; text-align: left; }
.rmv-fecha > svg { width: 17px; height: 17px; color: var(--gris); }
.rmv-fecha b { font: 600 .95rem/1 var(--rmv-mono); color: var(--tinta); }
.rmv-fecha span { font: 500 .95rem/1 var(--rmv-mono); color: var(--texto-2); }
.rmv-fecha em { padding: 4px 7px; border-radius: 5px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea); font: 700 .7rem/1 var(--rmv-ui); font-style: normal; color: var(--texto-2); }
.rmv-fecha .rmv-chev { width: 15px; height: 15px; margin-left: auto; color: var(--gris); transition: transform .16s; }
.rmv-fecha[aria-expanded="true"] .rmv-chev { transform: rotate(180deg); }

.rmv-pop {
  position: absolute; z-index: 8; top: calc(100% + 6px); left: -1px; width: 28.5rem; padding: 12px;
  background: var(--sup-1); border-radius: 10px;
  box-shadow: 0 0 0 1px var(--linea-2), 0 26px 50px -22px color-mix(in srgb, var(--tinta) 48%, transparent);
}
.rmv-pop.rmv-anim { animation: rmv-baja .14s ease-out; }
@keyframes rmv-baja { from { opacity: 0; transform: translateY(-4px); } }
.rmv-pp-atajos { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 11px; border-bottom: 1px solid var(--linea); }
.rmv-pp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 6px;
  background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea); font: 700 .78rem/1 var(--rmv-ui); color: var(--texto-2); white-space: nowrap; transition: background .14s, color .14s;
}
.rmv-pp-chip i { font: 500 .74rem/1 var(--rmv-mono); font-style: normal; }
.rmv-pp-chip:hover:not([aria-pressed="true"]) { background: var(--sup-3); color: var(--tinta); }
.rmv-pp-chip[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; box-shadow: none; }
.rmv-pp-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 8.4rem; gap: 14px; padding-top: 10px; }
.rmv-pp-mes-cab { display: flex; align-items: center; justify-content: space-between; height: 30px; margin-bottom: 2px; }
.rmv-pp-mes-cab b { font: 800 .84rem/1 var(--rmv-ui); text-transform: capitalize; }
.rmv-pp-mes-cab b span { margin-left: 4px; font: 500 .78rem/1 var(--rmv-mono); color: var(--gris); }
.rmv-pp-nav { display: flex; gap: 2px; }
.rmv-pp-nav button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--texto-2); }
.rmv-pp-nav button:hover:not(:disabled) { background: var(--sup-2); color: var(--tinta); }
.rmv-pp-nav button:disabled { opacity: .3; }
.rmv-pp-nav svg { width: 16px; height: 16px; }
.rmv-pp-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.rmv-pp-dsem { display: grid; place-items: center; height: 22px; font: 800 .6rem/1 var(--rmv-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.rmv-pp-dia { height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; font: 600 .8rem/1 var(--rmv-num); font-variant-numeric: tabular-nums; color: var(--tinta); }
.rmv-pp-dia:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--sup-2); }
.rmv-pp-dia.rmv-hoy { box-shadow: inset 0 0 0 1.5px var(--linea-2); font-weight: 800; }
.rmv-pp-dia[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; box-shadow: none; }
.rmv-pp-dia:disabled { color: color-mix(in srgb, var(--tinta) 24%, transparent); }
.rmv-pp-horas-col { display: flex; flex-direction: column; min-width: 0; padding-left: 14px; border-left: 1px solid var(--linea); }
.rmv-pp-rot { display: flex; align-items: center; height: 30px; margin-bottom: 2px; font: 800 .62rem/1 var(--rmv-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.rmv-pp-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rmv-pp-hora { height: 27px; padding: 0; border: 0; border-radius: 6px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea); font: 500 .76rem/1 var(--rmv-mono); color: var(--tinta); transition: background .14s; }
.rmv-pp-hora:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--sup-3); }
.rmv-pp-hora[aria-pressed="true"] { background: var(--tinta); color: #FFFFFF; box-shadow: none; }
.rmv-pp-hora:disabled { background: transparent; box-shadow: none; color: color-mix(in srgb, var(--tinta) 26%, transparent); text-decoration: line-through; }
.rmv-pp-exacta { display: flex; align-items: center; gap: 7px; height: 32px; margin-top: 6px; padding: 0 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--linea-2); }
.rmv-pp-exacta:focus-within { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.rmv-pp-exacta.rmv-mal { box-shadow: inset 0 0 0 1.5px var(--rojo); }
.rmv-pp-exacta svg { width: 15px; height: 15px; color: var(--gris); }
.rmv .rmv-pp-exacta input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font: 500 .8rem/1 var(--rmv-mono); color: var(--tinta); }

/* concepto: lo que la caja ya usó, a mano */
.rmv-f-concepto .rmv-in { padding-right: 58px; }
.rmv-cont { position: absolute; right: 12px; top: 17px; font: 500 .66rem/1 var(--rmv-mono); color: var(--gris); }
.rmv-cont.rmv-lleno { color: var(--rojo); }
.rmv-sug { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px 11px; }
.rmv-sug button {
  height: 26px; padding: 0 9px; border: 0; border-radius: 5px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea);
  font: 600 .74rem/1 var(--rmv-ui); color: var(--texto-2); transition: background .14s, color .14s;
}
.rmv-sug button:hover, .rmv-sug button:focus-visible { background: var(--sup-3); color: var(--tinta); }

/* el comprobante */
.rmv-ctipos { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px; }
.rmv-ctipos button {
  height: 30px; padding: 0 11px; border: 0; border-radius: 6px; background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2);
  font: 700 .76rem/1 var(--rmv-ui); color: var(--texto-2); transition: background .14s, color .14s, box-shadow .14s;
}
.rmv-ctipos button:hover:not([aria-checked="true"]) { background: var(--sup-2); color: var(--tinta); }
.rmv-ctipos button[aria-checked="true"] { background: var(--tinta); color: #FFFFFF; box-shadow: none; }
.rmv-ctipos button[data-c="sin"][aria-checked="true"] { background: var(--ambar-suave); color: var(--ambar); box-shadow: inset 0 0 0 1.5px var(--ambar); }
.rmv-de-otro { border-top: 1px solid var(--linea); }

/* ---------- la persona (30/09/2026): el destinatario de un egreso o de quién se recibe un ingreso,
   de la libreta de la casa; elegida, su documento y su celular «para verificar», con el lápiz ---------- */
.rmv-f-per > .rmv-et { align-items: flex-start; padding-top: 16px; }
.rmv-f-per .rmv-de:not([hidden]) + .rmv-per { border-top: 1px solid var(--linea); }
.rmv-per-lista li { flex-direction: column; align-items: flex-start; gap: 3px; }
.rmv-per-lista li b { max-width: 100%; }
.rmv-per-sel { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 6px 6px 6px 12px; }
.rmv-per-dato { display: grid; gap: 4px; flex: 1; min-width: 0; }
.rmv-per-dato b { font: 700 .9rem/1.2 var(--rmv-ui); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmv-per-dato small { font: 500 .74rem/1.2 var(--rmv-mono); color: var(--texto-2); }
.rmv-per-bt { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--gris); cursor: pointer; transition: background .14s, color .14s; }
.rmv-per-bt svg { width: 16px; height: 16px; }
.rmv-per-bt:hover { background: var(--sup-2); color: var(--tinta); }
.rmv-per-form { display: grid; padding-bottom: 4px; }
.rmv-per-form .gst-pre { cursor: text; }
.rmv-per-form .gst-pre > span { width: 4.6rem; }
.rmv-per-form .gst-pre:first-of-type { border-top: 0; }
.rmv-per-cab { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--linea); }
.rmv-per-tag { padding: 3px 7px; border-radius: 4px; background: var(--marca-suave); font: 800 .62rem/1 var(--rmv-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--marca-osc); }
.rmv-per-placa { flex: 1; min-width: 0; font: 500 .74rem/1 var(--rmv-mono); color: var(--gris); }
.rmv-per-pie { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 10px 6px; border-top: 1px solid var(--linea); }
.rmv-btn2.rmv-btn2-pri { background: var(--tinta); color: #FFFFFF; box-shadow: none; }
.rmv-btn2.rmv-btn2-pri:disabled { opacity: .6; cursor: progress; }
/* «Imprimir», al registrar: la media hoja para firmar */
.rmv-bt-imp { text-decoration: none; }
.rmv-bt-imp svg { width: 17px; height: 17px; }

.rmv-adj { padding: 8px 10px 10px; }
.rmv-adj-vacio {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 56px; padding: 8px 10px;
  border: 1.5px dashed var(--linea-2); border-radius: 7px; background: var(--sup-2); transition: border-color .14s, background .14s;
}
.rmv-adj.rmv-encima .rmv-adj-vacio { border-color: var(--marca); background: color-mix(in srgb, var(--marca-suave) 60%, var(--sup-1)); }
.rmv-btn2 {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 9px; border: 0; border-radius: 6px;
  background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2); font: 700 .78rem/1 var(--rmv-ui); color: var(--tinta); transition: box-shadow .14s;
}
.rmv-btn2 svg { width: 16px; height: 16px; color: var(--texto-2); }
.rmv-btn2:hover { box-shadow: inset 0 0 0 1px var(--texto-2); }
.rmv-kbd { margin-left: auto; padding: 4px 6px; border-radius: 4px; background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2); font: 500 .68rem/1 var(--rmv-mono); color: var(--gris); }
.rmv-adj-lleno { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.rmv-mini {
  flex: none; width: 44px; height: 56px; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: var(--sup-3);
  box-shadow: 0 0 0 1px var(--linea-2), 0 4px 10px -5px color-mix(in srgb, var(--tinta) 45%, transparent); transform: rotate(-2deg);
}
.rmv-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rmv-mini i { display: grid; place-items: center; width: 100%; height: 100%; font: 800 .62rem/1 var(--rmv-ui); font-style: normal; letter-spacing: .06em; color: var(--rojo); background: var(--sup-1); }
.rmv-adj-dato { display: grid; gap: 5px; min-width: 0; flex: 1; }
.rmv-adj-dato b { font: 700 .82rem/1.2 var(--rmv-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmv-adj-dato span { font: 500 .7rem/1 var(--rmv-mono); color: var(--gris); text-transform: uppercase; }

/* el sello del comprobante: la tinta de goma de la casa */
.rmv-sello {
  display: inline-grid; justify-items: center; gap: 1px; padding: 3px 8px 3px 9px; border: 3px double currentColor; border-radius: 3px;
  font: 800 .6rem/1.2 var(--rmv-ui); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-2.5deg); transform-origin: 100% 50%; mix-blend-mode: multiply; opacity: .94;
}
.rmv-sello small { font: 600 .56rem/1.15 var(--rmv-mono); letter-spacing: .04em; }
.rmv-sello.rmv-s-con { color: var(--verde-texto); }
.rmv-sello.rmv-s-sin { color: var(--ambar); }
.rmv-sello.rmv-s-pend { color: var(--gris); border: 2px dashed currentColor; padding: 4px 9px 4px 10px; opacity: .6; }
.rmv-sello.rmv-anim { animation: rmv-sellar .32s cubic-bezier(.2, .8, .3, 1); }
@keyframes rmv-sellar { from { opacity: 0; transform: scale(1.35) rotate(0deg); } to { opacity: .94; transform: scale(1) rotate(-2.5deg); } }

/* errores, junto al campo */
.rmv-err { display: flex; align-items: center; gap: 5px; margin-top: -3px; padding: 0 12px 9px; font: 700 .74rem/1.2 var(--rmv-ui); color: var(--rojo); }
.rmv-err svg { width: 14px; height: 14px; }
.rmv-f-monto .rmv-err { justify-content: flex-end; margin-top: -8px; padding-right: 14px; }
.rmv-fila.rmv-mal > .rmv-et { color: var(--rojo); background: color-mix(in srgb, var(--rojo-suave) 75%, var(--sup-2)); }
.rmv-fila.rmv-mal > .rmv-val { background: color-mix(in srgb, var(--rojo-suave) 45%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rojo) 55%, transparent); }
.rmv-fila.rmv-mal > .rmv-val:focus-within { box-shadow: inset 0 0 0 2px var(--rojo); }

.rmv-err-gen { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 7px; background: var(--rojo-suave); }
.rmv-bt-pri[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------- el pie: el efecto en la caja y las acciones ---------- */
.rmv-pie { display: flex; align-items: center; gap: 22px; padding: 14px 20px 14px 24px; border-top: 1px solid var(--linea); background: var(--sup-2); border-radius: 0 0 12px 12px; }
.rmv-saldo { display: grid; gap: 6px; min-width: 0; }
.rmv-saldo small, .rmv-hecho-txt small { font: 800 .58rem/1 var(--rmv-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.rmv-saldo > div { display: flex; align-items: baseline; gap: 9px; font: 600 1rem/1 var(--rmv-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rmv-saldo span { color: var(--gris); }
.rmv-saldo span.rmv-solo { color: var(--tinta); font-weight: 800; }
.rmv-saldo em { font-style: normal; font-weight: 700; color: var(--rmv-ink); }
.rmv-saldo em.rmv-nada { color: var(--gris); font-weight: 600; }
.rmv-saldo i { font: 500 .8rem/1 var(--rmv-mono); font-style: normal; color: var(--gris); }
.rmv-saldo b { font-weight: 800; color: var(--tinta); }
.rmv-saldo b.rmv-neg { color: var(--rojo); }
.rmv-hecho-txt { display: grid; gap: 6px; min-width: 0; }
.rmv-hecho-txt span { font: 600 .84rem/1.2 var(--rmv-ui); color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmv-hecho-txt span b { color: var(--tinta); }
.rmv-hecho-txt span i { font: 500 .8rem/1 var(--rmv-mono); font-style: normal; }
.rmv-acciones { display: flex; gap: 8px; margin-left: auto; }
.rmv-bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 16px; border: 0; border-radius: 8px; font: 700 .88rem/1 var(--rmv-ui); white-space: nowrap; transition: background .14s, box-shadow .14s; }
.rmv-bt-sec { background: var(--sup-1); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-2); }
.rmv-bt-sec:hover { box-shadow: inset 0 0 0 1px var(--texto-2); }
.rmv .rmv-bt-pri { padding: 0 11px 0 18px; background: var(--tinta); color: #FFFFFF; font-weight: 800; }
.rmv-bt-pri:hover { background: color-mix(in srgb, var(--tinta) 84%, var(--marca)); }
.rmv-bt-pri kbd { padding: 4px 6px; border-radius: 4px; background: color-mix(in srgb, #FFFFFF 14%, transparent); font: 500 .66rem/1 var(--rmv-mono); color: color-mix(in srgb, #FFFFFF 78%, transparent); }

/* ---------- registrado: el sello cae sobre la ficha ---------- */
.rmv-registrado { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; pointer-events: none; }
.rmv-gran-sello {
  display: grid; justify-items: center; gap: 6px; padding: 13px 28px 14px; border: 5px double var(--verde-texto); border-radius: 6px;
  color: var(--verde-texto); background: color-mix(in srgb, var(--sup-1) 80%, transparent); transform: rotate(-5deg);
}
.rmv-gran-sello.rmv-anim { animation: rmv-golpe .34s cubic-bezier(.2, .8, .3, 1); }
.rmv-gran-sello b { font: 800 1.9rem/1 var(--rmv-ui); letter-spacing: .18em; text-transform: uppercase; }
.rmv-gran-sello span { font: 600 .82rem/1.2 var(--rmv-mono); letter-spacing: .04em; }
.rmv-gran-sello i { font: 800 .62rem/1 var(--rmv-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
@keyframes rmv-golpe { from { opacity: 0; transform: scale(1.5) rotate(0deg); } to { opacity: 1; transform: scale(1) rotate(-5deg); } }
.rmv-es-hecho .rmv-cuerpo > .rmv-col { opacity: .62; pointer-events: none; }
.rmv-es-hecho .rmv-conm { pointer-events: none; }

/* el visor de la foto */
.rmv-visor { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 56px 24px 24px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 86%, transparent); }
.rmv-visor img { max-width: 100%; max-height: 100%; border-radius: 3px; box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--tinta) 80%, transparent); }
.rmv-visor .rmv-x { position: absolute; top: 12px; right: 12px; margin: 0; color: #FFFFFF; }
.rmv-visor .rmv-x:hover { background: color-mix(in srgb, #FFFFFF 14%, transparent); color: #FFFFFF; }


/* ---------- el teléfono: hoja a pantalla completa, lo importante al pulgar ---------- */
@media (max-width: 600px) {
  .rmv { --rmv-et: 6.3rem; display: block; padding: 0; }
  .rmv-hoja { width: 100%; min-height: calc(100vh - 14px); margin: 14px 0 0; display: flex; flex-direction: column; border-radius: 14px 14px 0 0; }
  .rmv-hoja.rmv-anim { animation-name: rmv-sube; }
  .rmv-cab { flex-wrap: wrap; gap: 12px 10px; padding: 14px 12px 14px 16px; }
  .rmv-cab-izq { flex: 1; }
  .rmv-conm { display: flex; justify-self: stretch; }
  .rmv-conm button { flex: 1; justify-content: center; height: 44px; }
  .rmv-firma { display: none; }
  .rmv-x { width: 44px; height: 44px; margin: 3px 0 0; }
  .rmv-folio { order: 3; flex: 1 0 100%; min-width: 0; margin: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; text-align: left; }
  .rmv-folio b { order: 1; display: flex; align-items: center; padding: 0 12px; letter-spacing: .16em; }
  .rmv-folio small { order: 2; display: flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap; }
  .rmv-folio > span { order: 3; padding: 9px 12px; }
  .rmv-folio .rmv-sede, .rmv-folio small { display: none; }
  .rmv-folio { grid-template-columns: auto minmax(0, 1fr); }
  .rmv-folio > span { text-align: right; }
  .rmv-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px 16px 20px; flex: 1 0 auto; align-content: start; }
  .rmv-pop { position: static; grid-column: 1 / -1; width: auto; margin: 0 8px 8px; box-shadow: 0 0 0 1px var(--linea-2); }
  .rmv-pp-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .rmv-pp-dia { height: 36px; }
  .rmv-pp-horas-col { padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--linea); }
  .rmv-pp-horas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rmv-pp-hora { height: 34px; }
  .rmv-adj-vacio .rmv-kbd { display: none; }
  .rmv-btn2 { height: 38px; }
  .rmv-pie { position: sticky; bottom: 0; z-index: 9; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 0; box-shadow: 0 -10px 24px -18px color-mix(in srgb, var(--tinta) 40%, transparent); }
  .rmv-saldo, .rmv-hecho-txt { flex: 1 0 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .rmv-acciones { flex: 1 0 100%; margin: 0; }
  .rmv-acciones .rmv-bt { height: 50px; }
  .rmv-acciones .rmv-bt-pri { flex: 1; }
  .rmv-bt-pri kbd { display: none; }
  .rmv-gran-sello b { font-size: 1.6rem; }
}
/* pantallas bajas: la hoja arriba, para que el desplegable de la fecha quepa */
@media (min-width: 601px) and (max-height: 860px) {
  .rmv { padding-top: 20px; }
  .rmv-hoja { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rmv *, .rmv *::before, .rmv *::after { animation: none !important; transition: none !important; }
}

/* LA FICHA DE UNA REMESA (29/09/2026): la misma hoja de rendición (.rmv) en la tinta azul de lo que va
   a la Bóveda, con su folio R007-000013; el calendario de las fechas, los sobres y la hora de salida, dentro */
.rmv[data-tipo="remesa"] { --rmv-ink: var(--azul-texto); }
/* el formulario no es una caja: la cabecera, el cuerpo y el pie son de la hoja, como en la ficha de un ingreso */
.rmr form { display: contents; }
/* una sola ficha, sin conmutador: el rótulo va solo */
.rmr .rmv-conm { padding: 0; background: transparent; box-shadow: none; }
.rmr-tipo {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 13px; border-radius: 8px;
  background: var(--rmv-ink); color: #FFFFFF; font: 700 .95rem/1 var(--rmv-ui); box-shadow: 0 6px 14px -8px var(--rmv-ink);
}
.rmr-tipo .rmr-tipo-ic { width: 19px; height: 19px; flex: none; }
.rmr-f-fechas > .rmv-et, .rmr-f-sobres > .rmv-et, .rmr-f-enviada > .rmv-et { align-items: flex-start; padding-top: 18px; }
.rmr .rc-cal { padding: 10px 12px 12px; }
.rmr-sobres { display: grid; }
.rmr-sobre { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 40px; align-items: center; border-bottom: 1px solid var(--linea); }
/* el número del sobre, con su «N.º» delante: no es un monto (30/09/2026) */
.rmr-num { display: flex; align-items: center; gap: 5px; min-width: 0; padding-left: 12px; cursor: text; }
.rmr-num em { flex: none; font: 500 .72rem/1 var(--rmv-mono); font-style: normal; color: var(--gris); }
.rmr-num .rmv-in { min-width: 0; padding: 0 6px 0 0; }
/* el día de un sobre propuesto por día */
.rmr-dia { flex: none; margin-right: auto; padding: 3px 6px; border-radius: 4px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea); font: 500 .7rem/1 var(--rmv-mono); font-style: normal; color: var(--texto-2); }
.rmr-sm { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 10px 0 12px; border-left: 1px solid var(--linea); }
.rmr-sm span { font: 600 .85rem/1 var(--rmv-num); color: var(--gris); }
.rmr-sm input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: 0; text-align: right;
  font: 700 1rem/1 var(--rmv-num); font-variant-numeric: tabular-nums; color: var(--tinta);
}
.rmr-sm input::placeholder { color: color-mix(in srgb, var(--tinta) 28%, transparent); }
.rmr-x { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--gris); cursor: pointer; transition: background .14s, color .14s; }
.rmr-x svg { width: 16px; height: 16px; }
.rmr-x:hover { background: var(--sup-2); color: var(--rojo); }
.rmr-sobres-pie { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px 12px; }
/* el resto: lo que falta, escrito solo en el último sobre */
.rmr-resto .rmr-sm input { color: var(--texto-2); font-weight: 600; }
/* «De a S/ 500»: se reparte de un golpe */
.rmr-dea { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 6px; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--linea); cursor: text; }
.rmr-dea:focus-within { box-shadow: inset 0 0 0 1.5px var(--rmv-ink); }
.rmr-dea span { font: 800 .6rem/1 var(--rmv-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.rmr-dea i { font: 600 .78rem/1 var(--rmv-num); font-style: normal; color: var(--gris); }
.rmr-dea input { width: 5.5rem; padding: 0; border: 0; outline: 0; background: transparent; text-align: right; font: 700 .9rem/1 var(--rmv-num); font-variant-numeric: tabular-nums; color: var(--tinta); }
.rmr-dea input::placeholder { color: color-mix(in srgb, var(--tinta) 28%, transparent); }
.rmr-sobres-pie > span { margin-left: auto; font: 600 .78rem/1.2 var(--rmv-ui); color: var(--texto-2); white-space: nowrap; }
.rmr-sobres-pie > span b { font-family: var(--rmv-num); font-weight: 800; color: var(--tinta); }
/* el conductor: los del TMS, en una lista que se despliega bajo el renglón */
.rmr-cond-lista {
  position: absolute; z-index: 8; top: 100%; left: -1px; right: -1px; margin: 4px 0 0; padding: 6px; list-style: none;
  max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; background: var(--sup-1); border-radius: 10px;
  box-shadow: 0 0 0 1px var(--linea-2), 0 26px 50px -22px color-mix(in srgb, var(--tinta) 48%, transparent);
}
.rmr-cond-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.rmr-cond-lista li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .86rem/1.2 var(--rmv-ui); color: var(--tinta); }
.rmr-cond-lista li span { flex: none; font: 500 .74rem/1 var(--rmv-mono); color: var(--gris); }
.rmr-cond-lista li:hover, .rmr-cond-lista li[aria-selected="true"] { background: var(--sup-2); }
.rmr-cond-lista li[aria-selected="true"] b { color: var(--rmv-ink); }
/* la placa sugiere las del TMS al escribir, sin la flecha del navegador */
.rmr input[list]::-webkit-calendar-picker-indicator { display: none !important; }
/* la hora de salida: el selector de la casa, vestido como un renglón de la hoja */
.rmr .fh { gap: 0; }
.rmr .fh-boton { height: 46px; gap: 10px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; }
.rmr .fh-boton:hover { border: 0; }
.rmr .fh-boton[aria-expanded="true"], .rmr .fh-boton:focus-visible { outline: none; border: 0; }
.rmr .fh-boton svg { width: 17px; height: 17px; }
.rmr .fh-boton span { flex: none; font: 600 .95rem/1 var(--rmv-mono); color: var(--tinta); }
.rmr .fh-boton b { font: 500 .95rem/1 var(--rmv-mono); color: var(--texto-2); }
.rmr .fh-panel { margin: 0 10px 10px; }
@media (max-width: 600px) {
  .rmr-sobre { grid-template-columns: 5.4rem minmax(0, 1fr) 40px; }
  .rmr .rmv-conm { display: inline-flex; justify-self: start; }
}

/* ============================================================
   GASTOS (30/09/2026): la pantalla de la tesorera, en la puerta de la
   Bóveda. De tres previos el dueño eligió el compacto —«sigue teniendo
   muchos datos que marea… crea algo compacto»—: dos columnas asimétricas
   (1.55fr / 1fr), la cuenta BCP Tesorería en el verde de la casa con UNA
   barra (lo que ya tiene dueño y lo que queda libre), «Por pagar» y
   «Movimientos» con una línea por dato, el rojo solo para lo vencido y lo
   demás al tocar. Las fichas son la hoja de la casa (.rmv) en la tinta de
   la marca. panel/gastos, panel/gastos-proveedores, panel/partes/gastos-*.
   ============================================================ */
.gst { max-width: 76rem; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.05rem; align-items: start; }
.gst [hidden], .gst-pv [hidden] { display: none !important; }
.gst-cab { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem 1.1rem; flex-wrap: wrap; }
.gst-cab h1 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); }
body.panel a.gst-enlace { padding: .2rem 0; font-size: .84rem; font-weight: 700; color: var(--marca-osc); }
body.panel a.gst-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.gst-enlace:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
.gst-acc { display: flex; gap: .45rem; margin-left: auto; }
.gst-bt {
  height: 2.3rem; padding: 0 1.05rem; border: 1px solid var(--linea-2); border-radius: 9px; background: var(--sup-1); color: var(--tinta);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; transition: transform .18s cubic-bezier(.16, 1, .3, 1), background-color .15s, border-color .15s;
}
.gst-bt:hover { border-color: var(--marca-osc); }
.gst-bt.gst-pri { padding: 0 1.4rem; background: var(--marca-osc); border-color: var(--marca-osc); color: #FFFFFF; }
.gst-bt.gst-pri:hover { background: var(--marca); border-color: var(--marca); }
.gst-bt:active, .gst-fila:active { transform: translateY(1px) scale(.985); }
.gst-bt:focus-visible, .gst-fila:focus-visible, .gst-link:focus-visible, .gst-que-bt:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.gst-izq, .gst-der { display: grid; gap: 1.05rem; min-width: 0; }


/* 2 y 3 · las listas: una hoja blanca, una línea por dato */
.gst-bloque { background: var(--sup-1); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.gst-b-cab { display: flex; align-items: center; gap: .6rem; min-height: 2.9rem; padding: .55rem .8rem .35rem 1.1rem; }
.gst-b-cab h2 { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.gst-vencidos { padding: 2px 8px; border-radius: 99px; background: var(--rojo-suave); color: var(--rojo); font-size: .68rem; font-weight: 800; }
.gst-b-cab .gst-mas { margin-left: auto; }
.gst-lista { list-style: none; margin: 0; padding: 0 .45rem .35rem; }
.gst-animar > li { animation: gst-entra .42s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes gst-entra { from { opacity: 0; transform: translateY(4px); } }
.gst-fila {
  display: grid; grid-template-columns: 3.9rem minmax(0, 1fr) auto 7.2rem 4.4rem; align-items: center; gap: .9rem;
  width: 100%; min-height: 2.75rem; padding: 0 .65rem; border: 0; border-radius: 8px; background: transparent;
  color: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, transform .18s cubic-bezier(.16, 1, .3, 1);
}
.gst-lista > li + li .gst-fila { box-shadow: inset 0 1px 0 var(--linea); }
.gst-lista > li:hover + li .gst-fila, .gst-lista > li:hover .gst-fila { box-shadow: none; }
.gst-fila:hover { background: var(--sup-2); }
.gst-fila.gst-fija { cursor: default; }
.gst-fila.gst-fija:hover { background: transparent; }
.gst-fecha { font-size: .8rem; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gst-que { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
.gst-cuando { font-size: .76rem; font-weight: 600; color: var(--gris); white-space: nowrap; }
.gst-cuando.gst-mono { font-family: var(--f-mono); font-weight: 500; font-size: .72rem; }
.gst-monto { font-size: .95rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gst-ir { justify-self: end; padding: 5px 10px; border-radius: 7px; background: var(--marca-osc); color: #FFFFFF; font-size: .74rem; font-weight: 800; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .2s cubic-bezier(.16, 1, .3, 1); }
.gst-fila:hover .gst-ir, .gst-fila:focus-visible .gst-ir { opacity: 1; transform: none; }
.gst-fila.gst-pronto .gst-cuando { color: var(--ambar); }
.gst-fila.gst-venc .gst-cuando, .gst-fila.gst-venc .gst-que, .gst-fila.gst-venc .gst-monto { color: var(--rojo); }
.gst-fila.gst-venc .gst-ir { opacity: 1; transform: none; background: var(--rojo); }
.gst-sale { color: var(--tinta); }
.gst-entra { color: var(--verde-texto); }
.gst-mv { grid-template-columns: 3.9rem minmax(0, 1fr) auto 7.2rem; }
.gst-fila.gst-anulado .gst-que, .gst-fila.gst-anulado .gst-monto { color: var(--gris); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--gris) 70%, transparent); }
.gst-nuevo .gst-fila { animation: gst-brilla 2s ease-out; }
@keyframes gst-brilla { from { background: color-mix(in srgb, var(--marca-suave) 90%, transparent); } }
.gst-vacio { margin: 0; padding: .4rem 1.1rem 1rem; font-size: .88rem; color: var(--texto-2); }
.gst-mas-l { display: flex; gap: 1rem; padding: .15rem 1.1rem .85rem; }
.gst-link { padding: 0; border: 0; background: none; color: var(--marca-osc); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.gst-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.gst-link:disabled { opacity: .5; cursor: default; text-decoration: none; }
.gst-link.gst-gris { color: var(--texto-2); }
/* lo que no tiene día: plegado al final, con su «Poner día» */
.gst-sindia { border-top: 1px dashed var(--linea-2); padding-top: .2rem; }
.gst-sindia .gst-fila { grid-template-columns: 3.9rem minmax(0, 1fr) 7.2rem auto; }
.gst-que-bt { padding: 0; border: 0; background: none; color: var(--tinta); font: inherit; font-size: .9rem; font-weight: 700; text-align: left; cursor: pointer; }
.gst-que-bt:hover { color: var(--marca-osc); text-decoration: underline; text-underline-offset: 3px; }
.gst-sindia .gst-monto { color: var(--texto-2); font-weight: 700; }
.gst-dia { display: inline-flex; align-items: center; gap: .45rem; }
.gst-dia input { width: 2.5rem; height: 1.75rem; padding: 0; border: 1px solid var(--linea-2); border-radius: 6px; background: var(--sup-1); color: var(--tinta); font: inherit; font-size: .8rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.gst-dia input:focus-visible { outline: 2px solid var(--marca); outline-offset: 0; border-color: var(--marca); }
.gst-dia input.gst-mal { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }
/* en dos columnas, los movimientos van sin su número (está en su hoja) */
@media (min-width: 1101px) {
  .gst-der .gst-mv { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
  .gst-der .gst-mv .gst-cuando { display: none; }
}
@media (max-width: 1100px) { .gst { grid-template-columns: minmax(0, 1fr); max-width: 46rem; } }
@media (max-width: 640px) {
  .gst-cab { gap: .5rem .9rem; }
  .gst-acc { flex: 1 0 100%; justify-content: flex-end; }
  .gst-fila, .gst-mv { grid-template-columns: 3.4rem minmax(0, 1fr) 6.4rem; gap: .6rem; }
  .gst-fila .gst-cuando, .gst-fila .gst-ir { display: none; }
  .gst-fila.gst-venc .gst-que::after { content: " · vencido"; }
  .gst-sindia .gst-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding-block: .45rem; }
  .gst-sindia .gst-fecha, .gst-sindia .gst-monto { display: none; }
}

/* el aviso de abajo */
.gst-aviso {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 99; display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 32px);
  padding: .7rem 1rem; border-radius: 10px; background: var(--tinta); color: #FFFFFF; font-size: .84rem; font-weight: 600;
  transform: translateX(-50%); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--tinta) 70%, transparent);
}
.gst-aviso[hidden] { display: none; }
.gst-aviso svg { width: 18px; height: 18px; flex: none; color: var(--marca-suave); }
.gst-aviso.gst-mal svg { color: var(--rojo-suave); }
.gst-aviso.rmv-anim { animation: gst-sube .22s cubic-bezier(.16, 1, .3, 1); }
@keyframes gst-sube { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- las fichas: la hoja de la casa (.rmv) en la tinta de la marca ---------- */
.rmv[data-tipo="gasto"] { --rmv-ink: var(--marca-osc); }
.gst-ficha .rmv-conm:not([role]) { padding: 0; background: transparent; box-shadow: none; }
.gst-tipo {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 13px; border-radius: 8px;
  background: var(--rmv-ink); color: #FFFFFF; font: 700 .95rem/1 var(--rmv-ui); box-shadow: 0 6px 14px -8px var(--rmv-ink);
}
.gst-tipo svg { width: 19px; height: 19px; flex: none; }
.gst-tipo > span[data-v-ic] { display: inline-flex; }
.gst-hoja-media { width: min(40rem, 100%); }
.rmv-cuerpo.gst-una { grid-template-columns: minmax(0, 1fr); }
.gst-f-prov > .rmv-et, .gst-f-deudas > .rmv-et, .gst-f-fecha > .rmv-et { align-items: flex-start; padding-top: 18px; }
.gst-ficha input[list]::-webkit-calendar-picker-indicator { display: none !important; }
.gst-in-dia { max-width: 6rem; }

/* el proveedor: el dato de lo elegido, y el nombre cuando solo se escribió el RUC */
.gst-prov-dato { display: block; margin-top: -8px; padding: 0 12px 9px; font: 500 .7rem/1.3 var(--rmv-mono); color: var(--gris); }
.gst-prov-dato.gst-es-nuevo { color: var(--marca-osc); font-weight: 600; }
.gst-pre { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-top: 1px solid var(--linea); }
.gst-pre > span { flex: none; font: 800 .6rem/1 var(--rmv-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.gst-pre input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tinta); font: 600 .9rem/1 var(--rmv-ui); }
.rmv .gst-pre input:focus-visible { outline: none; }
.gst-pre input.rmv-mono { font: 500 .88rem/1 var(--rmv-mono); letter-spacing: .03em; text-transform: uppercase; }
.gst-pre.gst-mal { box-shadow: inset 0 0 0 1.5px var(--rojo); border-radius: 6px; }
.rmr-cond-lista li.gst-op-nuevo b { color: var(--marca-osc); }
.rmr-cond-lista li.gst-op-nuevo em { margin-right: 8px; padding: 2px 6px; border-radius: 4px; background: var(--marca-suave); font: 800 .62rem/1 var(--rmv-ui); font-style: normal; letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.rmr-cond-lista li span.gst-op-debe { color: var(--ambar); }

/* lo que se le debe: cada cosa con su casilla; lo marcado suma el monto */
.gst-deudas { display: grid; max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.gst-deuda { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; }
.gst-deuda + .gst-deuda { border-top: 1px solid var(--linea); }
.gst-deuda-todas { position: sticky; top: -4px; z-index: 1; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: -4px; padding: 8px 42px 8px 12px; border-bottom: 1px solid var(--linea); background: var(--sup-1); cursor: pointer; }
.gst-deuda-todas input { width: 16px; height: 16px; margin: 0; accent-color: var(--marca-osc); }
.gst-deuda-todas span { font: 800 .62rem/1 var(--rmv-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.gst-deuda-todas b { font: 700 .8rem/1 var(--rmv-num); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.gst-deuda > label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 4px 7px 12px; cursor: pointer; }
.gst-deuda > label:hover { background: var(--sup-2); }
.gst-deuda input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--marca-osc); }
.gst-deuda > label > span { min-width: 0; font: 600 .82rem/1.25 var(--rmv-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gst-deuda > label small { display: block; font: 500 .7rem/1.3 var(--rmv-mono); color: var(--gris); }
.gst-deuda.gst-venc > label small { color: var(--rojo); }
.gst-deuda > label > b { font: 700 .86rem/1 var(--rmv-num); font-variant-numeric: tabular-nums; }
.gst-deuda-x { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--gris); opacity: .55; transition: opacity .14s, background .14s, color .14s; }
.gst-deuda-x svg { width: 14px; height: 14px; }
.gst-deuda:hover .gst-deuda-x, .gst-deuda-x:focus-visible, .gst-deuda-x[aria-expanded="true"] { opacity: 1; }
.gst-deuda-x:hover { background: var(--rojo-suave); color: var(--rojo); }
.gst-quitar { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 10px 9px 40px; }
.gst-quitar .gst-pre { flex: 1 1 8rem; min-width: 0; min-height: 32px; border: 1px solid var(--linea-2); border-radius: 6px; }
.gst-quitar .gst-pre input { width: 100%; height: 30px; font-size: .82rem; }
.gst-quitar-t { flex: 1 1 auto; font: 600 .78rem/1.2 var(--rmv-ui); color: var(--texto-2); }
.rm-mini.gst-mini-rojo { height: 1.75rem; background: var(--rojo); border-color: var(--rojo); }
.rm-mini.gst-mini-rojo:hover { color: #FFFFFF; background: color-mix(in srgb, var(--rojo) 85%, var(--tinta)); }

/* la fecha y la hora (el selector de la casa) y el vencimiento, vestidos como un renglón de la hoja */
.gst-ficha .fh, .gst-fv { display: grid; gap: 0; min-width: 0; }
.gst-ficha .fh-boton { height: 46px; gap: 10px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; }
.gst-ficha .fh-boton:hover { border: 0; }
.gst-ficha .fh-boton[aria-expanded="true"], .gst-ficha .fh-boton:focus-visible { outline: none; border: 0; }
.gst-ficha .fh-boton svg { width: 17px; height: 17px; }
.gst-ficha .fh-boton span { flex: none; font: 600 .95rem/1 var(--rmv-mono); color: var(--tinta); }
.gst-ficha .fh-boton b { font: 500 .95rem/1 var(--rmv-mono); color: var(--texto-2); }
.gst-ficha .fh-panel { margin: 0 10px 10px; }

/* los dos archivos: el comprobante y la constancia (adjuntar, pegar o soltar) */
.gst-adj { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 10px 10px; padding: 8px 10px; min-height: 52px; border: 1.5px dashed var(--linea-2); border-radius: 7px; background: var(--sup-2); transition: border-color .14s, background .14s; }
.gst-adj.gst-encima { border-color: var(--marca); background: color-mix(in srgb, var(--marca-suave) 60%, var(--sup-1)); }
.gst-slot { display: contents; }
.gst-slot.gst-lleno { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 40px; padding: 0 3px 0 4px; border-radius: 7px; background: var(--sup-1); box-shadow: inset 0 0 0 1.5px var(--verde-texto); }
.gst-slot-mini { flex: none; width: 26px; height: 32px; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: var(--sup-3); box-shadow: 0 0 0 1px var(--linea-2); transform: rotate(-2deg); }
.gst-slot-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gst-slot-mini i { display: grid; place-items: center; width: 100%; height: 100%; font: 800 .5rem/1 var(--rmv-ui); font-style: normal; letter-spacing: .04em; color: var(--rojo); background: var(--sup-1); }
.gst-slot-dato { display: grid; gap: 3px; min-width: 0; max-width: 11rem; }
.gst-slot-dato b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .76rem/1.1 var(--rmv-ui); color: var(--tinta); }
.gst-slot-dato small { font: 500 .62rem/1 var(--rmv-mono); letter-spacing: .02em; text-transform: uppercase; color: var(--verde-texto); }
.gst-slot-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--gris); }
.gst-slot-x svg { width: 14px; height: 14px; }
.gst-slot-x:hover { background: var(--rojo-suave); color: var(--rojo); }

/* un movimiento: su hoja, sus archivos y «Anular» */
.gst-v { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 42px; padding: 9px 12px; font: 600 .88rem/1.35 var(--rmv-ui); color: var(--tinta); }
.gst-v-mono { font: 500 .82rem/1.2 var(--rmv-mono); letter-spacing: .02em; color: var(--texto-2); }
.gst-v-monto { font: 800 1.25rem/1 var(--rmv-num); font-variant-numeric: tabular-nums; }
.gst-v-partes { display: grid; gap: 3px; width: 100%; margin: 0; padding: 0; list-style: none; }
.gst-v-partes li { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; }
.gst-v-partes li b { font-family: var(--rmv-num); font-variant-numeric: tabular-nums; }
.gst-v-archivos > .rmv-et { align-items: flex-start; padding-top: 18px; }
body.panel a.gst-adj-link { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 7px; background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2); color: var(--tinta); transition: box-shadow .14s; }
body.panel a.gst-adj-link:hover { box-shadow: inset 0 0 0 1px var(--texto-2); }
.gst-adj-link:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.gst-adj-mini { display: grid; place-items: center; flex: none; width: 30px; height: 38px; border-radius: 3px; overflow: hidden; background: var(--sup-3); box-shadow: 0 0 0 1px var(--linea-2); color: var(--texto-2); }
.gst-adj-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gst-adj-mini i { font: 800 .52rem/1 var(--rmv-ui); font-style: normal; color: var(--rojo); }
.gst-adj-mini svg { width: 15px; height: 15px; }
.gst-adj-link > span:last-child { display: grid; gap: 3px; min-width: 0; }
.gst-adj-link b { font: 700 .78rem/1 var(--rmv-ui); }
.gst-adj-link small { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .66rem/1.1 var(--rmv-mono); color: var(--gris); }
.gst-es-anulado .rmv-cuerpo > .rmv-col { opacity: .6; }
.rmv-gran-sello.gst-sello-anulado { border-color: var(--rojo); color: var(--rojo); }
.gst-motivo { display: flex; align-items: center; gap: 10px; flex: 1 1 14rem; min-width: 0; height: 42px; padding: 0 12px; border-radius: 8px; background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--linea-2); }
.gst-motivo:focus-within { box-shadow: inset 0 0 0 1.5px var(--rojo); }
.gst-motivo.gst-mal { box-shadow: inset 0 0 0 2px var(--rojo); }
.gst-motivo label { flex: none; font: 800 .6rem/1 var(--rmv-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.rmv .gst-motivo input:focus-visible { outline: none; }
.gst-motivo input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tinta); font: 600 .88rem/1 var(--rmv-ui); }
.rmv-bt-sec.gst-bt-anular:hover { box-shadow: inset 0 0 0 1px var(--rojo); color: var(--rojo); }
.rmv .rmv-bt-pri.gst-bt-rojo { background: var(--rojo); }
.rmv .rmv-bt-pri.gst-bt-rojo:hover { background: color-mix(in srgb, var(--rojo) 84%, var(--tinta)); }
@media (max-width: 600px) {
  .gst-hoja-media { width: 100%; }
  .gst-adj .rmv-kbd { display: none; }
  .gst-ficha .fh-boton span, .gst-ficha .fh-boton b { font-size: .86rem; }
  /* sin número que mostrar, el folio sobra: el rótulo de arriba ya dice qué es */
  .gst-ficha .rmv-folio.gst-folio-solo { display: none; }
  .gst-ficha .rmr-cond-lista li { flex-direction: column; align-items: flex-start; gap: 3px; }
  .gst-ficha .rmr-cond-lista li b { max-width: 100%; }
  .gst-quitar { padding-left: 12px; }
  .gst-motivo { flex: 1 0 100%; }
}

/* ---------- la hoja de proveedores ---------- */
.gst-pv { display: grid; gap: .65rem; min-width: 0; }
.gst-pv .gst-cab { grid-column: auto; }
.gst-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.gst-buscar { position: relative; flex: 0 1 17rem; min-width: 12rem; margin-right: .35rem; }
.gst-buscar svg { position: absolute; left: .6rem; top: 50%; width: 15px; height: 15px; color: var(--gris); transform: translateY(-50%); pointer-events: none; }
.gst-buscar input { width: 100%; height: 1.95rem; padding: 0 .7rem 0 2rem; border: 1px solid var(--linea-2); border-radius: 7px; background: var(--sup-1); color: var(--tinta); font: inherit; font-size: .82rem; box-sizing: border-box; }
.gst-buscar input:focus-visible { outline: 2px solid var(--marca); outline-offset: 0; border-color: var(--marca); }
.gst-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; flex: 1 1 24rem; min-width: 0; }
.gst-chips .rm-mini { height: 1.55rem; }
.gst-chips .rm-mini b { margin-left: .35rem; font-weight: 600; color: var(--gris); }
.gst-chips .rm-mini.rm-mini-fuerte b { color: color-mix(in srgb, #FFFFFF 75%, transparent); }
.gst-pv .hoja-alta { max-height: calc(100vh - 12rem); }
.gst-pv .hoja tbody tr { cursor: pointer; }
.gst-pv .hoja tbody tr:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.gst-pv .hoja td b { font-weight: 700; }
.gst-pv .hoja td:nth-child(3) { max-width: 9rem; }
.gst-pv .hoja td:nth-child(4) { max-width: 10rem; }
.gst-pv .hoja td:nth-child(6) { max-width: 7rem; }
.gst-pv .hoja tr.gst-baja td { color: var(--gris); }
.gst-pv .hoja tr.gst-baja td b { font-weight: 600; }
.gst-pv .hoja tr.gst-nuevo td { animation: gst-brilla 2s ease-out; }
.gst-pv .gst-vacio { padding: 1rem; }
@media (max-width: 640px) {
  .gst-buscar { flex: 1 0 100%; margin-right: 0; }
  /* en el teléfono los sectores van en una sola tira que se desliza */
  .gst-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .gst-chips .rm-mini { flex: none; }
}

/* ---------- Proveedores, el panel de la libreta (03/10/2026) ----------
   La hoja de arriba en la Caja (.gst-pv .prv): el celular va tercero, junto al
   documento; Activos · De baja delante de los sectores. En la ficha, debajo de
   los datos, el historial y —a quien los ve— los montos, una línea por hecho */
.prv .hoja td:nth-child(3) { max-width: none; }
.prv .hoja td:nth-child(4) { max-width: 9rem; }
.prv .hoja td:nth-child(5) { max-width: 10rem; }
.prv .hoja td:nth-child(6) { max-width: 7rem; }
.gst-chips.prv-estado { flex: 0 0 auto; padding-right: .5rem; border-right: 1px solid var(--linea); }
.prv-ficha .prv-cerrado { color: var(--texto-2); cursor: not-allowed; }
.prv-ficha [data-titulo] svg { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--ambar); }
.prv-mas { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 12px 22px; min-width: 0; }
.prv-mas[hidden], .prv-libro[hidden] { display: none; }
.prv-libro { min-width: 0; }
.prv-lineas { margin: 0; padding: 0; list-style: none; max-height: 11.5rem; overflow-y: auto; border-top: 1px solid var(--linea); }
.prv-lineas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 2px; border-bottom: 1px solid var(--linea); font-size: .78rem; line-height: 1.35; color: var(--texto-2); }
.prv-lineas time { flex: none; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--gris); }
.prv-lineas li > b { flex: none; font-weight: 700; color: var(--tinta); }
.prv-lineas li > span { flex: 1 1 12rem; min-width: 0; }
.prv-lineas em { font-style: normal; font-weight: 700; color: var(--marca-osc); }
.prv-lineas small { color: var(--gris); }
.prv-lineas s { color: var(--gris); }
.prv-lineas i { font-style: normal; color: var(--tinta); }
.prv-lineas .prv-baja em { color: var(--rojo); }
.prv-lineas .prv-reactiva em, .prv-lineas .prv-alta em { color: var(--verde-texto); }
.prv-lineas .prv-monto { float: right; margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--tinta); }
.prv-lineas .prv-egreso .prv-monto::before { content: '−'; }
.prv-lineas .prv-anulado span { text-decoration: line-through; color: var(--gris); }
.prv-lineas .prv-anulado .prv-monto { color: var(--gris); }
@media (max-width: 640px) {
  .gst-chips.prv-estado { border-right: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gst-animar > li, .gst-nuevo .gst-fila, .gst-aviso.rmv-anim, .gst-pv .hoja tr.gst-nuevo td { animation: none; }
  .gst-bt, .gst-fila, .gst-ir { transition: none; }
}


/* ============================================================
   LOS MENSAJES DEL BUZÓN (30/09/2026) — el «apartecito» que pidió Vladimir:
   «vas nombrando para tal persona, con arroba… una comunicación interna,
   básico nomás». Las conversaciones a la izquierda y el hilo a la derecha; en el
   teléfono, una cosa a la vez. Usa las piezas del Buzón (avatar, rol, adjuntos,
   visor, aviso). Piezas: panel/buzon y panel/partes/buzon-mensajes-js.
   ============================================================ */
.bzn[hidden] { display: none !important; }

/* ---------- Tareas · Mensajes, junto al título ---------- */
.bzn-modos { display: inline-flex; align-items: stretch; flex: none; gap: 2px; padding: 2px; border-radius: 9px; background: var(--sup-3); }
.bzn-modos > button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent;
  font: 800 13px/1 var(--bzn-ui); letter-spacing: -.005em; color: var(--texto-2); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s;
}
.bzn-modos > button:hover { color: var(--tinta); }
.bzn-modos > button[aria-pressed="true"] { background: var(--sup-1); color: var(--tinta); box-shadow: 0 0 0 1px var(--linea-2), 0 1px 2px color-mix(in srgb, var(--tinta) 12%, transparent); }
.bzn-modo-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--marca-osc); color: #FFFFFF;
  font: 800 10.5px/18px var(--bzn-num); font-stretch: 88%; font-variant-numeric: tabular-nums; text-align: center;
}

/* ---------- el marco: la lista y el hilo ---------- */
.bzm-cuerpo {
  flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
  border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--sup-1);
}
.bzm-lista { min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--linea); background: var(--sup-1); scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent; }
.bzm-lista ul { margin: 0; padding: 4px; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.bzm-lista .bzn-nada { margin: 28px 12px; }

/* una conversación: las caras, los nombres, la hora, el último mensaje y los no leídos */
.bzm-conv {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 7px; background: transparent; text-align: left; transition: background .15s;
}
.bzm-conv:hover { background: var(--sup-2); }
.bzm-conv.bzm-activa { background: var(--sup-3); box-shadow: inset 3px 0 0 var(--tinta); }
.bzm .bzn-av.bzm-av { width: 38px; height: 38px; font-size: 13px; }
.bzm-caras { position: relative; display: block; flex: none; width: 38px; height: 38px; }
.bzm .bzm-caras .bzn-av { position: absolute; width: 26px; height: 26px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--sup-1); }
.bzm .bzm-caras .bzn-av:nth-child(1) { left: 0; top: 0; }
.bzm .bzm-caras .bzn-av:nth-child(2) { right: 0; bottom: 0; }
.bzm .bzm-caras-3 .bzn-av { width: 22px; height: 22px; font-size: 8.5px; }
.bzm .bzm-caras-3 .bzn-av:nth-child(2) { top: 2px; bottom: auto; }
.bzm .bzm-caras-3 .bzn-av:nth-child(3) { left: 8px; bottom: 0; }
.bzm .bzm-mas { font-weight: 800; letter-spacing: -.02em; }
.bzm-conv-c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bzm-conv-l1, .bzm-conv-l2 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bzm-conv-l1 b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.bzm-conv-l1 time { flex: none; font: 500 11px/1 var(--bzn-mono); color: var(--gris); }
.bzm-conv-l2 { align-items: center; }
.bzm-conv-l2 > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--texto-2); }
.bzm-conv-l2 svg { width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; }
.bzm-n {
  flex: none; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--marca-osc); color: #FFFFFF;
  font: 800 10.5px/19px var(--bzn-num); font-style: normal; font-stretch: 88%; font-variant-numeric: tabular-nums; text-align: center;
}
.bzm-conv.bzm-nuevos .bzm-conv-l1 b { font-weight: 800; }
.bzm-conv.bzm-nuevos .bzm-conv-l1 time { color: var(--marca-osc); font-weight: 700; }
.bzm-conv.bzm-nuevos .bzm-conv-l2 > span { color: var(--tinta); font-weight: 600; }

/* ---------- el hilo ---------- */
.bzm-hilo { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bzn-bandeja); }
.bzm-vacio { flex: 1 1 auto; display: grid; place-items: center; color: color-mix(in srgb, var(--tinta) 14%, transparent); }
.bzm-vacio svg { width: 64px; height: 64px; }
.bzm-hilo-cab { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--linea); background: var(--sup-1); }
.bzm-quien { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bzm-quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 800; }
.bzm-quien > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bzm-quien small { font-size: 11.5px; font-weight: 600; color: var(--gris); white-space: nowrap; }
.bzm-volver { display: none; place-items: center; flex: none; width: 34px; height: 34px; margin-left: -6px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--tinta); }
.bzm-volver svg { width: 20px; height: 20px; }
.bzm-volver:hover { background: var(--sup-2); }

/* «+ Nuevo»: para quién, como fichas */
.bzm-cab-nuevo .bzn-rot { flex: none; }
.bzm-para {
  flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; min-height: 36px; padding: 3px 6px;
  border: 1px solid var(--linea-2); border-radius: 8px; background: var(--sup-1); cursor: text;
}
.bzm-para:focus-within { outline: 2px solid var(--tinta); outline-offset: -1px; border-color: transparent; }
.bzm-chips { display: contents; }
.bzm .bzm-para input { flex: 1 1 8rem; min-width: 6rem; height: 28px; padding: 0 2px; border: 0; outline: 0; background: transparent; font: 600 13.5px/1 var(--bzn-ui); color: var(--tinta); }
.bzm-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 2px 0 3px; border-radius: 999px;
  background: var(--bzn-rf); color: var(--bzn-rt); font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.bzm-chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.bzm-chip button:hover { background: color-mix(in srgb, var(--bzn-rt) 16%, transparent); }
.bzm-chip button svg { width: 12px; height: 12px; }
.bzm-chip.bzm-chip-mas { padding: 0 9px 0 7px; }

/* los mensajes: el día, y cada uno en su globo (los míos a la derecha) */
.bzm-ms {
  flex: 1 1 auto; min-height: 0; margin: 0; padding: 14px 16px 10px; list-style: none; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent;
}
.bzm-dia { align-self: center; margin: 10px 0 6px; }
.bzm-dia span {
  display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--sup-1); box-shadow: 0 0 0 1px var(--linea);
  font: 700 10.5px/1.3 var(--bzn-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2);
}
.bzm-m { display: grid; grid-template-columns: 24px minmax(0, auto); justify-content: start; align-items: end; gap: 8px; max-width: min(40rem, 86%); margin-top: 8px; }
.bzm-m.bzm-seguido { margin-top: 0; }
.bzm-m.bzm-mio { align-self: flex-end; grid-template-columns: minmax(0, auto); justify-content: end; }
.bzm-m-av { width: 24px; }
.bzm-globo {
  position: relative; min-width: 0; padding: 7px 10px 5px; border-radius: 4px 12px 12px 12px; background: var(--sup-1);
  box-shadow: 0 0 0 1px var(--linea), 0 1px 1px color-mix(in srgb, var(--tinta) 6%, transparent);
}
.bzm-seguido .bzm-globo, .bzm-mio.bzm-seguido .bzm-globo { border-radius: 12px; }
.bzm-mio .bzm-globo { border-radius: 12px 4px 12px 12px; background: color-mix(in srgb, var(--marca) 14%, var(--sup-1)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--marca) 26%, var(--linea)); }
.bzm-m-de { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 800; color: var(--bzn-rt); }
.bzm-globo p { margin: 0; font-size: 13.5px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.bzm-globo time { display: block; margin-top: 2px; text-align: right; font: 500 10px/1.2 var(--bzn-mono); color: var(--gris); }
.bzm-globo .bzn-adjs { margin-top: 4px; min-width: min(15rem, 56vw); }
.bzm-arroba { font-weight: 800; color: var(--marca-osc); }
.bzm-cargando { align-self: center; width: 22px; height: 22px; margin: auto; border: 2px solid var(--linea-2); border-top-color: var(--tinta); border-radius: 50%; animation: bzm-gira .8s linear infinite; }
@keyframes bzm-gira { to { transform: rotate(360deg); } }

/* escribir: el clip, el texto (la @ abre la lista del equipo) y enviar */
.bzm-escribir { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid var(--linea); background: var(--sup-1); }
.bzm-fila { display: flex; align-items: flex-end; gap: 6px; }
.bzm .bzm-texto {
  flex: 1 1 auto; min-width: 0; height: 38px; max-height: 160px; padding: 8px 14px; border: 1px solid var(--linea-2); border-radius: 19px;
  background: var(--sup-2); resize: none; font: 500 14px/1.4 var(--bzn-ui); color: var(--tinta);
}
.bzm .bzm-texto:focus { outline: 2px solid var(--tinta); outline-offset: -1px; border-color: transparent; background: var(--sup-1); }
.bzm-bt { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--texto-2); transition: background .15s, color .15s; }
.bzm-bt svg { width: 20px; height: 20px; }
.bzm-bt:hover { background: var(--sup-2); color: var(--tinta); }
.bzm-bt.bzm-enviar { background: var(--marca-osc); color: #FFFFFF; }
.bzm-bt.bzm-enviar:hover { background: color-mix(in srgb, var(--marca-osc) 85%, var(--tinta)); color: #FFFFFF; }
.bzm-bt.bzm-enviar:disabled { opacity: .5; cursor: progress; }
.bzm-suma { display: flex; flex-wrap: wrap; gap: 4px; }
.bzm-pend:empty { display: none; }
.bzm-hilo.bzm-enviando .bzm-texto { opacity: .6; }
.bzm-hilo.bzm-soltando::after {
  content: ""; position: absolute; inset: 8px; z-index: 6; border: 2px dashed var(--tinta); border-radius: 10px;
  background: color-mix(in srgb, var(--sup-1) 55%, transparent); pointer-events: none;
}

/* la lista del equipo: para «Para» y para la @ */
.bzm-ops {
  position: absolute; left: 12px; z-index: 7; width: min(22rem, calc(100% - 24px)); max-height: min(18rem, 50vh); margin: 0; padding: 4px;
  list-style: none; overflow-y: auto; border-radius: 10px; background: var(--sup-1); box-shadow: var(--bzn-sombra-menu);
}
.bzm-ops[data-de="para"] { left: 58px; width: min(22rem, calc(100% - 70px)); }
.bzm-op { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.bzm-op:hover, .bzm-op[aria-selected="true"] { background: var(--sup-3); }
.bzm-op-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bzm-op-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bzm-op-n small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; font-weight: 600; color: var(--gris); }
.bzm-op-nada { padding: 8px 10px; color: var(--gris); }

/* angosto: una cosa a la vez */
@container bzn (max-width: 760px) {
  .bzm-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .bzm-cuerpo[data-lado="lista"] .bzm-hilo, .bzm-cuerpo[data-lado="hilo"] .bzm-lista { display: none; }
  .bzm-lista { border-right: 0; }
  .bzm-volver { display: grid; }
  .bzm-ms { padding: 10px 10px 8px; }
  .bzm-m { max-width: 92%; }
  .bzm-hilo-cab { padding: 6px 10px; }
  .bzm-escribir { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .bzm-ops[data-de="para"] { left: 12px; width: calc(100% - 24px); }
}
@media (max-width: 900px) {
  .bzn.bzm { height: calc(100dvh - 49px - 1.4rem); min-height: 24rem; }
}

/* ============================================================
   UBICAR UN NÚMERO (30/09/2026): «sale algo, como el código, y lo
   ubico». Un campo corto en la cabecera (la Bóveda, Gastos, Control
   de cajas), del alto de los mandos de al lado. El número va en mono;
   si no existe, el mismo campo lo dice en rojo.
   ============================================================ */
.bn {
  position: relative; display: inline-flex; align-items: center; flex: none;
  width: 11.5rem; height: 2rem; border: 1px solid var(--linea); border-radius: 6px; background: var(--sup-1);
}
.bn:focus-within { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-suave); }
.bn-ir {
  display: grid; place-items: center; flex: none; width: 1.9rem; height: 100%; padding: 0;
  border: 0; background: none; color: var(--gris); cursor: pointer;
}
.bn-ir:hover, .bn:focus-within .bn-ir { color: var(--marca-osc); }
.bn-ir:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; border-radius: 5px; }
.bn-ir .ic { width: 15px; height: 15px; }
.bn input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 .55rem 0 0; border: 0; background: none; outline: none; box-shadow: none;
  font-family: var(--f-mono); font-size: .78rem; font-weight: 500; letter-spacing: .01em; color: var(--tinta); text-transform: uppercase;
}
.bn input::placeholder { color: var(--gris); opacity: .7; text-transform: none; }
.bn input::-webkit-search-cancel-button { display: none; }
.bn-dice {
  flex: none; margin-right: .3rem; padding: .1rem .38rem; border-radius: 4px;
  font-size: .68rem; font-weight: 700; white-space: nowrap; color: var(--rojo); background: var(--rojo-suave);
}
.bn-dice[hidden] { display: none; }
.bn.bn-no { border-color: var(--rojo); }
.bn.bn-no:focus-within { box-shadow: 0 0 0 2px var(--rojo-suave); }
.bn.bn-no input { color: var(--rojo); }
.gst-acc .bn { margin-right: .15rem; }
@media (max-width: 640px) {
  .rm-cab .bn { flex: 1 1 100%; width: auto; }
  .gst-acc .bn { flex: 1 1 auto; width: auto; }
}

/* ============================================================
   LA REMESA PARA IMPRIMIR Y LA BÓVEDA SIN ACTA (01/10/2026)
   ============================================================ */
/* la impresora de una remesa en la bandeja de la Bóveda, junto a «Recibir» */
.bvl-r-acc { gap: .45em; }
.bvl-imp { display: inline-grid; flex: none; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 6px; color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linea-2); }
.bvl-imp svg { width: 14px; height: 14px; }
.bvl-imp:hover { color: var(--marca-osc); box-shadow: inset 0 0 0 1px var(--marca); }
.bvl-imp:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* sin acta no se recibe: el botón apagado y, en la cabecera de la bandeja, por qué */
.bvl-recibir:disabled { background: color-mix(in srgb, var(--tinta) 7%, var(--sup-1)); color: color-mix(in srgb, var(--tinta) 38%, var(--sup-1)); box-shadow: inset 0 0 0 1px var(--linea-2); cursor: not-allowed; }
.bvl-b-sin { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .8em; font-weight: 700; color: var(--rojo); }
/* la cámara sin configuración inicial: un sello en vez de un S/ 0.00 mudo */
.bv-efectivo .rm-cifra b.bv-cero { color: var(--rm-claro); }
.bv-sin-acta { align-self: flex-start; display: inline-flex; align-items: center; height: 1.45rem; padding: 0 .55rem; border: 1px solid color-mix(in srgb, var(--ambar-2) 70%, transparent);
  border-radius: 6px; font-size: .68rem; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ambar-2); }
/* la pantalla de una caja en la Bóveda: la impresora de la remesa junto a su acción */
.bcj-as-acc { display: flex; align-items: center; gap: .4rem; }
.bcj-x-acc .bcj-imp { margin-left: auto; }
/* sin el acta de la Bóveda, «Recibir» apagado dice por qué: en la cabecera de Remesas y en el talón */
.bcj-lb-cab > .bcj-lc-sin { grid-column: 6; justify-self: end; min-width: 0; max-width: calc(100% - 7rem); overflow: hidden; text-overflow: ellipsis; padding-right: .75em;
  letter-spacing: .02em; text-transform: none; font-size: .75rem; font-weight: 700; color: var(--rojo); }
.bcj-x-acc:has(> .bcj-sin-acta) { flex-wrap: wrap; }
.bcj-sin-acta { flex: 1 1 100%; order: 9; font-size: .75rem; font-weight: 700; color: var(--rojo); text-align: right; }
@media (max-width: 900px) {
  .bcj-lb-cab:has(> .bcj-lc-sin) > .bcj-lc-rem { display: none; }
  .bcj-lb-cab > .bcj-lc-sin { max-width: none; white-space: normal; line-height: 1.15; text-align: right; }
}
/* las remesas de antes del arqueo, con su impresora */
.bcj-antes-f.bcj-antes-r { grid-template-columns: 8em minmax(0, 1fr) auto 1.6em; }
.bcj-antes-f > b.bcj-antes-m { color: var(--tinta); }

/* ===================================================================
   EL HISTORIAL DE UNA CUENTA DE LA BÓVEDA (01/10/2026): «la línea con su hoja».
   Al tocar un banco, la línea del saldo de cada día y la hoja de sus movimientos
   (panel/partes/boveda-historial-js; datos: Boveda::historiales). Lo que entra con
   un verde muy suave y lo que sale con un rojo muy suave («algo sutil, que se note
   poco»). Y el alto del libro del efectivo, que vive dentro de .bv-hist.
   =================================================================== */
/* ---------- el lugar: debajo de las tarjetas ----------
   El libro del efectivo vive dentro de .bv-hist y `.bv-izq > .bvl-envase` (más arriba) ya no lo alcanza:
   aquí recupera su alto de siempre. El historial de una cuenta mide lo que trae y, si no cabe, su hoja
   se desplaza por dentro (la página no). */
.bv-izq > .bv-hist:not([hidden]) { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bv-izq > .bv-hist > .bvl-envase { height: max(30rem, calc(100vh - 7rem)); }
@media (min-width: 1500px) {
  .bv-izq > .bv-hist[data-hist="efectivo"]:not([hidden]) { flex: 1 1 0; }
  .bv-izq > .bv-hist > .bvl-envase { flex: 1 1 0; height: auto; min-height: 0; }
  .bv-izq > .bv-hist-cuenta:not([hidden]) { flex: 0 1 auto; }
}

.bvh {
  --bvh-c: color-mix(in srgb, var(--m, var(--marca)) 82%, var(--tinta));
  --bvh-num: "Archivo", "Manrope", system-ui, sans-serif;
  --bvh-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* lo que entra y lo que sale: un tinte suave (del 5 % al 8 % el 02/10/2026: «un poco más saturados, para diferenciar») */
  --bvh-en: color-mix(in srgb, var(--verde) 8%, var(--sup-1));
  --bvh-sa: color-mix(in srgb, var(--rojo) 8%, var(--sup-1));
  --bvh-en-2: color-mix(in srgb, var(--verde) 13%, var(--sup-1));
  --bvh-sa-2: color-mix(in srgb, var(--rojo) 13%, var(--sup-1));
  flex: 0 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--sup-1); border: 1px solid var(--linea); border-top: 2px solid var(--m, var(--linea-2)); border-radius: 8px; overflow: hidden;
  container: bvh / inline-size; color: var(--tinta); font-size: .8rem; line-height: 1.3;
}
.bvh button { font: inherit; color: inherit; }
.bvh-n { font-family: var(--bvh-num); font-stretch: 88%; font-variant-numeric: tabular-nums; letter-spacing: .005em; }

/* ---------- LA CUENTA: el nombre (o BCP · Tesorería · Dólares) y Transferir ---------- */
.bvh-cab { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem 1.1rem; padding: .5rem .9rem .35rem; }
.bvh-tit { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta); }
.bvh-chips { display: inline-flex; gap: .25rem; }
.bvh .bvh-chip {
  padding: .22rem .6rem; border: 1px solid transparent; border-radius: 5px; background: none;
  font-size: .72rem; font-weight: 700; color: var(--texto-2); white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.bvh .bvh-chip:hover { border-color: var(--linea); background: var(--sup-2); }
.bvh .bvh-chip:active { transform: translateY(1px); }
.bvh .bvh-chip:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.bvh .bvh-chip[aria-pressed="true"] { border-color: var(--tinta); background: var(--sup-1); color: var(--tinta); }
.bvh-clave { display: inline-flex; align-items: center; gap: .4rem; font-size: .66rem; font-weight: 600; color: var(--gris); white-space: nowrap; }
.bvh-k-pago { display: inline-block; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--texto-2); }

/* ---------- LA LÍNEA ---------- */
.bvh-graf { position: relative; flex: none; height: 10rem; margin: 0 .35rem .15rem; touch-action: pan-y; cursor: crosshair; }
.bvh-graf:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }
.bvh-lienzo { position: absolute; inset: 0; }
.bvh-lienzo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bvh-rej { stroke: var(--linea); stroke-width: 1; shape-rendering: crispEdges; }
.bvh-rej.bvh-base { stroke: var(--linea-2); }
.bvh-marca-d { stroke: var(--linea-2); stroke-width: 1; shape-rendering: crispEdges; }
.bvh-ini { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 2 3; opacity: .75; shape-rendering: crispEdges; }
.bvh-trazo { fill: none; stroke: var(--bvh-c); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.bvh-guia { stroke: var(--linea-2); stroke-width: 1; shape-rendering: crispEdges; }
.bvh-halo { fill: var(--bvh-c); opacity: .14; }
.bvh-pt { fill: var(--bvh-c); stroke: var(--sup-1); stroke-width: 1.5; }
.bvh-pt.bvh-pt-q { fill: color-mix(in srgb, var(--bvh-c) 45%, var(--sup-1)); stroke: none; }
.bvh-pt.bvh-pt-ini { fill: var(--sup-1); stroke: var(--bvh-c); stroke-width: 1.5; }
/* un día con pagos: el punto hueco, en gris oscuro (sin rojo) */
.bvh-pt.bvh-pt-pago { fill: var(--sup-1); stroke: var(--texto-2); stroke-width: 1.75; }
.bvh-et { font-family: var(--bvh-num); font-stretch: 88%; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; fill: var(--texto-2); }
.bvh-et.bvh-et-fin { font-weight: 800; fill: var(--tinta); }
.bvh-et-s { font-family: "Manrope", system-ui, sans-serif; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; fill: var(--gris); }
.bvh-eje { font-family: var(--bvh-num); font-stretch: 88%; font-size: 9.5px; font-weight: 500; font-variant-numeric: tabular-nums; fill: color-mix(in srgb, var(--gris) 82%, var(--sup-1)); }
.bvh-fx { font-family: var(--bvh-num); font-stretch: 88%; font-size: 9.5px; font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--gris); }
.bvh-fx.bvh-fx-on { font-weight: 800; fill: var(--tinta); }
/* el día, al pasar o al tocar */
.bvh-ficha {
  position: absolute; z-index: 2; top: 0; left: 0; display: flex; align-items: baseline; gap: .7rem;
  padding: .28rem .55rem; background: var(--sup-1); border: 1px solid var(--linea-2); border-radius: 5px; box-shadow: var(--sombra-2);
  font-size: .72rem; white-space: nowrap; pointer-events: none;
}
.bvh-ficha[hidden] { display: none; }
.bvh-ficha > b { font-weight: 800; color: var(--tinta); }
.bvh-ficha > span { color: var(--gris); font-weight: 600; }
.bvh-ficha > span i { margin-left: .3em; font-style: normal; font-weight: 700; color: var(--texto-2); }
.bvh-ficha > span.bvh-f-qd i { font-weight: 800; color: var(--tinta); }

/* ---------- LA HOJA: una fila por movimiento ---------- */
.hoja-marco.bvh-marco {
  flex: 0 1 auto; min-height: 0; border: 0; border-top: 1px solid var(--linea); border-radius: 0;
  overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea-2) transparent;
}
.bvh-hoja { font-size: .76rem; }
.bvh-hoja th { padding: .3rem .6rem; }
.bvh-hoja td { padding: .26rem .6rem; color: var(--texto-2); }
.bvh-hoja th.bvh-c-f { width: 3.4rem; }
.bvh-hoja th.bvh-c-h { width: 3rem; }
.bvh-hoja th.bvh-c-mv { width: 8.6rem; }
.bvh-hoja th.bvh-c-m { width: 6.8rem; }
.bvh-hoja th.bvh-c-sd { width: 8.8rem; }
.bvh-hoja td.bvh-dt { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bvh-hoja td.bvh-mv { color: var(--tinta); font-weight: 600; }
.bvh-hoja td.bvh-hr, .bvh-hoja td.bvh-fe { color: var(--gris); }
.bvh-hoja td.num { color: var(--texto-2); font-weight: 600; }
.bvh-hoja td.bvh-sd { color: var(--tinta); font-weight: 700; }
.bvh-serie { margin-right: .5em; font-family: var(--bvh-mono); font-size: .92em; color: var(--gris); }
.bvh-sig { font-family: var(--bvh-mono); font-size: .94em; font-weight: 500; }
/* plata que entra, plata que sale: el tinte de la fila, nada más */
.bvh-hoja tbody tr.bvh-en > td { background: var(--bvh-en); }
.bvh-hoja tbody tr.bvh-sa > td { background: var(--bvh-sa); }
.bvh-hoja tbody tr.bvh-en:hover > td { background: var(--bvh-en-2); }
.bvh-hoja tbody tr.bvh-sa:hover > td { background: var(--bvh-sa-2); }
/* la fila del día: «Mar 30/09 … Quedó» */
.bvh-hoja tbody tr.bvh-dia > td { background: var(--sup-2); border-top: 1px solid var(--linea); padding-top: .32rem; padding-bottom: .32rem; color: var(--gris); }
.bvh-hoja tbody tr.bvh-dia:hover > td { background: color-mix(in srgb, var(--sup-3) 60%, var(--sup-2)); }
.bvh-hoja tbody tr.bvh-dia:first-child > td { border-top: 0; }
.bvh-dia-n { font-weight: 800; color: var(--tinta); }
.bvh-dia-n em { margin-left: .5em; font-style: normal; font-size: .82em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--marca-osc); }
.bvh-dia-r { margin-left: .7rem; font-size: .92em; font-weight: 500; color: var(--gris); }
.bvh-hoja tr.bvh-dia td.num { font-weight: 600; color: var(--gris); }
.bvh-hoja tr.bvh-dia td.bvh-sd { color: var(--tinta); font-weight: 800; }
.bvh-qd-r { margin-right: .5em; font-family: "Manrope", system-ui, sans-serif; font-size: .74em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
/* el día elegido en la línea: su filo y un tinte un punto más */
.bvh-hoja tbody tr.bvh-on > td:first-child { box-shadow: inset 3px 0 0 var(--bvh-c); }
.bvh-hoja tbody tr.bvh-dia.bvh-on > td { background: color-mix(in srgb, var(--m, var(--marca)) 10%, var(--sup-1)); }
.bvh-hoja tbody tr.bvh-en.bvh-on > td { background: var(--bvh-en-2); }
.bvh-hoja tbody tr.bvh-sa.bvh-on > td { background: var(--bvh-sa-2); }
.bvh-hoja tbody tr[data-i] { cursor: pointer; }
/* al pie: el saldo inicial del acta */
.bvh-hoja tbody tr.bvh-ap > td { border-top: 3px double var(--linea-2); border-bottom: 0; background: var(--sup-1); }
.bvh-hoja tbody tr.bvh-ap .bvh-mv { font-weight: 800; }
.bvh-hoja tbody tr.bvh-vacio > td { color: var(--gris); background: var(--sup-1); }
/* el teléfono: Movimiento (con su hora y detalle debajo) · Monto · Saldo */
.bvh-hoja td.bvh-mv2 { width: 100%; max-width: 0; }
.bvh-mv2 > span, .bvh-mv2 > small { display: block; overflow: hidden; text-overflow: ellipsis; }
.bvh-mv2 > span { color: var(--tinta); font-weight: 600; }
.bvh-mv2 > small { margin-top: 1px; font-size: .9em; color: var(--gris); }
.bvh-mv2 .bvh-serie { font-size: .95em; }

/* ---------- angosto (el teléfono, una columna estrecha) ---------- */
@container bvh (max-width: 46rem) {
  .bvh-clave { display: none; }
}
@container bvh (max-width: 36rem) {
  .bvh-cab { padding: .45rem .7rem .35rem; gap: .35rem .5rem; }
  .bvh-graf { height: 8.8rem; margin: 0 .15rem .1rem; }
  .bvh-ficha { gap: .5rem; padding: .25rem .45rem; font-size: .68rem; }
  .bvh-hoja th, .bvh-hoja td { padding-left: .5rem; padding-right: .5rem; }
  .bvh-hoja th.bvh-c-m { width: 5.6rem; }
  .bvh-hoja th.bvh-c-sd { width: 6.6rem; }
  .bvh-dia-r { margin-left: .45rem; }
}
/* sin la columna de la derecha (de 700 a 1500 px): la hoja se desplaza por dentro y todo cabe en la primera pantalla */
@media (min-width: 700px) and (max-width: 1499.98px) { .hoja-marco.bvh-marco { max-height: max(16rem, calc(100vh - 28.5rem)); } }
/* en el teléfono, la hoja con su propio alto: la línea queda a la vista mientras se recorre */
@media (max-width: 699.98px) { .hoja-marco.bvh-marco { max-height: max(16rem, calc(100svh - 19rem)); } }
@media (prefers-reduced-motion: reduce) { .bvh .bvh-chip, .bvh .bvh-transferir { transition: none; } .bvh-hoja tbody tr.bvh-marcada > td { animation: none; } }
/* ---------- TRANSFERIR entre el BCP y el BBVA (01/10/2026): el botón, la ficha y lo que quedará ---------- */
.bvh .bvh-transferir {
  display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem .22rem .5rem;
  border: 1px solid var(--linea-2); border-radius: 5px; background: var(--sup-1);
  font: inherit; font-size: .72rem; font-weight: 700; color: var(--texto-2); white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.bvh .bvh-transferir svg { width: 1rem; height: 1rem; }
.bvh .bvh-transferir:hover { background: var(--sup-2); }
.bvh .bvh-transferir:active { transform: translateY(1px); }
.bvh .bvh-transferir:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.bvh .bvh-transferir[aria-expanded="true"] { border-color: var(--tinta); color: var(--tinta); }
.bvh-x { flex: none; padding: 0 .6rem; }
.bvh-x[hidden] { display: none; }
.bvh-x > .bvh-x-f { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 .45rem; }
.bvh-x-ruta { grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--gris); }
.bvh-x-ruta b { font-size: .95rem; font-weight: 800; color: var(--tinta); }
.bvh-x-giro {
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0;
  border: 1px solid var(--linea-2); border-radius: 50%; background: var(--sup-1); color: var(--texto-2); cursor: pointer;
}
.bvh-x-giro svg { width: 1rem; height: 1rem; }
.bvh-x-giro:hover { background: var(--sup-2); color: var(--tinta); }
.bvh-x-giro:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
.bvh-x-f .bvh-x-monto input { font-size: 1.05em; font-weight: 700; text-align: right; }
.bvh-x-f input[data-x="comision"] { text-align: right; }
.bvh-x-nota { grid-column: span 2; }
.bvh-x-queda { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; margin: 0; font-size: .8rem; color: var(--gris); }
.bvh-x-queda i { font-style: normal; color: var(--linea-2); }
.bvh-x-queda b { color: var(--tinta); font-weight: 800; }
.bvh-x-queda b.bvh-x-neg { color: var(--rojo); }
.bvh-x-f > .bvl-botones { grid-column: 1 / -1; }
@container bvh (max-width: 36rem) {
  .bvh-x { padding: 0 .35rem; }
  .bvh-x > .bvh-x-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bvh-x-f .bvh-x-monto, .bvh-x-nota { grid-column: 1 / -1; }
}

/* una transferencia anulada en la hoja: tachada y sin tinte ni saldo (el «Anular» de la fila se quitó el 02/10/2026) */
.bvh-anu { margin-right: .5em; font-size: .86em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.bvh-hoja tbody tr.bvh-anulada > td { color: var(--gris); }
.bvh-hoja tbody tr.bvh-anulada td.num:not(.bvh-sd) { text-decoration: line-through; font-weight: 500; color: var(--gris); }
.bvh-hoja tbody tr.bvh-anulada td.bvh-mv, .bvh-hoja tbody tr.bvh-anulada .bvh-mv2 > span { color: var(--gris); text-decoration: line-through; }
/* un tramo de filas elegido con Mayús+clic (02/10/2026): un velo encima del tinte, y su suma al pie, pegada */
.bvh-hoja tbody tr.bvh-sel > td { box-shadow: inset 0 0 0 99px color-mix(in srgb, var(--marca) 14%, transparent); }
.bvh-hoja tbody tr.bvh-sel > td:first-child { box-shadow: inset 0 0 0 99px color-mix(in srgb, var(--marca) 14%, transparent), inset 3px 0 0 var(--marca); }
.bvh-rango {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .9rem;
  padding: .38rem .9rem; border-top: 1px solid var(--linea); background: var(--sup-1); box-shadow: 0 -4px 10px -6px rgba(0, 0, 0, .18);
  font-size: .76rem; color: var(--texto-2);
}
.bvh-rango b { color: var(--tinta); }
.bvh-rango i { margin-left: .3em; font-style: normal; font-weight: 700; color: var(--tinta); }
.bvh-rango .bvh-rango-neto i { color: var(--marca-osc); }
.bvh .bvh-rango-x { margin-left: auto; padding: 0 .3rem; border: 0; background: none; font-size: 1.05rem; line-height: 1; color: var(--gris); cursor: pointer; }
.bvh .bvh-rango-x:hover { color: var(--tinta); }
.bvh-hoja tbody tr.bvh-marcada > td:first-child { box-shadow: inset 3px 0 0 var(--marca); }
.bvh-hoja tbody tr.bvh-marcada > td { animation: bvh-marcada 1.6s ease-out 1; }
@keyframes bvh-marcada { from { background: color-mix(in srgb, var(--marca) 16%, var(--sup-1)); } }