/* ============================================================================
   noche_serena.css — TEMA "NOCHE SERENA" + AMBIENTE VIVO del cliente Luzmía
   (DIRECCION_VISUAL_NOCHE_SERENA_2026-07-16 · muestra 5_validacion_final.html)

   Este archivo es la CAPA DE TEMA del cliente: como tokens.css, es fuente de
   valores (hex/rem viven acá a propósito — app.css sigue con su ley de cero
   hex/px). Se carga DESPUÉS de ../tokens/tokens.css y re-mapea la semántica
   --mc-* del modo noche a Noche Serena; el modo claro conserva su paleta crema
   de tokens.css (la dirección decidida es el lienzo nocturno).

   PARAMETRIZADO (las 3 decisiones de Alan giran un switch, no reconstruyen —
   los flags viven en js/config.js: GRADUACION · INTENSIDAD · ICONO_MARCA):
   · GRADUACIÓN  → :root[data-var="intima|serena|sobria"]   (default: serena)
   · INTENSIDAD  → :root[data-int="susurro|sutil|presente"] (default: sutil)
   · ÍCONO       → lo monta ambiente.js (assets/logo/*.svg) (default: minimalista)
   Ejes del ambiente vivo (los setea ambiente.js en el root):
   · HORA        → :root[data-hora="amanecer|manana|tarde|anochecer|noche"]
   · ÁNIMO       → :root[data-humor="serena|carinosa|juguetona|pensativa"]
   · CAPACIDAD   → :root[data-ambiente="pleno|sobrio|quieto"]
   · CALMA       → :root[data-calma="1"] (crisis a la vista / pantalla Cuenta)

   LEY DE RENDIMIENTO (INTERFAZ_INMERSIVA §3.1): la respiración anima SOLO
   transform/opacity (S-tier). Los gradientes/tokens JAMÁS se animan en loop:
   cambian de golpe al cruzar de franja u ánimo y una transition de 1.3s los
   asienta (cambio discreto ≤5 veces al día — no es la trampa de paint).
   Ley de diseño: SUTIL, jamás un semáforo.
   ============================================================================ */

/* ─────────────── 1 · GRADUACIONES (tema-agnósticas; consume el bloque noche) ───────────────
   Los valores exactos de la muestra 5 ([data-var]). Sin atributo = Serena. */
:root {
  /* Serena — el equilibrio (default) */
  --ns-texto-fuerte: #EBE2D4;
  --ns-texto-tenue: #8f8069;
  --ns-vent: #6f5c44;
  --ns-mia-fondo: transparent;
  --ns-mia-texto: #E8DFD1;
  --ns-mia-borde-color: #2e2820;
  --ns-yo-fondo: #25201a;
  --ns-yo-texto: #F1E9DC;
  --ns-inp-fondo: #1a1610;
  --ns-inp-borde: #2b251d;
  --ns-chat-gap: 0.7rem;
  --ns-chat-pad: 1rem;
  --ns-halo-fx: 1;

  /* intensidad del ambiente (data-int; sin atributo = sutil) */
  --ns-int: 1;

  /* hora default = noche (el anti-flash del index y ambiente.js la fijan real) */
  --ns-hora-fondo: #120d09;
  --ns-halo: rgba(224, 163, 94, 0.2);
  --ns-luz: #E0A35E;

  /* ánimo default = serena (ningún tinte; respiración 6.5s) */
  --ns-humor-tinte: transparent;
  --ns-humor-op: 0;
  --ns-ritmo: 6.5s;

  /* piel derivada que app.css consume vía var(--ns-*, fallback) en AMBOS temas */
  --ns-avatar-fondo: transparent;
  --ns-cabecera-fondo: transparent; /* la luz respira DETRÁS del nombre (muestra 5) */
  --ns-cta-glow: 0 0 14px -3px var(--ns-luz);
}

:root[data-var="intima"] {
  --ns-texto-fuerte: #F2E9DC;
  --ns-texto-tenue: #A08B72;
  --ns-vent: #8a6f4e;
  --ns-mia-fondo: #241c14;
  --ns-mia-texto: #EDE3D5;
  --ns-mia-borde-color: transparent;
  --ns-yo-fondo: #3c2d1d;
  --ns-yo-texto: #F7F0E5;
  --ns-inp-fondo: #211a12;
  --ns-inp-borde: #362a1e;
  --ns-chat-gap: 0.55rem;
  --ns-chat-pad: 0.85rem;
  --ns-halo-fx: 1.4;
}

:root[data-var="sobria"] {
  --ns-texto-fuerte: #E6E2DB;
  --ns-texto-tenue: #807a70;
  --ns-vent: #514a3e;
  --ns-mia-fondo: transparent;
  --ns-mia-texto: #E2DED7;
  --ns-mia-borde-color: #262420;
  --ns-yo-fondo: #201e1a;
  --ns-yo-texto: #EEEAE3;
  --ns-inp-fondo: #161410;
  --ns-inp-borde: #28251f;
  --ns-chat-gap: 0.8rem;
  --ns-chat-pad: 1.05rem;
  --ns-halo-fx: 0.62;
}

/* ─────────────── 2 · INTENSIDAD del ambiente (decisión ② de Alan) ─────────────── */
:root[data-int="susurro"] { --ns-int: 0.55; }
:root[data-int="sutil"] { --ns-int: 1; }
:root[data-int="presente"] { --ns-int: 1.5; }

/* ─────────────── 3 · LA HORA (la luz de la ventana cuenta la hora del mundo) ───────────────
   Paletas exactas de la muestra. El tinte vive en la capa .atmosfera-tinte;
   --ns-luz alimenta el acento del tema noche (la ventana, el botón enviar,
   la brasa) — cambia al cruzar franja, la transition 1.3s lo asienta. */
:root[data-hora="amanecer"] {
  --ns-hora-fondo: radial-gradient(130% 90% at 50% 0%, #241a1a, #191310 55%, #150f0c 85%);
  --ns-halo: rgba(230, 150, 140, 0.24);
  --ns-luz: #E3A57E;
}
:root[data-hora="manana"] {
  --ns-hora-fondo: radial-gradient(130% 90% at 50% 0%, #20201c, #17150f 55%, #14120d 85%);
  --ns-halo: rgba(220, 210, 180, 0.22);
  --ns-luz: #D9C9A0;
}
:root[data-hora="tarde"] {
  --ns-hora-fondo: radial-gradient(130% 90% at 50% 0%, #2a1d0f, #1c150d 50%, #160f09 85%);
  --ns-halo: rgba(224, 163, 94, 0.36);
  --ns-luz: #E8A94E;
}
:root[data-hora="anochecer"] {
  --ns-hora-fondo: radial-gradient(130% 90% at 50% 0%, #241610, #180f0a 52%, #130d08 85%);
  --ns-halo: rgba(214, 120, 80, 0.28);
  --ns-luz: #E0975A;
}
:root[data-hora="noche"] {
  --ns-hora-fondo: #120d09;
  --ns-halo: rgba(224, 163, 94, 0.2);
  --ns-luz: #E0A35E;
}
/* la graduación Íntima suma su halo cálido de fondo encima de la noche */
:root[data-var="intima"][data-hora="noche"] {
  --ns-hora-fondo: radial-gradient(135% 92% at 50% 0%, #271b10 0%, #1a140d 46%, #150f0a 82%);
}

/* ─────────────── 4 · EL ÁNIMO DE MIA (el aire, apenas — jamás semáforo) ───────────────
   El organismo ya vive el ánimo; la interfaz solo lo EXPRESA (ambiente.js →
   setAnimo). El tinte es un overlay soft-light con opacidad ~.15 escalada por
   intensidad × graduación; el ritmo cambia la respiración del halo. */
:root[data-humor="serena"] { --ns-humor-tinte: transparent; --ns-humor-op: 0; --ns-ritmo: 6.5s; }
:root[data-humor="carinosa"] {
  --ns-humor-tinte: radial-gradient(circle at 50% 20%, #e8a0a0, transparent 70%);
  --ns-humor-op: 0.16;
  --ns-ritmo: 8s;
}
:root[data-humor="juguetona"] {
  --ns-humor-tinte: radial-gradient(circle at 50% 25%, #f0c060, transparent 72%);
  --ns-humor-op: 0.15;
  --ns-ritmo: 4.6s;
}
/* MIGRADO 25-jul: era #7088c0 (azul-índigo, a 9° del suelo de marca #1A2140 —
   si el índigo subía a marca heredaba "Mia melancólica"). Ahora #57A3B5 azul
   petróleo (Δh 68°): sigue frío e introspectivo, pero es un frío PROPIO del
   ánimo, no el de la marca. Regla: el ámbar es la marca, el índigo es el
   SUELO, los ánimos viven encima. Careo medido (ΔE₀₀ + compuestos soft-light):
   cloud/MC_MARCA/MUESTRA_ANIMO_PENSATIVA_2026-07-25.html */
:root[data-humor="pensativa"] {
  --ns-humor-tinte: radial-gradient(circle at 50% 30%, #57A3B5, transparent 72%);
  --ns-humor-op: 0.17;
  --ns-ritmo: 9s;
}

/* ─────────────── 5 · EL TEMA NOCHE = NOCHE SERENA (re-mapa de --mc-*) ───────────────
   Mismos selectores que tokens.css, cargado después → gana la cascada.
   :not([data-tema="claro"]) para que el claro explícito del usuario conserve
   su crema de tokens.css. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    /* UN SOLO NEGRO (veredicto CEO 28-jul): #17120d = color.paleta.noche de
       tokens.json — el #16130F viejo murió, la app y las webs comparten negro */
    --mc-color-fondo-base: #17120d;
    --mc-color-fondo-elevado: #1a1610;
    --mc-color-fondo-blur-overlay: #17120db8;
    --mc-color-texto-primario: var(--ns-texto-fuerte);
    --mc-color-texto-secundario: var(--ns-texto-tenue);
    --mc-color-texto-sobre-acento: #17110A;
    --mc-color-texto-realce-display: var(--ns-luz);
    --mc-color-burbuja-mia-fondo: var(--ns-mia-fondo);
    --mc-color-burbuja-mia-texto: var(--ns-mia-texto);
    --mc-color-burbuja-usuario-fondo: var(--ns-yo-fondo);
    --mc-color-burbuja-usuario-texto: var(--ns-yo-texto);
    --mc-color-acento-base: var(--ns-luz);
    --mc-color-borde-separador: var(--ns-inp-borde);
    /* estados: familia existente, ya AA sobre el lienzo carbón */
    --mc-color-estado-exito: #96B295;
    --mc-color-estado-atencion: #E0A35E;
    --mc-color-estado-error: #D97B62;
  }
}

:root[data-tema="noche"] {
  --mc-color-fondo-base: #17120d;
  --mc-color-fondo-elevado: #1a1610;
  --mc-color-fondo-blur-overlay: #17120db8;
  --mc-color-texto-primario: var(--ns-texto-fuerte);
  --mc-color-texto-secundario: var(--ns-texto-tenue);
  --mc-color-texto-sobre-acento: #17110A;
  --mc-color-texto-realce-display: var(--ns-luz);
  --mc-color-burbuja-mia-fondo: var(--ns-mia-fondo);
  --mc-color-burbuja-mia-texto: var(--ns-mia-texto);
  --mc-color-burbuja-usuario-fondo: var(--ns-yo-fondo);
  --mc-color-burbuja-usuario-texto: var(--ns-yo-texto);
  --mc-color-acento-base: var(--ns-luz);
  --mc-color-borde-separador: var(--ns-inp-borde);
  --mc-color-estado-exito: #96B295;
  --mc-color-estado-atencion: #E0A35E;
  --mc-color-estado-error: #D97B62;
}

/* en claro, la piel derivada vuelve a su casa (el halo/CTA de la luz es nocturno) */
:root[data-tema="claro"] {
  --ns-avatar-fondo: var(--mc-color-burbuja-mia-fondo);
  --ns-cabecera-fondo: var(--mc-color-fondo-base);
  --ns-cta-glow: none;
  --ns-mia-borde-color: transparent;
  --ns-chat-gap: var(--mc-espaciado-x2);
  --ns-chat-pad: var(--mc-espaciado-x4);
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="noche"]) {
    --ns-avatar-fondo: var(--mc-color-burbuja-mia-fondo);
    --ns-cabecera-fondo: var(--mc-color-fondo-base);
    --ns-cta-glow: none;
    --ns-mia-borde-color: transparent;
    --ns-chat-gap: var(--mc-espaciado-x2);
    --ns-chat-pad: var(--mc-espaciado-x4);
  }
}

/* ─────────────── 6 · LA CAPA DE ATMÓSFERA (ambiente.js la construye) ───────────────
   Tres planos fijos DETRÁS de todo (z = --mc-z-fondo-espacio), pointer-events
   none. El contenido scrollea encima de la luz quieta = profundidad gratis. */
.atmosfera {
  position: fixed;
  inset: 0;
  z-index: var(--mc-z-fondo-espacio);
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0s 0.6s;
}

/* el tinte de la hora: se pinta una vez por franja; 1.3s lo asienta */
.atmosfera-tinte {
  position: absolute;
  inset: 0;
  background: var(--ns-hora-fondo);
  transition: background 1.3s ease;
}

/* la ventana que respira: SOLO transform/opacity (S-tier); blur 9px ≤ 10px */
.atmosfera-halo {
  position: absolute;
  top: 2%;
  left: 50%;
  width: 82%;
  height: 32%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--ns-halo), transparent 70%);
  filter: blur(9px);
  transition: background 1.3s ease;
  animation: ns-latir var(--ns-ritmo, 6.5s) ease-in-out infinite;
}

@keyframes ns-latir {
  0%, 100% {
    opacity: calc(0.55 * var(--ns-int, 1) * var(--ns-halo-fx, 1));
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: min(1, calc(1 * var(--ns-int, 1) * var(--ns-halo-fx, 1)));
    transform: translateX(-50%) scale(1.05);
  }
}

/* el aire del ánimo: overlay soft-light, opacidad escalada, jamás un banner */
.atmosfera-humor {
  position: absolute;
  inset: 0;
  background: var(--ns-humor-tinte, transparent);
  opacity: calc(var(--ns-humor-op, 0) * var(--ns-int, 1) * var(--ns-halo-fx, 1));
  mix-blend-mode: soft-light;
  transition: background 1.3s ease, opacity 1.3s ease;
}

/* en tema claro la atmósfera existe pero como un rumor: el tinte nocturno se
   retira (ensuciaría la crema) y quedan solo la luz cálida y el aire del ánimo */
:root[data-tema="claro"] .atmosfera { opacity: 0.35; }
:root[data-tema="claro"] .atmosfera-tinte { visibility: hidden; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="noche"]) .atmosfera { opacity: 0.35; }
  :root:not([data-tema="noche"]) .atmosfera-tinte { visibility: hidden; }
}

/* ─────────────── 7 · DEGRADACIÓN POR CAPACIDAD (la atmósfera jamás janquea el chat) ───────────────
   Pleno = todo · Sobrio = tintes estáticos sin respiración · Quieto = chat puro. */
:root[data-ambiente="sobrio"] .atmosfera-halo {
  animation: none;
  opacity: calc(0.55 * var(--ns-int, 1) * var(--ns-halo-fx, 1));
}
:root[data-ambiente="sobrio"] .atmosfera-tinte,
:root[data-ambiente="sobrio"] .atmosfera-halo,
:root[data-ambiente="sobrio"] .atmosfera-humor { transition: none; }

:root[data-ambiente="quieto"] .atmosfera { display: none; }

/* calma por diseño (crisis / pantallas serias): la atmósfera se retira con
   dignidad — se desvanece, no desaparece de golpe. La respiración además se
   PAUSA (nada anima invisible: cero trabajo del compositor en el momento serio) */
:root[data-calma="1"] .atmosfera {
  opacity: 0;
  visibility: hidden;
}
:root[data-calma="1"] .atmosfera-halo { animation-play-state: paused; }

/* defensa en profundidad: aunque el nivel no haya caído aún a Quieto */
@media (prefers-reduced-motion: reduce) {
  .atmosfera-halo { animation: none; }
}

/* ─────────────── 8 · LA MARCA: ícono-ventana + wordmark tilde-brasa ───────────────
   Los SVG viven en assets/logo/ (fuente única de la geometría); ambiente.js
   monta el elegido (config.js: ICONO_MARCA) en cada slot .icono-marca. */
.icono-marca {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
}
.icono-marca svg,
.icono-marca .icono-marca-img { width: 100%; height: 100%; display: block; }

/* el ícono en el hábitat del onboarding: la vírgula/ventana ámbar prendida
   sobre el SUELO de la marca — índigo real (--mc-color-marca-suelo = paleta
   .indigo #1A2140, unificado 25-jul: antes el índigo del logo no existía en
   el producto). El suelo es invariante en ambos temas: no cambia con la luz. */
.ob-avatar {
  background: radial-gradient(120% 100% at 50% 12%, #242C55, var(--mc-color-marca-suelo) 72%);
}
.ob-avatar .icono-marca-img {
  width: var(--mc-espaciado-x12);
  height: var(--mc-espaciado-x12);
  display: block;
}

/* el sello de marca al pie del onboarding (wordmark reutilizable en acción) */
.ob-marca {
  display: flex;
  justify-content: center;
  padding-top: var(--mc-espaciado-x2);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  color: var(--mc-color-texto-secundario);
}

/* wordmark "Luzmía": serif display + la tilde de la í = una brasa que respira */
.wordmark {
  font-family: var(--mc-tipografia-familia-display);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  letter-spacing: 0.02em;
  color: var(--mc-color-texto-primario);
}

.wordmark-i {
  position: relative;
  display: inline-block;
}

.wordmark-flama {
  position: absolute;
  left: 50%;
  top: -0.42em;
  width: 0.34em;
  height: 0.46em;
  transform: translateX(-50%) rotate(-8deg);
  background: radial-gradient(60% 60% at 50% 65%, #F6C87E, #E0A35E 60%, #C2683F 100%);
  border-radius: 52% 52% 50% 50% / 68% 68% 40% 40%;
  box-shadow: 0 0 10px 1px rgba(224, 163, 94, 0.7);
  animation: ns-brillo 4.5s ease-in-out infinite;
}

@keyframes ns-brillo {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) rotate(-8deg) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) rotate(-8deg) scale(1.08); }
}

/* la brasa se queda quieta (encendida) si el ambiente no respira o hay calma */
:root[data-ambiente="sobrio"] .wordmark-flama,
:root[data-ambiente="quieto"] .wordmark-flama,
:root[data-calma="1"] .wordmark-flama { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .wordmark-flama { animation: none; }
}

/* ─────────────── 9 · SUAVIDAD DEL CAMBIO (solo en Pleno; cambio discreto) ───────────────
   Al girar graduación/hora, la piel se asienta en 1.3s. Solo elementos a la
   vista repintan (content-visibility poda el resto); en Sobrio/Quieto el
   cambio es seco (cero trabajo extra en gama baja). */
:root[data-ambiente="pleno"] .burbuja,
:root[data-ambiente="pleno"] .chat-campo,
:root[data-ambiente="pleno"] .chat-enviar,
:root[data-ambiente="pleno"] .titulo-mia,
:root[data-ambiente="pleno"] .presencia {
  transition: background-color 1.3s ease, color 1.3s ease, border-color 1.3s ease;
}

/* ─────────────── 10 · LA VENTANA (mundo.js · VENTANA_CCTV) ───────────────
   La luz del marco cuenta DOS relojes a la vez, sin un timer propio:
   · [data-franja]   = la franja del MUNDO DE ELLA (la manda el organismo)
   · :root[data-hora] = la hora real de acá (la mueve ambiente.js) → veladura
   Ley intacta: los tintes cambian de golpe al cruzar franja y la transition
   de 1.3s los asienta — JAMÁS un gradiente animado en loop. Las pieles de
   estado son serenas y honestas (una cámara en reposo es oscura en cualquier
   tema): penumbra al dormir, telón en privacidad, estática quieta sin señal. */

.ventana-piel { transition: background 1.3s ease, opacity 1.3s ease; }

/* la escena base por franja de SU mundo (sin frame: el aire del espacio) */
.ventana-marco[data-franja="dia"] .ventana-piel {
  background: linear-gradient(180deg, #dfe9ee 0%, #cfc5ae 78%, #b3a78e 100%);
}
.ventana-marco[data-franja="tarde"] .ventana-piel {
  background: linear-gradient(180deg, #f0cf9a 0%, #cf9c60 70%, #a97c4e 100%);
}
.ventana-marco[data-franja="noche"] .ventana-piel {
  background:
    radial-gradient(42% 34% at 72% 40%, rgba(232, 169, 78, 0.32), transparent 70%),
    linear-gradient(180deg, #161d29 0%, #1d1812 72%, #241d14 100%);
}
.ventana-marco[data-franja="madrugada"] .ventana-piel {
  background: linear-gradient(180deg, #0b0e14 0%, #12100d 100%);
}

/* pieles de ESTADO (mandan sobre la franja: la dignidad va primero) */
/* reposo: su descanso no se mira, se respeta — penumbra tibia */
.ventana-marco[data-estado="reposo"] .ventana-piel {
  background:
    radial-gradient(46% 36% at 30% 62%, rgba(224, 163, 94, 0.10), transparent 72%),
    linear-gradient(180deg, #0c0a08 0%, #14100b 100%);
}
/* reservado: lo que se guarda para ella — telón sereno, jamás "falla" */
.ventana-marco[data-estado="reservado"] .ventana-piel {
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, #171310 0%, #100d0a 100%);
}
/* callada: no se alcanza a asomar — quieto y digno (el texto ya lo cuenta) */
.ventana-marco[data-estado="callada"] .ventana-piel {
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.028) 0px, rgba(255, 255, 255, 0.028) 1px,
      rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3px),
    linear-gradient(180deg, #1d1c1a 0%, #141312 100%);
}
/* abierta: manda la luz de SU franja (el aire de su ánimo), sin capa extra */

/* la veladura de la hora real de ACÁ (el halo que ya mueve ambiente.js):
   micro-variación viva — abrir la app en tu tarde y en tu noche no se ve igual */
.ventana-marco::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 85% at 50% 0%, var(--ns-halo), transparent 62%);
  mix-blend-mode: soft-light;
  transition: background 1.3s ease;
}

/* el pie del estado: legible sobre piel oscura en ambos temas */
.ventana-pie {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(8, 6, 4, 0.62) 58%, rgba(8, 6, 4, 0.78) 100%);
}
.ventana-registro { color: #f0e6d6; }
.ventana-linea { color: #e8dfd1; }

/* en calma o gama baja la ventana se queda quieta (cambio seco, cero extra) */
:root[data-ambiente="sobrio"] .ventana-piel,
:root[data-ambiente="quieto"] .ventana-piel,
:root[data-calma="1"] .ventana-piel,
:root[data-ambiente="sobrio"] .ventana-marco::after,
:root[data-ambiente="quieto"] .ventana-marco::after,
:root[data-calma="1"] .ventana-marco::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ventana-piel, .ventana-marco::after { transition: none; }
}