:root{ --bg:#eef2ea; --bar:#ffffff; --card:#ffffff; --ink:#1f2a1c; --muted:#5f6b5a; --line:#d5dccd; --accent:#5f9a2c;
       --accent-ink:#ffffff; --soft:#f6f9f2; color-scheme:light; }
@media (prefers-color-scheme: dark){
  :root{ --bg:#151914; --bar:#1f251d; --card:#20271e; --ink:#e7eee3; --muted:#9fab98; --line:#364032; --accent:#86c043;
         --accent-ink:#102300; --soft:#262e24; color-scheme:dark; }
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--ink); font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      padding-bottom:env(safe-area-inset-bottom,0px); }
[hidden]{ display:none !important; }
a{ color:inherit; }
button,.btn{ font:inherit; font-size:14px; padding:8px 14px; min-height:38px; border-radius:9px; border:1px solid var(--line);
             background:var(--bar); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
button:disabled{ opacity:.55; cursor:progress; }
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.danger{ color:#c62828; border-color:#e8b4b4; }
.small{ font-size:13px; min-height:32px; padding:5px 10px; }
.brand{ font:700 21px Arial,Helvetica,sans-serif; letter-spacing:-.3px; white-space:nowrap; }
.brand .p{ color:#4d4d4f; } .brand .s{ color:#8dc63f; }
@media (prefers-color-scheme: dark){ .brand .p{ color:#d6dad3; } }
.top{ position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
      background:var(--bar); border-bottom:1px solid var(--line); padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top,0px)); }
.top .who{ font-size:13px; color:var(--muted); }
.top .acts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.wrap{ max-width:1100px; margin:0 auto; padding:16px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.hint{ color:var(--muted); font-size:13px; margin:0 0 10px; }
.err{ color:#c62828; font-weight:600; font-size:14px; min-height:18px; margin:8px 0 0; }
label.fld{ display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input.inp,select.inp{ width:100%; font:inherit; font-size:16px; padding:9px 10px; border-radius:9px; border:1px solid var(--line);
                      background:var(--bg); color:var(--ink); }
.row{ display:flex; gap:10px; flex-wrap:wrap; } .row > *{ flex:1; min-width:180px; }
.foot{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; } .foot .sp{ flex:1; }
.banner{ padding:10px 14px; border-radius:10px; font-size:14px; background:#fff8e1; color:#5d4300; border:1px solid #f1d58a; margin-bottom:14px;
         display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.badge{ display:inline-block; font:700 11px system-ui,sans-serif; padding:3px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.3px;
        background:#e3e8df; color:#3d4a37; white-space:nowrap; }
.b-borrador{ background:#e8eaed; color:#3c4043; } .b-enviado{ background:#e3f0ff; color:#174ea6; }
.b-abierto{ background:#fff3d6; color:#8a5a00; } .b-firmado{ background:#e3f5e1; color:#1e6b25; }
.b-vencido{ background:#fde7e7; color:#a32020; } .b-anulado{ background:#ececec; color:#666; }

/* Contadores de estado */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px; }
.stat{ text-align:left; display:block; padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.stat b{ display:block; font-size:24px; line-height:1.1; } .stat span{ font-size:13px; color:var(--muted); }
.stat.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
.filters input{ flex:1; min-width:200px; }
.chk{ display:flex; align-items:center; gap:6px; font-size:14px; color:var(--muted); }

/* Lista de documentos */
.list{ display:flex; flex-direction:column; gap:8px; }
.item{ display:grid; grid-template-columns:120px 1fr auto; gap:6px 14px; align-items:center; padding:12px 14px; border-radius:12px;
       background:var(--card); border:1px solid var(--line); }
.item .folio{ font-weight:700; font-size:14px; } .item .tipo{ font-size:12px; color:var(--muted); }
.item .who b{ display:block; } .item .who small{ color:var(--muted); font-size:12.5px; }
.item .acts{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:640px){ .item{ grid-template-columns:1fr; } .item .acts{ justify-content:flex-start; } }
.empty{ text-align:center; color:var(--muted); padding:30px; border:1.5px dashed var(--line); border-radius:12px; }

/* Ventanas */
.modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(10,16,8,.55); }
.modal .card{ width:min(96vw,640px); max-height:94vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.modal .card.wide{ width:min(96vw,920px); }
.modal h3{ margin:0 0 6px; font-size:18px; }
#padModal{ z-index:60; }
.pad-wrap{ position:relative; height:clamp(170px,48vh,360px); background:#fff; border:1px solid var(--line); border-radius:10px; }
.pad-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; border-radius:10px; }
.pad-base{ position:absolute; left:8%; right:8%; bottom:22%; border-top:1.5px dashed #b9c2b2; pointer-events:none; }
.sig-prev{ display:flex; align-items:center; justify-content:center; height:120px; background:#fff; border:1px solid var(--line);
           border-radius:10px; color:#777; font-size:13px; }
.sig-prev img{ max-height:104px; max-width:90%; }

/* Línea de tiempo */
.timeline{ list-style:none; margin:10px 0 0; padding:0; border-left:2px solid var(--line); }
.timeline li{ position:relative; padding:0 0 12px 16px; }
.timeline li::before{ content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--line); }
.timeline li.ok::before{ background:#43a047; } .timeline li.warn::before{ background:#f9a825; } .timeline li.bad::before{ background:#e53935; }
.timeline li.info::before{ background:#1e88e5; }
.timeline .t{ font-weight:600; font-size:14px; } .timeline .m{ font-size:12.5px; color:var(--muted); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:14px; margin:8px 0; } .kv span{ color:var(--muted); }

/* Responsables */
.users{ width:100%; border-collapse:collapse; font-size:14px; }
.users th,.users td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }
.users th{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.users .acts{ display:flex; flex-wrap:wrap; gap:4px; }
.tbl-wrap{ overflow-x:auto; }
.toast{ position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:70; background:#1f2a1c;
        color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.3); max-width:92vw; }
.login{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login .card{ width:min(94vw,400px); }

/* ---- Login con imagen de fondo y tarjeta flotante oscura ---- */
body.login-bg{ background:#f4f7f1 url('/login-fondo.jpg') center / cover no-repeat fixed; }
body.login-bg .login{ justify-content:flex-end; padding:16px 6vw; }
body.login-bg .login .card{ background:rgba(18,24,16,.82); color:#eef3ea; border-color:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 16px 48px rgba(0,0,0,.35); padding:24px; }
body.login-bg .login .card .hint, body.login-bg .login .card label.fld{ color:#b4c0ad; }
body.login-bg .login .card .brand .p{ color:#f2f5ef; }
body.login-bg .login .card .brand .s{ color:#9ad14b; }
body.login-bg .login .card input.inp{ background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.18); }
body.login-bg .login .card input.inp:focus{ outline:none; border-color:#8dc63f; box-shadow:0 0 0 3px rgba(141,198,63,.25); }
body.login-bg .login .card button:not(.primary){ background:rgba(255,255,255,.08); color:#eef3ea; border-color:rgba(255,255,255,.2); }
body.login-bg .login .card .primary{ background:#8dc63f; border-color:#8dc63f; color:#10200a; }
body.login-bg .login .card .err{ color:#ff8a80; }
.captcha-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.captcha-img{ border-radius:9px; background:#f1f4ee; max-width:100%; height:auto; }
.capReload{ min-width:44px; justify-content:center; font-size:20px; padding:4px 10px; }
.lnk{ font-size:13px; text-decoration:underline; }
body.login-bg .login .card .lnk{ color:#9ad14b; }
@media (max-width: 820px){
  body.login-bg{ background:#f4f7f1 url('/login-fondo.jpg') left top / auto 38vh no-repeat; }
  body.login-bg .login{ justify-content:center; align-items:flex-start; padding:calc(38vh - 24px) 16px 16px; }
  body.login-bg .login .card{ padding:20px; }
}

/* ---- Dashboard gráfico (paleta validada para daltonismo en claro y oscuro) ---- */
:root{ --viz-e-borrador:#e87ba4; --viz-e-enviado:#2a78d6; --viz-e-abierto:#eda100; --viz-e-firmado:#008300; --viz-e-vencido:#e34948; --viz-e-anulado:#6250d6;
       --viz-t-asignacion:#1baf7a; --viz-t-devolucion:#eb6834; --viz-grid:#e6ebe1; }
@media (prefers-color-scheme: dark){
  :root{ --viz-e-borrador:#d55181; --viz-e-enviado:#3987e5; --viz-e-abierto:#c98500; --viz-e-firmado:#008300; --viz-e-vencido:#e66767; --viz-e-anulado:#9085e9;
         --viz-t-asignacion:#199e70; --viz-t-devolucion:#d95926; --viz-grid:#2c3529; }
}
.viz-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.viz-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:12px; min-width:0; }
.viz-card h4{ margin:0 0 10px; font-size:14px; }
.viz-legend{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); margin:-4px 0 10px; }
.viz-legend span{ display:inline-flex; align-items:center; gap:6px; } .viz-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.hbars{ display:flex; flex-direction:column; gap:6px; }
.hb-row{ display:grid; grid-template-columns:minmax(80px,30%) 1fr; align-items:center; gap:10px; font-size:13px; }
.hb-btn{ width:100%; background:none; border:0; padding:3px 4px; margin:0 -4px; border-radius:8px; color:inherit; font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.hb-btn:hover{ background:var(--soft); }
.hb-lab{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-track{ display:flex; align-items:center; gap:6px; min-width:0; border-left:1px solid var(--viz-grid); }
.hb-bar, .hb-stack{ height:18px; border-radius:0 4px 4px 0; min-width:0; }
.hb-stack{ display:flex; gap:2px; overflow:hidden; }
.hb-stack > span{ height:100%; min-width:3px; }
.hb-val{ font-size:12px; color:var(--ink); font-variant-numeric:tabular-nums; }
.cols{ display:flex; align-items:stretch; justify-content:space-around; height:170px; gap:6px; border-bottom:1px solid var(--viz-grid); padding-bottom:0; margin-bottom:22px; }
.col{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.col-stack{ width:min(24px,70%); display:flex; flex-direction:column; gap:2px; border-radius:4px 4px 0 0; overflow:hidden; }
.col-stack > span{ min-height:3px; }
.col-val{ font-size:12px; margin-bottom:4px; font-variant-numeric:tabular-nums; }
.col-lab{ position:absolute; bottom:-20px; font-size:12px; color:var(--muted); }
.viz-tabla{ margin:2px 0 6px; } .viz-tabla summary{ cursor:pointer; color:var(--muted); font-size:13px; padding:4px 0; }
.viz-tip{ position:fixed; z-index:80; pointer-events:none; background:var(--ink); color:var(--card); font-size:12px; padding:6px 9px; border-radius:7px;
          box-shadow:0 4px 14px rgba(0,0,0,.25); max-width:260px; }