/* ---------------------------------------------------------------------------
 * BASIS NETWORK — CAPA DE MARCA COMPARTIDA
 *
 * Un solo sistema de diseño para todo lo que Basis pone delante de una persona
 * fuera de la landing: hoy el faucet y la cartera; mañana lo que venga. Los
 * valores no se inventan aquí, se copian de la fuente de verdad, que es
 * `frontend_landing/src/styles/globals.css` + `tailwind.config.ts`:
 *
 *     cian  #00FFCC     cielo #00CCFF
 *     tinta #0B2540     tinta suave #0F2A47
 *     tipo  General Sans (texto y titulares) / JetBrains Mono (datos)
 *
 * ── DOS TEMAS, Y POR QUÉ ───────────────────────────────────────────────────
 *
 * La landing es solo clara. Estas dos piezas no pueden serlo: una cartera se
 * abre veinte veces al día y un faucet se usa a las dos de la mañana. Así que
 * el tema oscuro NO es una inversión inventada: usa las superficies que la
 * propia marca ya tiene en oscuro —el azul del footer (#0B2540) como papel y
 * el inkSoft (#0F2A47) como panel—, que es exactamente lo que hace el
 * explorador en `basis-explorer/brand/www/brand.css`. El claro manda: es el que
 * tiene que parecerse a basisnetwork.com.co abierto en la pestaña de al lado.
 *
 * ── LA REGLA DEL CIAN ──────────────────────────────────────────────────────
 *
 * #00FFCC da 1,4:1 sobre blanco. Medido, no estimado. Sirve como RELLENO con
 * texto tinta encima (el botón cian de la landing), y no sirve como texto ni
 * como enlace sobre claro. Para eso está `--enlace`, que en claro es el paso
 * 600 de la rampa de marca (#0A7299, 4,7:1 sobre blanco) y en oscuro sí puede
 * ser cian brillante. Quien añada un color aquí que lo compruebe antes.
 *
 * Los tres colores semánticos —bien, aviso, error— se desaturan hacia la
 * paleta pero NO se llevan al eje de marca: recolorear un fallo por estética
 * es hacer que la interfaz mienta.
 * ------------------------------------------------------------------------- */

:root {
  /* ── Marca, en crudo. No usar directamente para texto: ver la regla del cian. */
  --basis-cian: #00FFCC;
  --basis-cielo: #00CCFF;
  --basis-tinta: #0B2540;
  --basis-tinta-suave: #0F2A47;

  /* ── Rampa de marca. Del cian al azul de noche, pasando por tonos que sí
        aguantan texto. Los pasos 600 y 700 son los únicos legibles sobre
        blanco a tamaño de párrafo. */
  --rampa-50:  #ECFBFA;
  --rampa-100: #CFF5F1;
  --rampa-200: #A5EBE8;
  --rampa-300: #6FDCE0;
  --rampa-400: #22C3D6;
  --rampa-500: #0C9EC4;
  --rampa-600: #0A7299;
  --rampa-700: #0B5A79;
  --rampa-800: #0D4460;
  --rampa-900: #0B2540;

  /* ── Superficies (claro) */
  --superficie-base: #FAFAFA;
  --superficie-alta: #FFFFFF;
  --superficie-vidrio: rgba(255, 255, 255, 0.72);
  --superficie-hundida: #F2F6F9;
  --superficie-noche: #0B2540;
  --superficie-noche-alta: #0F2A47;

  /* ── Líneas */
  --linea: rgba(11, 37, 64, 0.08);
  --linea-fuerte: rgba(11, 37, 64, 0.16);

  /* ── Texto */
  --texto-fuerte: #0B2540;
  --texto: #18181B;
  --texto-medio: #52525B;
  --texto-suave: #71717A;
  --texto-tenue: #A1A1AA;
  --enlace: #0A7299;
  --enlace-hover: #0B5A79;

  /* ── Tintes translúcidos, los mismos de la landing */
  --tinte-cian-fuerte: rgba(0, 255, 204, 0.20);
  --tinte-cian-medio:  rgba(0, 255, 204, 0.10);
  --tinte-cian-suave:  rgba(0, 255, 204, 0.05);
  --tinte-cielo-fuerte: rgba(0, 204, 255, 0.20);
  --tinte-cielo-medio:  rgba(0, 204, 255, 0.10);
  --tinte-cielo-suave:  rgba(0, 204, 255, 0.05);

  /* ── Semánticos */
  --bien: #0F7A5A;
  --bien-fondo: #E4F5EF;
  --bien-linea: rgba(15, 122, 90, 0.28);
  --aviso: #8A5D0A;
  --aviso-fondo: #FBF1DC;
  --aviso-linea: rgba(138, 93, 10, 0.28);
  --error: #B3382B;
  --error-fondo: #FBE8E5;
  --error-linea: rgba(179, 56, 43, 0.28);

  /* ── Retícula de puntos del fondo */
  --punto-color: rgba(11, 37, 64, 0.05);
  --punto-tamano: 1px;
  --punto-paso: 28px;

  /* ── Sombras, echadas en tinta y no en negro neutro */
  --sombra-vidrio: 0 8px 24px 0 rgba(11, 37, 64, 0.06);
  --sombra-alzada: 0 14px 32px -8px rgba(11, 37, 64, 0.12);
  --sombra-boton: 0 4px 14px -2px rgba(11, 37, 64, 0.25);
  --sombra-boton-cian: 0 4px 14px -2px rgba(0, 255, 204, 0.35);

  /* ── Radios. La landing es un sistema de pastillas y tarjetas blandas. */
  --radio-sm: 0.5rem;
  --radio: 0.75rem;
  --radio-md: 1rem;
  --radio-lg: 1.5rem;
  --radio-pastilla: 999px;

  /* ── Medidas de los controles. Redefinirlas es lo único que hace falta para
        comprimir el sistema entero en un popup de 360 px. */
  --boton-py: 0.875rem;
  --boton-px: 1.5rem;
  --boton-alto: 2.75rem;
  --boton-texto: 0.9375rem;
  --campo-py: 0.75rem;
  --campo-px: 1rem;

  /* ── Tipografías */
  --tipo-texto: 'General Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --tipo-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

/* El tema oscuro se declara dos veces a propósito: una para quien lo lleva
   puesto en el sistema y no ha elegido nada, y otra para quien lo elige a mano
   con `data-tema`. Solo se redefinen VARIABLES; ningún componente de más abajo
   se estiliza dentro de estos bloques, porque entonces el estado «sin marcar»
   —que es el de la mayoría— se quedaría sin la mitad de los colores. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --superficie-base: #0B2540;
    --superficie-alta: #0F2A47;
    --superficie-vidrio: rgba(15, 42, 71, 0.72);
    --superficie-hundida: #081C31;
    --superficie-noche: #081C31;
    --superficie-noche-alta: #0F2A47;

    --linea: rgba(255, 255, 255, 0.10);
    --linea-fuerte: rgba(255, 255, 255, 0.22);

    --texto-fuerte: #FFFFFF;
    --texto: #E7EEF5;
    --texto-medio: #C2CDD9;
    --texto-suave: #8FA0B3;
    --texto-tenue: #7089A0;
    --enlace: #46E5FF;
    --enlace-hover: #8FF2E4;

    --bien: #3DDC97;
    --bien-fondo: rgba(61, 220, 151, 0.10);
    --bien-linea: rgba(61, 220, 151, 0.32);
    --aviso: #E9A23B;
    --aviso-fondo: rgba(233, 162, 59, 0.10);
    --aviso-linea: rgba(233, 162, 59, 0.32);
    --error: #FF8A7A;
    --error-fondo: rgba(255, 138, 122, 0.10);
    --error-linea: rgba(255, 138, 122, 0.32);

    --punto-color: rgba(255, 255, 255, 0.045);

    --sombra-vidrio: 0 8px 24px 0 rgba(0, 0, 0, 0.28);
    --sombra-alzada: 0 14px 32px -8px rgba(0, 0, 0, 0.42);
    --sombra-boton: 0 4px 14px -2px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}

:root[data-tema="oscuro"] {
  --superficie-base: #0B2540;
  --superficie-alta: #0F2A47;
  --superficie-vidrio: rgba(15, 42, 71, 0.72);
  --superficie-hundida: #081C31;
  --superficie-noche: #081C31;
  --superficie-noche-alta: #0F2A47;

  --linea: rgba(255, 255, 255, 0.10);
  --linea-fuerte: rgba(255, 255, 255, 0.22);

  --texto-fuerte: #FFFFFF;
  --texto: #E7EEF5;
  --texto-medio: #C2CDD9;
  --texto-suave: #8FA0B3;
  --texto-tenue: #7089A0;
  --enlace: #46E5FF;
  --enlace-hover: #8FF2E4;

  --bien: #3DDC97;
  --bien-fondo: rgba(61, 220, 151, 0.10);
  --bien-linea: rgba(61, 220, 151, 0.32);
  --aviso: #E9A23B;
  --aviso-fondo: rgba(233, 162, 59, 0.10);
  --aviso-linea: rgba(233, 162, 59, 0.32);
  --error: #FF8A7A;
  --error-fondo: rgba(255, 138, 122, 0.10);
  --error-linea: rgba(255, 138, 122, 0.32);

  --punto-color: rgba(255, 255, 255, 0.045);

  --sombra-vidrio: 0 8px 24px 0 rgba(0, 0, 0, 0.28);
  --sombra-alzada: 0 14px 32px -8px rgba(0, 0, 0, 0.42);
  --sombra-boton: 0 4px 14px -2px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* ===========================================================================
   BASE
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` tiene que ganarle a cualquier `display` de este fichero. Sin esto,
   un `.progreso[hidden]` con `display:flex` se queda VISIBLE: el atributo pinta
   `display:none` con especificidad de agente de usuario y lo tumba la primera
   clase que pase por ahí. Es la clase de fallo que no rompe nada y solo se ve
   en una captura. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--tipo-texto);
  /* Las alternativas estilísticas que la landing activa: `ss01` cambia la «a»
     de doble piso, `cv11` afina los números. Si la fuente no llega, no pasa
     nada: son ajustes, no requisitos. */
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  color: var(--texto);
  background-color: var(--superficie-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* El papel de la marca: retícula de puntos y dos manchas de luz, cian arriba a
   la izquierda y cielo abajo a la derecha. Es lo primero que hace que una
   página se reconozca como Basis antes de leer una sola palabra. */
.papel-basis {
  background-image:
    radial-gradient(circle at var(--punto-paso) var(--punto-paso), var(--punto-color) var(--punto-tamano), transparent 0),
    radial-gradient(800px 320px at 12% 6%, var(--tinte-cian-medio), transparent 70%),
    radial-gradient(900px 380px at 88% 32%, var(--tinte-cielo-medio), transparent 70%);
  background-size: var(--punto-paso) var(--punto-paso), 100% 100%, 100% 100%;
  background-attachment: scroll, fixed, fixed;
}

a { color: var(--enlace); text-underline-offset: 3px; }
a:hover { color: var(--enlace-hover); }

:focus-visible {
  outline: 2px solid var(--rampa-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===========================================================================
   TIPOGRAFÍA
   =========================================================================== */

.eyebrow {
  font-family: var(--tipo-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin: 0;
}

.eyebrow-fuerte { color: var(--texto-fuerte); font-weight: 600; }

/* Fila de eyebrow con el punto cian delante, como en las secciones de la
   landing. El punto es decorativo: no lleva texto. */
.eyebrow-fila { display: flex; align-items: center; gap: 0.75rem; }
.eyebrow-fila::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  border-radius: var(--radio-pastilla);
  background-color: var(--basis-cian);
}

.display-xl {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--texto-fuerte);
  text-wrap: balance;
  margin: 0;
}

.display-md {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--texto-fuerte);
  text-wrap: balance;
  margin: 0;
}

.lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto-medio);
  margin: 0;
}

.pista {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--texto-suave);
  margin: 0;
}

/* El degradado de marca sobre texto. Va sobre una palabra, no sobre un párrafo:
   así se usa en la landing y así conserva la fuerza. */
.palabra-degradada {
  background: linear-gradient(95deg, #00FFCC 0%, #46E5FF 45%, #00CCFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono { font-family: var(--tipo-mono); font-size: 0.875rem; letter-spacing: 0.01em; }
.mono-dato { font-family: var(--tipo-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.numeros { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   BOTONES — pastillas, como en la landing
   =========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--tipo-texto);
  font-weight: 500;
  font-size: var(--boton-texto);
  letter-spacing: -0.005em;
  line-height: 1.2;
  padding: var(--boton-py) var(--boton-px);
  min-height: var(--boton-alto);
  border: 1px solid transparent;
  border-radius: var(--radio-pastilla);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease,
              color 0.2s ease, border-color 0.2s ease;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* El cian como relleno con tinta encima: 14:1. Es el CTA de la marca. */
.btn-cian {
  background-color: var(--basis-cian);
  color: var(--basis-tinta);
  font-weight: 600;
  box-shadow: var(--sombra-boton-cian);
}
.btn-cian:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px -4px rgba(0, 255, 204, 0.5); }

.btn-tinta {
  background-color: var(--basis-tinta);
  color: #ffffff;
  box-shadow: var(--sombra-boton);
}
.btn-tinta:hover:not(:disabled) { background-color: #08203a; transform: translateY(-1px); }

.btn-fantasma {
  background-color: transparent;
  color: var(--texto-fuerte);
  border-color: var(--linea-fuerte);
}
.btn-fantasma:hover:not(:disabled) {
  background-color: var(--superficie-vidrio);
  border-color: var(--rampa-500);
  transform: translateY(-1px);
}

/* Enlace con subrayado cian al pasar: el cuarto nivel de la escala de la
   landing, para acciones que no compiten con el botón principal. */
.btn-texto {
  background: none;
  border: none;
  font-family: var(--tipo-texto);
  font-size: 0.875rem;
  color: var(--texto-medio);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.btn-texto:hover { color: var(--texto-fuerte); border-bottom-color: var(--basis-cian); }

/* ===========================================================================
   SUPERFICIES
   =========================================================================== */

.tarjeta {
  background-color: var(--superficie-vidrio);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-vidrio);
}

/* Hilo cian en el borde superior. Marca la tarjeta principal de una página sin
   gritar; se usa una vez, no en todas. */
.tarjeta-hilo { position: relative; overflow: hidden; }
.tarjeta-hilo::before {
  content: "";
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--basis-cian), transparent);
  opacity: 0.55;
}

.tarjeta-plana {
  background-color: var(--superficie-alta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
}

/* ===========================================================================
   CAMPOS
   =========================================================================== */

.campo {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--texto);
  background-color: var(--superficie-alta);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-md);
  padding: var(--campo-py) var(--campo-px);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo::placeholder { color: var(--texto-tenue); }
.campo:focus {
  border-color: var(--basis-cian);
  box-shadow: 0 0 0 4px var(--tinte-cian-fuerte);
}
.campo[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 4px var(--error-fondo);
}
.campo:disabled { opacity: 0.6; cursor: not-allowed; }

.etiqueta {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto-medio);
  margin-bottom: 0.4rem;
}

/* ===========================================================================
   MENSAJES — bien / aviso / error
   =========================================================================== */

.nota {
  border-left: 3px solid;
  border-radius: var(--radio-sm);
  padding: 0.75rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.55;
}
.nota-bien  { background-color: var(--bien-fondo);  border-color: var(--bien);  }
.nota-aviso { background-color: var(--aviso-fondo); border-color: var(--aviso); }
.nota-error { background-color: var(--error-fondo); border-color: var(--error); }

/* ===========================================================================
   CÓDIGO Y DATOS DE CADENA
   =========================================================================== */

code, kbd, samp {
  font-family: var(--tipo-mono);
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

.chip-codigo {
  background-color: var(--tinte-cian-medio);
  border-radius: 4px;
  padding: 0.12em 0.35em;
}

/* ===========================================================================
   MARCA
   =========================================================================== */

.marca-basis {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  user-select: none;
  flex-shrink: 0;
}
.marca-basis .isotipo { height: 1.5rem; width: 1.5rem; flex: none; }
.marca-basis .wordmark { height: 15px; width: auto; }

/* Las dos tintas del wordmark van en el fichero, no en un filtro CSS: se
   enseña una y se esconde la otra según el tema. `hidden` no vale aquí porque
   el atributo lo gana la regla de display. */
.solo-claro { display: initial; }
.solo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .solo-claro { display: none; }
  :root:not([data-tema="claro"]) .solo-oscuro { display: initial; }
}
:root[data-tema="oscuro"] .solo-claro { display: none; }
:root[data-tema="oscuro"] .solo-oscuro { display: initial; }

/* La pastilla que dice en qué red estás. En una devnet esto no es decoración:
   es la diferencia entre perder dinero de mentira y perderlo de verdad. */
.chip-red {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--tipo-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  background-color: var(--superficie-vidrio);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pastilla);
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
.chip-red .punto {
  width: 6px; height: 6px; flex: none;
  border-radius: var(--radio-pastilla);
  background-color: var(--texto-tenue);
}
/* Gris no significa «mal»: significa «todavía no lo sé». Distinguirlo evita
   alarmar a quien abre la página antes de que responda el nodo. */
.chip-red .punto.vivo { background-color: var(--bien); }
.chip-red .punto.muerto { background-color: var(--error); }

/* ===========================================================================
   MOVIMIENTO
   =========================================================================== */

@keyframes basis-aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aparecer { animation: basis-aparecer 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; opacity: 0; }
.retraso-1 { animation-delay: 60ms; }
.retraso-2 { animation-delay: 120ms; }
.retraso-3 { animation-delay: 180ms; }
.retraso-4 { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .aparecer { opacity: 1; }
}