/* ══════════════════════════════════════════════════════════════════════════
   TU EVOLUCIÓN EN EL TIEMPO · Parte 8 del plan de construcción (14-ago-2026)

   Dos superficies, portadas de `docs/prototipo-s106/pantallas/`:
     · la pantalla del cruce   → tu-historia.html
     · cómo se responde el ánimo → animo.html

   ⚛️ LA SEGUNDA ENTRA EN ESTA PARTE Y NO EN OTRA, y hay que decir por qué: la
   pantalla que RESPONDE el aviso no existía en ningún árbol. Los avisos ya se
   configuraban en Ajustes, el endpoint ya aceptaba `kind='dia'` y el propio
   `index.html` ya se lo prometía al usuario por escrito — pero no había dónde
   contestar. Sin ella, `kind='dia'` no tiene quien lo escriba, el calendario
   no se tiñe nunca y el enlace «Así se responde» era un botón muerto.

   ── LO QUE NO SE PORTÓ, Y ES A PROPÓSITO ────────────────────────────────
   Las dos MINIATURAS del prototipo («así se ve antes del mes» / «así se ve si
   no hubo práctica suficiente») no van al producto. Son un recurso del
   prototipo para juzgar los tres estados de una mirada sin cambiar de
   pantalla; en la app, cada estado se pinta a tamaño real cuando toca. Sus
   estilos viven acá como `.p-h-estado-*`.

   ── LA RAMPA ────────────────────────────────────────────────────────────
   `--m` va de 0 (muy mal) a 1 (muy bien) y decide DOS cosas: el TONO (se
   interpola del terracota de la marca al salvia) y la PRESENCIA (la opacidad
   sube con --m). Eso es lo que cumple la regla de Andrés «más color = mejor
   estuviste» sin usar rojo ni verde de semáforo.

   ⚠️ El token `--salvia` YA NO SE DECLARA ACÁ: vive en `css/base.css` desde la
   Parte 8. Antes cada pantalla llevaba su copia del hex, y cada pantalla nueva
   era una copia más que mantener sincronizada.

   ⚠️ LA INTERPOLACIÓN VA EN OKLAB Y NO EN sRGB, y no es preciosismo: en sRGB
   el terracota y el verde se cruzan por un gris barroso, así que el escalón
   del medio —«ni bien ni mal», el más frecuente— se vería sucio.

   ⚠️ LA OPACIDAD NO LA COMPARA EL LAYER 78: el detector lee `--salvia:`,
   `--m:` y las etiquetas, así que esta fórmula se copia a mano entre el
   calendario grande y la leyenda. Si una cambia, cambian las dos o la leyenda
   enseña una escala que ninguna celda usa (que es el defecto exacto que s113
   cazó en el prototipo).
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1 · TU EVOLUCIÓN EN EL TIEMPO
   ══════════════════════════════════════════════════════════════════════════ */

#screen-tu-historia .p-h-wrap { flex-shrink: 0; }
#screen-tu-historia .p-h-title { font-size: 30px; margin-bottom: 8px; }
#screen-tu-historia .p-h-lead { margin-bottom: 24px; }

/* ── Las dos preguntas ──────────────────────────────────────────────────────
   Van sobre fondo claro y con borde, no en tarjeta oscura: la oscura es de «la
   lectura», que es lo que dice la app, y estas dos son datos de la persona.
   Que se distingan a la vista es parte de la honestidad de la pantalla. */
#screen-tu-historia .p-h-dos { margin-bottom: 32px; }
#screen-tu-historia .p-h-dos-e { display: block; margin-bottom: 12px; }
#screen-tu-historia .p-h-dos-card {
  border: 1px solid var(--faint);
  border-radius: 16px;
  padding: 16px 16px 14px;
}
#screen-tu-historia .p-h-dos-card + .p-h-dos-card { margin-top: 10px; }
#screen-tu-historia .p-h-dos-q {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 8px;
}
#screen-tu-historia .p-h-dos-a {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 7px;
}
#screen-tu-historia .p-h-dos-a strong { font-weight: 600; }
#screen-tu-historia .p-h-dos-s {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
/* Debajo del piso NO se pinta más chico: se dice qué lo enciende. Es la regla
   1 de la pantalla, y este estilo es su forma visible. */
#screen-tu-historia .p-h-dos-espera {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* ── La lectura ──────────────────────────────────────────────────────────── */
#screen-tu-historia .p-h-read {
  background: var(--contrast);
  border-radius: var(--r-card);
  padding: 20px;
  margin-bottom: 36px;
}
#screen-tu-historia .p-h-read-eyebrow {
  display: block;
  color: var(--gold);
  margin-bottom: 13px;
}
#screen-tu-historia .p-h-read-t {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -0.018em;
  color: var(--night-fg);
  margin: 0;
}
#screen-tu-historia .p-h-read-t em { font-style: italic; color: var(--gold); }
#screen-tu-historia .p-h-read-b {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--night-fg);
  opacity: 0.8;
  margin-top: 13px;
}
#screen-tu-historia .p-h-read-foot {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--gold);
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid rgba(243, 228, 209, 0.16);
}
/* Las tres fuentes en UNA frase: como tres rótulos sueltos, el separador caía
   a final de línea y se leían como una frase partida.
   ⚛️ Y lleva el DESGLOSE POR ORIGEN del ánimo, que es donde se compensa el
   sesgo que Andrés aceptó a sabiendas: la celda no distingue de dónde vino el
   color (decisión suya), así que la frase que afirma cosas sí lo declara. */
#screen-tu-historia .p-h-src-line {
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--night-fg);
  opacity: 0.55;
  margin-top: 10px;
}

/* ── Encabezados de sección ─────────────────────────────────────────────── */
#screen-tu-historia .p-h-sec { margin-bottom: 34px; }
#screen-tu-historia .p-h-sec-e { display: block; margin-bottom: 7px; }
#screen-tu-historia .p-h-sec-b {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.52;
  color: var(--muted);
  margin-bottom: 16px;
}
#screen-tu-historia .p-h-foot {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 14px;
}

/* ── El calendario teñido ───────────────────────────────────────────────── */
#screen-tu-historia .p-h-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 7px;
}
#screen-tu-historia .p-h-dow span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
}
#screen-tu-historia .p-h-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
#screen-tu-historia .p-h-d {
  position: relative;
  height: 44px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* El tinte va detrás en un pseudo, no en el fondo de la celda: así el número
   se sigue midiendo contra el lienzo y se lee igual en toda la rampa. */
#screen-tu-historia .p-h-d::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: color-mix(in oklab, var(--salvia) calc(var(--m, 0) * 100%), var(--accent));
  opacity: calc(0.14 + var(--m, 0) * 0.54);
}
#screen-tu-historia .p-h-n {
  position: relative;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
#screen-tu-historia .p-h-n.is-mes { font-size: 10px; letter-spacing: 0; }
#screen-tu-historia .p-h-d:has(.p-h-dot) .p-h-n { transform: translateY(-3px); }
#screen-tu-historia .p-h-dot {
  position: absolute;
  bottom: 7px;
  left: 50%;
  margin-left: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.55;
}
#screen-tu-historia .p-h-d.is-none { border: 1px dashed var(--faint); }
#screen-tu-historia .p-h-d.is-none .p-h-n { color: var(--muted); opacity: 0.5; }
#screen-tu-historia .p-h-d.is-soon .p-h-n { color: var(--muted); opacity: 0.3; }
/* ⚛️ SIN DATO NO ES «EL PEOR DÍA», y esta regla es la que lo sostiene.
   Un día sin responder y un día pésimo son cosas distintas y no pueden verse
   igual. Con una rampa de sola opacidad esto salía gratis (sin valor, el tinte
   era invisible); con ésta, `--m:0` es un valor LEGÍTIMO de la escala —el
   extremo «muy mal»— así que el vacío hay que apagarlo a mano.
   El motor colabora del otro lado: manda `m: null`, nunca 0, para los días sin
   respuesta. Las dos mitades tienen que estar o el bug vuelve. */
#screen-tu-historia .p-h-d.is-none::before,
#screen-tu-historia .p-h-d.is-soon::before,
#screen-tu-historia .p-h-d.is-pre::before { opacity: 0; }
/* Los días anteriores al alta: ni «sin respuesta» ni «todavía no». No existían. */
#screen-tu-historia .p-h-d.is-pre { border: 0; }
#screen-tu-historia .p-h-d.is-pre .p-h-n { color: var(--muted); opacity: 0.22; }
#screen-tu-historia .p-h-d.is-today { outline: 1.5px solid var(--ink); outline-offset: -1.5px; }

/* ── La leyenda ─────────────────────────────────────────────────────────── */
#screen-tu-historia .p-h-leg {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-top: 15px;
}
#screen-tu-historia .p-h-leg-2 { margin-top: 9px; gap: 7px 18px; }
#screen-tu-historia .p-h-leg-i { display: inline-flex; align-items: center; gap: 6px; }
#screen-tu-historia .p-h-leg-t {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--muted);
}
#screen-tu-historia .p-h-ramp { display: inline-flex; gap: 3px; }
/* MISMA FÓRMULA que las celdas, siempre. Con la escala vieja esta tira
   declaraba que más terracota era «más calma», justo lo contrario de lo que
   el calendario de arriba pintaba. */
#screen-tu-historia .p-h-ramp i {
  width: 17px;
  height: 13px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--salvia) calc(var(--m, 0) * 100%), var(--accent));
  opacity: calc(0.14 + var(--m, 0) * 0.54);
}
#screen-tu-historia .p-h-sw-none {
  width: 17px;
  height: 13px;
  border-radius: 4px;
  border: 1px dashed var(--faint);
}
#screen-tu-historia .p-h-sw-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.55;
  margin: 0 6px;
}

/* ── La línea de tiempo ─────────────────────────────────────────────────── */
#screen-tu-historia .p-h-chart svg { display: block; width: 100%; height: auto; }
#screen-tu-historia .p-h-chart text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  fill: var(--muted);
}
#screen-tu-historia .p-h-bars rect { fill: var(--accent); opacity: 0.26; }
/* La semana en curso va punteada porque NO HA TERMINADO. El punto del ánimo de
   esa misma semana hereda el punteado por el mismo motivo: en el prototipo se
   pintaba sólido sobre una media de tres días mientras su barra iba punteada,
   o sea que las dos series decían cosas distintas de la misma semana. */
#screen-tu-historia .p-h-bar-now {
  fill: var(--accent);
  opacity: 0.12;
  stroke: var(--accent);
  stroke-opacity: 0.4;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
#screen-tu-historia .p-h-area { fill: var(--accent); opacity: 0.09; }
#screen-tu-historia .p-h-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#screen-tu-historia .p-h-dots circle { fill: var(--accent); }
#screen-tu-historia .p-h-dot-low { fill: var(--canvas); stroke: var(--accent); stroke-width: 1.6; }
#screen-tu-historia .p-h-dot-now {
  fill: var(--canvas);
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-dasharray: 2 2;
}
#screen-tu-historia .p-h-axis { stroke: var(--faint); stroke-width: 1; }

/* ── De dónde sale esto ─────────────────────────────────────────────────── */
#screen-tu-historia .p-h-fuentes {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 18px 18px 8px;
  margin-bottom: 34px;
}
#screen-tu-historia .p-h-fuentes-e { display: block; margin-bottom: 14px; }
#screen-tu-historia .p-h-f-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 12px;
}
#screen-tu-historia .p-h-f-k {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 3px;
}
#screen-tu-historia .p-h-f-t {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.52;
  color: var(--ink);
  min-width: 0;
}
#screen-tu-historia .p-h-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--faint);
  border-radius: 0;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#screen-tu-historia .p-h-link-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#screen-tu-historia .p-h-link-t {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
#screen-tu-historia .p-h-link-x {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}

/* ── LOS DOS ESTADOS SIN LECTURA, a tamaño real ─────────────────────────────
   En el prototipo son miniaturas rotuladas para poder juzgar los tres estados
   de una mirada. En la app cada uno se pinta entero cuando toca, en el sitio
   donde iría la lectura. La pantalla NUNCA queda vacía: es regla de Andrés. */
#screen-tu-historia .p-h-estado {
  background: var(--surface);
  border: 1px dashed var(--faint);
  border-radius: var(--r-card);
  padding: 20px;
  margin-bottom: 36px;
}
#screen-tu-historia .p-h-estado-t {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 8px;
}
#screen-tu-historia .p-h-estado-b {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 16px;
}
#screen-tu-historia .p-h-estado-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--faint);
  overflow: hidden;
}
#screen-tu-historia .p-h-estado-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}
#screen-tu-historia .p-h-estado-cap {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 7px;
}

/* ── Cierre ─────────────────────────────────────────────────────────────── */
#screen-tu-historia .p-h-cierre { margin-top: 28px; }
#screen-tu-historia .p-h-cierre .s-btn { width: 100%; }


/* ══════════════════════════════════════════════════════════════════════════
   2 · CÓMO SE RESPONDE EL ÁNIMO
   ══════════════════════════════════════════════════════════════════════════
   Se llega POR AVISO al celular, una a tres veces al día, a las horas que la
   persona eligió en Ajustes. El aviso ES el mecanismo (decisión de Andrés,
   06-ago): no se llega desde Hoy.

   DOS NIVELES, decisión suya: cinco opciones generales y, si quiere, una de
   quince palabras dentro de la elegida. El segundo nivel es SIEMPRE opcional —
   «Guardar» cierra sin elegir palabra — y su destino no es la analítica sino
   el archivo: *«a la persona le podría interesar ver cómo se sentía hace seis
   meses y ver el detalle»*.
   ══════════════════════════════════════════════════════════════════════════ */

/* 96px es lo que pide el CONTRATO-DE-DISENO §7 para que la barra de abajo no
   tape nada. Con 40 el botón de guardar quedaba debajo de la barra al abrir el
   campo de escribir. */
#screen-animo .p-an-wrap { padding-bottom: 96px; }
#screen-animo .p-an-title { margin-top: 14px; }
#screen-animo .p-an-lead { margin-top: 8px; }

/* ── LA FLOR ────────────────────────────────────────────────────────────────
   Cuatro pétalos en cuadrícula y el centro superpuesto. El borde del centro es
   del color del lienzo, no un borde de verdad: recorta los pétalos por debajo
   para que el centro se lea como una pieza aparte y no como un parche.

   EL PRIMER NIVEL SON CINCO Y EL QUINTO VA AL CENTRO. La cuadrícula de cuatro
   de How We Feel funciona porque ellos tienen DOS ejes y la posición codifica
   el modelo; acá el eje es uno solo, así que una cuadrícula de cuatro dejaría
   ambiguo cuál es «mejor». El neutro al centro resuelve dos cosas: es el
   estado más frecuente y no puede quedar de nota al pie, y su posición ya dice
   que es el medio. De paso, la forma es la flor de Stillova. */
#screen-animo .p-an-flor {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 30px;
}
#screen-animo .p-an-orbe {
  aspect-ratio: 1;
  width: 100%;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  padding: 0 10px;
  color: #fff;
  background: color-mix(in oklab, var(--salvia) calc(var(--m, 0) * 100%), var(--accent));
  transition: transform .22s cubic-bezier(.2,.9,.3,1.2);
}
#screen-animo .p-an-orbe:active { transform: scale(.94); }
#screen-animo .p-an-centro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 5px solid var(--canvas);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  background: color-mix(in oklab, var(--salvia) 50%, var(--accent));
  transition: transform .22s cubic-bezier(.2,.9,.3,1.2);
}
#screen-animo .p-an-centro:active { transform: translate(-50%, -50%) scale(.93); }

/* ── La tira que explica el orden ───────────────────────────────────────── */
#screen-animo .p-an-escala {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
}
#screen-animo .p-an-escala-t {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
#screen-animo .p-an-escala-r {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--accent),
    color-mix(in oklab, var(--salvia) 50%, var(--accent)),
    var(--salvia));
}
#screen-animo .p-an-nota {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── PASO 2 ─────────────────────────────────────────────────────────────── */
#screen-animo .p-an-paso2 { display: flex; flex-direction: column; }
#screen-animo .p-an-paso2[hidden] { display: none; }
#screen-animo .p-an-paso1[hidden] { display: none; }

#screen-animo .p-an-elegido {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--faint);
}
#screen-animo .p-an-orbe.is-mini {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  aspect-ratio: auto;
  pointer-events: none;
}
#screen-animo .p-an-elegido-txt { display: flex; flex-direction: column; }
#screen-animo .p-an-elegido-v {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--ink);
  margin-top: 2px;
}
#screen-animo .p-an-cambiar {
  margin-left: auto;
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  padding: 0 8px;
}
#screen-animo .p-an-q2 {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 26px;
}
#screen-animo .p-an-q2 em { font-style: italic; }
#screen-animo .p-an-q2s { margin-top: 6px; }
#screen-animo .p-an-chips { margin-top: 18px; }
#screen-animo .p-an-defi {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px dashed var(--faint);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  min-height: 52px;
}
#screen-animo .p-an-defi b { color: var(--ink); font-weight: 500; }

/* ── Escribir: cerrado por defecto, para no romper el «un toque» ─────────────
   Andrés, 06-ago: *«darle la opción al usuario de que escriba, y se junta con
   lo que te dije del diario»*. Va CERRADO y detrás de todo a propósito: el
   aviso se responde de un toque y esa promesa no se toca. Lo que se escriba
   acá entra al DIARIO, con su hora y su ánimo al lado. */
#screen-animo .p-an-abrir-esc {
  margin-top: 18px;
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px dashed var(--faint);
  border-radius: 26px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
}
#screen-animo .p-an-abrir-esc-mas {
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}
#screen-animo .p-an-abrir-esc-x {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
}
#screen-animo .p-an-abrir-esc[hidden] { display: none; }
#screen-animo .p-an-esc { margin-top: 14px; }
#screen-animo .p-an-esc[hidden] { display: none; }
#screen-animo .p-an-esc-area { min-height: 110px; font-size: 17px; line-height: 1.45; }
#screen-animo .p-an-esc-foot {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
}

/* La confirmación de dos segundos tras guardar, con la puerta a Tu evolución.
   Es el punto de contacto más frecuente del producto (1 a 3 veces al día) y
   sin ella la persona daba sin recibir nada, que es como se erosiona la tasa
   de respuesta que alimenta el calendario. Se va sola: la promesa de «un toque
   y sigues con lo tuyo» no se toca. */
#screen-animo .p-an-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--faint);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 26px;
}
#screen-animo .p-an-confirm[hidden] { display: none; }
#screen-animo .p-an-confirm-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#screen-animo .p-an-confirm-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  flex: 1;
  min-width: 0;
}
#screen-animo .p-an-confirm-link {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 44px;
}

#screen-animo .p-an-foot {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#screen-animo .p-an-foot[hidden] { display: none; }