/* ===================== Network Intelligence · tablero ===================== */
:root{
  --ok:#12A150; --warn:#E8A317; --bad:#E5484D;
  --navy:#08121A; --navy-2:#0F1E2A; --navy-3:#1B2E3D;
}

/* --- selector de marca --- */
.sect{
  margin:52px 0 18px;font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:760px}
.brand{
  display:flex;flex-direction:column;gap:7px;padding:24px 26px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
a.brand:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 14px 34px rgba(11,13,15,.10)}
.brand-name{font-size:22px;font-weight:600;letter-spacing:-.02em}
.brand-meta{font-size:13px;color:var(--ink-2)}
.brand-state{
  margin-top:8px;align-self:flex-start;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  padding:5px 10px;border:1px solid var(--line);border-radius:100px;
}
.brand-state.on{color:var(--ok);border-color:rgba(18,161,80,.35);background:rgba(18,161,80,.07)}
.brand.off{opacity:.5}
.brand.off .brand-name{color:var(--ink-2)}

/* --- cabecera --- */
.dash{max-width:1320px}
.dhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dhead h1{margin:0}
.demo{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A6D1F;
  background:rgba(232,163,23,.12);border:1px solid rgba(232,163,23,.35);
  padding:6px 12px;border-radius:100px;white-space:nowrap;
}

/* --- KPIs --- */
.kpis{
  display:grid;gap:12px;margin:30px 0 20px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.kpi{
  display:flex;flex-direction:column;gap:5px;padding:18px 20px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
}
.kpi.big{grid-column:span 2;min-width:240px}
.k-l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.k-v{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.k-v i{font-style:normal;font-size:19px;color:var(--ink-3);margin-left:2px}
.k-v.ok{color:var(--ok)} .k-v.warn{color:var(--warn)} .k-v.bad{color:var(--bad)}
.k-s{font-size:11px;color:var(--ink-3)}
.bar{display:block;height:5px;border-radius:100px;background:rgba(11,13,15,.10);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--ink);border-radius:100px}

/* --- grilla mapa + panel --- */
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}


.mapcard{
  background:var(--navy);border:1px solid var(--navy-3);border-radius:16px;
  padding:20px 20px 10px;overflow:hidden;position:relative;
}
.mapcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 46% at 50% 0%,rgba(72,150,205,.18),transparent 70%);
}
.maptop{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8D9BC4;
  position:relative;z-index:1;margin-bottom:6px;
}
.legend{display:inline-flex;align-items:center;gap:7px;color:#8D9BC4}
.legend .cdot{margin-left:8px}

.mapcard{position:relative}
.peru{display:block;width:100%;height:auto;max-height:80vh;margin-inline:auto;position:relative;z-index:1}
.peru .dep{stroke-width:.9;transition:fill .28s var(--ease),stroke .28s var(--ease)}

/* Sin red: se aplanan casi al fondo, para que la presencia sea lo unico que resalte */
.peru .dep.vacio{fill:#0A1620;stroke:#132330;pointer-events:none}

/* Con red: se pintan segun el estado de sus concesionarios */
.peru .dep.con{cursor:pointer}
.peru .dep.con{stroke-width:1.4;filter:url(#brillo)}
.peru .dep.con.alto   {fill:rgba(44,195,107,.42);stroke:rgba(90,225,145,.95);color:#2CC36B}
.peru .dep.con.medio  {fill:rgba(232,163,23,.42);stroke:rgba(255,193,74,.95);color:#E8A317}
.peru .dep.con.critico{fill:rgba(255,90,95,.38); stroke:rgba(255,130,134,.95);color:#FF5A5F}
.peru .dep.con:hover  {stroke-width:2.4}
.peru .dep.con.alto:hover   {fill:rgba(44,195,107,.62)}
.peru .dep.con.medio:hover  {fill:rgba(232,163,23,.62)}
.peru .dep.con.critico:hover{fill:rgba(255,90,95,.58)}
.peru .dep.con.sel{stroke:#fff;stroke-width:2.6}
.peru .dep.con.alto.sel   {fill:rgba(44,195,107,.70)}
.peru .dep.con.medio.sel  {fill:rgba(232,163,23,.70)}
.peru .dep.con.critico.sel{fill:rgba(255,90,95,.66)}
.peru .dep.con:focus{outline:none;stroke:#fff;stroke-width:2}

.pin{cursor:pointer}
.pin .halo{fill:currentColor;opacity:.13}
.pin .dot{fill:currentColor;stroke:var(--navy);stroke-width:2}

.pin .lbl{
  fill:#AFC4D4;font-size:13px;font-weight:500;paint-order:stroke;
  stroke:var(--navy);stroke-width:3.5;stroke-linejoin:round;pointer-events:none;
}
.pin .lbl.end{text-anchor:end}
.pin .leader{stroke:currentColor;stroke-width:1.4;opacity:.45}
.pin.alto{color:#2CC36B} .pin.medio{color:var(--warn)} .pin.critico{color:#FF5A5F}
.pin:hover .halo,.pin.sel .halo{opacity:.3}
.pin.sel .dot{stroke:#fff;stroke-width:2.5}
.pin.critico .halo{animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.13}50%{opacity:.34}}
/* el anillo del navegador desentona sobre el mapa: lo marco en el propio punto */
.pin:focus{outline:none}
.pin:focus-visible .dot{stroke:#fff;stroke-width:3}
.pin:focus-visible .halo{opacity:.34}

/* --- panel lateral --- */
.side{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.p-eyebrow{margin:0 0 6px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.panel h2{margin:0;font-size:26px;font-weight:600;letter-spacing:-.025em}
.p-sub{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.score{display:flex;align-items:baseline;gap:9px;margin:18px 0 6px}
.score span:first-child{font-size:42px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.p-lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cats{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.cat{display:grid;grid-template-columns:104px 1fr 40px;align-items:center;gap:10px}
.cat-n{font-size:12px;color:var(--ink-2)}
.cat-b{height:6px;border-radius:100px;background:rgba(11,13,15,.09);overflow:hidden}
.cat-b i{display:block;height:100%;border-radius:100px}
.cat-b i.alto{background:var(--ok)} .cat-b i.medio{background:var(--warn)} .cat-b i.critico{background:var(--bad)}
.cat-v{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.p-hint{margin:18px 0 0;font-size:11.5px;color:var(--ink-3)}

/* --- lista de ciudades --- */
.citylist{
  background:var(--bg-2);border:1px solid var(--line);border-radius:16px;
  padding:6px;max-height:340px;overflow:auto;
}
.crow{
  width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;
  padding:9px 12px;background:none;border:0;border-radius:9px;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
}
.crow:hover{background:rgba(11,13,15,.045)}
.crow.sel{background:rgba(11,13,15,.075)}
.cname{font-size:13px}
.cpts{font-size:11.5px;color:var(--ink-3)}
.cpct{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.cdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.cdot.alto{background:var(--ok)} .cdot.medio{background:var(--warn)} .cdot.critico{background:var(--bad)}

/* ===================== datos reales · niveles y hallazgos ===================== */
.brand-meta2{font-size:11.5px;color:var(--ink-3)}
.dsub{margin:8px 0 0;max-width:64ch;font-size:13px;color:var(--ink-2);line-height:1.6}
.real{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#0E7A3C;
  background:rgba(18,161,80,.10);border:1px solid rgba(18,161,80,.32);
  padding:6px 12px;border-radius:100px;white-space:nowrap;
}
.pback{
  background:none;border:0;padding:0;margin:0 0 12px;cursor:pointer;font:inherit;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.pback:hover{color:var(--ink)}
.p-rec{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.score{align-items:baseline}
.cat{grid-template-columns:96px 1fr 42px}
.cat-n{font-size:11.5px}

.sub-h{margin:20px 0 8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.drow{
  width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:8px 10px;background:none;border:0;border-radius:8px;cursor:pointer;font:inherit;
  color:inherit;text-align:left;
}
.drow:hover{background:rgba(11,13,15,.05)}
.dname{font-size:12.5px}
.dpct{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}

/* --- tabla de hallazgos --- */
.hallazgos{
  margin-top:16px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:16px;padding:22px 24px;
}
.hhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.hhead h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.hmeta{font-size:11.5px;color:var(--ink-3)}
.hempty{margin:0;font-size:13px;color:var(--ink-2);max-width:70ch;line-height:1.6}
.hempty b{color:var(--ink)}
.htab{width:100%;border-collapse:collapse;font-size:12.5px;display:block;overflow-x:auto}
.htab thead th{
  text-align:left;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0 12px 9px 0;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.htab td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.htab tr.n0 td.nota{color:var(--bad);font-weight:600}
.htab tr.n5 td.nota{color:var(--warn);font-weight:600}
.htab .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--ink);white-space:nowrap}
.htab .qq{min-width:320px;max-width:520px;color:var(--ink)}
.htab .resp{white-space:nowrap;font-size:11.5px}
.htab .nota{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{
  display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:100px;white-space:nowrap;
}
.tag.man{color:#8A2A2E;background:rgba(229,72,77,.10);border:1px solid rgba(229,72,77,.28)}
.tag.rec{color:var(--ink-3);background:rgba(11,13,15,.05);border:1px solid var(--line)}

.ficha{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 16px;
  background:var(--ink);color:#fff;border-radius:10px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  transition:opacity .2s var(--ease);
}
.ficha:hover{opacity:.85}

/* ===================== calidad del dato ===================== */
.calidad{margin-top:16px;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.cal-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cal-h h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.cal-tag{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A2A2E;
  background:rgba(229,72,77,.10);border:1px solid rgba(229,72,77,.30);
  padding:5px 11px;border-radius:100px;
}
.cal-sub{margin:8px 0 0;font-size:13px;color:var(--ink-2);max-width:76ch;line-height:1.6}
.cal-sub code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:rgba(11,13,15,.05);padding:2px 6px;border-radius:5px;color:var(--ink)}
/* min-width:0 para que el <pre> con la fórmula pueda scrollear adentro
   en vez de estirar la tarjeta y desbordar la página. */
.cal-i{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.cal-i > div{min-width:0}
.cal-n{font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:3px}
.cal-i h3{margin:0 0 7px;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.cal-i p{margin:0 0 8px;font-size:13px;color:var(--ink-2);line-height:1.6;max-width:78ch}
.cal-i b{color:var(--ink);font-weight:600}
.cal-f{
  margin:10px 0 12px;padding:12px 14px;border-radius:9px;overflow-x:auto;
  background:var(--navy);color:#B9C4E4;border:1px solid var(--navy-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
}
.cal-f b{color:#FF7A7E;font-weight:700}
.cal-r{padding:11px 14px;border-radius:9px;background:rgba(232,163,23,.09);
  border:1px solid rgba(232,163,23,.28)}
.cal-r s{color:var(--ink-3)}
.cal-hip{display:block;margin-top:7px;font-size:12px;color:var(--ink-3);font-style:italic}
.dname .warn{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;margin-left:6px;font-style:normal;
  font-size:9.5px;font-weight:700;color:#fff;background:var(--warn);cursor:help;vertical-align:1px;
}

/* ===================== sesión y login ===================== */
.sesion{display:flex;align-items:center;gap:12px;margin-left:20px}
.s-u{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.s-u b{font-size:12.5px;font-weight:600}
.s-u i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.s-b{
  font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2);
  transition:all .2s var(--ease);
}
.s-b:hover{border-color:var(--ink);color:var(--ink)}
.lg-back{position:fixed;inset:0;background:rgba(11,13,15,.45);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:24px;backdrop-filter:blur(3px)}
.lg-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:30px 32px;
  width:100%;max-width:380px;box-shadow:0 24px 60px rgba(11,13,15,.22)}
.lg-card h2{margin:0 0 20px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.lg-card label{display:block;margin-bottom:14px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.lg-card input{display:block;width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-size:14px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);text-transform:none;letter-spacing:0}
.lg-card input:focus{outline:none;border-color:var(--ink)}
.lg-err{margin:0 0 12px;font-size:12.5px;color:var(--bad)}
.lg-acc{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.lg-acc button{font:inherit;font-size:12.5px;padding:9px 18px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2)}
.lg-acc button[type=submit]{background:var(--ink);border-color:var(--ink);color:#fff}
.lg-acc button:hover{border-color:var(--ink)}

/* ===================== extras del tablero conectado ===================== */
.dhead-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kpi.aviso{background:rgba(232,163,23,.08);border-color:rgba(232,163,23,.32)}
.kpi.aviso .k-l{color:#8A6D1F}
.kpi.aviso .k-s{line-height:1.5}
.base{
  display:inline-block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:100px;margin-left:8px;vertical-align:2px;font-weight:600;
}
.base.dato{color:#0E7A3C;background:rgba(18,161,80,.10);border:1px solid rgba(18,161,80,.30)}
.base.inferencia{color:#8A6D1F;background:rgba(232,163,23,.12);border:1px solid rgba(232,163,23,.32)}
.cal-src{margin:8px 0 0!important;font-size:11.5px;color:var(--ink-3);font-style:italic}
.dname .agg{
  font-style:normal;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:100px;margin-left:7px;color:var(--ink-3);
  background:rgba(11,13,15,.05);border:1px solid var(--line);cursor:help;
}
a.drow{text-decoration:none}
.fallo{
  margin:0 0 20px;padding:14px 18px;border-radius:12px;font-size:13.5px;
  background:rgba(229,72,77,.08);border:1px solid rgba(229,72,77,.30);color:#8A2A2E;
}
.fallo code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.kpi.umbral{position:relative}
.k-v.peq{font-size:23px}
.k-edit{
  position:absolute;top:12px;right:12px;font:inherit;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:7px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink-3);
}
.k-edit:hover{border-color:var(--ink);color:var(--ink)}
.lg-card.umb{max-width:440px}
.umb-p{margin:-8px 0 18px;font-size:13px;color:var(--ink-2);line-height:1.55}
.umb-p b{color:var(--ink);font-weight:600}
.lg-card textarea{
  display:block;width:100%;margin-top:6px;padding:10px 12px;font:inherit;font-size:13.5px;
  border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);
  text-transform:none;letter-spacing:0;resize:vertical;
}
.lg-card textarea:focus{outline:none;border-color:var(--ink)}

/* ═════════════ pulso de red en el home (solo con sesión) ═════════════ */
.vivo{width:100%;display:flex;justify-content:center;margin-top:4px}
.v-in{
  display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;
  padding:13px 22px;border-radius:100px;background:var(--bg-2);
  border:1px solid var(--line);transition:all .28s var(--ease);
}
.v-in:hover{border-color:var(--line-2);box-shadow:0 8px 26px rgba(15,21,24,.08)}
.v-l{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ok);
  display:inline-flex;align-items:center;gap:7px;
}
.v-l::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(18,161,80,.18)}
.v-d{font-size:13px;color:var(--ink-3)}
.v-d b{font-family:var(--disp);font-weight:600;font-size:16px;color:var(--ink);
  margin-right:5px;font-variant-numeric:tabular-nums}
.v-go{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}


/* ═════════════ movimiento de entrada ═════════════
   Los bloques ya están en su lugar cuando carga la página; solo se asientan.
   Nada arranca invisible esperando un scroll. */
@keyframes asentar{from{opacity:.001;transform:translateY(9px)}to{opacity:1;transform:none}}
.kpis .kpi{animation:asentar .5s var(--ease) backwards}
.kpis .kpi:nth-child(1){animation-delay:.02s}
.kpis .kpi:nth-child(2){animation-delay:.06s}
.kpis .kpi:nth-child(3){animation-delay:.10s}
.kpis .kpi:nth-child(4){animation-delay:.14s}
.kpis .kpi:nth-child(5){animation-delay:.18s}
.kpis .kpi:nth-child(6){animation-delay:.22s}
.kpis .kpi:nth-child(7){animation-delay:.26s}
.mapcard,.side{animation:asentar .6s var(--ease) .12s backwards}
.evo,.proc,.calidad{animation:asentar .5s var(--ease) .08s backwards}
.bar i,.pr-bar i,.cat-b i{transition:width .7s var(--ease)}
.slope .sl line{stroke-dasharray:1000;animation:trazo .9s var(--ease) .25s backwards}
@keyframes trazo{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
.slope .sl circle,.slope text{animation:asentar .5s var(--ease) .55s backwards}


/* Jerarquía: el número que importa manda sobre el resto */
.kpi.big .k-v{font-size:40px}
.kpi.big{background:linear-gradient(180deg,var(--bg-2),var(--bg-3))}

/* Dos filas de KPI en vez de un grid automático que se acomoda en escalera. */
.kpis.dos{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px}
.kpis.seis{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:0}
.kpis.seis .kpi{padding:15px 17px}
.kpis.seis .k-v{font-size:26px}


/* En la fila de dos, cada tarjeta ocupa una columna (la regla span 2 es del grid automático viejo) */
.kpis.dos .kpi.big{grid-column:auto;min-width:0}


/* ═════════════ tooltip del mapa ═════════════ */
.mtip{
  position:absolute;z-index:4;pointer-events:none;min-width:170px;max-width:250px;
  padding:11px 13px;border-radius:11px;
  background:rgba(8,18,26,.96);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:3px;
}
.mtip[hidden]{display:none}   /* display:flex le gana a [hidden] si no se dice esto */
.mtip b{font-family:var(--disp);font-size:14px;font-weight:600;color:#EAF1F6;letter-spacing:-.01em}
.mtip .mt-n{font-size:11.5px;color:#8DA0B0}
.mtip .mt-p{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.mtip .mt-p.alto{color:#2CC36B} .mtip .mt-p.medio{color:#E8A317} .mtip .mt-p.critico{color:#FF5A5F}
.mtip .mt-l{margin-top:4px;padding-top:6px;border-top:1px solid rgba(255,255,255,.10);
  font-size:11px;color:#7C8FA0;line-height:1.45}

/* Los criticos laten para que la vista vaya ahi primero */
@keyframes latir{0%,100%{opacity:.86}50%{opacity:1}}
.peru .dep.con.critico{animation:latir 3.2s var(--ease) infinite}
.peru .dep.con.critico:hover,.peru .dep.con.critico.sel{animation:none}

/* La lista de ciudades es el camino de teclado del mapa: el foco tiene que verse bien. */
.crow:focus-visible,.drow:focus-visible{
  outline:2px solid var(--ink);outline-offset:-2px;border-radius:9px;background:rgba(15,21,24,.05);
}
.peru .dep.con{outline:none}

/* ═════════════ reconciliación de totales ═════════════ */
.recon{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.rtab{width:100%;border-collapse:collapse;font-size:12.5px;display:block;overflow-x:auto}
.rtab th{text-align:left;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0 14px 8px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.rtab td{padding:9px 14px 9px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.rtab .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rtab tr.mal td{color:var(--ink)}
.rtab tr.mal .dif{color:var(--bad);font-weight:700}
.rtab tr.ok .dif{color:var(--ink-3)}
.rtab .r-ciu{color:var(--ink-3);font-size:11px;margin-left:6px}
.nota-rel{
  grid-column:1/-1;margin-top:2px;padding:13px 16px;border-radius:11px;font-size:12.5px;
  line-height:1.6;color:var(--ink-2);background:rgba(232,163,23,.07);
  border:1px solid rgba(232,163,23,.26);
}
.nota-rel b{color:var(--ink)}
.dlt{font-style:normal;font-size:10.5px;margin-left:6px;font-weight:600}
.dlt.up{color:var(--ok)} .dlt.dn{color:var(--bad)}

/* ═════════════ pantalla de acceso ═════════════ */
.acceso{
  max-width:520px;margin:80px auto;padding:40px 42px;text-align:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:18px;
}
.ac-eyebrow{margin:0 0 14px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.acceso h1{margin:0 0 14px;font-size:clamp(22px,3.4vw,30px);letter-spacing:-.025em;line-height:1.15}
.ac-p{margin:0 0 26px;font-size:14px;color:var(--ink-2);line-height:1.65;text-wrap:pretty}
.acceso .btn{width:auto;padding-inline:32px}
.ac-vol{margin:22px 0 0;font-size:12.5px}
.ac-vol a{color:var(--ink-3)}
.ac-vol a:hover{color:var(--ink);text-decoration:underline}


/* Sede: direccion oficial de la red Hyundai (hyundai.pe) */
.sede{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:.5rem 0 0;
  font:400 .82rem/1.45 var(--font);color:var(--ink-3)}
.sede-l{font:600 .62rem/1 var(--font);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:2px;padding:.22rem .38rem}
.sede i{color:var(--ink-3);font-style:normal}
.sede-t{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.sede-t:hover{border-bottom-color:var(--accent)}
/* Distrito en la lista de una ciudad: distingue las 8 sedes de Lima entre si */
.dloc{font:500 .68rem/1 var(--font);font-style:normal;color:var(--ink-3);
  letter-spacing:.02em;white-space:nowrap}
/* Enlace al mapa de cobertura desde la cabecera de la red */
.cbtn{display:inline-flex;align-items:center;padding:.42rem .7rem;border-radius:8px;
  border:1px solid var(--line-2);background:var(--bg-2);color:var(--accent);
  font:500 .76rem/1 var(--font);text-decoration:none;white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease)}
.cbtn:hover{background:var(--accent-soft);border-color:var(--accent)}
/* Cuatro KPIs en una fila: sin esto el grid los deja de anchos distintos. */
.kpis.cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpis.cuatro .kpi.big{grid-column:auto;min-width:0}
@media (max-width:1000px){.kpis.cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kpis.cuatro{grid-template-columns:1fr}}