:root{
  --bg:#fbfbfd; --fg:#1d1d1f; --mut:#6e6e73; --line:#e3e3e6;
  --acc:#0071e3; --pos:#00875a; --neg:#c9372c; --warn:#b7791f;
  --card:#ffffff; --shadow:0 1px 3px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:400 16px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg); letter-spacing:-.01em;
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
code{font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:#f0f0f2;
  padding:2px 6px;border-radius:5px}

.wrap{display:flex;min-height:100vh}
nav{
  width:252px;flex:0 0 252px;background:#fff;border-right:1px solid var(--line);
  padding:32px 0;position:sticky;top:0;height:100vh;overflow-y:auto;
}
nav .brand{padding:0 28px 24px;border-bottom:1px solid var(--line);margin-bottom:16px}
nav .brand b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
nav .brand span{display:block;font-size:12px;color:var(--mut);margin-top:3px}
nav a{
  display:block;padding:9px 28px;color:var(--fg);font-size:14px;
  border-left:2px solid transparent;transition:background .15s;
}
nav a:hover{background:#f5f5f7;text-decoration:none}
nav a.on{border-left-color:var(--acc);color:var(--acc);font-weight:500;background:#f0f7ff}

main{flex:1;min-width:0;padding:56px 64px 96px;max-width:1400px}
h1{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-bottom:12px}
h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:48px 0 16px}
h3{font-size:17px;font-weight:600;margin:28px 0 10px}
.sub{font-size:17px;color:var(--mut);margin-bottom:40px;max-width:74ch}
p{margin-bottom:14px;max-width:78ch}
.small{font-size:13px;color:var(--mut)}
ul{margin:0 0 14px 22px}
li{margin-bottom:7px;max-width:76ch}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0 8px}
table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
th{background:#f5f5f7;font-weight:600;text-align:left;padding:11px 14px;
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid #f0f0f2;vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafafc}
.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.c{text-align:center}
.tot td{font-weight:600;background:#f5f5f7;border-top:2px solid var(--line)}
.w40{width:40%}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:24px 0}
.card{background:var(--card);border-radius:12px;padding:20px;box-shadow:var(--shadow)}
.card .k{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.card .l{font-size:12px;color:var(--mut);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}
.card .n{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.4}

.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--warn)}
.pill{display:inline-block;padding:2px 9px;border-radius:100px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.pill.alta{background:#fdecea;color:var(--neg)}
.pill.media{background:#fef6e7;color:var(--warn)}
.pill.baja{background:#e8f5ef;color:var(--pos)}
.pill.p1{background:#fdecea;color:var(--neg)}
.pill.p2{background:#fef6e7;color:var(--warn)}
.pill.ok{background:#e8f5ef;color:var(--pos)}

.bars{margin:24px 0}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:13px}
.bar .nm{flex:0 0 210px;text-align:right;color:var(--mut)}
.bar .tk{flex:1;height:22px;background:#f0f0f2;border-radius:6px;overflow:hidden;position:relative}
.bar .fl{height:100%;border-radius:6px;background:var(--acc)}
.bar .fl.pos{background:var(--pos)} .bar .fl.neg{background:var(--neg)}
.bar .vl{flex:0 0 92px;font-variant-numeric:tabular-nums;font-weight:600}

.note{background:#fff;border-left:3px solid var(--acc);border-radius:0 10px 10px 0;
  padding:16px 20px;margin:24px 0;box-shadow:var(--shadow);font-size:14px}
.note.warn{border-left-color:var(--warn)}
.note.neg{border-left-color:var(--neg)}
.note.pos{border-left-color:var(--pos)}
.note>b:first-child{display:block;margin-bottom:5px;font-weight:600}
.note p{margin-bottom:8px}
.note p:last-child{margin-bottom:0}

.quad{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.quad .q{background:var(--card);border-radius:12px;padding:22px;box-shadow:var(--shadow)}
.quad .q h3{margin-top:0;display:flex;justify-content:space-between;align-items:baseline}
.quad .q h3 span{font-size:22px;font-variant-numeric:tabular-nums}
.quad .q .it{padding:9px 0;border-top:1px solid #f0f0f2;font-size:13px}
.quad .q .it b{font-weight:600}
.quad .q .it .sc{float:right;color:var(--mut);font-variant-numeric:tabular-nums}
.quad .q .it p{font-size:12px;color:var(--mut);margin:4px 0 0;max-width:none}

footer{margin-top:72px;padding-top:24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mut);max-width:78ch}

@media(max-width:1000px){.quad{grid-template-columns:1fr}}
@media(max-width:900px){
  .wrap{flex-direction:column}
  nav{width:100%;flex:none;height:auto;position:static;padding:20px 0;display:flex;
    flex-wrap:wrap;gap:2px;border-right:none;border-bottom:1px solid var(--line)}
  nav .brand{width:100%;padding:0 20px 16px}
  nav a{padding:7px 16px;border-left:none;border-radius:100px;font-size:13px}
  nav a.on{background:#f0f7ff}
  main{padding:32px 20px 64px}
  h1{font-size:30px}
  table{font-size:13px}
  th,td{padding:9px 10px}
  .bar .nm{flex:0 0 120px}
  .cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media print{
  nav{display:none} main{padding:0;max-width:none}
  table{box-shadow:none;border:1px solid var(--line)}
  .card{box-shadow:none;border:1px solid var(--line)}
}

/* roadmap */
.anio{margin:48px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.anio h3{font-size:1.05rem;letter-spacing:-.01em}
.anio .tit{font-size:1.25rem;font-weight:600;margin:.2rem 0 .6rem;letter-spacing:-.02em}
.anio h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:26px 0 10px}
.hitos{margin:0;padding-left:1.1rem}
.hitos li{margin:.35rem 0}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.area{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.area h4{margin:0 0 8px;font-size:.72rem;color:var(--acc)}
.area ul{margin:0;padding-left:1rem;font-size:.86rem}
.area li{margin:.3rem 0;color:var(--mut)}

/* narrativa recuperada de la version anterior */
.rec{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.rec h2{font-size:1.35rem;letter-spacing:-.02em;margin:0 0 .6rem}
.rec h3{font-size:1.05rem;margin:34px 0 .5rem;letter-spacing:-.01em}
.rec h4{font-size:.95rem;margin:22px 0 .4rem;color:var(--fg)}
.rec p{margin:.7rem 0;max-width:74ch}
.rec ul,.rec ol{margin:.7rem 0 .7rem 1.1rem;max-width:74ch}
.rec li{margin:.3rem 0}
.rec table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rec th{background:#f6f6f8;font-weight:600;text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:.01em}
.rec td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.rec tr:last-child td{border-bottom:none}
.rev{background:#fff6e0;border-bottom:1px dotted var(--warn);cursor:help}


/* ---- Sidebar por familias colapsables ---- */
nav details.navgrp{border:none;margin:0}
nav details.navgrp>summary{
  list-style:none;cursor:pointer;user-select:none;
  padding:11px 28px 8px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;justify-content:space-between;
}
nav details.navgrp>summary::-webkit-details-marker{display:none}
nav details.navgrp>summary::after{
  content:"\203A";font-size:15px;color:var(--mut);
  transition:transform .18s ease;transform:translateY(-1px);
}
nav details.navgrp[open]>summary::after{transform:rotate(90deg)}
nav details.navgrp>summary:hover{color:var(--fg)}
nav details.navgrp>a{padding-left:28px;font-size:13.5px}
nav>a[href="index.html"]{font-weight:500;margin-bottom:6px}
@media(max-width:900px){
  nav{display:block}
  nav details.navgrp{width:100%}
  nav details.navgrp>summary{padding:11px 20px 8px}
  nav details.navgrp>a{padding:8px 20px 8px 30px;border-radius:0}
  nav>a[href="index.html"]{border-radius:0;padding:9px 20px}
}
nav details.navgrp>a.pend{color:var(--neg)}
nav details.navgrp>a.pend.on{color:var(--neg)}