/*
 * Sistema visual del portal — deliberadamente monotemático.
 *
 * Esta pantalla no se adapta a "modo claro": el negro carbón y el rojo
 * lacre son parte del concepto (evidencia, chiaroscuro de "El
 * Mensajero"), no una preferencia de color de contenido general. Es una
 * decisión de diseño, no un olvido de tema claro.
 *
 * Tokens (color, tipografía, espaciado, movimiento) vienen de
 * css/tokens.css — Entrega 5. Este archivo solo los consume, no define
 * ninguno nuevo.
 */

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--cf-negro-carbon);
  color: var(--cf-hueso);
  font-family: var(--cf-fuente-sistema);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
  line-height: var(--cf-interlineado);
  -webkit-font-smoothing: antialiased;
}

/* --- lluvia de caracteres (Matrix, paleta rojo lacre) --- */

#lluvia {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--cf-curva-salida);
}

#lluvia.activa {
  /* Más tenue que un efecto de un solo momento a propósito: ahora es
     ambiente persistente durante toda la experiencia, tiene que convivir
     con el texto de lectura, no competir con él. */
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  #lluvia {
    display: none;
  }
}

#portal {
  max-width: var(--cf-columna-lectura);
  margin: 0 auto;
  padding: clamp(var(--cf-espacio-5), 4vw, var(--cf-margen-escritorio)) var(--cf-margen-movil) var(--cf-espacio-8);
}
/* Escritorio no agrega columnas: el padding lateral crece con el ancho de
   pantalla (clamp arriba) y el resto queda como espacio negativo — misma
   columna de lectura siempre (decisión de la Entrega 4). */

#salida p {
  margin: 0 0 0.85em;
}

/* Efecto de escritura tipo terminal — "lengua de código". Puramente
   visual: revela con pasos discretos (no una barrida suave) el mismo
   texto que ya está completo en el DOM desde su creación — ver el
   comentario largo en js/terminal.js sobre por qué el contenido
   accesible nunca depende de esta animación. */
@keyframes cf-revelar-escritura {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

#salida p.efecto-escritura {
  animation: cf-revelar-escritura steps(var(--cf-pasos-escritura, 20)) forwards;
  animation-duration: var(--cf-duracion-escritura, 400ms);
}

.titulo {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cf-hueso);
}

.sistema {
  color: var(--cf-gris-tenue);
}

.enfasis {
  color: var(--cf-rojo-texto);
}

/* Voz narrativa: "alguien te habla" — registro, pertenencia. Nunca se usa
   para estados o datos del sistema (esos se quedan en mono). */
.narrativa {
  font-family: var(--cf-fuente-narrativa);
  color: var(--cf-hueso);
  font-size: 1.05em;
}

.barra {
  letter-spacing: 0.05em;
}

.ayuda {
  color: var(--cf-gris-tenue);
  font-size: 0.85em;
  margin-top: -0.4em;
}

.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;
}

/* --- línea de comando (autenticación) --- */

.linea-prompt {
  display: flex;
  align-items: center;
  gap: 0.6em;
  border-bottom: 1px solid var(--cf-borde-tenue);
  padding: 0.5em 0;
  margin-bottom: 0.6em;
}

.linea-prompt span {
  color: var(--cf-rojo-texto);
}

.linea-prompt input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cf-hueso);
  font: inherit;
  letter-spacing: 0.04em;
  padding: 0.35em 0;
}

.linea-prompt input::placeholder {
  color: var(--cf-gris-tenue);
}

.linea-prompt input:disabled {
  opacity: 0.5;
}

.estado-auth {
  min-height: 1.4em;
}

/* --- enlace de salto (descifrado) --- */

.enlace-salto {
  background: none;
  border: none;
  padding: 0;
  color: var(--cf-gris-tenue);
  font-family: var(--cf-fuente-sistema);
  font-size: 0.78em;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  min-height: 0;
  text-transform: none;
  letter-spacing: normal;
}

.enlace-salto:hover:not(:disabled),
.enlace-salto:focus-visible {
  color: var(--cf-rojo-texto);
}

/* --- fragmento recuperado --- */

.fragmento {
  margin: 1.4em 0;
  padding: 0;
}

.fragmento img,
.fragmento video {
  display: block;
  width: 100%;
  object-fit: cover;
  border: 1px solid var(--cf-borde-tenue);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 20px 60px -20px rgba(122, 14, 20, 0.35);
  background: var(--cf-negro-panel);
}

.fragmento img {
  aspect-ratio: 4 / 5;
}

.fragmento video {
  aspect-ratio: 16 / 9; /* proporción real del video, distinta del placeholder anterior */
}

.fragmento details {
  margin-top: 0.6em;
  color: var(--cf-gris-tenue);
  font-size: 0.88em;
}

.fragmento summary {
  cursor: pointer;
  color: var(--cf-hueso);
  padding: 0.3em 0;
}

.fragmento summary:focus-visible {
  outline: var(--cf-anillo-foco);
  outline-offset: 3px;
}

.fragmento details p {
  margin: 0.5em 0 0;
}

/* --- credencial de portador --- */

.credencial {
  margin: 1.6em 0;
  border: 1px solid var(--cf-hueso);
  padding: var(--cf-espacio-4);
  display: flex;
  flex-direction: column;
  gap: var(--cf-espacio-2);
  max-width: 20rem;
}

.credencial-cabecera {
  display: flex;
  align-items: center;
  gap: var(--cf-espacio-3);
  margin-bottom: var(--cf-espacio-1);
}

.credencial-cabecera img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex-shrink: 0;
}

.credencial-cabecera span {
  font-family: var(--cf-fuente-sistema);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75em;
  color: var(--cf-gris-tenue);
}

.credencial-fila {
  display: flex;
  justify-content: space-between;
  gap: var(--cf-espacio-3);
  font-family: var(--cf-fuente-sistema);
  font-size: 0.78em;
  color: var(--cf-gris-tenue);
}

.credencial-fila b {
  color: var(--cf-hueso);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- botones --- */

button {
  font: inherit;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--cf-hueso);
  border: 1px solid var(--cf-borde-tenue);
  padding: 0.85em 1.2em;
  min-height: var(--cf-objetivo-tactil-min);
  cursor: pointer;
  text-transform: uppercase;
  transition: border-color var(--cf-duracion-estado) var(--cf-curva-salida),
    color var(--cf-duracion-estado) var(--cf-curva-salida);
}

button:hover:not(:disabled) {
  border-color: var(--cf-rojo-texto);
  color: var(--cf-rojo-texto);
}

button:disabled {
  opacity: 0.45;
  cursor: default;
}

button:focus-visible,
input:focus-visible {
  outline: var(--cf-anillo-foco);
  outline-offset: 3px;
}

.boton-terminal {
  display: block;
  width: 100%;
  margin-top: 1.4em;
}

/* --- suscripción voluntaria --- */

.suscripcion {
  margin-top: var(--cf-espacio-5);
  padding-top: var(--cf-espacio-4);
  border-top: 1px dashed var(--cf-borde-tenue);
}

.suscripcion-pregunta {
  background: none;
  border: none;
  padding: 0;
  color: var(--cf-hueso);
  font-family: var(--cf-fuente-narrativa);
  font-size: 1em;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--cf-borde-tenue);
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 0;
  text-transform: none;
  letter-spacing: normal;
}

.suscripcion-pregunta:hover,
.suscripcion-pregunta:focus-visible {
  color: var(--cf-rojo-texto);
}

.suscripcion-forma {
  margin-top: var(--cf-espacio-3);
  display: flex;
  flex-direction: column;
  gap: var(--cf-espacio-3);
}

.suscripcion-privacidad {
  color: var(--cf-gris-tenue);
  font-size: 0.78em;
  margin: 0;
}

/* --- cierre --- */

.marca-cierre {
  margin-top: 2.5em;
  color: var(--cf-gris-tenue);
  opacity: 0.6;
  font-size: 0.8em;
  letter-spacing: 0.2em;
  text-align: center;
}

.aviso-noscript,
.aviso-recuperacion {
  color: var(--cf-hueso);
  font-family: var(--cf-fuente-sistema);
  padding: 2rem;
  text-align: center;
}

/* --- movimiento reducido --- */

@media (prefers-reduced-motion: reduce) {
  #salida p.efecto-escritura {
    animation: none;
    clip-path: none;
  }
  button {
    transition: none;
  }
}