/*
  Radar Alpha — Entrada de la aplicación (app.radar-alpha.com)
  Fecha: 2026-08-20 | Versión: 1.0.0 | Estado: activo

  TODAS las reglas de este archivo cuelgan de `.ra-entrada` (la clase que
  home.html pone en el <body>). No es una manía: `_layout.html` y `base.css`
  los comparten la portada, el login y el registro, y el dashboard comparte
  con ellos los tokens y los componentes. Acotando aquí, esta pantalla puede
  romper sus propias reglas (el `max-width: 640px` de `main`, el relleno de
  96px) sin que ninguna otra se entere. El archivo solo se carga desde
  home.html.

  El problema que resuelve: la entrada se comportaba como una landing —
  cabecera de 135px, fotografía de 320×320 y, debajo de todo, los botones.
  A 375×812 las dos únicas acciones caían en y=839: fuera de pantalla.
  Aquí la pantalla es un panel de acceso y todo entra por encima del
  pliegue.
*/

/* ══════════════════════════════════════════════════════════════════
   Marco de la pantalla
   ══════════════════════════════════════════════════════════════════ */
/* `main` vale 640px de ancho y 96px de relleno vertical para las páginas de
   texto; aquí el panel es el contenido y se ajusta él solo. */
.ra-entrada main {
  max-width: 520px;
  padding: var(--space-4) var(--space-5) var(--space-8);
}

/* Cabecera reducida a lo que es en una puerta: la identidad y el control de
   tema. Sin la navegación (que duplicaba las dos acciones del panel) cabe
   en una sola línea; medía 135px por el salto de "Iniciar sesión / Crear
   cuenta". */
.ra-entrada header.ra-header {
  padding: var(--space-3) var(--space-5);
}
/* `base.css` apila la cabecera en columna por debajo de 480px: hacía falta
   cuando la navegación competía por el ancho. Aquí no hay navegación —
   quedan la marca (148px) y el control de tema (36px), que caben de sobra
   en una línea— y apilarlos dejaba la cabecera en 107px de una pantalla de
   812. Se devuelve a una sola fila SOLO en la entrada. */
@media (max-width: 480px) {
  .ra-entrada header.ra-header {
    flex-direction: row;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Panel de acceso
   ══════════════════════════════════════════════════════════════════ */
.ra-acceso {
  position: relative;
  overflow: hidden;
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border);
  /* `--radius-md`, no `--radius-lg`: es el radio con el que el terminal
     dibuja TODAS sus superficies (`.ra-bloque`, la tira del activo, las
     tarjetas de motor). Con 14px la puerta tenía la esquina más redonda que
     nada de lo que hay detrás, y esa diferencia es justo la que hace que una
     pantalla se lea como "otra web" en vez de como la entrada del mismo
     sistema. */
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-4);
  /* Regla de acento a la izquierda, el mismo recurso que marca la cabecera
     del activo dentro de la app: "esto es Radar Alpha", no una tarjeta. */
  border-left: 3px solid var(--accent);
}

/* Marca de agua: el disco del radar, grande, muy tenue y desvanecido hacia
   fuera. Da la textura de instrumento que la fotografía daba a gritos, sin
   ocupar ni un píxel de composición. `radial-gradient` como máscara para
   que el borde del PNG (que es cuadrado y con fondo propio) no se recorte
   en seco contra el panel. */
/* Corregido el 2026-08-20 tras la auditoría: la opacidad ya era correcta,
   pero la HUELLA no. A 260px con la esquina a -70/-70 quedaban ~190px de
   disco dentro del panel, con su arco completo visible: se leía como un
   SEGUNDO radar de casi el triple de tamaño justo al lado del que sí es la
   identidad, y una marca debe aparecer una vez por vista.

   Tres ajustes, ninguno de ellos "quitarla":
   - Mucho más grande (440px) y desplazada muy fuera de la esquina, de modo
     que dentro del panel solo entra un FRAGMENTO de la pieza; sin arco
     completo, el ojo lee un campo, no un objeto.
   - Máscara que se desvanece desde el propio centro (no desde el 45%), así
     el borde circular nunca llega a resolverse.
   - Un desenfoque corto que deshace los anillos y la aguja: deja de ser
     "un radar pequeño" para ser la textura del instrumento.
   Sigue ahí y se detecta al inspeccionar; ya no compite en los 3 primeros
   segundos. */
.ra-acceso-radar {
  position: absolute;
  top: -215px;
  right: -175px;
  width: 440px;
  height: 440px;
  background: url("/design/brand/mark-256.png") center / cover no-repeat;
  border-radius: 50%;
  opacity: 0.06;
  filter: blur(7px);
  mask-image: radial-gradient(circle at center, #000 0%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 62%);
  pointer-events: none;
}
/* Sobre fondo claro el disco es oscuro y pesa más: se atenúa aún más. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ra-acceso-radar { opacity: 0.04; }
}
:root[data-theme="light"] .ra-acceso-radar { opacity: 0.04; }

/* ── Identidad y modo ──────────────────────────────────────────────── */
.ra-acceso-cabecera {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* El disco a 56px: presencia suficiente para ser la identidad del sistema,
   lejos de los 320px en los que era el protagonista de la pantalla. El PNG
   trae su propio fondo cuadrado, así que se recorta en círculo — igual que
   hace `.ra-brand-img` en la cabecera. */
/* El disco a 64px: es la identidad del sistema y tiene que sostener la
   esquina superior del panel él solo. Lejos, aun así, de los 320px en los
   que era el protagonista de la pantalla. El PNG trae su propio fondo
   cuadrado, así que se recorta en círculo — igual que `.ra-brand-img`. */
.ra-acceso-disco {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border), 0 0 22px -6px var(--accent);
}
/* Indicador de modo. Antes era texto suelto atenuado, que se leía como un
   pie de foto; ahora es una pastilla con filete, monoespaciada y en
   versales, el mismo lenguaje con el que la aplicación marca estados
   (`.ra-status--pastilla`). Sigue siendo discreta —no ocupa más ancho del
   que necesita— pero ya se lee como el estado de un instrumento y no como
   un reclamo. */
.ra-acceso-modo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 3px var(--space-2) 3px 7px;
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--fg);
  min-width: 0;
}
.ra-acceso-punto {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ── Texto ─────────────────────────────────────────────────────────── */
/* Entre el titular (24px) y el párrafo (16px) no había escalón real: el
   párrafo pesaba lo mismo que el cuerpo de la página y el mensaje principal
   no mandaba. El titular sube a 28px con interlínea corta y el párrafo se
   aprieta un punto — mismo texto, jerarquía inequívoca. */
.ra-entrada .ra-acceso h1 {
  position: relative;
  margin: 0 0 var(--space-2);
  /* Escala con el ancho en vez de un salto fijo: a 28px clavados el titular
     pasaba de dos líneas a tres en cuanto la pantalla bajaba de 375px. El
     mínimo de 25px conserva el escalón sobre el párrafo de 16. */
  font-size: clamp(25px, 7.2vw, 30px);
  line-height: 1.15;
  letter-spacing: var(--letter-spacing-tight);
}
.ra-entrada .ra-acceso .lead {
  position: relative;
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* ── Acciones ──────────────────────────────────────────────────────── */
/* En móvil son dos barras a todo el ancho, una debajo de otra: la puerta
   principal primero. Se reparten en una fila en cuanto hay sitio. */
.ra-entrada .ra-cta-group {
  position: relative;
  display: grid;
  gap: var(--space-2);
}
.ra-entrada .ra-cta-group .btn {
  width: 100%;
  padding: 12px var(--space-4);
  font-size: var(--text-base);
}
@media (min-width: 480px) {
  .ra-entrada .ra-cta-group {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Los tres pasos del camino real ────────────────────────────────── */
/* Camino hacia el terminal. Tenía el mismo cuerpo de letra que el párrafo
   (16px) y medía 201px frente a los 110px de los botones: el recorrido
   pesaba más que la acción, justo al revés de lo que debe. Ahora es un
   indicador de progreso —tipografía menor, numeración unida por un raíl
   vertical— y los botones recuperan el primer plano. */
.ra-acceso-pasos {
  position: relative;
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: var(--border-width) solid var(--border);
  display: grid;
  gap: var(--space-3);
}
.ra-acceso-pasos li {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--space-3);
  min-width: 0;
}
/* Raíl que une los tres números: convierte tres apuntes sueltos en un
   recorrido. Se dibuja desde cada paso hasta el siguiente, y el último no
   lo pinta. */
.ra-acceso-pasos li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 20px;
  bottom: calc(var(--space-3) * -1);
  width: var(--border-width);
  background: var(--border);
}
.ra-acceso-paso-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-muted);
}
.ra-acceso-paso-t {
  font-size: var(--text-xs);
  color: var(--fg);
  min-width: 0;
}
/* El paso que de verdad bloquea la operativa se distingue: es la respuesta
   a "por qué no puedo comprar todavía", y lleva el mensaje literal que el
   backend devuelve dentro de la app. */
.ra-acceso-paso--clave .ra-acceso-paso-n {
  border-color: var(--accent);
  color: var(--accent);
}
.ra-acceso-paso-d {
  grid-column: 2;
  margin-top: 2px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--fg-muted);
  min-width: 0;
}
.ra-acceso-paso-d a {
  display: inline-block;
  margin-top: 2px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.ra-acceso-paso-d a:hover,
.ra-acceso-paso-d a:focus-visible {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════
   Demostración del producto (2026-09-01)
   ══════════════════════════════════════════════════════════════════
   Segundo panel, mismo lenguaje visual que `.ra-acceso` (borde, radio,
   acento a la izquierda) para que se lea como parte del mismo sistema y
   no como un bloque publicitario insertado. Nunca a más ancho ni con más
   peso que el panel de acceso: la demostración apoya al CTA, no compite
   con él. */
.ra-demo {
  position: relative;
  margin-top: var(--space-4);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
  padding: var(--space-4) var(--space-5);
}
.ra-demo-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.ra-demo-titulo {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  line-height: 1.25;
}
.ra-demo-nota {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: 1.45;
}

/* ── Activo y calidad del dato ────────────────────────────────────── */
.ra-demo-activo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.ra-demo-activo-ticker {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
}
.ra-demo-activo-precio {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

/* ── Lectura del sistema: convicción + métricas ───────────────────── */
.ra-demo-lectura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border);
  margin-bottom: var(--space-3);
}
.ra-demo-conviccion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: none;
}
.ra-demo-conviccion-valor {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
}
.ra-demo-conviccion-valor small {
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  color: var(--fg-muted);
}
.ra-demo-conviccion-etiqueta {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.ra-demo-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  min-width: 0;
}
.ra-demo-metricas dt {
  margin: 0 0 2px;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.ra-demo-metricas dd {
  margin: 0;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}
.ra-demo-razon {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg);
}

/* ── Familias de evidencia (2026-09-01) ────────────────────────────
   Deliberadamente sin tarjetas: cinco líneas de texto, nombre + una frase,
   separadas por un filete superior — el mismo peso visual que un pie de
   sección, nunca un bloque que compita con la evidencia real de abajo. El
   objetivo es nombrar la taxonomía UNA vez aquí; cada fila de evidencia
   solo repite el nombre de su familia (`.ra-evidencia-origen`, ya existe
   en analysis.css), no la descripción entera. */
.ra-demo-familias {
  padding-top: var(--space-3);
  margin-bottom: var(--space-4);
  border-top: var(--border-width) solid var(--border);
}
.ra-demo-familias-intro {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.4;
}
.ra-demo-familias-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1) var(--space-4);
}
.ra-demo-familias-lista li {
  font-size: var(--text-xs);
  line-height: 1.4;
}
.ra-demo-familia-nombre {
  font-weight: var(--font-weight-semibold);
  color: var(--fg);
}
.ra-demo-familia-desc {
  color: var(--fg-muted);
}
.ra-demo-familia-desc::before {
  content: " — ";
}
@media (min-width: 640px) {
  .ra-demo-familias-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Evidencia: reutiliza `.ra-evidencia*` de analysis.css tal cual —
   aquí solo se acota el espaciado exterior de la lista para que encaje en
   el panel más estrecho de la entrada. */
.ra-demo-evidencia-lista {
  margin-bottom: var(--space-4);
}

.ra-demo-cta {
  margin-top: 0;
}
.ra-demo-cta .btn {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   Centrado óptico en pantallas altas (2026-08-20)
   ══════════════════════════════════════════════════════════════════
   El panel colgaba del borde superior: a 1440×900 dejaba 326px muertos
   debajo y a 768×900, 357px. Se leía como un bloque puesto en la mitad de
   arriba de una página, no como una puerta.

   La cabecera y el panel miden lo que miden, así que NO se calcula ningún
   alto a mano: el <body> pasa a ser una columna de la altura del viewport,
   el <main> se queda con lo que sobre y el panel se centra con márgenes
   automáticos. Es el mismo criterio que ya escarmentó a este proyecto
   cuando el buscador se ancló con un `top: 69px` copiado del alto de la
   barra.

   `margin-block: auto` y no `justify-content: center`: si alguna vez el
   contenido fuera más alto que el hueco (un móvil en apaisado), los
   márgenes automáticos se resuelven a cero y el panel sigue empezando
   donde debe, mientras que `center` lo desbordaría por arriba dejando
   inalcanzable su parte superior.

   Condicionado también a la ALTURA: por debajo de 640px de alto no hay
   nada que centrar, solo contenido que cabe justo. */
@media (min-width: 768px) and (min-height: 640px) {
  .ra-entrada {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }
  .ra-entrada main {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* El relleno inferior mayor que el superior es deliberado: el centro
       óptico está algo por encima del geométrico, y con los dos iguales el
       panel parece caído. */
    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
  }
  .ra-entrada .ra-acceso {
    margin-block: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Escritorio
   ══════════════════════════════════════════════════════════════════
   Mismo panel, no otra pantalla: solo respira más y el bloque de pasos se
   reparte en tres columnas. No se convierte en una landing a lo ancho —
   una puerta no gana nada por medir 1200px. */
@media (min-width: 900px) {
  /* Centrado óptico (2026-08-20). El panel colgaba del borde superior y a
     1440×900 dejaba 326px muertos debajo: se leía como un bloque puesto en
     la mitad de arriba de una página, no como una puerta.

     La cabecera y el panel miden lo que miden, así que NO se calcula ningún
     alto a mano: el <body> pasa a ser una columna de la altura del viewport
     y el <main> se queda con lo que sobre, centrando su contenido. Es el
     mismo criterio que ya escarmentó a este proyecto cuando el buscador se
     ancló con un `top: 69px` copiado del alto de la barra.

     El relleno inferior mayor que el superior es deliberado: el centro
     óptico está algo por encima del geométrico, y con los dos iguales el
     panel parece caído. */
  .ra-entrada main {
    max-width: 720px;
  }
  .ra-acceso {
    padding: var(--space-6) var(--space-6) var(--space-5);
  }
  .ra-entrada .ra-acceso h1 { font-size: var(--text-2xl); }
  .ra-entrada .ra-acceso .lead { font-size: var(--text-base); }
  .ra-acceso-pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
  }
  .ra-acceso-pasos li { align-items: start; }
  /* Mismo criterio que en móvil, a la escala del panel de 680px: la pieza
     es mayor que la esquina que ocupa, así que dentro solo entra campo
     desvanecido y nunca un arco reconocible. El tamaño anterior (340 a
     -90/-90) dejaba 250px de disco completo dentro del panel. */
  .ra-acceso-radar {
    width: 560px;
    height: 560px;
    top: -240px;
    right: -200px;
  }
}