/* Identidad visual DAS Pozo Almonte — la misma de la plataforma de Calidad y
   Seguridad del Paciente: franja dorada, azul institucional, Poppins e Inter.
   Las fuentes se sirven desde ./fuentes, sin pedir nada a internet. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(fuentes/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url(fuentes/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url(fuentes/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url(fuentes/inter-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(fuentes/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(fuentes/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url(fuentes/poppins-800.woff2) format('woff2')}

:root{
  /* azul institucional */
  --inst-50:#eff4ff; --inst-100:#dbe6fe; --inst-200:#bfd3fe; --inst-300:#93b4fd;
  --inst-400:#5b82d6; --inst-500:#2a4ba0; --inst-600:#2a4ba0; --inst:#1e3a8a;
  --inst-700:#1e3a8a; --inst-800:#16306e; --inst-900:#0f2454;
  /* acentos de la plataforma */
  --gold:#f4b400; --gold-ink:#7a5c00; --orange:#ea580c;
  /* superficies */
  --bg:#f4f7fc; --surface:#ffffff; --surface-2:#eff4ff; --surface-3:#f8fafc;
  --border:#dbe6fe; --border-soft:#e7ecf7;
  --ink:#1c2b4a; --text:#1c2b4a; --text-soft:#51648a; --text-faint:#8698bd;
  /* alias de la paleta anterior, para no romper componentes */
  --slate-700:#1c2b4a; --slate-600:#51648a; --slate-500:#8698bd;
  --slate-300:#bfd3fe; --slate-200:#e7ecf7; --slate-100:#eff4ff; --slate-50:#f8fafc;
  /* semáforo: reservado al desempeño */
  --verde:#15803d; --verde-bg:#dcfce7; --verde-bd:#86efac; --verde-tx:#14532d;
  --amarillo:#b45309; --amar-bg:#fef3c7; --amar-bd:#fcd34d; --amar-tx:#78350f;
  --rojo:#b91c1c; --rojo-bg:#fee2e2; --rojo-bd:#fca5a5; --rojo-tx:#7f1d1d;

  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --titulo:'Poppins','Inter',system-ui,sans-serif;
  --sombra:0 1px 2px rgba(15,36,84,.06), 0 8px 24px -12px rgba(15,36,84,.18);
  --sombra-lg:0 20px 60px -20px rgba(15,36,84,.35);
  --radio:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--titulo); color:var(--inst-900); line-height:1.2;
  text-wrap:balance; margin:0}
strong{color:var(--inst-900); font-weight:600}
::selection{background:var(--gold); color:#1c2b4a}
:focus-visible{outline:2px solid var(--inst); outline-offset:2px; border-radius:4px}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- estructura ---------- */
.franja{
  height:6px; background:linear-gradient(90deg,var(--gold),#ffd873 50%,var(--gold));
}
.app{display:flex; min-height:calc(100vh - 6px)}
.lateral{
  width:248px; flex:0 0 248px; color:#fff;
  background:linear-gradient(180deg,var(--inst-800) 0%,#12275c 100%);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; padding:18px 0;
}
.marca{padding:0 18px 16px; border-bottom:1px solid rgba(255,255,255,.14)}
.marca .sello{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.marca .sello img{width:38px; height:38px; object-fit:contain; flex:none}
.logo-lat{
  display:block; width:150px; height:auto; background:#fff;
  border-radius:8px; padding:8px 10px; margin:0 0 12px;
}
.marca h1{font-size:13.5px; font-weight:700; margin:0 0 3px; letter-spacing:-.005em;
  color:#fff; line-height:1.3}
.marca p{font-size:10.5px; margin:0; color:var(--inst-200); line-height:1.4;
  letter-spacing:.02em}
.nav{flex:1; overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column;
  gap:1px; scrollbar-width:thin}
.nav button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:0; color:rgba(223,233,253,.82); font-family:inherit;
  font-size:12.5px; padding:7px 10px; border-radius:9px; cursor:pointer;
  transition:background .12s, color .12s;
}
.nav button:hover{background:rgba(42,75,160,.55); color:#fff}
.nav button[aria-current="true"]{background:var(--inst); color:#fff; font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold)}
.nav .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:6px; font-size:10.5px; flex:0 0 auto;
  background:rgba(255,255,255,.13); font-variant-numeric:tabular-nums;
  font-family:var(--titulo); font-weight:600;
}
.nav button[aria-current="true"] .n{background:var(--gold); color:var(--inst-900)}
.pie-lat{padding:12px 18px 0; border-top:1px solid rgba(255,255,255,.14);
  font-size:10.5px; color:rgba(191,211,254,.75); line-height:1.5}

.principal{flex:1; min-width:0; display:flex; flex-direction:column}
.barra{
  position:sticky; top:0; z-index:20; background:var(--surface);
  border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 26px; gap:16px;
}
.barra .titulo{font-family:var(--titulo); font-size:13px; font-weight:600;
  color:var(--inst-900)}
.barra .ctrl{display:flex; align-items:center; gap:8px}
.prog{height:4px; background:var(--border-soft); border-radius:3px; width:120px;
  overflow:hidden}
.prog i{display:block; height:100%; border-radius:3px; transition:width .25s;
  background:linear-gradient(90deg,var(--inst),var(--inst-400))}
.lienzo{padding:24px 26px 64px; max-width:1180px; width:100%}

/* ---------- componentes ---------- */
.enc{border-bottom:1px solid var(--border-soft); padding-bottom:15px; margin-bottom:20px}
.enc h2{font-size:21px; font-weight:700; letter-spacing:-.015em; margin:0 0 6px}
.enc p{margin:0; color:var(--text-soft); font-size:13.5px; max-width:78ch; line-height:1.6}
.card{background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--radio); box-shadow:var(--sombra)}
.card-h{padding:12px 16px; border-bottom:1px solid var(--border-soft)}
.card-h h3{font-family:var(--titulo); font-size:13px; font-weight:600;
  color:var(--inst-900); margin:0}
.card-h p{font-size:11.5px; color:var(--text-faint); margin:3px 0 0; line-height:1.5}
.card-b{padding:16px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

.kpi{background:var(--surface); border:1px solid var(--border-soft);
  border-radius:12px; padding:13px 15px; box-shadow:var(--sombra)}
.kpi .lab{font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-faint); margin-bottom:6px}
.kpi .val{font-family:var(--titulo); font-size:25px; font-weight:700;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15;
  color:var(--inst-900)}
.kpi .hint{font-size:11.5px; color:var(--text-soft); margin-top:5px; line-height:1.5}
.kpi.inst{background:var(--inst-50); border-color:var(--inst-100)}
.kpi.inst .val{color:var(--inst)}
.kpi.rojo{background:var(--rojo-bg); border-color:var(--rojo-bd)}
.kpi.rojo .val{color:var(--rojo-tx)}
.kpi.verde{background:var(--verde-bg); border-color:var(--verde-bd)}
.kpi.verde .val{color:var(--verde-tx)}
.kpi.amarillo{background:var(--amar-bg); border-color:var(--amar-bd)}
.kpi.amarillo .val{color:var(--amar-tx)}

.badge{display:inline-flex; align-items:center; gap:5px; border:1px solid transparent;
  border-radius:99px; padding:3px 9px; font-size:11px; font-weight:600}
.badge .pt{width:7px; height:7px; border-radius:50%; flex:0 0 auto}
.b-inst{background:var(--inst-50); border-color:var(--inst-100); color:var(--inst)}
.b-slate{background:var(--surface-3); border-color:var(--border-soft); color:var(--text-soft)}
.b-verde{background:var(--verde-bg); border-color:var(--verde-bd); color:var(--verde)}
.b-verde .pt{background:var(--verde)}
.b-amarillo{background:var(--amar-bg); border-color:var(--amar-bd); color:var(--amarillo)}
.b-amarillo .pt{background:var(--amarillo)}
.b-rojo{background:var(--rojo-bg); border-color:var(--rojo-bd); color:var(--rojo)}
.b-rojo .pt{background:var(--rojo)}

.alerta{border:1px solid var(--border-soft); border-left:4px solid var(--linea,var(--inst));
  background:var(--fondo,var(--surface-2)); border-radius:10px; padding:12px 14px;
  font-size:13px; line-height:1.6; break-inside:avoid}
.alerta strong{font-weight:600; color:var(--linea,var(--inst))}
.a-info{--linea:var(--inst); --fondo:var(--surface-2); color:var(--text-soft)}
.a-warn{--linea:var(--amarillo); --fondo:var(--amar-bg); color:var(--amar-tx)}
.a-danger{--linea:var(--rojo); --fondo:var(--rojo-bg); color:var(--rojo-tx)}

.scroll-x{overflow-x:auto; scrollbar-width:thin; border:1px solid var(--border-soft);
  border-radius:10px}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:12.5px}
th{border-bottom:1px solid var(--border-soft); background:var(--surface-3);
  padding:8px 10px; text-align:left; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint);
  white-space:nowrap}
td{border-bottom:1px solid var(--border-soft); padding:8px 10px; color:var(--text-soft);
  vertical-align:top}
td b, td strong{color:var(--text)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
tr.tot td{font-weight:700; color:var(--inst-900); background:var(--inst-50);
  border-top:1px solid var(--inst-100)}

.btn{font-family:inherit; font-size:12.5px; font-weight:600; border-radius:9px;
  padding:7px 13px; cursor:pointer; border:1px solid; transition:background .12s}
.btn-p{background:var(--inst); border-color:var(--inst); color:#fff}
.btn-p:hover{background:var(--inst-800)}
.btn-s{background:#fff; border-color:var(--border); color:var(--inst)}
.btn-s:hover{background:var(--surface-2)}
.btn-s[aria-pressed="true"]{background:var(--inst); border-color:var(--inst); color:#fff}
.btn:disabled{opacity:.4; cursor:default}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:99px;
  border:1px solid var(--inst-100); background:#fff; color:var(--inst);
  cursor:pointer; font-family:inherit}
.chip[aria-pressed="true"]{background:var(--inst); border-color:var(--inst); color:#fff}

.nota{font-size:11.5px; color:var(--text-faint); margin-top:10px; line-height:1.6}
.lista{margin:0; padding-left:18px}
.lista li{margin-bottom:7px; color:var(--text-soft)}
.lista li b, .lista li strong{color:var(--text)}

/* ---------- gráficos ---------- */
.chart{width:100%; display:block; overflow:visible}
.chart text{font-family:var(--font)}
.ax{font-size:10.5px; fill:var(--text-faint)}
.gl{stroke:var(--border-soft); stroke-dasharray:3 3}
.ref{stroke:var(--inst); stroke-dasharray:4 3; stroke-width:1.5}
.mark{cursor:default}
.leyenda{display:flex; flex-wrap:wrap; gap:12px; margin-top:9px; font-size:11.5px;
  color:var(--text-soft)}
.leyenda span{display:inline-flex; align-items:center; gap:6px}
.leyenda i{width:11px; height:11px; border-radius:3px; display:inline-block}
#tip{position:fixed; pointer-events:none; opacity:0; transition:opacity .1s;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:8px 10px; font-size:12px; box-shadow:var(--sombra-lg);
  z-index:100; max-width:280px; color:var(--text-soft); line-height:1.5}
#tip b{font-weight:600; color:var(--inst-900)}
#tip .l{color:var(--text-faint); font-size:11px}

/* ---------- slides ---------- */
.slide{display:none; animation:ap .18s ease-out}
.slide.on{display:block}
@keyframes ap{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}
.pasos{display:flex; gap:8px; align-items:center}

/* ---------- portada ---------- */
.portada{
  position:relative; overflow:hidden; border-radius:var(--radio);
  border:1px solid var(--border-soft); box-shadow:var(--sombra);
  background:linear-gradient(180deg,var(--inst-50) 0%,#f8fbff 70%,var(--surface) 100%);
  margin-bottom:18px; text-align:center;
}
.portada::before{content:""; position:absolute; inset-inline:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--gold),#ffd873 50%,var(--gold))}
.portada .cuerpo{max-width:52rem; margin:0 auto;
  padding:clamp(2.2rem,5vw,3.4rem) 1.75rem clamp(2rem,4vw,2.8rem)}
.portada .sol{width:78px; height:78px; margin:0 auto 1.3rem; display:block;
  object-fit:contain}
.portada .rotulo{
  display:inline-flex; align-items:center; gap:.6em; font-size:.72rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); margin-bottom:1rem;
}
.portada .rotulo::before,.portada .rotulo::after{content:""; width:1.6rem; height:1px;
  background:var(--border)}
.portada h2{font-family:var(--titulo); font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:800; color:var(--inst-900); letter-spacing:-.015em; margin:0}
.portada h2 em{font-style:normal; color:var(--inst)}
.portada .bajada{max-width:38rem; margin:1rem auto 0; font-size:1rem;
  color:var(--text-soft); line-height:1.6}
.portada .marcas{display:flex; align-items:center; justify-content:center;
  gap:14px; margin:1.8rem 0 0; flex-wrap:wrap}
.portada .marcas img{height:46px; width:auto; background:#fff; border-radius:8px;
  padding:7px 11px; border:1px solid var(--border-soft)}
.portada .marcas img.das{height:46px; padding:5px}
.portada .fuentes{margin-top:0; padding:1rem 1.75rem 1.2rem;
  border-top:1px solid var(--border-soft); background:var(--surface);
  font-size:11.5px; color:var(--text-faint); line-height:1.65}
@media print{
  .portada .marcas img{background:none; padding:0; border:none}
}

@media print{
  .no-print,.lateral,.barra,.franja{display:none !important}
  body{background:#fff}
  .slide{display:block !important; page-break-after:always}
  .lienzo{padding:0; max-width:none}
  .card,.kpi,.alerta{break-inside:avoid; box-shadow:none}
  .print-break{break-inside:avoid}
}