/* ═══════════════════════════════════════════════════════════════════════════
   EL CIERRE DE SESIÓN · los dos bloques opcionales
   (Parte 3 del plan de construcción · pantalla `fin` del prototipo congelado)

   ⚛️ POR QUÉ SON DOS BLOQUES Y NO UNA PREGUNTA, que es de lo que salió esto:
   la pantalla preguntaba «¿Cómo te dejó?» con «En calma · Igual · Me costó», y
   Andrés no pudo saber si eso medía su ánimo o la meditación (07-ago, s117:
   *«no sé si te refieres a lo del ánimo o no»*). Si el dueño del producto no
   distingue cuál de las dos es, nadie puede. Ahora son dos, con su título:

     · BLOQUE A · CÓMO ESTÁS TÚ           → habla de la persona
     · BLOQUE B · LA CALIDAD DE LA MEDI   → habla del producto

   Los dos opcionales, y en ese orden: primero lo suyo, después lo nuestro.

   ⚠️ El par del diario (el «antes» a la vista, la costura, el «después») NO
   está acá: se construye con la Parte 5, que es cuando existe un «antes» que
   mostrar. El bloque A hoy es solo el ánimo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La rampa del ánimo. Un extremo es el terracota que ya existe en base.css
   (--accent) y el otro el verde salvia apagado, que es color de DATOS: nunca
   para botones ni para texto.
   🔴 MÁS COLOR = MEJOR ESTUVISTE, y sin rojo — decisión de Andrés (06-ago):
   *«rojo es estar no calmado y verde calmado, pero que sean tonalidades»*.
   ⚛️ EL HEX SE FUE DE ACÁ EN LA PARTE 8, y era el punto: hasta hoy el valor
   estaba escrito a mano en cada superficie que lo pintaba, así que cada
   pantalla nueva era una copia más que mantener sincronizada. Ahora el token
   vive UNA vez en css/base.css y esto lo hereda. El Layer 78 sigue vigilando
   la rampa entera, y ahora vigila el token en su único sitio. */

/* ── El contenedor de los dos bloques ──────────────────────────────────────
   Se monta por JS en tres sitios distintos (quien paga, el free sin flores y
   el free con flores), así que no puede dar por hecho el ancho ni el fondo de
   su padre: los declara. */
.end-wrapup {
  box-sizing: border-box;
  width: 100%;
  text-align: left;
}

/* ══ BLOQUE A · CÓMO ESTÁS TÚ ═══════════════════════════════════════════ */

.end-wrapup-a {
  background: var(--surface);
  border-radius: 16px;
  padding: 18px;
  margin-top: 8px;
}
.end-wrapup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.end-wrapup-eyebrow { margin: 0; }

/* La marca de «opcional». Va visible y no como letra chica: la promesa de esta
   pantalla es que nada de lo de abajo hay que atravesarlo para salir. */
.end-wrapup-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--faint);
  border-radius: 999px;
  padding: 4px 9px;
  flex-shrink: 0;
}

.end-wrapup-animo-q {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 12px;
}
.end-wrapup-animo-q em { font-style: italic; font-weight: 300; }

/* Cinco en una tira. En la pantalla del aviso la escala es una flor grande
   porque ahí es TODA la pantalla; acá es uno de varios bloques, así que va en
   fila. Los valores y los colores son los mismos. */
.end-wrapup-animo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}
.end-wrapup-orbe {
  aspect-ratio: 1;
  width: 100%;
  border: 0;
  border-radius: 50%;
  padding: 0 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  background: color-mix(in oklab, var(--salvia) calc(var(--m, 0) * 100%), var(--accent));
  opacity: 0.55;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.end-wrapup-orbe:active { transform: scale(.94); }

/* Sin elegir, los cinco van atenuados por igual: ninguno viene encendido, y esa
   es la misma regla del aviso — preseleccionar un ánimo sesga el dato. */
.end-wrapup-orbe.is-on { opacity: 1; }
.end-wrapup-animo.has-pick .end-wrapup-orbe { opacity: 0.3; }
.end-wrapup-animo.has-pick .end-wrapup-orbe.is-on { opacity: 1; }

/* Navegación por teclado: sin esto el foco queda invisible sobre el círculo.
   Los orbes son botones de verdad, no radios escondidos. */
.end-wrapup-orbe:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  opacity: 1;
}

/* El pie que le muestra de dónde viene. Mostrarle sus propias palabras NO es
   explicar el mecanismo: es devolverle el dato que él mismo dejó. Solo se
   pinta si existe un «antes» — hoy casi nunca, porque ese dato nace con la
   Parte 5; por eso el JS lo deja oculto en vez de inventar un valor. */
.end-wrapup-animo-foot {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 10px;
}
.end-wrapup-animo-foot strong { color: var(--ink); font-weight: 500; }

/* El acuse de recibo. Silencioso y sin exclamaciones: la persona acaba de
   meditar y esto no es un logro que celebrar. */
.end-wrapup-saved {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 10px;
}

/* ⚠️ CUALQUIER `display` EXPLÍCITO GANA SOBRE EL ATRIBUTO `hidden`, y eso es
   un bug de verdad, no un detalle de estilo: la captura de verificación mostró
   «Anotado.» ya visible antes de que nadie hubiera tocado un orbe — o sea, la
   pantalla acusando recibo de una respuesta que no existía. Se cubre la familia
   entera y no solo el caso que se vio, porque el siguiente elemento con
   `display` que nazca oculto repetiría el mismo fallo sin avisar. */
.end-wrapup [hidden],
.end-wrapup[hidden] { display: none !important; }

/* ══ BLOQUE B · CALIFICA LA CALIDAD DE LA MEDITACIÓN ════════════════════ */

.end-wrapup-b {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--faint);
}
.end-wrapup-b-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.end-wrapup-b-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.end-wrapup-b-title em { font-style: italic; font-weight: 300; }

.end-wrapup-rate { display: flex; gap: 8px; }
.end-wrapup-rate-chip {
  flex: 1;
  justify-content: center;
  font-size: 14px;
  padding: 0 8px;
  cursor: pointer;
}
.end-wrapup-rate-chip.is-on,
.end-wrapup-dim-chips .s-chip.is-on {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
}

/* La segunda pregunta aparece solo si la respuesta no fue «Buena»: a quien le
   sirvió no se le pide que justifique. */
.end-wrapup-dim { margin-top: 20px; }
.end-wrapup-dim[hidden] { display: none; }
.end-wrapup-dim-q {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
}
.end-wrapup-dim-chips { margin: 0; }

.end-wrapup-note-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 22px 0 8px;
}
.end-wrapup-note {
  box-sizing: border-box;
  width: 100%;
  min-height: 92px;
  background: var(--surface);
  border: 1px solid var(--faint);
  border-radius: 14px;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}
.end-wrapup-note::placeholder { color: var(--muted); opacity: 0.75; }
.end-wrapup-note:focus {
  outline: none;
  border-color: var(--ink);
}

.end-wrapup-hint {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 10px;
}

/* El botón de mandar el comentario. Va de contorno y no oscuro: en esta
   pantalla los botones oscuros son los que actúan sobre la sesión que acaba de
   pasar (guardar, cerrar), y este es una posdata. */
.end-wrapup-note-send {
  height: 42px;
  padding: 0 20px;
  margin-top: 12px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--faint);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, color .15s, opacity .15s;
}
.end-wrapup-note-send:active { border-color: var(--ink); color: var(--ink); }
.end-wrapup-note-send[disabled] { opacity: 0.45; cursor: default; }

/* ── El bloque montado sobre la pantalla del free ──────────────────────────
   ⚠️ ACÁ EL FONDO ES OSCURO, y eso rompía la mitad del bloque: el player vive
   en oscuro y todo el texto del bloque B usa `--ink`, que es tinta. La captura
   de verificación lo mostró sin lugar a dudas — el título «Califica la calidad
   de la meditación», los tres chips y el label del campo salían casi negros
   sobre casi negro, ilegibles. El bloque A se salvaba de casualidad, porque
   trae tarjeta clara propia.
   La salida no es repintar cada texto: es que el bloque ENTERO se apoye en la
   misma superficie clara que tiene en la pantalla de fin, que es la relación
   que el prototipo describe. Un solo contenedor, y la tarjeta interna del
   bloque A se retira para no anidar dos. */
#end-wrapup-slot .end-wrapup {
  background: var(--surface);
  border-radius: 18px;
  padding: 18px;
  margin-top: 22px;
}
#end-wrapup-slot .end-wrapup-a {
  background: none;
  padding: 0;
  margin-top: 0;
}

/* Quien no puede dejar ánimo ni calificar porque no hay a qué colgarlo (una
   sesión sin id de meditación) simplemente no ve el bloque. */
.end-wrapup[hidden] { display: none; }