:root{
  --brand:#0f6a57; --brand-2:#1d7d69; --brand-dark:#0b4f42;
  --muted:#e5eeff; --orange:#eb6333;
  --verde-2:#e9f2ff; --verde-3:#9bd3c4;
  --tinta:#12241f; --gris:#5b6b7f; --gris-2:#6b7688;
  --linea:#dbe3f0; --fondo:#e5eeff; --panel:#ffffff;
  --sombra:0 1px 2px rgba(13,58,99,.05),0 12px 34px rgba(13,58,99,.08);
  --radio:14px;
  /* conceptos de crédito (mismos colores que el Monitor) */
  --c-devengado:#0d3a63; --c-vigente:#4cc1aa; --c-inicial:#eb6333;
  /* variaciones (accesibles sobre blanco) */
  --sube:#1a7f5a; --baja:#c0392b;
  --sans:'Inter',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
/* overflow-x:clip evita el scroll horizontal SIN crear un contenedor de scroll
   (así position:sticky del panel sigue funcionando). */
html{overflow-x:clip}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--sans);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2{margin:0;font-weight:800}
small{font-weight:500;color:var(--gris)}

/* ---------- Topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 24px;background:var(--brand-dark);
  background:linear-gradient(100deg,var(--brand-dark),var(--brand));color:#fff}
.brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-img{height:30px;width:auto;display:block}
.chip-proyecto{flex:none;font-weight:700;font-size:12px;letter-spacing:.2px;color:#fff;
  background:var(--orange);padding:4px 12px;border-radius:999px;white-space:nowrap}
.tag{font-size:11px;color:#fff;background:var(--orange);
  padding:5px 11px;border-radius:999px;font-weight:700;letter-spacing:.3px}

/* ---------- Bajada + advertencias (verde institucional, continúa el header) ---------- */
.intro{padding:16px 24px 18px;color:#fff;border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(100deg,var(--brand-dark),var(--brand))}
.intro-main{margin:0;font-size:15px;font-weight:600;color:#fff;max-width:78ch}
.intro-sec{margin:5px 0 0;font-size:12.5px;color:#cfeae2;max-width:78ch}
.sobre-datos{margin-top:12px;max-width:none}
.sobre-datos>summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:12.5px;color:#bfe9d8;list-style:none;padding:4px 0}
.sobre-datos>summary::-webkit-details-marker{display:none}
.sobre-datos>summary::before{content:"▸";font-size:11px;transition:transform .15s}
.sobre-datos[open]>summary::before{transform:rotate(90deg)}
.sobre-datos ul{margin:8px 0 0;padding:14px 16px 7px 34px;background:var(--panel);color:var(--gris);
  border-radius:10px;font-size:12px;line-height:1.55;max-width:none;columns:2;column-gap:36px}
.sobre-datos li{margin:0 0 7px;break-inside:avoid}
@media(max-width:820px){.sobre-datos ul{columns:1}}

/* ---------- Layout: buscador | gráfico ---------- */
.layout{display:grid;grid-template-columns:320px minmax(0,1fr);
  grid-template-areas:"izq centro";gap:16px;padding:18px;align-items:start}
.izq{grid-area:izq}.centro{grid-area:centro}
@media(max-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"izq" "centro"}
}

.col{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:16px;min-width:0}
/* En escritorio el buscador acompaña el scroll; en pantallas angostas se apila normal. */
.selector{position:sticky;top:16px}
@media(max-width:1000px){ .selector{position:static} }
.col-head{font-weight:800;font-size:15px;color:var(--tinta);margin-bottom:4px}

label{display:block;font-size:11.5px;color:var(--gris);margin:11px 0 4px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
select{width:100%;padding:9px 10px;border:1px solid var(--linea);border-radius:9px;background:#fff;
  font-family:var(--sans);font-size:13px;color:var(--tinta);cursor:pointer;transition:border-color .15s}
select:hover{border-color:var(--brand-2)}
select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,106,87,.15)}

/* Toggle de eje (institucional / funcional) */
.segmented{display:flex;background:var(--muted);border-radius:9px;padding:3px;gap:3px;margin:8px 0 4px}
.segmented button{flex:1;border:none;background:transparent;color:var(--gris);font-size:12px;font-weight:700;
  padding:7px 6px;border-radius:7px;cursor:pointer}
.segmented button.on{background:#fff;color:var(--brand-dark);box-shadow:0 1px 3px rgba(0,0,0,.12)}

button{font:inherit;font-weight:700;border-radius:9px;padding:10px 14px;cursor:pointer;border:1px solid transparent;transition:.15s}
button.primary{background:var(--brand);color:#fff}
button.primary:hover{background:var(--brand-2)}
button.ghost{background:#fff;border-color:var(--linea);color:var(--gris);padding:8px 12px;font-size:12.5px}
button.ghost:hover{border-color:var(--orange);color:var(--orange)}

/* ---------- Tarjeta del gráfico ---------- */
.gcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.gcard-tit{flex:1 1 260px;min-width:0}
.gcard-tit h2{font-size:21px;font-weight:800;color:var(--brand);line-height:1.2;letter-spacing:-.2px}
.gcard-tit p{margin:5px 0 0;font-size:12.5px;color:var(--gris);line-height:1.4}
.gcard-tit .sub-sec{display:block;margin-top:2px;font-size:11.5px;color:var(--gris-2)}
.gcard-tit .u{text-decoration:underline;text-underline-offset:2px}

.gcard-ctrls{display:flex;align-items:flex-start;gap:8px;flex:0 1 auto}
.gcard-ctrls .ajuste{min-width:230px}
.gcard-ctrls label{margin-top:0}
@media(max-width:560px){
  .gcard-ctrls{width:100%;flex-wrap:wrap}
  .gcard-ctrls .ajuste{flex:1 1 100%;min-width:0}
}

.infl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.infl-chip{display:inline-flex;align-items:baseline;gap:5px;font-size:11px;padding:3px 8px;border-radius:7px;
  background:var(--muted);color:var(--gris);border:1px solid transparent;white-space:nowrap}
.infl-chip b{color:var(--tinta);font-weight:700}
.infl-chip.infl-activo{background:#eaf5f1;border-color:var(--brand);color:var(--brand-dark)}
.infl-chip.infl-activo b{color:var(--brand-dark)}

.descarga{position:relative}
#btnDescarga{display:flex;align-items:center;gap:3px;padding:9px 10px;background:var(--brand);color:#fff;border-radius:9px}
#btnDescarga:hover{background:var(--brand-2)}
#btnDescarga .caret{font-size:10px;line-height:1}
.descarga-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid var(--linea);
  border-radius:10px;box-shadow:var(--sombra);overflow:hidden;min-width:150px}
.descarga-menu button{display:block;width:100%;text-align:left;border:none;border-radius:0;background:none;
  font-weight:600;font-size:12.5px;color:var(--tinta);padding:9px 12px}
.descarga-menu button:hover{background:var(--verde-2)}

.gcard-tools{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap}

/* Indicadores de variación */
.variaciones{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px;min-height:0}
.var-chip{display:inline-flex;flex-direction:column;gap:1px;padding:6px 11px;border-radius:9px;
  background:var(--panel);border:1px solid var(--linea)}
.var-lbl{font-size:9.5px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.4px}
.var-val{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tinta)}
.var-up .var-val{color:var(--sube)}
.var-down .var-val{color:var(--baja)}
.var-nd .var-val{font-size:11.5px;font-weight:600;color:var(--gris)}
.var-val .arrow{font-size:10px;vertical-align:1px;margin-right:2px}

.gcard-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:8px 0 2px;min-height:18px}
.gcard-legend .lg{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#3a4654}
.gcard-legend .lg i{width:12px;height:12px;border-radius:3px;flex:none}

#chart{width:100%;max-width:100%;height:452px;overflow:hidden}

/* Nota metodológica */
.gcard-foot{margin:12px 0 16px;max-width:80ch}
.gcard-foot p{margin:0 0 6px;font-size:11px;line-height:1.55;color:var(--gris);text-align:left;font-style:normal}
.gcard-foot p:last-child{margin-bottom:0}

/* ---------- Tabla ---------- */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
th,td{padding:8px 11px;text-align:right;border-bottom:1px solid var(--linea)}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:#fff;font-weight:600;max-width:280px;overflow:hidden;text-overflow:ellipsis}
thead th{background:var(--brand-dark);color:#fff;font-weight:700;position:sticky;top:0}
thead th.c-devengado{box-shadow:inset 0 -3px 0 var(--c-devengado)}
thead th.c-vigente{box-shadow:inset 0 -3px 0 var(--c-vigente)}
thead th.c-inicial{box-shadow:inset 0 -3px 0 var(--c-inicial)}
tbody tr:nth-child(even) td{background:#f4f7fe}
tbody tr:hover td{background:var(--verde-2)}
td.c-inicial{color:var(--c-inicial);font-weight:700}
td.vacio{color:#c2cad6;font-weight:400}

/* ---------- Buscador jerárquico ---------- */
.buscador{position:relative;margin:6px 0 10px}
.buscador input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--linea);border-radius:9px;
  font-family:var(--sans);font-size:13px;color:var(--tinta);background:#fff no-repeat left 10px center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238190a5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E")}
.buscador input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,106,87,.15)}
.bresultados{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:340px;overflow-y:auto;
  background:#fff;border:1px solid var(--linea);border-radius:10px;box-shadow:var(--sombra)}
.bgrupo{position:sticky;top:0;z-index:1;background:linear-gradient(100deg,var(--brand-dark),var(--brand));color:#fff;
  font-weight:800;font-size:11px;letter-spacing:.3px;padding:7px 12px;text-transform:uppercase}
.bitem{position:relative;display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;
  padding:8px 56px 8px 12px;font:inherit;border-bottom:1px solid var(--fondo)}
.bitem:last-child{border-bottom:none}
.bitem:hover,.bitem.activo{background:var(--verde-2)}
.bcrumb{display:block;font-size:10px;color:var(--gris);font-weight:600;margin-bottom:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bnom{display:block;font-size:12.5px;color:var(--tinta);font-weight:600;line-height:1.3}
.bnom mark{background:rgba(235,99,51,.22);color:inherit;border-radius:3px;padding:0 1px}
.bniv{position:absolute;right:10px;top:8px;font-size:9px;color:var(--gris);font-weight:700;
  text-transform:uppercase;letter-spacing:.4px}
.bvacio{padding:12px;color:var(--gris);font-size:12.5px;font-style:italic}