:root{
  --navy:#142B46;
  --navy-soft:#1E3D5F;
  --orange:#E05120;
  --turquoise:#3BB5CC;
  --bg:#F2F4F5;
  --surface:#FFFFFF;
  --surface-2:#F8F9FA;
  --ink:#12181F;
  --ink-soft:#54626D;
  --ink-faint:#8B96A0;
  --line:#E1E5E8;
  --ok:#1E9E5A; --ok-bg:#E5F6ED;
  --warn:#D97F0A; --warn-bg:#FCF0DC;
  --danger:#D14343; --danger-bg:#FBE7E7;
  --napp:#7A8894; --napp-bg:#EBEEF0;
  --radius:10px;
  --shadow:0 1px 2px rgba(20,43,70,.05), 0 4px 14px rgba(20,43,70,.07);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Jost',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}

.topbar{
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:12px 26px; position:sticky; top:0; z-index:10; box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.topbar-brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.03em;}
.topbar-brand img{height:26px;}
.topbar-nav a{font-size:14px; opacity:.9; padding:6px 10px; border-radius:7px;}
.topbar-nav a:hover{background:rgba(255,255,255,.1);}
.topbar-user{display:flex; align-items:center; gap:14px; font-size:13.5px;}
.btn-ghost{border:1px solid rgba(255,255,255,.3); padding:5px 12px; border-radius:20px;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}

.page{max-width:1180px; margin:0 auto; padding:26px 22px 60px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:13px;
  padding:8px 16px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{background:var(--surface-2);}
.btn.primary{background:var(--navy); border-color:var(--navy); color:#fff;}
.btn.primary:hover{background:var(--navy-soft);}
.btn.accent{background:var(--orange); border-color:var(--orange); color:#fff;}

/* ---- Login ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy);}
.login-card{background:#fff; border-radius:14px; padding:40px 36px; width:100%; max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,.25);}
.login-card img{height:36px; display:block; margin:0 auto 18px;}
.login-card h1{font-size:19px; text-align:center; margin:0 0 22px; color:var(--navy);}
.login-card input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:8px; margin-bottom:12px; font-family:'Jost'; font-size:14.5px;}
.login-card button{width:100%; padding:11px; background:var(--orange); color:#fff; border:none; border-radius:8px; font-weight:600; font-size:14.5px; cursor:pointer;}
.login-card .err{background:var(--danger-bg); color:var(--danger); padding:9px 12px; border-radius:8px; font-size:13px; margin-bottom:12px;}

/* ---- Dashboard summary ---- */
.summary-grid{display:grid; grid-template-columns:280px 1fr; gap:18px; margin-bottom:22px;}
@media (max-width:860px){.summary-grid{grid-template-columns:1fr;}}
.gauge-card{padding:20px 20px 16px; display:flex; flex-direction:column; align-items:center;}
.gauge-card .gnum{font-size:32px; font-weight:700; margin-top:-46px; color:var(--navy);}
.gauge-card .glabel{font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px;}
.gauge-card .gsub{font-size:11.5px; color:var(--ink-faint); margin-top:2px; text-align:center;}
.phva-card{padding:18px 22px;}
.phva-title{font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; font-weight:600;}
.phva-row{display:grid; grid-template-columns:130px 1fr 46px; align-items:center; gap:12px; margin-bottom:11px;}
.phva-name{font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;}
.phva-name .dot{width:9px;height:9px;border-radius:50%;}
.bar-track{height:8px; background:var(--surface-2); border-radius:20px; overflow:hidden; border:1px solid var(--line);}
.bar-fill{height:100%; border-radius:20px;}
.phva-pct{font-size:12px; color:var(--ink-soft); text-align:right;}

.std-card{padding:18px 22px; margin-bottom:22px;}
.std-title{font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; font-weight:600;}
.std-title b{color:var(--navy);}
.std-hint{font-size:11.8px; color:var(--ink-faint); margin-bottom:14px;}
.std-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px;}
.std-chip{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); font-size:12.3px;}
.std-chip .num{font-weight:700; font-size:11px; color:#fff; width:19px; height:19px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.std-chip.done .num{background:var(--ok);}
.std-chip.pending .num{background:var(--ink-faint);}
.std-chip .txt{color:var(--ink-soft);}
.std-chip.done .txt{color:var(--ink);}

/* ---- Steps nav ---- */
.step-tabs{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px;}
.step-tab{padding:7px 13px; border-radius:20px; border:1px solid var(--line); background:var(--surface); font-size:12.6px; font-weight:600; color:var(--ink-soft);}
.step-tab.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.step-tab .n{font-size:10.5px; opacity:.75; margin-left:5px;}

/* ---- Document cards ---- */
.doc-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px; box-shadow:var(--shadow);}
.doc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.doc-name{font-size:13.6px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.badge{font-size:9.6px; font-weight:700; letter-spacing:.02em; padding:2px 7px; border-radius:20px; white-space:nowrap;}
.badge.estandar{background:#FCE9CC; color:#A85A00;}
.badge.decreto{background:#DCE6F0; color:var(--navy);}
.badge.retencion{background:#F3E3EE; color:#8A3E77;}
.badge.custom{background:var(--napp-bg); color:var(--napp);}
select.status-select{font-weight:600; font-size:12px; border-radius:20px; border:1px solid transparent; padding:4px 10px; cursor:pointer;}
select.status-select.pendiente{background:var(--danger-bg); color:var(--danger);}
select.status-select.en_proceso{background:var(--warn-bg); color:var(--warn);}
select.status-select.completo{background:var(--ok-bg); color:var(--ok);}
select.status-select.no_aplica{background:var(--napp-bg); color:var(--napp);}
.doc-grid{display:grid; grid-template-columns:1fr 2fr auto; gap:9px; margin-top:11px; align-items:end;}
@media (max-width:700px){.doc-grid{grid-template-columns:1fr;}}
.field label{display:block; font-size:9.8px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:3px; font-weight:600;}
.field input, .field textarea{width:100%; border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-family:'Jost'; font-size:12.8px; background:var(--surface-2);}
.field textarea{resize:vertical; min-height:36px;}
.doc-meta{font-size:11.5px; color:var(--ink-faint); margin-top:8px; display:flex; gap:14px; flex-wrap:wrap;}

/* ---- Version history ---- */
.version-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:var(--surface-2);}
.version-row.current{border-color:var(--turquoise); background:#EAF7FA;}
.version-tag{font-weight:700; font-size:12px; color:var(--navy);}
.version-file{font-size:12.5px; color:var(--ink-soft);}
.version-date{font-size:11.5px; color:var(--ink-faint);}

.upload-box{border:1.5px dashed var(--line); border-radius:var(--radius); padding:18px; background:var(--surface);}
.upload-box input[type=file]{margin-bottom:10px;}
.upload-box input[type=text]{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; margin-bottom:10px; font-family:'Jost';}

.msg{padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px;}
.msg.ok{background:var(--ok-bg); color:var(--ok);}
.msg.err{background:var(--danger-bg); color:var(--danger);}