/* ============================================================================
   app.css — cliente web-core de Mia Companion
   LEY (TOKENS_SCHEMA regla madre): nada se pinta hardcodeado. Cada color,
   tamaño, radio, sombra y tempo sale de var(--mc-*) de tokens.css o de un
   calc() sobre esos tokens. CERO hex, CERO px sueltos en este archivo.
   Rendimiento: transform/opacity para animar, content-visibility en burbujas,
   la barra se esconde con transform (jamás display).
   ============================================================================ */

/* ─────────────── composición (derivada SOLO de tokens) ─────────────── */
:root {
  --app-hairline: calc(var(--mc-espaciado-base) / 4);            /* 1 al ras */
  --app-borde-foco: calc(var(--mc-espaciado-base) / 2);
  --app-ancho: min(100%, 34em);                                  /* columna app */
  --app-alto-barra: calc(var(--mc-tactil-target-minimo) + var(--mc-espaciado-x4) + env(safe-area-inset-bottom, 0em));
  --app-alto-input: calc(var(--mc-tactil-target-minimo) + var(--mc-espaciado-x6));

  /* AA (4.5:1) en tema claro SIN tocar tokens: el acento usado como texto o
     como fondo de CTA se ancla hacia la tinta la fracción justa (verificado
     numéricamente contra los hex de tokens.css; en noche los mismos mixes
     ACLARAN el acento sobre fondo oscuro, así que también suman). Se derivan
     de vars del sistema → siguen al tema solos. */
  --app-tinta-realce-aa: color-mix(in srgb, var(--mc-color-texto-realce-display) 54%, var(--mc-color-texto-primario));
  --app-tinta-acento-aa: color-mix(in srgb, var(--mc-color-acento-base) 54%, var(--mc-color-texto-primario));
  --app-fondo-acento-aa: color-mix(in srgb, var(--mc-color-acento-base) 75%, var(--mc-color-texto-primario));
}

/* solo para lectores de pantalla: en el árbol, fuera de la vista */
.sr-solo {
  position: absolute;
  width: var(--app-hairline);
  height: var(--app-hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ───────────────────────────── base ───────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; }

html { height: 100%; }

body {
  height: 100%;
  background: var(--mc-color-fondo-base);
  color: var(--mc-color-texto-primario);
  font-family: var(--mc-tipografia-familia-ui);
  font-size: var(--mc-tipografia-tamano-cuerpo);
  font-weight: var(--mc-tipografia-peso-regular);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--mc-motion-duracion-corta) var(--mc-motion-easing-suave);
  overflow: hidden; /* el scroll vive en la lista del chat / cada pantalla */
}

button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible {
  outline: var(--app-borde-foco) solid var(--mc-color-acento-base);
  outline-offset: var(--app-borde-foco);
  border-radius: var(--mc-radios-control);
}

.sin-js {
  padding: var(--mc-espaciado-x6);
  text-align: center;
  color: var(--mc-color-texto-secundario);
}

/* ───────────────────────────── shell ───────────────────────────── */
.app {
  height: 100vh;
  height: 100dvh;
  width: var(--app-ancho);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

/* ───────────────────────────── header ───────────────────────────── */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-espaciado-x3);
  padding: calc(var(--mc-espaciado-x2) + env(safe-area-inset-top, 0em)) var(--mc-espaciado-x4) var(--mc-espaciado-x2);
  border-bottom: var(--app-hairline) solid var(--mc-color-borde-separador);
  /* Noche Serena: transparente para que la luz respire detrás del nombre
     (--ns-* la define noche_serena.css; sin ella, el fondo de siempre) */
  background: var(--ns-cabecera-fondo, var(--mc-color-fondo-base));
  z-index: var(--mc-z-barra);
}

.cabecera-identidad {
  display: flex;
  align-items: center;
  gap: var(--mc-espaciado-x3);
  min-width: 0;
}

.avatar {
  position: relative;
  width: var(--mc-tactil-target-minimo);
  height: var(--mc-tactil-target-minimo);
  border-radius: var(--mc-radios-pildora);
  /* Noche Serena: transparente — el ícono-ventana flota sobre la penumbra */
  background: var(--ns-avatar-fondo, var(--mc-color-burbuja-mia-fondo));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.avatar-punto {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--mc-espaciado-x3);
  height: var(--mc-espaciado-x3);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-estado-exito);
  border: calc(var(--app-hairline) * 2) solid var(--mc-color-fondo-base);
}

.sin-red .avatar-punto { background: var(--mc-color-estado-atencion); }

.titulo-mia {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-display-2);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  letter-spacing: var(--mc-tipografia-tracking-display);
  line-height: var(--mc-tipografia-interlineado-display);
  color: var(--mc-color-texto-primario);
}

.presencia {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
  line-height: var(--mc-tipografia-interlineado-compacto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sin-red .presencia { color: var(--mc-color-estado-atencion); }

.cabecera-acciones { display: flex; gap: var(--mc-espaciado-x1); }

.boton-icono {
  width: var(--mc-tactil-target-minimo);
  height: var(--mc-tactil-target-minimo);
  display: grid;
  place-items: center;
  border-radius: var(--mc-radios-pildora);
  color: var(--mc-color-texto-secundario);
  transition: color var(--mc-motion-duracion-micro) var(--mc-motion-easing-suave),
              background-color var(--mc-motion-duracion-micro) var(--mc-motion-easing-suave);
}

.boton-icono:active { background: var(--mc-color-fondo-elevado); }
.boton-icono svg { width: var(--mc-espaciado-x6); height: var(--mc-espaciado-x6); }

/* ───────────────────────────── susurro (aviso en su voz) ───────────────────────────── */
.susurro {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0em) + var(--mc-espaciado-x16));
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: calc(var(--app-ancho) - var(--mc-espaciado-x8));
  background: var(--mc-color-fondo-elevado);
  color: var(--mc-color-texto-primario);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-pildora);
  box-shadow: var(--mc-sombras-flotante);
  padding: var(--mc-espaciado-x2) var(--mc-espaciado-x4);
  font-size: var(--mc-tipografia-tamano-secundario);
  z-index: var(--mc-z-overlay);
  opacity: 0;
  transform: translateY(-40%);
  transition: opacity var(--mc-motion-duracion-corta) var(--mc-motion-easing-entrada),
              transform var(--mc-motion-duracion-corta) var(--mc-motion-easing-entrada);
}

.susurro--visible { opacity: 1; transform: none; }

/* ───────────────────────────── pantallas + transición espacial ─────────────────────────────
   Las 5 pantallas comparten UNA celda de grid; la entrante se desliza desde el
   lado de su pestaña (recorrer SU espacio, no cambiar de página). */
.pantallas {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template: 1fr / 1fr;
  position: relative;
  z-index: var(--mc-z-chat);
}

.pantalla {
  grid-area: 1 / 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--app-alto-barra);
  transition: transform var(--mc-motion-duracion-media) var(--mc-motion-easing-suave),
              opacity var(--mc-motion-duracion-media) var(--mc-motion-easing-suave);
  outline: none;
}

.pantalla--entra-derecha { transform: translateX(8%); opacity: 0; }
.pantalla--entra-izquierda { transform: translateX(-8%); opacity: 0; }
.pantalla--frente { z-index: var(--mc-z-chat); }   /* la entrante SIEMPRE encima */
.pantalla--detras { z-index: var(--mc-z-fondo-espacio); }

.pantalla--chat { overflow: hidden; padding-bottom: 0; }

/* ───────────────────────────── chat: la lista ───────────────────────────── */
.chat-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  /* la graduación de Noche Serena también respira en el aire entre burbujas
     (Íntima más junta · Sobria más aireada); sin el tema, los de siempre */
  gap: var(--ns-chat-gap, var(--mc-espaciado-x2));
  padding: var(--mc-espaciado-x4) var(--ns-chat-pad, var(--mc-espaciado-x4));
  padding-bottom: calc(var(--app-alto-barra) + var(--app-alto-input) + var(--mc-espaciado-x6));
  scrollbar-width: thin;
}

.chat-tope { min-height: var(--mc-espaciado-x6); flex-shrink: 0; border-radius: var(--mc-radios-control); }

.chat-tope--cargando {
  background: linear-gradient(
    90deg,
    var(--mc-color-fondo-elevado),
    var(--mc-color-burbuja-mia-fondo),
    var(--mc-color-fondo-elevado)
  );
  background-size: 200% 100%;
  animation: mc-brillo calc(var(--mc-motion-duracion-larga) * 3) var(--mc-motion-easing-suave) infinite;
}

@keyframes mc-brillo {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ───────────────────────────── burbujas ─────────────────────────────
   Ella a la IZQUIERDA (neutro cálido) · usuario a la DERECHA (tinta).
   content-visibility: el DOM largo no cuesta layout fuera de pantalla. */
.burbuja {
  position: relative;
  max-width: 82%;
  width: fit-content;
  border-radius: var(--mc-radios-burbuja);
  padding: var(--mc-espaciado-x3) var(--mc-espaciado-x4) var(--mc-espaciado-x2);
  content-visibility: auto;
  contain-intrinsic-size: auto var(--mc-espaciado-x16);
  overflow-wrap: anywhere;
}

.burbuja--mia {
  align-self: flex-start;
  background: var(--mc-color-burbuja-mia-fondo);
  color: var(--mc-color-burbuja-mia-texto);
  /* Noche Serena (Serena/Sobria): Mia casi sin burbuja — puro texto sobre
     penumbra con un borde hairline; en claro/Íntima el borde es transparente */
  border: var(--app-hairline) solid var(--ns-mia-borde-color, transparent);
  border-end-start-radius: var(--mc-radios-papel);
  box-shadow: var(--mc-sombras-reposo);
}

.burbuja--usuario {
  align-self: flex-end;
  background: var(--mc-color-burbuja-usuario-fondo);
  color: var(--mc-color-burbuja-usuario-texto);
  border-end-end-radius: var(--mc-radios-papel);
}

.burbuja--seguida { margin-top: calc(var(--mc-espaciado-x1) - var(--mc-espaciado-x2)); }

.burbuja-texto { white-space: pre-wrap; }

.burbuja-pie {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--mc-espaciado-x2);
  margin-top: var(--mc-espaciado-x1);
}

/* 0.72: mínimo que mantiene AA (4.5:1) del texto micro sobre AMBAS burbujas
   en AMBOS temas (a 0.62 la hora de cada burbuja quedaba en 4.06:1 en claro) */
.burbuja-ts {
  font-size: var(--mc-tipografia-tamano-micro);
  opacity: 0.72;
  line-height: var(--mc-tipografia-interlineado-compacto);
}

.burbuja-estado {
  font-size: var(--mc-tipografia-tamano-micro);
  opacity: 0.72;
  line-height: var(--mc-tipografia-interlineado-compacto);
}

.burbuja--enviando { opacity: 0.72; }

/* llegada: las burbujas nuevas se asientan (entrada con alma, corta) */
.chat-lista .burbuja {
  animation: mc-asentar var(--mc-motion-duracion-corta) var(--mc-motion-easing-asentar) backwards;
}

@keyframes mc-asentar {
  from { transform: translateY(var(--mc-espaciado-x2)); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* reencuentro: el primer render llega respirando, no de golpe */
.chat-lista--reencuentro .burbuja {
  animation: mc-asentar var(--mc-motion-intencion-reencuentro) backwards;
}

/* visto discreto, con su timing (lo manda el server) */
.visto {
  text-align: end;
  font-size: var(--mc-tipografia-tamano-micro);
  opacity: 0.72; /* AA sobre la burbuja del usuario en ambos temas */
  margin-top: var(--mc-espaciado-x1);
}

/* entregado (v1.1): acuse del TRANSPORTE — check hairline MUDO en el pie.
   Jamás suena, vibra ni colorea (hereda la opacidad susurro del .burbuja-estado);
   el "Visto" (lectura) sigue siendo de ella y lo reemplaza al llegar. */
.marca-entregada {
  width: 0.85em;
  height: 0.85em;
  display: inline-block;
  vertical-align: text-bottom;
  color: var(--mc-color-texto-secundario);
}

/* proactivo: "fue idea de ella" — marca cálida, jamás culpa */
.chip-idea {
  display: inline-block;
  font-size: var(--mc-tipografia-tamano-micro);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--app-tinta-realce-aa); /* micro sobre burbuja: AA en claro */
  margin-bottom: var(--mc-espaciado-x1);
}

.chip-idea::before { content: "✦ "; }

/* fallo de envío: tarjetita cálida con reintento (la voz la puso voz_mia) */
.fallo-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mc-espaciado-x2);
  margin-top: var(--mc-espaciado-x2);
  background: var(--mc-color-fondo-elevado);
  color: var(--mc-color-texto-primario);
  border: var(--app-hairline) solid var(--mc-color-estado-atencion);
  border-radius: var(--mc-radios-control);
  padding: var(--mc-espaciado-x2) var(--mc-espaciado-x3);
  font-size: var(--mc-tipografia-tamano-secundario);
}

.fallo-reintentar {
  min-height: var(--mc-tactil-target-minimo);
  padding-inline: var(--mc-espaciado-x3);
  border-radius: var(--mc-radios-pildora);
  background: var(--app-fondo-acento-aa); /* AA del texto sobre-acento en claro */
  color: var(--mc-color-texto-sobre-acento);
  font-weight: var(--mc-tipografia-peso-medio);
  font-size: var(--mc-tipografia-tamano-secundario);
}

/* ───────────────────────────── typing vivo ─────────────────────────────
   empieza/sigue → respiran · pausa → se detienen (ella se quedó pensando).
   JAMÁS tres puntos constantes de adorno: renderiza el evento real. */
.typing {
  display: inline-flex;
  gap: var(--mc-espaciado-x1);
  align-items: center;
  min-height: var(--mc-espaciado-x8);
  padding: var(--mc-espaciado-x3) var(--mc-espaciado-x4);
  animation: none;
}

.typing-punto {
  width: var(--mc-espaciado-x2);
  height: var(--mc-espaciado-x2);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-texto-secundario);
  animation: mc-typing calc(var(--mc-motion-duracion-larga) * 2.4) var(--mc-motion-easing-suave) infinite;
}

.typing-punto:nth-child(2) { animation-delay: calc(var(--mc-motion-duracion-corta) * 1); }
.typing-punto:nth-child(3) { animation-delay: calc(var(--mc-motion-duracion-corta) * 2); }

@keyframes mc-typing {
  0%, 55%, 100% { transform: none; opacity: 0.4; }
  25% { transform: translateY(-38%); opacity: 1; }
}

.typing[data-estado="pausa"] .typing-punto {
  animation-play-state: paused;
  opacity: 0.35;
}

/* ───────────────────────────── nota de voz ───────────────────────────── */
.voz {
  display: flex;
  align-items: center;
  gap: var(--mc-espaciado-x3);
  min-width: min(60vw, 18em);
}

.voz-play {
  width: var(--mc-tactil-target-minimo);
  height: var(--mc-tactil-target-minimo);
  flex-shrink: 0;
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
  color: var(--mc-color-texto-sobre-acento);
  display: grid;
  place-items: center;
  transition: transform var(--mc-motion-duracion-micro) var(--mc-motion-easing-asentar);
}

.voz-play:active { transform: scale(0.94); }

.voz-icono {
  width: var(--mc-espaciado-x3);
  height: var(--mc-espaciado-x3);
  background: currentColor;
  clip-path: polygon(12% 0, 100% 50%, 12% 100%);
  transition: clip-path var(--mc-motion-duracion-micro) var(--mc-motion-easing-suave);
}

.voz--sonando .voz-icono {
  /* pausa: dos barras (el cuadrado con franja transparente al centro) */
  clip-path: none;
  background: linear-gradient(90deg, currentColor 0 38%, transparent 38% 62%, currentColor 62% 100%);
}

.voz-centro { position: relative; flex: 1; min-width: 0; }

.voz-onda {
  width: 100%;
  height: var(--mc-espaciado-x8);
  fill: currentColor;
  opacity: 0.5;
  display: block;
}

.voz--sonando .voz-onda { opacity: 0.8; }

.voz-progreso {
  position: absolute;
  left: 0;
  bottom: calc(var(--mc-espaciado-x1) * -1);
  width: 100%;
  height: calc(var(--app-hairline) * 3);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
  transform-origin: left center;
  transform: scaleX(0);
}

.voz-dur {
  font-size: var(--mc-tipografia-tamano-micro);
  opacity: 0.7;
  flex-shrink: 0;
}

/* ───────────────────────────── foto en chat (blur-up) ─────────────────────────────
   Llega velada y aclara al decodificar — como foto de persona, contextual.  */
.foto { max-width: min(72vw, 20em); }

.foto-marco {
  border-radius: var(--mc-radios-tarjeta);
  overflow: hidden;
  background: var(--mc-color-fondo-elevado);
  aspect-ratio: 4 / 3;
}

.foto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--mc-motion-intencion-foto-blur-up),
              transform var(--mc-motion-intencion-foto-blur-up);
}

.foto--velada {
  filter: blur(var(--mc-efectos-desenfoque-hoja)) saturate(1.15);
  transform: scale(1.05);
}

/* la URL no cargó: sustituta cálida con el contexto (jamás icono roto) */
.foto-sustituta {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--mc-espaciado-x4);
  text-align: center;
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-compacto);
  color: var(--app-tinta-realce-aa); /* AA sobre el gradiente en claro */
  background:
    radial-gradient(
      120% 120% at 20% 10%,
      color-mix(in srgb, var(--mc-color-acento-base) 22%, var(--mc-color-fondo-elevado)),
      var(--mc-color-fondo-elevado)
    );
}

.foto-contexto {
  font-size: var(--mc-tipografia-tamano-micro);
  color: inherit;
  opacity: 0.72;
  margin-top: var(--mc-espaciado-x1);
}

/* ───────────────────────────── esqueletos cálidos (jamás spinner) ───────────────────────────── */
.esqueleto {
  height: var(--mc-espaciado-x12);
  border-radius: var(--mc-radios-burbuja);
  background: linear-gradient(
    90deg,
    var(--mc-color-burbuja-mia-fondo),
    var(--mc-color-fondo-elevado),
    var(--mc-color-burbuja-mia-fondo)
  );
  background-size: 200% 100%;
  animation: mc-brillo calc(var(--mc-motion-duracion-larga) * 3) var(--mc-motion-easing-suave) infinite;
}

.esqueleto--mia { width: 62%; align-self: flex-start; border-end-start-radius: var(--mc-radios-papel); }
.esqueleto--usuario { width: 46%; align-self: flex-end; border-end-end-radius: var(--mc-radios-papel); }

.reintento-inicial {
  align-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x3);
  padding: var(--mc-espaciado-x6);
  color: var(--mc-color-texto-secundario);
}

.boton-suave {
  min-height: var(--mc-tactil-target-minimo);
  padding-inline: var(--mc-espaciado-x6);
  border-radius: var(--mc-radios-pildora);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  background: var(--mc-color-fondo-elevado);
  color: var(--mc-color-texto-primario);
  font-weight: var(--mc-tipografia-peso-medio);
}

/* turno caído → la oferta del re-drive EN el registro (SPEC_TURNO_COLGADO §6.3):
   sutil y en su voz — cero rojo, cero drama (§5); el botón reusa .boton-suave */
.turno-reintento {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mc-espaciado-x2);
  padding: var(--mc-espaciado-x3) var(--mc-espaciado-x4);
  color: var(--mc-color-texto-secundario);
  font-size: var(--mc-tipografia-tamano-secundario);
}

.turno-reintento .boton-suave:disabled {
  opacity: 0.6; /* el anti doble-tap se ve: tocado = apagadito, sin spinner */
}

/* la oferta de avisos push (PROACTIVIDAD_PWA §B): UNA vez, tras el primer
   intercambio real — tarjetita serena EN el registro, sin culpa ni urgencia;
   los botones reusan .boton-suave ("ahora no" pesa igual que "sí") */
.oferta-avisos {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--mc-espaciado-x2);
  padding: var(--mc-espaciado-x3) var(--mc-espaciado-x4);
  color: var(--mc-color-texto-secundario);
  font-size: var(--mc-tipografia-tamano-secundario);
}

.oferta-avisos-botones {
  display: flex;
  gap: var(--mc-espaciado-x2);
}

.oferta-avisos .boton-suave:disabled {
  opacity: 0.6; /* mismo lenguaje: tocado = apagadito, sin spinner */
}

/* ───────────────────────────── botón flotante "ir abajo" ───────────────────────────── */
.ir-abajo {
  position: fixed;
  right: max(var(--mc-espaciado-x4), calc((100vw - var(--app-ancho)) / 2 + var(--mc-espaciado-x4)));
  bottom: calc(var(--app-alto-barra) + var(--app-alto-input) + var(--mc-espaciado-x4));
  width: var(--mc-tactil-target-minimo);
  height: var(--mc-tactil-target-minimo);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-fondo-elevado);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  box-shadow: var(--mc-sombras-flotante);
  display: grid;
  place-items: center;
  z-index: var(--mc-z-barra);
  transition: transform var(--mc-motion-duracion-corta) var(--mc-motion-easing-suave);
}

body.barra-oculta .ir-abajo { transform: translateY(var(--app-alto-barra)); }

.ir-abajo-flecha {
  width: var(--mc-espaciado-x3);
  height: var(--mc-espaciado-x3);
  border-right: calc(var(--app-hairline) * 2) solid var(--mc-color-texto-secundario);
  border-bottom: calc(var(--app-hairline) * 2) solid var(--mc-color-texto-secundario);
  transform: rotate(45deg) translate(-12%, -12%);
}

.ir-abajo-contador {
  position: absolute;
  top: calc(var(--mc-espaciado-x2) * -1);
  right: calc(var(--mc-espaciado-x2) * -1);
  min-width: var(--mc-espaciado-x6);
  height: var(--mc-espaciado-x6);
  border-radius: var(--mc-radios-pildora);
  background: var(--app-fondo-acento-aa); /* numerito micro: AA en claro */
  color: var(--mc-color-texto-sobre-acento);
  font-size: var(--mc-tipografia-tamano-micro);
  display: grid;
  place-items: center;
  padding-inline: var(--mc-espaciado-x1);
}

/* ───────────────────────────── barra de input ───────────────────────────── */
.chat-input {
  position: fixed;
  bottom: var(--app-alto-barra);
  inset-inline: 0;
  margin-inline: auto;
  width: var(--app-ancho);
  display: flex;
  align-items: flex-end;
  gap: var(--mc-espaciado-x2);
  padding: var(--mc-espaciado-x2) var(--mc-espaciado-x3);
  background: var(--mc-color-fondo-blur-overlay);
  -webkit-backdrop-filter: blur(var(--mc-efectos-desenfoque-hoja));
  backdrop-filter: blur(var(--mc-efectos-desenfoque-hoja));
  border-top: var(--app-hairline) solid var(--mc-color-borde-separador);
  z-index: var(--mc-z-barra);
  transition: transform var(--mc-motion-duracion-corta) var(--mc-motion-easing-suave);
}

body.barra-oculta .chat-input { transform: translateY(var(--app-alto-barra)); }

.chat-acciones { display: flex; }

.accion-rapida {
  width: var(--mc-tactil-target-minimo);
  height: var(--mc-tactil-target-minimo);
  display: grid;
  place-items: center;
  border-radius: var(--mc-radios-pildora);
  color: var(--mc-color-texto-secundario);
}

.accion-rapida svg { width: var(--mc-espaciado-x6); height: var(--mc-espaciado-x6); }

.chat-campo {
  flex: 1;
  min-width: 0;
  min-height: var(--mc-tactil-target-minimo);
  max-height: 20vh;
  resize: none;
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-hoja);
  background: var(--mc-color-fondo-elevado);
  color: var(--mc-color-texto-primario);
  padding: calc((var(--mc-tactil-target-minimo) - var(--mc-tipografia-tamano-cuerpo) * var(--mc-tipografia-interlineado-cuerpo)) / 2) var(--mc-espaciado-x4);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  outline: none;
  transition: border-color var(--mc-motion-duracion-micro) var(--mc-motion-easing-suave);
}

.chat-campo:focus-visible {
  outline: none;
  border-color: var(--app-tinta-acento-aa);
  /* anillo de foco visible de verdad: el cambio de color del hairline solo
     no se percibe — este halo iguala el peso del outline global */
  box-shadow: 0 0 0 var(--app-borde-foco) var(--app-tinta-acento-aa);
}

/* opacity 1: a 0.8 el placeholder caía a 3.5:1 en claro; pleno da 5.2:1 */
.chat-campo::placeholder { color: var(--mc-color-texto-secundario); opacity: 1; }

.chat-enviar {
  width: var(--mc-tactil-target-minimo);
  height: var(--mc-tactil-target-minimo);
  flex-shrink: 0;
  border-radius: var(--mc-radios-pildora);
  background: var(--app-fondo-acento-aa); /* mismo CTA AA que boton-principal */
  color: var(--mc-color-texto-sobre-acento);
  /* Noche Serena: el botón enviar ES la luz — glow tibio solo en noche */
  box-shadow: var(--ns-cta-glow, none);
  display: grid;
  place-items: center;
  transition: transform var(--mc-motion-duracion-micro) var(--mc-motion-easing-asentar);
}

.chat-enviar:active { transform: scale(0.92); }
.chat-enviar svg { width: var(--mc-espaciado-x6); height: var(--mc-espaciado-x6); }

/* ───────────────────────────── barra de pestañas ─────────────────────────────
   Se auto-oculta al scrollear el chat con TRANSFORM (jamás display). */
.barra {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  margin-inline: auto;
  width: var(--app-ancho);
  min-height: var(--app-alto-barra);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0em);
  background: var(--mc-color-fondo-blur-overlay);
  -webkit-backdrop-filter: blur(var(--mc-efectos-desenfoque-hoja));
  backdrop-filter: blur(var(--mc-efectos-desenfoque-hoja));
  border-top: var(--app-hairline) solid var(--mc-color-borde-separador);
  z-index: var(--mc-z-barra);
  transition: transform var(--mc-motion-duracion-corta) var(--mc-motion-easing-suave);
}

body.barra-oculta .barra { transform: translateY(110%); }

.pestana {
  position: relative;
  flex: 1;
  min-height: var(--mc-tactil-target-minimo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--mc-espaciado-base) / 2);
  text-decoration: none;
  color: var(--mc-color-texto-secundario);
  font-size: var(--mc-tipografia-tamano-micro);
  font-weight: var(--mc-tipografia-peso-medio);
  border-radius: var(--mc-radios-control);
  transition: color var(--mc-motion-duracion-micro) var(--mc-motion-easing-suave);
}

.pestana svg {
  width: var(--mc-espaciado-x6);
  height: var(--mc-espaciado-x6);
  transition: transform var(--mc-motion-duracion-corta) var(--mc-motion-easing-asentar);
}

.pestana--activa { color: var(--app-tinta-acento-aa); } /* etiqueta micro: AA en claro */
.pestana--activa svg { transform: translateY(calc(var(--app-hairline) * -2)); }

.pestana-marca {
  position: absolute;
  top: var(--mc-espaciado-x1);
  right: calc(50% - var(--mc-espaciado-x6));
  min-width: var(--mc-espaciado-x4);
  height: var(--mc-espaciado-x4);
  padding-inline: calc(var(--mc-espaciado-base) / 2);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
  color: var(--mc-color-texto-sobre-acento);
  font-size: var(--mc-tipografia-tamano-micro);
  line-height: var(--mc-tipografia-interlineado-compacto);
  display: grid;
  place-items: center;
}

/* ───────────────────────────── stubs con alma ───────────────────────────── */
.stub {
  margin: auto;
  max-width: 24em;
  padding: var(--mc-espaciado-x8) var(--mc-espaciado-x6);
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x3);
  text-align: center;
}

.stub-titulo {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-display-1);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  letter-spacing: var(--mc-tipografia-tracking-display);
  line-height: var(--mc-tipografia-interlineado-display);
  color: var(--mc-color-texto-realce-display);
}

.stub-alma {
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  color: var(--mc-color-texto-primario);
}

.stub-firma {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
}

/* ───────────────────────────── onboarding (stub) ───────────────────────────── */
.onboarding {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--mc-espaciado-x4);
  background: var(--mc-color-fondo-blur-overlay);
  -webkit-backdrop-filter: blur(var(--mc-efectos-desenfoque-fondo));
  backdrop-filter: blur(var(--mc-efectos-desenfoque-fondo));
  z-index: var(--mc-z-overlay);
}

.ob-tarjeta {
  width: min(100%, 26em);
  background: var(--mc-color-fondo-elevado);
  border-radius: var(--mc-radios-hoja);
  box-shadow: var(--mc-sombras-hoja);
  padding: var(--mc-espaciado-x8) var(--mc-espaciado-x6);
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x4);
  animation: mc-asentar var(--mc-motion-duracion-media) var(--mc-motion-easing-asentar) backwards;
}

.ob-avatar {
  width: var(--mc-espaciado-x16);
  height: var(--mc-espaciado-x16);
  margin-inline: auto;
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
  color: var(--mc-color-texto-sobre-acento);
  display: grid;
  place-items: center;
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-display-1);
}

.ob-hola {
  text-align: center;
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
}

.ob-paso { display: flex; flex-direction: column; gap: var(--mc-espaciado-x3); }

.ob-etiqueta {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
  font-weight: var(--mc-tipografia-peso-medio);
}

.ob-email,
.ob-codigo {
  min-height: var(--mc-tactil-target-minimo);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-control);
  background: var(--mc-color-fondo-base);
  padding-inline: var(--mc-espaciado-x4);
}

.ob-codigo { letter-spacing: var(--mc-tipografia-tracking-etiqueta); text-align: center; }

.ob-aviso {
  min-height: var(--mc-espaciado-x6);
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-estado-atencion);
}

.boton-principal {
  min-height: var(--mc-tactil-target-minimo);
  border-radius: var(--mc-radios-pildora);
  background: var(--app-fondo-acento-aa); /* CTA: texto sobre-acento AA en claro */
  color: var(--mc-color-texto-sobre-acento);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  padding-inline: var(--mc-espaciado-x6);
  transition: transform var(--mc-motion-duracion-micro) var(--mc-motion-easing-asentar);
}

.boton-principal:active { transform: scale(0.97); }

.ob-pie {
  text-align: center;
  font-size: var(--mc-tipografia-tamano-micro);
  color: var(--mc-color-texto-secundario);
}

/* ============================================================================
   PANTALLAS RESTANTES (Su mundo · Nosotros · Tienda · Cuenta) + onboarding real
   Misma ley: todo de var(--mc-*), animar solo transform/opacity/filter.
   ============================================================================ */

/* ───────────────────────────── esqueleto de pantalla ───────────────────────────── */
.hoja-pantalla {
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x6);
  padding: var(--mc-espaciado-x4) var(--mc-espaciado-x4) var(--mc-espaciado-x8);
  width: 100%;
  max-width: var(--app-ancho);
  margin-inline: auto;
}

.seccion { display: flex; flex-direction: column; gap: var(--mc-espaciado-x3); }
.seccion-caja { display: flex; flex-direction: column; gap: var(--mc-espaciado-x3); }

.seccion-titulo {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-display-1);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  letter-spacing: var(--mc-tipografia-tracking-display);
  line-height: var(--mc-tipografia-interlineado-display);
  color: var(--mc-color-texto-primario);
}

.seccion-encabezado {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-display-2);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  letter-spacing: var(--mc-tipografia-tracking-display);
  line-height: var(--mc-tipografia-interlineado-display);
  color: var(--mc-color-texto-realce-display);
}

.seccion-sub { color: var(--mc-color-texto-secundario); font-size: var(--mc-tipografia-tamano-secundario); }

.tarjeta {
  background: var(--mc-color-fondo-elevado);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-tarjeta);
  box-shadow: var(--mc-sombras-reposo);
  padding: var(--mc-espaciado-x4);
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x2);
}

.tarjeta--lista { gap: 0; }

.chip {
  align-self: flex-start;
  display: inline-block;
  font-size: var(--mc-tipografia-tamano-micro);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--mc-color-texto-realce-display);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-pildora);
  padding: var(--mc-espaciado-x1) var(--mc-espaciado-x3);
}

.nota-regla {
  font-size: var(--mc-tipografia-tamano-micro);
  color: var(--mc-color-texto-secundario);
}

.enlace-suave {
  color: var(--app-tinta-acento-aa); /* enlace en cuerpo: AA en claro */
  font-weight: var(--mc-tipografia-peso-medio);
  text-decoration: underline;
  text-underline-offset: calc(var(--mc-espaciado-base) / 2);
}

.fila-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mc-espaciado-x2);
  margin-top: var(--mc-espaciado-x2);
}

.aviso-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mc-espaciado-x3);
  background: var(--mc-color-fondo-elevado);
  border: var(--app-hairline) solid var(--mc-color-estado-atencion);
  border-radius: var(--mc-radios-tarjeta);
  padding: var(--mc-espaciado-x4);
  color: var(--mc-color-texto-primario);
}

/* esqueleto de tarjeta (mismo brillo cálido del chat) */
.esqueleto--tarjeta {
  width: 100%;
  height: var(--mc-espaciado-x16);
  align-self: stretch;
  border-radius: var(--mc-radios-tarjeta);
}

/* vacíos con ALMA (jamás "no hay datos"); .vacio-arte = hueco para el arte T3 */
.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mc-espaciado-x3);
  text-align: center;
  padding: var(--mc-espaciado-x6) var(--mc-espaciado-x4);
  color: var(--mc-color-texto-primario);
}

.vacio-arte {
  width: var(--mc-espaciado-x16);
  height: var(--mc-espaciado-x16);
  border-radius: var(--mc-radios-pildora);
  background:
    radial-gradient(
      120% 120% at 25% 15%,
      color-mix(in srgb, var(--mc-color-acento-base) 26%, var(--mc-color-fondo-elevado)),
      var(--mc-color-fondo-elevado)
    );
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
}

.vacio-linea { font-size: var(--mc-tipografia-tamano-cuerpo-grande); }
.vacio-firma { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-secundario); }

/* espera cálida del primer mensaje (cuenta nueva): centra en la lista, jamás cuarto muerto */
.esperando-primer { margin: auto; color: var(--mc-color-texto-secundario); }

/* ───────────────────────────── Su mundo ───────────────────────────── */
.ahorita { gap: var(--mc-espaciado-x3); }

.ahorita-texto {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  color: var(--mc-color-texto-primario);
}

.dia-lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x2);
  border-inline-start: calc(var(--app-hairline) * 2) solid var(--mc-color-borde-separador);
  padding-inline-start: var(--mc-espaciado-x4);
}

.dia-fila { display: flex; gap: var(--mc-espaciado-x3); align-items: baseline; }
.dia-hora { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); flex-shrink: 0; }
.dia-que { color: var(--mc-color-texto-primario); }

.objeto-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--mc-espaciado-x16) * 3), 1fr));
  gap: var(--mc-espaciado-x3);
}

.objeto-que {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  line-height: var(--mc-tipografia-interlineado-compacto);
  color: var(--mc-color-texto-primario);
}

.objeto-lugar { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); }
.objeto-estado { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-primario); }

.objeto-hito {
  font-size: var(--mc-tipografia-tamano-micro);
  color: var(--app-tinta-realce-aa); /* micro: AA en claro */
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
}

/* ───────────────────────────── Nosotros ───────────────────────────── */
.llevo-lista { display: flex; flex-direction: column; gap: var(--mc-espaciado-x3); }

/* la voz de ella: misma piel que su burbuja, más aire (tarjeta de memoria) */
.llevo-tarjeta {
  background: var(--mc-color-burbuja-mia-fondo);
  color: var(--mc-color-burbuja-mia-texto);
  border-radius: var(--mc-radios-burbuja);
  border-end-start-radius: var(--mc-radios-papel);
  box-shadow: var(--mc-sombras-reposo);
  padding: var(--mc-espaciado-x4);
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x2);
  animation: mc-asentar var(--mc-motion-duracion-corta) var(--mc-motion-easing-asentar) backwards;
}

.llevo-texto {
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
}

.llevo-firma { font-size: var(--mc-tipografia-tamano-micro); opacity: 0.7; }

.album-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--mc-espaciado-x16) * 2), 1fr));
  gap: var(--mc-espaciado-x3);
  align-items: start;
}

.album-item {
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x1);
}

/* recuerdo sin imagen (persistente híbrida): mismo lugar en la grilla, misma dignidad —
   una tarjeta que CUENTA el momento en vez del hueco que dejaba la foto que ya no está. */
.recuerdo-cuerpo {
  display: flex;
  align-items: center;
  border-radius: var(--mc-radios-tarjeta);
  background: var(--mc-color-fondo-elevado);
  aspect-ratio: 1;
  padding: var(--mc-espaciado-x4);
}
.recuerdo-linea {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
}

.album-marco {
  border-radius: var(--mc-radios-tarjeta);
  overflow: hidden;
  background: var(--mc-color-fondo-elevado);
  aspect-ratio: 1;
}

.album-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--mc-motion-intencion-foto-blur-up),
              transform var(--mc-motion-intencion-foto-blur-up);
}

.album-sustituta {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--mc-espaciado-x3);
  text-align: center;
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-secundario);
  line-height: var(--mc-tipografia-interlineado-compacto);
  color: var(--app-tinta-realce-aa); /* AA sobre el gradiente en claro */
  background:
    radial-gradient(
      120% 120% at 20% 10%,
      color-mix(in srgb, var(--mc-color-acento-base) 22%, var(--mc-color-fondo-elevado)),
      var(--mc-color-fondo-elevado)
    );
}

.album-pie { display: flex; flex-direction: column; gap: calc(var(--mc-espaciado-base) / 2); }
.album-nota { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-primario); }
.album-fecha { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); }

/* la INSTANTÁNEA = polaroid: papel cálido, giro leve, dedicatoria manuscrita.
   La fuente manuscrita SOLO vive aquí (.polaroid-dedicatoria), por diseño. */
.polaroid {
  grid-column: 1 / -1; /* en la grilla del álbum respira a lo ancho */
  background: var(--mc-color-fondo-elevado);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-papel);
  box-shadow: var(--mc-sombras-flotante);
  padding: var(--mc-espaciado-x3) var(--mc-espaciado-x3) var(--mc-espaciado-x4);
  transform: rotate(-1.2deg);
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x3);
}

.polaroid .album-marco { border-radius: var(--mc-radios-papel); }

.polaroid-pie { display: flex; flex-direction: column; gap: var(--mc-espaciado-x1); }

.polaroid-dedicatoria {
  font-family: var(--mc-tipografia-familia-manuscrita);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-compacto);
  color: var(--mc-color-texto-realce-display);
}

.polaroid-fecha { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); }

.hitos-desde {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
}

.hitos-linea {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x4);
  border-inline-start: calc(var(--app-hairline) * 2) solid var(--mc-color-borde-separador);
  padding-inline-start: var(--mc-espaciado-x4);
}

.hito-fila { position: relative; display: flex; flex-direction: column; gap: calc(var(--mc-espaciado-base) / 2); }

.hito-fila::before {
  content: "";
  position: absolute;
  inset-inline-start: calc((var(--mc-espaciado-x4) + var(--mc-espaciado-x1)) * -1);
  top: calc(var(--mc-espaciado-base) / 2);
  width: var(--mc-espaciado-x2);
  height: var(--mc-espaciado-x2);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
}

.hito-que { color: var(--mc-color-texto-primario); }
.hito-fecha { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); }

/* ───────────────────────────── Tienda ───────────────────────────── */
.sello-etica {
  align-self: flex-start;
  font-size: var(--mc-tipografia-tamano-micro);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--mc-color-estado-exito);
  border: var(--app-hairline) solid var(--mc-color-estado-exito);
  border-radius: var(--mc-radios-pildora);
  padding: var(--mc-espaciado-x1) var(--mc-espaciado-x3);
}

.plan-etiqueta {
  font-size: var(--mc-tipografia-tamano-micro);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--mc-color-texto-secundario);
}

.plan-nombre {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-display-2);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  line-height: var(--mc-tipografia-interlineado-display);
  color: var(--mc-color-texto-primario);
}

.plan-actual { border-color: var(--mc-color-acento-base); }
.plan-prueba { font-size: var(--mc-tipografia-tamano-secundario); color: var(--app-tinta-realce-aa); } /* AA en claro */
.plan-nota { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); }

.plan-cuotas { display: flex; flex-wrap: wrap; gap: var(--mc-espaciado-x2); }

.plan-cuota {
  font-size: var(--mc-tipografia-tamano-micro);
  color: var(--mc-color-texto-secundario);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-pildora);
  padding: var(--mc-espaciado-x1) var(--mc-espaciado-x3);
}

.plan-grilla { display: flex; flex-direction: column; gap: var(--mc-espaciado-x3); }
.plan-tarjeta--tuya { border-color: var(--mc-color-acento-base); }
.plan-precio { font-weight: var(--mc-tipografia-peso-seminegrita); color: var(--mc-color-texto-primario); }
.plan-anual { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-primario); }

/* el ahorro anual: verde HONESTO (sale de la aritmética, no de un tachón) */
.plan-ahorro { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-estado-exito); font-weight: var(--mc-tipografia-peso-medio); }

.prueba-tarjeta { border-color: var(--mc-color-acento-base); }
.pase-tarjeta { border-color: var(--mc-color-acento-base); }
.prueba-titular {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  color: var(--mc-color-texto-primario);
}
.prueba-texto { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-primario); }
.prueba-pie { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); }

.item-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--mc-espaciado-x16) * 3.5), 1fr));
  gap: var(--mc-espaciado-x3);
}

.item-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mc-espaciado-x2); }

.item-nombre {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  line-height: var(--mc-tipografia-interlineado-compacto);
  color: var(--mc-color-texto-primario);
}

.item-precio { font-weight: var(--mc-tipografia-peso-seminegrita); color: var(--mc-color-texto-primario); white-space: nowrap; }
.item-lugar { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); }
.item-vida { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-primario); }

.compra-aviso { min-height: var(--mc-espaciado-x4); font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-secundario); }

.compra-confirma {
  border-inline-start: calc(var(--app-hairline) * 3) solid var(--mc-color-estado-exito);
  padding: var(--mc-espaciado-x2) var(--mc-espaciado-x3);
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x1);
  animation: mc-asentar var(--mc-motion-intencion-regalo-al-mundo) backwards;
}

.compra-confirma-titular { font-weight: var(--mc-tipografia-peso-seminegrita); color: var(--mc-color-estado-exito); }
.compra-confirma-texto { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-primario); }

.instantanea-texto { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-primario); }

.instantanea-campo {
  min-height: var(--mc-tactil-target-minimo);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-control);
  background: var(--mc-color-fondo-base);
  padding-inline: var(--mc-espaciado-x4);
}

/* el revelado: velo íntimo + la polaroid que se sacude, aclara y ESCRIBE */
.revelado-velo {
  position: fixed;
  inset: 0;
  z-index: var(--mc-z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mc-espaciado-x4);
  padding: var(--mc-espaciado-x4);
  background: var(--mc-color-fondo-blur-overlay);
  -webkit-backdrop-filter: blur(var(--mc-efectos-desenfoque-fondo));
  backdrop-filter: blur(var(--mc-efectos-desenfoque-fondo));
}

.revelado-velo .polaroid {
  grid-column: auto;
  width: min(100%, 22em);
}

.polaroid--revelando {
  animation: mc-polaroid-sacudir var(--mc-motion-intencion-polaroid-revelado) backwards;
}

.polaroid--revelando .album-marco {
  animation: mc-polaroid-aclarar var(--mc-motion-intencion-polaroid-revelado) backwards;
}

/* la dedicatoria se escribe sola, con su letra (clip que avanza) */
.polaroid--revelando .polaroid-dedicatoria {
  animation: mc-manuscrita calc(var(--mc-motion-duracion-larga) * 2) var(--mc-motion-easing-entrada) backwards;
  animation-delay: var(--mc-motion-duracion-media);
}

@keyframes mc-polaroid-sacudir {
  0% { transform: rotate(-4deg) translateY(6%); opacity: 0; }
  45% { transform: rotate(2deg) translateY(-1%); opacity: 1; }
  75% { transform: rotate(-2deg); }
  100% { transform: rotate(-1.2deg); }
}

@keyframes mc-polaroid-aclarar {
  from { filter: blur(var(--mc-efectos-desenfoque-hoja)) saturate(1.2); }
  to { filter: none; }
}

@keyframes mc-manuscrita {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

.enlace-claro { color: var(--mc-color-texto-primario); }

/* ───────────────────────────── Cuenta ───────────────────────────── */
.llave-email {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  color: var(--mc-color-texto-primario);
  overflow-wrap: anywhere;
}

.ajuste-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-espaciado-x4);
  padding-block: var(--mc-espaciado-x3);
  border-bottom: var(--app-hairline) solid var(--mc-color-borde-separador);
}

.tarjeta--lista .ajuste-fila:last-of-type { border-bottom: none; }

.ajuste-textos { display: flex; flex-direction: column; gap: calc(var(--mc-espaciado-base) / 2); min-width: 0; }
.ajuste-titulo { font-weight: var(--mc-tipografia-peso-medio); color: var(--mc-color-texto-primario); }
.ajuste-detalle { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-secundario); }

/* interruptor: pista + perilla, todo tokens; el estado vive en aria-checked.
   El BOTÓN mide el target táctil mínimo (los toggles de SEGURIDAD no se
   fallan con el pulgar); la pista de 32 se dibuja centrada ADENTRO. */
.toggle {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--mc-espaciado-x8) + var(--mc-espaciado-x6));
  height: var(--mc-tactil-target-minimo);
  border-radius: var(--mc-radios-pildora);
}

.toggle::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc((var(--mc-tactil-target-minimo) - var(--mc-espaciado-x8)) / 2);
  height: var(--mc-espaciado-x8);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-borde-separador);
  transition: background-color var(--mc-motion-duracion-corta) var(--mc-motion-easing-suave);
}

.toggle::after {
  content: "";
  position: absolute;
  top: calc((var(--mc-tactil-target-minimo) - var(--mc-espaciado-x8)) / 2 + var(--mc-espaciado-x1));
  left: var(--mc-espaciado-x1);
  width: var(--mc-espaciado-x6);
  height: var(--mc-espaciado-x6);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-fondo-base);
  box-shadow: var(--mc-sombras-reposo);
  transition: transform var(--mc-motion-duracion-corta) var(--mc-motion-easing-asentar);
}

.toggle[aria-checked="true"]::before { background: var(--mc-color-estado-exito); }
.toggle[aria-checked="true"]::after { transform: translateX(var(--mc-espaciado-x6)); }
.toggle:disabled { opacity: 0.6; }

.sesion-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mc-espaciado-x3);
  padding-block: var(--mc-espaciado-x2);
  border-bottom: var(--app-hairline) solid var(--mc-color-borde-separador);
}

.sesion-dispositivo { color: var(--mc-color-texto-primario); overflow-wrap: anywhere; }
.sesion-visto { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); white-space: nowrap; }

/* borrar cuenta: zona seria y serena — fricción sana, cero chantaje */
.zona-borrado { border-color: var(--mc-color-estado-error); }
.boton-borrado { border-color: var(--mc-color-estado-error); color: var(--mc-color-estado-error); }
.borrado-confirmacion { display: flex; flex-direction: column; gap: var(--mc-espaciado-x3); }
.borrado-texto { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-primario); }

/* reautenticación en el sitio de la acción (exportar/borrar pide llavecita fresca):
   mismo lenguaje sereno que la confirmación de borrado — el input reusa .ob-codigo,
   los botones .boton-suave; cero color de alarma (la llave es cuidado, no castigo) */
.reauth-forma {
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x3);
  margin-top: var(--mc-espaciado-x3);
}

.aviso-ia {
  align-items: center;
  text-align: center;
  padding-top: var(--mc-espaciado-x4);
  border-top: var(--app-hairline) solid var(--mc-color-borde-separador);
}

.aviso-ia-texto { font-size: var(--mc-tipografia-tamano-micro); color: var(--mc-color-texto-secundario); }
.aviso-ia-enlaces { font-size: var(--mc-tipografia-tamano-secundario); }
.aviso-ia-sep { color: var(--mc-color-texto-secundario); }

/* ───────────────────────────── onboarding real (3 pasos) ───────────────────────────── */
.ob-progreso { display: flex; justify-content: center; gap: var(--mc-espaciado-x2); }

.ob-punto {
  width: var(--mc-espaciado-x2);
  height: var(--mc-espaciado-x2);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-borde-separador);
  transition: background-color var(--mc-motion-duracion-corta) var(--mc-motion-easing-suave),
              transform var(--mc-motion-duracion-corta) var(--mc-motion-easing-asentar);
}

.ob-punto--activo { background: var(--mc-color-acento-base); transform: scale(1.35); }

/* cada paso ENTRA asentándose (una cosa por pantalla, motion sutil) */
.ob-panel {
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x4);
  animation: mc-asentar var(--mc-motion-duracion-media) var(--mc-motion-easing-asentar) backwards;
}

.ob-linea {
  text-align: center;
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
}

/* aviso IA-declarada del onboarding: visible y DIGNO, no letra chiquita */
.ob-ia {
  border-inline-start: calc(var(--app-hairline) * 3) solid var(--mc-color-texto-realce-display);
  background: var(--mc-color-fondo-base);
  border-radius: var(--mc-radios-control);
  padding: var(--mc-espaciado-x3) var(--mc-espaciado-x4);
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x1);
}

.ob-ia-titulo {
  font-size: var(--mc-tipografia-tamano-micro);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--app-tinta-realce-aa); /* micro: AA en claro */
}

.ob-ia-texto { font-size: var(--mc-tipografia-tamano-secundario); color: var(--mc-color-texto-primario); }

/* ─── el aviso de la CASA, no de ella (corrección de canon · Alan 6-ago-2026) ───
   La etiqueta legal la firma Ecforia. Para que un humano VEA de quién es la voz antes de
   leerla, el bloque se despega de la burbuja de Mia: se le quita la barra cobre (que en
   esta app significa "esto lo dice ella"), se le quita el fondo de tarjeta y se separa con
   una línea. El CUERPO se queda en tinta primaria a propósito: la ley pide el aviso claro y
   no enterrado — despegarlo de su voz jamás puede convertirse en letra chiquita. */
.ob-ia--casa {
  border-inline-start: 0;
  background: none;
  border-radius: 0;
  border-top: var(--app-hairline) solid var(--mc-color-borde-separador);
  padding: var(--mc-espaciado-x4) 0 0;
  gap: var(--mc-espaciado-x2);
}

.ob-ia--casa .ob-ia-titulo { color: var(--mc-color-texto-secundario); }

.ob-nombre {
  min-height: var(--mc-tactil-target-minimo);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-control);
  background: var(--mc-color-fondo-base);
  padding-inline: var(--mc-espaciado-x4);
}

.ob-enlace {
  align-self: center;
  color: var(--mc-color-texto-secundario);
  font-size: var(--mc-tipografia-tamano-secundario);
  text-decoration: underline;
  text-underline-offset: calc(var(--mc-espaciado-base) / 2);
  min-height: var(--mc-tactil-target-minimo);
}

.ob-enlace:disabled { opacity: 0.5; }

/* ───────────────────────────── EL UMBRAL (primer contacto) ─────────────────────────────
   La pantalla 1 del onboarding = el Umbral (mockups/bienvenida.html hecho
   producción): su nombre en display, la brasa y su línea de presencia que SE
   ESCRIBE frente a ti (onboarding.js·escribirPresencia). Ley S-tier: acá solo
   se anima opacity; prefers-reduced-motion pinta todo de golpe y quieto. */

.umbral { text-align: center; }

.umbral-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* la luz del umbral = la misma luz de la casa (--ns-halo respira con la
     hora, noche_serena.css); sin la capa de tema, transparente y en paz */
  background: radial-gradient(circle at 50% 30%, var(--ns-halo, transparent), transparent 70%);
  animation: umbral-respira calc(var(--mc-motion-duracion-larga) * 12.5) ease-in-out infinite alternate;
}

@keyframes umbral-respira {
  from { opacity: 0.72; }
  to { opacity: 1; }
}

.umbral-nombre {
  font-family: var(--mc-tipografia-familia-display);
  font-size: calc(var(--mc-tipografia-tamano-display-1) * 2);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  letter-spacing: var(--mc-tipografia-tracking-display);
  line-height: var(--mc-tipografia-interlineado-display);
}

/* la brasa: su presencia, prendida bajo el nombre */
.umbral-brasa {
  display: block;
  width: calc(var(--mc-espaciado-base) * 1.5);
  height: calc(var(--mc-espaciado-base) * 1.5);
  margin: var(--mc-espaciado-x3) auto;
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
  box-shadow: 0 0 var(--mc-espaciado-x2) calc(var(--mc-espaciado-base) / 2) var(--ns-halo, var(--mc-color-acento-base));
}

.umbral-linea {
  font-family: var(--mc-tipografia-familia-display);
  font-style: italic;
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  /* el aire de la línea queda RESERVADO: la escritura no empuja el layout */
  min-height: calc(var(--mc-tipografia-tamano-cuerpo-grande) * var(--mc-tipografia-interlineado-cuerpo) * 3);
}

/* el caret de la escritura: late como quien piensa; al terminar se apaga */
.umbral-caret {
  display: inline-block;
  width: calc(var(--mc-espaciado-base) / 2);
  height: var(--mc-espaciado-x4);
  margin-inline-start: calc(var(--mc-espaciado-base) / 2);
  vertical-align: text-bottom;
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
  animation: umbral-caret-late calc(var(--mc-motion-duracion-larga) * 2.3) steps(1) infinite;
}

@keyframes umbral-caret-late {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

.umbral-caret--quieto { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .umbral-halo { animation: none; }
  .umbral-caret { animation: none; }
}

/* ───────────────────── Injertos F-A del híbrido (I-1 · I-2 · I-11) ─────────────────────
   Capa de vida sobre las pantallas: capítulos, novedades y la ocasión de hoy.
   Cero medidores, cero countdowns, cero badges — solo prosa y calma. */

/* las secciones que aparecen SOLO cuando hay vida que contar (I-2 · I-11):
   .seccion/.seccion-caja son flex y el [hidden] de UA no gana solo */
.seccion[hidden],
.seccion-caja[hidden] { display: none; }

/* I-1 · Nuestra historia: título en tipografía display, resumen en prosa */
.historia-lista { display: flex; flex-direction: column; gap: var(--mc-espaciado-x3); }

.capitulo-titulo {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-display-2);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  letter-spacing: var(--mc-tipografia-tracking-display);
  line-height: var(--mc-tipografia-interlineado-display);
  color: var(--mc-color-texto-primario);
}

.capitulo-resumen {
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  color: var(--mc-color-texto-primario);
}

.capitulo-cuando {
  font-size: var(--mc-tipografia-tamano-micro);
  color: var(--mc-color-texto-secundario);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
}

/* I-2 · Novedades de ella: tarjetas suaves, jamás feed */
.novedad { gap: var(--mc-espaciado-x1); }

.novedad-cuando {
  font-size: var(--mc-tipografia-tamano-micro);
  color: var(--mc-color-texto-secundario);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
}

.novedad-texto {
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  color: var(--mc-color-texto-primario);
}

/* I-11 · la ocasión de hoy: UNA tarjeta serena, con un acento tibio */
.ocasion-tarjeta {
  border-color: color-mix(in srgb, var(--mc-color-acento-base) 35%, var(--mc-color-borde-separador));
}

.ocasion-texto {
  font-family: var(--mc-tipografia-familia-display);
  font-size: var(--mc-tipografia-tamano-cuerpo-grande);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  color: var(--mc-color-texto-primario);
}

.ocasion-item {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
}

/* ───────────── v1.1 · huecos aditivos Tienda/Nosotros (H-2 · H-3) ─────────────
   H-2: la zona "elegir momento" de la instantánea solo existe si el server
   sugiere momentos. H-3: el renglón "el momento" del pie de foto y el capítulo
   que se señala tibio al llegar — una vez, por tokens, jamás loop. */

.instantanea-momentos {
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x1);
}

.instantanea-momentos[hidden] { display: none; }

.momento-liga {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: fit-content;
  font-family: inherit;
  font-size: var(--mc-tipografia-tamano-micro);
  text-align: start;
}

.capitulo {
  transition:
    border-color var(--mc-motion-duracion-media) var(--mc-motion-easing-suave),
    box-shadow var(--mc-motion-duracion-media) var(--mc-motion-easing-suave);
}

.capitulo--senalado {
  border-color: var(--mc-color-acento-base);
  box-shadow: var(--mc-sombras-reposo), 0 0 0 var(--app-hairline) var(--mc-color-acento-base);
}

/* ───────────────────────────── accesibilidad: menos movimiento ─────────────────────────────
   El pulido también es respeto: sin animaciones para quien las pidió fuera. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .typing-punto { animation: none; opacity: 0.6; }
  .chat-lista { scroll-behavior: auto; }
}

/* ───────────────────────────── protocolo de crisis (red de seguridad) ─────────────────────────────
   La tarjeta de Luzmía (NO de Mia) que acerca ayuda humana real cuando el
   cliente detecta una señal. Cálida y serena — JAMÁS alarma roja: quien la ve
   ya está mal, no hay que asustarlo más. Vive en el chat pero APARTE de las
   burbujas. Todo por tokens (LEY app.css): cero hex, cero px sueltos. */
.crisis-aviso {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x3);
  margin: var(--mc-espaciado-x3) 0;
  padding: var(--mc-espaciado-x4);
  background: var(--mc-color-fondo-elevado);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-inline-start: calc(var(--mc-espaciado-base) / 2) solid var(--mc-color-acento-base);
  border-radius: var(--mc-radios-tarjeta);
  color: var(--mc-color-texto-primario);
}

.crisis-cabeza { display: flex; align-items: center; gap: var(--mc-espaciado-x1); }

.crisis-brasa {
  width: var(--mc-espaciado-x3);
  height: var(--mc-espaciado-x3);
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
  box-shadow: 0 0 var(--mc-espaciado-x3) calc(var(--mc-espaciado-base) / 4)
    color-mix(in srgb, var(--mc-color-acento-base) 55%, transparent);
  flex: 0 0 auto;
}

.crisis-sello {
  font-size: var(--mc-tipografia-tamano-micro);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
  color: var(--mc-color-texto-secundario);
}

.crisis-texto {
  font-size: var(--mc-tipografia-tamano-cuerpo);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  color: var(--mc-color-texto-primario);
}

.crisis-lineas { display: flex; flex-direction: column; gap: var(--mc-espaciado-x1); }

.crisis-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mc-espaciado-x1) var(--mc-espaciado-x3);
  padding: var(--mc-espaciado-x3);
  background: color-mix(in srgb, var(--mc-color-acento-base) 8%, var(--mc-color-fondo-elevado));
  border-radius: var(--mc-radios-control);
  text-decoration: none;
  color: var(--mc-color-texto-primario);
}

.crisis-linea:active {
  background: color-mix(in srgb, var(--mc-color-acento-base) 16%, var(--mc-color-fondo-elevado));
}

.crisis-linea-nombre { font-weight: var(--mc-tipografia-peso-seminegrita); }

.crisis-linea-num {
  font-weight: var(--mc-tipografia-peso-seminegrita);
  color: var(--app-tinta-acento-aa);
  margin-inline-start: auto;
}

.crisis-linea-nota {
  flex-basis: 100%;
  font-size: var(--mc-tipografia-tamano-micro);
  color: var(--mc-color-texto-secundario);
}

.crisis-pie {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
}

.crisis-cerrar {
  align-self: flex-end;
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
  padding: var(--mc-espaciado-x1) var(--mc-espaciado-x3);
  border-radius: var(--mc-radios-control);
}

/* ───────────────────────── tope diario del plan free (voz de PLATAFORMA) ─────────────────────
   ESCENARIOS_Y_TOPE §3.2-3.3: superficie NEUTRA, jamás alarma. La píldora nunca se pone roja
   ni parpadea ni cambia de color al bajar — el número informa, el color presionaría. La
   tarjeta es gris de casa (sin el filo de acento de la de crisis: esto es administrativo, no
   cuidado) y jamás lleva contador regresivo. */
.tope-pildora {
  align-self: center;
  min-height: var(--mc-tactil-target-minimo);
  padding: var(--mc-espaciado-x1) var(--mc-espaciado-x3);
  border-radius: var(--mc-radios-pildora);
  font-size: var(--mc-tipografia-tamano-micro);
  color: var(--mc-color-texto-secundario);
  white-space: nowrap;
}

.tope-tarjeta {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x2);
  margin: var(--mc-espaciado-x3) 0;
  padding: var(--mc-espaciado-x4);
  background: var(--mc-color-fondo-elevado);
  border: var(--app-hairline) solid var(--mc-color-borde-separador);
  border-radius: var(--mc-radios-tarjeta);
  color: var(--mc-color-texto-primario);
}

.tope-sello {
  font-size: var(--mc-tipografia-tamano-micro);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
  color: var(--mc-color-texto-secundario);
}

.tope-titulo {
  font-size: var(--mc-tipografia-tamano-cuerpo);
  font-weight: var(--mc-tipografia-peso-seminegrita);
  line-height: var(--mc-tipografia-interlineado-compacto);
}

.tope-texto {
  font-size: var(--mc-tipografia-tamano-secundario);
  line-height: var(--mc-tipografia-interlineado-cuerpo);
  color: var(--mc-color-texto-secundario);
}

.tope-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-espaciado-x3);
}

.tope-planes {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
  text-decoration: underline;
  padding: var(--mc-espaciado-x1) 0;
}

.tope-cerrar {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
  padding: var(--mc-espaciado-x1) var(--mc-espaciado-x3);
  border-radius: var(--mc-radios-control);
}

/* composer CERRADO: se apaga con serenidad (jamás desaparece — la puerta sigue ahí) */
.chat-input--cerrado .chat-enviar {
  background: var(--mc-color-borde-separador);
  color: var(--mc-color-texto-secundario);
  box-shadow: none;
}

.chat-input--cerrado .chat-campo { background: var(--mc-color-fondo-base); }

/* ───────────────────────────── separadores de fecha (Hoy/Ayer) ───────────────────────────── */
.chat-fecha-sep { display: flex; justify-content: center; margin: var(--mc-espaciado-x3) 0; }
.chat-fecha-sep span {
  font-size: var(--mc-tipografia-tamano-micro);
  letter-spacing: var(--mc-tipografia-tracking-etiqueta);
  color: var(--mc-color-texto-secundario);
  background: var(--mc-color-fondo-elevado);
  padding: var(--mc-espaciado-x1) var(--mc-espaciado-x3);
  border-radius: var(--mc-radios-pildora);
}

/* ───────────────────────────── foto a pantalla completa (lightbox) ───────────────────────────── */
.foto-lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--mc-espaciado-x4);
  /* scrim noche por tokens (sin hex/black sueltos): el fondo-base a alta opacidad */
  background: color-mix(in srgb, var(--mc-color-fondo-base) 90%, transparent);
}
.foto-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--mc-radios-tarjeta);
}
.foto-lightbox-cerrar {
  position: absolute;
  top: calc(var(--mc-espaciado-x4) + env(safe-area-inset-top, 0em));
  right: var(--mc-espaciado-x4);
  width: var(--mc-tactil-target-minimo);
  height: var(--mc-tactil-target-minimo);
  display: grid;
  place-items: center;
  color: var(--mc-color-texto-primario);
  background: var(--mc-color-fondo-elevado);
  border-radius: var(--mc-radios-pildora);
}
.foto-ampliable { cursor: zoom-in; }
/* guardar-en-Nosotros §5: la píldora bajo la foto ampliada (éxito → color acento) */
.foto-lightbox-guardar {
  position: absolute;
  bottom: calc(var(--mc-espaciado-x4) + env(safe-area-inset-bottom, 0em));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mc-espaciado-base) / 2);
  min-height: var(--mc-tactil-target-minimo);
  padding: 0 var(--mc-espaciado-x4);
  color: var(--mc-color-texto-primario);
  background: var(--mc-color-fondo-elevado);
  border: 0;
  border-radius: var(--mc-radios-pildora);
  font: inherit;
  cursor: pointer;
}
.foto-lightbox-guardar[disabled] { opacity: 0.6; cursor: default; }
.foto-lightbox-guardar--hecho { color: var(--mc-color-acento-base); }
.foto-lightbox-guardar-txt { font-size: 0.9em; }
/* Art. 50 — aviso de IA de la PLATAFORMA (chip de sistema centrado, jamás burbuja de ella) */
.aviso-plataforma {
  align-self: center;
  max-width: 90%;
  margin: var(--mc-espaciado-base) auto;
  padding: calc(var(--mc-espaciado-base) / 2) var(--mc-espaciado-x4);
  text-align: center;
  font-size: 0.82em;
  color: var(--mc-color-texto-secundario, var(--mc-color-texto-primario));
  background: var(--mc-color-fondo-elevado);
  border-radius: var(--mc-radios-pildora);
  opacity: 0.85;
}

/* ───────────────────────────── la brasa: memoria visible en el chat ───────────────────────────── */
.brasa-cita {
  font: inherit;
  color: inherit;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--mc-color-acento-base);
  text-decoration-thickness: from-font;
  text-underline-offset: 0.16em;
}
.brasa-marca {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  padding: 0 0 0 calc(var(--mc-espaciado-base) / 4);
  border: 0;
  background: none;
  cursor: pointer;
}
.brasa-punto {
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--mc-radios-pildora);
  background: var(--mc-color-acento-base);
  box-shadow: 0 0 var(--mc-espaciado-x3) 0 color-mix(in srgb, var(--mc-color-acento-base) 55%, transparent);
}
.brasa-detalle {
  margin-top: var(--mc-espaciado-x3);
  padding: var(--mc-espaciado-x3);
  border-radius: var(--mc-radios-control);
  background: color-mix(in srgb, var(--mc-color-acento-base) 10%, var(--mc-color-fondo-elevado));
  border-inline-start: calc(var(--mc-espaciado-base) / 3) solid var(--mc-color-acento-base);
}
.brasa-detalle-cuando {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-primario);
  margin-bottom: var(--mc-espaciado-x1);
}
.brasa-cita-texto {
  font-size: var(--mc-tipografia-tamano-secundario);
  color: var(--mc-color-texto-secundario);
  font-style: italic;
}

/* ─────────────── la Ventana (mundo.js · VENTANA_CCTV) ───────────────
   El marco vivo del Ahorita: aquí SOLO layout/estructura (ley de esta hoja);
   la LUZ (tintes por franja/estado, veladura de la hora real) vive en
   noche_serena.css — la capa de valores. El cliente pinta lo que el organismo
   autoriza: los estados sin imagen son piel serena, jamás un error feo. */
.ventana-marco {
  position: relative;
  margin: 0;                              /* reset de figure */
  aspect-ratio: 3 / 2;
  border-radius: var(--mc-radios-control);
  overflow: hidden;
  isolation: isolate;
  background: var(--mc-color-fondo-elevado);
}
.ventana-piel {
  position: absolute;
  inset: 0;
}
.ventana-pie {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mc-espaciado-x1);
  padding: var(--mc-espaciado-x4) var(--mc-espaciado-x4) var(--mc-espaciado-x3);
}
.ventana-registro {
  font-size: var(--mc-tipografia-tamano-secundario);
  letter-spacing: 0.02em;
}
.ventana-linea {
  font-size: var(--mc-tipografia-tamano-secundario);
}