/* ==========================================================================
   Lexy-Bot — Sistema de diseño "Electric"
   Azul eléctrico primario · verde eléctrico secundario · amarillo de detalle.
   Fuente única de tokens. La consumen layout.twig, landing.twig y admin/*.
   Ver DESIGN.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. RESPALDOS DE FUENTE CON MÉTRICAS AJUSTADAS
   Mientras Inter y JetBrains Mono bajan de Google Fonts (display=swap),
   Windows pinta con Segoe UI y Consolas, que son más angostas: al llegar la
   fuente web todo crecía ~6–9% de golpe. Con size-adjust el respaldo ocupa
   lo mismo y el cambio no se nota. Solo local() de Windows: en Mac/Android
   no existen y la pila sigue como antes (SF / Roboto ya miden parecido).
   size-adjust medido contra la fuente web; ascent/descent = métricas de la
   fuente web ÷ size-adjust.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Inter Fallback';font-weight:400;
  src:local('Segoe UI'),local('SegoeUI');
  size-adjust:106.3%;ascent-override:91.1%;descent-override:22.7%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';font-weight:600;
  src:local('Segoe UI Semibold'),local('SegoeUI-Semibold');
  size-adjust:106.3%;ascent-override:91.1%;descent-override:22.7%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';font-weight:700;
  src:local('Segoe UI Bold'),local('SegoeUI-Bold');
  size-adjust:106.3%;ascent-override:91.1%;descent-override:22.7%;line-gap-override:0%;
}
@font-face{
  font-family:'JetBrains Mono Fallback';font-weight:400;
  src:local('Consolas');
  size-adjust:109.1%;ascent-override:93.5%;descent-override:27.5%;line-gap-override:0%;
}
@font-face{
  font-family:'JetBrains Mono Fallback';font-weight:700;
  src:local('Consolas Bold'),local('Consolas-Bold');
  size-adjust:109.1%;ascent-override:93.5%;descent-override:27.5%;line-gap-override:0%;
}

/* --------------------------------------------------------------------------
   1. TOKENS — DARK (por defecto)
   -------------------------------------------------------------------------- */
:root{
  /* ---- Fondo. Negro azulado: nunca #000 ---- */
  --bg-0:#06080D;
  --bg-1:#0A0E16;
  --sur-1:#0F1420;
  --sur-2:#141A28;
  --sur-3:#1C2333;

  /* ---- Filetes ---- */
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  /* ---- Tinta ---- */
  --tx-1:#FFFFFF;
  --tx-2:#AFB8C7;
  --tx-3:#7C8799;
  --tx-4:#49515F;

  /* ---- Azul eléctrico: primario ----
     #0A6CFF: más profundo y saturado que el cyan-azul anterior. Se separa
     limpiamente del verde y aguanta blanco encima. --blue-hi es el que se usa
     como TEXTO sobre fondo oscuro (el primario solo no llega a AA a 13px). */
  --blue:#0A6CFF;
  --blue-hi:#5B9BFF;
  --blue-dp:#0043B8;
  --blue-glow:rgba(10,108,255,.34);
  --blue-wash:rgba(10,108,255,.13);
  --on-blue:#FFFFFF;

  /* ---- Verde eléctrico: secundario ---- */
  --green:#00E28A;
  --green-hi:#3DFFB4;
  --green-dp:#00A967;
  --green-glow:rgba(0,226,138,.26);
  --green-wash:rgba(0,226,138,.10);
  --on-green:#00170E;

  /* ---- Amarillo eléctrico ----
     Ya no es un detalle suelto: tiene un papel propio — dinero, recompensa y
     nivel premium. Todo lo que el usuario GANA se pinta de amarillo; el azul
     queda para acción y navegación, el verde para lo confirmado on-chain. */
  --yellow:#FFD60A;
  --yellow-hi:#FFE566;
  --yellow-dp:#C9A400;
  --yellow-glow:rgba(255,214,10,.30);
  --yellow-wash:rgba(255,214,10,.14);
  --yellow-wash-2:rgba(255,214,10,.22);
  --on-yellow:#1A1500;

  /* ---- Semántica de dato ---- */
  --gain:#00E28A;
  --loss:#FF4D6A;
  --gain-wash:rgba(0,226,138,.11);
  --loss-wash:rgba(255,77,106,.11);
  --warn:#FFD60A;

  /* ---- Vidrio líquido ----
     Vidrio NEGRO, no lámina blanca: el cuerpo es negro translúcido y deja pasar
     la iluminación del fondo. El blanco queda sólo en el canto, que es donde la
     luz realmente pega en un borde biselado.
     --glass-bg es el cuerpo (se pinta con background-color, translúcido);
     --glass es el brillo del material. */
  --glass-bg:rgba(8,11,18,.46);
  --glass-bg-2:rgba(8,11,18,.60);
  --glass:linear-gradient(152deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.012) 38%,rgba(255,255,255,0) 66%,rgba(255,255,255,.022) 100%);
  --glass-hi:linear-gradient(152deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 42%,rgba(255,255,255,0) 72%,rgba(255,255,255,.035) 100%);
  --glass-line:rgba(255,255,255,.09);
  --glass-lift:inset 0 1px 0 rgba(255,255,255,.14),
               inset 0 -1px 0 rgba(255,255,255,.03);
  --glass-blur:blur(26px) saturate(160%);

  /* ---- Tipografía ---- */
  --f-display:'General Sans','Onest',system-ui,-apple-system,sans-serif;
  --f-ui:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-2xs:.6875rem; --t-xs:.75rem;   --t-sm:.8125rem; --t-base:.9375rem;
  --t-md:1rem;      --t-lg:1.125rem; --t-xl:1.375rem; --t-2xl:1.75rem;
  --t-3xl:2.25rem;  --t-4xl:3rem;    --t-5xl:4rem;    --t-6xl:5.5rem;

  /* ---- Espacio ---- */
  --s-1:2px;  --s-2:4px;  --s-3:8px;  --s-4:12px; --s-5:16px;
  --s-6:20px; --s-7:28px; --s-8:36px; --s-9:48px; --s-10:64px;
  --s-11:88px; --s-12:120px;

  /* ---- Radio ---- */
  --r-1:6px; --r-2:10px; --r-3:14px; --r-4:20px; --r-5:28px; --r-full:999px;

  /* ---- Elevación ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 24px rgba(0,0,0,.4);
  --sh-3:0 24px 64px rgba(0,0,0,.55);
  --glow-blue:0 0 0 1px rgba(0,153,255,.30), 0 10px 40px rgba(0,153,255,.20);
  --glow-green:0 0 0 1px rgba(0,226,138,.28), 0 10px 36px rgba(0,226,138,.16);

  /* ---- Motion ---- */
  --d1:120ms; --d2:200ms; --d3:280ms; --d4:520ms;
  --e:cubic-bezier(.2,0,0,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- Layout ---- */
  --w-page:1320px;
  --w-prose:64ch;
  --side-w:262px;
  --side-rail:76px;
  --top-h:68px;
  --tabbar-h:64px;
  --pad-x:clamp(20px,5vw,48px);

  color-scheme:dark;
}

/* --------------------------------------------------------------------------
   2. TOKENS — LIGHT. Sólo backoffice. Flat: sin vidrio, sin glow, sin ambient.
   -------------------------------------------------------------------------- */
:root[data-theme="light"]{
  --bg-0:#F5F7FB;
  --bg-1:#FFFFFF;
  --sur-1:#FFFFFF;
  --sur-2:#FFFFFF;
  --sur-3:#EDF1F7;

  --line:#E2E8F1;
  --line-2:#CFD8E5;

  /* Medidos contra #FFF y contra --sur-3 (#EDF1F7): ambos pasan AA a 11px.
     Los valores previos (#6B7688 / #98A2B3) daban 4.28 y 2.58. */
  --tx-1:#080C14;
  --tx-2:#3B4557;
  --tx-3:#55607A;
  --tx-4:#626D80;

  --blue:#0072E5;
  --blue-hi:#0060C4;
  --blue-dp:#004E9E;
  --blue-glow:rgba(0,114,229,.16);
  --blue-wash:rgba(0,114,229,.07);
  --on-blue:#FFFFFF;

  /* #00976A sobre su propio wash daba 3.3: no pasa AA en pastillas de delta. */
  --green:#00795A;
  --green-hi:#006049;
  --green-dp:#004D3B;
  --green-glow:rgba(0,121,90,.16);
  --green-wash:rgba(0,121,90,.09);
  --on-green:#FFFFFF;

  /* En claro el amarillo puro no pasa AA como texto: se oscurece para tinta y
     se mantiene vivo para rellenos. */
  --yellow:#8A6D00;
  --yellow-hi:#6E5700;
  --yellow-dp:#5A4700;
  --yellow-glow:rgba(255,214,10,.28);
  --yellow-wash:rgba(255,214,10,.22);
  --yellow-wash-2:rgba(255,214,10,.34);
  --on-yellow:#1A1500;

  --gain:#00795A;
  --loss:#C41F40;
  --gain-wash:rgba(0,121,90,.10);
  --loss-wash:rgba(196,31,64,.10);
  --warn:#7A6000;

  /* Flat: el vidrio se vuelve superficie sólida y opaca */
  --glass-bg:#FFFFFF;
  --glass-bg-2:#FFFFFF;
  --glass:none;
  --glass-hi:none;
  --glass-line:#E2E8F1;
  --glass-lift:none;
  --glass-blur:none;

  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 2px 8px rgba(16,24,40,.07);
  --sh-3:0 8px 24px rgba(16,24,40,.10);
  --glow-blue:0 0 0 1px rgba(0,114,229,.30);
  --glow-green:0 0 0 1px rgba(0,151,106,.28);

  color-scheme:light;
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg-0);
  color:var(--tx-2);
  font-family:var(--f-ui);
  font-size:var(--t-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
}

img,svg,canvas,video,picture{display:block;max-width:100%}
img,video{height:auto}
/* El display:block de arriba pisa el estilo de UA de [hidden]: lo restituimos. */
[hidden]{display:none !important}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  color:var(--tx-1);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.02em;
}

::selection{background:var(--blue);color:#fff}

:focus-visible{
  outline:2px solid var(--blue-hi);
  outline-offset:2px;
  border-radius:var(--r-1);
}
:focus:not(:focus-visible){outline:none}

.skip-link{
  position:absolute;left:var(--s-5);top:-100px;z-index:2000;
  padding:var(--s-4) var(--s-6);
  background:var(--blue);color:var(--on-blue);
  border-radius:var(--r-2);font-weight:600;
  transition:top var(--d2) var(--e);
}
.skip-link:focus{top:var(--s-5)}

/* --------------------------------------------------------------------------
   4. ILUMINACIÓN AMBIENTAL ANIMADA
   El sustrato del vidrio. Sin esto el glass no tiene nada que desenfocar.
   -------------------------------------------------------------------------- */
.ambient{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:strict;
}
.ambient span{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  will-change:transform;
}
/* Cinco focos: con tres el fondo todavía tenía zonas planas y el vidrio
   negro no tenía nada que filtrar. */
.ambient .a1{
  width:58vw;height:58vw;min-width:460px;min-height:460px;
  left:-16vw;top:-18vw;
  background:radial-gradient(circle,var(--blue) 0%,transparent 66%);
  opacity:.34;
  animation:amb-a 26s var(--e) infinite alternate;
}
.ambient .a2{
  width:50vw;height:50vw;min-width:380px;min-height:380px;
  right:-14vw;top:18vh;
  background:radial-gradient(circle,#1e00ff 0%,transparent 66%);
  opacity:.20;
  animation:amb-b 34s var(--e) infinite alternate;
}
.ambient .a3{
  width:40vw;height:40vw;min-width:300px;min-height:300px;
  left:30vw;bottom:-22vh;
  background:radial-gradient(circle,#00fff8 0%,transparent 64%);
  opacity:.09;
  animation:amb-c 44s var(--e) infinite alternate;
}
.ambient .a4{
  width:44vw;height:44vw;min-width:340px;min-height:340px;
  right:8vw;bottom:-16vh;
  background:radial-gradient(circle,var(--blue) 0%,transparent 68%);
  opacity:.22;
  animation:amb-d 38s var(--e) infinite alternate;
}
.ambient .a5{
  width:30vw;height:30vw;min-width:240px;min-height:240px;
  left:44vw;top:6vh;
  background:radial-gradient(circle,#00d7ff 0%,transparent 70%);
  opacity:.12;
  animation:amb-e 52s var(--e) infinite alternate;
}
.ambient .a6{
  width:36vw;height:36vw;min-width:280px;min-height:280px;
  right:26vw;top:-10vh;
  background:radial-gradient(circle,var(--yellow) 0%,transparent 66%);
  opacity:.10;
  animation:amb-f 48s var(--e) infinite alternate;
}
/* Periodos primos entre sí: el ciclo completo no se percibe como bucle. */
@keyframes amb-a{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(16vw,10vh,0) scale(1.22)}
}
@keyframes amb-b{
  0%  {transform:translate3d(0,0,0) scale(1.1)}
  100%{transform:translate3d(-14vw,-12vh,0) scale(.9)}
}
@keyframes amb-c{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-18vw,-8vh,0) scale(1.3)}
}
@keyframes amb-d{
  0%  {transform:translate3d(0,0,0) scale(.95)}
  100%{transform:translate3d(-12vw,8vh,0) scale(1.18)}
}
@keyframes amb-e{
  0%  {transform:translate3d(0,0,0) scale(1.15)}
@keyframes amb-f{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-14vw,12vh,0) scale(1.25)}
}
  100%{transform:translate3d(10vw,14vh,0) scale(.85)}
}
/* Light mode es flat: no hay ambiente. */
:root[data-theme="light"] .ambient{display:none}

@media (prefers-reduced-motion:reduce){
  .ambient span{animation:none;transform:translate3d(6vw,4vh,0)}
}

/* Todo lo que no sea el ambiente vive por encima */
.shell,.site,.ambient ~ *{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   5. TIPOGRAFÍA UTILITARIA
   -------------------------------------------------------------------------- */
.mono{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.num{
  font-family:var(--f-display);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  color:var(--tx-1);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-3);
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-3);
}
/* Eyebrow en pastilla con barra de acento — gramática del template */
.eyebrow-tag{
  display:inline-flex;align-items:center;
  padding:5px 12px 5px 10px;
  border-radius:var(--r-1);
  background:var(--blue-wash);
  border-left:2px solid var(--blue);
  font-family:var(--f-ui);
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-hi);
}
.eyebrow-tag.g{background:var(--green-wash);border-left-color:var(--green);color:var(--green-hi)}
.eyebrow-tag.y{background:var(--yellow-wash);border-left-color:var(--yellow);color:var(--yellow-hi)}

.t-gain{color:var(--gain)}
.t-loss{color:var(--loss)}
.t-dim{color:var(--tx-3)}
.t-blue{color:var(--blue-hi)}
.lead{font-size:var(--t-md);line-height:1.65;color:var(--tx-2)}
.prose{max-width:var(--w-prose)}

/* --------------------------------------------------------------------------
   6. BOTONES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
  min-height:44px;padding:0 var(--s-6);
  border-radius:var(--r-2);
  border:1px solid transparent;
  font-family:var(--f-ui);
  font-size:var(--t-base);font-weight:600;
  line-height:1;white-space:nowrap;
  cursor:pointer;
  transition:background var(--d2) var(--e),border-color var(--d2) var(--e),
             color var(--d2) var(--e),transform var(--d1) var(--e),box-shadow var(--d2) var(--e);
}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn svg{flex:0 0 auto}

.btn-primary{
  background:var(--blue);color:var(--on-blue);
  box-shadow:0 6px 20px rgba(0,153,255,.24);
}
.btn-primary:hover{background:var(--blue-hi);box-shadow:0 8px 26px rgba(0,153,255,.34)}
:root[data-theme="light"] .btn-primary{color:#fff;box-shadow:var(--sh-1)}
:root[data-theme="light"] .btn-primary:hover{background:var(--blue-hi);box-shadow:var(--sh-2)}

/* Verde = acción de depósito (todos los CTA "Deposit") */
.btn-green{background:var(--green);color:var(--on-green);box-shadow:0 6px 20px rgba(0,226,138,.22)}
.btn-green:hover{background:var(--green-hi);box-shadow:0 8px 26px rgba(0,226,138,.32)}
:root[data-theme="light"] .btn-green{color:#fff;box-shadow:var(--sh-1)}
:root[data-theme="light"] .btn-green:hover{background:var(--green-hi);box-shadow:var(--sh-2)}

/* Pastilla oscura con texto de acento — el botón del template */
.btn-ghost{
  background:var(--sur-2);
  border-color:var(--line-2);
  color:var(--tx-1);
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-hi);background:var(--sur-3)}

.btn-quiet{background:transparent;border-color:var(--line);color:var(--tx-2)}
.btn-quiet:hover{border-color:var(--line-2);color:var(--tx-1);background:var(--sur-1)}

.btn-danger{background:var(--loss);color:#fff}
.btn-danger:hover{filter:brightness(1.1)}

.btn-sm{min-height:36px;padding:0 var(--s-5);font-size:var(--t-sm)}
.btn-lg{min-height:52px;padding:0 var(--s-8);font-size:var(--t-md)}
.btn-pill{border-radius:var(--r-full)}
.btn-block{width:100%}
.btn-icon{min-height:44px;width:44px;padding:0;border-radius:var(--r-2)}

/* --------------------------------------------------------------------------
   7. FORMULARIOS
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:var(--s-3)}
.label{
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;
  color:var(--tx-3);
}
.input,.select,.textarea{
  width:100%;min-height:48px;
  padding:0 var(--s-5);
  background:var(--sur-3);
  border:1px solid var(--line);
  border-radius:var(--r-2);
  color:var(--tx-1);
  font-size:var(--t-base);
  transition:border-color var(--d2) var(--e),box-shadow var(--d2) var(--e),background var(--d2) var(--e);
}
.textarea{padding:var(--s-4) var(--s-5);min-height:110px;line-height:1.6;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--tx-4)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-wash);
  background:var(--sur-2);
}
.input[readonly]{color:var(--tx-2);cursor:default}
.input.mono,.select.mono{font-family:var(--f-mono);font-size:var(--t-sm)}
.hint{font-size:var(--t-xs);color:var(--tx-3);line-height:1.55}
.err{font-size:var(--t-xs);color:var(--loss);line-height:1.55}

/* Pestañas pastilla — la gramática del dashboard de referencia */
.segbar{
  display:inline-flex;gap:var(--s-1);
  padding:4px;
  background:var(--sur-3);
  border:1px solid var(--line);
  border-radius:var(--r-full);
}
.segbar button{
  min-height:36px;padding:0 var(--s-5);
  border-radius:var(--r-full);
  font-size:var(--t-sm);font-weight:500;
  color:var(--tx-3);
  white-space:nowrap;
  transition:background var(--d2) var(--e),color var(--d2) var(--e);
}
.segbar button:hover{color:var(--tx-1)}
.segbar button.active,.segbar button[aria-selected="true"]{
  background:var(--sur-1);color:var(--tx-1);
  box-shadow:var(--sh-1);
}
:root[data-theme="light"] .segbar button.active{background:#fff;border:1px solid var(--line)}

/* Interruptor */
.switch{
  position:relative;
  width:46px;height:26px;flex:0 0 auto;
  border-radius:var(--r-full);
  background:var(--sur-3);
  border:1px solid var(--line-2);
  transition:background var(--d2) var(--e),border-color var(--d2) var(--e);
}
.switch::after{
  content:'';position:absolute;top:2px;left:2px;
  width:18px;height:18px;border-radius:50%;
  background:var(--tx-3);
  transition:transform var(--d3) var(--e-out),background var(--d2) var(--e);
}
.switch.on{background:var(--blue-wash);border-color:var(--blue)}
.switch.on::after{transform:translateX(20px);background:var(--blue)}

/* --------------------------------------------------------------------------
   8. SUPERFICIES — vidrio líquido
   -------------------------------------------------------------------------- */
.card{
  position:relative;
  background:var(--glass-bg);
  background-image:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--r-4);
  box-shadow:var(--glass-lift),var(--sh-2);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
:root[data-theme="light"] .card{background:var(--sur-1);border-color:var(--line);box-shadow:var(--sh-1)}

.card-pad{padding:var(--s-7)}
@media (max-width:600px){.card-pad{padding:var(--s-5)}}

.card-blue{border-color:rgba(0,153,255,.26)}
.card-green{border-color:rgba(0,226,138,.24)}
.card-yellow{border-color:rgba(255,214,10,.24)}

/* Resplandor que sangra desde una esquina — nunca centrado */
.card-glow::before{
  content:'';position:absolute;inset:0;
  border-radius:inherit;
  background:radial-gradient(120% 90% at 8% 0%,var(--blue-wash),transparent 58%);
  pointer-events:none;
}
.card-glow.g::before{background:radial-gradient(120% 90% at 100% 100%,var(--green-wash),transparent 58%)}
:root[data-theme="light"] .card-glow::before{opacity:.6}

.card-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-5);flex-wrap:wrap;
  margin-bottom:var(--s-6);
}
.card-head h2,.card-head h3{font-size:var(--t-lg);letter-spacing:-.015em}
.card-head p{font-size:var(--t-xs);color:var(--tx-3);margin-top:var(--s-2)}

.rule{height:1px;background:var(--line);border:0;margin:var(--s-6) 0}

/* Rejilla de tarjetas dividida por filetes, sin gaps — gramática del template */
.quad{
  display:grid;
  border:1px solid var(--line);
  border-radius:var(--r-4);
  overflow:hidden;
  background:var(--glass-bg);
  background-image:var(--glass);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.quad > *{padding:var(--s-7);border-bottom:1px solid var(--line)}
@media (min-width:768px){
  .quad{grid-template-columns:1fr 1fr}
  .quad > *:nth-child(odd){border-right:1px solid var(--line)}
  .quad > *:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:767px){.quad > *:last-child{border-bottom:0}}

/* --------------------------------------------------------------------------
   9. CHIPS Y ESTADOS
   -------------------------------------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:26px;padding:0 var(--s-4);
  border-radius:var(--r-full);
  border:1px solid var(--line-2);
  background:var(--sur-3);
  font-size:var(--t-xs);font-weight:500;
  color:var(--tx-2);
  white-space:nowrap;
}
.chip.b{border-color:rgba(0,153,255,.36);background:var(--blue-wash);color:var(--blue-hi)}
.chip.g{border-color:rgba(0,226,138,.34);background:var(--green-wash);color:var(--green-hi)}
.chip.y{border-color:rgba(255,214,10,.34);background:var(--yellow-wash);color:var(--yellow-hi)}
.chip.r{border-color:rgba(255,77,106,.34);background:var(--loss-wash);color:var(--loss)}
.chip svg{width:13px;height:13px}

/* Delta en pastilla — el patrón del dashboard de referencia */
.delta{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:var(--r-full);
  font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;
  background:var(--gain-wash);color:var(--gain);
}
.delta.down{background:var(--loss-wash);color:var(--loss)}
.delta svg{width:11px;height:11px}

.live-dot{
  width:7px;height:7px;flex:0 0 auto;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px var(--green-wash);
  animation:pulse 2.6s var(--e) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%    {opacity:.55;transform:scale(.82)}
}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* --------------------------------------------------------------------------
   10. TABLAS Y LISTAS DE DATO
   -------------------------------------------------------------------------- */
.tbl-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.tbl{font-size:var(--t-sm)}
.tbl th{
  padding:var(--s-3) var(--s-4);
  text-align:left;
  font-size:var(--t-2xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--tx-3);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{
  padding:var(--s-4);
  border-bottom:1px solid var(--line);
  color:var(--tx-2);
  vertical-align:middle;
}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--d2) var(--e)}
.tbl .n{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--tx-1)}
@media (hover:hover) and (pointer:fine){
  .tbl tbody tr:hover{background:var(--sur-2)}
}

/* Fila de lista con ícono a la izquierda y cifras a la derecha */
.drow{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) 0;
  border-bottom:1px solid var(--line);
}
.drow:last-child{border-bottom:0}
.drow-ico{
  width:38px;height:38px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:var(--r-full);
  background:var(--sur-3);
  border:1px solid var(--line);
  color:var(--blue-hi);
}
.drow-ico svg{width:18px;height:18px}
.drow-t{flex:1;min-width:0}
.drow-t b{display:block;font-size:var(--t-base);font-weight:600;color:var(--tx-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow-t small{display:block;font-size:var(--t-xs);color:var(--tx-3)}
.drow-v{text-align:right;flex:0 0 auto}
.drow-v b{display:block;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-base);font-weight:500;color:var(--tx-1)}
.drow-v small{display:block;font-size:var(--t-xs);color:var(--tx-3);font-family:var(--f-mono)}

/* --------------------------------------------------------------------------
   11. TOAST
   -------------------------------------------------------------------------- */
#toast-container{
  position:fixed;z-index:1200;
  right:var(--s-5);bottom:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-3);
  max-width:min(400px,calc(100vw - 32px));
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  background:var(--glass-bg-2);
  background-image:var(--glass-hi);
  border:1px solid var(--glass-line);
  border-left:3px solid var(--blue);
  border-radius:var(--r-2);
  box-shadow:var(--sh-3);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  font-size:var(--t-sm);color:var(--tx-1);
  pointer-events:auto;
  animation:toast-in var(--d3) var(--e-out) both;
}
.toast.ok{border-left-color:var(--green)}
.toast.err{border-left-color:var(--loss)}
.toast.warn{border-left-color:var(--yellow)}
.toast.leaving{animation:toast-out var(--d2) var(--e) forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}
@media (max-width:600px){
  #toast-container{left:var(--s-4);right:var(--s-4);bottom:calc(var(--tabbar-h) + var(--s-4));max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .toast{animation:none}
}

/* --------------------------------------------------------------------------
   12. MODAL / SHEET
   En móvil todo modal se convierte en sheet que entra desde abajo.
   -------------------------------------------------------------------------- */
.modal-bg{
  position:fixed;inset:0;z-index:1100;
  display:none;
  align-items:center;justify-content:center;
  padding:var(--s-5);
  background:rgba(3,5,10,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal-bg.open{display:flex;animation:fade var(--d2) var(--e) both}
@keyframes fade{from{opacity:0}to{opacity:1}}

.modal{
  width:100%;max-width:440px;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  background:var(--glass-bg-2);
  background-image:var(--glass-hi);
  border:1px solid var(--glass-line);
  border-radius:var(--r-4);
  box-shadow:var(--glass-lift),var(--sh-3);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  padding:var(--s-7);
  animation:modal-in var(--d3) var(--e-out) both;
}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.sheet-grab{display:none}

@media (max-width:700px){
  .modal-bg{align-items:flex-end;padding:0}
  .modal{
    max-width:none;
    border-radius:var(--r-5) var(--r-5) 0 0;
    border-bottom:0;
    padding:var(--s-4) var(--s-5) calc(var(--s-7) + env(safe-area-inset-bottom));
    max-height:88dvh;
    animation:sheet-in var(--d4) var(--e-out) both;
  }
  .sheet-grab{
    display:block;
    width:40px;height:4px;
    margin:0 auto var(--s-5);
    border-radius:var(--r-full);
    background:var(--line-2);
  }
  @keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .modal{animation:none}
}

/* --------------------------------------------------------------------------
   13. REVEAL — entrada de sección al hacer scroll
   -------------------------------------------------------------------------- */
.reveal{opacity:1}
html.js .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--d4) var(--e-out),transform var(--d4) var(--e-out);
  will-change:opacity,transform;
}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:70ms}
html.js .reveal.d2{transition-delay:140ms}
html.js .reveal.d3{transition-delay:210ms}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------------------
   14. UTILIDADES
   -------------------------------------------------------------------------- */
.container{
  width:100%;max-width:var(--w-page);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.gap-2{gap:var(--s-2)} .gap-3{gap:var(--s-3)} .gap-4{gap:var(--s-4)}
.gap-5{gap:var(--s-5)} .gap-6{gap:var(--s-6)} .gap-7{gap:var(--s-7)}
.grow{flex:1;min-width:0}
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   15. ÁREA DE PULSACIÓN
   WCAG 2.5.8 (AA) pide 24×24 siempre; en puntero grueso subimos a 44.
   Los enlaces de dirección en línea medían 16px de alto: no bastaba.
   -------------------------------------------------------------------------- */
a.mono,a.fa-v,.dz-ltx a,.dz-person-id a,.dz-sponsor a{
  display:inline-flex;align-items:center;
  min-height:24px;
  padding-block:4px;
}
.chip,.delta{min-height:26px}

@media (pointer:coarse){
  .btn,.btn-sm,
  a.side-link,a.side-mini,.dz-rail-a,.dz-fpill,
  .lang-item,.lang-btn,.dz-share-a,.appfoot-links a,
  .theme-tog button,.bell,.side-collapse{
    min-height:44px;
  }
  .theme-tog button,.side-collapse{min-width:44px}
  a.mono,a.fa-v,.dz-ltx a,.dz-person-id a,.dz-sponsor a{min-height:32px}
  /* El chip de dirección es un enlace: en táctil necesita cuerpo. */
  a.chip{min-height:36px;padding-inline:var(--s-5)}
}

/* --------------------------------------------------------------------------
   16. IMPRESIÓN
   -------------------------------------------------------------------------- */
@media print{
  .ambient,.side,.topbar,.tabbar,.mobile-bar,#toast-container{display:none !important}
  body{background:#fff;color:#000}
  .card{border:1px solid #ccc;box-shadow:none;backdrop-filter:none}
}

/* --------------------------------------------------------------------------
   17. SELECTOR DE IDIOMA — compartido por la app y el sitio público.
   Vivía sólo en app.css y en la landing salía sin estilar.
   -------------------------------------------------------------------------- */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  height:34px;padding:0 var(--s-3) 0 var(--s-4);
  border-radius:var(--r-full);
  background:var(--sur-2);
  border:1px solid var(--line);
  color:var(--tx-2);
  font-size:var(--t-xs);font-weight:600;
  transition:border-color var(--d2) var(--e),color var(--d2) var(--e);
}
.lang-btn:hover{border-color:var(--line-2);color:var(--tx-1)}
.lang-btn svg{flex:0 0 auto}
.lang-chev{transition:transform var(--d2) var(--e)}
.lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}

.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:200;
  min-width:186px;
  padding:var(--s-2);
  background:var(--glass-bg-2);
  background-image:var(--glass-hi);
  border:1px solid var(--glass-line);
  border-radius:var(--r-3);
  box-shadow:var(--glass-lift),var(--sh-3);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  animation:lang-in var(--d2) var(--e-out) both;
}
:root[data-theme="light"] .lang-menu{background:#fff}
@keyframes lang-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.lang-item{
  display:flex;align-items:center;gap:var(--s-3);
  width:100%;min-height:42px;padding:0 var(--s-3);
  border-radius:var(--r-2);
  font-size:var(--t-sm);
  color:var(--tx-2);
  text-align:left;
  transition:background var(--d2) var(--e),color var(--d2) var(--e);
}
.lang-item:hover{background:var(--sur-3);color:var(--tx-1)}
.lang-code{
  width:28px;flex:0 0 auto;
  font-family:var(--f-mono);font-size:var(--t-2xs);font-weight:600;
  color:var(--tx-3);
}
.lang-name{flex:1}
.lang-check{flex:0 0 auto;color:var(--blue)}

/* Google Translate: quitamos la barra y el badge que inyecta */
.goog-te-banner-frame,.skiptranslate iframe,#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
body{top:0 !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
#google_translate_element{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------------------
   18. AMARILLO — dinero, recompensa y nivel premium
   El cliente pidió más presencia. En vez de salpicarlo, se le da un papel:
   todo lo que el usuario GANA va en amarillo. Azul = acción y navegación,
   verde = confirmado on-chain, amarillo = valor.
   -------------------------------------------------------------------------- */

/* Botón */
.btn-yellow{
  background:var(--yellow);color:var(--on-yellow);
  box-shadow:0 6px 20px rgba(255,214,10,.22);
}
.btn-yellow:hover{background:var(--yellow-hi);box-shadow:0 8px 26px rgba(255,214,10,.30)}
:root[data-theme="light"] .btn-yellow{
  background:#FFD60A;color:#1A1500;box-shadow:var(--sh-1);
}
:root[data-theme="light"] .btn-yellow:hover{background:#FFE566}

/* Eyebrow amarilla, ya usada por las secciones de valor */
.eyebrow-tag.y{background:var(--yellow-wash);border-left-color:#FFD60A;color:var(--yellow-hi)}
:root[data-theme="light"] .eyebrow-tag.y{color:var(--yellow)}

/* Cifra de valor */
.t-value{color:var(--yellow-hi)}
:root[data-theme="light"] .t-value{color:var(--yellow)}

/* Superficie con acento de valor */
.card-yellow{border-color:rgba(255,214,10,.30)}
.card-glow.y::before{
  background:radial-gradient(120% 90% at 100% 0%,var(--yellow-wash),transparent 58%);
}

/* Filete de sección en amarillo */
.rule-y{height:1px;background:#FFD60A;border:0;opacity:.5}