/* =============================================================================
   Grupo Luminotecnia — base y componentes
   Depende de tokens.css. Ni un solo color hex acá: todo sale de var(--…),
   que es lo que hace que el tema oscuro funcione sin duplicar hojas de estilo.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` tiene que ganarle a cualquier `display` de componente:
   sin esto, un .ms-count { display:inline-flex } se sigue viendo aunque JS lo
   marque como oculto. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin: 0;
}

h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Quien pidió menos movimiento en el sistema, no recibe animaciones. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* --- Layout ---------------------------------------------------------------- */

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.stack > * + * { margin-top: 18px; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.muted { color: var(--muted); }
.small { font-size: 13px; }

/* --- Barra superior -------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar .brand {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
}

/* El logo se acota por ALTO y no por ancho: la barra mide lo que mide, y un
   logo apaisado y uno cuadrado tienen que dejarla igual. `width:auto` con
   `max-height` mantiene la proporcion sin deformar el original. */
.topbar .brand img { display: block; height: 28px; width: auto; max-width: 220px; }

/* --- El logo segun el tema --------------------------------------------------
   Un logo con texto negro desaparece sobre fondo oscuro y uno blanco
   desaparece sobre fondo claro, asi que se pueden cargar los dos.

   Esto lo decide el CSS y NO PHP, por dos razones que se descubren tarde:

     · el tema tiene TRES estados y el tercero —«system»— no escribe ningun
       atributo: lo resuelve el navegador con `prefers-color-scheme`, que el
       servidor no ve;
     · el interruptor cambia `data-theme` sin recargar, asi que una eleccion
       hecha en PHP se quedaria con el logo del tema anterior.

   Por eso van las dos imagenes al HTML y aca se muestra una. Las tres reglas
   cubren los tres estados; sacar cualquiera deja un caso mostrando los dos
   logos, uno encima del otro.

   Cuando NO hay variante oscura cargada, la plantilla dibuja una sola imagen
   SIN estas clases, y se ve siempre. */

.marca-oscuro { display: none; }

/* 1. Eleccion explicita del usuario: oscuro. */
:root[data-theme="dark"] .marca-claro  { display: none; }
:root[data-theme="dark"] .marca-oscuro { display: block; }

@media (prefers-color-scheme: dark) {
    /* 2. Modo «system» con el sistema en oscuro. El `:not([data-theme="light"])`
          es lo que impide que esta regla le gane a alguien que eligio claro a
          mano teniendo el sistema en oscuro. */
    :root:not([data-theme="light"]) .marca-claro  { display: none; }
    :root:not([data-theme="light"]) .marca-oscuro { display: block; }
}

/* 3. Eleccion explicita: claro. Va al final para ganarle a la media query
      anterior, que en «system» + sistema oscuro ya habia escondido el claro. */
:root[data-theme="light"] .marca-claro  { display: block; }
:root[data-theme="light"] .marca-oscuro { display: none; }

.topbar .brand b { color: var(--accent); }
.topbar .spacer { flex: 1; }

.topnav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }

.topnav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* --- Un color por seccion ---------------------------------------------------

   Cada item tiene su tono, declarado en tokens.css con sus tres estados de
   tema. Aca se lee en UNA variable, `--sec`, y de ahi salen el icono, el fondo
   del activo y el del hover: un solo dato por seccion en vez de tres reglas
   por seccion.

   ── Dos decisiones que se leen al reves ───────────────────────────────────

   · **El texto en reposo NO se pinta.** Solo el icono. Ocho textos de colores
     en una fila se leen como una alerta permanente; el color tiene que ayudar
     a ENCONTRAR, no a gritar. El nombre se pinta recien cuando esa es la
     seccion en la que estas.

   · **El activo usa el color de SU seccion, no el acento naranja.** Antes el
     naranja significaba «aca estas»; ahora eso lo dice el fondo, y el color
     dice ademas «aca estas en Documentos». El naranja sigue siendo el acento
     en botones y enlaces, donde si es lo unico que distingue. */

:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton) { --sec: var(--muted); }

:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="panel"]          { --sec: var(--sec-panel); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="documento"]      { --sec: var(--sec-documento); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="importar"]       { --sec: var(--sec-importar); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="recepcion"]      { --sec: var(--sec-recepcion); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="sifen"]          { --sec: var(--sec-sifen); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="proveedores"]    { --sec: var(--sec-proveedores); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="exportar"]       { --sec: var(--sec-exportar); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="administracion"] { --sec: var(--sec-administracion); }
/* Los modulos, en la fila de arriba. */
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="compras"]        { --sec: var(--sec-compras); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="contabilidad"]   { --sec: var(--sec-contabilidad); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="rrhh"]           { --sec: var(--sec-rrhh); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="cobranzas"]      { --sec: var(--sec-cobranzas); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="presupuesto"]    { --sec: var(--sec-presupuesto); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="cxp"]            { --sec: var(--sec-cxp); }
/* Servicios (la luz de la ANDE): el dorado, que en el panel sólo usa Proveedores. */
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="servicios"]      { --sec: var(--sec-proveedores); }
/* Los cuatro de adentro de Administracion tienen el suyo igual: en la lista
   desplegada el color es lo que deja saltar al que se busca sin leer. */
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="usuarios"]  { --sec: var(--sec-documento); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="roles"]     { --sec: var(--sec-importar); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="auditoria"] { --sec: var(--sec-sifen); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="config"]    { --sec: var(--sec-administracion); }
:is(.topnav-link, .areanav-col, .areanav-subtitulo, .areanav-anexo, .miga-boton)[data-sec="salir"]     { --sec: var(--crit); }

.topnav-link:hover {
    background: color-mix(in srgb, var(--sec) 10%, transparent);
    color: var(--ink);
    text-decoration: none;
}

.topnav-link.is-current {
    background: color-mix(in srgb, var(--sec) 14%, transparent);
    color: var(--sec);
    font-weight: 600;
}

/* Los iconos son de trazo y toman `currentColor`, asi que basta con pintar el
   SVG: no hace falta una version distinta del dibujo por color ni por tema. */
.topnav-link .ico { flex: none; color: var(--sec); }

/* En reposo el color esta bajado: a pleno los ocho a la vez, la barra compite
   con el contenido, que es lo que la persona vino a mirar.

   **.9 y no .8, y el numero esta medido.** La opacidad mezcla el color contra
   el fondo, asi que baja el contraste de verdad aunque el color declarado no
   cambie. Al .8 el peor caso —el naranja del Panel sobre la barra clara— cae a
   2.99 : 1, justo abajo del minimo de 3:1 que pide WCAG para un elemento
   grafico. Al .9 da 3.48 y pasa. Bajarlo «para que se vea mas suave» es
   deshacer eso sin que se note. */
.topnav-link .ico { opacity: .9; }
.topnav-link:hover .ico,
.topnav-link.is-current .ico { opacity: 1; }

/* Lo que todavia no tiene ruta: se ve, pero apagado, gris y sin cursor de
   enlace. Sin color propio a proposito — todavia no es una seccion. */
.topnav-link.is-proxima { --sec: var(--muted); opacity: .45; cursor: default; }
.topnav-link.is-proxima:hover { background: none; color: var(--ink-2); }

/* La barra puede partirse en dos renglones (en el telefono las areas bajan a
   una fila propia). La segunda fila de pantallas ya no existe: desde el
   09/10/2026 el menu es area › modulo › pantalla, con un panel por area y una
   miga arriba del contenido (ver «El menu de tres niveles», al final). */
.topbar { flex-wrap: wrap; row-gap: 0; }

.topnav-flecha { font-size: 9px; opacity: .6; }

/* --- El nombre, cuando no entra --------------------------------------------

   Los numeros de aca abajo estan MEDIDOS, no elegidos: la fila con texto pide
   903px, y con la marca, el selector de tema y el bloque del usuario, la barra
   se parte en dos renglones abajo de ~1500px. Un punto de corte inventado deja
   una franja de anchos donde el menu ocupa dos filas, que es peor que
   cualquiera de las dos opciones.

   Son dos escalones, no uno:

     1. de 1500 a 1420 se aprieta el espaciado y la insignia del rol se va —es
        lo primero que sobra, el rol se mira una vez—. Con eso el texto entra
        en un portatil de 1440;
     2. abajo de 1420 se esconde el nombre y quedan los iconos. El corte esta
        arriba de 1366 A PROPOSITO: a ese ancho, que es el portatil mas comun,
        el texto todavia entraba pero la barra se partia en dos renglones.

   El nombre se esconde con `clip`, NO con `display:none`. Un enlace cuyo unico
   contenido es un SVG marcado `aria-hidden` se queda sin nombre accesible, y un
   lector de pantalla anuncia «enlace» ocho veces seguidas. Con clip el texto
   sigue ahi para quien lo necesita, y el `title` lo devuelve como tooltip para
   todos los demas. */

@media (max-width: 1500px) {
    .topbar { gap: 10px; }
    .topnav-link { padding: 6px 8px; gap: 6px; }
    /* El rol se mira una vez y despues estorba: es lo primero que sobra
       cuando falta ancho. El nombre de la persona se queda. */
    .usermenu .badge { display: none; }
}

@media (max-width: 1420px) {
    .topnav-txt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .topnav-link { padding: 7px 9px; }
}

/* --- El menu del usuario ----------------------------------------------------
   Antes eran el nombre, la insignia del rol y un boton «Salir» sueltos en la
   barra. Salir era lo unico que se podia hacer con el propio usuario, y era
   ademas lo mas destructivo de los tres: el boton mas visible del rincon te
   sacaba de la sesion. Ahora los tres caminos viven adentro y Salir queda
   abajo, separado por una linea. */

.usermenu { position: relative; }
.usermenu > summary { list-style: none; }
.usermenu > summary::-webkit-details-marker { display: none; }

.usermenu-boton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--ink-2);
}

.usermenu-boton:hover,
.usermenu[open] > .usermenu-boton { background: var(--surface-2); color: var(--ink); }

.usermenu-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* La inicial, no una foto: la mayoria no va a subir ninguna, y un avatar vacio
   se ve peor que una letra puesta a proposito. */
.usermenu-inicial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

/* Un punto y no un texto: la barra no es lugar para un aviso largo, pero
   tampoco puede callarse que la contraseña sigue siendo la provisoria que vio
   otra persona. */
.usermenu-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warn);
    flex: none;
}

/* El panel se alinea por la DERECHA: colgando del borde izquierdo de un boton
   que ya esta en el rincon, se sale de la pantalla —medido: 14px afuera—.

   Va con la clase DOS veces a proposito. `.menu-nivel-lista` fija `left: 0` y
   se define mas abajo en este archivo; con un solo nombre las dos reglas
   empatan en especificidad y gana la de abajo, asi que el `left: auto` no
   hacia nada. Repetir la clase sube la especificidad y saca el orden del
   archivo de la ecuacion. */
.menu-nivel-lista.menu-nivel-lista--derecha { left: auto; right: 0; min-width: 230px; }

.usermenu-quien {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-soft);
    line-height: 1.4;
}

/* Salir va abajo y separado. Es la unica de las tres que no se puede deshacer
   con el boton de atras. */
.usermenu-salir { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }

/* El boton de Salir se dibuja como los enlaces de al lado: si se ve distinto,
   parece que hace otra cosa. Que sea `<button>` es porque salir es un POST con
   CSRF, no un enlace que cualquiera puede disparar desde afuera. */
.usermenu-salir button {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Dentro del panel el nombre se ve SIEMPRE, aunque afuera este escondido por
   el ancho: adentro hay lugar, y esconderlo aca seria esconderlo justo donde
   se fue a buscar. */
.menu-nivel-lista .topnav-link { display: flex; width: 100%; }
.menu-nivel-lista .topnav-txt {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
}

@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; }
    /* Sin `overflow-x: auto`, a propósito: un contenedor con overflow RECORTA
       cualquier desplegable posicionado adentro, y el menú de Administración
       se abría… debajo de la ventana de recorte, invisible. Los iconos caben
       en el ancho de un teléfono, y si algún día no caben, la fila ENVUELVE
       (el `.topnav` de base ya tiene flex-wrap) en vez de deslizarse. */
    .topnav { order: 10; width: 100%; }
    .usermenu-name { display: none; }

}

/* --- La pantalla partida de Recepción ---------------------------------------
   Imagen a la izquierda, campos a la derecha. En angosto (el teléfono, que es
   donde se escanea) las dos columnas apretadas eran ilegibles: se apilan, con
   la imagen arriba porque es contra lo que se comparan los campos. */
.pantalla-partida {
    display: grid;
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
    align-items: start;
}

@media (max-width: 800px) {
    .pantalla-partida { grid-template-columns: minmax(0, 1fr); }
}

/* --- Pantallas sin navegación (login, error) ------------------------------- */

.bare-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; position: relative; overflow-x: hidden; }
.bare-main { width: 100%; max-width: 460px; position: relative; z-index: 1; }
.bare-theme { position: fixed; top: 16px; right: 16px; z-index: 2; }
.auth-card { padding: 28px; }

/* --- El fondo del login: luz sobre papel -----------------------------------
   Tres manchas de luz difusa con los colores de la casa (la marca, el
   turquesa de Compras, el indigo de Documentos) que derivan muy despacio,
   sobre una cuadricula tenue de papel. Luminotecnia es luz; gltcore es
   papel ordenado. Nada de particulas ni canvas: es una pantalla de entrada,
   no un salvapantallas.

   Los periodos son largos y distintos entre si (22, 28 y 34 s) para que la
   figura no se repita a la vista. `alternate` evita el salto del bucle.
   La opacidad sale de un token: en oscuro la luz tiene que ser mas timida
   o compite con la tarjeta. Bajo `prefers-reduced-motion` la regla global
   de arriba deja todo quieto, y quieto tambien queda bien. */

.bare-luz { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.bare-luz i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: var(--luz-opacidad, .5);
    will-change: transform;
    animation: luz-deriva 22s ease-in-out infinite alternate;
}

.bare-luz i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: var(--brand); }
.bare-luz i:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; top: 18vmax; background: var(--sec-compras); animation-duration: 28s; animation-delay: -9s; }
.bare-luz i:nth-child(3) { width: 36vmax; height: 36vmax; left: 18vmax; bottom: -18vmax; background: var(--sec-documento); animation-duration: 34s; animation-delay: -17s; }

@keyframes luz-deriva {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(7vmax, 5vmax) scale(1.12); }
}

/* La cuadricula: puntos cada 26px que se desvanecen hacia los bordes, para
   que no parezca una hoja pegada a la pantalla sino papel bajo la luz. */
.bare-luz::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
}

/* La marca y el titulo, centrados; el formulario NO. Una etiqueta centrada
   queda corrida del campo que rotula y obliga a saltar la vista de un lado al
   otro en cada renglon. */
.auth-head { text-align: center; margin-bottom: 24px; }

/* --- Mensajes de una petición a la otra ------------------------------------ */

.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 14px;
}

.flash svg { flex: none; margin-top: 2px; }
.flash-ok { background: var(--ok-bg); color: var(--ok); }
.flash-crit { background: var(--crit-bg); color: var(--crit); }

/* --- Tarjetas -------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

/* --- El balance (Contabilidad › Balance) ---------------------------------
   Un reporte y no un formulario: la etiqueta a la izquierda, los importes
   alineados a la derecha, la sangría dice el nivel y el borde izquierdo dice
   QUÉ es la línea (activo, pasivo, patrimonio, ingreso, egreso). Los
   subtotales llevan fondo del mismo color, más fuerte cuanto más arriba. */
.bal { margin-top: 8px; font-variant-numeric: tabular-nums; }
.bal-herramientas { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.bal-reporte > .bal-herramientas { margin: 0 0 0 auto; }
/* La barra del reporte: cuál se está mirando, su jerarquía, y «Armar otro»
   que se despliega debajo a lo ancho. */
.bal-reporte { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
/* Cerrado, «Armar otro» es un botón más de la línea; abierto, baja a una fila propia. */
.bal-armar[open] { flex-basis: 100%; order: 10; }
.bal-armar > summary { list-style: none; display: inline-block; }
.bal-armar > summary::-webkit-details-marker { display: none; }
.bal-armar[open] > summary { margin-bottom: 8px; }
.bal-fila {
    --nat: var(--line);
    display: grid; grid-template-columns: 1fr 150px; gap: 12px; align-items: baseline;
    padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid var(--nat);
}
.bal.con-comp .bal-fila { grid-template-columns: 1fr 150px 150px 96px; }
.bal-num { text-align: right; white-space: nowrap; }
.bal-comp { color: var(--muted); }
.bal-var { font-size: 12.5px; font-weight: 600; }
.var-buena { color: var(--ok); }
.var-mala  { color: var(--crit); }

/* La cabecera queda fija debajo de la barra del sistema, que también es
   fija y cambia de alto: ui.js la mide y deja el alto en --alto-topbar. */
.bal-cabeza {
    position: sticky; top: var(--alto-topbar, 0px); z-index: 5;
    font-size: 12px; font-weight: 600; color: var(--muted);
    background: var(--surface); border-bottom: 1px solid var(--line); border-left-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.nat-activo  { --nat: var(--sec-compras); }
.nat-pasivo  { --nat: var(--warn); }
.nat-pn      { --nat: var(--sec-rrhh); }
.nat-ingreso { --nat: var(--ok); }
.nat-egreso  { --nat: var(--crit); }

.nat-mixta   { --nat: var(--line); }
.var-neutra  { color: var(--muted); }

/* La sangría la pone la vista (--sangria), porque la profundidad depende
   del reporte elegido: el estándar tiene cuatro niveles, otro puede tener dos. */
.bal-n0 { font-weight: 700; font-size: 15px; margin-top: 10px; padding-left: var(--sangria, 10px); background: color-mix(in srgb, var(--nat) 14%, var(--surface)); }
.bal-n1 { font-weight: 650; padding-left: var(--sangria, 22px); background: color-mix(in srgb, var(--nat) 8%, var(--surface)); }
.bal-n2 { font-weight: 600; padding-left: var(--sangria, 34px); background: color-mix(in srgb, var(--nat) 4%, var(--surface)); }
.bal-n3 { padding-left: var(--sangria, 46px); }
.bal-hoja { cursor: pointer; list-style: none; }
.bal-hoja::-webkit-details-marker { display: none; }
.bal-hoja > span:first-child::before { content: '▸ '; color: var(--muted); }
.bal-grupo[open] > .bal-hoja > span:first-child::before { content: '▾ '; }
.bal-cuenta { padding-left: var(--sangria, 62px); font-size: 13px; border-left-width: 1px; }
.bal-fila:not(.bal-cabeza):hover { background: color-mix(in srgb, var(--nat) 18%, var(--surface)); }
/* «ajustar» aparece al pasar el mouse; «ajustes (n)» se ve siempre: una
   cuenta ajustada tiene que notarse sin buscarla. */
.bal-ajustar { font: inherit; font-size: 11.5px; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent); cursor: pointer; opacity: 0; }
.bal-ajustar.tiene { opacity: 1; background: var(--accent-soft); border-color: transparent; }
.bal-cuenta:hover .bal-ajustar, .bal-ajustar:focus { opacity: 1; }
.bal-fila.es-foco { outline: 2px solid var(--accent); outline-offset: -2px; }

/* El modal de la cuenta (balance.js). */
.bm-caja { width: min(620px, 100%); }
.bm-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.bm-cifras span { display: flex; flex-direction: column; padding: 8px 10px; background: var(--sunken); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.bm-cifras small { color: var(--muted); font-size: 11.5px; }
.bm-cuerpo h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 4px; }
.bm-sentido { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 14px; }
.bm-cuerpo .lista-lineas form { margin-left: 8px; }
.bal-total { border-top: 2px solid var(--line); }
.bal-n0.es-sin { color: var(--crit); }

/* La evolución mensual (_evolucion.php), segunda vuelta («no se ve bien»):
   la tabla con su propio scroll —la barra de costado siempre a la vista—,
   la cabecera y la primera columna fijas, y debajo de cada número, chico,
   cuánto cambió contra el mes anterior. */
.ev-scroll {
    overflow: auto; margin-top: 8px;
    max-height: max(420px, calc(100vh - 290px));
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.bal.ev { margin: 0; min-width: max-content; font-size: 13px; }
.bal.ev .ev-fila {
    grid-template-columns: 250px repeat(var(--meses, 12), 82px) 100px 72px;
    gap: 0; padding: 0; margin: 0; border-left: 0; align-items: stretch;
}
.bal.ev .ev-fila:not(.bal-n0):not(.bal-n1):not(.bal-n2) { background: var(--surface); }
.bal.ev .ev-fila:not(.bal-cabeza):hover { background: color-mix(in srgb, var(--nat) 14%, var(--surface)); }
.bal.ev .bal-n0 { font-size: 14px; }
.ev-nombre {
    position: sticky; left: 0; z-index: 1; background: inherit;
    display: flex; align-items: center; gap: 4px; min-width: 0;
    padding: 5px 8px 5px var(--sangria, 10px);
    border-left: 3px solid var(--nat); box-shadow: 1px 0 0 var(--line-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bal.ev .bal-cuenta .ev-nombre { border-left-width: 1px; }
.ev-c {
    display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
    padding: 4px 8px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ev-v { font-size: 10.5px; line-height: 1.15; font-weight: 500; color: var(--muted); }
.ev-b { color: var(--ok); }
.ev-m { color: var(--crit); }
.ev-fin { border-left: 1px solid var(--line-soft); font-weight: 600; }
.ev-graf, .ev-graf-cab { display: flex; align-items: center; justify-content: center; }
.ev-graf { margin: 3px 6px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; }
.ev-graf:hover, .ev-graf:focus-visible { border-color: var(--line); background: var(--sunken); }
.ev-graf polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.bal.ev .bal-cabeza { position: sticky; top: 0; z-index: 3; background: var(--surface-2, var(--surface)); font-size: 12px; }
.bal.ev .bal-cabeza .ev-nombre { z-index: 4; background: var(--surface-2, var(--surface)); border-left-color: transparent; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.bal.ev .bal-cabeza .ev-c { justify-content: flex-end; }
.ev-graf-cab { font-weight: 600; }
.evo-opciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }

/* El paso a paso del cierre se abre y se cierra (balance.js). Cerrado, el
   balance usa todo el ancho y el botón dice cuántos pasos están listos. */
.bal-layout.lado-cerrado { grid-template-columns: minmax(0, 1fr); }
.bal-layout.lado-cerrado > .bal-lado { display: none; }
.bal-lado-btn {
    display: inline-flex; align-items: center; gap: 8px; align-self: center;
    padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.bal-lado-btn:hover { background: var(--sunken); }
.bal-lado-btn[aria-expanded="true"] { border-color: var(--accent); }
.bal-lado-icono { color: var(--muted); }

/* «evolución» en cada línea del balance: aparece al pasar el mouse, como «ajustar». */
.bal-evo {
    font: inherit; font-size: 11.5px; font-weight: 500; margin-left: 6px; padding: 1px 7px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent);
    cursor: pointer; opacity: 0;
}
.bal-fila:hover .bal-evo, .bal-evo:focus { opacity: 1; }

/* El gráfico de la evolución (balance-evolucion.js). */
.modal-caja.evg-caja { width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.evg-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.evg-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 420px; }
.evg-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px;
    border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 999px;
    background: color-mix(in srgb, var(--c) 10%, var(--surface)); font-size: 12.5px;
}
.evg-chip > i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.evg-chip b { font-variant-numeric: tabular-nums; }
.evg-chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.evg-agregar { flex: 1 1 300px; max-width: 460px; }
.evg-seg { display: inline-flex; gap: 4px; }
.evg-lienzo { position: relative; min-height: 240px; }
.evg-lienzo svg { display: block; max-width: 100%; }
.evg-lienzo svg text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.evg-grid { stroke: var(--line-soft); }
.evg-cero { stroke: var(--line); stroke-width: 1.5; }
.evg-guia { stroke: var(--muted); stroke-dasharray: 3 3; }
.evg-tip {
    position: absolute; pointer-events: none; z-index: 2; min-width: 180px;
    padding: 8px 10px; font-size: 12px; line-height: 1.5;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.evg-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.evg-nota { margin: 6px 0 0; font-size: 12px; color: var(--muted); min-height: 1em; }
@media (max-width: 640px) {
    .bal.con-comp .bal-fila { grid-template-columns: 1fr 104px 104px; }
    .bal.con-comp .bal-var { display: none; }
    .bal-fila { grid-template-columns: 1fr 104px; }
    .bal-fila { --sangria: 8px !important; }
    .bal-ajustar { opacity: 1; }
}

/* Una línea legible por ítem, en vez de una grilla (Datos de SAP). */
.lista-lineas { list-style: none; padding: 0; margin: 8px 0; }
.lista-lineas > li { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.lista-lineas > li:last-child { border-bottom: 0; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

/* --- Botones --------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.btn:hover { background: var(--surface-2); text-decoration: none; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }

/* El botón de lo que borra de verdad. Sólo lo usa el modal de confirmación
   (data-confirmar-peligro): el rojo aparece recién cuando ya se está
   confirmando, no gritando en la pantalla. */
.btn-peligro {
    background: var(--crit);
    border-color: var(--crit);
    color: #fff;
    font-weight: 600;
}

.btn-peligro:hover { background: color-mix(in srgb, var(--crit) 85%, #000); }

/* --- El modal de confirmación -----------------------------------------------
   Reemplaza al window.confirm() nativo, que se dibuja con la cara del
   navegador («el sitio dice…») y no con la del sistema. Un velo, una caja,
   dos botones — y el de aceptar repite el texto del botón que se apretó. */
.modal-velo {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: color-mix(in srgb, var(--ground) 65%, transparent);
    backdrop-filter: blur(3px);
}

.modal-velo.is-abierto { display: flex; }

.modal-caja {
    width: min(420px, 100%);
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    animation: modal-entra .16s ease-out;
}

.modal-texto { margin: 0 0 16px; font-size: 14px; line-height: 1.55; }

.modal-botones { display: flex; gap: 8px; justify-content: flex-end; }

/* El modal de ayuda (views/partials/ayuda.php): más ancho, con título, y
   con scroll propio si el texto es largo. */
.modal-caja.es-ayuda { width: min(580px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-titulo { margin: 0 0 12px; font-size: 17px; }
.modal-ayuda { font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
.modal-ayuda h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 4px; }
.modal-ayuda h3:first-child { margin-top: 0; }
.modal-ayuda p, .modal-ayuda ul { margin: 0 0 8px; }
.modal-ayuda ul { padding-left: 18px; }
.modal-botones .btn { min-width: 96px; }

@keyframes modal-entra {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-caja { animation: none; }
}

/* En el teléfono los botones a lo ancho, el de aceptar abajo de todo:
   el pulgar llega, y lo irreversible queda más lejos del toque de apuro. */
@media (max-width: 480px) {
    .modal-botones { flex-direction: column-reverse; }
    .modal-botones .btn { width: 100%; padding: 12px; }
}

.btn-sm { padding: 5px 11px; font-size: 12.5px; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* --- Pestañas --------------------------------------------------------------
   Para alternar entre dos o tres vistas de la misma sección (promociones y
   novedades). Son enlaces, no botones: cada pestaña es una URL propia y tiene
   que poder abrirse en otra solapa. */

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
}

.tab {
    padding: 9px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.tab:hover { color: var(--ink); text-decoration: none; }

.tab.is-current { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Insignias ------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--ink-2);
}

.badge-ok   { background: var(--ok-bg);   color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-crit { background: var(--crit-bg); color: var(--crit); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }

/* --- Formularios ----------------------------------------------------------- */

.field { display: block; margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }

.input, .select, .textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
}

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-error { color: var(--crit); font-size: 12.5px; margin-top: 4px; }
.input[aria-invalid="true"] { border-color: var(--crit); }

/* --- Tablas ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--sunken); font-weight: 600; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--sunken); }
.table .num { text-align: right; font-family: var(--font-mono); font-size: 13px; }

/* ===========================================================================
   PANTALLAS DE TRABAJO
   ---------------------------------------------------------------------------
   Una pantalla donde se BUSCA algo no se disena como una donde se LEE algo.

   El problema concreto que resuelve este bloque: en Recepcion habia 470 px de
   tarjetas antes de que empezara la tabla, y la tabla tenia una fila. Las
   tarjetas mostraban "1", "0" y un guion. El espacio se lo estaba llevando lo
   que se mira una vez, no lo que se usa todo el dia.

   La regla de acá para abajo: los numeros de arriba se comprimen a una franja,
   los filtros a un renglon, y todo el alto que sobra es de la tabla.
   =========================================================================== */

/* Una pantalla de datos no cabe en 1140px. Doce columnas de importes en
   guaranies —que son numeros largos— necesitan aire, y la alternativa es
   scroll horizontal, que es peor: se pierde de vista el proveedor al mirar
   el importe. */
.wrap--wide { max-width: 1600px; }
.wrap--full { max-width: none; }

/* --- La franja de numeros --------------------------------------------------
   Lo mismo que decian las tarjetas, en un renglon. Se lee de una pasada y no
   empuja la tabla fuera de la pantalla. */
.stat-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    padding: 10px 14px;
    background: var(--sunken);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.stat-strip .stat { display: flex; align-items: baseline; gap: 7px; }
.stat-strip .stat-label { color: var(--muted); font-size: 12px; }
.stat-strip .stat-value { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.stat-strip .stat-value.is-warn { color: var(--warn, #b45309); }
.stat-strip .spacer { flex: 1; }

/* --- La barra de filtros ---------------------------------------------------
   Un renglon, no una tarjeta. El buscador crece y los selectores ocupan lo
   que necesitan; en pantalla angosta se envuelve solo. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.toolbar .field { margin: 0; }
/* La etiqueta arriba del campo, chiquita: en una barra de filtros el nombre
   de la columna se lee una vez y despues estorba. Bloque y no inline para que
   no empuje el alto del renglon. */
.toolbar .field > span { display: block; font-size: 11px; line-height: 1.3; color: var(--muted); margin-bottom: 2px; }
.toolbar .grow { flex: 1 1 240px; min-width: 200px; }
.toolbar .input, .toolbar .select { padding: 6px 9px; font-size: 13.5px; }
.toolbar .spacer { flex: 1; }
.toolbar .btn { padding: 7px 14px; }
.toolbar .checkline { white-space: nowrap; }

/* El titulo y los numeros comparten renglon. Son dos cosas que se miran una
   vez al entrar; no hay razon para que ocupen dos franjas de alto cada una. */
.head-datos {
    display: flex;
    align-items: center;
    gap: 10px 20px;
    flex-wrap: wrap;
}

.head-datos .h1 { margin: 0; font-size: 22px; }
.head-datos .stat-strip { flex: 1 1 auto; margin: 0; }

/* --- La tabla, que es lo que importa ---------------------------------------
   El encabezado queda fijo mientras se recorre el listado. Sin esto, en la
   fila 40 ya nadie sabe si la columna que esta mirando es "gravado 10" o
   "IVA 10", y son dos numeros parecidos con significados muy distintos.

   El alto sale de restar lo que hay arriba: 220px cubre topbar, titulo,
   franja y filtros. Que la tabla tenga su propio scroll y no el de la pagina
   es lo que permite que el encabezado se quede quieto. */
.table-scroll {
    /* 300px es lo que ocupa todo lo demas: topbar, encabezado, filtros,
       paginador y la nota del pie. Si el paginador queda abajo del pliegue
       hay que scrollear la pagina para cambiar de pagina, que es absurdo. */
    /* Lo que hay arriba y abajo de la tabla, que cada pantalla ajusta si le
       hace falta. Variable y no un numero fijo porque Documentos y Recepcion
       llevan barra de vistas y las otras no, y el paginador tiene que entrar
       en pantalla igual: si queda abajo del pliegue hay que scrollear la
       pagina para cambiar de pagina, que es absurdo. */
    max-height: calc(100vh - var(--alto-fuera-de-tabla, 320px));
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.table-scroll .table { margin: 0; }

.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Opaco a proposito: con fondo translucido las filas se leen POR DEBAJO
       del encabezado al hacer scroll. */
    background: var(--surface-2);
    box-shadow: inset 0 -1px 0 var(--line);
}

/* Densidad: la misma tabla, mas filas a la vista. Un listado que se recorre
   buscando algo se lee mejor apretado que espaciado. */
.table--compact th, .table--compact td { padding: 7px 12px; }
.table--compact { font-size: 13px; }

/* La primera columna anclada. En una tabla de doce columnas, al desplazarse
   a la derecha se pierde de vista de QUE proveedor es la fila. */
.table--anclada tbody td:nth-child(2),
.table--anclada thead th:nth-child(2) {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
}

.table--anclada thead th:nth-child(2) { background: var(--surface-2); z-index: 3; }

/* --- El paginador ----------------------------------------------------------
   Dice DONDE estas y cuanto hay, no solo "anterior/siguiente". Saber que sos
   la pagina 3 de 4 es distinto de saber que sos la 3 de 340. */
.pager {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 13px;
}

.pager .pager-info { color: var(--muted); }
.pager .spacer { flex: 1; }
.pager .pager-pages { display: flex; gap: 4px; align-items: center; }

.pager .pager-num {
    min-width: 32px;
    padding: 5px 8px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.pager .pager-num:hover { background: var(--sunken); text-decoration: none; }
.pager .pager-num.is-current {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.pager .pager-num.is-gap { border: 0; color: var(--muted); min-width: 16px; }

@media (max-width: 640px) {
    .table-scroll { max-height: none; }
    .table-scroll thead th { position: static; }
}

/* Botones de solo icono, para acciones que ya tienen su contexto al lado.
   El nombre vive en el `title` y en un texto para lectores de pantalla: un
   boton sin nombre accesible es un boton que no existe para quien no ve. */
.btn-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
}

.btn-icono:hover { background: var(--surface-2); color: var(--ink); }
.btn-icono:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* La estrella prendida dice que esta pantalla ABRE con esta vista. */
.btn-icono.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-icono.is-guardar { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.btn-icono.is-guardar:hover { filter: brightness(1.08); color: var(--surface); }
.btn-icono.is-borrar { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 35%, transparent); }
.btn-icono.is-borrar:hover { background: var(--crit-bg); color: var(--crit); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* La barra de trabajo: agrupacion y vistas en un renglon.

   Eran dos bandas separadas que se comian 95px de alto entre las dos para
   decir dos cosas cortas. Las dos se tocan en el mismo momento —al empezar a
   mirar algo— asi que van juntas. */
.barra-trabajo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 10px;
    font-size: 13px;
}

/* Una linea vertical entre los dos grupos de controles: sin eso, "+ nivel" y
   "Vista" parecen la misma cosa. */
.barra-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--line);
}

.barra-trabajo .btn-sm { padding: 4px 10px; font-size: 12.5px; }
.menu-guardar { position: relative; }
.menu-guardar > summary { list-style: none; cursor: pointer; }
.menu-guardar > summary::-webkit-details-marker { display: none; }
/* El desplegable se ancla a la derecha del botón. El `style` en línea que lo
   hacía no se puede tocar desde el teléfono; por eso es una clase. */
.ms-menu.menu-guardar-panel { right: 0; left: auto; padding: 10px; min-width: 250px; }

/* --- La barra de agrupacion ------------------------------------------------
   Chips numerados en vez de tres desplegables: el orden de los niveles es el
   dato, y asi se ve. */

.agrupar-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 10px;
}

.chip-nivel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 4px 4px 6px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}

/* El numero adentro de un circulo: dice el ORDEN, que es lo que distingue
   "proveedor y adentro periodo" de "periodo y adentro proveedor". */
.chip-orden {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--surface);
    font-size: 10.5px;
    font-weight: 700;
}

.chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: inherit;
    font-size: 13px;
    line-height: 1;
}

.chip-x:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); text-decoration: none; }

.menu-nivel { position: relative; display: inline-block; }
.menu-nivel > summary { list-style: none; cursor: pointer; }
.menu-nivel > summary::-webkit-details-marker { display: none; }

.menu-nivel-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 190px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.menu-nivel-lista a {
    display: block;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: 13px;
}

.menu-nivel-lista a:hover { background: var(--sunken); text-decoration: none; }

/* --- El circulito de «estoy trabajando» -------------------------------------
   Acompaña al texto del boton, no lo reemplaza. Con
   `prefers-reduced-motion` el proyecto congela todas las animaciones, asi que
   el circulito queda quieto — y ahi el que avisa es el TEXTO, que por eso es
   la señal principal y no la decoracion.

   `currentColor` en el borde: sirve igual en un boton naranja que en uno
   fantasma, sin una variante por tipo de boton. */

.hilando {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -1px;
    animation: hilando .7s linear infinite;
}

@keyframes hilando { to { transform: rotate(360deg); } }

/* Mientras trabaja, el boton no invita a que lo aprieten de nuevo. El envio ya
   esta cortado por JavaScript; esto es para que no de ganas de intentarlo. */
[data-enviando] button[aria-busy="true"] { cursor: progress; opacity: .85; }
[data-enviando] button:not([aria-busy]) { opacity: .5; pointer-events: none; }

/* --- Irse a otra pagina tambien avisa ---------------------------------------
   `data-tarda` marca el boton de un formulario, pero un link del menu no es
   un formulario: entre el clic y la pagina nueva no se ve nada. Lo pone
   `trabajando.js`, en dos tiempos — la barra a los 150 ms, el cartel a los
   900 ms.

   El z-index va arriba del modal (200): esto tiene que verse SIEMPRE, incluso
   mientras hay un dialogo abierto.

   Bajo `prefers-reduced-motion` la regla global de arriba deja las
   animaciones quietas: la barra aparece entera y sin moverse, y el que avisa
   es el texto del cartel. Es la misma decision que `.hilando`. */

.trabajando-barra {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    width: 0;
    height: 3px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    pointer-events: none;
    /* Sube rapido hasta 70% y despues se arrastra: la barra no sabe cuanto
       falta, y prometer el 100% antes de tiempo es peor que no prometer. */
    animation: trabajando-avance 20s cubic-bezier(.05, .7, .1, 1) forwards;
}

@keyframes trabajando-avance {
    0%   { width: 0; }
    30%  { width: 70%; }
    100% { width: 94%; }
}

.trabajando-cartel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 300;
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    color: var(--ink-2);
    font-size: 13px;
    pointer-events: none;
}

/* --- El porcentaje de confianza de una lectura ------------------------------
   Tres bandas, decididas mirando facturas manuscritas de verdad:

     95% o mas  verde     la lectura se acepta sin abrir
     90 a 94    amarillo  se mira antes de confirmar
     debajo     rojo      se revisa si o si

   Son estrictas a proposito. El umbral era 70 y venia de antes de haber leido
   una factura real: para datos fiscales un 85% en el monto es una de cada
   siete con el importe mal, y eso no se descubre mirando —se descubre cuando
   alguien concilia contra SAP tres meses despues—.

   Fondo y no solo color de texto: un numero de 12px en rojo sobre fondo oscuro
   se pierde entre las demas columnas. La pastilla se ve barriendo la lista sin
   leerla, que es como se usa una bandeja. */

.conf {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.conf-ok    { background: var(--ok-bg);   color: var(--ok); }
.conf-media { background: var(--warn-bg); color: var(--warn); }
.conf-mala  { background: var(--crit-bg); color: var(--crit); }

/* --- El signo de admiracion de un dato dudoso -------------------------------
   Chico y al lado del valor, no un cartel: la fila igual hay que leerla, y un
   bloque de aviso por fila convierte la bandeja en una lista de alarmas. El
   motivo va en el `title`, que es donde se busca cuando algo llama la atencion. */

.aviso {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--warn-bg);
    color: var(--warn);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    vertical-align: 1px;
}

/* --- Que cambio, dentro de una fila de auditoria ----------------------------
   Una tabla adentro de una celda. Se ve raro escrito y es lo correcto dibujado:
   son pares campo/valor que tienen que quedar ALINEADOS entre si dentro de la
   fila, y con divs cada fila del log elegiria su propio ancho de columna.

   Sin `width:auto` la tabla de adentro hereda el ancho de la celda y estira los
   nombres de campo hasta la otra punta. */

.cambios { border-collapse: collapse; width: auto; font-size: 12.5px; }
.cambios td { padding: 1px 0; border: none; vertical-align: top; }
.cambios .cambio-campo { padding-right: 10px; color: var(--muted); white-space: nowrap; }

/* Tachado y no rojo: rojo dice «error» y esto no es un error, es lo que habia
   antes. El tachado es la convencion que ya entiende cualquiera. */
.cambio-antes { text-decoration: line-through; color: var(--muted); }

/* --- Cabeceras que ordenan -------------------------------------------------
   Solo las columnas donde ordenar significa algo: fechas e importes. Ordenar
   por "situacion" alfabeticamente no responde ninguna pregunta. */

.th-orden { padding: 0; }

.th-orden a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

.th-orden a:hover { background: var(--surface-2); text-decoration: none; }
.th-orden.num a { justify-content: flex-end; }

/* La flecha solo aparece en la columna por la que se esta ordenando. Una
   flecha gris en cada cabecera es ruido: no dice cual manda. */
.th-orden .flecha { color: var(--accent); font-size: 10px; }
.th-orden .flecha-off { color: var(--muted); font-size: 10px; opacity: 0; }
.th-orden a:hover .flecha-off { opacity: .55; }

/* --- Titulo de seccion DENTRO de una tabla ---------------------------------
   La matriz de permisos son 19 filas seguidas y sin esto se lee como una lista
   plana: no se ve donde termina Recepcion y empieza Exportacion, que es
   justamente lo que se busca al marcar. Va como fila y no como tabla aparte
   para que las columnas de niveles queden alineadas de punta a punta.

   NO es sticky, y se probo: varias filas sticky dentro del MISMO tbody no se
   empujan entre si — cada una se queda pegada mientras su tbody siga a la
   vista, asi que la segunda se le monta encima a la primera y quedan dos
   titulos de modulo superpuestos. El que si es sticky es el thead, que es el
   que hace falta: al marcar hay que ver de que columna es cada radio. */

.th-grupo {
    text-align: left;
    background: var(--sunken);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: inset 0 -1px 0 var(--line);
}

/* --- Tabla agrupada por niveles --------------------------------------------
   Un arbol dibujado con filas de tabla, para que las columnas de importes
   sigan alineadas entre niveles. Con divs anidados cada nivel tendria su
   propio ancho y no se podrian comparar dos ramas de un vistazo. */

.grupo-abrir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
}

.grupo-abrir:hover { background: var(--surface-2); color: var(--ink); }

/* Un hueco del mismo ancho donde no hay triangulito: sin esto, las hojas
   quedan corridas 24px respecto de sus hermanos con hijos. */
.grupo-hueco { display: inline-block; width: 18px; margin-right: 6px; }

/* El primer nivel pesa mas que los de adentro. Es la jerarquia dicha con
   tipografia en vez de con lineas. */
.tabla-grupos tr[data-nivel="0"] td { font-weight: 600; }
.tabla-grupos tr[data-nivel="1"] td { font-weight: 500; }
.tabla-grupos tr[data-nivel="2"] td { color: var(--ink-2); }

.tabla-grupos td { border-bottom: 1px solid var(--line-soft); }

/* La barra de peso: cuanto de la plata filtrada es este grupo. Un numero al
   lado de otro obliga a compararlos de a dos; una barra se compara sola. */
.barra {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--line-soft);
    overflow: hidden;
    position: relative;
}

.barra::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p, 0%);
    background: var(--accent);
    border-radius: 4px;
}

/* Una tabla que se EDITA, no que se lee: el detalle por línea de una factura.

   Los inputs adentro de una celda necesitan `min-width:0`. Sin eso el navegador
   les respeta el ancho intrínseco del campo —unos 170px— y en vez de encogerse
   desbordan la celda, que es lo que recortaba los importes y dejaba ver "12600"
   donde decía "1260000". El número entero tiene que verse: es lo único que la
   persona está controlando contra el papel. */
.table-detalle td { padding: 6px; vertical-align: middle; }
.table-detalle th { padding: 8px 6px; }
.table-detalle .input { width: 100%; min-width: 0; padding: 7px 8px; font-size: 13px; }
.table-detalle tbody tr:hover td { background: transparent; }

/* Los importes en fuente monoespaciada: alinea las comas de una fila a la otra
   y hace que una cifra de más se vea sin contar dígitos. */
.table-detalle .input[inputmode="decimal"] { font-family: var(--font-mono); text-align: right; }

/* Lo que NO se puede partir en dos renglones.

   Un numero de comprobante cortado como "015-001-" / "0075141" deja de
   parecer un numero de comprobante: hay que volver a juntarlo con la vista
   para compararlo contra el papel, que es justo lo que se esta haciendo. Lo
   mismo una fecha. */
.nowrap { white-space: nowrap; }

/* El proveedor es lo unico que puede ceder ancho, porque es texto y se lee
   igual en dos renglones. */
.col-elastica { width: 99%; }

/* Un nombre de archivo largo no puede repartir la tabla en tres renglones.
   Es un identificador que casi nunca se lee entero: se corta y el completo
   queda en el title. */
.truncar {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lo que todavia no confirmo nadie va atenuado: es una LECTURA, no un hecho.
   Sin esa diferencia, un proveedor leido por la IA se ve igual de firme que
   uno que una persona ya reviso. */
.es-leido { opacity: .72; font-style: italic; }

.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }

/* Una fila atenuada sigue siendo legible: se baja el contraste, no el tamaño.
   Un usuario inactivo tiene que poder leerse para poder reactivarlo. */
.table tr.is-muted td { opacity: .62; }

/* --- Encabezado de página y personas --------------------------------------- */

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.person { display: flex; align-items: center; gap: 10px; }

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    flex: none;
}

.avatar-lg { width: 64px; height: 64px; margin-bottom: 8px; display: block; }

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--accent);
    background: var(--accent-soft);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 560px) {
    .field-row { grid-template-columns: 1fr; }
}

/* =============================================================================
   Multi-select con AJAX — el filtro por defecto del sistema
   =============================================================================
   Portado del filtro de gltmkt (_exec_filterbar.php) y pasado a AJAX.
   Buscador adentro, "Todo / Nada", botón Aplicar y chips de lo elegido.
   Nunca un <select multiple> suelto: no se puede buscar y en celular es inusable.
   ========================================================================== */

.ms-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.ms-bar-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    font-weight: 500;
}

/* La barra de vistas es un control SECUNDARIO —se toca al empezar el dia y
   despues no— asi que no lleva el marco de una tarjeta ni el alto de la barra
   de filtros. Sin fondo ni borde: es un renglon, no una caja. */
.ms-bar--slim {
    padding: 2px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    gap: 6px 12px;
}

.ms-bar--slim .select { padding: 4px 8px; font-size: 12.5px; }
.ms-bar--slim .ms-toggle { padding: 4px 10px; font-size: 12.5px; }
.ms-bar--slim .ms-clear { font-size: 11px; }

.ms { position: relative; }

.ms-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ms-toggle:hover { background: var(--surface-2); }
.ms-toggle[aria-expanded="true"] { border-color: var(--accent); }
.ms-toggle .ms-icon { color: var(--accent); display: inline-flex; }
.ms-toggle .ms-caret { color: var(--muted); transition: transform .15s ease; }
.ms-toggle[aria-expanded="true"] .ms-caret { transform: rotate(180deg); }

.ms-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 9px;
}

.ms-menu {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 200;
    width: 280px;
    max-height: 420px;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
}

.ms-menu.is-open { display: flex; }

.ms-menu-head { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line-soft); }

.ms-search {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--sunken);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.ms-search:focus { outline: none; border-color: var(--accent); }

.ms-mini {
    padding: 5px 9px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink-2);
    font: inherit;
    font-size: 11.5px;
    white-space: nowrap;
    cursor: pointer;
}

.ms-mini:hover { background: var(--surface-2); }

.ms-options { flex: 1; overflow-y: auto; padding: 6px; max-height: 280px; }

.ms-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
}

.ms-opt:hover { background: var(--sunken); }
.ms-opt input { margin: 0; cursor: pointer; accent-color: var(--accent); width: 15px; height: 15px; }
.ms-opt span { flex: 1; }
.ms-opt.is-hidden { display: none; }

.ms-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12.5px; font-style: italic; }

.ms-menu-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--line-soft); }

.ms-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
}

.ms-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.ms-chip-x:hover { background: color-mix(in srgb, var(--accent) 38%, transparent); }

.ms-clear { border: 0; background: transparent; color: var(--crit); font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 5px; cursor: pointer; }
.ms-clear:hover { background: var(--crit-bg); }

/* Estado de carga: la zona de resultados se atenúa pero no salta. */
.ms-results { position: relative; transition: opacity .15s ease; }
.ms-results[aria-busy="true"] { opacity: .45; pointer-events: none; }

/* En celular el menú ocupa el ancho disponible y no se sale de la pantalla. */
@media (max-width: 560px) {
    .ms { position: static; }
    .ms-menu { width: calc(100vw - 40px); left: 0; right: 0; }
    /* «Guardar como…» sigue siendo el ancla del desplegable (si no, el menú se
       va al borde de la barra y tapa su propio botón). El lado y el corrimiento
       los decide ui.js al abrirlo, para que no se salga de la pantalla. */
    .ms.menu-guardar { position: relative; }
    .ms-menu.menu-guardar-panel { width: min(280px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
    .ms-bar { padding: 10px; }
}

/* --- Interruptor de tema --------------------------------------------------- */

.theme-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: 999px; }

.theme-switch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }

/* --- Editor de horarios de sucursal ---------------------------------------- */

.hours-table td { vertical-align: middle; }
.hours-pair { display: flex; align-items: center; gap: 8px; }
.hours-pair .input { width: auto; min-width: 110px; padding: 6px 9px; font-size: 13px; }

@media (max-width: 640px) {
    .hours-pair { flex-wrap: wrap; }
    .hours-pair .input { min-width: 92px; }
}

/* --- Ficha del código QR ---------------------------------------------------- */

.qr-card { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.qr-meta { flex: 1; min-width: 260px; }

/* Fondo blanco fijo: un QR sobre fondo oscuro no lo lee ningún celular, así
   que esta es la única superficie del sistema que NO sigue al tema. */
.qr-figure {
    background: #FFFFFF;
    padding: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    line-height: 0;
}

.token {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .06em;
    background: var(--sunken);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    padding: 2px 7px;
}

.token-lg { font-size: 17px; padding: 5px 11px; }

/* --- Miniaturas e imágenes del catálogo (admin) ----------------------------- */

.thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; background: var(--sunken); }

.thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--line);
    color: var(--muted);
}

.checkline { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; cursor: pointer; font-size: 14px; }
.checkline input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

.image-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--sunken);
}

.image-item img { display: block; width: 100%; height: 130px; object-fit: cover; }
.image-actions { display: flex; flex-direction: column; gap: 4px; padding: 8px; align-items: flex-start; }

/* ── Reordenar la agrupación arrastrando ────────────────────────────────────
   El orden ES el significado: «proveedor y adentro período» y «período y
   adentro proveedor» son dos preguntas distintas. El chip tiene que verse
   agarrable, o nadie descubre que se puede mover. */
.chips-nivel {
    display: inline-flex;
    align-items: center;
    gap: 6px 8px;
    flex-wrap: wrap;
}

.chip-nivel.is-movible {
    cursor: grab;
    /* El fondo se transiciona, no la posición: el chip que se arrastra ya lo
       mueve el navegador, y animar además el reacomodo marea. */
    transition: opacity .12s ease, box-shadow .12s ease;
}

.chip-nivel.is-movible:active { cursor: grabbing; }

.chip-nivel.is-arrastrando { opacity: .4; }

/* Dónde va a caer. Un borde entero cambiaría el ancho del chip y correría a
   los de al lado justo mientras se apunta. */
.chip-nivel.es-destino {
    box-shadow: 0 0 0 2px var(--accent);
}

.chip-nivel.is-movible:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .chip-nivel.is-movible { transition: none; }
}

/* --- El seguimiento comercial ----------------------------------------------
   Dos piezas: las tarjetas por negocio y el arbol de la jerarquia. El arbol
   se abre con <details>, sin JS: la CSP mata el JS inline y aca no hace
   falta ninguno. La sangria por nivel sale de una variable (--seg-nivel) que
   pone la vista, asi la profundidad no esta fijada en el CSS. */

.seg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.seg-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--seg-color, var(--line));
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}

.seg-card:hover { border-color: var(--seg-color, var(--line)); }

.seg-card-unidad {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
}

.seg-card-alc {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.seg-card-detalle, .seg-card-personas { font-size: 12px; color: var(--muted); }

/* La barra: el relleno es el alcance y la rayita vertical es el ritmo del
   mes (dias cargados sobre dias totales). Estar atras de la rayita es ir
   atrasado DE VERDAD; estar atras del 100% a mitad de mes no dice nada. */

.seg-bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--surface-2);
    overflow: hidden;
    align-self: stretch;
}

.seg-bar-relleno {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--seg-color, var(--accent));
}

.seg-bar-ritmo {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--ink);
    opacity: .55;
}

.seg-ritmo-muestra {
    display: inline-block;
    width: 2px;
    height: 12px;
    background: var(--ink);
    opacity: .55;
    vertical-align: middle;
}

/* --- El arbol --- */

.seg-arbol {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.seg-fila {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 34px 104px 104px 64px 104px 104px 64px;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px calc(14px + var(--seg-nivel, 0) * 22px);
    border-top: 1px solid var(--line-soft);
}

.seg-encabezado {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    border-top: none;
    background: var(--sunken);
}

.seg-encabezado .seg-bar-titulo { font-size: 11px; }

/* El triangulo de abrir/cerrar es el del summary, dibujado a mano para que
   sea igual en todos los navegadores. */
summary.seg-fila { cursor: pointer; list-style: none; position: relative; }
summary.seg-fila::-webkit-details-marker { display: none; }

summary.seg-fila .seg-nombre::before {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    margin-right: 7px;
    border-left: 5px solid var(--muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .12s ease;
}

details[open] > summary.seg-fila .seg-nombre::before { transform: rotate(90deg); border-left-color: var(--accent); }

details[open] > summary.seg-fila {
    background: var(--sunken);
    box-shadow: inset 3px 0 0 var(--accent);
}

details[open] > summary.seg-fila .seg-nombre { color: var(--accent); }

summary.seg-fila:hover { background: var(--sunken); }

.seg-quien { display: flex; flex-direction: column; min-width: 0; }

/* Los nombres vienen EN MAYUSCULAS de la nomina y a tamano normal gritan
   (lo dijo Edgar mirando la pantalla): achicados y sin negrita en las hojas,
   el arbol se lee por la sangria y las barras, no por el peso del texto. */
.seg-nombre { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-hoja .seg-nombre { font-weight: 400; }
.seg-cargo { font-size: 10.5px; color: var(--muted); }

.seg-personas {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    text-align: center;
}

.seg-num {
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

.seg-monto { color: var(--ink); }
.seg-de { color: var(--muted); font-weight: 400; }

.seg-propia { background: var(--sunken); }

.seg-ok   { color: var(--ok);   font-weight: 600; }
.seg-warn { color: var(--warn); }
.seg-crit { color: var(--crit); }
.seg-sin  { color: var(--muted); }

.seg-vistas { display: flex; gap: 6px; margin-left: auto; }

/* En angosto quedan el nombre, la venta y su alcance: el resto es de
   escritorio. Las columnas se cuentan por posicion (2 personas, 3 objetivo,
   4 venta, 5 %, 6 obj margen, 7 margen, 8 % margen). */
@media (max-width: 760px) {
    .seg-fila { grid-template-columns: minmax(150px, 1fr) 84px 56px; }
    .seg-fila > span:nth-child(2), .seg-fila > span:nth-child(3),
    .seg-fila > span:nth-child(6), .seg-fila > span:nth-child(7),
    .seg-fila > span:nth-child(8) { display: none; }
}

/* --- La estructura editable ------------------------------------------------
   El arbol lo dibuja assets/js/estructura.js. Aca solo esta como se ve:
   filas con sangria por nivel (--est-nivel), chips de locales, el buscador
   flotante y la barra de cambios sin guardar. */

.est-arbol {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    min-height: 120px;
}

.est-grupo {
    padding: 8px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    background: var(--sunken);
    border-top: 1px solid var(--line-soft);
}

.est-fila {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(160px, auto) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px calc(14px + var(--est-nivel, 0) * 24px);
    border-top: 1px solid var(--line-soft);
}

.est-fila[draggable="true"] { cursor: grab; }
.est-fila:hover { background: var(--sunken); }

/* La rayita de la sangria: se ve de que rama es cada fila sin contar espacios. */
.est-fila { background-image: linear-gradient(var(--line-soft), var(--line-soft)); background-repeat: no-repeat; background-size: 1px 100%; background-position: calc(7px + var(--est-nivel, 0) * 24px) 0; }
.est-fila[style*="--est-nivel: 0"] { background-image: none; }

.est-quien { display: flex; flex-direction: column; min-width: 0; }
.est-nombre { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-cargo { font-size: 10.5px; color: var(--muted); }

/* Lo que esta mal se ve en la fila: una raya del color de lo peor que
   tiene, y las marcas abajo del cargo. Rojo = hace perder plata o deja venta
   sin duenio; ambar = revisar antes de pagar (Estructura::PROBLEMAS). */
.est-prob-crit { box-shadow: inset 3px 0 0 var(--crit); }
.est-prob-crit .est-nombre { color: var(--crit); }
.est-prob-warn { box-shadow: inset 3px 0 0 var(--warn); }

.est-marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.est-marca {
    font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 7px;
    border-radius: 999px; cursor: help; white-space: nowrap;
}
.est-marca.es-crit  { background: var(--crit-bg); color: var(--crit); }
.est-marca.es-warn  { background: var(--warn-bg); color: var(--warn); }
.est-marca.es-dentro { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-weight: 500; }
.est-marca.es-dentro-crit { color: var(--crit); border-color: var(--crit); }

/* El tablero de arriba del arbol: un contador por problema, que filtra. */
.est-problemas { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.est-problemas-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.est-problemas-tit { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.est-contador {
    font: inherit; font-size: 12.5px; display: inline-flex; align-items: baseline; gap: 5px;
    padding: 5px 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid transparent;
}
.est-contador b { font-variant-numeric: tabular-nums; }
.est-contador.es-crit { background: var(--crit-bg); color: var(--crit); }
.est-contador.es-warn { background: var(--warn-bg); color: var(--warn); }
.est-contador:hover { border-color: currentColor; }
.est-contador.es-activo { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }
.est-contador:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.est-problemas-exp {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    font-size: 12.5px; padding: 8px 12px; border-radius: 8px; background: var(--sunken);
    border-left: 3px solid var(--warn);
}
.est-problemas-exp.es-crit { border-left-color: var(--crit); }
.est-problemas-nota { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.est-todo-bien { font-size: 12.5px; color: var(--ok); font-weight: 600; }

/* Lo movido y todavia sin guardar se marca: se tiene que VER que hay algo
   pendiente ademas del numero de la barra. */
.est-cambiada { box-shadow: inset 3px 0 0 var(--accent); background: var(--sunken); }

.est-arrastrando { opacity: .4; }
.est-destino { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--sunken); }

.est-locales { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

.est-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--sunken);
    white-space: nowrap;
}

.est-chip-x {
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
}
.est-chip-x:hover { color: var(--crit); }

.est-mini {
    font-size: 10.5px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.est-mini:hover { border-color: var(--accent); color: var(--accent); }

.est-acciones { display: flex; gap: 4px; }

/* El buscador flotante: un input y una lista, nada mas. */
.est-pop {
    position: absolute;
    z-index: 60;
    width: 330px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    padding: 10px;
}

.est-pop-titulo { font-size: 11px; color: var(--muted); margin-bottom: 6px; }

.est-pop-lista { max-height: 260px; overflow: auto; margin-top: 6px; display: flex; flex-direction: column; }

.est-pop-opcion {
    text-align: left;
    border: none;
    background: none;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--ink);
    cursor: pointer;
    border-radius: 6px;
}
.est-pop-opcion:hover, .est-pop-opcion.es-primera { background: var(--sunken); }

.est-pop-nada { padding: 8px; font-size: 12px; color: var(--muted); }

/* La barra de cambios: pegada abajo, no se puede no ver. */
.est-barra {
    position: sticky;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 760px) {
    .est-fila { grid-template-columns: 1fr auto; }
    .est-locales { display: none; }
}

/* --- Estructura: no perderse adentro del arbol -----------------------------
   La miga (el camino de la primera fila visible), la flechita de plegar
   cada equipo y los botones de arriba. */

.est-herramientas { display: flex; gap: 6px; margin-top: 12px; align-items: center; }

.est-mini.es-activo { border-color: var(--accent); color: var(--accent); }

.est-quien { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
.est-textos { display: flex; flex-direction: column; min-width: 0; }

.est-caret {
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 11px;
    padding: 2px 3px;
    flex: none;
    transition: transform .12s ease;
}
.est-caret.es-plegado { transform: rotate(-90deg); color: var(--accent); }

.est-migas {
    position: sticky;
    z-index: 40;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 7px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
}

.est-miga-unidad { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.est-miga-sep { color: var(--muted); }

.est-miga-paso {
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}
.est-miga-paso:hover { text-decoration: underline; }

.est-pop-opcion.es-marcada { color: var(--accent); font-weight: 600; }

/* El nivel abierto a mano queda marcado: despues de Plegar todo, lo que se
   abrio es el hilo del que se esta tirando. Mismo lenguaje que el resaltado
   del padre abierto en el seguimiento. */
.est-fila.est-abierta { background: var(--sunken); box-shadow: inset 3px 0 0 var(--accent); }
.est-fila.est-abierta .est-nombre { color: var(--accent); }
.est-fila.est-abierta.est-cambiada { box-shadow: inset 3px 0 0 var(--accent); }

/* El cargo, tocable: se corrige eligiendo del catalogo, nunca tipeando. */
.est-cargo-btn {
    border: none;
    background: none;
    padding: 0;
    font-size: 10.5px;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.est-cargo-btn:hover { color: var(--accent); }

/* El resultado vacio habla: una caja en blanco parece un error. */
.est-vacio { padding: 22px 16px; color: var(--muted); font-size: 13px; }
.est-vacio-pista { margin-top: 6px; font-size: 12px; }

/* --- El tablero de control de RRHH -----------------------------------------
   Una tarjeta por control: semaforo en el borde, el numero grande, el que
   significa y el boton de ir a arreglarlo. */

.ctl-lista { display: flex; flex-direction: column; gap: 10px; }

.ctl-tarjeta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 10px;
}

.ctl-tarjeta.es-crit { border-left-color: var(--crit); }
.ctl-tarjeta.es-warn { border-left-color: var(--warn); }
.ctl-tarjeta.es-ok   { border-left-color: var(--ok); opacity: .75; }

.ctl-n {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    min-width: 46px;
    text-align: center;
    flex: none;
}
.es-crit .ctl-n { color: var(--crit); }
.es-warn .ctl-n { color: var(--warn); }
.es-ok   .ctl-n { color: var(--ok); }

.ctl-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctl-titulo { font-weight: 600; font-size: 13.5px; }
.ctl-detalle { font-size: 12px; color: var(--muted); }

.ctl-accion { margin-left: auto; flex: none; white-space: nowrap; }

@media (max-width: 640px) {
    .ctl-tarjeta { flex-wrap: wrap; }
    .ctl-accion { margin-left: 60px; }
}

/* --- El esquema de comisiones: una linea por cargo -------------------------
   Dos versiones en matriz (16 y 12 columnas de inputs) y Edgar las dos veces:
   «no se entiende». Una matriz sirve para COMPARAR; aca se CARGA un cargo
   por vez. Entonces: una linea legible por cargo —«Margen 60 · Venta 40 = 100,
   individual»— que se abre con <details> (sin JS: la CSP mata el inline) y
   muestra su editor. El cargo abierto llega por la URL (`abrir=`), asi que
   despues de guardar o agregar se vuelve con ESE abierto. */

.com-lista { display: flex; flex-direction: column; gap: 6px; }

.com-cargo {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.com-cargo[open] { border-color: var(--accent); }

.com-linea {
    list-style: none;
    display: grid;
    grid-template-columns: 14px minmax(190px, 1.2fr) minmax(220px, 2fr) 130px minmax(110px, .8fr);
    gap: 12px;
    align-items: center;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13.5px;
}
.com-linea::-webkit-details-marker { display: none; }
.com-linea:hover { background: var(--sunken); }

.com-flecha { color: var(--muted); font-size: 12px; transition: transform .15s; }
.com-cargo[open] .com-flecha { transform: rotate(90deg); }

.com-nombre b { display: block; }
.com-nombre .small { display: block; line-height: 1.25; }
.com-pesos { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.com-total { white-space: nowrap; }
.com-total b { font-size: 14px; }
.com-total .small { display: block; line-height: 1.2; }
.com-donde { text-align: right; white-space: nowrap; }

.com-sindato { color: var(--warn); }
input.com-sindato { color: var(--warn); font-weight: 600; }
.com-ok  { color: var(--ok); }
.com-mal { color: var(--crit); }
.com-badge-mal { background: var(--crit-bg); color: var(--crit); }

/* El editor: dos columnas —cuando/cuanto y sobre que | que pesa— y las
   acciones abajo. En angosto, una columna. */
.com-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 32px;
    padding: 6px 16px 14px 40px;
    border-top: 1px solid var(--line-soft);
}
.com-h3 { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.com-campo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: 13px; }
.com-campo > span { color: var(--ink-2); }
.com-campo--linea { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.com-num { width: 76px; text-align: right; padding: 5px 8px; font-variant-numeric: tabular-nums; }
.com-acciones { grid-column: 1 / -1; display: flex; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }

@media (max-width: 900px) {
    .com-linea { grid-template-columns: 14px 1fr; }
    .com-pesos, .com-total, .com-donde { grid-column: 2; text-align: left; white-space: normal; }
    .com-editor { grid-template-columns: 1fr; padding-left: 16px; }
}

/* La pestaña «Cálculo»: arriba la unidad (la puerta y el escalón deciden
   para todos), después una línea por persona agrupada por cómo le fue. */
.calc-unidad {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
    margin: 16px 0 12px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.calc-unidad-num { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-unidad-txt { flex: 1 1 320px; font-size: 13.5px; color: var(--ink-2); }
.calc-unidad-total { text-align: right; font-size: 13px; color: var(--muted); }
.calc-unidad-total b { display: block; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.calc-grupo { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.calc-linea { grid-template-columns: 14px minmax(200px, 1.4fr) minmax(160px, 1fr) minmax(140px, .9fr) 120px; }
.calc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-detalle { padding: 4px 16px 12px 40px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.calc-detalle table { width: auto; min-width: 360px; }
.calc-detalle td { padding: 3px 14px 3px 0; }
@media (max-width: 900px) {
    .calc-linea .calc-num { grid-column: 2; text-align: left; }
    .calc-detalle { padding-left: 16px; }
    .calc-detalle table { min-width: 0; }
}

/* ===========================================================================
   Contabilidad: el circuito de la factura
   ---------------------------------------------------------------------------
   Una linea por factura, no una grilla. Edgar rechazo dos matrices de inputs
   seguidas en Comisiones y la leccion vale igual aca: una matriz sirve para
   COMPARAR, y en estas pantallas lo que se hace es elegir una y entrar, o
   leer como quedo y corregirla.

   La linea (`.ct-fila`) es una grilla de columnas fijas para que todas las
   filas se lean alineadas: reloj, quien, monto, estado, acciones. Lo que no
   aplica se omite y la columna queda vacia, que es mejor que desalinear.
   =========================================================================== */

.ct-lista { display: flex; flex-direction: column; }

.ct-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
}

.ct-lista > *:first-child .ct-fila,
.ct-lista > .ct-fila:first-child { border-top: none; }

.ct-fila.es-apagada { opacity: .55; }

/* La linea con checkbox es un <label>: se marca haciendo clic en cualquier
   lado, que es como se firman veinte facturas sin apuntar a un cuadradito. */
.ct-fila-check { cursor: pointer; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; }
.ct-fila-check:hover { background: rgba(128, 128, 128, .06); }

.ct-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-quien .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ct-monto { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.ct-estado { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ct-acciones { display: flex; align-items: center; gap: 6px; }
.ct-check { display: flex; align-items: center; }

/* El reloj. El papel sobre un escritorio molesta solo; una fila en una tabla
   envejece callada, asi que los dias se ven y a partir de cierto punto gritan. */
.ct-dias { min-width: 40px; text-align: right; }
.ct-dias-aviso { color: var(--warn); font-weight: 600; }
.ct-dias-mal   { color: var(--crit); font-weight: 700; }

.ct-linea-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(128, 128, 128, .12);
    font-size: 11.5px; font-weight: 600; color: var(--muted); flex: none;
}

/* --- Imputar: la pantalla partida ----------------------------------------- */

/* La factura a la izquierda y el sello a la derecha, como el papel en la
   mano. En el telefono se apilan y la evidencia va arriba: primero se mira
   que se compro, despues se imputa. */
.ct-partida {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 22px; margin-top: 16px; align-items: start;
}

@media (max-width: 900px) {
    .ct-partida { grid-template-columns: minmax(0, 1fr); }
    .ct-evidencia { position: static; }
}

.ct-evidencia { position: sticky; top: 12px; }
.ct-escaneo {
    width: 100%; max-height: 62vh; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surface); display: block;
}
object.ct-escaneo { height: 62vh; }

.ct-items { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow: auto; }
.ct-item {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: 12.5px; padding: 3px 0; border-top: 1px solid var(--line);
}

/* --- Que es: dos opciones grandes, no un select --------------------------- */

/* Es la primera pregunta y cambia todo lo demas. Un desplegable de dos
   opciones se contesta sin leerlo; dos tarjetas con su explicacion, no. */
.ct-clase { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
@media (max-width: 560px) { .ct-clase { grid-template-columns: 1fr; } }

.ct-opcion {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
    cursor: pointer; background: var(--surface);
}
.ct-opcion:hover { border-color: var(--accent); }
.ct-opcion:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ct-opcion input { margin-top: 3px; flex: none; }

/* --- El reparto ----------------------------------------------------------- */

.ct-reparto { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* Lo que sugiere el historial de SAP (F4): arriba del reparto, con lo que ya
   quedó puesto en la línea 1 y las otras opciones a un toque. */
.ct-sugerencia {
    margin-top: 10px; padding: 10px 13px;
    border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px;
    background: var(--accent-soft);
}
.ct-sugerencia .eyebrow { margin: 0 0 3px; }
.ct-sugerencia p { margin: 0 0 6px; line-height: 1.55; }
.ct-sugerencia p:last-child { margin-bottom: 0; }
.ct-sugerencia .btn-sm { padding: 2px 9px; margin-left: 4px; }
.ct-sugerencia a.es-elegida { font-weight: 600; text-decoration: none; }
/* Una casilla al lado de un campo («sin tope» en Quién autoriza en cada área). */
.ct-opcion-chica { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; align-self: end; padding-bottom: 8px; }
.ct-sugerencia a.es-elegida::after { content: ' ✓'; }

/* Cinco campos arriba y el detalle abajo, ocupando el ancho entero.
   Juntos en un solo renglon el detalle queda cortado a la mitad —y es el
   unico campo que es una FRASE, el que despues se lee en SAP. */
.ct-linea {
    display: grid;
    grid-template-columns: auto minmax(0, 2.2fr) minmax(0, 1.5fr) 128px 74px;
    gap: 9px 10px; align-items: end;
    padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}

.ct-campo-detalle { grid-column: 2 / -1; }

/* La linea vacia del final: siempre hay donde escribir la siguiente, sin
   apretar un boton antes. Es la fila en blanco de una planilla. */
.ct-linea.es-nueva { border-style: dashed; opacity: .8; }
.ct-linea.es-nueva:focus-within { opacity: 1; border-style: solid; }

@media (max-width: 760px) {
    .ct-linea { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
    .ct-campo-detalle { grid-column: 1 / -1; }
}

.ct-campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-campo > span { font-size: 11.5px; color: var(--muted); }

.ct-suma { margin: 10px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ct-suma.es-ok  { color: var(--ok); font-weight: 600; }
.ct-suma.es-mal { color: var(--crit); font-weight: 600; }

.ct-botones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* --- La cadena de aprobacion ---------------------------------------------- */

.ct-cadena { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ct-paso {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
}
.ct-paso-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; flex: none;
}
.ct-paso-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* --- El rastro ------------------------------------------------------------ */

.ct-historial > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.ct-hito {
    display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
    border-top: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap;
}

/* --- Catalogos ------------------------------------------------------------ */

.ct-unidad { border-top: 1px solid var(--line); }
.ct-unidad > summary { cursor: pointer; padding: 9px 4px; display: flex; gap: 10px; align-items: baseline; }
.ct-unidad .ct-lista { padding-left: 18px; padding-bottom: 8px; }

/* El embudo del censo dentro del Inicio: plegado, porque «donde esta parado
   esto» no es una pregunta de todos los dias. Lo de todos los dias esta
   arriba y abierto. */
.ct-embudo { border-top: 1px solid var(--line); padding-top: 14px; }
.ct-embudo > summary { cursor: pointer; padding: 6px 4px; }
.ct-embudo[open] > summary { margin-bottom: 4px; }

.ct-editable > summary { cursor: pointer; list-style: none; }
.ct-editable > summary::-webkit-details-marker { display: none; }
.ct-editable[open] > summary .ct-fila { border-bottom: 1px dashed var(--line); }

.ct-editor {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; padding: 12px 10px 14px; align-items: end;
}

/* Devolver: el motivo aparece al lado del boton, sin salir de la lista.
   Abrir otra pantalla para escribir una linea es lo que hace que nadie
   escriba el motivo. */
.ct-devolver > summary { list-style: none; }
.ct-devolver > summary::-webkit-details-marker { display: none; }
.ct-devolver-caja { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.ct-devolver-caja .input { min-width: 200px; }

/* --- Aprobar o rechazar --------------------------------------------------- */

.ct-decidir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; align-items: start; }
@media (max-width: 760px) { .ct-decidir { grid-template-columns: 1fr; } }
.ct-decidir form {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px; border: 1px solid var(--line); border-radius: 12px;
}

/* --- El plan de cuentas --------------------------------------------------- */

/* La diferencia que hay que ver sin leer es `Postable`: un titulo de grupo y
   una cuenta imputable se llaman parecido y estan a dos renglones, y solo una
   acepta un asiento. Los titulos van en gris y sin peso; las imputables, con
   el codigo marcado. */
.ct-plan { padding: 4px 0 10px; }

.ct-cuenta {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}

.ct-cuenta-cod { font-variant-numeric: tabular-nums; }
.ct-cuenta-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ct-cuenta.es-titulo { color: var(--muted); }
.ct-cuenta.es-titulo .ct-cuenta-cod { opacity: .7; }
.ct-cuenta.es-postable .ct-cuenta-cod { font-weight: 600; color: var(--ink); }

/* --- «Traer de SAP» -------------------------------------------------------- */

/* Un catalogo de hace tres semanas se ve IGUAL que uno de anoche. La fecha de
   la ultima carga es lo unico que lo delata, asi que va arriba y a la vista, y
   a partir de una semana se pone en ambar. */
.ct-sap {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 11px 13px; margin: 12px 0;
    border: 1px solid var(--line); border-left-width: 3px; border-radius: 10px;
    background: var(--surface); font-size: 13px;
}

.ct-sap-texto { flex: 1; min-width: 240px; }
.ct-sap.es-vacio { border-left-color: var(--muted); }
.ct-sap.es-viejo { border-left-color: var(--warn); }
.ct-sap:not(.es-vacio):not(.es-viejo) { border-left-color: var(--ok); }

/* Ratios del balance: la cabecera queda fija debajo de la barra del sistema,
   como la del balance (.bal-cabeza). */
.bal-ratios { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bal-ratios thead th {
    position: sticky; top: var(--alto-topbar, 0px); z-index: 5;
    background: var(--surface); box-shadow: 0 1px 0 var(--line);
}

/* El Balance en dos columnas: el paso a paso del cierre (_pasos.php) en el
   margen izquierdo, fijo al bajar, y el balance a la derecha. En angosto
   (< 1100px) el paso a paso sube arriba en UNA línea: marca y título, el
   detalle queda en el title y en el botón. */
.bal-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.bal-lado { position: sticky; top: calc(var(--alto-topbar, 0px) + 12px); }
.bal-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; }
.bal-cabecera > .h1 { align-self: center; }
.bal-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 0 auto; }
.bal-filtros .field > span { font-size: 12px; }

.bal-pasos { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bal-pasos-titulo { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bal-pasos ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bal-paso { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius); background: color-mix(in srgb, var(--paso) 7%, var(--surface)); border-left: 3px solid var(--paso); --paso: var(--line); }
.bal-paso > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.bal-paso > div > form, .bal-paso > div > .btn { align-self: flex-start; margin-top: 2px; }
.bal-paso .small { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.bal-paso-marca { flex: 0 0 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--surface); background: var(--paso); margin-top: 1px; }
.bal-paso.es-ok        { --paso: var(--ok); }
.bal-paso.es-pendiente { --paso: var(--warn); }
.bal-paso.es-error     { --paso: var(--crit); }
.bal-paso.es-info      { --paso: var(--muted); }
.bal-paso.es-info .bal-paso-marca { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.bal-paso-botones { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.bal-pasos-resultado { margin: 10px 2px 0; color: var(--muted); }
.bal-pasos-resultado b { color: var(--ink); display: block; font-size: 15px; }

/* Lo hecho ocupa una línea: el detalle sólo si falta algo. */
.bal-paso.es-ok .small { display: none; }

@media (max-width: 1100px) {
    .bal-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .bal-lado { position: static; order: -1; }
    .bal-pasos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; }
    .bal-pasos-titulo { margin: 0; }
    .bal-pasos ol { flex-direction: row; flex-wrap: wrap; }
    .bal-paso { align-items: center; padding: 4px 8px; }
    .bal-paso > div { flex-direction: row; align-items: center; gap: 6px; }
    .bal-paso .small { display: none; }
    .bal-paso > div > form, .bal-paso > div > .btn, .bal-paso-botones { margin-top: 0; }
    .bal-pasos-resultado { margin: 0 0 0 auto; }
    .bal-pasos-resultado b { display: inline; }
    .bal-filtros { margin-left: 0; }
}

/* «Cómo funciona» (views/contabilidad/como-funciona.php): el viaje del número
   en una grilla de etapas × carriles por rol, las reglas en tarjetas. */
.cf-indice { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 6px; }
.cf-seccion { margin-top: 28px; scroll-margin-top: calc(var(--alto-topbar, 0px) + 12px); }
.cf-seccion > .h2 { margin: 0 0 4px; }
.cf-viaje {
    display: grid; grid-template-columns: 110px repeat(var(--etapas), minmax(0, 1fr)); gap: 6px; margin-top: 12px;
    --c-sap: var(--warn); --c-conta: var(--accent); --c-app: var(--ok);
}
.cf-etapa { font-weight: 600; padding: 6px 4px; border-bottom: 2px solid var(--line); }
.cf-etapa span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line); font-size: 12px; margin-right: 4px; }
.cf-carril { font-size: 13px; font-weight: 600; padding: 8px 6px; border-radius: var(--radius); display: flex; align-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
.cf-celda { border-radius: var(--radius); background: color-mix(in srgb, var(--c) 4%, transparent); min-height: 40px; }
.cf-sap   { --c: var(--c-sap); }
.cf-conta { --c: var(--c-conta); }
.cf-app   { --c: var(--c-app); }
.cf-tarjeta { height: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c); display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.35; }
.cf-tarjeta span { color: var(--muted); }
.cf-pasos { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; max-width: 820px; }
.cf-reglas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.cf-reglas article { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cf-reglas h3 { margin: 0 0 6px; font-size: 15px; }
.cf-reglas p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.cf-glosario { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0 0; max-width: 820px; }
.cf-glosario dt { font-weight: 600; }
.cf-glosario dd { margin: 0; color: var(--muted); }

.cf-viaje-movil { display: none; list-style: none; padding: 0; margin: 12px 0 0; --c-sap: var(--warn); --c-conta: var(--accent); --c-app: var(--ok); }
.cf-viaje-movil li { counter-increment: etapa; display: grid; gap: 6px; margin-bottom: 14px; }
.cf-viaje-movil li > b::before { content: counter(etapa) ". "; }
.cf-viaje-movil small { color: var(--c); font-weight: 600; }

/* En angosto, el viaje se lee etapa por etapa (.cf-viaje-movil). */
@media (max-width: 760px) {
    .cf-viaje { display: none; }
    .cf-viaje-movil { display: block; counter-reset: etapa; }
    .cf-glosario { grid-template-columns: 1fr; gap: 2px; }
    .cf-glosario dd { margin-bottom: 8px; }
}
.cf-reglas p b { color: var(--ink); }

/* Administración › Cómo funciona (views/administracion/como-funciona.php): el
   mismo molde, con cinco carriles. Un color por rol, tomado de las secciones del
   menú, que ya tienen su versión oscura. */
.cf-viaje, .cf-viaje-movil {
    --c-rec: var(--sec-recepcion); --c-resp: var(--sec-documento); --c-ger: var(--sec-exportar);
    --c-adm: var(--sec-contabilidad); --c-sis: var(--sec-administracion);
}
.cf-rec  { --c: var(--c-rec); }
.cf-resp { --c: var(--c-resp); }
.cf-ger  { --c: var(--c-ger); }
.cf-adm  { --c: var(--c-adm); }
.cf-sis  { --c: var(--c-sis); }
/* Dos tarjetas por fila (una en el teléfono), con su estado arriba. */
.cf-dos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cf-dos article > .badge { display: inline-block; margin-bottom: 8px; }
.cf-sub { font-size: 16px; margin: 20px 0 6px; }
.cf-texto { margin: 0 0 8px; max-width: 900px; line-height: 1.5; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cf-tabla { max-width: 1100px; overflow-x: auto; margin: 4px 0 8px; }
.cf-pasos-chico { font-size: 14px; gap: 4px; margin: 6px 0 8px; }

/* Catálogos › Matriz de aprobación (16/10/2026): cada área con su escalera de
   firmas; las vacías en una línea; las reglas generales plegadas al final. */
.mt-seccion { margin-top: 14px; display: grid; gap: 10px; }
.mt-seccion > .h2 { margin: 0; }
.mt-seccion > p { margin: 0; }
.mt-area { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; display: grid; gap: 10px; max-width: 900px; }
.mt-area-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mt-area-cab h3 { margin: 0; font-size: 16px; }
.mt-escalera { list-style: none; margin: 0; padding: 0; display: grid; }
.mt-escalera li { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.mt-escalera li:first-child { border-top: 0; }
.mt-escalera li.es-baja { opacity: .7; }
.mt-tramo { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); }
.mt-quien { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.mt-quitar { margin: 0; }
.mt-agregar > summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 600; width: fit-content; }
.mt-agregar[open] > summary { margin-bottom: 8px; }
.mt-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.mt-form .ct-campo { min-width: 180px; }
.mt-form-nota { flex-basis: 100%; margin: 0; }
.mt-vacias { max-width: 900px; padding: 10px 16px; border: 1px dashed var(--line); border-radius: var(--radius); display: grid; gap: 8px; }
.mt-vacias p { margin: 0; }
.mt-general { margin-top: 22px; max-width: 900px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; }
.mt-general > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mt-general[open] > summary { margin-bottom: 10px; }
.mt-hueco { margin: 0 0 8px; display: grid; gap: 4px; }
.mt-cuales > summary { cursor: pointer; width: fit-content; }
@media (max-width: 640px) {
    .mt-escalera li { grid-template-columns: minmax(0, 1fr) auto; }
    .mt-tramo { grid-column: 1 / -1; }
}

/* El circuito de Facturas recibidas (15/10/2026): carriles por rol x seis
   pasos, con las flechas que dibuja como-funciona.js encima de la grilla. Es
   la presentación para clientes llevada adentro. Sin JS se ve igual, sin
   flechas y sin el paso a paso. */
.cf-flujo-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.cf-flujo-nav button { font: 600 13px/1 var(--font-sans); color: var(--ink-2); background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.cf-flujo-nav button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.cf-flujo-nav button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cf-flujo-lienzo { overflow-x: auto; }
.cf-flujo {
    position: relative; display: grid; grid-template-columns: 140px repeat(6, minmax(150px, 1fr));
    column-gap: 40px; row-gap: 8px; min-width: 1180px; padding: 2px 2px 8px;
    --c-auto: var(--sec-sifen); --c-area: var(--sec-recepcion); --c-firma: var(--sec-presupuesto);
    --c-adm2: var(--sec-documento); --c-conta2: var(--sec-contabilidad);
}
.cf-flujo .l-auto  { --c: var(--c-auto); }
.cf-flujo .l-area  { --c: var(--c-area); }
.cf-flujo .l-firma { --c: var(--c-firma); }
.cf-flujo .l-adm   { --c: var(--c-adm2); }
.cf-flujo .l-conta { --c: var(--c-conta2); }
.cf-flujo-col { grid-row: 1; display: flex; align-items: baseline; gap: 6px; padding: 2px 2px 8px; border-bottom: 2px solid var(--line); font-weight: 600; }
.cf-flujo-col span { font: 600 12px/1 var(--font-mono); color: var(--muted); }
.cf-flujo-col.activa { border-bottom-color: var(--brand); }
.cf-flujo-fondo { grid-column: 1 / -1; border-radius: var(--radius); background: color-mix(in srgb, var(--c) 7%, var(--surface)); z-index: 0; }
.cf-flujo-carril { grid-column: 1; z-index: 1; padding: 12px 4px 12px 12px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.cf-flujo-carril b { color: var(--c); font-size: 14px; }
.cf-flujo-carril span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.cf-flujo-celda { z-index: 2; padding-block: 12px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.cf-flujo .cf-tarjeta { height: auto; border-left-width: 4px; transition: opacity .25s; }
.cf-flujo .cf-tarjeta.almacen { border: 1.5px solid var(--c); border-left-width: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 10%, transparent); }
.cf-flujo .cf-tarjeta small { color: var(--muted); font-size: 12px; }
.cf-flujo-flechas { position: absolute; inset: 0 auto auto 0; z-index: 3; pointer-events: none; overflow: visible; }
.cf-flujo-flechas path { fill: none; stroke: var(--ink-2); stroke-width: 1.8; transition: opacity .25s; }
.cf-flujo-flechas path.alimenta { stroke: var(--muted); stroke-dasharray: 5 4; }
.cf-flujo-flechas path.vuelve { stroke: var(--muted); stroke-dasharray: 2 4; stroke-linecap: round; }
.cf-flujo-flechas .punta { fill: var(--ink-2); }
.cf-flujo-flechas .punta-gris { fill: var(--muted); }
.cf-flujo-flechas text { font: 600 12px var(--font-sans); fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.cf-flujo-flechas text.alimenta { fill: var(--muted); }
.cf-flujo .apagado, .cf-flujo-flechas .apagado { opacity: .18; }
.cf-flujo-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.cf-flujo-leyenda i { display: inline-block; width: 28px; border-top: 2px solid var(--ink-2); vertical-align: middle; margin-right: 6px; }
.cf-flujo-leyenda i.alimenta { border-top: 2px dashed var(--muted); }
.cf-flujo-leyenda i.vuelve { border-top: 2px dotted var(--muted); }
.cf-paso-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-top: 10px; }
.cf-paso { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 8px; align-content: start; min-width: 0; }
.cf-paso h3 { margin: 0; font-size: 15px; }
.cf-paso h3 span { color: var(--brand); margin-right: 6px; }
.cf-paso ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14px; line-height: 1.45; }
.cf-paso .cf-dato { background: var(--sunken); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13.5px; color: var(--ink-2); }
.cf-paso table { font-size: 13.5px; }
.cf-topes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; font-size: 13px; }
.cf-topes div { padding: 8px 10px; color: var(--muted); border-right: 1px solid var(--line-soft); }
.cf-topes div:last-child { border-right: 0; }
.cf-topes b { display: block; color: var(--ink); }
.cf-topes .elegido { background: color-mix(in srgb, var(--sec-presupuesto) 12%, var(--surface)); }
@media (max-width: 760px) {
    .cf-flujo-nav, .cf-flujo-lienzo, .cf-flujo-leyenda { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cf-flujo .cf-tarjeta, .cf-flujo-flechas path { transition: none; }
}

/* El filtro de cuentas del balance (balance.js). Los totales de los grupos
   quedan como están: son del grupo completo, no de lo filtrado. */
.bal-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.bal-filtro input[type="search"] { min-width: 260px; flex: 0 1 320px; }
.bal-filtro label { display: flex; align-items: center; gap: 6px; }
.bal-filtro select { width: auto; }
.bal [hidden] { display: none !important; }
.bal-cuenta.es-coincide > span:first-child { font-weight: 650; }

/* La foto de saldos por socio de la pestaña Tops (_tops.php): estado y botón en una línea. */
.bal-socios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bal-socios form { margin: 0 0 0 auto; }

/* Conciliaciones (views/contabilidad/conciliaciones): una caja por estado
   arriba, que filtra la lista; la tarjeta de un ID; una línea por ID. */
.cc-resumen { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.cc-caja { flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--cc, var(--line)); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.cc-caja small { color: var(--muted); font-size: 12px; }
.cc-caja b { font-size: 16px; }
.cc-caja span { font-size: 13px; color: var(--ink-2); }
.cc-caja.es-actual { background: color-mix(in srgb, var(--cc, var(--accent)) 10%, var(--surface)); }
.cc-caja.es-diferencia { --cc: var(--crit); }
.cc-caja.es-sin_id     { --cc: var(--warn); }
.cc-caja.es-en_curso   { --cc: var(--sec-compras); }
.cc-caja.es-cerrado    { --cc: var(--ok); }
.cc-caja.es-total      { --cc: var(--ink-2); flex-basis: 230px; }
.cc-nota { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-nota select { width: auto; }
.cc-nota input[name="obs"] { flex: 1 1 320px; }
.cc-mover { display: flex; gap: 4px; align-items: center; margin: 0; }
.cc-mover .input { width: 80px; padding: 3px 6px; }
.cc-lista li { position: relative; }
.cc-lista li.es-foco { background: var(--accent-soft); }
.cc-saldo { float: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Los modales del cruce con SAP (ui.js): la ficha de un documento encima de
   la lista, y el formulario de justificar. */
.modal-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.modal-cabeza .modal-titulo { margin: 0; flex: 1; }
.modal-caja.es-ficha { width: min(1180px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-caja.es-form { width: min(520px, 100%); }
.modal-caja.es-form .field { display: block; margin-bottom: 12px; }
.modal-caja.es-form .field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.modal-caja.es-form .input, .modal-caja.es-form .select, .modal-caja.es-form textarea { width: 100%; }

/* --- Cruce con SAP: la bandeja (060) --------------------------------------- */
/* Los botones de arriba son el filtro: cuánto hay de cada «qué hacer». */
.cruce-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.cruce-boton {
    padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.cruce-boton b { color: var(--ink); }
.cruce-boton:hover { background: var(--surface-2); text-decoration: none; }
.cruce-boton.is-actual { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
.cruce-boton.is-vacio { opacity: .5; }
.cruce-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
/* Una línea por comprobante: el proveedor largo se corta, no se parte. */
.cruce-tabla .cruce-prov { max-width: 0; width: 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cruce-tabla td.num, .cruce-tabla th.num { text-align: right; }
.cruce-tabla tr.con-detalle td { border-bottom: 0; }
.cruce-tabla tr.cruce-detalle td { padding-top: 0; font-size: 12px; color: var(--ink-2); }
/* Los totales de toda la lista, pegados abajo: se ven sin bajar hasta el
   final. Sticky el tfoot entero y no cada fila: dos filas sticky se montan
   una encima de la otra (ver .th-grupo). Opaco, como el thead. */
.table-scroll .cruce-tabla tfoot { position: sticky; bottom: 0; z-index: 2; }
.cruce-tabla tfoot td { background: var(--surface-2); font-weight: 600; border-bottom: 0; }
.cruce-tabla tfoot tr:first-child td { box-shadow: inset 0 1px 0 var(--line); }

/* ===========================================================================
   Presupuesto (docs/14). La historia de una unidad es una tabla de LECTURA:
   números como texto, el concepto como renglón de subtotal y la columna de la
   cuenta fija al costado para que los doce meses se puedan correr.
   =========================================================================== */
.ppto-tabla th, .ppto-tabla td { padding: 7px 10px; white-space: nowrap; }
.ppto-tabla .num { min-width: 64px; }
.ppto-tabla .ppto-col-cuenta { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 280px; max-width: 360px; white-space: normal; }
.ppto-tabla thead .ppto-col-cuenta { background: var(--sunken); z-index: 3; }
.ppto-tabla tr.ppto-concepto td { font-weight: 600; background: var(--surface-2); }
.ppto-tabla tr.ppto-concepto .ppto-col-cuenta { background: var(--surface-2); }
.ppto-tabla tbody tr:hover .ppto-col-cuenta { background: var(--sunken); }
.ppto-codigo { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-right: 6px; }
.ppto-cero { color: var(--muted); }
.ppto-neg { color: var(--crit); }
.ppto-fila-aviso td { color: var(--warn); font-weight: 600; }
.ppto-negocio > summary { cursor: pointer; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.ppto-negocio .num, .ppto-cuadre .num { font-family: var(--font-mono); }
details.card > summary .num { font-family: var(--font-mono); }

/* ---------------------------------------------------------------------------
   Presupuesto › Gastos (docs/14 §6.3). Una linea legible por cuenta que se
   abre con <details>, como Comisiones: Edgar rechazo dos matrices de inputs
   y acepto esto. Adentro, la historia y los 12 meses en columnas —lo que
   pidio— con un input por mes SOLO en la cuenta abierta. Gs enteros y en
   mono, para que los numeros se alineen.
   --------------------------------------------------------------------------- */

/* El numero primero: cuanto suma y contra que. */
.ppto-titular { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.ppto-titular-numero { font-size: 24px; font-weight: 700; font-family: var(--font-mono); letter-spacing: -.01em; }
.ppto-titular-numero > span { font-family: var(--font-sans, inherit); font-size: 14px; font-weight: 400; color: var(--ink-2); margin-left: 6px; letter-spacing: 0; }
.ppto-titular-linea { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }

.ppto-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--sunken); color: var(--ink-2); white-space: nowrap; }
.ppto-chip--curso { background: var(--accent-soft); color: var(--accent); }
.ppto-chip--enviada { background: var(--ok-bg); color: var(--ok); }
.ppto-ambar { color: var(--warn); }
.ppto-ok { color: var(--ok); }
.ppto-sinrev { font-style: italic; }

/* Las tres miradas: lo importante, con movimiento, todas. */
.ppto-ver { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; margin: 14px 0 8px; }
.ppto-ver-op { padding: 3px 10px; border-radius: 999px; font-size: 13px; color: var(--ink-2); text-decoration: none; border: 1px solid transparent; }
.ppto-ver-op:hover { background: var(--sunken); }
.ppto-ver-op.is-current { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* El concepto (Nivel 7) agrupa; adentro, una linea por cuenta. */
.ppto-grupo { margin-top: 10px; }
.ppto-grupo > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 6px 2px; list-style: none; }
.ppto-grupo > summary::-webkit-details-marker { display: none; }
.ppto-grupo > summary b { font-size: 13px; letter-spacing: .02em; }
.ppto-lista { display: flex; flex-direction: column; gap: 5px; }

.ppto-cuenta { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ppto-cuenta[open] { border-color: var(--accent); }
.ppto-cuenta.is-ajena { background: var(--surface-2, var(--sunken)); }
.ppto-cuenta.is-ajena .ppto-linea-nombre { color: var(--muted); }

.ppto-linea {
    list-style: none;
    display: grid;
    grid-template-columns: 14px minmax(220px, 1.6fr) 130px 70px minmax(180px, 1.4fr) 120px;
    gap: 12px;
    align-items: center;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13.5px;
}
.ppto-linea::-webkit-details-marker { display: none; }
.ppto-linea:hover { background: var(--sunken); }
.ppto-cuenta[open] .com-flecha { transform: rotate(90deg); }
.ppto-linea .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.ppto-linea-nombre { min-width: 0; }
.ppto-metodo { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppto-marca { text-align: right; white-space: nowrap; }

.ppto-cuerpo { padding: 4px 14px 14px 40px; border-top: 1px solid var(--line-soft); }

/* La historia y los 12 meses. Un input por mes, solo en la cuenta abierta. */
.ppto-meses-wrap { overflow-x: auto; margin-top: 8px; }
.ppto-meses { border-collapse: collapse; font-size: 12.5px; }
.ppto-meses th, .ppto-meses td { padding: 4px 6px; white-space: nowrap; }
.ppto-meses thead th { color: var(--muted); font-weight: 500; font-size: 11.5px; border-bottom: 1px solid var(--line-soft); }
.ppto-meses tbody th { text-align: left; color: var(--muted); font-weight: 600; padding-right: 10px; }
.ppto-meses .num { font-family: var(--font-mono); text-align: right; min-width: 84px; }
.ppto-fila-hist td { color: var(--ink-2); }
.ppto-est { font-style: italic; color: var(--ink-2) !important; background: color-mix(in srgb, var(--warn) 12%, transparent); }
.ppto-fila-27 th { color: var(--accent); }
.ppto-fila-27 td { padding: 3px 2px; }
.ppto-fila-var th { font-weight: 500; font-size: 11.5px; white-space: nowrap; }
.ppto-fila-var td { font-size: 11.5px; padding-top: 1px; padding-bottom: 1px; }
.ppto-mes {
    width: 88px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink);
    font: 12.5px var(--font-mono);
    text-align: right;
}
.ppto-mes:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Como se arman los meses: el metodo y sus datos, en una fila. */
.ppto-como { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 13px; }
.ppto-campo { display: flex; gap: 6px; align-items: center; }
.ppto-campo > span { color: var(--ink-2); font-weight: 600; }
.ppto-param { display: inline-flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }
.ppto-param label { display: inline-flex; gap: 6px; align-items: center; }
.ppto-in { width: 150px; padding: 5px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ppto-in--corto { width: 70px; text-align: right; }
select.ppto-in { width: auto; }

/* Los meses que se tildan, como botones. */
.ppto-meses-tilde { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.ppto-meses-tilde label { position: relative; }
.ppto-meses-tilde input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ppto-meses-tilde span { display: inline-block; padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; cursor: pointer; }
.ppto-meses-tilde input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.ppto-meses-tilde input:focus-visible + span { box-shadow: 0 0 0 2px var(--accent-soft); }

.ppto-puntual { display: block; margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: 4px; }
.ppto-porque { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; }
.ppto-porque > span { font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ppto-porque .input { flex: 1; max-width: 720px; padding: 6px 9px; font-size: 13px; }
.ppto-porque.is-pide > span { color: var(--warn); }
.ppto-porque.is-pide .input { border-color: var(--warn); }
.ppto-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }

.ppto-historial { margin-top: 10px; }
.ppto-historial summary { cursor: pointer; color: var(--ink-2); }
.ppto-historial ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }

.ppto-resto { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; padding: 14px 18px; font-size: 13.5px; }
.ppto-otros { margin-top: 12px; padding: 14px 18px; }
.ppto-otros details { padding: 4px 0; }
.ppto-otros summary { cursor: pointer; }
.ppto-otros-cuentas { list-style: none; margin: 6px 0 4px; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 2px; }
.ppto-otros-cuentas li { display: flex; gap: 6px; align-items: baseline; color: var(--ink-2); max-width: 720px; }
.ppto-otros-cuentas .num { font-family: var(--font-mono); }
.ppto-h2 { font-size: 14px; margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; }

.ppto-versiones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ppto-versiones li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ppto-versiones .num { font-family: var(--font-mono); }

/* Las unidades de una persona (Inicio y Gastos): una linea por unidad. */
details.ppto-negocio { margin-top: 10px; padding: 12px 16px; }
.ppto-unidades { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.ppto-unidad {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) 130px minmax(150px, 1fr) minmax(150px, 1fr) 80px;
    gap: 12px;
    align-items: center;
    padding: 7px 8px;
    border-top: 1px solid var(--line-soft);
    color: inherit;
    text-decoration: none;
    font-size: 13.5px;
}
.ppto-unidad:hover { background: var(--sunken); }
.ppto-unidad .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.ppto-unidad-ir { color: var(--accent); text-align: right; white-space: nowrap; }

/* El catalogo de cuentas y las personas: una linea por item. */
.ppto-fila { display: grid; gap: 12px; align-items: center; padding: 6px 8px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.ppto-fila--cuenta { grid-template-columns: minmax(260px, 2fr) minmax(160px, 1fr) 170px 170px; }
.ppto-fila .num { font-family: var(--font-mono); text-align: right; }
.ppto-fila select { padding: 4px 8px; font-size: 13px; }
.ppto-persona > summary { cursor: pointer; display: grid; grid-template-columns: 14px minmax(200px, 1.2fr) minmax(240px, 2fr) 160px; gap: 12px; align-items: center; padding: 9px 14px; list-style: none; font-size: 13.5px; }
.ppto-persona > summary::-webkit-details-marker { display: none; }
.ppto-persona[open] .com-flecha { transform: rotate(90deg); }
.ppto-tilde-negocio { margin-top: 8px; }
.ppto-tilde-negocio > div { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0 22px; font-size: 13px; }
.ppto-tilde-negocio label { display: inline-flex; gap: 5px; align-items: center; }

/* El tablero de la unidad (_tablero.php). 2027 en el violeta del módulo, el
   año base en gris; lo que sube en ámbar y lo que baja en verde, con su signo. */
.ppto-tablero { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.ppto-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ppto-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ppto-kpi--principal { border-color: color-mix(in srgb, var(--sec-presupuesto) 45%, var(--line)); background: color-mix(in srgb, var(--sec-presupuesto) 6%, var(--surface)); box-shadow: inset 4px 0 0 var(--sec-presupuesto); }
.ppto-kpi-rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.ppto-kpi-valor { font-family: var(--font-mono); font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.ppto-kpi-de { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--muted); }
.ppto-kpi-pie { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.ppto-delta { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 12px var(--font-mono); background: var(--sunken); color: var(--ink-2); white-space: nowrap; }
.ppto-delta--sube { background: var(--warn-bg); color: var(--warn); }
.ppto-delta--baja { background: var(--ok-bg); color: var(--ok); }
.ppto-delta--suave { font-weight: 500; }
.ppto-sube { color: var(--warn); }
.ppto-baja { color: var(--ok); }

.ppto-comp { display: flex; gap: 2px; height: 12px; border-radius: 4px; overflow: hidden; background: var(--sunken); }
.ppto-comp > span { display: block; height: 100%; }
.ppto-comp-area { background: var(--sec-presupuesto); }
.ppto-comp-nomina { background: var(--ink-2); }
.ppto-comp-comisiones { background: var(--muted); }
.ppto-comp-pct_venta { background: var(--line); }
.ppto-comp-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; color: var(--ink-2); }
.ppto-comp-leyenda li { display: flex; gap: 6px; align-items: center; }
.ppto-comp-leyenda b { margin-left: auto; font-family: var(--font-mono); }
.ppto-comp-leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.ppto-barra { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.ppto-barra > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }

.ppto-paneles { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.ppto-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; }
.ppto-panel-cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.ppto-leyenda { margin-left: auto; display: inline-flex; gap: 12px; color: var(--ink-2); }
.ppto-leyenda span { display: inline-flex; gap: 5px; align-items: center; }
.ppto-leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ppto-l-26 { background: var(--muted); opacity: .55; }
.ppto-l-est { background: repeating-linear-gradient(45deg, var(--muted) 0 2px, transparent 2px 5px); opacity: .7; border: 1px solid color-mix(in srgb, var(--muted) 50%, transparent); }
.ppto-l-27 { background: var(--sec-presupuesto); }
.ppto-graf { width: 100%; height: auto; display: block; }
.ppto-g-grilla { stroke: var(--line-soft); stroke-width: 1; }
.ppto-g-eje { stroke: var(--line); stroke-width: 1; }
.ppto-g-txt { fill: var(--muted); font: 11px var(--font-mono); }
.ppto-g-26 { fill: var(--muted); opacity: .55; }
.ppto-g-est { stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1; }
.ppto-g-est-fondo { fill: var(--surface); }
.ppto-g-est-raya { stroke: var(--muted); opacity: .6; }
.ppto-g-27 { fill: var(--sec-presupuesto); }
.ppto-g-hit { fill: transparent; }
.ppto-g-mes:hover .ppto-g-hit { fill: var(--sunken); }

.ppto-conceptos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ppto-concepto-fila { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(80px, 1.2fr) 64px 84px; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; font-size: 13px; }
.ppto-concepto-fila:hover, .ppto-concepto-fila:focus-visible { background: var(--sunken); outline: none; }
.ppto-concepto-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ppto-concepto-barras { display: flex; flex-direction: column; gap: 2px; }
.ppto-concepto-barras span { display: block; height: 5px; border-radius: 0 3px 3px 0; min-width: 1px; }
.ppto-cb-26 { background: var(--muted); opacity: .45; }
.ppto-cb-27 { background: var(--sec-presupuesto); }
.ppto-concepto-fila .num { font-family: var(--font-mono); text-align: right; }

.ppto-movidas ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.ppto-movidas li { display: grid; grid-template-columns: minmax(0, 1fr) auto 90px 92px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.ppto-movidas li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppto-movidas .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }

/* Buscar y filtrar */
.ppto-filtros { position: sticky; top: var(--alto-topbar, 0px); z-index: 4; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 8px; padding: 8px 0; background: var(--ground); }
.ppto-filtros .ppto-ver { margin: 0; }
.ppto-buscar { width: 260px; padding: 6px 10px; font-size: 13px; }
.ppto-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ppto-plegar { display: inline-flex; gap: 4px; }

/* Ingresos: la tabla por período (línea y marca como filas, presupuesto.js arma las celdas) */
.ppto-mz-control { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ppto-mz { display: grid; grid-template-columns: var(--mz-cols, minmax(230px, 1fr) 104px 92px); gap: 8px; align-items: center; }
.ppto-mz--cab { min-width: var(--mz-min, 0); }
/* La jerarquía: la línea con su fondo; sus marcas, sangradas y con una guía a la izquierda */
.ppto-mz-tabla { --mz-linea-bg: color-mix(in srgb, var(--sec-presupuesto) 8%, var(--ground)); }
.ppto-mz-tabla .ppto-grupo > .ppto-lista { margin: 4px 0 6px 14px; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--sec-presupuesto) 40%, transparent); }
/* Correr a la derecha: la barra visible es la del encabezado; la tabla la sigue, sin la suya */
.ppto-mz-cab-wrap { flex-basis: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
.ppto-mz--cab { padding: 6px 15px 4px 11px; }
.ppto-mz-tabla { overflow-x: auto; scrollbar-width: none; }
.ppto-mz-tabla::-webkit-scrollbar { display: none; }
.ppto-mz-tabla > * { min-width: var(--mz-min, 0); }
/* El nombre queda fijo a la izquierda */
.mz-nombre { display: flex; gap: 6px; align-items: center; min-width: 0; overflow: hidden; position: sticky; left: 0; z-index: 2; align-self: stretch; }
.ppto-mz--cab .mz-nombre { background: var(--ground); }
.ppto-mz--linea .mz-nombre { background: var(--mz-linea-bg); }
.ppto-mz--linea .mz-nombre b { font-size: 14px; }
.ppto-mz--marca .mz-nombre, .ppto-mz--neg .mz-nombre { background: var(--surface); }
.ppto-mz--total .mz-nombre { background: color-mix(in srgb, var(--sec-presupuesto) 9%, var(--surface)); }
.mz-nombre .ppto-linea-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mz-rot { text-align: right; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mz-rot.mz-proy { color: var(--warn); font-weight: 600; }
.mz-rot small { font-weight: 500; }
.mz-c.num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-family: var(--font-mono); white-space: nowrap; }
.mz-c.mz-proy:not(.mz-rot) { background: color-mix(in srgb, var(--warn) 9%, transparent); border-radius: 4px; padding: 2px 4px; margin: -2px -4px; }
.mz-v { font-size: 13px; }
.mz-d { font-size: 11px; }
.mz-c3 { gap: 1px; }
.mz-l { display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; }
.mz-l .mz-v { font-size: 12.5px; }
.mz-l .mz-d { min-width: 54px; text-align: right; }
.mz-anio .mz-v { font-weight: 700; }
.mz-estado { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-medidas { display: none; margin-left: auto; flex-direction: column; align-items: flex-end; font-size: 10.5px; line-height: 1.5; color: var(--muted); padding-right: 4px; }
[data-tres="1"] .mz-medidas { display: flex; }
.mz-graf { all: unset; cursor: pointer; display: inline-flex; padding: 3px; border-radius: 4px; color: var(--muted); }
.mz-graf svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mz-graf:hover, .mz-graf:focus-visible { color: var(--sec-presupuesto); background: var(--sunken); }
.mz-curva-celda { display: flex; justify-content: center; }
.mz-curva .mz-c26 { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.mz-curva .mz-est { stroke-dasharray: 2 2; }
.mz-curva .mz-c27 { fill: none; stroke: var(--sec-presupuesto); stroke-width: 2; }
.ppto-mz--marca, .ppto-mz--neg { list-style: none; padding: 7px 14px; font-size: 13.5px; }
.ppto-mz--marca { cursor: pointer; }
.ppto-mz--marca::-webkit-details-marker { display: none; }
.ppto-mz--marca:hover { background: var(--sunken); }
.ppto-grupo > summary.ppto-mz { display: grid; padding: 9px 15px 9px 8px; background: var(--mz-linea-bg); border-radius: 0 6px 6px 0; }
.ppto-grupo > summary.ppto-mz:hover, .ppto-grupo > summary.ppto-mz:hover .mz-nombre { background: color-mix(in srgb, var(--sec-presupuesto) 14%, var(--ground)); }
.ppto-grupo[open] > summary .com-flecha { transform: rotate(90deg); }
.ppto-mz--total { margin-top: 8px; padding: 10px 15px 10px 11px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sec-presupuesto) 9%, var(--surface)); }
.ppto-mz--neg { border-top: 1px solid var(--line-soft); }
.ppto-mz--neg .mz-nombre { padding-left: 22px; }
/* Los gráficos de una fila */
.modal-caja.es-grafico { max-width: 860px; width: calc(100vw - 32px); }
.mz-graf-controles { display: flex; gap: 10px 16px; flex-wrap: wrap; margin: 4px 0 6px; }
.mz-graf-resumen { margin: 4px 0 8px; }
.mz-graf-leyenda { margin: 4px 0 0; }
.mz-g-26 { fill: none; stroke: var(--muted); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.mz-g-25 { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; opacity: .8; }
.mz-g-p25 { fill: var(--ink-2); opacity: .8; }
.mz-g-b25 { fill: none; stroke: var(--ink-2); stroke-width: 1.2; opacity: .8; }
.ppto-l-25 { border: 1.5px dotted var(--ink-2); }
.mz-g-26.mz-est { stroke-dasharray: 1 9; }
.mz-g-27 { fill: none; stroke: var(--sec-presupuesto); stroke-width: 2; }
.mz-g-p26 { fill: color-mix(in srgb, var(--muted) 60%, var(--surface)); }
.mz-g-p26.mz-g-proy { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; opacity: .8; }
.mz-g-p27 { fill: var(--sec-presupuesto); stroke: var(--surface); stroke-width: 2; }
.mz-g-b26 { fill: var(--muted); opacity: .55; }
.mz-g-b26.mz-g-proy { fill: url(#mzRaya); opacity: 1; stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1; }
.mz-g-b27 { fill: var(--sec-presupuesto); }
.mz-g-valor { fill: var(--ink-2); }
.mz-g-txt-proy { fill: var(--warn); }
/* Las variaciones: subir verde, bajar rojo; lo grande, resaltado */
.ppto-var-pos { color: var(--ok) !important; }
.ppto-var-neg { color: var(--crit) !important; }
.ppto-var-fuerte { font-weight: 700; border-radius: 3px; }
.ppto-var-pos.ppto-var-fuerte { background: var(--ok-bg); }
.ppto-var-neg.ppto-var-fuerte { background: var(--crit-bg); }
.mz-d.ppto-var-fuerte { padding: 0 4px; margin-right: -4px; }
.ppto-g-txt.ppto-var-pos { fill: var(--ok); }
.ppto-g-txt.ppto-var-neg { fill: var(--crit); }
.ppto-g-txt.ppto-var-fuerte { font-weight: 700; }
/* Los meses proyectados de 2026, en el editor de la cuenta o la marca */
.ppto-meses tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.ppto-meses thead th.ppto-th-est { color: var(--warn); font-weight: 600; }
.ppto-meses thead th.ppto-th-est small { display: block; font-weight: 500; font-size: 10px; }
.ppto-chip-filtro { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12.5px; cursor: pointer; }
.ppto-chip-filtro:hover { background: var(--sunken); }
.ppto-chip-filtro.is-current { border-color: var(--sec-presupuesto); color: var(--sec-presupuesto); background: color-mix(in srgb, var(--sec-presupuesto) 10%, transparent); font-weight: 600; }

/* El estado de cada cuenta, en el borde izquierdo */
.ppto-cuenta { border-left-width: 4px; scroll-margin-top: calc(var(--alto-topbar, 0px) + 60px); }
.ppto-cuenta.ppto-est-revisada { border-left-color: var(--ok); }
.ppto-cuenta.ppto-est-falta { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn-bg) 40%, var(--surface)); }
.ppto-cuenta.ppto-est-sinrev { border-left-color: var(--line); }
.ppto-grupo { scroll-margin-top: calc(var(--alto-topbar, 0px) + 60px); }
.ppto-grupo > summary { border-left: 3px solid var(--sec-presupuesto); padding-left: 8px; }
.ppto-estrella { color: var(--brand); font-size: 12px; }
.ppto-chip--prov { background: color-mix(in srgb, var(--sec-presupuesto) 12%, transparent); color: var(--sec-presupuesto); font-size: 11px; padding: 0 7px; margin-left: 4px; }

@media (max-width: 1200px) {
    .ppto-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ppto-paneles, .ppto-movidas ul { grid-template-columns: 1fr; }
}

/* Por proveedor: adentro de una cuenta, el detalle del mayor y su carga. */
.ppto-prov { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ppto-prov-cab { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.ppto-prov-cab form { margin-left: auto; }
.ppto-prov-lista { display: flex; flex-direction: column; gap: 3px; }
.ppto-prov-item { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.ppto-prov-item[open] { border-color: var(--line); background: var(--surface-2, var(--sunken)); }
.ppto-prov-item[open] .com-flecha { transform: rotate(90deg); }
.ppto-prov-linea {
    list-style: none;
    display: grid;
    grid-template-columns: 14px minmax(200px, 1.6fr) 150px 120px 190px minmax(160px, 1.2fr);
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}
.ppto-prov-linea::-webkit-details-marker { display: none; }
.ppto-prov-linea:hover { background: var(--sunken); }
.ppto-prov-linea .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.ppto-prov-cuerpo { padding: 2px 10px 10px 34px; }
.ppto-prov-suma { display: flex; gap: 12px; justify-content: flex-end; padding: 6px 10px 0; font-size: 13px; }
.ppto-prov-suma .num { font-family: var(--font-mono); }
.ppto-asientos { border-collapse: collapse; font-size: 12px; margin-top: 8px; width: 100%; }
.ppto-asientos th, .ppto-asientos td { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.ppto-asientos th { color: var(--muted); font-weight: 500; }
.ppto-asientos .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.ppto-prov-nueva { margin-top: 6px; }
.ppto-prov-nueva > summary { cursor: pointer; color: var(--accent); font-size: 13px; padding: 4px 0; }

@media (max-width: 1000px) {
    .ppto-linea { grid-template-columns: 14px 1fr; }
    .ppto-linea > :nth-child(n+3) { grid-column: 2; text-align: left; }
    .ppto-prov-linea { grid-template-columns: 14px 1fr; }
    .ppto-prov-linea > :nth-child(n+3) { grid-column: 2; text-align: left; }
    .ppto-cuerpo, .ppto-prov-cuerpo { padding-left: 14px; }
    .ppto-unidad, .ppto-fila--cuenta, .ppto-persona > summary { grid-template-columns: 1fr; gap: 2px; }
    .ppto-unidad .num, .ppto-unidad-ir { text-align: left; }
}

/* Presupuesto: cerrar desde el pie, los asientos plegables, la invitación a cargar por proveedor. */
.ppto-cerrar { all: unset; cursor: pointer; display: block; margin: 10px 0 0 auto; color: var(--muted); padding: 2px 6px; border-radius: 4px; width: max-content; }
.ppto-cerrar:hover, .ppto-cerrar:focus-visible { color: var(--ink); background: var(--sunken); }
.ppto-asientos-det { margin-top: 8px; }
.ppto-asientos-det > summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
.ppto-prov-invita { margin-left: auto; color: var(--ink-2); }
.ppto-prov-invita + form { margin-left: 0; }
.btn-ppto { border-color: var(--sec-presupuesto); color: var(--sec-presupuesto); background: color-mix(in srgb, var(--sec-presupuesto) 10%, transparent); font-weight: 600; }
.btn-ppto:hover { background: color-mix(in srgb, var(--sec-presupuesto) 18%, transparent); }

/* Presupuesto › Ingresos: una marca con venta, variación y margen; el margen en Gs o en %. */
.ppto-linea--ing { grid-template-columns: 14px minmax(200px, 1.4fr) 130px 84px 130px minmax(160px, 1.2fr) 110px; }
.ppto-fila-sep th { text-align: left; padding-top: 10px; color: var(--sec-presupuesto) !important; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line-soft); }
.ppto-mes-mg, .ppto-mes-mgp { width: 88px; padding: 4px 6px; border: 1px dashed var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: 12.5px var(--font-mono); text-align: right; }
.ppto-mes-mg:focus, .ppto-mes-mgp:focus { outline: none; border-style: solid; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ppto-margen label { display: inline-flex; gap: 6px; align-items: center; }
.ppto-concepto-fila--ing { grid-template-columns: minmax(110px, 1.1fr) minmax(70px, 1fr) 64px 84px 56px; }
.ppto-unidad--ing { grid-template-columns: minmax(220px, 1.5fr) 140px 110px minmax(150px, 1fr) minmax(150px, 1fr) 70px; }
@media (max-width: 1000px) {
    .ppto-linea--ing, .ppto-unidad--ing { grid-template-columns: 14px 1fr; }
    .ppto-unidad--ing { grid-template-columns: 1fr; }
}
/* Ingresos: una marca vende miles de millones por mes; la celda tiene que mostrar 2.049.579.000 entero. */
[data-ppto-ingreso] .ppto-mes, [data-ppto-ingreso] .ppto-mes-mg, [data-ppto-ingreso] .ppto-mes-mgp { width: 112px; font-size: 12px; }

/* Presupuesto › P&L: concepto por concepto, con sus subtotales y sus cuentas */
.ppto-pyl-wrap { overflow-x: auto; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.ppto-pyl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ppto-pyl th, .ppto-pyl td { padding: 7px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.ppto-pyl thead th { position: sticky; top: 0; background: var(--sunken); color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: right; }
.ppto-pyl thead th:first-child { text-align: left; }
.ppto-pyl thead th small { display: block; font-weight: 500; font-size: 10px; }
.ppto-pyl tbody th { text-align: left; font-weight: 500; }
.ppto-pyl tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 260px; }
.ppto-pyl thead tr > :first-child { background: var(--sunken); z-index: 2; }
.ppto-pyl .num { text-align: right; font-family: var(--font-mono); }
.ppto-pyl td.num small { font-size: 10.5px; }
.ppto-pyl .pyl-proy { background-image: linear-gradient(color-mix(in srgb, var(--warn) 8%, transparent), color-mix(in srgb, var(--warn) 8%, transparent)); }
.ppto-pyl thead th.pyl-proy { color: var(--warn); }
.pyl-abrir { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.pyl-abrir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.pyl-abrir[aria-expanded="true"] .com-flecha { transform: rotate(90deg); }
.pyl-cuenta th { padding-left: 34px !important; font-weight: 400; color: var(--ink-2); }
.pyl-cuenta td { color: var(--ink-2); font-size: 12px; }
.pyl-sub th, .pyl-sub td { font-weight: 700; background: color-mix(in srgb, var(--sec-presupuesto) 8%, var(--surface)) !important; border-top: 1px solid color-mix(in srgb, var(--sec-presupuesto) 35%, transparent); }
.pyl-sub--resultado th, .pyl-sub--resultado td { background: color-mix(in srgb, var(--sec-presupuesto) 16%, var(--surface)) !important; font-size: 14px; }
.pyl-capa { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 999px; font-size: 11px; border: 1px solid var(--line); color: var(--ink-2); }
.pyl-capa--area { border-color: color-mix(in srgb, var(--sec-presupuesto) 50%, transparent); color: var(--sec-presupuesto); }
.pyl-capa--ingresos { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.pyl-capa--provisorio { border-style: dashed; border-color: color-mix(in srgb, var(--warn) 60%, transparent); color: var(--warn); }

/* ===========================================================================
   === cxp · común ===
   Cuentas a pagar (ex Proveedores de gltmkt). Plan: docs/cxp/. Sólo tokens de
   tokens.css, cero hex: el oscuro sale solo. Cada entrega agrega su
   subsección al final con el encabezado «=== cxp · {pantalla} ===».
   =========================================================================== */

/* La cabecera de toda pantalla: la última foto de SAP y el TC (gltmkt _head.php). */
.cxp-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 6px 0 14px; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.cxp-cabecera b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cxp-cabecera em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.cxp-cabecera-aviso { color: var(--warn); font-weight: 600; }

/* La portada mientras el módulo se construye (E3 la reemplaza por el tablero). */
.cxp-vacio { max-width: 640px; margin-top: 4px; }
.cxp-vacio p { margin: 0; }
.cxp-vacio p + p { margin-top: 6px; }

/* Pantalla completa (cxp-comun.js): el contenedor .cxp-fs se lleva la pantalla
   y el JS le pone el alto al .cxp-scroll de adentro. */
.cxp-fs:fullscreen { background: var(--ground); padding: 14px 16px; overflow: auto; }
.cxp-scroll { overflow: auto; }

/* Orden por columna en el cliente (tablas agrupadas de Tesorería y Programación). */
table[data-cxp-agrupada] th[data-cxp-orden] { cursor: pointer; user-select: none; white-space: nowrap; }
/* El alternativo vacio («/ ''») saca la flecha del nombre accesible: el lector no debe leer «flecha arriba abajo». */
table[data-cxp-agrupada] th[data-cxp-orden]::after { content: '↕' / ''; margin-left: 4px; font-size: 10px; opacity: .45; }
table[data-cxp-agrupada] th[data-cxp-orden][aria-sort="ascending"]::after { content: '↑' / ''; opacity: 1; }
table[data-cxp-agrupada] th[data-cxp-orden][aria-sort="descending"]::after { content: '↓' / ''; opacity: 1; }
/* El botón que cxp-comun.js mete adentro de la cabecera: sin aspecto de botón, con foco visible. */
.cxp-orden-btn { all: unset; cursor: pointer; font: inherit; color: inherit; }
.cxp-orden-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* La barra de la selección (contador y total en Gs). */
.cxp-sel-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; margin-bottom: 10px; border: 1px solid color-mix(in srgb, var(--sec-cxp) 40%, var(--line)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sec-cxp) 7%, var(--surface)); font-size: 13px; color: var(--ink); }
.cxp-sel-barra[hidden] { display: none; }

/* === cxp · facturas, maestro y cliente / proveedor === */
/* Utilidades de texto de las tres pantallas (gltmkt: text-danger, text-success, fw-semibold, font-monospace). */
.cxp-crit { color: var(--crit); }
.cxp-ok { color: var(--ok); }
.cxp-warn { color: var(--warn); }
.cxp-fuerte { font-weight: 600; }
.cxp-normal { font-weight: 400; }
.cxp-mono { font-family: var(--font-mono); }
.cxp-tenue { opacity: .75; }
.cxp-vacia { text-align: center; padding: 24px 12px; }
.cxp-pie { margin-top: 8px; }
.cxp-toolbar-fin { margin-left: auto; align-self: center; }
.cxp-sel-barra-fin { display: flex; gap: 8px; margin-left: auto; }
.cxp-link-texto { color: var(--ink); }
.cxp-link-texto:hover { color: var(--accent); }

/* Facturas: filtros, resumen y la tabla con tres columnas fijas (check, Límite, Proveedor). */
.cxp-fac-corto { max-width: 140px; }
.cxp-fac-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 10px; }
.cxp-fac-totales { margin-left: auto; }
.cxp-fac-wrap { max-height: 72vh; }
.cxp-fac-tabla th { position: sticky; top: 0; z-index: 2; }
.cxp-fac-tabla .cxp-fac-s0, .cxp-fac-tabla .cxp-fac-s1, .cxp-fac-tabla .cxp-fac-s2 { position: sticky; z-index: 1; background: var(--surface); }
.cxp-fac-tabla th.cxp-fac-s0, .cxp-fac-tabla th.cxp-fac-s1, .cxp-fac-tabla th.cxp-fac-s2 { z-index: 3; background: var(--sunken); }
.cxp-fac-tabla .cxp-fac-s0 { left: 0; width: 34px; cursor: pointer; }
.cxp-fac-tabla .cxp-fac-s1 { left: var(--s1, 0px); }
.cxp-fac-tabla .cxp-fac-s2 { left: var(--s2, 110px); box-shadow: inset -1px 0 0 var(--line); }
.cxp-fac-tabla tr.is-elegida > td { background: color-mix(in srgb, var(--sec-cxp) 12%, var(--surface)); }
.cxp-fac-tabla tr.is-elegida > td.cxp-fac-s0 { box-shadow: inset 3px 0 0 var(--sec-cxp); }
.cxp-fac-imp { font-size: 11px; }
/* La factura del proveedor (el comprobante del censo): abre su ficha en un modal. */
.cxp-comprobante { margin-left: 4px; font-size: 11px; white-space: nowrap; }
.cxp-nota { margin-left: 4px; font-size: 11px; cursor: help; }

/* Estado de pago: dónde quedó el documento en el circuito. */
.cxp-pago { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; text-decoration: none; }
.cxp-pago--sin { color: var(--muted); border-color: var(--line); font-weight: 400; }
.cxp-pago--programada { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.cxp-pago--tesoreria { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.cxp-pago--atrasada { background: var(--accent-soft); color: var(--accent); border-color: var(--crit); }
.cxp-pago--nopagada, .cxp-pago--nopagar { background: var(--crit-bg); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.cxp-pago--cobranzas { background: color-mix(in srgb, var(--sec-cxp) 14%, transparent); color: var(--sec-cxp); border-color: var(--sec-cxp); }
.cxp-pago--pagada { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

/* Factura cedida a un tercero (factoring). */
.cxp-fac-ces { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--sec-cxp) 14%, transparent); color: var(--sec-cxp); }

/* La insignia de conciliación es un botón que abre el formulario. */
.cxp-conc { border: 0; cursor: pointer; font: inherit; font-size: 11.5px; }
.cxp-conc--vacia { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line); }

/* Ficha del proveedor (cuando lo filtrado es de uno solo). */
.cxp-ficha { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.cxp-ficha-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.cxp-ficha-n { font-size: 15px; }
.cxp-ficha-botones { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.cxp-ficha-k { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.cxp-ficha-t { display: block; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; color: inherit; text-decoration: none; }
a.cxp-ficha-t:hover { border-color: var(--muted); text-decoration: none; }
.cxp-ficha-t--neto { background: var(--surface); border-color: var(--muted); }
.cxp-ficha-t .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cxp-ficha-t .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cxp-ficha-t .s { font-size: 11px; color: var(--muted); }
.cxp-ficha-e { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cxp-ficha-chip { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 8px; }

/* Maestro. */
.cxp-mae-ck { width: 26px; }
.cxp-inter { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.cxp-notas { font-style: italic; }
.cxp-a-conciliar { font-weight: 600; color: var(--sec-cxp); }
.cxp-acciones { text-align: right; }

/* Cliente / proveedor: RUC y proveedor fijos a la izquierda al scrollear. */
.cxp-cp-tabla th { position: sticky; top: 0; z-index: 2; }
.cxp-cp-tabla th:nth-child(1), .cxp-cp-tabla td:nth-child(1) { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 104px; min-width: 104px; }
.cxp-cp-tabla th:nth-child(2), .cxp-cp-tabla td:nth-child(2) { position: sticky; left: 104px; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
.cxp-cp-tabla th:nth-child(1), .cxp-cp-tabla th:nth-child(2) { z-index: 3; background: var(--sunken); }
.cxp-nom { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cxp-cp-emp { color: inherit; border-bottom: 1px dotted var(--muted); text-decoration: none; }
.cxp-neg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; text-decoration: none; }
a.cxp-neg:hover { text-decoration: none; filter: brightness(.95); }
.cxp-neg--vacia { padding: 2px 8px; border-radius: 6px; font-size: 11.5px; background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line); }
.cxp-ultimo { display: block; font-size: 11px; color: var(--muted); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }

/* Los fragmentos del modal (facturas, nos debe por empresa, negociación). */
.cxp-cp-frag-tot { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.cxp-cp-frag-scroll { max-height: 60vh; }
.cxp-cp-frag-pie { margin: 10px 0 0; text-align: right; }
.cxp-bitacora { max-height: 220px; overflow: auto; }
.cxp-cp-com { border-left: 3px solid var(--line); padding: 4px 10px; margin-bottom: 8px; font-size: 13px; }
.cxp-cp-com-q { font-size: 11px; color: var(--muted); }

/* ==========================================================================
   === cxp · tablero / gestión / caja (comunes a las tres) ===
   ========================================================================== */
.cxp-tablero .cxp-rojo, .cxp-gestion .cxp-rojo, .cxp-caja .cxp-rojo { color: var(--crit); }
.cxp-tablero .cxp-verde, .cxp-gestion .cxp-verde, .cxp-caja .cxp-verde { color: var(--ok); }
.cxp-tablero .btn.is-on, .cxp-gestion .btn.is-on { background: var(--sec-cxp); border-color: var(--sec-cxp); color: var(--on-accent); }
.cxp-tablero-filtros, .cxp-gestion-filtros { flex-wrap: wrap; margin-bottom: 10px; }

/* ==========================================================================
   === cxp · tablero ===
   ========================================================================== */
.cxp-tablero-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 13px; margin: 10px 0 12px; }
.cxp-tablero-hint { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.cxp-tablero-editbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; color: var(--warn); }
.cxp-tablero-editbar[hidden] { display: none; }
.cxp-tablero-editbar .btn { margin-left: auto; }
.cxp-tablero-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 16px 0 8px; }
.cxp-tablero-sec-sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.cxp-tablero section[hidden] { display: none; }
.cxp-tablero-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; }
.cxp-tablero-tiles.is-chicas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.cxp-tablero-tile { position: relative; display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--ink); min-width: 0; }
.cxp-tablero-tile .k { display: flex; align-items: center; gap: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cxp-tablero-tile .v { font-size: 20px; font-weight: 700; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cxp-tablero-tile .s { font-size: 11.5px; color: var(--muted); }
.cxp-tablero-tile .d { position: absolute; right: 12px; top: 12px; font-size: 11px; font-weight: 600; }
.cxp-tablero-tile .d.is-up { color: var(--crit); }
.cxp-tablero-tile .d.is-dn { color: var(--ok); }
.cxp-tablero-tile.is-crit { box-shadow: inset 3px 0 0 var(--crit); }
.cxp-tablero-tile.is-mid { box-shadow: inset 3px 0 0 var(--warn); }
.cxp-tablero-tile.is-ok { box-shadow: inset 3px 0 0 var(--ok); }
.cxp-tablero-tile.is-brand { box-shadow: inset 3px 0 0 var(--sec-cxp); }
/* Tarjeta entera clickeable sin anidar botones dentro de un <a>: el enlace la cubre y la ayuda y el ojo van encima. */
.cxp-tablero-tile-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.cxp-tablero-tile-link:hover { background: color-mix(in srgb, var(--sec-cxp) 5%, transparent); }
.cxp-tablero-tile-link:focus-visible { outline: 2px solid var(--sec-cxp); outline-offset: 2px; }
.cxp-tablero-tile .btn-icono, .cxp-tablero-card .btn-icono, .cxp-tablero-ojo { position: relative; z-index: 2; }
.cxp-tablero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.cxp-tablero-c3 { grid-column: span 3; } .cxp-tablero-c4 { grid-column: span 4; } .cxp-tablero-c6 { grid-column: span 6; }
.cxp-tablero-c8 { grid-column: span 8; } .cxp-tablero-c12 { grid-column: span 12; }
@media (max-width: 1100px) { .cxp-tablero-c3, .cxp-tablero-c4, .cxp-tablero-c6, .cxp-tablero-c8 { grid-column: span 12; } }
.cxp-tablero-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; min-width: 0; color: var(--ink); }
.cxp-tablero-card h3 { font-size: 12px; margin: 0 0 8px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cxp-tablero-card h3 small { font-weight: 400; color: var(--muted); }
.cxp-tablero-card.is-foco { box-shadow: inset 0 3px 0 var(--crit); }
.cxp-tablero-foco { display: grid; grid-template-columns: repeat(3, 1fr); }
.cxp-tablero-foco > div { padding: 2px 16px; border-left: 1px solid var(--line); min-width: 0; }
.cxp-tablero-foco > div:first-child { border-left: 0; padding-left: 2px; }
@media (max-width: 900px) {
    .cxp-tablero-foco { grid-template-columns: 1fr; }
    .cxp-tablero-foco > div { border-left: 0; border-top: 1px solid var(--line); padding: 10px 2px; }
    .cxp-tablero-foco > div:first-child { border-top: 0; }
}
.cxp-tablero-foco .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.cxp-tablero-foco .v { font-size: 26px; font-weight: 700; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cxp-tablero-foco .n { font-size: 12px; color: var(--muted); }
.cxp-tablero-foco .dt { font-size: 11.5px; color: var(--muted); margin-top: 7px; display: flex; flex-direction: column; gap: 2px; }
.cxp-tablero-foco .dt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cxp-tablero-foco .dt b.cxp-rojo { color: var(--crit); }
.cxp-tablero-foco .dt b.cxp-verde { color: var(--ok); }
.cxp-tablero-foco .is-alerta .v { color: var(--crit); }
.cxp-tablero-prog { color: var(--sec-cxp); }
.cxp-tablero-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.cxp-tablero-t th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: var(--muted); padding: 5px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cxp-tablero-t td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.cxp-tablero-t .num { text-align: right; font-variant-numeric: tabular-nums; }
.cxp-tablero-t tr.cxp-tablero-tot td { font-weight: 700; background: var(--sunken); }
.cxp-tablero-t tr.cxp-tablero-it-emp td { background: var(--sunken); }
.cxp-tablero-t tr.cxp-tablero-it-prov td:first-child { padding-left: 28px; }
.cxp-tablero-col-barra { width: 30%; }
.cxp-tablero-bar { display: block; width: 100%; min-width: 90px; height: 14px; border-radius: 3px; overflow: hidden; }
.cxp-tablero-bar.is-fina { height: 8px; }
.cxp-tablero-bar.is-media { height: 10px; }
.cxp-tablero-bar-fondo { fill: var(--surface-2); }
.cxp-tablero-bar-gris { fill: color-mix(in srgb, var(--muted) 55%, transparent); }
.cxp-tablero-bar-rojo { fill: var(--crit); }
.cxp-tablero-bar-azul { fill: var(--sec-cxp); }
.cxp-tablero-seg { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 2px; }
.cxp-tablero-seg a { font-size: 11px; font-weight: 400; padding: 2px 8px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--muted); }
.cxp-tablero-seg a.is-on { background: var(--sec-cxp); color: var(--on-accent); border-color: var(--sec-cxp); }
.cxp-tablero-mini { font-size: 11px; color: var(--muted); margin-top: 6px; }
.cxp-tablero-entre { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cxp-tablero-mt { margin-top: 10px; }
.cxp-tablero-mb { margin-bottom: 10px; }
.cxp-tablero-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.cxp-tablero-cobertura { white-space: normal; }
.cxp-tablero-inter { background: color-mix(in srgb, var(--sec-cxp) 14%, transparent); color: var(--sec-cxp); }
.cxp-tablero-mono { font-family: var(--font-mono); }
/* Tarjetas apagadas y el modo «Elegir tarjetas». */
.cxp-tablero [data-cxp-card].is-off { display: none; }
.cxp-tablero-ojo { display: none; position: absolute; right: 8px; bottom: 8px; align-items: center; gap: 6px; background: var(--sec-cxp); border: 1px solid var(--sec-cxp); border-radius: 7px; padding: 3px 10px; font: inherit; font-size: 11px; font-weight: 700; color: var(--on-accent); cursor: pointer; }
.cxp-tablero.is-editando [data-cxp-card] { outline: 2px dashed var(--sec-cxp); outline-offset: 2px; }
.cxp-tablero.is-editando .cxp-tablero-ojo { display: inline-flex; z-index: 3; }
.cxp-tablero.is-editando .cxp-tablero-tile { padding-bottom: 32px; }
.cxp-tablero.is-editando .cxp-tablero-card { padding-bottom: 36px; }
.cxp-tablero.is-editando [data-cxp-card].is-off { display: block; opacity: .45; outline: 2px solid var(--muted); }
.cxp-tablero.is-editando [data-cxp-card].is-off .cxp-tablero-ojo { background: var(--surface); color: var(--muted); border-color: var(--line); }
/* Gráficos en SVG (sin Chart.js). */
.cxp-tablero-graf { display: block; width: 100%; height: auto; }
.cxp-tablero-g-txt { font-size: 10px; fill: var(--muted); }
.cxp-tablero-g-eje { stroke: var(--line); stroke-width: 1; }
.cxp-tablero-g-grilla { stroke: var(--line-soft); stroke-width: 1; }
.cxp-tablero-g-hit { fill: transparent; }
.cxp-tablero-graf a:hover .cxp-tablero-g-hit, .cxp-tablero-graf g:hover > .cxp-tablero-g-hit { fill: color-mix(in srgb, var(--sec-cxp) 7%, transparent); }
.cxp-tablero-g-gris { fill: color-mix(in srgb, var(--muted) 60%, transparent); }
.cxp-tablero-g-gris-claro { fill: color-mix(in srgb, var(--muted) 35%, transparent); }
.cxp-tablero-g-rojo { fill: var(--crit); }
.cxp-tablero-g-ambar { fill: var(--warn); }
.cxp-tablero-g-azul { fill: var(--sec-cxp); }
.cxp-tablero-g-linea-caja { fill: none; stroke: var(--ok); stroke-width: 2; stroke-dasharray: 6 4; }
.cxp-tablero-g-punto-caja { fill: var(--ok); }
.cxp-tablero-g-linea-azul { fill: none; stroke: var(--sec-cxp); stroke-width: 2; }
.cxp-tablero-g-linea-rojo { fill: none; stroke: var(--crit); stroke-width: 2; }
.cxp-tablero-g-linea-pct { fill: none; stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cxp-tablero-g-punto-azul { fill: var(--sec-cxp); }
.cxp-tablero-g-punto-rojo { fill: var(--crit); }

/* ==========================================================================
   === cxp · gestión ===
   ========================================================================== */
.cxp-gestion-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; margin-bottom: 8px; }
.cxp-gestion-tile { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 13px; color: var(--ink); text-decoration: none; }
a.cxp-gestion-tile:hover { border-color: var(--sec-cxp); text-decoration: none; }
.cxp-gestion-tile .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cxp-gestion-tile .v { font-size: 18px; font-weight: 700; margin-top: 1px; white-space: nowrap; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cxp-gestion-tile .s { font-size: 11.5px; color: var(--muted); }
.cxp-gestion-tile.is-crit { box-shadow: inset 3px 0 0 var(--crit); }
.cxp-gestion-tile.is-brand { box-shadow: inset 3px 0 0 var(--sec-cxp); }
.cxp-gestion-tile.is-conc { box-shadow: inset 3px 0 0 var(--sec-importar); }
.cxp-gestion-conc { color: var(--sec-importar); }
.cxp-gestion-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 14px; margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.cxp-gestion-mini > * { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.cxp-gestion-mini a:hover { color: var(--sec-cxp); }
.cxp-gestion-mini b { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.cxp-gestion-mini b.cxp-verde { color: var(--ok); }
.cxp-gestion-mini em { font-style: normal; font-size: 11px; }
.cxp-gestion-aviso { color: var(--warn); font-weight: 600; }
.cxp-gestion-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0; }
.cxp-gestion-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.cxp-gestion-ctl .chip-nivel.es-destino { outline: 2px dashed var(--sec-cxp); outline-offset: 2px; }
.cxp-gestion-ctl .chip-nivel.is-arrastrando { opacity: .4; }
.cxp-gestion-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 70vh; }
/* separate + spacing 0: con border-collapse el sticky del <th> no anda en Chrome. */
.cxp-gestion-t { width: 100%; font-size: 12.5px; border-collapse: separate; border-spacing: 0; background: var(--surface); color: var(--ink); }
.cxp-gestion-t th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--sunken); position: sticky; top: 0; z-index: 2; }
.cxp-gestion-t th.num { text-align: right; }
.cxp-gestion-t th[aria-sort="ascending"] .cxp-orden-btn::after { content: ' ↑'; }
.cxp-gestion-t th[aria-sort="descending"] .cxp-orden-btn::after { content: ' ↓'; }
.cxp-gestion-t td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.cxp-gestion-t th:first-child, .cxp-gestion-t td:first-child { position: sticky; left: 0; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); z-index: 1; }
.cxp-gestion-t th:first-child { z-index: 3; background: var(--sunken); }
.cxp-gestion-t .num { text-align: right; font-variant-numeric: tabular-nums; }
.cxp-gestion-t .cxp-gestion-sub { background: var(--sunken); font-weight: 600; box-shadow: inset 1px 0 0 var(--line); }
.cxp-gestion-t th.cxp-gestion-sub { background: var(--surface-2); }
.cxp-gestion-t .cxp-gestion-prog { color: var(--sec-cxp); background: color-mix(in srgb, var(--sec-cxp) 6%, var(--surface)); }
.cxp-gestion-t th.cxp-gestion-prog { background: color-mix(in srgb, var(--sec-cxp) 12%, var(--surface)); }
.cxp-gestion-pg { display: block; font-size: 10px; color: var(--sec-cxp); font-weight: 500; line-height: 1.1; }
.cxp-gestion-t.is-sin-prog .cxp-gestion-pg { display: none; }
.cxp-gestion-t tr.cxp-gestion-lvl0 > td { font-weight: 600; }
.cxp-gestion-t tr.cxp-gestion-lvl1 > td:first-child { padding-left: 26px; }
.cxp-gestion-t tr.cxp-gestion-lvl2 > td:first-child { padding-left: 46px; }
.cxp-gestion-t tr.cxp-gestion-lvl3 > td:first-child { padding-left: 66px; }
.cxp-gestion-t tr.cxp-gestion-lvl4 > td:first-child { padding-left: 86px; }
.cxp-gestion-t tr.cxp-gestion-tot td { background: var(--surface-2); font-weight: 700; border-bottom: 1px solid var(--line); position: sticky; top: 31px; z-index: 1; }
.cxp-gestion-t tr.cxp-gestion-tot td:first-child { z-index: 2; }
.cxp-gestion-hoja { display: inline-block; width: 16px; }
.cxp-gestion-vacio { text-align: center; padding: 24px 8px; }
.cxp-gestion-ayuda { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

/* ==========================================================================
   === cxp · caja ===
   ========================================================================== */
.cxp-caja-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.cxp-caja-nav-fin { margin-left: auto; display: flex; gap: 4px; }
.cxp-caja-wrap { max-height: 72vh; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* separate + spacing 0: con border-collapse el sticky del <th> no anda en Chrome. */
.cxp-caja-t { width: 100%; font-size: 12.5px; border-collapse: separate; border-spacing: 0; background: var(--surface); color: var(--ink); }
.cxp-caja-t th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--sunken); position: sticky; top: 0; z-index: 2; }
.cxp-caja-t th.num { text-align: right; }
.cxp-caja-card .cxp-caja-t th { position: static; }
.cxp-caja-t td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; }
.cxp-caja-t .num { text-align: right; font-variant-numeric: tabular-nums; }
/* La semana es la fila fuerte; las áreas cuelgan de ella. */
.cxp-caja-t tr.cxp-caja-sem td { background: var(--sunken); font-weight: 600; border-top: 1px solid var(--line); }
.cxp-caja-t tr.cxp-caja-sem.is-actual td { background: color-mix(in srgb, var(--sec-cxp) 10%, var(--surface)); }
.cxp-caja-t tr.cxp-caja-sem.is-actual td:first-child { box-shadow: inset 3px 0 0 var(--sec-cxp); }
.cxp-caja-t tr.cxp-caja-sem.is-pasada td { color: var(--muted); }
.cxp-caja-t tr.cxp-caja-area td:first-child { padding-left: 28px; color: var(--muted); }
.cxp-caja-t tr.cxp-caja-area.is-sin td { color: var(--muted); }
.cxp-caja-normal { font-weight: 400; }
.cxp-caja-fuerte { font-weight: 700; }
.cxp-caja-est { width: 120px; padding: 4px 8px; font-size: 12.5px; }
.cxp-caja-nota { min-width: 200px; padding: 4px 8px; font-size: 12.5px; }
.cxp-caja-inp { width: 175px; display: inline-block; text-align: right; padding: 4px 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cxp-caja-card { margin-top: 14px; }
.cxp-caja-h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: 0 0 10px; }

/* === cxp · programación === (gltmkt programacion.php:72-337, sólo con tokens) */
.cxp-prog-n { font-size: 11px; background: var(--surface-2); border-radius: 20px; padding: 1px 7px; margin-left: 5px; color: var(--muted); }
.cxp-prog-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.cxp-prog-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cxp-prog-mini { padding: 2px 8px; font-size: 11px; }
.cxp-prog-normal { font-weight: 400; text-transform: none; letter-spacing: 0; }
.cxp-prog-fuerte { font-weight: 600; }
.cxp-prog-mono { font-family: var(--font-mono); }
.cxp-prog-rojo { color: var(--crit); }
.cxp-prog-verde { color: var(--ok); }
.cxp-prog-ambar { color: var(--warn); }
.cxp-prog-naranja { color: var(--warn); }
.cxp-prog-sub { font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.cxp-prog-ico { display: inline-block; vertical-align: -1px; }
.cxp-prog-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; margin: 0 0 12px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--ink); font-size: 13px; }

/* La tira de próximas semanas */
.cxp-prog-tira-cab { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; }
.cxp-prog-wk { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.cxp-prog-wkc { flex: 0 0 205px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: inherit; text-decoration: none; }
.cxp-prog-wkc:hover { border-color: var(--muted); text-decoration: none; }
.cxp-prog-wkc.is-destino { border-color: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 20%, transparent); }
.cxp-prog-wkc-t { font-size: 12px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
.cxp-prog-tags { display: flex; gap: 4px; align-items: center; }
.cxp-prog-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 20px; padding: 1px 7px; background: var(--surface-2); color: var(--muted); }
.cxp-prog-tag.is-env { background: var(--ok-bg); color: var(--ok); }
.cxp-prog-tag.is-pag { background: var(--accent-soft); color: var(--accent); }
.cxp-prog-tag.is-tgt { background: var(--warn-bg); color: var(--warn); }
.cxp-prog-wkc-r { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.cxp-prog-wkc-r b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cxp-prog-uso { display: block; width: 100%; height: 6px; margin-top: 7px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.cxp-prog-uso.is-chica { height: 4px; margin-top: 3px; }
.cxp-prog-lib { font-size: 11.5px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.cxp-prog-ar { margin-top: 5px; padding-top: 4px; border-top: 1px dashed var(--line); }
.cxp-prog-ar + .cxp-prog-ar { border-top: 0; padding-top: 0; margin-top: 4px; }
.cxp-prog-ar-n { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cxp-prog-ar-v { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cxp-prog-ar-v b { color: var(--ink); font-weight: 600; }
.cxp-prog-ar.is-sin .cxp-prog-ar-n { opacity: .7; }
.cxp-prog-wk:not(.con-areas) .cxp-prog-ar { display: none; }
.cxp-prog-wk.con-areas .cxp-prog-wkc { flex-basis: 235px; }

/* Barras en SVG: los segmentos son <rect> con estas clases */
.cxp-prog-avc { display: block; width: 100%; min-width: 120px; height: 7px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.cxp-prog-avc.is-grande { height: 11px; border-radius: 6px; }
.cxp-prog-sg-pag { fill: var(--ok); }
.cxp-prog-sg-env { fill: var(--accent); }
.cxp-prog-sg-ret { fill: var(--warn); }
.cxp-prog-sg-sin { fill: var(--line); }
.cxp-prog-sg-uso { fill: var(--accent); }
.cxp-prog-sg-over { fill: var(--crit); }
.cxp-prog-lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 7px; }
.cxp-prog-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 3px; }
.cxp-prog-dot-pag { background: var(--ok); }
.cxp-prog-dot-env { background: var(--accent); }
.cxp-prog-dot-ret { background: var(--warn); }
.cxp-prog-dot-sin { background: var(--line); }

/* Barra de filtros */
.cxp-prog-bar.toolbar { align-items: flex-end; }
.cxp-prog-import { width: 130px; }
.cxp-prog-check { margin: 0 0 6px; }
.cxp-prog-cuenta { margin-left: auto; align-self: center; }
.cxp-prog-filtros { position: relative; }
.cxp-prog-filtros > summary { list-style: none; cursor: pointer; }
.cxp-prog-filtros > summary::-webkit-details-marker { display: none; }
/* Una fila propia al final de la barra (no un panel flotante): empuja la tabla
   en vez de taparla y nunca se sale de la pantalla. */
.cxp-prog-filtros-caja { display: none; order: 99; flex: 1 0 100%; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.cxp-prog-bar:has(> .cxp-prog-filtros[open]) > .cxp-prog-filtros-caja { display: flex; }
.cxp-prog-filtros[open] > summary { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.cxp-prog-filtros-caja .field { margin: 0; }

/* Barra de selección */
.cxp-prog-sel .cxp-prog-dest { width: auto; max-width: 290px; padding: 4px 8px; font-size: 12.5px; }
.cxp-prog-antes-bar { background: var(--surface); border: 1px solid var(--warn); color: var(--warn); border-radius: var(--radius-sm); padding: 2px 9px; font-weight: 600; font-size: 12px; }
.cxp-prog-limpiar { margin-left: auto; }

/* La tabla */
.cxp-prog-wrap { max-height: 58vh; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cxp-prog-wrap.is-libre { max-height: none; }
.cxp-prog-t { font-size: 12.5px; }
.cxp-prog-t th { position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.cxp-prog-t td { white-space: nowrap; background: var(--surface); }
.cxp-prog-t tr.cxp-prog-doc.is-alt > td { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); }
.cxp-prog-t tr.cxp-prog-prov > td { background: var(--surface-2); font-weight: 600; border-top: 1px solid var(--line); }
.cxp-prog-t tr.cxp-prog-prov:has(.grupo-abrir[aria-expanded="true"]) > td { background: var(--accent-soft); }
.cxp-prog-t tr.cxp-prog-prov:has(.grupo-abrir[aria-expanded="true"]) > td.cxp-prog-k0 { box-shadow: inset 3px 0 0 var(--accent); }
.cxp-prog-t tr.cxp-prog-prov:has(.grupo-abrir[aria-expanded="true"]) .cxp-prog-nom { color: var(--accent); }
.cxp-prog-t td.cxp-prog-sangria { padding-left: 26px; }
.cxp-prog-nom { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cxp-prog-imp { font-size: 11px; }
.cxp-prog-t tr.cxp-prog-tot > td { background: var(--sunken); font-weight: 700; border-top: 1px solid var(--line); }
.cxp-prog-t tr.is-lock > td { color: var(--muted); }
.cxp-prog-t tr.is-sel > td { background: var(--warn-bg); }
.cxp-prog-t tbody tr.cxp-prog-doc:hover > td { background: var(--sunken); }
.cxp-prog-t tbody tr.cxp-prog-doc.is-sel:hover > td { background: color-mix(in srgb, var(--warn-bg) 80%, var(--warn)); }
.cxp-prog-t tr.cxp-prog-doc.is-sel > td.cxp-prog-k0 { box-shadow: inset 3px 0 0 var(--warn); }
/* Check y Proveedor fijos a la izquierda: --k1 lo mide el JS */
.cxp-prog-t .cxp-prog-k0 { position: sticky; left: 0; z-index: 1; width: 30px; cursor: pointer; padding-left: 10px; padding-right: 6px; }
.cxp-prog-t .cxp-prog-k1 { position: sticky; left: var(--k1, 30px); z-index: 1; max-width: 430px; box-shadow: inset -1px 0 0 var(--line); }
.cxp-prog-t th.cxp-prog-k0, .cxp-prog-t th.cxp-prog-k1 { z-index: 4; }
.cxp-prog-t .grupo-abrir { all: unset; cursor: pointer; display: inline-block; width: 14px; color: var(--muted); font-size: 11px; }
.cxp-prog-antes { margin-left: 5px; font-size: 10.5px; padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--warn); color: var(--warn); white-space: nowrap; }
.cxp-prog-antes[hidden] { display: none; }
.cxp-prog-antes-t { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.cxp-prog-antes-t td { padding: 5px 6px; border-bottom: 1px solid var(--line-soft); }
.cxp-prog-vacio { text-align: center; padding: 24px 12px; white-space: normal; }
/* Checkbox propio de la tabla (gltmkt .pg-cb) */
.cxp-prog-cb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; display: inline-block; vertical-align: middle; border: 1.5px solid var(--line); border-radius: 5px; background: var(--surface); position: relative; cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
.cxp-prog-cb:hover:not(:disabled) { border-color: var(--warn); background: var(--warn-bg); }
.cxp-prog-cb:checked, .cxp-prog-cb:indeterminate { background: var(--warn); border-color: var(--warn); }
.cxp-prog-cb:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid var(--surface); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.cxp-prog-cb:indeterminate::after { content: ''; position: absolute; left: 3px; top: 6.5px; width: 9px; height: 2px; background: var(--surface); border-radius: 1px; }
.cxp-prog-cb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cxp-prog-cb:disabled { background: var(--surface-2); border-color: var(--line-soft); cursor: not-allowed; }
/* Estado: retenida en Cobranzas y factura cedida */
.cxp-prog-cob { background: color-mix(in srgb, var(--sec-cxp) 14%, var(--surface)); color: var(--sec-cxp); text-decoration: none; }
.cxp-prog-cob.is-no { background: var(--crit-bg); color: var(--crit); }
.cxp-prog-ces { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--sec-cxp) 14%, transparent); color: var(--sec-cxp); }

/* Pestaña Semanas */
.cxp-prog-sg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.cxp-prog-sg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; padding: 2px 11px; cursor: pointer; }
.cxp-prog-sg button.is-on { background: var(--accent); color: var(--on-accent); }
.cxp-prog-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 11px; margin-bottom: 11px; }
.cxp-prog-past-tg { margin: 11px 0; text-align: center; }
.cxp-prog-ck { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; transition: border-color .14s, box-shadow .14s; }
.cxp-prog-ck:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.cxp-prog-ck.is-now { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cxp-prog-ck.is-now .cxp-prog-ck-n { color: var(--accent); }
.cxp-prog-ck.is-past { opacity: .55; filter: grayscale(.35); }
.cxp-prog-ck.is-past:hover { opacity: 1; filter: none; }
.cxp-prog-ck-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cxp-prog-ck-n { font-size: 16px; font-weight: 700; color: var(--ink); }
.cxp-prog-ck-d { font-size: 12px; color: var(--muted); }
.cxp-prog-ck-big { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cxp-prog-ck-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.cxp-prog-ck-v { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.cxp-prog-ck-nd { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cxp-prog-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; }
.cxp-prog-kv > div { display: flex; justify-content: space-between; gap: 6px; }
.cxp-prog-kv-k { color: var(--muted); }
.cxp-prog-kv-v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.cxp-prog-ck-f { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 9px; margin-top: auto; }
.cxp-prog-sp { flex: 1; }
.cxp-prog-ico-btn { padding: 3px 9px; }
.cxp-prog-borrador { border: 1px solid var(--line); }
.cxp-prog-bw { display: flex; flex-direction: column; gap: 3px; min-width: 132px; }
.cxp-prog-blb { font-size: 10px; color: var(--muted); white-space: nowrap; }
.cxp-prog-ars { display: flex; flex-wrap: wrap; gap: 2px 5px; white-space: normal; min-width: 360px; max-width: 560px; margin-top: 3px; }
.cxp-prog-ck .cxp-prog-ars { min-width: 0; max-width: none; margin-top: 0; }
.cxp-prog-chip { font-size: 10.5px; line-height: 1.6; white-space: nowrap; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
.cxp-prog-chip b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cxp-prog-chip i { font-style: normal; opacity: .75; }
.cxp-prog-chip.is-ok b { color: var(--ok); }
.cxp-prog-chip.is-bad b { color: var(--crit); }
.cxp-prog-semt:not(.con-areas) .cxp-prog-ars, .cxp-prog-cards:not(.con-areas) .cxp-prog-ars { display: none; }

/* Modal de la semana (nivel 1 y 2) */
.cxp-sd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cxp-sd-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 11px; }
.cxp-sd-k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.cxp-sd-v { font-size: 16px; font-weight: 700; margin-top: 1px; font-variant-numeric: tabular-nums; color: var(--ink); }
.cxp-sd-s { font-size: 10.5px; color: var(--muted); }
.cxp-sd-tile.is-pag .cxp-sd-v { color: var(--ok); }
.cxp-sd-tile.is-env .cxp-sd-v { color: var(--accent); }
.cxp-sd-tile.is-ret .cxp-sd-v { color: var(--warn); }
.cxp-sd-tile.is-sin .cxp-sd-v { color: var(--muted); }
.cxp-sd-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin: 15px 0 6px; }
.cxp-sd-sec-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.cxp-sd-f { display: flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cxp-sd-f .input { width: 210px; padding: 5px 8px; font-size: 12px; }
.cxp-sd-chk { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); cursor: pointer; margin: 0; }
.cxp-sd-box { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.cxp-sd-scroll { max-height: 250px; overflow: auto; }
.cxp-sd-scroll.is-alto { max-height: 340px; }
.cxp-sd-mini { font-size: 12.5px; }
.cxp-sd-mini th { position: sticky; top: 0; z-index: 1; }
.cxp-sd-mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.cxp-sd-tag { font-size: 9.5px; font-weight: 700; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.cxp-sd-vacio { padding: 16px 0; text-align: center; }
.cxp-sd-pie { margin-top: 12px; }
.cxp-sd-crumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cxp-sd-crumb-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.cxp-sd-crumb-n { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.cxp-sd-doc { font-weight: 600; }
.cxp-sd-sub { font-size: 10px; color: var(--muted); }
.cxp-sd-est { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.cxp-sd-est.is-pag { background: var(--ok-bg); color: var(--ok); }
.cxp-sd-est.is-env { background: var(--accent-soft); color: var(--accent); }
.cxp-sd-est.is-ret { background: var(--warn-bg); color: var(--warn); }

/* Pegar lista y los diálogos de envío */
.cxp-pegar-wrap { max-height: 44vh; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; }
.cxp-pegar .textarea { width: 100%; }
.cxp-prog-corte { text-align: left; border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: var(--radius-sm); padding: 8px 11px; margin-top: 10px; font-size: 13px; color: var(--ink); }
.cxp-prog-corte-sub { font-size: 12px; opacity: .85; margin-top: 2px; }
.cxp-prog-corte-dir { font-size: 13px; margin: 6px 0 10px; }

/* === cxp · tesoreria ===
   Cuentas a pagar › Tesorería (views/cxp/tesoreria/). Sólo tokens: el oscuro sale solo.
   El cesionario (factoring) va en violeta, como en Programación: --sec-importar. */
.cxp-tes-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
.cxp-tes-ctl-semana, .cxp-tes-ctl-busca { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cxp-tes-ctl-semana .select { max-width: 340px; }
.cxp-tes-ctl-busca .input { width: 270px; max-width: 100%; }
.cxp-tes-ctl-der { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cxp-tes-k { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--muted); }
.cxp-tes-der { margin-left: auto; }
.cxp-tes-menu-form { margin: 0; }
.cxp-tes-menu-peligro { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--crit); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.cxp-tes-menu-peligro:hover { background: var(--crit-bg); }

.cxp-tes-filtros { margin-bottom: 10px; }
.cxp-tes-filtros > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cxp-tes-filtros > summary::-webkit-details-marker { display: none; }
.cxp-tes-f { margin-top: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; align-items: flex-end; }

.cxp-tes-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cxp-tes-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; container-type: inline-size; min-width: 0; }
.cxp-tes-tile .k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cxp-tes-tile .v { font-size: clamp(13px, 13cqi, 17px); font-weight: 700; color: var(--ink); margin-top: 1px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cxp-tes-tile .s { font-size: 11px; color: var(--muted); }
.cxp-tes-tile.is-ok { box-shadow: inset 3px 0 0 var(--ok); }
.cxp-tes-tile.is-mid { box-shadow: inset 3px 0 0 var(--warn); }
.cxp-tes-tile.is-brand { box-shadow: inset 3px 0 0 var(--sec-cxp); }
.cxp-tes-tile.is-bad { box-shadow: inset 3px 0 0 var(--crit); }
.cxp-tes-tile.is-ces { box-shadow: inset 3px 0 0 var(--sec-importar); }
.cxp-tes-tile.is-ces .v { color: var(--sec-importar); }
.cxp-tes-tile-areas { margin-top: 5px; padding-top: 4px; border-top: 1px dashed var(--line); font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 1px; }
.cxp-tes-tile-areas b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cxp-tes-tile-lnk { font-size: 11px; color: var(--sec-importar); }

.cxp-tes-ok { color: var(--ok); }
.cxp-tes-mid { color: var(--warn); }
.cxp-tes-crit { color: var(--crit); }
.cxp-tes-brand { color: var(--accent); }
.cxp-tes-mono { font-family: var(--font-mono); }

.cxp-tes-ant { margin-bottom: 10px; }
.cxp-tes-ant > summary { cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; box-shadow: inset 3px 0 0 var(--warn); color: var(--ink); font-size: 13px; }
.cxp-tes-ant-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.cxp-tes-ant-bar form { margin: 0; }
.cxp-tes-ck { width: 28px; }

.cxp-tes-wrap { border: 1px solid var(--line); border-radius: var(--radius); max-height: 72vh; overflow: auto; }
.cxp-tes-wrap--bus { max-height: 42vh; }
.cxp-tes-t { font-size: 12.5px; }
.cxp-tes-t th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); white-space: nowrap; }
.cxp-tes-t td { white-space: nowrap; vertical-align: middle; }
/* La identidad queda fija a la izquierda: el proveedor sigue visible al scrollear a la derecha. */
.cxp-tes-t--principal th:first-child, .cxp-tes-t--principal td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); max-width: 420px; overflow: hidden; }
.cxp-tes-t--principal th:first-child { z-index: 3; background: var(--surface-2); }
.cxp-tes-t tr.cxp-tes-grp td { background: var(--surface-2); font-weight: 600; }
.cxp-tes-t tr.cxp-tes-grp.is-ces td { background: color-mix(in srgb, var(--sec-importar) 8%, var(--surface)); }
.cxp-tes-t tr.cxp-tes-grp.is-ces td:first-child { box-shadow: inset 3px 0 0 var(--sec-importar), inset -1px 0 0 var(--line); }
.cxp-tes-t tr.cxp-tes-doc td:first-child { padding-left: 34px; }
.cxp-tes-t tr.cxp-tes-doc.is-pag td { color: var(--muted); }
.cxp-tes-t tr.cxp-tes-doc.is-np td { background: color-mix(in srgb, var(--crit) 6%, var(--surface)); }
.cxp-tes-t tr.cxp-tes-doc.is-np td.num { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--crit) 50%, transparent); }
.cxp-tes-vacio { text-align: center; padding: 22px 8px; }
.cxp-tes-sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxp-tes-sub--linea { display: inline; margin-left: 6px; }
.cxp-tes-nom { display: inline-block; max-width: 290px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cxp-tes-acc { text-align: right; }
.cxp-tes-inline { display: inline; margin: 0; }
.cxp-tes-btn-ok { color: var(--ok); border-color: var(--ok); }
.cxp-tes-btn-ok.is-lleno { background: var(--ok); color: var(--on-accent); }
.cxp-tes-btn-crit { color: var(--crit); border-color: var(--crit); }

/* Motivo de no pago: chip con el color del catálogo, o punteado para asignar. */
.cxp-tes-np { display: inline-flex; align-items: center; gap: 5px; border: 0; font: inherit; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
button.cxp-tes-np { cursor: pointer; }
.cxp-tes-np.is-vacio { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line); font-weight: 500; }
.cxp-tes-np.is-hist { opacity: .6; }
.cxp-tes-np-nota { border: 0; background: transparent; padding: 0; max-width: 300px; text-align: left; cursor: pointer; }
.cxp-tes-np-nota:hover { color: var(--accent); text-decoration: underline; }

.cxp-tes-comp, .cxp-tes-sin, .cxp-tes-cob, .cxp-tes-ces-lnk { color: var(--accent); text-decoration: none; }
.cxp-tes-sin { color: var(--muted); font-size: 11.5px; }
.cxp-tes-comp:hover, .cxp-tes-sin:hover, .cxp-tes-cob:hover, .cxp-tes-ces-lnk:hover { text-decoration: underline; }
.cxp-tes-cob { display: block; max-width: 320px; margin-top: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxp-tes-ces-lnk { color: var(--sec-importar); }
.cxp-tes-cli { text-decoration: none; font-weight: 400; }

/* Cesiones de crédito: la marca del cesionario, en violeta como en Programación. */
.cxp-tes-ces { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--sec-importar) 14%, transparent); color: var(--sec-importar); text-decoration: none; vertical-align: 1px; margin-left: 4px; }
a.cxp-tes-ces:hover { text-decoration: underline; }
.cxp-tes-ces-t { color: var(--sec-importar); }

/* Buscador en todas las semanas. */
.cxp-tes-bus { background: var(--surface); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--accent); border-radius: var(--radius); padding: 9px 12px; margin-bottom: 10px; }
.cxp-tes-bus-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.cxp-tes-bus-v { font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.cxp-tes-bus .cxp-tes-t td { white-space: normal; }
.cxp-tes-est { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.cxp-tes-est.is-ok { background: var(--ok-bg); color: var(--ok); }
.cxp-tes-est.is-tes { background: var(--accent-soft); color: var(--accent); }
.cxp-tes-est.is-mid { background: var(--warn-bg); color: var(--warn); }

/* Los modales (templates de ui.js): un renglón vacío no se ve. */
.cxp-tes-modal p { margin: 0 0 8px; }
.cxp-tes-modal [data-texto]:empty { display: none; }
.cxp-tes-modal-neto { font-size: 15px; }
.cxp-tes-pre { white-space: pre-wrap; }
.cxp-tes-pie { margin-top: 8px; }

/* === cxp · compensaciones y cesiones (piezas compartidas) ===
   Tarjetas de números, píldoras de estado, barra de filtros y textos chicos
   que usan Compensaciones y Cesiones de crédito (gltmkt .cz-* y .ce-*).
   .cxp-crit, .cxp-ok, .cxp-warn y .cxp-pie ya están en «facturas, maestro y
   cliente / proveedor»; el mono chico de estas pantallas es .cxp-mono-s. */
.cxp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cxp-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; }
.cxp-tile-k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cxp-tile-v { font-size: 18px; font-weight: 700; color: var(--ink); margin-top: 1px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cxp-tile-s { font-size: 11px; color: var(--muted); }
.cxp-tile.is-crit .cxp-tile-v { color: var(--crit); }
.cxp-tile.is-ok .cxp-tile-v { color: var(--ok); }
.cxp-tile.is-acc { border-color: var(--accent); }
.cxp-tile.is-acc .cxp-tile-v { color: var(--accent); }
.cxp-tile.is-ces { box-shadow: inset 3px 0 0 var(--sec-cxp); }
.cxp-tile.is-ces .cxp-tile-v { color: var(--sec-cxp); }
.cxp-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.cxp-barra-fin { margin-left: auto; }
.cxp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cxp-pill { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 4px 13px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cxp-pill:hover { color: var(--ink); text-decoration: none; }
.cxp-pill.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cxp-buscar { max-width: 260px; padding: 6px 9px; font-size: 13.5px; }
.cxp-card-tabla { padding: 0; overflow: hidden; }
.cxp-card-tabla .table { margin: 0; }
.cxp-prov { font-weight: 600; color: var(--ink); }
.cxp-link-plano { color: inherit; text-decoration: none; }
.cxp-link-plano:hover { text-decoration: underline; }
.cxp-sub { display: block; font-size: 11.5px; color: var(--muted); }
.cxp-mono-s { font-family: var(--font-mono); font-size: 11.5px; }
.cxp-acc { color: var(--accent); }
.cxp-bloque { display: block; }
.cxp-volver { margin-bottom: 8px; }
.cxp-head-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cxp-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.cxp-tag.is-tes { background: var(--accent-soft); color: var(--accent); }
.cxp-tag.is-ok { background: var(--ok-bg); color: var(--ok); }
.cxp-tag.is-warn { background: var(--warn-bg); color: var(--warn); }
.cxp-tag.is-ces { background: color-mix(in srgb, var(--sec-cxp) 14%, transparent); color: var(--sec-cxp); }
.cxp-com { font-size: 12.5px; border-bottom: 1px solid var(--line); padding: 7px 0; color: var(--ink); }
.cxp-com:last-child { border-bottom: 0; }
.cxp-com-w { color: var(--muted); font-size: 11.5px; }

/* === cxp · compensaciones === */
.cxp-comp-hd { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.cxp-comp-tit { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.cxp-comp-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cxp-comp-neg { display: inline-flex; flex-direction: column; gap: 1px; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.cxp-comp-neg .select { min-width: 160px; padding: 5px 8px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.cxp-comp-sec { font-size: 12px; color: var(--muted); margin: 16px 0 6px; }
.cxp-comp-sec b { color: var(--ink); }
.cxp-comp-in { width: 130px; margin-left: auto; text-align: right; padding: 4px 8px; font-size: 13px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cxp-comp-in.is-has { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.cxp-comp-nota, .cxp-comp-mot { padding: 4px 8px; font-size: 13px; }
.cxp-comp-mot { min-width: 200px; }
.cxp-comp-mot.is-falta { border-color: var(--crit); }
.cxp-comp-nota-pie { margin-top: 4px; }
.cxp-comp-lib { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; color: var(--ink); margin-bottom: 12px; }
.cxp-comp-lib.is-hold { border-left-color: var(--crit); background: var(--crit-bg); }
.cxp-comp-aviso { border-left: 3px solid var(--ok); background: var(--ok-bg); border-radius: var(--radius-sm); padding: 8px 11px; font-size: 12.5px; color: var(--ink); margin-bottom: 10px; }
[data-cxp-comp-facturas] tr.is-np td { background: var(--crit-bg); }
[data-cxp-comp-facturas] tr.is-fuera { opacity: .6; }
.cxp-ces-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--sec-cxp) 14%, transparent); color: var(--sec-cxp); }
.cxp-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.cxp-seg-op { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.cxp-seg-op + .cxp-seg-op { border-left: 1px solid var(--line); }
.cxp-seg-op input { margin: 0; accent-color: var(--accent); }
.cxp-seg-op.is-pagar:has(input:checked) { background: var(--ok-bg); color: var(--ok); }
.cxp-seg-op.is-nopagar:has(input:checked) { background: var(--crit-bg); color: var(--crit); }
.cxp-comp-repro { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.cxp-comp-bit { padding: 12px 14px; }
.cxp-comp-bit textarea { width: 100%; }
.cxp-comp-coms { margin-top: 8px; }
.cxp-comp-resumen { margin-bottom: 8px; }

/* Fragmentos de solo lectura (modal de Tesorería): compensación y cesión. */
.cxp-det-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.cxp-det-prov { font-size: 15px; font-weight: 700; color: var(--ink); }
.cxp-det-tot { text-align: right; }
.cxp-det-res { border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; color: var(--ink); margin-bottom: 10px; }
.cxp-det-res.is-crit { border-left-color: var(--crit); }
.cxp-det-res.is-ces { border-left-color: var(--sec-cxp); }
.cxp-det-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cxp-det-nota { margin-top: 8px; }
.cxp-det-visto { margin-top: 8px; }
.cxp-det-pago { margin-top: 4px; white-space: pre-wrap; }
.cxp-det-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 14px 0 6px; }
.cxp-det-bit { max-height: 220px; overflow: auto; }
.cxp-det tr.is-quit { opacity: .55; }
.cxp-det tr.is-quit td.num { text-decoration: line-through; }

/* === cxp · cesiones === */
.cxp-ces-c { color: var(--sec-cxp); }
.cxp-ces-tabla tbody tr[data-cxp-href] { cursor: pointer; }
.cxp-ces-tabla tbody tr[data-cxp-href]:hover td { background: var(--surface-2); }
.cxp-ces-doc { color: var(--ink); text-decoration: none; }
.cxp-ces-doc:hover { text-decoration: underline; }
.cxp-ces-est { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.cxp-ces-est.is-vigente { background: color-mix(in srgb, var(--sec-cxp) 14%, transparent); color: var(--sec-cxp); }
.cxp-ces-est.is-cumplida { background: var(--ok-bg); color: var(--ok); }
.cxp-ces-card { padding: 0; margin-bottom: 12px; overflow: hidden; }
.cxp-ces-card .table { margin: 0; }
.cxp-ces-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cxp-ces-hdr b { color: var(--ink); font-size: 14px; }
.cxp-ces-tit { font-size: 16px; font-weight: 700; color: var(--ink); }
.cxp-ces-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cxp-ces-subir { display: inline; margin: 0; }
.cxp-ces-subir .btn { cursor: pointer; }
.cxp-ces-pad { padding: 12px 16px; }
.cxp-ces-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.cxp-ces-file { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12.5px; color: var(--ink); }
.cxp-ces-file-i { font-size: 18px; }
.cxp-ces-ks { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.cxp-ces-ks .cxp-tile { min-width: 150px; }
.cxp-ces-nota { border-left: 3px solid var(--sec-cxp); background: var(--surface-2); border-radius: var(--radius-sm); padding: 7px 11px; font-size: 12.5px; color: var(--ink); }
.cxp-ces-anul { border-left: 3px solid var(--crit); background: var(--surface-2); border-radius: var(--radius-sm); padding: 7px 11px; font-size: 12.5px; color: var(--ink); margin-bottom: 12px; }
.cxp-ces tr.is-quit td { color: var(--muted); }
.cxp-ces tr.is-quit td.num { text-decoration: line-through; }
.cxp-ces-log { list-style: none; margin: 0; padding: 0; }
.cxp-ces-log li { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink); padding: 6px 0; border-bottom: 1px solid var(--line); }
.cxp-ces-log li:last-child { border-bottom: 0; }
.cxp-ces-log-i { width: 14px; text-align: center; color: var(--muted); }
.cxp-ces-wrap { max-height: 46vh; overflow: auto; }
.cxp-ces-pick th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.cxp-ces-pick td:first-child { width: 34px; }
.cxp-ces-pick tr.is-dis td { color: var(--muted); }
.cxp-ces-pick tr.is-sel td { background: color-mix(in srgb, var(--sec-cxp) 8%, transparent); }
.cxp-ces-pick tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--sec-cxp); }
.cxp-ces-pick tr[data-cxp-ces-fila] { cursor: pointer; }
.cxp-ces-cb { width: 17px; height: 17px; accent-color: var(--sec-cxp); cursor: pointer; }
.cxp-ces-pick-tot { margin-right: auto; }
.cxp-ces-agregar .modal-botones { align-items: center; padding-top: 10px; }
.cxp-ces-prov { margin: 0; }
.cxp-ces-prov .field { margin-bottom: 2px; }
.cxp-ces-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.cxp-ces-hint { font-size: 11.5px; color: var(--muted); }
.cxp-ces-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 12px; }
.cxp-ces-grid2 { display: grid; grid-template-columns: 7fr 5fr; gap: 12px; }
@media (max-width: 991px) { .cxp-ces-grid, .cxp-ces-grid2 { grid-template-columns: 1fr; } }
.cxp-ces-drop { display: block; border: 2px dashed var(--sec-cxp); background: color-mix(in srgb, var(--sec-cxp) 10%, transparent); border-radius: var(--radius-sm); padding: 14px; text-align: center; color: var(--sec-cxp); font-size: 13px; cursor: pointer; }
.cxp-ces-drop.is-over { background: color-mix(in srgb, var(--sec-cxp) 20%, transparent); }
.cxp-ces-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cxp-ces-files .btn-icono { padding: 0 2px; }
.cxp-ces-buscar { width: 190px; padding: 5px 8px; font-size: 13px; }
.cxp-ces-pie { border-top: 1px solid var(--line); }
.cxp-ces-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cxp-ces-foot-izq { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.cxp-ces-foot-izq .field { margin: 0; }
.cxp-ces-monto { width: 160px; text-align: right; }
.cxp-ces-tot { font-size: 18px; font-weight: 700; color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cxp-ces-chk { font-size: 12.5px; padding: 6px 10px; border-radius: var(--radius-sm); }
.cxp-ces-chk.is-ok { background: var(--ok-bg); color: var(--ok); }
.cxp-ces-chk.is-dif { background: var(--warn-bg); color: var(--warn); }

/* === cxp · configuración === */
.cxp-cfg { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
.cxp-cfg-nav { position: sticky; top: calc(var(--alto-topbar, 0px) + 12px); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.cxp-cfg-grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 0 10px; margin: 12px 0 4px; }
.cxp-cfg-grp:first-child { margin-top: 0; }
.cxp-cfg-link { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); border-radius: var(--radius-sm); padding: 7px 10px; }
.cxp-cfg-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.cxp-cfg-link.is-current { background: var(--accent); color: var(--on-accent); }
.cxp-cfg-n { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; border-radius: 20px; padding: 0 7px; background: var(--surface-2); color: var(--muted); }
.cxp-cfg-link.is-current .cxp-cfg-n { background: color-mix(in srgb, var(--on-accent) 25%, transparent); color: var(--on-accent); }
.cxp-cfg-out { display: block; margin-top: 10px; padding: 8px 10px 2px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.cxp-cfg-out:hover { color: var(--accent); }
.cxp-cfg-sec { min-width: 0; }
.cxp-cfg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 6px; }
.cxp-cfg-head h2 { margin: 0; font-size: 16px; color: var(--ink); }
.cxp-cfg-grip { display: inline-block; margin-right: 6px; color: var(--muted); letter-spacing: -2px; cursor: grab; }
.cxp-cfg tbody[data-cxp-orden] tr[data-id] { cursor: grab; }
.cxp-cfg-arrastrando { opacity: .4; }
.cxp-cfg-destino td { border-top: 2px solid var(--accent); }
.cxp-cfg-inactiva td { color: var(--muted); }
.cxp-cfg-mono { font-family: var(--font-mono); font-size: 12.5px; }
.cxp-cfg-falta { color: var(--warn); font-weight: 600; }
.cxp-cfg-dpo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.cxp-cfg-num { width: 90px; }
.cxp-cfg-buscar { max-width: 280px; }
.cxp-cfg-aviso { margin: 8px 0; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--warn-bg); color: var(--ink); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line)); }
.cxp-cfg-ges { max-height: 58vh; }
.cxp-cfg-ges-in { padding: 5px 8px; font-size: 13px; min-width: 200px; }
.cxp-cfg-ges-in.cxp-cfg-ok { border-color: var(--ok); background: var(--ok-bg); }
.cxp-cfg-ges-in.cxp-cfg-error { border-color: var(--crit); background: var(--crit-bg); }
@media (max-width: 820px) {
    .cxp-cfg { grid-template-columns: minmax(0, 1fr); }
    .cxp-cfg-nav { position: static; }
}

/* === cxp · snapshot SAP === */
.cxp-sap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; }
.cxp-sap-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cxp-sap-card h2 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.cxp-sap-card .toolbar { margin-top: 6px; }
.cxp-sap-nota { margin: 8px 0 0; }
.cxp-sap-error { color: var(--crit); }
.cxp-sap-horas { width: 160px; }
.cxp-sap-num { width: 80px; }
.cxp-sap-evol { min-width: 0; }
.cxp-sap-tabla { max-height: 60vh; }
.cxp-sap-vencido { color: var(--crit); }
.cxp-sap-credito { color: var(--ok); }
@media (max-width: 900px) {
    .cxp-sap { grid-template-columns: minmax(0, 1fr); }
}

/* === despachos === (ex _estilos.php y los <style> de ficha/config de gltmkt; sólo tokens) */
.dp-hd { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.dp-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.dp-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; }
.dp-tile .k { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.dp-tile .v { font-size: 19px; font-weight: 700; color: var(--ink); margin-top: 1px; font-variant-numeric: tabular-nums; }
.dp-tile .s { font-size: 11px; color: var(--muted); }
.dp-tile.bad .v { color: var(--crit); }
.dp-tile.warn .v { color: var(--warn); }
.dp-tile.ok .v { color: var(--ok); }
/* Las tarjetas filtran la lista (12/10/2026): se tocan. El borde y el fondo de
   la prendida van en el color de su número. */
.dp-tile-link { --dp-c: var(--accent); display: block; color: inherit; text-decoration: none; cursor: pointer; }
.dp-tile-link.bad  { --dp-c: var(--crit); }
.dp-tile-link.warn { --dp-c: var(--warn); }
.dp-tile-link.ok   { --dp-c: var(--ok); }
.dp-tile-link:hover { border-color: var(--dp-c); text-decoration: none; }
.dp-tile-link.is-on { border-color: var(--dp-c); background: color-mix(in srgb, var(--dp-c) 7%, var(--surface)); }
/* Plata › Pagos en SAP: un renglón por pago, subtotal por a quién se le pagó. */
.dp-pagos .dp-sub > td { font-weight: 600; background: var(--surface-2); }
.dp-pagos .dp-tot > td { font-weight: 700; border-top: 2px solid var(--line); }
.dp-filtros { margin-bottom: 8px; align-items: flex-end; }
.dp-buscar { max-width: 280px; }
.dp-cuenta { margin-left: auto; }
.dp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dp-pad { padding: 14px; margin-bottom: 12px; }
.dp-angosto { max-width: 640px; }
.dp-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-height: 72vh; }
.dp-wrap-art { max-height: 420px; }
.dp-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dp-t th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dp-t td { padding: 7px 9px; border-bottom: 1px solid var(--line-soft); color: var(--ink); vertical-align: middle; }
.dp-t tr.lnk { cursor: pointer; }
.dp-t tr.lnk:hover td { background: var(--accent-soft); }
.dp-t tr.lnk a { color: inherit; text-decoration: none; }
.dp-t .r { text-align: right; font-variant-numeric: tabular-nums; }
.dp-t th.r { text-align: right; }
.dp-t tr.nuevo td { background: var(--surface-2); }
.dp-t .w60, .dp .w60 { width: 70px; }
.dp-t input.input, .dp-t select.select { min-width: 90px; }
.dp-vacio { text-align: center; padding: 24px 9px; }
.dp-mono { font-family: var(--font-mono); font-size: 12px; }
.dp-muted { color: var(--muted); font-size: 12px; }
.dp-chico { font-size: 10.5px; }
.dp-bad { color: var(--crit); }
.dp-apagado { color: var(--muted); }
.dp-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--dp-c, var(--muted)); background: color-mix(in srgb, var(--dp-c, var(--muted)) 14%, transparent); }
.dp-tag-bad { --dp-c: var(--crit); }
.dp-tag-warn { --dp-c: var(--warn); }
.dp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--line); vertical-align: 0; }
.dp-dot.s1 { background: var(--ok); }
.dp-dot.s2 { background: var(--warn); }
.dp-dot.s3 { background: var(--crit); }
.dp-sap { font-size: 9.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.dp-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 4px 0 8px; }
.dp-sin-margen { margin: 0; }
.dp-arriba { margin-top: 8px; }
.dp-abajo { margin-bottom: 8px; }
.dp-centro { text-align: center; }
.dp-fila-entre { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.dp-etapas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.dp-tl { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin: 12px 0 4px; }
.dp-tl .st { text-align: center; position: relative; padding-top: 22px; font-size: 11.5px; color: var(--ink); }
.dp-tl .st::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: var(--line); }
.dp-tl .st.done::before { background: var(--ok); }
.dp-tl .st .b { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.dp-tl .st.done .b { border-color: var(--ok); background: var(--ok); }
.dp-tl .st.next .b { border-color: var(--accent); }
.dp-tl .st b { display: block; font-size: 11.5px; }
.dp-tl .st .d { font-variant-numeric: tabular-nums; }
.dp-tl .st .e { font-size: 10.5px; color: var(--muted); }
.dp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: start; }
.dp-grid > div { min-width: 0; }
.dp-pl { margin-bottom: 12px; }
.dp-pl > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius); }
.dp-pl > summary::-webkit-details-marker { display: none; }
.dp-pl > summary:hover { background: var(--accent-soft); }
.dp-pl[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.dp-pl .dp-chev { color: var(--muted); width: 12px; display: inline-block; transition: transform .15s; }
.dp-pl[open] .dp-chev { transform: rotate(90deg); }
.dp-pl .dp-sec { white-space: nowrap; }
.dp-res { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-res .m { color: var(--muted); }
.dp-pl-body { padding: 12px 14px; overflow-x: auto; }
@media (max-width: 1100px) { .dp-grid { grid-template-columns: 1fr; } }
.dp-fld { display: grid; grid-template-columns: 125px 1fr; gap: 6px 10px; align-items: center; font-size: 12.5px; }
.dp-fld .l { color: var(--muted); }
.dp-ro { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 3px 8px; color: var(--ink); }
.dp-fechas td { padding: 4px 6px; }
.dp-fecha { max-width: 150px; }
.dp-comentario { width: 100%; margin-bottom: 4px; }
.dp-monto { display: flex; gap: 4px; }
.dp-moneda { max-width: 80px; }
.dp-num { text-align: right; }
.dp-com { font-size: 12.5px; border-bottom: 1px solid var(--line-soft); padding: 6px 0; color: var(--ink); }
.dp-com .w { color: var(--muted); font-size: 11.5px; }
.dp-cont { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-cont label { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1px 7px; font-size: 11.5px; cursor: pointer; color: var(--ink); }
.dp-cont input { display: none; }
.dp-cont input:checked + span { color: var(--accent); font-weight: 700; }
.dp-tabs { margin-bottom: 12px; flex-wrap: wrap; }
.dp-form-fila { display: inline-flex; gap: 4px; margin: 0; }
.dp-color { width: 44px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.dp-semaforo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- El menu de tres niveles: area › modulo › pantalla ----------------------
   Decidido por Edgar el 09/10/2026 (views/layouts/admin.php, menu.js).

   Arriba, las AREAS. Un clic abre un PANEL debajo de la barra, con los
   modulos del area en columnas y sus pantallas. La segunda fila de pantallas
   ya no existe: en su lugar va una MIGA arriba del contenido, cuyo modulo es
   un boton con las pantallas hermanas.

   Todo sale de tokens (claro, oscuro y «sistema» sin una regla mas) y del
   `--sec` de cada seccion, igual que el resto del menu. */

/* Las areas son <button>: se ven como los enlaces de la barra. */
.areanav-boton {
    border: none;
    background: none;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.areanav-boton[aria-expanded="true"] {
    background: color-mix(in srgb, var(--sec) 14%, transparent);
    color: var(--ink);
}

.areanav-boton[aria-expanded="true"] .topnav-flecha { transform: rotate(180deg); }
.topnav-flecha { display: inline-block; transition: transform .15s; }

/* Seis areas con nombre entran hasta ~1100px: el nombre es lo que se busca,
   asi que se esconde recien abajo de eso (con clip, ver «El nombre, cuando no
   entra»), y no a los 1420 como los iconos de antes. */
@media (min-width: 1100px) {
    .areanav .topnav-txt {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        clip-path: none;
    }
}

/* El panel cuelga de la BARRA, no del boton: la barra es sticky y por eso es
   el contenedor de lo posicionado adentro (`.areanav-item` no lo es). Asi
   ocupa el ancho entero y queda pegado abajo de la barra aunque se scrollee. */
.areanav-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 90;
    max-height: calc(100vh - var(--alto-topbar, 60px) - 24px);
    overflow-y: auto;
    padding: 16px 20px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.areanav-panel[hidden] { display: none; }

/* El nombre del area arriba del panel solo hace falta cuando la barra muestra
   iconos sin texto. */
.areanav-panel-titulo {
    display: none;
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

@media (max-width: 1099px) {
    .areanav-panel-titulo { display: block; }
}

.areanav-columnas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px 24px;
    max-width: 1400px;
}

.areanav-col { min-width: 0; }

.areanav-titulo,
.areanav-subtitulo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    padding: 0 10px 6px;
    border-bottom: 2px solid color-mix(in srgb, var(--sec) 35%, transparent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink);
}

.areanav-subtitulo {
    border-bottom-width: 1px;
    font-size: 12.5px;
    color: var(--sec);
}

/* El modulo que vive adentro de otro (Despachos en Cuentas a pagar) va en su
   propia caja con su color: sin ella su «Configuracion» se leia como la del
   anfitrion y el titulo parecia una opcion mas (Edgar, 10/10/2026). */
.areanav-anexo {
    margin-top: 14px;
    padding: 8px 4px 4px;
    border-radius: 10px;
    border-left: 3px solid color-mix(in srgb, var(--sec) 55%, transparent);
    background: color-mix(in srgb, var(--sec) 9%, transparent);
}

/* La columna de los anexos, al lado de su anfitrión: la primera caja arranca
   a la altura de los títulos de las otras columnas. */
.areanav-col--anexos > .areanav-anexo:first-child { margin-top: 0; }

a.areanav-subtitulo { text-decoration: none; border-radius: 6px 6px 0 0; }
a.areanav-subtitulo:hover { color: var(--ink); background: color-mix(in srgb, var(--sec) 10%, transparent); }

.areanav-titulo .ico,
.areanav-subtitulo .ico { color: var(--sec); flex: none; }

/* El modulo en el que se esta: el titulo de su columna en su color. */
.areanav-col.is-current > .areanav-titulo { color: var(--sec); }

.areanav-lista { list-style: none; margin: 0; padding: 0; }

/* Adentro del panel el nombre de la pantalla se ve SIEMPRE, sea cual sea el
   ancho: es justo lo que se vino a buscar. */
.areanav-lista .topnav-link,
.miga-pantallas .topnav-link { display: flex; width: 100%; font-size: 13px; padding: 6px 10px; }

.areanav-lista .topnav-txt,
.miga-pantallas .topnav-txt {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* --- La miga ---------------------------------------------------------------
   Una linea chica arriba del contenido. Es tambien el titulo de la pantalla:
   las vistas ya no repiten el nombre en un h1. */
.miga { position: relative; margin: -10px 0 14px; }

.miga-lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--muted);
}

.miga-lista > li { display: inline-flex; align-items: center; }

.miga-lista > li + li::before {
    content: "›";
    margin: 0 8px;
    color: var(--muted);
}

.miga-lista a { color: var(--ink-2); }
.miga-lista a:hover { color: var(--ink); }

.miga-modulo { position: relative; }

.miga-boton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--sec);
}

button.miga-boton { cursor: pointer; }
button.miga-boton:hover,
button.miga-boton[aria-expanded="true"] {
    background: color-mix(in srgb, var(--sec) 10%, transparent);
    border-color: color-mix(in srgb, var(--sec) 30%, transparent);
}

.miga-boton .ico { width: 16px; height: 16px; color: var(--sec); }
.miga-boton[aria-expanded="true"] .topnav-flecha { transform: rotate(180deg); }

/* La pantalla en la que se esta: el dato que antes decia el h1. */
.miga-pantalla > span[aria-current] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

.miga-pantallas {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.miga-pantallas[hidden] { display: none; }

/* --- El encabezado de pagina, despues de la miga ----------------------------
   Lo que queda del page-head es lo que agrega algo: acciones (a la derecha,
   en una linea) y, en las pantallas de detalle que no son del menu, su
   titulo, mas chico que antes porque la miga ya dice donde se esta. */
.page-head .h1 { font-size: 22px; margin: 0; }
.page-head > p.muted { margin: 0; max-width: 900px; }
.page-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Un page-head que quedo SOLO con acciones (la ayuda de Programacion, los
   botones de Cesiones) no gasta un renglon propio: en pantalla ancha sube a la
   linea de la miga, a la derecha. Solo si va pegado a la miga (sin un aviso
   en el medio) o es lo primero del envoltorio de la pantalla; si no, queda en
   su renglon, que tambien se lee bien. La franja vacia de la izquierda no
   tapa la miga: no recibe clics. */
@media (min-width: 900px) {
    .miga + .page-head--acciones,
    .miga + * > .page-head--acciones:first-child {
        margin-top: -46px;
        margin-bottom: 14px;
        min-height: 32px;
        pointer-events: none;
        /* Encima de la miga, que es position:relative y se pintaba arriba de
           los botones cuando el contenedor de la pantalla no está posicionado
           (Despachos: el (?) se veía y no se podía tocar, 10/10/2026). */
        position: relative;
        z-index: 1;
    }

    .page-head--acciones > * { pointer-events: auto; }
}

/* --- El telefono -------------------------------------------------------------
   Las areas bajan a una fila propia (`.topnav` con order:10) y el panel es
   una lista a todo el ancho, una columna abajo de la otra. */
@media (max-width: 720px) {
    .areanav-panel { padding: 12px 14px 14px; max-height: calc(100vh - var(--alto-topbar, 100px)); }
    .areanav-columnas { grid-template-columns: 1fr; gap: 12px; }
    .miga-pantallas { max-width: calc(100vw - 32px); }
}

/* Cambio de contraseña: las reglas que se tildan mientras escribe (clave.js, 13/10/2026). */
.clave-reglas { list-style: none; margin: -4px 0 6px; padding: 0; display: grid; gap: 3px; color: var(--muted); }
.clave-reglas li { display: flex; gap: 7px; align-items: baseline; }
.clave-reglas .clave-ic { width: 14px; flex: none; text-align: center; font-weight: 700; }
.clave-reglas li.is-ok { color: var(--ok); }
.clave-reglas li.is-mal { color: var(--crit); }
.clave-reglas .clave-al-guardar { font-size: 12px; margin-top: 2px; }
.clave-ejemplo { margin: 0 0 14px; }
.clave-actual-ok { margin: 0 0 14px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--ok-bg, var(--surface-2)); color: var(--ok); }
.field-hint { display: block; margin-top: 4px; }
.clave-ver { margin-top: 2px; }

/* Presupuesto › Gastos por cuenta (086) */
.ppto-miradas { margin: 0 0 10px; }
.ppto-linea--sucursal { grid-template-columns: 20px minmax(220px, 1.6fr) 130px 70px minmax(180px, 1.4fr) 120px; }
.ppto-cuenta-link {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) 130px 70px minmax(180px, 1.4fr) 120px;
    gap: 12px;
    align-items: center;
    padding: 8px 14px;
    font-size: 13.5px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--line-soft);
}
.ppto-cuenta-link:hover { background: var(--sunken); }
.ppto-cuenta-link .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.ppto-bloque { margin: 10px 0 14px; }
.ppto-guardado { color: var(--muted); }
.ppto-guardado.is-error { color: var(--warn); }
.ppto-guardado.is-ok { color: var(--ok, var(--muted)); }
.ppto-marca-unidad { width: 16px; height: 16px; }

@media (max-width: 1000px) {
    .ppto-linea--sucursal { grid-template-columns: 20px 1fr; }
    .ppto-linea--sucursal > :nth-child(n+3) { grid-column: 2; text-align: left; }
    .ppto-cuenta-link { grid-template-columns: 1fr; gap: 2px; }
    .ppto-cuenta-link .num { text-align: left; }
}

/* El selector con buscador (data-ppto-buscable, presupuesto.js) */
.ppto-combo { position: relative; min-width: 340px; }
.ppto-combo-campo { width: 100%; }
.ppto-combo-lista {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    min-width: 100%; width: max-content; max-width: min(620px, 92vw);
    max-height: 360px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none;
    background: var(--surface, var(--bg)); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: 13px;
}
.ppto-combo-grupo { padding: 8px 12px 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ppto-combo-op { padding: 6px 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppto-combo-op.is-activa, .ppto-combo-op:hover { background: var(--sunken); }
.ppto-combo-op.is-elegida { font-weight: 600; }
.ppto-combo-vacio { padding: 8px 12px; color: var(--muted); }
@media (max-width: 700px) { .ppto-combo { min-width: 0; width: 100%; } }