:root{
  --verde:#2D7800; --verde-osc:#1B4332; --verde-cl:#EAF1EC; --verde-tx:#14603B;
  --lima:#A5C30F; --navy:#1e3a5f; --fondo:#F4F8F5; --linea:#e2e8f0;
  --gris:#64748b; --gris-cl:#f1f5f9;
  --ok-bg:#e7f8ee; --ok-tx:#166534;
  --amb-bg:#fef3c7; --amb-tx:#92400e;
  --mal-bg:#fef2f2; --mal-tx:#b91c1c;
  /* un color por área del sistema: el color dice dónde estás parado */
  --adm:#EA580C; --adm-cl:#FFF1E7;
  --con:#2D7800; --con-cl:#EDF6E4;
  --ctl:#7C3AED; --ctl-cl:#F3EDFE;
  --afj:#8B5A2B; --afj-cl:#F6EEE6;
  --cnc:#0E7490; --cnc-cl:#E6F4F7;
  --inf:#0D9488; --inf-cl:#E6F6F4;
  --tri:#2563EB; --tri-cl:#EAF0FE;
  --sis:#64748b; --sis-cl:#f1f5f9;
  --per:#B45309; --per-cl:#FEF3C7;   /* PERSONAL: remuneraciones, nomina y RRHH */
  --mod:#1B4332;                       /* el color del módulo abierto */
  --fuente:'Segoe UI',Tahoma,Verdana,Arial,sans-serif;
  --mono:Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
/* La ventana se reparte: encabezado y filtro fijos, menu y contenido con su
   propio desplazamiento. Sin esto, el menu —casi cincuenta pantallas— es mas
   alto que la ventana, y bajarlo se lleva la pantalla central. */
html{height:100%}
body{margin:0;background:var(--fondo);color:#12253d;
     font-family:var(--fuente);font-size:13px;line-height:1.5;
     font-variant-numeric:tabular-nums;
     --alto-ventana:100vh;
     height:100vh;display:flex;flex-direction:column;overflow:hidden}
body>.top,body>.filtro{flex:0 0 auto}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";text-align:right;white-space:nowrap}
svg.i{width:1em;height:1em;display:block;flex:none}

/* ---------- barra superior ---------- */
.top{background:#fff;color:#12253d;padding:8px 16px;display:flex;
     align-items:center;gap:12px;flex-wrap:wrap;
     border-bottom:3px solid var(--mod);transition:border-color .2s}
.top .marca{font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--navy)}
.top .logo{background:#fff;border-radius:9px;padding:2px 8px;display:flex;align-items:center;margin-right:2px}
.top .logo img{height:30px;display:block}
@media print{.top .logo{display:flex}}
.top .emp{font-size:12px;color:var(--gris)}
.top .der{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.top button,.top select{font:12px var(--fuente);padding:5px 11px;border-radius:9px;
     border:1px solid var(--linea);background:#fff;color:#334155;cursor:pointer;
     transition:all .13s}
.top button:hover{background:var(--gris-cl);border-color:#cbd5e1}
.top #btnNube{background:var(--mod);border-color:var(--mod);color:#fff;font-weight:600}
.top #btnNube:hover{filter:brightness(1.12)}
.top select option{color:#12253d}
/* el buscador de empresa de la barra de arriba */
.pick{position:relative}
.pickpanel{position:absolute;z-index:99990;top:calc(100% + 6px);left:0;width:370px;
  background:#fff;border:1px solid var(--linea);border-radius:12px;
  box-shadow:0 14px 40px rgba(14,22,38,.16);padding:8px}
.pickpanel input{width:100%;box-sizing:border-box;font:13px var(--fuente);
  padding:7px 10px;border:1px solid var(--linea);border-radius:9px;
  color:#12253d;background:#fff}
.picklista{max-height:330px;overflow:auto;margin-top:6px}
.picklista .g{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:#64748b;padding:9px 8px 3px;font-weight:700}
.picklista .it{display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:8px;cursor:pointer;font-size:12.5px;color:#12253d}
.picklista .it:hover,.picklista .it.foco{background:#eef6e8}
.picklista .it.act{font-weight:700}
.picklista .it .ru{margin-left:auto;font-size:11px;color:#64748b;
  font-variant-numeric:tabular-nums}
.picklista .vacio{padding:10px 8px;font-size:12px;color:#64748b}
#estado{font-size:11px;color:var(--gris)}
/* La entrada: una tarjeta centrada, como el portal de AyS. */
#entrada{max-width:520px;margin:26px auto 0}
#entrada .tarjeta{background:#fff;border:1px solid var(--linea);border-radius:14px;
  box-shadow:0 10px 34px rgba(14,22,38,.09);overflow:hidden}
#entrada .franja{height:5px;background:linear-gradient(90deg,#0A2A00,#2D7800,#A5C30F)}
#entrada .adentro{padding:26px 30px 24px}
#entrada .marca{text-align:center;padding-bottom:6px}
#entrada .marca img{max-width:200px;height:auto}
#entrada h2{margin:14px 0 4px;font-size:20px;color:#2D7800;text-align:center}
#entrada .bajada{font-size:12.5px;color:var(--gris);text-align:center;line-height:1.55;margin-bottom:18px}
#entrada label{display:block;font-size:12.5px;font-weight:700;color:#12253d;margin:12px 0 5px}
#entrada input{width:100%;box-sizing:border-box;padding:11px 12px;font:13px var(--fuente);
  border:1px solid var(--linea);border-radius:9px;background:#fff;color:#12253d}
#entrada input:focus{outline:none;border-color:#2D7800;box-shadow:0 0 0 3px rgba(45,120,0,.12)}
#entrada .entrar{width:100%;margin-top:18px;padding:12px;font:700 13.5px var(--fuente);
  border:0;border-radius:9px;background:#1B4332;color:#fff;cursor:pointer}
#entrada .entrar:hover{background:#2D7800}
#entrada .pie{text-align:center;margin-top:14px;font-size:12px}
#entrada .pie a{color:var(--gris);cursor:pointer;text-decoration:none}
#entrada .pie a:hover{color:#2D7800;text-decoration:underline}
#entrada .nota{margin-top:16px;padding-top:13px;border-top:1px solid var(--linea);
  font-size:11.5px;color:var(--gris);line-height:1.6}
/* LA PANTALLA PREVIA. Jose: "la pantalla de inicio es antes de entrar al
   sistema, es una pantalla previa". Asi que no lleva encima el sistema: sin
   menu, sin barra de empresa y sin filtro de meses. Esas tres cosas hablan de
   una empresa abierta, y aqui todavia no se ha elegido ninguna. */
body.previa .top,
body.previa .filtro,
body.previa .menu{display:none!important}   /* (531) la regla habia perdido su {display:none}: el menu se veia detras del ingreso */
body.previa .cont{padding:0}
body.previa .layout{overflow:visible}
body.previa #entrada{margin-top:56px}
/* (544) el cliente entra solo a su resumen: sin menu ni cambio de empresa */
body.modocli .menu,body.modocli #pickEmp,body.modocli #presencia,body.modocli .filtro .noimp{display:none!important}
#entrada .lista{max-width:940px;margin:26px auto 0}
#entrada .volver{max-width:940px;margin:0 auto;display:flex;align-items:center;gap:14px;
  font-size:12px;color:var(--gris);padding:10px 2px;border-bottom:1px solid var(--linea)}
#entrada .volver a{margin-left:auto;color:#2D7800;cursor:pointer;font-weight:600}
#entrada .volver a:hover{text-decoration:underline}
/* La version. No es un pie de pagina: es el dato que dice si lo que tienes
   abierto es lo que esta publicado. Por eso va arriba y por eso cambia de
   color. */
#vtop{display:inline-block;vertical-align:middle;margin-left:9px;font-size:11px;font-weight:700;letter-spacing:.2px;padding:4px 9px;border-radius:9px;
      border:1px solid var(--linea);background:#fff;color:var(--gris);cursor:default;white-space:nowrap}
#vtop.ok{border-color:#A5C30F;background:#F6FAEA;color:#2D7800}
#vtop.nueva{border-color:#d9a300;background:#fffaf0;color:#92400e}

/* ---------- filtro de períodos ---------- */
.filtro{background:#fff;border-bottom:1px solid var(--linea);padding:7px 16px;
        display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.chip{border:1px solid var(--linea);background:#fff;color:var(--gris);border-radius:20px;
      padding:3px 12px;font-size:11px;cursor:pointer;font-weight:600;transition:all .13s}
.chip:hover{background:var(--gris-cl)}
.chip.on{background:var(--mod);border-color:var(--mod);color:#fff}
.filtro .ayuda{color:var(--gris);font-size:11px;margin-left:6px}

/* ---------- layout ---------- */
.layout{display:flex;align-items:stretch;gap:0;flex:1 1 auto;min-height:0;overflow:hidden}
.menu{width:222px;flex:0 0 222px;background:#FAFBFB;border-right:1px solid var(--linea);
      padding:10px 9px;overflow-y:auto;min-height:0;
      /* que al llegar al final no empiece a arrastrar la pagina de atras */
      overscroll-behavior:contain;scrollbar-width:thin}
.menu .grp{font-size:10.5px;letter-spacing:.7px;color:#7c8798;font-weight:700;
           padding:9px 10px 9px 8px;text-transform:uppercase;cursor:pointer;
           background:#F2F5F6;border:1px solid transparent;margin-bottom:2px;
           display:flex;align-items:center;gap:6px;border-radius:9px;
           user-select:none;-webkit-user-select:none;transition:background .13s}
.menu .grp:hover{background:#fff;border-color:var(--linea);color:var(--gris)}
/* el grupo ABIERTO se ve abierto: blanco, con el titulo del color de su area */
.menu .grp:not(.cerrado){background:#fff;border-color:var(--linea);
   color:var(--acc,#64748b);box-shadow:0 1px 2px rgba(15,23,42,.05)}
/* la barrita del area, a la izquierda: el mismo color de los iconos de abajo */
.menu .grp::before{content:'';flex:0 0 3px;width:3px;height:12px;border-radius:2px;
   background:var(--acc,#cbd5e1);opacity:.35;transition:opacity .13s}
.menu .grp:not(.cerrado)::before{opacity:1}
.menu .grp.ga-adm{--acc:var(--adm)} .menu .grp.ga-con{--acc:var(--con)}
.menu .grp.ga-ctl{--acc:var(--ctl)} .menu .grp.ga-afj{--acc:var(--afj)} .menu a.g-afj .ic{color:var(--afj)} .menu .grp.ga-cnc{--acc:var(--cnc)} .menu a.g-cnc .ic{color:var(--cnc)} .menu .grp.ga-inf{--acc:var(--inf)}
.menu .grp.ga-tri{--acc:var(--tri)} .menu .grp.ga-per{--acc:var(--per)}
.menu .grp.ga-sis{--acc:var(--sis)}
.menu .grp .fl{font-size:15px;line-height:1;color:#b6c0cc;transition:transform .16s;
               display:inline-block;transform:rotate(90deg)}
.menu .grp.cerrado .fl{transform:rotate(0deg)}
.menu .grp .bdg{margin-left:auto;font-size:10px;font-weight:700;border-radius:20px;
                padding:1px 7px;background:var(--mal-bg);color:var(--mal-tx);letter-spacing:0}
.menu .grp .bdg.amb{background:var(--amb-bg);color:var(--amb-tx)}
.menu .gi.off{display:none}
/* (486) subtitulo de bloque dentro de un grupo del menu */
.menu .sgr{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;
  color:#94a3b8;padding:10px 10px 3px 12px}
.menu .gi>.sgr:first-child{padding-top:4px}
/* los dos botones de arriba del menu: chicos, grises, sin peso visual —
   son una salida de emergencia, no la forma normal de navegar */
.menu .grp-acc{display:flex;gap:5px;padding:2px 4px 8px}
.menu .grp-acc button{flex:1;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;
   font-weight:700;color:#94a3b8;background:#fff;border:1px solid var(--linea);
   border-radius:20px;padding:5px 4px;cursor:pointer;transition:all .13s}
.menu .grp-acc button:hover{color:var(--gris);border-color:#cbd5e1}
.menu .grp-acc button.off{opacity:.4;pointer-events:none}
.menu a{display:flex;gap:9px;align-items:center;padding:6px 10px;color:#334155;
        text-decoration:none;cursor:pointer;font-size:12px;border-radius:20px;
        margin-bottom:1px;transition:all .13s}
.menu a:hover:not(.on){background:#fff}
.menu a.on{background:#fff;font-weight:700;color:var(--mod);
           box-shadow:0 2px 7px rgba(16,40,28,.10)}
.menu a .ic{width:17px;font-size:14px;display:grid;place-items:center;flex:none;color:var(--mod)}
.menu a.g-adm .ic{color:var(--adm)} .menu a.g-con .ic{color:var(--con)}
.menu a.g-ctl .ic{color:var(--ctl)} .menu a.g-inf .ic{color:var(--inf)}
.menu a.g-tri .ic{color:var(--tri)} .menu a.g-sis .ic{color:var(--sis)}
.menu a.g-per .ic{color:var(--per)}
.menu a .bdg{margin-left:auto;font-size:9px;font-weight:700;border-radius:20px;
             padding:1px 7px;background:var(--mal-bg);color:var(--mal-tx)}
.menu a .bdg.amb{background:var(--amb-bg);color:var(--amb-tx)}
.cont{flex:1;padding:16px 20px 40px;min-width:0;overflow-y:auto;min-height:0;
      overscroll-behavior:contain}
.sec{display:none}
.sec.on{display:block}
h2{font-size:22px;margin:0 0 3px;color:var(--navy);letter-spacing:-.4px}
.sub{color:var(--gris);font-size:12px;margin:0 0 14px}
h3{font-size:15px;margin:22px 0 9px;color:var(--navy);letter-spacing:-.1px}

/* ---------- encabezado de módulo ---------- */
.cabmod{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.cabmod .cabico{width:42px;height:42px;border-radius:13px;background:var(--mod);color:#fff;
                display:grid;place-items:center;font-size:22px;flex:none}
.cabmod h2{margin:0}
.cabmod .sub{margin:1px 0 0}

/* ---------- tarjetas KPI (las de siempre) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:11px;margin-bottom:14px}
/* LOS KPI DE TODO EL SISTEMA, CON LA CARA DEL PANEL DEL DESPACHO.
   Jose: "me gusta ese formato, esta sobrio colorido, lo puedes replicar a
   todo el sistema?". Eran tarjetas blancas con una rayita de color al borde;
   el semaforo del panel era un bloque de color entero. Convivian dos lenguajes
   para decir lo mismo, y el bueno era el del panel.

   Se cambia el ESTILO, no los 207 llamados a kpi(): la clase de estado que
   cada pantalla ya pasaba —ok, amb, mal— ahora decide el color del bloque en
   vez del color de una rayita. Un KPI sin estado toma el color del area por
   var(--mod): administracion naranja, contabilidad verde, control violeta,
   informes teal, tributario azul. Asi cada pantalla se pinta sola del color
   del modulo en que esta, sin que ninguna tenga que saberlo.

   El degradado sale del propio color con una capa oscura y una clara encima:
   no hay que declarar dos tonos por cada color, y un color nuevo funciona
   solo. */
.kpi{background-color:var(--mod);
     background-image:linear-gradient(135deg,rgba(0,0,0,.24),rgba(255,255,255,.10));
     border:none;border-radius:15px;padding:13px 15px;color:#fff;
     position:relative;overflow:hidden;
     box-shadow:0 1px 2px rgba(16,40,28,.06),0 3px 10px rgba(16,40,28,.10)}
/* CUATRO PROFUNDIDADES DEL MISMO COLOR. Ocho bloques identicos son una pared:
   el ojo no encuentra donde pararse. El panel del despacho no tiene ese
   problema porque sus cuatro bloques significan cosas distintas y cada uno
   lleva su color. Aca el color lo pone el area, asi que el ritmo lo da la
   profundidad: mismo tono, cuatro pesos, y se leen como cuatro cosas.
   Un KPI con estado —ok, amb, mal— pisa esto: el significado manda sobre el
   ritmo. */
.kpis .kpi:nth-child(4n+1){background-image:linear-gradient(135deg,rgba(0,0,0,.42),rgba(0,0,0,.16))}
.kpis .kpi:nth-child(4n+2){background-image:linear-gradient(135deg,rgba(0,0,0,.24),rgba(255,255,255,.08))}
.kpis .kpi:nth-child(4n+3){background-image:linear-gradient(135deg,rgba(0,0,0,.06),rgba(255,255,255,.20))}
.kpis .kpi:nth-child(4n+4){background-image:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.30))}
.kpi .r{font-size:9px;color:#fff;text-transform:uppercase;letter-spacing:.7px;
     font-weight:700;opacity:.92}
.kpi .v{font-size:23px;font-weight:700;color:#fff;margin-top:3px;letter-spacing:-.5px}
.kpi .d{font-size:10.5px;color:#fff;opacity:.9;margin-top:2px}
.kpis .kpi.ok,.kpi.ok{background-color:#1B4332;
  background-image:linear-gradient(135deg,rgba(0,0,0,.18),rgba(255,255,255,.10))}
.kpis .kpi.amb,.kpi.amb{background-color:#B45309;
  background-image:linear-gradient(135deg,rgba(0,0,0,.18),rgba(255,255,255,.10))}
.kpis .kpi.mal,.kpi.mal{background-color:#991B1B;
  background-image:linear-gradient(135deg,rgba(0,0,0,.18),rgba(255,255,255,.10))}
.kpi.mal .v{color:#fff}

/* ---------- conexion SII: la matriz de la bajada ---------- */
.cx td.c,.cx th.c{text-align:center;font-variant-numeric:tabular-nums;min-width:46px}
.cx td.c{cursor:help}
.cx td.ok{background:#e7f8ee;color:#166534;font-weight:700}
.cx td.cero{color:#94a3b8}
.cx td.amb{background:#fef3c7;color:#92400e;font-weight:700}
.cx td.mal{background:#fef2f2;color:#b91c1c;font-weight:700}
.cx td.nada{color:#cbd5e1}
.cx tr.fila{cursor:pointer}
.cx tr.fila:hover td.emp b{text-decoration:underline}
.cx td.emp{position:sticky;left:0;background:#fff;white-space:nowrap}
.cx td.mot{font-size:11.5px;color:#475569}
/* ---------- cobertura: la primera columna no se va de lado ---------- */
.mtz2{width:100%;border-collapse:collapse;font-size:11.5px}
.mtz2 th{background:#eef4ef;color:#1B4332;padding:6px 7px;font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid #2D7800;
  white-space:nowrap;text-align:center}
.mtz2 td{padding:5px 7px;border-bottom:1px solid #f1f5f9;text-align:center;
  font-variant-numeric:tabular-nums}
.mtz2 th.izq,.mtz2 td.izq{position:sticky;left:0;z-index:1;background:#fff;
  text-align:left;white-space:nowrap;border-right:1px solid #e2e8f0}
.mtz2 th.izq{background:#eef4ef}
.mtz2 td.izq .quien{font-size:9px;color:#64748b;font-weight:400}
.mtz2 .hay{background:#e7f8ee;color:#166534;font-weight:700;cursor:pointer}
/* el vacio se ve, pero no grita: es un hueco, no un error */
.mtz2 .no{background:#fff;color:#cbd5e1;cursor:pointer}
.mtz2 td.hay:hover,.mtz2 td.no:hover{outline:2px solid #A5C30F;outline-offset:-2px}
.mtz2 .sinmes{background:#f8fafc;color:#475569;text-align:left;font-style:italic}
.mtz2 .totf{text-align:right;font-weight:700;color:#1B4332;background:#fbfdfb}
.cobrol{overflow-x:auto;max-height:70vh}

/* ---------- semáforo: los KPI del panel ---------- */
.sem4{display:grid;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));gap:11px;margin-bottom:15px}
.sem{border-radius:15px;padding:13px 15px;color:#fff;position:relative;overflow:hidden}
.sem .sic{position:absolute;right:11px;top:11px;font-size:27px;opacity:.26}
.sem .r{font-size:9px;text-transform:uppercase;letter-spacing:.7px;font-weight:700;opacity:.92}
.sem .v{font-size:23px;font-weight:700;margin-top:3px;letter-spacing:-.5px}
.sem .d{font-size:10.5px;opacity:.9;margin-top:2px}
.sem.v1{background:linear-gradient(135deg,#1B4332,#2D7800)}
.sem.v2{background:linear-gradient(135deg,#991B1B,#DC2626)}
.sem.v3{background:linear-gradient(135deg,#1D4ED8,#3B82F6)}
.sem.v4{background:linear-gradient(135deg,#B45309,#F59E0B)}

/* ---------- aviso de vencimiento ---------- */
.urg{background:#fff;border:1px solid #fbd5b5;border-left:4px solid var(--adm);
     border-radius:13px;padding:12px 15px;margin-bottom:14px;display:flex;gap:11px;
     box-shadow:0 2px 9px rgba(234,88,12,.09)}
.urg .uic{font-size:21px;color:var(--adm);flex:none;margin-top:1px}
.urg b{color:var(--navy);font-size:12.5px}
.urg ul{margin:5px 0 0;padding-left:17px;font-size:12px;color:#334155}
.urg li{margin-bottom:2px}

/* ---------- caja ---------- */
.caja{background:#fff;border:1px solid #e6eae8;border-radius:13px;padding:13px 15px;margin-bottom:14px;
      box-shadow:0 1px 2px rgba(16,40,28,.03),0 3px 10px rgba(16,40,28,.05)}
.caja h4{margin:0 0 10px;font-size:12px;color:var(--navy);display:flex;align-items:center;gap:8px}
.caja h4 .pt{width:21px;height:21px;border-radius:7px;background:var(--gris-cl);color:var(--mod);
             display:grid;place-items:center;font-size:12px;flex:none}
.caja h4 span{margin-left:auto;font-weight:400;color:var(--gris);font-size:11px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:960px){.dos{grid-template-columns:1fr}}

/* ---------- tablas ---------- */
table{border-collapse:collapse;width:100%;font-size:12px;background:#fff}
th{background:#fbfdfb;color:var(--gris);font-weight:700;text-align:left;
   padding:7px 9px;border-bottom:1px solid var(--linea);font-size:9px;
   text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;z-index:2}
td{padding:6px 9px;border-bottom:1px solid #f2f6f3;vertical-align:top}
tr.tot td{font-weight:700;background:#f8fbf9;color:var(--navy);border-top:2px solid var(--mod)}
tr.grp td{background:var(--gris-cl);font-weight:700;color:var(--navy);font-size:11px;
  letter-spacing:.4px;padding-top:9px;padding-bottom:9px;border-top:1px solid #cbd5e1}
/* EL AIRE ENTRE BLOQUES. Un estado de resultados de sesenta filas seguidas
   se lee como una lista; con un respiro antes de cada bloque se lee como lo
   que es, cinco cuentas encadenadas. */
tr.aire td{height:15px;background:#fff;border:0;padding:0}
tr.aire:hover td{background:#fff}
/* los subtotales que marcan un escalon del resultado, no una suma mas */
tr.tot.fuerte td{background:#eef6f1;border-top:2px solid var(--mod);
  border-bottom:1px solid #cbd5e1;font-size:12.5px}
tr.tot.fuerte:hover td{background:#eef6f1}
@media print{ tr.aire td{height:9px} }
tr:hover td{background:#fbfdfb}
tr.tot:hover td{background:#f8fbf9}
tr.sub2 td{background:#fbfdfb;border-bottom:1px solid #f2f6f3;padding-top:2px;padding-bottom:5px}
.tw{max-height:560px;overflow:auto;border:1px solid var(--linea);border-radius:11px}
/* (480) Balance 8 columnas: el nombre de la cuenta siempre en una sola fila */
.b8 table td:nth-child(2),.b8 table th:nth-child(2){white-space:nowrap}
/* (495) el codigo tampoco se parte, y las diez columnas caben en la hoja */
.b8 table td:nth-child(1),.b8 table th:nth-child(1){white-space:nowrap}
.b8 table th,.b8 table td{padding-left:7px;padding-right:7px}
@media print{ .b8 table{width:100%;font-size:9px} .b8 table th,.b8 table td{padding:3px 4px} }
.rojo{color:#b91c1c} .verde{color:var(--verde-tx)}
.mini{color:#94a3b8;font-size:10px}
.lz{width:4px;border-radius:3px;height:16px;display:inline-block;vertical-align:-3px;margin-right:7px}
.rbar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#eef2f0}
.rbar i{background:#2D7800;display:block}.rbar u{display:block;text-decoration:none}
.lgd{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.f29c{display:inline-flex;align-items:center;justify-content:center;width:24px;height:22px;border-radius:6px;font-size:12px;font-weight:700}
.f29c.ok{background:#E6F4DD;color:#2D7800}.f29c.proc{background:#FEF3C7;color:#B45309}
.f29c.obs,.f29c.falta{background:#FDE2E2;color:#B91C1C}.f29c.na,.f29c.sin,.f29c.fut{color:#94a3b8}
.f29c.nosis{outline:2px dashed #1D4ED8;outline-offset:-2px}
.f29c.borr{background:#FEF9C3;color:#854D0E}.f29c.sub{background:#DBEAFE;color:#1D4ED8}.f29c.suberr{background:#FDE2E2;color:#B91C1C}
.f29c.lib{background:#F1F5F9;color:#475569}.f29c.nolib{color:#94a3b8}
.f29c.venc{outline:2px solid #B91C1C;outline-offset:-2px}.f29c.dif{box-shadow:inset 0 0 0 2px #B45309}
.f29big table td,.f29big table th{font-size:13px;padding:8px 9px}
.f29big .f29c{width:30px;height:28px;font-size:15px;border-radius:7px}
.f29big .lb{font-size:12px}
.f29chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 10px}
.f29chips button{background:#fff;border:1px solid #cbd5e1;color:#475569;border-radius:16px;padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.f29chips button.on{background:#E6F4DD;border-color:#2D7800;color:#1B4332}
.f29chips button b{margin-left:5px;color:#1B4332}
.f29av{display:flex;height:26px;border-radius:6px;overflow:hidden;gap:2px;background:#fff;margin:6px 0 8px}
.f29av div{min-width:3px;cursor:pointer;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden}
.f29av div:hover{filter:brightness(1.1)}
.f29bar{display:flex;align-items:flex-end;gap:6px;height:150px;padding:18px 4px 0;border-bottom:1px solid #cbd5e1}
.f29bar .col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;cursor:pointer;position:relative}
.f29bar .col .b{width:70%;max-width:46px;background:#2D7800;border-radius:4px 4px 0 0;min-height:2px}
.f29bar .col.sel .b{background:#1B4332}
.f29bar .col:hover .b{background:#A5C30F}
.f29bar .col .v{position:absolute;bottom:calc(var(--h) + 3px);font-size:11px;color:#1B4332;font-weight:700;white-space:nowrap}
.f29bar .col .b{flex-shrink:0}
.f29barx{display:flex;gap:6px;padding:4px 4px 0}
.f29barx span{flex:1;text-align:center;font-size:11px;color:#64748b}
.f29num td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.actpest{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.actpest button{border:1px solid var(--linea);background:#fff;border-radius:8px;padding:7px 11px;font:inherit;font-size:13px;color:var(--navy);cursor:pointer}
.actpest button.on{border-color:var(--mod);box-shadow:inset 0 -3px 0 var(--mod);font-weight:700}
.actpest b{display:inline-block;min-width:20px;padding:1px 6px;border-radius:10px;font-size:11px;margin-left:4px;text-align:center}
.actpest b.mal{background:#FDE2E2;color:#B91C1C}.actpest b.amb{background:#FEF3C7;color:#B45309}.actpest b.ok{background:#E6F4DD;color:#2D7800}
.pill{display:inline-block;padding:1px 8px;border-radius:12px;font-size:10.5px;font-weight:700}
.pill.ok{background:var(--ok-bg);color:var(--ok-tx)}
.pill.amb{background:var(--amb-bg);color:var(--amb-tx)}
.pill.mal{background:var(--mal-bg);color:var(--mal-tx)}
.et{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;
    font-size:10.5px;font-weight:700;white-space:nowrap}
.et .pt{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.et.ok{background:#E6F7EE;color:#0F7B43}
.et.amb{background:#FFF4E0;color:#B45309}
.et.mal{background:#FEECEC;color:#C62828}
.tg{display:inline-block;background:var(--gris-cl);color:#475569;border-radius:5px;
    padding:1px 6px;margin:0 3px 2px 0;font-size:9.5px;font-weight:700}
.pg{display:inline-block;background:var(--ok-bg);color:var(--ok-tx);border-radius:6px;
    padding:1px 8px;margin:0 4px 0 0;font-size:10px;font-weight:700}
.pg a{cursor:pointer;opacity:.55;margin-left:3px}
.pg a:hover{opacity:1;color:#b91c1c}

/* ---------- avance ---------- */
.prog{display:flex;align-items:center;gap:7px}
.prog .pb{flex:1;min-width:52px;height:6px;border-radius:4px;background:var(--gris-cl);overflow:hidden}
.prog .pb i{display:block;height:100%;border-radius:4px}
.prog span{font-size:10px;color:var(--gris);font-weight:700;white-space:nowrap}

/* ---------- tramos de antigüedad ---------- */
.tramos .tr{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.tramos .rot{font-size:10.5px;color:var(--gris);width:78px;flex:none;font-weight:600}
.tramos .bar{flex:1;height:14px;border-radius:4px;background:var(--gris-cl);overflow:hidden}
.tramos .bar i{display:block;height:100%;border-radius:4px}
.tramos .val{font-size:11px;font-weight:700;color:var(--navy);width:78px;text-align:right;flex:none}

/* ---------- matriz de actividades ---------- */
th.ce,td.ce{text-align:center}
th.ce .vv{font-size:8.5px;font-weight:600;color:#94a3b8;letter-spacing:0;text-transform:none}
th.ce .vv.rojo{color:#b91c1c} th.ce .vv.amb{color:#b45309}
/* Los dos grupos de la matriz de actividades: lo que marca la persona y lo
   que el sistema da por hecho al ver el libro. Se distinguen por color de
   cabecera y por la linea que los separa, no por un titulo suelto. */
th.gtu{background:#e7f2ea;color:#1B4332;border-bottom:2px solid #2D7800}
th.gsis{background:#eef2f8;color:#475569;border-bottom:2px solid #94a3b8}
th.sep,td.sep{border-left:2px solid #d5dfec}
.cel{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:8px;
     font-size:12px;font-weight:700;cursor:pointer;transition:all .12s}
.cel.si{background:var(--ok-bg);color:var(--ok-tx)}
.cel.si:hover{background:#d3f0e0}
.cel.auto{background:var(--tri-cl);color:var(--tri)}
.cel.auto:hover{background:#dbe6fd}
.cel.no{background:var(--gris-cl);color:#cbd5e1}
.cel.no:hover{background:#e6ebf0;color:#94a3b8}
.na{color:#dbe2e8;font-size:12px}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;font-size:10.5px;color:var(--gris)}
.leyenda span{display:flex;align-items:center;gap:6px}
.leyenda .cel{width:20px;height:20px;font-size:10px;cursor:default}

/* ---------- formularios ---------- */
input,select,textarea{font:12px var(--fuente);padding:5px 8px;border:1px solid var(--linea);
      border-radius:8px;background:#fff;color:#12253d}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gris-cl);border-color:var(--mod)}
.btn{background:var(--mod);color:#fff;border:none;border-radius:8px;padding:6px 13px;
     font:700 11px var(--fuente);cursor:pointer;transition:filter .13s}
.btn:hover{filter:brightness(1.14)}
.btn.sec2{background:#fff;color:var(--mod);border:1px solid var(--mod)}
.btn.gris{background:#fff;color:var(--gris);border:1px solid var(--linea)}
.btn.gris:hover{background:var(--gris-cl);filter:none}
.barra{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
label.lb,.lb{font-size:11px;color:var(--gris);font-weight:600}

/* ---------- zona de carga ---------- */
.drop{border:2px dashed #b8cebf;border-radius:14px;padding:26px;text-align:center;
      background:#fbfdfb;color:var(--gris);cursor:pointer;transition:all .15s}
.drop.hot{background:var(--verde-cl);border-color:var(--verde-osc);color:var(--verde-tx)}
.drop b{color:var(--navy);font-size:14px;display:block;margin-bottom:4px}

/* ---------- gráficos ---------- */
.gcaja{background:#fff;border:1px solid #e6eae8;border-radius:13px;padding:12px;
       box-shadow:0 1px 2px rgba(16,40,28,.03),0 3px 10px rgba(16,40,28,.05)}
.gcaja h4{margin:0 0 6px;font-size:12px;color:var(--navy)}
.leg{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--gris);margin-top:6px}
.leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* ---------- matriz de carga ---------- */
.mtz td:first-child,.mtz th:first-child{position:sticky;left:0;background:#fff;z-index:1;font-weight:600}
.mtz th:first-child{background:#fbfdfb;z-index:3}
.mtz tr:hover td:first-child{background:#fbfdfb}
.cel.si,.cel.no{min-width:25px}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);margin-top:26px;padding:14px 20px;color:var(--gris);
     font-size:11px;background:#fff;line-height:1.7}
.pie b{color:var(--verde-tx)}
.vsello{position:fixed;right:8px;bottom:6px;font-size:9px;color:#94a3b8;z-index:5}

@media(max-width:860px){
  /* En un telefono una columna con scroll propio es peor: todo vuelve al
     flujo normal y la pagina se desplaza entera. */
  html,body{height:auto;overflow:visible;display:block}
  .layout{flex-direction:column;overflow:visible;min-height:0}
  .cont{overflow:visible}
  .menu{width:100%;flex:none;position:static;min-height:0;display:flex;overflow-x:auto;overflow-y:visible;padding:6px}
  .menu .grp,.menu .sgr{display:none}
  .menu a{white-space:nowrap;padding:7px 12px}
  .menu .gi,.menu .gi.off{display:contents}
  .cont{padding:12px}
  .cabmod .cabico{width:30px;height:30px;font-size:16px}
}
@media print{.menu,.top,.filtro,.barra{display:none}
  /* HORIZONTAL. Un balance de 8 columnas en vertical parte los nombres de
     las cuentas en tres lineas y aprieta las cifras contra el borde. El
     papel apaisado es el formato natural de una tabla contable ancha. */
  @page{size:letter landscape;margin:11mm 10mm}
  /* LAS TARJETAS NO VAN AL PAPEL. En pantalla son el resumen de un vistazo;
     impresas se comen un tercio de la primera hoja y repiten cifras que la
     tabla ya trae en sus totales. */
  .kpis,.kpi{display:none!important}
  html,body{height:auto;overflow:visible;display:block}
  .layout{display:block;overflow:visible}
  .cont{padding:0;overflow:visible}
  .sem,.kpi{color:#12253d!important;background:#fff!important;background-image:none!important;
    border:1px solid #cbd5e1;box-shadow:none}
  .sem .r,.sem .v,.sem .d,.kpi .r,.kpi .v,.kpi .d{color:#12253d!important;opacity:1}
  .sem .sic{display:none}
  .f29hoja{box-shadow:none;border:1px solid #94a3b8}
  .f29f input.num{border:none;background:transparent;padding:0}
  /* la firma del informe: solo al imprimir */
  #firmaInforme{display:block!important;break-inside:avoid}
  /* LAS TABLAS VIVEN EN UNA CAJA CON SCROLL DE 560px. En pantalla esta bien;
     al IMPRIMIR esa caja recortaba el informe a la primera pantalla y el
     resto no salia en el papel. Un balance de sesenta cuentas se imprimia
     con quince. Al imprimir la caja se suelta entera. */
  .tw{max-height:none!important;overflow:visible!important;border:0!important;
      border-radius:0!important}
  /* y el encabezado de la tabla se repite en cada hoja, que es lo que hace
     legible una tabla de tres paginas */
  thead{display:table-header-group}
  tr{break-inside:avoid}
  tr.grp,tr.tot{break-after:avoid}
  .pie{font-size:10px;color:#64748b}}

/* ---- el F29 con la cara del F29 ---- */
.f29hoja{border:1px solid #94a3b8;border-radius:6px;padding:12px 13px 6px;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.f29tit{font-size:11px;font-weight:700;color:#12253d;letter-spacing:.3px;
  border-bottom:2px solid #12253d;padding-bottom:6px;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:baseline}
.f29tit span{font-size:13px;color:#1B4332}
.f29id{width:100%;border-collapse:collapse;margin-bottom:11px;font-size:11px}
.f29id td{border:1px solid #cbd5e1;padding:4px 7px;vertical-align:top}
.f29id i{font-style:normal;color:#2D7800;font-weight:700;margin-right:5px}
.f29id b{display:block;font-size:12.5px;color:#12253d;margin-top:2px}
.f29cols{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:1100px){.f29cols{grid-template-columns:1fr}}
table.f29f{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:11px}
table.f29f th{background:#12253d;color:#fff;padding:4px 6px;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.4px;text-align:left}
table.f29f th.vl,table.f29f th.lib{text-align:right}
table.f29f td{border-bottom:1px solid #e2e8f0;padding:3px 6px}
table.f29f td.cod{width:38px;font-weight:700;color:#2D7800;font-variant-numeric:tabular-nums}
table.f29f td.gl{color:#334155}
table.f29f td.vl{width:150px;text-align:right}
table.f29f td.vl input::placeholder{color:#94a3b8}
table.f29f td.lib{width:104px;text-align:right;font-variant-numeric:tabular-nums}
table.f29f tr.fsec td{background:#eef4ef;color:#1B4332;font-weight:700;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.5px;padding:5px 6px;border-bottom:1px solid #cbd5e1}
table.f29f tr.tot td{background:#f8fafc;font-weight:700;color:#12253d;
  border-top:1px solid #94a3b8;border-bottom:1px solid #94a3b8}
table.f29f input.num{width:100%;text-align:right;font-size:11.5px;padding:2px 4px;
  border:1px solid #e2e8f0;border-radius:3px;font-variant-numeric:tabular-nums}
table.f29f tr.tot input.num{font-weight:700}
table.f29f input.num:focus{border-color:#A5C30F;outline:none;background:#fcfff2}
table.f29f .na{color:#cbd5e1}
table.f29f .solo{color:#64748b}
table.f29f .igual{color:#166534}
table.f29f .dist{color:#b91c1c;font-weight:700}
table.f29f .dd{display:block;font-size:9px;color:#b91c1c;white-space:nowrap}