/* ==========================================================================
   HOLOGRAM UI · v3 · tratamiento VIDEO  ·  24 sep 2026
   Capa de identidad de Hologram Brain. Va SIEMPRE después de hologram.css
   (que sigue trayendo la retícula, los componentes y la impresión) y después
   de motor/motor.css. No sustituye la retícula: la pone sobre fondo
   negro-violeta.
   Mientras el kit ~/Desktop/Hologram/hologram-ui/ no se actualice a v3, este
   archivo es la referencia: los tokens de abajo son la identidad.
   Reglas: móvil primero, sin hover, sin librerías, un solo archivo.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --hg-fondo:#07070F;
  --hg-fondo-2:#12101E;                      /* superficie de tarjeta */
  --hg-fondo-3:rgba(18,16,30,.85);           /* tarjeta translúcida */
  --hg-linea:rgba(155,107,255,.20);
  --hg-linea-fuerte:rgba(155,107,255,.45);
  --hg-realce:rgba(155,107,255,.10);
  --hg-texto:#FFFFFF;
  --hg-texto-1:rgba(255,255,255,.92);
  --hg-texto-2:rgba(255,255,255,.78);
  --hg-texto-3:rgba(255,255,255,.55);
  --hg-azul:#9B6BFF;                         /* el acento (nombre heredado) */
  --hg-acento:#9B6BFF;
  --hg-violeta:#9B6BFF;
  --hg-lavanda:#C4B5FD;
  --hg-marca:#7C3AED;
  --hg-p1:#7CF2B0;                           /* verde  */
  --hg-p2:#38D9E0;                           /* cian   */
  --hg-p3:#F5B84B;                           /* ámbar  */
  --hg-p4:#F0708A;                           /* rojo   */
  --hg-cian:#38D9E0;
  --hg-radio:20px;
  --hg-radio-s:12px;
  --hg-glow:0 0 28px rgba(124,58,237,.18);
  --hg-barra:rgba(7,7,15,.97);              /* cabecera y barras pegadas */
  --hg-f:"Poppins",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  /* regiones · las ocho del levantamiento, en la familia del video */
  --hg-reg-noroeste:#38D9E0;
  --hg-reg-noreste:#7CF2B0;
  --hg-reg-occidente:#F5B84B;
  --hg-reg-centro-norte:#FF9B5C;
  --hg-reg-centro-sur:#9B6BFF;
  --hg-reg-oriente:#C4B5FD;
  --hg-reg-suroeste:#F0708A;
  --hg-reg-sureste:#E4DC8A;
}

/* Campo, Talleres, impreso y PDF: la misma identidad en claro. */
[data-densidad="claro"]{
  --hg-fondo:#FFFFFF;
  --hg-fondo-2:#F6F4FC;
  --hg-fondo-3:#FFFFFF;
  --hg-linea:rgba(11,6,24,.16);
  --hg-linea-fuerte:rgba(109,63,212,.45);
  --hg-realce:rgba(109,63,212,.05);
  --hg-texto:#0B0618;
  --hg-texto-1:rgba(11,6,24,.88);
  --hg-texto-2:rgba(11,6,24,.68);
  --hg-texto-3:rgba(11,6,24,.45);
  --hg-azul:#6D3FD4; --hg-acento:#6D3FD4; --hg-violeta:#6D3FD4; --hg-lavanda:#7C5BD0;
  --hg-marca:#6D3FD4;
  --hg-p1:#0F7A52; --hg-p2:#0E7C93; --hg-p3:#9A6A05; --hg-p4:#C42B36;
  --hg-glow:none;
  --hg-barra:rgba(255,255,255,.97);
  --hg-reg-noroeste:#0E7C93; --hg-reg-noreste:#0F7A52; --hg-reg-occidente:#9A6A05;
  --hg-reg-centro-norte:#B35A22; --hg-reg-centro-sur:#6D3FD4; --hg-reg-oriente:#7C5BD0;
  --hg-reg-suroeste:#C42B36; --hg-reg-sureste:#8A7A05;
}
[data-densidad="claro"] body::before,[data-densidad="claro"] .hg-arcos{display:none}

/* ---------- 2. FONDO · degradado violeta + dos arcos ----------
   Capa fija detrás de todo. No intercepta toques y no genera scroll. */
body{background:var(--hg-fondo)}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 88% 6%,rgba(124,58,237,.22),transparent 60%),
    radial-gradient(800px 500px at 4% 96%,rgba(124,58,237,.16),transparent 60%);
}
.hg-arcos{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.hg-arcos i{
  position:absolute; display:block; border-radius:50%;
  border:2px solid rgba(155,107,255,.38);
  box-shadow:0 0 30px rgba(124,58,237,.35), inset 0 0 30px rgba(124,58,237,.14);
}
.hg-arcos i:nth-child(1){width:900px; height:900px; right:-520px; top:-560px}
.hg-arcos i:nth-child(2){width:700px; height:700px; left:-430px; bottom:-460px; border-color:rgba(155,107,255,.26)}
@media(max-width:760px){
  .hg-arcos i:nth-child(1){width:520px; height:520px; right:-300px; top:-320px}
  .hg-arcos i:nth-child(2){width:420px; height:420px; left:-260px; bottom:-280px}
}
.app{background:transparent}
.cab,.nav,.pest,.mctl,.filtros{background:var(--hg-barra); backdrop-filter:blur(14px)}

/* ---------- 3. TIPOGRAFÍA · Poppins, sin el salto 200/800 ----------
   El video usa 300/400/600/700. Se remapean los extremos de la v2. */
h1,h2,h3,h4{font-weight:700; letter-spacing:-.02em}
.hg-pesada,.hg-cifra,.h1,.hall-t,.sig b,.fila b,.lug-c b,.preg .q,.lec>b,
.mini .c,.preg .r .c,.rep-h2,.varreg .p b,.capas2 h3,.vemos h3 b,.interna b,
.hg-sis b,.hg-insight__q,.jj-fcab b,.rep-cifra b,.rep-ficha-t b,.barra .v,
.fila .n,.tab2 div span:last-child,.chip b,.drill td:first-child a{font-weight:700}
.hg-fina,.hg-titulo,.h1 small,.vemos h3{font-weight:300; letter-spacing:.20em}
.hg-cifra{letter-spacing:-.035em}
.hg-pesada{letter-spacing:-.025em}
.lead,.hall-l,.rep-txt,.hg-cuerpo,.portada p{font-weight:300}

/* Eyebrow: mayúsculas violeta, .22em — la firma del video */
.hg-et,.drill-n{color:var(--hg-violeta); font-weight:600; letter-spacing:.22em}
.hg-et--tenue{color:var(--hg-texto-3)}

/* Remate en lavanda: la frase que cierra un hallazgo */
.hall-l b,.res-t b,.hg-insight__p b{color:var(--hg-lavanda); font-weight:600}

/* Glow bajo el titular de capítulo */
.tit{position:relative}
.tit .n{color:var(--hg-violeta)}

/* ---------- 4. SUPERFICIES · tarjeta del video ---------- */
.res-caso,.hg-insight,.interna,.jj-ficha,.int-frase>div,.hg-sis,
.mapa,.lecs,.hall-p,.bus{
  border-radius:var(--hg-radio);
}
.res-caso,.hg-insight,.jj-ficha,.int-frase>div{
  background:var(--hg-fondo-3);
  border:1.5px solid rgba(155,107,255,.45);
  box-shadow:var(--hg-glow);
}
.lec{border-radius:0 var(--hg-radio-s) var(--hg-radio-s) 0}
.mapa{overflow:hidden; border:1px solid var(--hg-linea-fuerte); background:#0C0A18}
.mapa .tarjeta,.mapa .pista{background:rgba(18,16,30,.94); border:1px solid rgba(155,107,255,.45); border-radius:var(--hg-radio-s)}
.mapa .ctl button{background:rgba(18,16,30,.9); border:1px solid rgba(155,107,255,.45); border-radius:10px}
.mapa .ctl button:first-child{border-radius:10px 10px 0 0}
.mapa .ctl button:last-child{border-radius:0 0 10px 10px}
.hall-p{background:rgba(155,107,255,.07); border-left:2px solid var(--hg-violeta); border-radius:0 var(--hg-radio-s) var(--hg-radio-s) 0}
.hall-p b{color:var(--hg-lavanda)}
.hg-btn{border-radius:999px; border-color:var(--hg-linea-fuerte)}
.hg-btn--1{background:var(--hg-violeta); border-color:var(--hg-violeta); color:#0B0618}
.chip,.firm,.mlec,.tag{border-radius:999px}
.sel{border-radius:999px; overflow:hidden}
.sel button[aria-pressed="true"]{background:var(--hg-violeta); color:#0B0618}
.interna{border:1px dashed var(--hg-linea-fuerte)}
select option,.mctl select option,.exp-cols select option,.exp-g select option{background:#12101E; color:#fff}

/* ---------- 5. CIFRAS Y BARRAS ---------- */
.kpis .hg-cifra{color:var(--hg-texto)}
.barra .p{background:rgba(255,255,255,.09); border-radius:999px; overflow:hidden}
.barra .p i{background:var(--hg-texto-3)}
.barra .p i.az{background:var(--hg-violeta)}
.barra .p i.bl{background:var(--hg-lavanda)}
.drill td .b,.exp-t td.v .b,.jj-bar{border-radius:999px; overflow:hidden}
.drill td .b i.az{background:var(--hg-violeta)}
.drill td .b i.am{background:var(--hg-p3)}
.drill td.op-pos{color:var(--hg-lavanda)}
.drill td.op-neg{color:var(--hg-p3)}
.cargando::before{background:var(--hg-violeta); border-radius:50%}

/* ---------- 6. GRÁFICAS · el tratamiento que pidió el brief ----------
   Tercios: lavanda (mejor) · ámbar (medio) · rojo (peor). */
.hall-g svg,.gr{font-family:var(--hg-f)}
.gr text{fill:var(--hg-texto-2)}
.gr .et{font-weight:600}
.gr .val{fill:var(--hg-texto-3)}
.gr .tick{fill:var(--hg-texto-3)}
.gr .eje{stroke:rgba(155,107,255,.45)}
.gr .malla{stroke:rgba(155,107,255,.14)}
.gr .ref{stroke:var(--hg-p3); stroke-dasharray:3 3}
.gr rect{rx:3}
.gdiv .mas{fill:var(--hg-violeta)}
.gdiv .menos{fill:var(--hg-p3)}
.gban .banda{fill:var(--hg-violeta); opacity:.45}
.gban .med{fill:var(--hg-lavanda)}
.gpar .a{fill:rgba(255,255,255,.28)}
.gpar .b{fill:var(--hg-violeta)}
.gtres .peor{fill:var(--hg-p4)}
.gtres .normal{fill:var(--hg-p3)}
.gtres .mejor{fill:var(--hg-lavanda)}
.gtira .pt{fill:var(--hg-violeta); opacity:.6}
.gtira .med{fill:var(--hg-lavanda)}
.gmix .seg{fill:var(--hg-violeta)}
.gmix .et--mia{fill:var(--hg-lavanda)}
.gr .val--in{fill:#0B0618}
.gr .val--inw{fill:#fff}

/* Dispersión: color por región, borde blanco = marcado, tamaño = competencia */
.gdisp .pt{opacity:.75}
.gdisp .pt--marca{stroke:#fff; stroke-width:1.4}
.gdisp .ejeq{stroke:rgba(155,107,255,.30); stroke-dasharray:2 4}
.gdisp .ajuste{stroke:var(--hg-lavanda); stroke-width:1.5; stroke-dasharray:6 4; fill:none}

/* Mapa de correlación y terciles */
.gcorr .celda{stroke:#07070F; stroke-width:1}
.gterc .seg{stroke:#07070F; stroke-width:1}

/* ---------- 7. REGIONES ---------- */
.reg-noroeste{--c:var(--hg-reg-noroeste)}
.reg-noreste{--c:var(--hg-reg-noreste)}
.reg-occidente{--c:var(--hg-reg-occidente)}
.reg-centro-norte{--c:var(--hg-reg-centro-norte)}
.reg-centro-sur{--c:var(--hg-reg-centro-sur)}
.reg-oriente{--c:var(--hg-reg-oriente)}
.reg-suroeste{--c:var(--hg-reg-suroeste)}
.reg-sureste{--c:var(--hg-reg-sureste)}
.reg-pt{width:9px; height:9px; flex:none; display:inline-block; background:var(--c); border-radius:50%; vertical-align:-1px}

/* ---------- 8. NAVEGACIÓN ---------- */
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--hg-violeta)}
.nav a i,.portada .caps a i,.sig i,.fam-lista .pleg summary .n{color:var(--hg-violeta)}
.pest button[aria-selected="true"]{border-bottom-color:var(--hg-violeta)}
.pasos a.act{box-shadow:inset 0 -2px 0 var(--hg-violeta)}
.filtros button[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--hg-violeta)}
.hg-acordeon > summary::after{color:var(--hg-violeta)}
.fila.visitada b{color:var(--hg-lavanda)}
a{color:var(--hg-lavanda)}

/* ---------- 9. INSIGHTS AUTOMÁTICOS ---------- */
.ins{display:grid; gap:0; border-top:1px solid var(--hg-linea-fuerte); margin-top:16px}
.ins-i{padding:18px 0; border-bottom:1px solid var(--hg-linea); display:grid; gap:8px}
.ins-i .hg-et{font-size:10px}
.ins-i b{font-weight:700; font-size:clamp(16px,2.2vw,20px); letter-spacing:-.02em; line-height:1.25; text-wrap:balance}
.ins-i p{font-size:13.5px; font-weight:300; line-height:1.55; color:var(--hg-texto-2); max-width:78ch}
.ins-i p em{font-style:normal; color:var(--hg-lavanda); font-weight:600}
.ins-i .f{font-size:11px; color:var(--hg-texto-3); letter-spacing:.02em}
.ins-cifras{display:flex; gap:22px; flex-wrap:wrap; margin-top:2px}
.ins-cifras>span{display:grid; gap:2px}
.ins-cifras b{font-size:26px; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.ins-cifras small{font-size:11px; color:var(--hg-texto-3); line-height:1.3}
.ins-tabla{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:10px}
.ins-tabla th{text-align:right; font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hg-texto-3); padding:9px 8px; border-bottom:1px solid var(--hg-linea-fuerte); white-space:nowrap}
.ins-tabla th:first-child{text-align:left}
.ins-tabla td{padding:9px 8px; border-bottom:1px solid var(--hg-linea); text-align:right;
  font-variant-numeric:tabular-nums; color:var(--hg-texto-2); white-space:nowrap}
.ins-tabla td:first-child{text-align:left; color:var(--hg-texto); font-weight:600; white-space:normal}
.ins-tabla .con-pt{display:inline-flex; align-items:center; gap:8px}
.ins-tabla-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.ins-vacio{display:none}
@media(max-width:760px){
  .ins-tabla th,.ins-i .hg-et{font-size:11px}   /* piso de 11 px en móvil, como el resto de la plataforma */
  .ins-i b{font-size:16px}
  .ins-cifras{gap:16px}
  .ins-cifras b{font-size:22px}
  .ins-i p,.ins-tabla{font-size:12.5px}
  .ins-i .f,.ins-cifras small{font-size:11px}
}

/* ---------- 10. IMPRESO · el A3 y el PDF conservan el fondo ---------- */
@media print{
  :root{
    --hg-fondo:#FFFFFF; --hg-fondo-2:#FFFFFF; --hg-fondo-3:#FFFFFF;
    --hg-linea:rgba(11,6,24,.22); --hg-linea-fuerte:rgba(109,63,212,.5); --hg-realce:transparent;
    --hg-texto:#0B0618; --hg-texto-1:rgba(11,6,24,.9);
    --hg-texto-2:rgba(11,6,24,.72); --hg-texto-3:rgba(11,6,24,.48);
    --hg-azul:#6D3FD4; --hg-acento:#6D3FD4; --hg-violeta:#6D3FD4; --hg-lavanda:#5B3AA8;
    --hg-glow:none;
    --hg-p1:#0F7A52; --hg-p2:#0E7C93; --hg-p3:#8A5E04; --hg-p4:#B02531;
    --hg-barra:#fff;
    --hg-reg-noroeste:#0E7C93; --hg-reg-noreste:#0F7A52; --hg-reg-occidente:#8A5E04;
    --hg-reg-centro-norte:#B35A22; --hg-reg-centro-sur:#6D3FD4; --hg-reg-oriente:#7C5BD0;
    --hg-reg-suroeste:#B02531; --hg-reg-sureste:#8A7A05;
  }
  body{background:#fff; color:#0B0618}
  body::before,.hg-arcos{display:none}
  .res-caso,.hg-insight,.jj-ficha,.int-frase>div{box-shadow:none}
  .lec{border-left-color:var(--hg-violeta)}
  .lec[data-d="menos"]{border-left-color:var(--hg-p3)}
  .mlec[data-b="1"]{border-color:var(--hg-violeta)}
  .mlec[data-b="0"]{border-color:var(--hg-p3)}
  .rep-tabla tr.rep-ref td{background:rgba(155,107,255,.10)}
}