:root{
  --bg:#f4f6f8; --card:#fff; --ink:#1b2733; --muted:#5f6d7a; --line:#e2e7ec;
  --pri:#0d5c75; --pri-d:#0a4659; --pri-l:#e3f1f5; --acc:#e9b44c;
  --crit:#c0392b; --bajo:#e07b24; --medio:#d4a90b; --ok:#2e9157; --sobre:#2f6fb5; --sin:#9aa5b1;
  --radius:10px; --shadow:0 1px 2px rgba(16,32,48,.06),0 2px 8px rgba(16,32,48,.05);
  font-size:15px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.45}
a{color:var(--pri)} a:hover{color:var(--pri-d)}
h1{font-size:1.45rem;margin:.2rem 0 .3rem;line-height:1.25} h2{font-size:1.1rem;margin:1.4rem 0 .6rem}
.muted{color:var(--muted)} .small{font-size:.85rem} .block{display:block} .strong{font-weight:600} .c{text-align:center} .r{text-align:right} .nowrap{white-space:nowrap}
.txt-warn{color:var(--bajo)!important} .txt-ok{color:var(--ok)}

/* top + shell */
.top{display:flex;align-items:center;gap:1rem;background:var(--pri-d);color:#fff;padding:.6rem 1.2rem;position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:.7rem;flex:1;min-width:0}
.brand small{display:block;opacity:.75;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--acc);color:var(--pri-d);font-weight:800;letter-spacing:.5px;flex:none}
.logo-lg{width:52px;height:52px;font-size:1.2rem;margin-bottom:.4rem}
.who{display:flex;align-items:center;gap:.7rem;text-align:right}
.who small{display:block;opacity:.75;font-size:.75rem}
.who .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.4rem}
.shell{display:flex;min-height:calc(100vh - 56px)}
.side{width:210px;flex:none;background:#fff;border-right:1px solid var(--line);padding:1rem .6rem;display:flex;flex-direction:column;gap:2px}
.side a{padding:.55rem .8rem;border-radius:8px;text-decoration:none;color:var(--ink)}
.side a:hover{background:var(--bg)} .side a.on{background:var(--pri-l);color:var(--pri-d);font-weight:600}
main{flex:1;min-width:0;padding:1.3rem 1.6rem 3rem;max-width:1500px}

/* cards & layout */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.1rem}
.table-card{padding:0;overflow-x:auto}
.pad{padding:1rem 1.1rem}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}
.section-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.4rem 0 .6rem}
.section-head h2{margin:0;flex:1}
.crumbs{margin:0 0 .3rem;font-size:.85rem;color:var(--muted)}
.crumbs a{text-decoration:none}

/* filters / forms */
.filters{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted);font-weight:500}
input,select,textarea{font:inherit;color:var(--ink);border:1px solid #c9d2da;border-radius:7px;padding:.45rem .6rem;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri-l);border-color:var(--pri)}
textarea{resize:vertical}
.form{max-width:980px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem}
.span-2{grid-column:span 2}
fieldset{border:1px solid var(--line);border-radius:8px;margin:1rem 0;padding:.8rem 1rem}
legend{font-weight:600;padding:0 .3rem}
.ev-row{margin-bottom:.5rem}
.ev-list{list-style:none;padding:0;margin:0 0 .8rem} .ev-list li{display:flex;gap:.8rem;align-items:center;padding:.25rem 0;border-bottom:1px dashed var(--line)}
.chk{flex-direction:row;align-items:center;gap:.35rem}
.mt{margin-top:.8rem}
.form-actions{display:flex;gap:.6rem;align-items:center;margin-top:1rem}
.note{background:var(--pri-l);border-radius:8px;padding:.6rem .8rem;font-size:.9rem}
.danger-zone{max-width:980px;margin-top:1rem;display:flex;gap:.8rem;align-items:flex-end;border-color:#f1c6c1}
.danger-zone label{flex:1}
.in-num{width:7.5rem;text-align:right}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;background:var(--pri);color:#fff;border:1px solid var(--pri);border-radius:8px;padding:.5rem 1rem;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--pri-d);color:#fff}
.btn-ghost{background:transparent;color:var(--pri);border-color:#c5d6de} .btn-ghost:hover{background:var(--pri-l);color:var(--pri-d)}
.btn-ok{background:var(--ok);border-color:var(--ok)} .btn-danger{background:var(--crit);border-color:var(--crit)}
.btn-sm{padding:.28rem .6rem;font-size:.82rem}
.btn-block{width:100%;margin-top:.6rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.4rem}
form.inline{display:inline}

/* tabs */
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin:.4rem 0 1rem;overflow-x:auto}
.tabs a{padding:.5rem 1rem;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;font-weight:600;white-space:nowrap}
.tabs a.on{color:var(--pri-d);border-color:var(--pri)}
.tabs-inline{margin:0;border:0} .tabs-inline a{padding:.3rem .7rem;border:1px solid var(--line);border-radius:20px} .tabs-inline a.on{background:var(--pri);color:#fff;border-color:var(--pri)}

/* KPIs */
.kpis{display:grid;grid-template-columns:1.2fr 1.6fr .7fr .7fr;gap:1rem;margin-bottom:1rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.35rem}
.kpi-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.kpi-val{font-size:1.9rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-main .kpi-val{font-size:2.3rem;color:var(--pri-d)}
.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:.8rem}
.mini-kpis>div{display:flex;flex-direction:column;gap:.2rem} .mini-kpis .kpi-val{font-size:1.35rem}
.stack{display:flex;height:26px;border-radius:6px;overflow:hidden;gap:2px}
.stack span{display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:700;min-width:22px}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px}

/* semáforo */
.sem{display:inline-block;align-self:flex-start;font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:10px;color:#fff;margin-top:.25rem}
.sem-critico,.sem-bg-critico{background:var(--crit)} .sem-bajo,.sem-bg-bajo{background:var(--bajo)} .sem-medio,.sem-bg-medio{background:var(--medio)}
.sem-ok,.sem-bg-ok{background:var(--ok)} .sem-sobre,.sem-bg-sobre{background:var(--sobre)} .sem-sin,.sem-bg-sin{background:var(--sin)}
.bar{height:8px;background:#e8edf1;border-radius:5px;overflow:hidden;flex:1;min-width:70px}
.bar-fill{height:100%;border-radius:5px}
.bar-row{display:flex;align-items:center;gap:.5rem} .bar-row span{font-weight:700;font-variant-numeric:tabular-nums;min-width:3.6rem;text-align:right}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{background:#f7f9fa;text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:.6rem .7rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl tfoot td{background:#f7f9fa;font-weight:600}
.tbl-compact td{padding:.4rem .6rem}
.row-link{cursor:pointer} .row-link:hover td{background:#f8fbfc}
.row-off td{opacity:.55;text-decoration:line-through}
.row-off td:last-child,.row-off td:nth-last-child(2){text-decoration:none;opacity:1}
.num-meta{font-weight:800;color:var(--pri);font-size:1.05rem;text-align:center;width:44px}
.meta-name{text-decoration:none;color:var(--ink);font-weight:600}
.w-bar{min-width:190px}
.pre{white-space:pre-line}
.prog td,.prog th{padding:.3rem .5rem}
.actions{white-space:nowrap} .actions>*{margin:0 .15rem .2rem 0}
.old{color:#9b3b30} .new{color:#22603d}

/* tags */
.tag{display:inline-block;font-size:.7rem;font-weight:700;padding:.08rem .45rem;border-radius:4px;margin-top:.25rem}
.tag-warn{background:#fdf0e1;color:#9a5410}
.bpin{font-family:Consolas,monospace;font-size:.8rem;background:var(--pri-l);color:var(--pri-d);padding:.05rem .35rem;border-radius:4px}
.chip{display:inline-block;font-size:.78rem;padding:.08rem .5rem;border-radius:10px;background:var(--pri-l);text-decoration:none;margin:0 .15rem .2rem 0}
.ev{display:block;font-size:.83rem;margin-bottom:.2rem} .ev::before{content:"📎 "} .ev-nolink{color:var(--muted)}
.est{font-size:.75rem;font-weight:700;padding:.12rem .5rem;border-radius:10px}
.est-validado{background:#e3f4ea;color:#1d6b40} .est-reportado{background:#fff4d6;color:#8a6200} .est-devuelto{background:#fbe3e0;color:#9b2c20}
.acc{font-size:.72rem;font-weight:700;padding:.08rem .4rem;border-radius:4px;background:#eef1f4;text-transform:uppercase}
.acc-crear{background:#e3f4ea;color:#1d6b40} .acc-editar{background:#e5effa;color:#24548a} .acc-eliminar,.acc-devolver{background:#fbe3e0;color:#9b2c20} .acc-validar{background:#e3f4ea;color:#1d6b40}
.dot-warn{color:var(--bajo);font-size:.7rem}

/* meta detail */
.meta-title{display:flex;gap:1rem;align-items:flex-start}
.meta-num{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:12px;background:var(--pri);color:#fff;font-size:1.5rem;font-weight:800}
.dl{display:grid;grid-template-columns:190px 1fr;gap:.5rem 1rem;margin:0}
.dl dt{color:var(--muted);font-size:.85rem} .dl dd{margin:0}
.timeline{list-style:none;padding:0;margin:0 0 .6rem}
.timeline li{padding:.45rem 0;border-bottom:1px dashed var(--line);font-size:.88rem}
.t-date{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:.5rem} .t-who{font-weight:600;margin-right:.4rem}
del{color:#9b3b30} ins{color:#22603d;text-decoration:none;font-weight:600}
details.pop{display:inline-block;position:relative}
details.pop>summary{list-style:none} details.pop>summary::-webkit-details-marker{display:none}
details.pop[open] form{position:absolute;right:0;z-index:3;background:#fff;border:1px solid var(--line);box-shadow:0 6px 24px rgba(0,0,0,.12);padding:.8rem;border-radius:8px;width:280px;display:flex;flex-direction:column;gap:.5rem;white-space:normal}

/* alerts / flash */
.alerts{background:#fffaf0;border:1px solid #f3dfb5;border-radius:var(--radius);padding:.6rem 1rem;margin-bottom:1rem}
.alerts summary{font-weight:600;cursor:pointer;color:#8a5a00}
.alerts ul{margin:.5rem 0 0;padding-left:1.1rem} .alerts li{margin:.2rem 0} .alerts a{color:var(--ink)}
.al-info a{color:var(--muted)}
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:.8rem;font-weight:500}
.flash-ok{background:#e3f4ea;color:#1d6b40;border:1px solid #bfe3cd} .flash-error{background:#fbe3e0;color:#8f281c;border:1px solid #f2c3bd}
.pager{display:flex;gap:1rem;justify-content:center;align-items:center;margin-top:1rem}

/* login */
.center-page{display:grid;place-items:center;min-height:100vh;padding:1rem;background:linear-gradient(160deg,#0a4659,#0d5c75 55%,#13809f)}
.login-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:.7rem;text-align:left}
.login-card h1{margin:0}

@media (max-width:1100px){.kpis{grid-template-columns:1fr 1fr}.mini-kpis{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  :root{font-size:14px}
  .menu-btn{display:block} .who span{display:none}
  .side{position:fixed;top:56px;left:0;bottom:0;transform:translateX(-100%);transition:.2s;z-index:4;box-shadow:4px 0 20px rgba(0,0,0,.15)}
  .nav-open .side{transform:none}
  main{padding:1rem}
  .kpis{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .span-2{grid-column:auto}
  .dl{grid-template-columns:1fr} .brand small{display:none}
}
@media print{.top,.side,.filters,.tabs,.btn,.actions{display:none!important} main{padding:0} .card{box-shadow:none}}