/* =========================================================
   P2 · Diseño maestro del Centro de Operaciones PMB (muestra).
   Alcance: sistema compartido (cabecera, áreas, menú, barra móvil) + Dashboard.
   Clientes, Riesgos, Finanzas y Reuniones conservan el diseño de P1 hasta su aprobación.
   Misma identidad: colores, fuentes y componentes de V3F; solo escala, espaciado y orden visual.
   ========================================================= */
:root{
  --t-min:13px;      /* tamaño mínimo de lectura */
  --t-sec:14px;      /* texto secundario */
  --t-base:15.5px;   /* texto principal */
  --t-h1:20px; --t-h2:24px; --t-kpi:36px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:44px;
}

/* ---------- Banda: única identificación del prototipo ---------- */
.banda{font-size:10.5px;letter-spacing:.12em;padding:4px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Cabecera en una sola línea ---------- */
header.top{flex-wrap:nowrap;gap:var(--e4) 18px;padding:var(--e3) 0;min-height:64px}
.brand{gap:var(--e3);flex:none}
.brand img{height:32px}
.brand .div{height:32px}
.brand .eyebrow{font-size:10px;letter-spacing:.1em}
.brand .eyebrow::before{width:14px}
h1{font-size:var(--t-h1);margin-top:3px}
nav.tabs{padding:3px;border-radius:11px;flex:none}
nav.tabs button{padding:8px 14px;font-size:14.5px}
.hmeta{flex-wrap:nowrap;gap:var(--e2);flex:none}
html[data-modo="demo"] #selloModo{display:none}
.hmeta .portal{padding:0;font-size:13px}
.hmeta .portal-areas{padding:3px}
.hmeta .portal-area{padding:6px 12px}
.p1-hist{height:36px;padding:0 12px}
main{padding-top:var(--e5)}

@media (max-width:1300px){
  header.top{flex-wrap:wrap;row-gap:var(--e3)}
  .hmeta{margin-left:auto}
  nav.tabs{order:3;width:100%;margin-left:0}
  nav.tabs button{flex:1}
}

/* ---------- Dashboard: tres zonas de lectura ---------- */
#vDashboard{gap:var(--e7)}
.p2-zona{display:flex;align-items:center;flex-wrap:wrap;gap:var(--e1) var(--e2);font-size:var(--t-min);line-height:1.3}
.p2-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--mono);font-weight:600;font-size:12px;flex:none}
.p2-t{font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text)}
.p2-sub{color:var(--muted)}
.p2-sub::before{content:"· ";color:var(--line-2)}
#vDashboard .bhead h2{font-size:var(--t-h2);margin-top:6px}
#vDashboard>.block>.bhead>.chip.demo{display:none}
#vDashboard .p2-avance{margin-top:calc(var(--e4) - var(--e7))}
#vDashboard .p2-avance .bhead h2{font-size:19px}
#vDashboard .p2-avance .eyebrow{font-size:11.5px;color:var(--muted)}
#vDashboard .p2-avance .eyebrow::before{background:var(--line-2)}

/* Indicadores */
#vDashboard .stats{gap:var(--e3)}
#vDashboard .stat{padding:var(--e4) 18px;gap:2px}
#vDashboard .stat b{font-size:var(--t-kpi)}
#vDashboard .stat .l{font-size:15px;margin-top:2px}
#vDashboard .stat .s,#vDashboard .stat .s2{font-size:var(--t-sec)}
#vDashboard .stat .go{font-size:var(--t-sec);margin-top:auto;padding-top:6px}
#vDashboard .stat.wide .go{margin-top:6px}

/* Avance verificado: misma información, menos altura */
#vDashboard .prog{padding:18px 22px;gap:var(--e5)}
#vDashboard .bigpct>b{font-size:44px}
#vDashboard .bar{height:12px;margin:10px 0 6px}
#vDashboard .sub2{margin-top:var(--e3)}
#vDashboard .evo li{font-size:var(--t-sec)}

/* Legibilidad: nada por debajo del mínimo en el Dashboard */
#vDashboard .hint,#vDashboard .ptxt,#vDashboard .note,#vDashboard .qa .k,#vDashboard .qa dt,#vDashboard .rcard .src,#vDashboard .rk-mas{font-size:var(--t-sec)}
#vDashboard .mmeta .k,#vDashboard .acard .k,#vDashboard .chain .k,#vDashboard .etq,#vDashboard .pst,#vDashboard .urg,#vDashboard .missing,#vDashboard .rk-tags>*,#vDashboard .state{font-size:var(--t-min)}
#vDashboard .rcard{font-size:15px;padding:14px 16px}
#vDashboard .mmeta{font-size:var(--t-sec)}
footer{font-size:var(--t-min)}

/* ---------- Tableta ---------- */
@media (max-width:760px){.brand .eyebrow{font-size:9.5px;letter-spacing:.05em}.brand .eyebrow::before{width:10px}}
@media (max-width:900px){
  #vDashboard{gap:36px}
  #vDashboard .p2-avance{margin-top:calc(var(--e4) - 36px)}
}

/* ---------- Móvil ---------- */
@media (max-width:640px){
  .wrap{padding-left:var(--e4);padding-right:var(--e4)}
  .banda{font-size:10px;letter-spacing:.1em;padding:3px 8px}
  header.top{flex-wrap:nowrap;min-height:0;padding:10px 0;gap:var(--e3)}
  .brand img{height:28px}
  .brand .div,.brand>div{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hmeta{gap:6px}
  .hmeta .portal{font-size:13px}
  .hmeta .portal-area{padding:9px 12px;display:inline-block}
  #vDashboard .btn{min-height:42px}
  .p1-hist{width:38px;height:38px;padding:0;justify-content:center}
  main{padding-top:var(--e4)}
  .navmovil button{font-size:12px}

  #vDashboard{gap:var(--e6)}
  #vDashboard .p2-avance{margin-top:calc(var(--e3) - var(--e6))}
  #vDashboard .bhead h2{font-size:22px}
  .p2-zona{font-size:12.5px}

  /* Indicadores como lista: los cuatro visibles al abrir, con su explicación */
  #vDashboard .stats{grid-template-columns:1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  #vDashboard .stat{border:0;border-radius:0;border-top:1px solid var(--line);padding:12px 14px}
  #vDashboard .stat:first-child{border-top:0}
  #vDashboard .stat.wide{order:-1;border-top:0}
  #vDashboard .stat.wide b{font-size:30px}
  #vDashboard .stat.wide .s2{padding-top:6px;margin-top:4px}
  #vDashboard .stat:not(.wide){display:grid;grid-template-columns:52px 1fr 14px;grid-template-areas:"n l c" "n s c";column-gap:12px;row-gap:0;align-items:center}
  #vDashboard .stat:not(.wide) b{grid-area:n;font-size:30px;text-align:center}
  #vDashboard .stat:not(.wide) .l{grid-area:l;font-size:15px;margin:0}
  #vDashboard .stat:not(.wide) .s{grid-area:s;display:block;font-size:var(--t-sec)}
  #vDashboard .stat:not(.wide) .go{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #vDashboard .stat:not(.wide)::after{content:"›";grid-area:c;font-size:24px;line-height:1;color:var(--accent-text)}
  #vDashboard .stat:nth-child(1){border-top:1px solid var(--line)}

  #vDashboard .prog{padding:var(--e4)}
  #vDashboard .bigpct>b{font-size:38px}
  #vDashboard .bigpct span{font-size:15px}
}
@media (max-width:380px){
  .hmeta .portal-area{padding:9px 9px}
  .brand img{height:24px}
}