/* ============================================================
   Legal Boost · Referidos
   Fluent 2, con la escala de superficies y los estados semanticos del
   portal de Grupo Wolf, para que los dos productos se sientan familia.
   Dos temas: claro (por omision, sigue al sistema) y oscuro.
   ============================================================ */

/* ---------- TEMA CLARO ---------- */
:root,
:root[data-tema="claro"] {
  /* Tres superficies, no dos. El fondo de pagina es el mas oscuro de los
     tres y las tarjetas suben: asi una tarjeta se ve elevada sin depender
     solo de la sombra. */
  --fondo-base:     #eef1f4;
  --fondo-superficie: #f6f8f9;
  --fondo-elevado:  #ffffff;
  --fondo-hover:    rgba(14, 116, 144, 0.08);
  --fondo-acrilico: rgba(255, 255, 255, 0.78);

  --texto:      #14212a;
  --texto-2:    #3d4a53;
  --texto-3:    #64727c;
  --texto-sobre-acento: #ffffff;

  /* Cyan de la casa. Este tono llega a 4.9:1 contra blanco, sobre el
     4.5:1 que pide WCAG AA para texto normal. */
  --acento:       #0e7490;
  --acento-hover: #0b5c73;
  --acento-suave: rgba(14, 116, 144, 0.13);
  --acento-linea: rgba(14, 116, 144, 0.40);

  --borde:        rgba(15, 45, 58, 0.16);
  --borde-fuerte: rgba(15, 45, 58, 0.28);

  --exito:   #059669;  --exito-suave:   rgba(5, 150, 105, 0.12);
  --aviso:   #b45309;  --aviso-suave:   rgba(180, 83, 9, 0.13);
  --peligro: #dc2626;  --peligro-suave: rgba(220, 38, 38, 0.12);
  --info:    #0284c7;  --info-suave:    rgba(2, 132, 199, 0.12);

  --sombra-sm: 0 1px 2px rgba(16,40,55,0.07), inset 0 0 0 0.5px rgba(15,45,58,0.03);
  --sombra-md: 0 4px 16px rgba(16,40,55,0.10), inset 0 0 0 0.5px rgba(15,45,58,0.04);
  --sombra-lg: 0 12px 36px rgba(16,40,55,0.16), inset 0 0 0 1px rgba(15,45,58,0.05);
  --brillo:    0 2px 8px rgba(14,116,144,0.28);
  --brillo-fuerte: 0 4px 16px rgba(14,116,144,0.40);
}

/* ---------- TEMA OSCURO ---------- */
/* Los fondos y los textos son grises casi neutros. Todo el color vive en el
   acento y en los estados, asi lo que tiene color es siempre lo que
   significa algo. */
:root[data-tema="oscuro"] {
  --fondo-base:     #0f1011;
  --fondo-superficie: #17181a;
  --fondo-elevado:  #202124;
  --fondo-hover:    rgba(255, 255, 255, 0.06);
  --fondo-acrilico: rgba(23, 24, 26, 0.78);

  --texto:   #f0f0f2;
  --texto-2: #a6a6ac;
  --texto-3: #75757d;
  --texto-sobre-acento: #06272e;

  --acento:       #22d3ee;
  --acento-hover: #67e8f9;
  --acento-suave: rgba(34, 211, 238, 0.15);
  --acento-linea: rgba(34, 211, 238, 0.42);

  --borde:        rgba(255, 255, 255, 0.09);
  --borde-fuerte: rgba(255, 255, 255, 0.18);

  --exito:   #34d399;  --exito-suave:   rgba(52, 211, 153, 0.15);
  --aviso:   #fbbf24;  --aviso-suave:   rgba(251, 191, 36, 0.15);
  --peligro: #f87171;  --peligro-suave: rgba(248, 113, 113, 0.15);
  --info:    #60a5fa;  --info-suave:    rgba(96, 165, 250, 0.15);

  --sombra-sm: 0 1px 2px rgba(0,0,0,0.40), inset 0 0 0 0.5px rgba(255,255,255,0.05);
  --sombra-md: 0 4px 14px rgba(0,0,0,0.50), inset 0 0 0 0.5px rgba(255,255,255,0.06);
  --sombra-lg: 0 10px 34px rgba(0,0,0,0.60), inset 0 0 0 1px rgba(255,255,255,0.08);
  --brillo:    0 0 10px rgba(34,211,238,0.26);
  --brillo-fuerte: 0 0 22px rgba(34,211,238,0.44);
}

/* El tema oscuro tambien entra si lo pide el sistema y el usuario no eligio
   otra cosa. Se repiten los valores porque una variable no puede heredar de
   otro selector: es el precio de no usar un preprocesador. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo-base:     #0f1011;
    --fondo-superficie: #17181a;
    --fondo-elevado:  #202124;
    --fondo-hover:    rgba(255, 255, 255, 0.06);
    --fondo-acrilico: rgba(23, 24, 26, 0.78);
    --texto:   #f0f0f2;
    --texto-2: #a6a6ac;
    --texto-3: #75757d;
    --texto-sobre-acento: #06272e;
    --acento:       #22d3ee;
    --acento-hover: #67e8f9;
    --acento-suave: rgba(34, 211, 238, 0.15);
    --acento-linea: rgba(34, 211, 238, 0.42);
    --borde:        rgba(255, 255, 255, 0.09);
    --borde-fuerte: rgba(255, 255, 255, 0.18);
    --exito:   #34d399;  --exito-suave:   rgba(52, 211, 153, 0.15);
    --aviso:   #fbbf24;  --aviso-suave:   rgba(251, 191, 36, 0.15);
    --peligro: #f87171;  --peligro-suave: rgba(248, 113, 113, 0.15);
    --info:    #60a5fa;  --info-suave:    rgba(96, 165, 250, 0.15);
    --sombra-sm: 0 1px 2px rgba(0,0,0,0.40), inset 0 0 0 0.5px rgba(255,255,255,0.05);
    --sombra-md: 0 4px 14px rgba(0,0,0,0.50), inset 0 0 0 0.5px rgba(255,255,255,0.06);
    --sombra-lg: 0 10px 34px rgba(0,0,0,0.60), inset 0 0 0 1px rgba(255,255,255,0.08);
    --brillo:    0 0 10px rgba(34,211,238,0.26);
    --brillo-fuerte: 0 0 22px rgba(34,211,238,0.44);
  }
}

/* ---------- TOKENS COMPARTIDOS ---------- */
:root {
  --fuente: "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  --radio-sm: 8px;
  --radio:    14px;
  --radio-lg: 20px;
  --radio-xl: 28px;
  --radio-pildora: 999px;

  --esp-2: 2px;  --esp-4: 4px;   --esp-6: 6px;   --esp-8: 8px;
  --esp-12: 12px; --esp-16: 16px; --esp-20: 20px; --esp-24: 24px;
  --esp-32: 32px; --esp-40: 40px;

  --suavizado: cubic-bezier(0.33, 0, 0.1, 1);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo-base);
  -webkit-font-smoothing: antialiased;
  /* Un nombre largo sin espacios no puede ensanchar la pagina entera. Tiene
     que ser anywhere y no break-word: solo anywhere reduce el ancho minimo
     del contenido, que es lo que deja encogerse a las celdas de la tabla. */
  overflow-wrap: anywhere;
}
h1, h2 { margin: 0 0 var(--esp-8); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 24px; }
h2 { font-size: 17px; margin-top: var(--esp-32); }
p { margin: 0 0 var(--esp-12); }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--acento-suave); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: var(--radio-pildora); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- ENCABEZADO ---------- */
header {
  display: flex; align-items: center; gap: var(--esp-16);
  padding: var(--esp-12) var(--esp-24);
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-acrilico);
  backdrop-filter: blur(20px) saturate(1.8);
  position: sticky; top: 0; z-index: 20;
  flex-wrap: wrap;
}
/* flex: none no es adorno. El header es un contenedor flex y un <svg> con
   viewBox pero sin width propio colapsa a 0 de ancho como item flexible: se
   dibuja con el color correcto y no lo ve nadie. Con flex: none el navegador
   deriva el ancho de la proporcion del viewBox. */
header .logo { height: 26px; width: auto; flex: none; }
header .marca { font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
header nav { display: flex; gap: var(--esp-4); flex-wrap: wrap; }
header nav a, header .enlace {
  padding: var(--esp-6) var(--esp-12); border-radius: var(--radio-sm);
  color: var(--texto-2); font-weight: 500; font-size: 13.5px;
  transition: background .16s var(--suavizado), color .16s var(--suavizado);
}
header nav a:hover, header .enlace:hover { background: var(--fondo-hover); color: var(--texto); text-decoration: none; }
header .enlace { white-space: nowrap; }
header .separador { flex: 1; }
header .quien { font-size: 13px; color: var(--texto-2); white-space: nowrap; }

main { padding: var(--esp-32) var(--esp-24); max-width: 1180px; margin: 0 auto; }

/* ---------- BOTONES ---------- */
button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-8);
  padding: var(--esp-8) var(--esp-16); border-radius: var(--radio-sm);
  font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--fondo-superficie); color: var(--texto);
  transition: all .16s var(--suavizado); white-space: nowrap;
}
button:hover { border-color: var(--borde-fuerte); background: var(--fondo-hover); }
button.primario {
  background: var(--acento); border-color: var(--acento);
  color: var(--texto-sobre-acento); box-shadow: var(--brillo);
}
button.primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); box-shadow: var(--brillo-fuerte); transform: translateY(-1px); }
button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- CAMPOS ---------- */
input, select {
  width: 100%;
  padding: var(--esp-8) var(--esp-12);
  font-family: inherit; font-size: 14px; color: var(--texto);
  background: var(--fondo-elevado); border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  transition: border-color .16s var(--suavizado), box-shadow .16s var(--suavizado);
  outline: none;
}
input:focus, select:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
input[type="checkbox"] { width: auto; accent-color: var(--acento); }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin-bottom: var(--esp-6); }

/* ---------- TARJETAS DE CIFRA ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-16); margin-bottom: var(--esp-24); }
@media (max-width: 860px) { .numeros { grid-template-columns: repeat(2, 1fr); } }
.numero {
  background: var(--fondo-elevado); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: var(--esp-20);
  box-shadow: var(--sombra-sm);
  display: flex; flex-direction: column; gap: var(--esp-6);
  /* Solo transform. Animar box-shadow hace que, al cambiar de tema, la
     tarjeta se quede con la sombra del tema anterior hasta recargar: la
     transicion interpola entre dos sombras distintas y no termina de
     resolver. El realce al pasar el raton se nota igual con el
     desplazamiento, y la sombra cambia al instante. */
  transition: transform .18s var(--suavizado);
}
.numero:hover { box-shadow: var(--sombra-md); transform: translateY(-2px); }
.numero .valor { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.numero .etiqueta { font-size: 12.5px; color: var(--texto-3); }
/* El numero que de verdad importa al referenciante es cuantos pagaron: es lo
   unico que le genera comision. Se pinta en verde para que sea el primero que
   encuentra el ojo. */
.numero.destacado .valor { color: var(--exito); }

/* ---------- INSIGNIAS DE ESTADO ---------- */
/* Seis estados en seis pildoras grises no se distinguen de un vistazo. Cada
   uno lleva su color: el estado es lo unico que el referenciante viene a
   mirar. El texto sigue estando, el color solo lo acelera. */
.estado {
  display: inline-flex; align-items: center;
  padding: 3px var(--esp-8); border-radius: var(--radio-pildora);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--fondo-hover); color: var(--texto-2);
}
.estado.info    { background: var(--info-suave);    color: var(--info); }
.estado.acento  { background: var(--acento-suave);  color: var(--acento); }
.estado.aviso   { background: var(--aviso-suave);   color: var(--aviso); }
.estado.exito   { background: var(--exito-suave);   color: var(--exito); }
.estado.peligro { background: var(--peligro-suave); color: var(--peligro); }

.conteos { display: flex; flex-wrap: wrap; gap: var(--esp-8); margin-bottom: var(--esp-24); }

/* ---------- TABLAS ---------- */
.tabla {
  background: var(--fondo-elevado); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-sm);
  overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3);
  padding: var(--esp-12); border-bottom: 1px solid var(--borde); white-space: nowrap;
}
td { padding: var(--esp-12); border-bottom: 1px solid var(--borde); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .16s var(--suavizado); }
tbody tr:hover td { background: var(--fondo-hover); }
td code {
  font-size: 12.5px; padding: 2px var(--esp-6);
  background: var(--fondo-base); border: 1px solid var(--borde);
  border-radius: var(--radio-sm); color: var(--texto-2);
}
/* Los campos de edicion dentro de una tabla no deben pesar mas que el dato
   que acompanan. */
td input, td select { padding: var(--esp-4) var(--esp-8); font-size: 13px; }
.vacio { color: var(--texto-3); text-align: center; padding: var(--esp-32); }

/* ---------- LINEA DE TIEMPO ---------- */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 var(--esp-24); position: relative; }
.linea-tiempo::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 2px; background: var(--borde);
}
.linea-tiempo li { position: relative; padding-bottom: var(--esp-16); }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li::before {
  content: ""; position: absolute; left: calc(-1 * var(--esp-24) + 1px); top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--fondo-base); border: 2px solid var(--acento);
  box-shadow: var(--brillo);
}
.linea-tiempo .cuando { font-size: 11.5px; color: var(--texto-3); }

/* ---------- BLOQUES ---------- */
.tarjeta {
  background: var(--fondo-elevado); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: var(--esp-20);
  box-shadow: var(--sombra-sm); margin-bottom: var(--esp-24);
}
.tarjeta.angosta { max-width: 460px; }
/* Estas tres reglas estaban como atributos style= en las plantillas. Salieron
   de ahi para poder declarar style-src 'self' en el CSP sin 'unsafe-inline'. */
main h2 { font-size: 16px; }
header form { margin: 0; }
.resumen { color: var(--texto-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-8); }
.nota { color: var(--texto-3); font-size: 13px; }
.error {
  background: var(--peligro-suave); color: var(--peligro);
  border: 1px solid var(--peligro); border-radius: var(--radio-sm);
  padding: var(--esp-12); font-size: 13px; margin-bottom: var(--esp-16);
}
/* Mismo bloque que .error con los otros dos tonos semanticos, pero el texto va
   en var(--texto) y no en el color del tono. Medido en tema claro, el verde
   sobre su propio tinte al 12% da 2.9 de contraste, muy por debajo del 4.5 que
   pide AA. El color sigue estando donde se ve de un vistazo, el borde y el
   fondo; la frase, que hay que leerla, va al maximo de contraste. */
.exito-bloque {
  background: var(--exito-suave); color: var(--texto);
  border: 1px solid var(--exito); border-radius: var(--radio-sm);
  padding: var(--esp-12); font-size: 13px; margin-bottom: var(--esp-16);
}
.aviso-bloque {
  background: var(--aviso-suave); color: var(--texto);
  border: 1px solid var(--aviso); border-radius: var(--radio-sm);
  padding: var(--esp-12); font-size: 13px; margin-bottom: var(--esp-16);
}
.formulario { display: flex; flex-wrap: wrap; gap: var(--esp-12); align-items: flex-end; }
.formulario > div { flex: 1; min-width: 180px; }
.formulario button { flex: none; }
/* Una clave se escribe en una columna, no en una fila: en horizontal los tres
   campos quedan tan angostos que no se lee lo que se teclea. */
.formulario-vertical { display: flex; flex-direction: column; gap: var(--esp-16); }
.formulario-vertical button { align-self: flex-start; }
/* La clave generada se muestra una sola vez y hay que copiarla caracter por
   caracter: un 1 leido como l deja al referenciante sin poder entrar. Por eso
   se lee grande, con espaciado entre letras, en var(--texto) y no en verde, y
   con user-select: all para seleccionarla de un solo clic. */
.clave-nueva {
  display: inline-block; font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; user-select: all;
  padding: var(--esp-4) var(--esp-8);
  background: var(--exito-suave); color: var(--texto);
  border: 1px solid var(--exito); border-radius: var(--radio-sm);
}

/* ---------- ACCESO ---------- */
/* Pantalla sola, sin el layout comun (ver body.pelado mas abajo). */
.acceso {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--esp-24); position: relative;
  /* Degradado en vez de un circulo desenfocado: un blur grande dentro de un
     contenedor con overflow hidden se recorta contra la caja y se ve un
     rectangulo de bordes duros, no un resplandor. */
  background: radial-gradient(70% 60% at 72% 12%, var(--acento-suave), transparent 70%);
}
.acceso-tarjeta {
  width: 100%; max-width: 380px; position: relative;
  background: var(--fondo-acrilico); backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-xl);
  padding: var(--esp-40) var(--esp-32); box-shadow: var(--sombra-lg);
  display: grid; gap: var(--esp-16);
}
.acceso-tarjeta button { width: 100%; padding: var(--esp-12); }
.acceso-marca { display: flex; flex-direction: column; align-items: center; gap: var(--esp-8); margin-bottom: var(--esp-8); }
.acceso-marca .logo { height: 54px; width: auto; flex: none; }
.acceso-marca .sub { font-size: 10.5px; color: var(--texto-3); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- MOVIL ---------- */
@media (max-width: 640px) {
  main { padding: var(--esp-20) var(--esp-12); }
  header { padding: var(--esp-12); gap: var(--esp-8); }
  .numeros { grid-template-columns: 1fr 1fr; gap: var(--esp-12); }
  .numero { padding: var(--esp-16); }
  .numero .valor { font-size: 24px; }
}

/* ---------- AVISO DE ERROR ---------- */
/* Fijo y por encima de todo: aparece sobre la pantalla en la que estas, sin
   moverte de sitio ni empujar el contenido. */
#aviso {
  position: fixed; top: var(--esp-16); left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 100; max-width: min(560px, calc(100vw - 32px));
  padding: var(--esp-12) var(--esp-20);
  background: var(--peligro-suave); color: var(--peligro);
  border: 1px solid var(--peligro); border-radius: var(--radio-sm);
  box-shadow: var(--sombra-lg); font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--suavizado), transform .18s var(--suavizado);
}
#aviso.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* La pantalla de acceso va sola: sin barra superior y sin los margenes del
   contenido. Se hace por CSS y no partiendo el layout en dos plantillas
   porque es una clase contra un archivo entero. */
body.pelado > header { display: none; }
body.pelado > main { padding: 0; max-width: none; }

/* ---------- BOTON DE TEMA ---------- */
.tema-circulo {
  width: 38px; height: 38px; flex: none; padding: 0;
  border-radius: 50%; position: relative;
  display: grid; place-items: center;
}
.tema-circulo svg {
  grid-area: 1 / 1; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .25s var(--suavizado), transform .35s var(--suavizado);
}
/* En claro se ofrece la luna, que es a donde te lleva el clic. En oscuro, el
   sol. El icono dice el destino, no el estado actual. */
.tema-circulo .sol  { opacity: 0; transform: rotate(-70deg) scale(.5); }
.tema-circulo .luna { opacity: 1; transform: rotate(0) scale(1); }

:root[data-tema="oscuro"] .tema-circulo .sol  { opacity: 1; transform: rotate(0) scale(1); }
:root[data-tema="oscuro"] .tema-circulo .luna { opacity: 0; transform: rotate(70deg) scale(.5); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema-circulo .sol  { opacity: 1; transform: rotate(0) scale(1); }
  :root:not([data-tema="claro"]) .tema-circulo .luna { opacity: 0; transform: rotate(70deg) scale(.5); }
}

/* En el acceso flota arriba a la derecha, que es donde se busca. */
.acceso .tema-circulo { position: absolute; top: var(--esp-24); right: var(--esp-24); }