:root{
    --brand:#285FAF; --brand-dark:#1B3355; --bg:#f3f5f9; --surface:#ffffff; --surface-2:#f6f8fb; --line:#e3e8f0;
    --text:#14213a; --text-2:#4b5872; --muted:#7b879c;
    --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s3-light:#a7dcc6; --grey:#9aa6b8; --crit:#b42323;
    --good:#1d8f55; --good-bg:#e5f5ec; --warn:#a86a00; --warn-bg:#fdf1d8; --idle-bg:#eef1f6;
  }
  *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 "Segoe UI",system-ui,sans-serif}
  .app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
  aside{background:var(--brand-dark);color:#cfd8e8;padding:18px 14px;display:flex;flex-direction:column;gap:4px}
  .brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:16px;margin:0 6px 18px}
  .brand span{width:34px;height:34px;border-radius:8px;background:var(--brand);display:grid;place-items:center}
  .nav{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#cfd8e8;font-size:14px}
  .nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
  .nav.on{background:var(--brand);color:#fff}
  .nav .n{margin-left:auto;font-size:11px;background:#ffffff22;padding:1px 7px;border-radius:9px}
  .side-foot{margin-top:auto;font-size:12px;color:#9fb0cc;padding:10px 12px;border-top:1px solid #ffffff1a}
  main{padding:20px 26px}
  .top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .top h1{margin:0;font-size:22px;font-weight:600}
  .crumb{color:var(--muted);font-size:12px}
  .grow{flex:1}
  .btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;font-size:13px;color:var(--text-2)}
  .btn.pri{background:var(--brand);color:#fff;border-color:var(--brand)}
  .filter{display:flex;gap:8px;align-items:center;margin-bottom:14px}
  .seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2px}
  .seg b{font-weight:500;font-size:12px;padding:4px 11px;border-radius:6px;color:var(--text-2)} .seg b.on{background:var(--brand);color:#fff}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
  .cortes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
  .corte{position:relative}
  .corte .hh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .corte .hora{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
  .st{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}
  .st.ok{background:var(--good-bg);color:var(--good)} .st.nx{background:var(--warn-bg);color:var(--warn)} .st.pd{background:var(--idle-bg);color:var(--muted)}
  .corte dl{display:grid;grid-template-columns:1fr auto;gap:5px 10px;margin:0;font-size:13px}
  .corte dt{color:var(--text-2)} .corte dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
  .corte .lnk{margin-top:10px;font-size:12px;color:var(--brand);font-weight:500}
  .corte.pend dl dd{color:var(--muted);font-weight:400}
  .corte.next{border:1.5px dashed #e0b45a;background:#fffdf7}
  .row{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:14px}
  .c-h{display:flex;align-items:center;gap:12px;margin-bottom:6px} .c-h h2{margin:0;font-size:15px;font-weight:600}
  .c-h .sub{color:var(--muted);font-size:12px;margin-left:auto}
  .legend{display:flex;gap:14px;font-size:12px;color:var(--text-2)} .legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
  .stack{display:flex;height:26px;border-radius:6px;overflow:hidden;gap:2px;margin:12px 0 10px}
  .stack div{height:100%}
  .sleg{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;font-size:13px;align-items:center}
  .sleg i{width:10px;height:10px;border-radius:3px;display:inline-block}
  .sleg span:nth-child(3n){text-align:right;font-variant-numeric:tabular-nums}
  .note{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--surface-2);font-size:12px;color:var(--text-2)}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th{color:var(--muted);font-weight:500;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:7px 6px;border-bottom:1px solid var(--line)}
  td{padding:8px 6px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums} td.r,th.r{text-align:right}
  .pill{font-size:11px;padding:1px 7px;border-radius:5px;background:var(--idle-bg);color:var(--text-2)}
  .on-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:6px}
  .off-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#c4ccd8;margin-right:6px}
  .bar{height:6px;background:var(--idle-bg);border-radius:3px;overflow:hidden;min-width:80px} .bar i{display:block;height:100%;background:var(--s1);border-radius:3px}
  svg.viz text.tick{fill:var(--muted);font-size:10px} svg.viz .grid{stroke:var(--line)} svg.viz .cross{stroke:var(--muted);stroke-dasharray:3 3}
  svg.viz .mark{stroke:#d0d6e0;stroke-dasharray:2 4} svg.viz .marklbl{fill:var(--muted);font-size:10px}
  #viz-tip{position:fixed;pointer-events:none;opacity:0;background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px #14213a1f;border-radius:8px;padding:8px 10px;font-size:12px;min-width:150px;z-index:9}
  #viz-tip .tt-h{color:var(--muted);margin-bottom:4px} #viz-tip div{display:flex;align-items:center;gap:6px} #viz-tip b{margin-left:auto;padding-left:12px}
  #viz-tip i{width:8px;height:8px;border-radius:2px;display:inline-block}
  .foot{color:var(--muted);font-size:11px;text-align:center;margin-top:6px}
  @media (max-width:900px){.app{grid-template-columns:1fr} aside{display:none} .cortes{grid-template-columns:1fr 1fr} .row{grid-template-columns:1fr} main{padding:14px 16px}}
  /* ---- extras para todas las pantallas ---- */
  a{color:inherit;text-decoration:none}
  .nav:hover:not(.on){background:#ffffff12}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
  .kpi .l{color:var(--text-2);font-size:12px} .kpi .v{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;margin:2px 0}
  .kpi .v small{font-size:13px;color:var(--muted);font-weight:400} .kpi .f{font-size:12px;color:var(--muted)}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
  .mb{margin-bottom:14px}
  .f{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--text-2);background:var(--surface);display:inline-flex;gap:6px;align-items:center}
  .f b{color:var(--text);font-weight:500}
  .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-2)}
  .chip.on{background:#e8f0fb;border-color:#b7cdee;color:var(--brand);font-weight:500}
  .st.crit{background:#fde8e8;color:#b42323} .st.info{background:#e8f0fb;color:var(--brand)}
  .frozen{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;background:#e8f0fb;color:var(--brand);font-weight:500}
  .d-up{color:#b4441f} .d-dn{color:var(--good)} .d-eq{color:var(--muted)}
  .sw{display:inline-block;width:34px;height:20px;border-radius:999px;background:#c9d1dd;position:relative;vertical-align:middle}
  .sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff}
  .sw.on{background:var(--brand)} .sw.on::after{left:17px}
  .inp{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:13px;background:var(--surface);color:var(--text);min-width:90px;display:inline-block}
  .frm{display:grid;grid-template-columns:220px 1fr;gap:12px 16px;align-items:center;font-size:13px}
  .frm label{color:var(--text-2)} .hint{font-size:12px;color:var(--muted)}
  .alert{display:flex;gap:12px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);margin-bottom:10px;align-items:flex-start}
  .alert.warn{background:#fffaf0;border-color:#f1d9a6} .alert.ok{background:#f3fbf6;border-color:#cfe9da}
  .alert .ic{font-size:18px;line-height:1} .alert .t{font-weight:600} .alert .m{font-size:12px;color:var(--text-2)}
  .alert .act{margin-left:auto;display:flex;gap:6px}
  .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px;text-align:center}
  .cal .h{color:var(--muted);font-size:11px;padding:4px 0}
  .cal .d{border-radius:8px;padding:6px 0 5px;border:1px solid transparent;font-variant-numeric:tabular-nums}
  .cal .d.has{background:var(--surface-2)} .cal .d.sel{border-color:var(--brand);background:#e8f0fb;color:var(--brand);font-weight:600}
  .cal .d.out{color:#c4ccd8} .cal .dots{display:flex;gap:2px;justify-content:center;margin-top:3px}
  .cal .dots i{width:5px;height:5px;border-radius:50%;background:var(--s1)} .cal .dots i.m{background:#4a3aa7} .cal .dots i.x{background:#d6dce6}
  tr.sel td{background:#eef4fc}
  .cb{display:inline-block;width:15px;height:15px;border-radius:4px;border:1.5px solid #b6c0cf;vertical-align:middle}
  .cb.on{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 2px #fff}
  .tp{font-size:11px;padding:1px 7px;border-radius:5px;background:var(--idle-bg);color:var(--text-2)} .tp.man{background:#efe9fb;color:#4a3aa7}
  svg.viz .hline{stroke:#b42323;stroke-dasharray:4 4;opacity:.6} svg.viz .hlbl{fill:#b42323;font-size:10px}
  .tabs2{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px}
  .tabs2 span{padding:8px 12px;font-size:13px;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px}
  .tabs2 span.on{color:var(--brand);border-color:var(--brand);font-weight:500}
  .avatar{width:26px;height:26px;border-radius:50%;background:#e8f0fb;color:var(--brand);display:inline-grid;place-items:center;font-size:11px;font-weight:600;margin-right:8px;vertical-align:middle}
  @media (max-width:900px){.kpis,.grid3{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.frm{grid-template-columns:1fr}}
  .corte a.lnk{display:block}
  .kpi .f{border:0;padding:0;background:none;display:block;border-radius:0}
  td{white-space:nowrap} td.wrap{white-space:normal}
  .row>*,.grid2>*,.grid3>*{min-width:0}
  /* ---- app real ---- */
  .nodata{display:grid;place-items:center;color:var(--muted);font-size:13px;background:var(--surface-2);border-radius:8px}
  button.btn,a.btn{cursor:pointer;font:inherit;font-size:13px;display:inline-flex;align-items:center;gap:6px}
  .btn:hover{border-color:#c3cddc} .btn.pri:hover{background:#21508f} .btn.disabled{opacity:.5;pointer-events:none}
  .btn.sm{padding:4px 9px;font-size:12px}
  form.inline{display:inline}
  input.inp,select.inp,textarea.inp{font:inherit;font-size:13px;outline:none}
  input.inp:focus,select.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px #285faf22}
  input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px;vertical-align:middle}
  .seg a{font-weight:500;font-size:12px;padding:4px 11px;border-radius:6px;color:var(--text-2)} .seg a.on{background:var(--brand);color:#fff}
  .chip input{display:none} label.chip{cursor:pointer}
  .flash{padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:13px;border:1px solid}
  .flash.ok{background:#f3fbf6;border-color:#cfe9da;color:#17603b} .flash.warn{background:#fffaf0;border-color:#f1d9a6;color:#7a4e00}
  .flash.err{background:#fdf0f0;border-color:#f3c4c4;color:#8f1d1d}
  .muted{color:var(--muted)} .small{font-size:12px} .right{text-align:right}
  .stale{background:#fdf0f0;color:#8f1d1d;border:1px solid #f3c4c4;padding:6px 12px;border-radius:8px;font-size:12px}
  .badge-off{background:#fdf1d8;color:#a86a00;font-size:11px;padding:2px 8px;border-radius:999px;margin-left:6px}
  .nav-form{margin-top:4px} .nav-form button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;color:#cfd8e8;font-size:14px;width:calc(100% - 24px)}
  .nav-form button:hover{background:#ffffff12}
  .nav-form svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
  .mtop{display:none}
  /* login */
  .login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,#1B3355 0%,#285FAF 100%);padding:16px}
  .login{width:100%;max-width:380px;background:var(--surface);border-radius:16px;padding:28px 26px;box-shadow:0 20px 50px #0b1a3344}
  .login .brand{color:var(--text);margin:0 0 18px} .login label{display:block;font-size:12px;color:var(--text-2);margin:12px 0 4px}
  .login input.inp{width:100%;padding:10px 12px;font-size:14px} .login .btn.pri{width:100%;justify-content:center;padding:10px;margin-top:18px;font-size:14px}
  .login .hint{margin-top:14px;line-height:1.5}
  /* móvil */
  @media (max-width:900px){
    .mtop{display:flex;align-items:center;gap:10px;background:var(--brand-dark);color:#fff;padding:10px 16px;position:sticky;top:0;z-index:5}
    .mtop button{all:unset;cursor:pointer;font-size:22px;line-height:1}
    .mtop b{font-size:15px}
    body.menu-open aside{display:flex;position:fixed;inset:48px 0 0 0;z-index:6;overflow:auto}
    .top{flex-wrap:wrap} .top h1{font-size:19px}
    .cortes{grid-template-columns:1fr 1fr} .kpis{grid-template-columns:1fr 1fr}
    table{display:block;overflow-x:auto}
    .card{padding:14px}
  }
  @media (max-width:520px){ .cortes,.kpis{grid-template-columns:1fr} }
  /* impresión */
  @media print{
    aside,.mtop,.no-print,.btn,.seg{display:none !important}
    .app{display:block} main{padding:0} body{background:#fff}
    .card{break-inside:avoid;border-color:#ccc}
  }