/* Fold · PASADA 2 DE LA INTERFAZ (06/10/2026). Se carga detrás de calma.css. Lo que añade:
   Fold buscando dentro de la conversación, «Lo que leo» de un vistazo, la fuente de la respuesta como botón, los
   estados vacíos con Fold, el aviso que se va solo más pequeño, la franja con UN solo aviso y un poco más de contraste
   entre titular, cifra y texto. Solo tokens de estilos.css y de calma.css; lo que se mueve, con transform y opacity.
   Regla del papel: el pliegue de la esquina lo lleva SOLO lo que dice Fold (sus hojas en la conversación y su estado
   vacío); lo que es de la persona (su pregunta, sus archivos, sus botones) va liso. Componentes con prefijo fv-.
   Las reglas están en docs/context/interfaz-calma.md. */

/* ==================================================================== 1 · FOLD BUSCA (en vez de «cargando…»)
   Mientras llega la respuesta, en el sitio donde va a aparecer: un Fold pequeño que pasa páginas y la frase. El
   hueco está reservado (alto fijo): cuando llega la respuesta no hay salto raro, la hoja se sustituye. */
.hilo .msg.pensando .hoja { display: inline-block; max-width: 100%; }
.folio.fv-buscando { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.folio.fv-buscando .fold { flex: none; width: 46px; height: 40px; }
.folio.fv-buscando p { margin: 0; }
.folio.fv-buscando .mv-puntos { display: none; }   /* los tres puntos sobran: quien dice que está buscando es Fold */
/* Dentro se mueve Fold: la hoja no respira y su sombra difusa (un filtro que habría que recalcular en cada fotograma)
   se queda en el canto, que no cuesta. */
.hilo .msg.pensando .hoja { animation: none; filter: drop-shadow(3px 3px 0 var(--canto)); }

/* ==================================================================== 2 · «LO QUE LEO» DE UN VISTAZO
   Cada archivo es una fila que se pulsa: nombre, y a su derecha UNA palabra de estado; debajo, qué es, cuántas filas
   y hace cuánto se leyó. El punto de color (verde, ámbar, rojo) es el de calma.css. El detalle se abre debajo. */
:is(.lateral, .sp-lateral) .fuentes { gap: 2px; margin: 0 -8px; }
:is(.lateral, .sp-lateral) .fuentes li.fv-fuente { padding: 0; font-weight: 400; }
:is(.lateral, .sp-lateral) .fuentes li.fv-fuente::before { left: 10px; top: 17px; }
.fv-fuente-boton { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; width: 100%; min-height: 44px; padding: 9px 8px 9px 28px; font: inherit; text-align: left; color: var(--papel); background: transparent; border: 0; border-radius: var(--r-control); cursor: pointer; }
.fv-fuente-boton:hover { background: var(--hoja); }
.fv-fuente-boton:active { background: var(--grafito-panel); }
.fv-fuente-boton:focus-visible { outline-offset: -2px; }
:is(.lateral, .sp-lateral) .fuentes li .fv-fuente-nombre { display: block; margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--papel); overflow-wrap: anywhere; }
:is(.lateral, .sp-lateral) .fuentes li .fv-fuente-nombre .fv-fuente-fin { display: inline-block; max-width: 100%; margin: 0; font: inherit; color: inherit; }
:is(.lateral, .sp-lateral) .fuentes li .fv-fuente-estado { display: block; margin: 0; font-size: var(--calma-t-nota); font-weight: 600; white-space: nowrap; color: var(--papel-apagado); }
:is(.lateral, .sp-lateral) .fuentes li.ojo .fv-fuente-estado, :is(.lateral, .sp-lateral) .fuentes li.mal .fv-fuente-estado { color: var(--ambar-texto); }
:is(.lateral, .sp-lateral) .fuentes li .fv-fuente-linea { grid-column: 1 / -1; display: block; margin: 0; font-size: var(--calma-t-nota); font-weight: 400; line-height: 1.4; color: var(--papel-apagado); font-variant-numeric: tabular-nums; }
:is(.lateral, .sp-lateral) .fuentes li .fv-fuente-que { display: inline; margin: 0; font-size: inherit; font-weight: 600; color: var(--papel); }
.fv-fuente-detalle { padding: 0 8px 10px 28px; font-size: var(--calma-t-nota); line-height: 1.45; color: var(--papel-apagado); overflow-wrap: anywhere; }
.fv-fuente-detalle[hidden] { display: none; }
.fv-fuente-detalle:not([hidden]) { animation: fv-abre 180ms var(--mv-curva); }
.fv-fuente-detalle p { margin: 0 0 2px; }
:is(.lateral, .sp-lateral) .fuentes li.mal .fv-fuente-detalle, :is(.lateral, .sp-lateral) .fuentes li.ojo .fv-fuente-detalle { color: var(--ambar-texto); }
.fv-fuente.fv-destello .fv-fuente-boton { background: var(--cobalto-tenue); }
@keyframes fv-abre { from { opacity: 0; transform: translateY(-4px); } }

/* ==================================================================== 3 · LA RESPUESTA
   La cifra se asienta (un asiento corto, sin contar de 0 al número: en un importe eso parece un truco) y la fuente,
   que llega después con el resto del origen (movimiento.css), es un botón que lleva a su archivo. */
.mv-revela:not(.mv-ya) .folio .cifra-grande { animation: fv-asienta 520ms var(--mv-curva) both; animation-delay: var(--fv-d, 120ms); transform-origin: 0 80%; }
@keyframes fv-asienta { from { transform: translateY(-5px) scale(1.08); } 62% { transform: translateY(1px) scale(.992); } }
.origen .ficha.fv-ficha { font: inherit; font-weight: 600; min-height: 28px; padding: 2px 10px; color: var(--cobalto-claro); border-color: var(--costura-fuerte); border-radius: 6px; cursor: pointer; }
.origen .ficha.fv-ficha:hover { border-color: var(--cobalto-claro); background: var(--superficie-hover); }
.origen .ficha.fv-ficha:active { transform: scale(.97); background: var(--grafito-panel); }
@media (pointer: coarse) { .origen .ficha.fv-ficha { min-height: 44px; } }

/* ==================================================================== 4 · ESTADOS VACÍOS: Fold y UNA frase
   Sin archivos (Fold señala el botón), sin avisos y «Tu día» sin nada apuntado. */
.fold.fv-fold { flex: none; }
/* El pliegue de la esquina, con la misma receta que el folio de estilos.css: es Fold quien lo dice. */
html .calma-vacio .tf-tira { position: relative; padding: 16px 40px 16px 18px; border-radius: var(--r-folio); border-color: var(--costura-fuerte); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
html .calma-vacio .tf-tira::after { content: ''; position: absolute; top: -1px; right: -1px; width: 20px; height: 20px; background: linear-gradient(225deg, transparent 50%, var(--cobalto) 50%, var(--cobalto) 78%, var(--cobalto-sombra) 78%); }
.fold.fv-fold-vacio { width: 60px; height: 52px; margin-right: 6px; }
.fold.fv-fold-nada { display: block; width: 76px; height: 66px; margin: 4px 0 10px; }
.fold.fv-fold-nada:has(+ #calma-nada[hidden]) { display: none; }
.calma-nada { max-width: 36ch; font-size: var(--calma-t-texto); color: var(--papel); }
.tu-dia-nada { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fold.fv-fold-dia { width: 42px; height: 37px; }
.cabecera-overlay h2:has(> .fv-fold-titulo) { display: flex; align-items: center; gap: 10px; }
.fold.fv-fold-titulo { width: 44px; height: 38px; }
.fv-pista { color: var(--papel-apagado); }

/* ==================================================================== 5 · EL AVISO QUE SE VA SOLO, MÁS PEQUEÑO
   (El recordatorio de una cita, «Guardado», una subida terminada.) Una línea o dos y, si lleva acción, un botón
   secundario del ancho de su texto: el botón principal de la pantalla sigue siendo «Preguntar». En estrecho sale
   justo DEBAJO de la cabecera (fold-vivo.js mide dónde acaba), nunca encima de ella. */
.notificacion .aviso { gap: 8px; padding: 8px 12px; font-size: .82rem; line-height: 1.4; box-shadow: var(--sombra-2); }
.notificacion .aviso .marca-estado { width: 6px; height: 6px; align-self: flex-start; margin-top: .5em; }
.notificacion .aviso:has(.aviso-boton) { flex-wrap: wrap; gap: 6px 8px; }
.notificacion .aviso:has(.aviso-boton) > span:not(.marca-estado) { flex: 1 1 0; min-width: 0; }
.notificacion .aviso .aviso-boton { flex: 0 0 auto; min-height: 32px; margin: 0 0 0 14px; padding: 0 12px; font-size: .8rem; font-weight: 600; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); }
.notificacion .aviso .aviso-boton:hover { border-color: var(--papel-tenue); }
@media (pointer: coarse) { .notificacion .aviso .aviso-boton { min-height: 44px; } }
@media (min-width: 861px) { .notificacion { max-width: 260px; } }
@media (max-width: 640px) {
  .notificacion { top: calc(var(--fv-fin-cabecera, 150px) + 6px); }
  body:has(.overlay:not([hidden])) .notificacion { top: auto; }
}

/* ==================================================================== 6 · LA FRANJA: UN aviso, nunca dos
   Por orden: la cuenta, la actualización y el recordatorio de una vez; se ve solo el PRIMERO que no esté oculto. Una
   actualización en marcha (o que ha fallado) es algo que la persona ha empezado: mientras dura, manda ella. La banda de
   la actualización deja de ser una tarjeta con margen y pasa a ser una línea de la franja, como las otras dos. */
.calma-franja:not(:has(> .act-banda:is([data-vista="descargando"], [data-vista="comprobando"], [data-vista="cambiada"], [data-vista="fallida"], [data-vista="no_empieza"], [data-vista="cortada"], [data-vista="tarda"]):not([hidden]))) > :not([hidden]) ~ * { display: none !important; }
.calma-franja:has(> .act-banda:is([data-vista="descargando"], [data-vista="comprobando"], [data-vista="cambiada"], [data-vista="fallida"], [data-vista="no_empieza"], [data-vista="cortada"], [data-vista="tarda"]):not([hidden])) > :not(.act-banda) { display: none !important; }
.calma-franja > .act-banda { margin: 0; padding: 8px 12px 8px 20px; gap: 6px 14px; font-size: var(--calma-t-menor); border-width: 0 0 1px 4px; border-bottom-color: var(--costura); border-radius: 0; box-shadow: none; }
.calma-franja > .act-banda .act-texto { gap: 2px; }
@media (max-width: 480px) { .calma-franja > .act-banda { padding-left: 10px; } }

/* ==================================================================== 7 · JERARQUÍA Y RITMO
   Tres voces: el titular (el nombre de cada zona, con peso y en el color del texto), la cifra (ancha, tabular) y el
   texto. Los espacios dejan de ser iguales: lo que va junto, junto; entre zonas, aire de verdad. */
:is(.lateral, .sp-lateral) h2, .lateral .vis-tarjeta-titulo, .calma-grupo > h3 { margin-bottom: 8px; font-size: .88rem; font-weight: 680; color: var(--papel); }
:is(.lateral, .sp-lateral) > .bloque:has(> #mensajero-estado), .lateral:has(#fuentes:not(:empty)) > .vis-vistazo { margin-top: 28px; padding-top: 26px; }
.lateral .vis-vistazo:not([hidden]) { gap: 30px; }
/* El saludo de Fold abre la conversación: su primera frase pesa un poco más que el resto del texto. */
.hilo > .msg.fold-msg:first-child .folio > p:first-child { font-size: 1.0625rem; font-weight: 520; line-height: calc(26 / 17); }
/* Objetivo del mes: la cifra manda, la barra se ve y la estimación queda de nota. */
:is(.lateral, .sp-lateral) #vis-objetivo > .vis-nota strong { font-size: .98rem; font-weight: 720; color: var(--papel); font-variant-numeric: tabular-nums; }
:is(.lateral, .sp-lateral) #vis-objetivo > .vis-nota { font-variant-numeric: tabular-nums; }
:is(.lateral, .sp-lateral) #vis-objetivo > .vis-barra { height: 10px; margin: 8px 0 10px; border-radius: 3px; }
:is(.lateral, .sp-lateral) #vis-objetivo > .vis-barra span { border-radius: 2px; }
/* Empresa lista: «5 de 8 pasos» es el dato; «Siguiente: …», lo que hay que hacer. */
.lateral .vis-anillo text { font-variant-numeric: tabular-nums; }
.lateral .vis-tarjeta:has(.vis-anillo) .vis-fila > div > .vis-nota:first-child { font-size: var(--calma-t-menor); font-weight: 650; color: var(--papel); font-variant-numeric: tabular-nums; }
.lateral .vis-tarjeta:has(.vis-anillo) .vis-fila > div > .vis-nota + .vis-nota { margin-top: 2px; color: var(--papel-apagado); }
/* Las preguntas sugeridas: botones que proponen algo, no pastillas con sombra. */
.sug { border-radius: var(--r-control); border-color: var(--costura-fuerte); box-shadow: none; color: var(--papel); }
.sug:hover { border-color: var(--cobalto-claro); }
/* La caja de preguntar es lo principal de la pantalla. */
.escribir input { height: 52px; font-size: 1.02rem; border-color: var(--costura-fuerte); }
.escribir .pulsador { height: 52px; }

/* ==================================================================== 8 · LO QUE SE ABRE, SALE DE SU BOTÓN */
.calma-estado-panel:not([hidden]) { transform-origin: 14px 0; animation: fv-de-su-boton 180ms var(--mv-curva); }
.calma-menu[open] > .calma-menu-lista { transform-origin: 100% 0; animation: fv-de-su-boton 180ms var(--mv-curva); }
@keyframes fv-de-su-boton { from { opacity: 0; transform: translateY(-4px) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .fv-fuente-detalle:not([hidden]), .mv-revela:not(.mv-ya) .folio .cifra-grande, .calma-estado-panel:not([hidden]), .calma-menu[open] > .calma-menu-lista { animation: none; }
  .origen .ficha.fv-ficha:active { transform: none; }
}