/* Estilo común de la gestión: minimalista «flat 2.0» — superficies planas, sombras suaves, botones que se ven tocables y colores fuertes por estado. */
:root{
  --bg:#F3F5F7; --panel:#FFFFFF; --panel2:#EEF1F4; --line:#DDE3E9; --ink:#16202A; --ink2:#5A6672; --ink3:#8A96A2;
  --accent:#2C66D6; --accent-ink:#FFFFFF;
  --ok:#1E9A55; --curso:#2C66D6; --pend:#8A96A2; --bad:#D23F3F; --warn:#D99A00; --warn-ink:#8A5A00;
  --p1:#D23F3F; --p2:#E4600E; --p3:#D99A00; --p4:#2C66D6; --p5:#8A96A2;
  --c-tramites:#3D6FE0; --c-limpieza:#0E9FA0; --c-electricidad:#DFA000; --c-mantenimiento:#E4600E; --c-calidad:#8845CC; --c-personal:#D3336A; --c-otros:#6A7684;
  --a-gerencia:#16202A; --a-produccion:#2C66D6; --a-calidad:#8845CC; --a-mantenimiento:#E4600E; --a-administracion:#0E9FA0; --a-seguridad:#D23F3F;
  --sombra:0 1px 2px rgba(20,30,40,.06),0 2px 8px rgba(20,30,40,.06);
  --r:12px;
  --display:'Barlow Condensed','Arial Narrow',sans-serif; --body:'Atkinson Hyperlegible',system-ui,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10151A; --panel:#1A2128; --panel2:#222A32; --line:#2F3943; --ink:#E7ECF1; --ink2:#9AA6B2; --ink3:#6E7A86;
    --accent:#5B8EF0; --accent-ink:#0C1218; --ok:#35BE78; --curso:#5B8EF0; --pend:#7C8894; --bad:#F06262; --warn:#F2B530; --warn-ink:#F2B530;
    --p1:#F06262; --p2:#F2803A; --p3:#F2B530; --p4:#5B8EF0; --p5:#7C8894;
    --c-tramites:#5E8CF0; --c-limpieza:#23BDBE; --c-electricidad:#F2B530; --c-mantenimiento:#F2803A; --c-calidad:#A874E6; --c-personal:#EC5C8E; --c-otros:#8E9AA6;
    --a-gerencia:#E7ECF1; --a-produccion:#5B8EF0; --a-calidad:#A874E6; --a-mantenimiento:#F2803A; --a-administracion:#23BDBE; --a-seguridad:#F06262;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10151A; --panel:#1A2128; --panel2:#222A32; --line:#2F3943; --ink:#E7ECF1; --ink2:#9AA6B2; --ink3:#6E7A86;
  --accent:#5B8EF0; --accent-ink:#0C1218; --ok:#35BE78; --curso:#5B8EF0; --pend:#7C8894; --bad:#F06262; --warn:#F2B530; --warn-ink:#F2B530;
    --p1:#F06262; --p2:#F2803A; --p3:#F2B530; --p4:#5B8EF0; --p5:#7C8894;
  --c-tramites:#5E8CF0; --c-limpieza:#23BDBE; --c-electricidad:#F2B530; --c-mantenimiento:#F2803A; --c-calidad:#A874E6; --c-personal:#EC5C8E; --c-otros:#8E9AA6;
  --a-gerencia:#E7ECF1; --a-produccion:#5B8EF0; --a-calidad:#A874E6; --a-mantenimiento:#F2803A; --a-administracion:#23BDBE; --a-seguridad:#F06262;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;padding:7px 12px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:var(--sombra);white-space:nowrap}
.btn:hover{border-color:var(--ink3)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.peligro{color:var(--bad)}
.btn.chico{padding:4px 9px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:default}
.campo{display:grid;gap:4px}
.campo label{font-size:12.5px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
.campo input,.campo select,.campo textarea{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:8px 10px;min-width:0;width:100%}
.campo textarea{resize:vertical;min-height:70px}
/* barra superior */
[hidden]{display:none!important}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.top .marca{font:700 22px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.top nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.top nav a{padding:7px 12px;border-radius:9px;color:var(--ink2);text-decoration:none;font-weight:700;font-size:14.5px;white-space:nowrap}
.top nav a:hover{background:var(--panel2);color:var(--ink)}
.top nav a.act{background:var(--panel2);color:var(--ink)}
.reglas{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:14px;color:var(--ink2)}
.reglas li.si{color:var(--ok);font-weight:700}
/* clave con ojito para verla mientras se escribe */
.conojo{position:relative;display:block}
.conojo input{padding-right:46px!important}
.conojo .ojo{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:8px;background:none;color:var(--ink2);cursor:pointer}
.conojo .ojo:hover{color:var(--ink);background:var(--panel2)}
.volver{justify-self:center;color:var(--ink2);font-weight:700;font-size:14px;text-decoration:none;padding:4px 8px}
.volver:hover{color:var(--ink);text-decoration:underline}
.top nav .cnt:not(:empty){display:inline-block;min-width:20px;padding:1px 6px;border-radius:99px;background:var(--bad);color:#fff;font:700 12px/18px var(--mono);text-align:center;margin-left:3px}
.top .quien{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);white-space:nowrap}
.top .quien button{border:0;background:none;color:var(--ink2);cursor:pointer;font-weight:700;padding:4px 6px}
.top .quien button:hover{color:var(--ink)}
.top .quien .tema{display:grid;place-items:center;padding:5px 7px;border-radius:8px}
.top .quien .tema:hover{background:var(--panel2)}
/* el nombre de quien entró: al tocarlo se abre su menú (cambiar clave) */
.top .quien{position:relative}
.top .quien .yo{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px}
.top .quien .yo:hover,.top .quien .yo[aria-expanded="true"]{background:var(--panel2);color:var(--ink)}
.top .quien .yo .flecha{transition:transform .15s}
.top .quien .yo[aria-expanded="true"] .flecha{transform:rotate(180deg)}
.menu-yo{position:absolute;right:0;top:calc(100% + 8px);z-index:45;min-width:210px;display:grid;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sombra),0 10px 28px rgba(10,20,30,.14)}
.menu-yo .quien-es{padding:8px 10px 6px;font-size:13px;color:var(--ink2)}
.menu-yo .quien-es b{color:var(--ink)}
.menu-yo a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:700;font-size:14.5px}
.menu-yo a:hover,.menu-yo a:focus-visible{background:var(--panel2)}
@media (prefers-reduced-motion: reduce){ .top .quien .yo .flecha{transition:none} }
main{padding:18px;max-width:1500px;margin:0 auto}
.fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.titulo{font:700 30px/1 var(--display);letter-spacing:.02em;margin:0}
.sub{color:var(--ink2);font-size:14px}
/* panel lateral de detalle */
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.12);z-index:40;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .18s ease}
.cajon.abierto{transform:none}
.cajon .ch{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cajon .cb{flex:1;overflow:auto;padding:16px;display:grid;gap:16px;align-content:start}
.cajon .cerrar{margin-left:auto;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink2);padding:4px 8px}
.velo{position:fixed;inset:0;background:rgba(10,15,20,.25);z-index:35;display:none}
.velo.abierto{display:block}
/* aviso corto */
.aviso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:10px;font-weight:700;z-index:80;display:flex;gap:12px;align-items:center;box-shadow:var(--sombra)}
.aviso button{background:none;border:0;color:var(--panel);text-decoration:underline;font-weight:700;cursor:pointer}
/* botón del asistente (abajo a la derecha; el velo de un cajón lo tapa) */
.asis-flot{position:fixed;right:16px;bottom:16px;z-index:30;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:var(--ink);color:var(--panel);font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 8px 22px rgba(10,20,30,.28)}
.asis-flot:hover{filter:brightness(1.15)}
@media (max-width:700px){ .asis-flot{padding:12px} .asis-flot span{display:none} }
@media print{ .asis-flot{display:none} }
/* chips y estados */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink2);white-space:nowrap}
.punto{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
/* prioridad: 1 crítica · 2 alta · 3 media · 4 baja · 5 mínima */
.p1{--e:var(--p1)} .p2{--e:var(--p2)} .p3{--e:var(--p3);--e-ink:var(--warn-ink);--on-e:#2A1E00} .p4{--e:var(--p4)} .p5{--e:var(--p5)}
.prio{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12.5px;border-radius:6px;padding:0 7px;color:var(--e-ink,var(--e));background:color-mix(in srgb,var(--e) 14%,transparent);white-space:nowrap}
.prio::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--e)}
.e-pendiente{--e:var(--warn);--e-ink:var(--warn-ink);--on-e:#2A1E00} .e-en_curso{--e:var(--curso)} .e-hecha{--e:var(--ok)} .e-no_cumplida{--e:var(--bad)} .e-atrasada{--e:var(--bad)}
/* segunda fila de la barra: las partes de Personal y de Planta */
.top{flex-wrap:wrap}
.top nav.subnav{flex:0 0 calc(100% + 36px);order:10;margin:10px -18px -10px;padding:0 14px;gap:2px;border-top:1px solid var(--line);background:var(--panel)}
.top nav.subnav a{padding:10px 12px 9px;border-radius:0;border-bottom:3px solid transparent;font-size:14px;color:var(--ink2)}
.top nav.subnav a:hover{background:none;color:var(--ink)}
.top nav.subnav a.act{background:none;color:var(--ink);border-bottom-color:var(--accent)}
.menu-yo .cnt:not(:empty){display:inline-block;min-width:20px;padding:1px 6px;border-radius:99px;background:var(--bad);color:#fff;font:700 12px/18px var(--mono);text-align:center;margin-left:auto}
@media print{ .top nav.subnav{display:none} }
@media (max-width:700px){ .top{gap:8px;padding:8px 10px} .top .quien span{display:none} main{padding:12px} .top nav a{padding:7px 8px;font-size:14px}
  .top nav.subnav{flex-basis:calc(100% + 20px);margin:8px -10px -8px;padding:0 4px} .top nav.subnav a{padding:9px 9px 8px;font-size:13.5px} }
.top .casa{display:none;place-items:center;color:var(--ink);padding:4px;border-radius:8px}
@media (max-width:560px){ .top .marca{display:none} .top .casa{display:grid} .top nav a[href="/"]{display:none} .top nav a{padding:6px 6px;font-size:13.5px} .top{gap:6px} .top .quien{gap:2px} }
@media (prefers-reduced-motion: reduce){ .cajon{transition:none} }
/* estado de un documento */
.estado{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;border-radius:999px;padding:2px 9px;color:var(--e-ink,var(--e));background:color-mix(in srgb,var(--e) 14%,transparent);white-space:nowrap}
.estado::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--e)}
.s-borrador{--e:var(--warn);--e-ink:var(--warn-ink)} .s-por_firmar{--e:var(--curso)} .s-firmado{--e:var(--ok)}
/* visor de documentos (web/visor.js): el documento a pantalla completa, página por página */
.visor{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:#2A3138}
.visor[hidden]{display:none}
.vbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sombra)}
.vbtn{display:grid;place-items:center;width:38px;height:38px;flex:none;border:0;border-radius:9px;background:none;color:var(--ink);cursor:pointer;text-decoration:none}
.vbtn:hover{background:var(--panel2)}
.vbtn svg{width:22px;height:22px}
.vtit{flex:1;min-width:0;display:grid}
.vtit b{font:700 20px/1.1 var(--display);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtit small{color:var(--ink2);font-size:13px}
.vzoom{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.vzoom button{border:0;background:none;color:var(--ink);width:34px;height:34px;font-size:20px;line-height:1;cursor:pointer}
.vzoom button:hover{background:var(--panel2)}
.vzoom span{min-width:52px;text-align:center;font-size:13.5px;font-weight:700;color:var(--ink2)}
.vcuerpo{position:relative;flex:1;overflow:auto;padding:18px 12px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;overscroll-behavior:contain}
/* margen automático y no align-items:center: con zoom la página se puede recorrer también hacia la izquierda */
.vpag{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);flex:none;position:relative;margin:0 auto}
.vpag canvas,.vpag img{display:block;width:100%;height:100%}
.vpag .num{position:absolute;right:8px;bottom:6px;font:700 11px var(--body);color:#8A96A2}
.vcuerpo iframe{flex:1;width:100%;max-width:1000px;min-height:80vh;border:0;background:#fff;margin:0 auto}
.vmsg{color:#E7ECF1;padding:40px 16px;text-align:center;align-self:center}
/* pie del visor (caja chica): cuál comprobante es, anterior/siguiente y quitarlo; el aviso corto queda encima */
.vpie{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--panel);border-top:1px solid var(--line)}
.vpie #vCual{flex:1;min-width:0;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vpie .vquitar{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line));padding:9px 14px;font-size:14.5px}
.vpie .vquitar:hover{background:color-mix(in srgb,var(--bad) 9%,var(--panel));border-color:var(--bad)}
@media (max-width:640px){ .vpie{padding:8px} .vpie #vCual{font-size:13.5px;white-space:normal;line-height:1.25} }
body:has(#visor:not([hidden]) #vPie:not([hidden])) .aviso{bottom:84px}
@media (max-width:640px){ .vzoom span{min-width:42px} .vbar{gap:4px;padding:6px 8px} .vtit b{font-size:17px} #vAparte{display:none} }