/* Fold · INTERFAZ «CALMA» (06/10/2026). La última hoja que se carga: recoloca y serena la pantalla principal
   (cabecera, franja, conversación, lateral, centro de avisos) y la hoja «Tu Fold». No trae paleta nueva: solo los
   tokens de estilos.css y los verde/rojo de visuales.css. Las reglas que deben seguir las demás pantallas están en
   docs/context/interfaz-calma.md. Los componentes nuevos llevan el prefijo calma-.
   Ojo: tu-fold.css la cuelga tu-fold.js DESPUÉS de esta hoja; por eso lo que aquí retoca un .tf-… va con «html» delante. */

/* ==================================================================== 0 · ESCALA Y JERARQUÍA
   Cuatro tamaños de letra y un alto de control. Verde, ámbar y rojo significan bien, atención y mal: no se tiñen. */
:root {
  --calma-t-nota: .78rem; --calma-t-menor: .86rem; --calma-t-texto: 1rem; --calma-t-titulo: 1.14rem;
  --calma-alto: 40px;
  --calma-bien: var(--vis-verde); --calma-ojo: var(--ambar); --calma-mal: var(--vis-rojo);
  --calma-ico-campana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 16.5v-5.5a5.5 5.5 0 0 1 11 0v5.5l1.5 2h-14z'/%3E%3Cpath d='M10 20.5a2.2 2.2 0 0 0 4 0'/%3E%3C/svg%3E");
}
/* Las versalitas espaciadas, fuera: la jerarquía la dan el peso y el tamaño. */
:is(.lateral, .sp-lateral) h2, .lateral .vis-tarjeta-titulo, .tu-dia h3, .calma-grupo > h3, html .tf-etiqueta {
  margin: 0 0 10px; font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--papel-tenue); font-variation-settings: 'wdth' 100;
}
.origen .nivel { letter-spacing: 0; text-transform: none; font-variation-settings: 'wdth' 100; }
.pie { padding: 6px 24px 8px; font-size: .72rem; letter-spacing: 0; text-transform: none; font-variation-settings: 'wdth' 100; }
html .tf-tabla thead th { font-size: var(--calma-t-nota); letter-spacing: 0; text-transform: none; }
html .etiqueta-ejemplo { font-size: .76rem; font-weight: 650; letter-spacing: 0; }
/* Una sola jerarquía de botones: principal (relleno cobalto), secundario (borde fino) y de texto (.calma-texto). */
#overlay-avisos .opciones button, #overlay-avisos .enlace-discreto, html .tf-boton, .lateral .vis-boton { font-size: var(--calma-t-menor); font-weight: 600; min-height: var(--calma-alto); box-shadow: none; }
@media (pointer: coarse) { #overlay-avisos .opciones button, #overlay-avisos .enlace-discreto, html .tf-boton, .lateral .vis-boton { min-height: 44px; } }
.calma-texto { font: inherit; font-size: var(--calma-t-menor); font-weight: 600; min-height: 36px; padding: 0 8px; color: var(--cobalto-claro); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.calma-texto:hover { text-decoration: underline; }
/* En un táctil no hay hover: todo lo que se pulsa responde al toque. */
html .tf-boton:active, html .tf-opcion:active, .vis-semaforo:active, .calma-texto:active, .calma-cerrar:active, .calma-estado-boton:active, .tu-dia-plegar:active { transform: scale(.975); }
.calma-avisos-boton:active, .tu-dia-plegar:active, .calma-estado-boton:active { background: var(--grafito-panel); }
@media (prefers-reduced-motion: reduce) { html .tf-boton:active, html .tf-opcion:active, .vis-semaforo:active, .calma-texto:active, .calma-cerrar:active, .calma-estado-boton:active, .tu-dia-plegar:active { transform: none; } }

/* ==================================================================== 1 · CABECERA
   Dice una cosa: la empresa y un punto con una palabra. */
.cabecera { padding: 12px 24px; }
.quien > div { position: relative; min-width: 0; }
.cabecera h1 { min-width: 0; }
.cabecera .marca-cliente { min-width: 0; gap: 6px; padding: 0; font-size: .95rem; font-weight: 600; letter-spacing: 0; color: var(--papel-apagado); background: transparent; border: 0; border-radius: 0; font-variation-settings: 'wdth' 100; }
.cabecera .marca-cliente > span#nombre-empresa { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.cabecera .version { display: none; }   /* la versión está en el detalle del estado y en «Tu Fold» */
.calma-estado-fila { display: flex; align-items: center; gap: 2px; margin-top: 2px; min-height: 28px; }
.calma-estado-fila .estado { margin: 0; cursor: pointer; }
.estado .punto { background: var(--calma-bien); }
/* (auditoría visual #13, 28/10/2026) El verde no convive con «sin archivos» ni con avisos que necesitan atención: punto neutro.
   El ámbar de «Revisar» (.alerta) sigue mandando. */
.estado.sin-archivos:not(.alerta) .punto, .estado.con-pendientes:not(.alerta) .punto { background: var(--papel-tenue); }
.estado .calma-estado-palabra { font-weight: 550; color: var(--papel); }
/* El resto de la frase («· 5 archivos leídos · …») no se pinta: lo oye un lector de pantalla y está en el detalle. */
.estado .calma-estado-detalle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calma-estado-boton { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--papel-tenue); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.calma-estado-boton[hidden] { display: none; }
.calma-estado-boton:hover { color: var(--papel); background: var(--grafito-panel); }
.calma-estado-boton::before, .tu-dia-plegar::after, #overlay-avisos .vis-semaforo::after {
  content: ''; flex: none; width: 14px; height: 14px; background: currentColor; transition: transform .16s ease;
  -webkit-mask: var(--mv-ico-flecha) center / contain no-repeat; mask: var(--mv-ico-flecha) center / contain no-repeat;
}
.calma-estado-boton[aria-expanded="true"]::before, .tu-dia-plegar[aria-expanded="true"]::after { transform: rotate(180deg); }
.calma-estado-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 35; width: max-content; max-width: min(340px, calc(100vw - 96px)); padding: 12px 14px; background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); box-shadow: var(--sombra-2); }
.calma-estado-panel[hidden] { display: none; }
.calma-estado-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--calma-t-menor); line-height: 1.45; color: var(--papel-apagado); }
.calma-estado-panel li.calma-mal { color: var(--ambar-texto); }
.calma-estado-panel li.calma-tenue { font-size: var(--calma-t-nota); color: var(--papel-tenue); }
/* El botón del centro de avisos, con su recuento. Rojo solo si hay algo urgente. */
.calma-avisos-boton { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.calma-cuenta { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: .72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--papel); background: var(--grafito-panel); border: 1px solid var(--costura-fuerte); border-radius: 9px; }
.calma-cuenta[hidden] { display: none; }
.calma-avisos-boton[data-tono="urgente"] .calma-cuenta { color: var(--grafito); background: var(--calma-mal); border-color: var(--calma-mal); }
/* El punto de color del botón del cajón (móvil) era el semáforo: ahora lo lleva el botón de avisos. */
.cabecera .panel-boton[data-vis-color]::after { display: none; }
@media (max-width: 640px) {
  html #abrir-avisos { --mv-ico: var(--calma-ico-campana); }
  .calma-avisos-boton .calma-cuenta { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .66rem; }
}

/* ==================================================================== 2 · LA FRANJA: un aviso a la vista, como mucho
   La franja es UNA fila de la rejilla de la ventana, haya o no algo dentro (antes, con el aviso de cuenta oculto, el
   cuerpo caía en la fila «auto» y el pie en la «1fr»). El recordatorio de una sola vez cede el sitio a cualquier otro. */
.calma-franja { min-width: 0; }
/* (08/10/2026) Con «Tu día» a la vista la franja de una vez no se enseña (calma.js lo hace igual; esto evita que salga un instante al cargar). */
#marco:has(#tu-dia:not([hidden]):not(:empty)) #calma-aviso { display: none; }
html.tf-local .marco > .calma-franja { grid-row: 2; }
.calma-franja > :not([hidden]):not(.calma-aviso) ~ .calma-aviso { display: none; }
.calma-aviso { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 24px; font-size: var(--calma-t-menor); color: var(--papel-apagado); background: var(--hoja); border-bottom: 1px solid var(--costura); }
.calma-aviso[hidden] { display: none; }
.calma-aviso p { flex: 1 1 auto; min-width: 0; margin: 0; }
.calma-cerrar { position: relative; flex: none; width: 36px; height: 36px; padding: 0; color: var(--papel-tenue); background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.calma-cerrar:hover { color: var(--papel); background: var(--grafito-panel); }
.calma-cerrar::before, .calma-cerrar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.calma-cerrar::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 480px) { .calma-aviso { padding-left: 14px; } }

/* ==================================================================== 3 · LA CONVERSACIÓN: solo conversación
   Filas: «Tu día» (una línea), el hilo (la que crece) y, debajo, lo de preguntar. */
.charla { display: flex; flex-direction: column; min-width: 0; }
.charla > * { flex: none; min-width: 0; max-width: 100%; }
/* EL CHAT APLASTADO (F01 de la exploración del 27/10, 28/10/2026). Antes solo cedía alto la conversación y las tarjetas de encima
   de la caja de preguntar iban con flex: none: a 1366×657, con la de los Excel y «Tu día» abierto, la conversación se quedaba en
   0 px. Ahora la conversación tiene un alto mínimo de 6 líneas (las de .folio p, 26 px) y, si no cabe todo, son las tarjetas las
   que encogen y se desplazan por dentro, con su título y su botón siempre a la vista (sección 3 bis). Prueba: batería
   «chat-portatil». */
.charla { --calma-hilo-lineas: calc(6 * 1.625rem); --calma-hilo-arriba: 24px; --calma-hilo-abajo: 12px; }
.charla > .hilo { flex: 1 1 0; min-height: calc(var(--calma-hilo-lineas) + var(--calma-hilo-arriba) + var(--calma-hilo-abajo) + 2px); padding-top: var(--calma-hilo-arriba); padding-bottom: var(--calma-hilo-abajo); }
/* Lo que sube al desplazar se funde en el relleno de arriba, en vez de cortarse a media línea contra «Tu día». La primera mitad del
   relleno es del todo transparente: con la rampa desde el mismo borde, la mitad de abajo de un renglón cortado por el borde se
   seguía leyendo (en el móvil, medio renglón del saludo bajo «Tienes algo urgente para hoy»; captura de Chat a 500 px, 03/11/2026). */
.charla > .hilo { -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--calma-hilo-arriba) / 2), #000 var(--calma-hilo-arriba)); mask-image: linear-gradient(to bottom, transparent calc(var(--calma-hilo-arriba) / 2), #000 var(--calma-hilo-arriba)); }
/* Antes de la primera pregunta: el saludo y, justo debajo, las preguntas sugeridas; la caja de preguntar, abajo. El saludo es corto:
   se queda entero (min-height: auto no vale en algo que se desplaza) y, si no cabe todo, encogen antes las tarjetas (flex-shrink). */
.charla:not(:has(.hilo > .yo)) > .hilo { flex: 0 1 auto; min-height: 0; --calma-hilo-abajo: 8px; }
.charla:not(:has(.hilo > .yo)) > .escribir { margin-top: auto; }
.tu-dia, html.tf-local .tu-dia.tu-dia-recogida { margin: 0; padding: 0; gap: 0; background: transparent; border: 0; border-bottom: 1px solid var(--costura); border-radius: 0; }
.tu-dia-cabecera { display: block; }
.tu-dia-cabecera h2 { margin: 0; font: inherit; }
.tu-dia-plegar { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 44px; padding: 10px 28px; font: inherit; text-align: left; color: var(--papel); background: transparent; border: 0; cursor: pointer; }
.tu-dia-plegar:hover { background: var(--hoja); }
.tu-dia-plegar::after { align-self: center; margin-left: auto; color: var(--papel-tenue); }
.tu-dia-titulo { font-size: .92rem; font-weight: 650; }
.tu-dia-plegar .tu-dia-fecha { flex: none; font-size: var(--calma-t-menor); }
.tu-dia-resumen { min-width: 0; font-size: var(--calma-t-menor); color: var(--papel-apagado); }
.tu-dia-resumen::before { content: '· '; color: var(--papel-tenue); }
.tu-dia.tu-dia-recogida > :not(.tu-dia-cabecera) { display: none; }
.tu-dia > :not(.tu-dia-cabecera) { margin: 0 28px 12px; }
.tu-dia > .tu-dia-cabecera + * { margin-top: 6px; }
.tu-dia-plegar:focus-visible { outline-offset: -2px; }
.tu-dia h3 { margin-bottom: 4px; }
.calma-vacio:empty { display: none; }
.calma-vacio { padding: 0 28px; }   /* el aire de abajo va en la tira: si «Pon en marcha» la oculta, #calma-vacio no deja 8 px vacíos */
html .calma-vacio .tf-tira { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 8px; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--costura); border-radius: var(--r-panel); }
html .calma-vacio .tf-tira > p:first-child { flex: 1 1 240px; font-size: .95rem; }
.escribir input { height: 48px; border-radius: var(--r-control); }
.escribir .pulsador { height: 48px; border-radius: var(--r-control); box-shadow: none; }
@media (max-width: 860px) { .tu-dia-plegar { padding-left: 16px; padding-right: 16px; } .tu-dia > :not(.tu-dia-cabecera) { margin-left: 16px; margin-right: 16px; } .calma-vacio { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 480px) { .tu-dia-plegar { padding-left: 14px; padding-right: 14px; } .tu-dia > :not(.tu-dia-cabecera) { margin-left: 14px; margin-right: 14px; } .calma-vacio { padding-left: 14px; padding-right: 14px; } }
/* El aviso que se va solo no tapa ni la última respuesta ni la caja de preguntar: en ancho cabe dentro de la columna
   del lateral (300 px); en estrecho baja desde arriba, sobre la cabecera (con una hoja abierta se queda abajo, como
   estaba, para no tapar su botón «Cerrar»). */
@media (min-width: 861px) { .notificacion { right: 12px; bottom: 16px; max-width: 276px; } }
@media (max-width: 640px) {
  .notificacion { top: 8px; right: 12px; bottom: auto; left: 12px; max-width: none; }
  body:has(.overlay:not([hidden])) .notificacion { top: auto; bottom: 20px; }
}
/* «Tu día» abierto a propósito en una pantalla estrecha: puede ocupar más alto antes de desplazarse por dentro. */
@media (max-width: 640px) { html.tf-local .tu-dia:not(.tu-dia-recogida) { max-height: 56vh; max-height: 56dvh; } }

/* ==================================================================== 3 bis · LO QUE VA ENCIMA DE LA CAJA DE PREGUNTAR CEDE ALTO
   «Tu día» abierto, «Pon en marcha tu Fold» desplegada y la de los Excel encogen antes que la conversación (flex-shrink alto) y
   nunca por debajo de su título y su botón (min-height): lo que sobra se desplaza DENTRO de la tarjeta, con el título pegado arriba
   y el botón abajo (sticky), así que se ven aunque la tarjeta esté desplazada. «Fold necesita N cosas de ti» y «Empezar con mis
   archivos» son una frase y sus botones: no encogen; a menos altura, rellenos más cortos. */
.charla > :is(.tu-dia, .pem-aviso, .plf-aviso, .csl-oferta, .calma-vacio) { flex: 0 1000 auto; }
.charla > .tu-dia:not(.tu-dia-recogida), .charla > .pem-aviso { overflow-y: auto; overscroll-behavior: contain; }
/* «Tu día»: su cabecera (la línea que se pulsa para plegarla) es el título y el botón a la vez. */
.charla > .tu-dia:not(:empty) { min-height: 46px; }
.charla > .tu-dia > .tu-dia-cabecera { position: sticky; top: 0; z-index: 1; background: var(--grafito); }
/* Lo que queda por debajo, al desplazar, se funde abajo (no se corta a media línea); sin nada debajo no se ve. */
.charla > .tu-dia:not(.tu-dia-recogida)::after { content: ''; position: sticky; bottom: 0; display: block; height: 14px; margin-top: -14px; background: linear-gradient(to bottom, transparent, var(--grafito)); pointer-events: none; }
/* La de los Excel: si no cabe, la tarjeta se desplaza por dentro, con el título pegado arriba y los botones abajo (sus rellenos
   pasan a ellos para que lo desplazado no asome por encima ni por debajo). Alto mínimo: dos líneas de título y los botones. */
.charla > .csl-oferta:not([hidden]) { display: flex; flex-direction: column; min-height: calc(2px + 2 * var(--csl-relleno) + 2 * 1.35rem + 44px); --csl-relleno: 14px; }
.csl-oferta > .csl-tarjeta { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 0; padding-bottom: 0; }
.csl-oferta > .csl-tarjeta > .csl-titulo { position: sticky; top: 0; z-index: 1; padding-top: var(--csl-relleno); background: var(--superficie); }
.csl-oferta > .csl-tarjeta > .csl-botones { position: sticky; bottom: 0; z-index: 1; padding-bottom: var(--csl-relleno); background: var(--superficie); }
.csl-oferta > .csl-tarjeta > .csl-estado:not([hidden]) { margin-top: calc(-1 * var(--csl-relleno) + 4px); padding-bottom: var(--csl-relleno); }
/* «Pon en marcha tu Fold» (puesta-en-marcha.css): su cabecera, con «Ver los pasos» o «Plegar», siempre arriba. */
.charla > .pem-aviso { min-height: 60px; }
.charla > .pem-aviso > .pem-cabeza { position: sticky; top: 0; z-index: 1; margin: -14px -16px 0; padding: 14px 16px 8px; background: var(--superficie, var(--grafito-alto)); }
.charla > .pem-aviso.pem-plegada { flex-shrink: 0; }
.charla > .pem-aviso.pem-plegada > .pem-cabeza { position: static; margin: 0; padding: 0; background: transparent; }
/* «Fold necesita N cosas de ti» y «Empezar con mis archivos» son una frase y sus botones: no encogen (no hay nada que desplazar). */
.charla > :is(.plf-aviso, .calma-vacio) { flex-shrink: 0; }
/* «Perfil de la empresa» no va en la columna (se salía por debajo de la caja de preguntar, 68 px): se abre desde el nombre de la
   empresa en la cabecera (UX-01, perfil-inicial-empresa.js), que usa este mismo botón. El botón sigue en la página para eso (si
   desapareciera, la cabecera se deshabilitaría) y se ve cuando le llega el foco del teclado, como «Ir a la conversación». Con la
   estructura nueva (1.1) el perfil vive en Tu empresa › Perfil. */
.charla > .fpie-raiz:not(:has(> .fpie-panel:not([hidden]))) { margin: 0; padding: 0; }
.charla > .fpie-raiz > #fpie-abrir:not(:focus-visible) { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.charla > .fpie-raiz > #fpie-abrir:focus-visible { position: absolute; left: 28px; bottom: 12px; z-index: 6; background: var(--superficie); }
.charla > .sugerencias:empty { display: none; }
/* A menos altura (portátiles de 768 y menos), rellenos más cortos: más sitio para leer. */
@media (max-height: 800px) {
  .charla { --calma-hilo-arriba: 8px; --calma-hilo-abajo: 4px; }
  .charla > .escribir { padding-top: 4px; padding-bottom: 8px; }
  .charla > .ia-avanzada { margin-top: -8px; padding-bottom: 2px; }
  .charla > :is(.plf-aviso, .pem-aviso) { padding-top: 8px; padding-bottom: 8px; margin-bottom: 4px; }
  .charla > .pem-aviso.pem-plegada { padding-top: 4px; padding-bottom: 4px; }
  .charla > .pem-aviso > .pem-cabeza { margin-top: -8px; padding-top: 8px; }
  .csl-oferta > .csl-tarjeta { gap: 8px; }
  .charla > .csl-oferta:not([hidden]) { margin-bottom: 4px; --csl-relleno: 10px; }
  html .calma-vacio .tf-tira { padding-top: 8px; padding-bottom: 8px; margin-bottom: 4px; }
  .charla > .tu-dia > :not(.tu-dia-cabecera) { margin-bottom: 8px; }
}
/* Con ratón, los botones de una línea de encima de la caja de preguntar y el interruptor de la IA avanzada no necesitan 44 px de
   alto (con el dedo, sí: se quedan como estaban). */
@media (max-height: 800px) and (pointer: fine) {
  .charla > .ia-avanzada .ia-avanzada-boton { min-height: 32px; }
  .charla > .pem-aviso.pem-plegada .pem-ver, .charla > .plf-aviso .plf-aviso-boton { min-height: 36px; }
}
/* En estrecho, los botones de la de los Excel y los de «Empezar con mis archivos» en una fila (antes, uno debajo de otro); y
   «Pon en marcha tu Fold» plegada en una línea: nombre, recuento y «Ver los pasos» (lo siguiente está dentro). */
@media (max-width: 560px) {
  .charla > .pem-aviso.pem-plegada .pem-siguiente { display: none; }
  .csl-oferta .csl-botones, html .calma-vacio .tf-tira-botones { flex-wrap: nowrap; width: 100%; }
  .csl-oferta .csl-botones .tf-boton, html .calma-vacio .tf-tira-botones .tf-boton { flex: 1 1 0; min-width: 0; white-space: normal; }
}

/* ==================================================================== 4 · EL LATERAL: tu empresa de un vistazo
   Orden: lo que Fold ha leído, el objetivo del mes y los pasos que faltan. La racha y el contador de preguntas están en
   «Tu Fold»; lo que el plan no incluye, en «Tu Fold › Ver lo que incluye y lo que viene»; la salud, en el centro de avisos. */
.lateral { display: flex; flex-direction: column; padding: 20px 22px; }
:is(.lateral, .sp-lateral) > .lateral-cerrar { order: -1; flex: none; }
/* En estrecho el lateral es un cajón: va por encima de la banda de la empresa de ejemplo (z 38), que le tapaba «Cerrar panel». */
@media (max-width: 860px) { .lateral { z-index: 39; padding-top: 20px; } }
:is(.lateral, .sp-lateral) > .bloque { order: 3; flex: none; }
:is(.lateral, .sp-lateral) > .bloque:has(> #fuentes) { order: 1; }
:is(.lateral, .sp-lateral) > .vis-vistazo { order: 2; }
:is(.lateral, .sp-lateral) > .bloque, :is(.lateral, .sp-lateral) > .bloque + .bloque { margin: 0; padding: 0; border: 0; }
:is(.lateral, .sp-lateral) > .bloque:has(> #mensajero-estado), .lateral:has(#fuentes:not(:empty)) > .vis-vistazo { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--costura); }
:is(.lateral, .sp-lateral) > .bloque:has(> #fuentes:empty), :is(.lateral, .sp-lateral) > #bloque-uso { display: none; }
:is(.lateral, .sp-lateral) .fuentes { gap: 14px; }
:is(.lateral, .sp-lateral) .fuentes li { position: relative; padding-left: 18px; font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--papel); overflow-wrap: anywhere; }
:is(.lateral, .sp-lateral) .fuentes li::before { content: ''; position: absolute; left: 0; top: .48em; width: 8px; height: 8px; border-radius: 50%; background: var(--calma-bien); }
:is(.lateral, .sp-lateral) .fuentes li.ojo::before { background: var(--calma-ojo); }
:is(.lateral, .sp-lateral) .fuentes li.mal::before { background: var(--calma-mal); }
:is(.lateral, .sp-lateral) .fuentes li span { margin-top: 2px; font-size: var(--calma-t-nota); font-weight: 400; }
.lateral .vis-vistazo:not([hidden]) { display: flex; flex-direction: column; gap: 24px; }
/* (08/10/2026) El título oculto es «absolute»: sin un antepasado con posición se colgaba de la página y, con el lateral lleno,
   quedaba por debajo de la ventana: el documento medía 98 px de más y, al usar la rueda o el tabulador, la cabecera se iba hacia
   arriba dejando una franja negra abajo. Con esto queda dentro de su bloque, que es el que se desplaza. */
.lateral .vis-vistazo { position: relative; }
.lateral .vis-vistazo > h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lateral .vis-tarjeta + .vis-tarjeta { margin-top: 0; padding-top: 0; border-top: 0; }
.lateral .vis-tarjeta-titulo { margin-bottom: 4px; }
/* En el lateral no hay botón principal: el de la pantalla es «Preguntar». «Poner objetivo» es secundario. */
:is(.lateral, .sp-lateral) #vis-objetivo > .vis-botones > .vis-boton.primera { color: var(--papel); background: var(--superficie); border-color: var(--costura-fuerte); }
:is(.lateral, .sp-lateral) #vis-objetivo { order: 1; }
.lateral .vis-tarjeta:has(.vis-anillo) { order: 2; }
.lateral .vis-semaforo-tarjeta, .lateral .vis-tarjeta:has(.vis-tira), .lateral .vis-tarjeta:has(.vis-bloqueada), .lateral .vis-tarjeta:has(.vis-anillo.completo) { display: none; }
:is(.lateral, .sp-lateral) > .vis-vistazo:not(:has(#vis-objetivo, .vis-anillo:not(.completo))) { display: none; }

/* ==================================================================== 5 · EL CENTRO DE AVISOS
   Una lista con rayas finas, no una pila de tarjetas. Cada aviso: qué pasa, y debajo lo que se puede hacer. */
.calma-centro .cuerpo-overlay { gap: 28px; }
.calma-grupo { display: grid; gap: 0; }
.calma-grupo[hidden] { display: none; }
.calma-grupo > h3 { margin-bottom: 8px; }
.calma-lista:empty { display: none; }
.calma-nada { margin: 0; font-size: .92rem; color: var(--papel-apagado); }
.calma-item, #overlay-avisos .tf-tira, #overlay-avisos .primeros-pasos .pp-seguridad, #overlay-avisos .primeros-pasos .pp-cab { display: grid; gap: 8px; margin: 0; padding: 14px 0 0; background: transparent; border: 0; border-top: 1px solid var(--costura); border-radius: 0; }
.calma-item, #overlay-avisos .tf-tira, #overlay-avisos .primeros-pasos .pp-seguridad { padding-bottom: 16px; }
.calma-item p, #overlay-avisos .tf-tira p { margin: 0; }
.calma-item-titulo, #overlay-avisos .tf-tira > p:first-child, #overlay-avisos .primeros-pasos .pp-titulo { font-size: .95rem; font-weight: 650; line-height: 1.4; color: var(--papel); }
.calma-item-texto { font-size: var(--calma-t-menor); line-height: 1.45; color: var(--papel-apagado); overflow-wrap: anywhere; }
.calma-item-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
#overlay-avisos .primeros-pasos { display: grid; gap: 0; max-height: none; margin: 0; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#overlay-avisos .primeros-pasos[hidden] { display: none; }
#overlay-avisos .primeros-pasos .pp-cab { display: flex; }
#overlay-avisos .primeros-pasos .barra { margin: 10px 0 12px; }
#overlay-avisos .primeros-pasos .pp-pasos { flex-direction: column; flex-wrap: nowrap; gap: 2px; padding-bottom: 8px; }
#overlay-avisos .primeros-pasos .pp-pasos li { min-height: 40px; font-size: var(--calma-t-menor); }
#overlay-avisos .primeros-pasos .pp-pasos li .enlace-discreto { margin-left: auto; flex: none; }
/* La salud del negocio (el semáforo de visuales.js): una fila entera que se pulsa. */
#overlay-avisos .vis-semaforo:not([hidden]) { display: flex; justify-content: flex-start; width: 100%; height: auto; min-height: 48px; margin: 0; padding: 10px 14px; font-size: .95rem; text-align: left; white-space: normal; border-radius: var(--r-panel); box-shadow: none; }
#overlay-avisos .vis-semaforo::after { margin-left: auto; color: var(--papel-tenue); transform: rotate(-90deg); }

/* ==================================================================== 6 · LA BANDA DE LA EMPRESA DE EJEMPLO
   Una línea fina, un botón principal y el resto en un menú. */
html .tf-banda { gap: 6px 16px; padding: 6px 16px; font-size: var(--calma-t-menor); border-bottom: 1px solid var(--costura-fuerte); }
html .tf-banda p { flex: 1 1 220px; }
html .tf-banda .tf-boton { min-height: 36px; }
html .tf-banda-botones { align-items: center; }
.calma-menu { position: relative; }
.calma-menu > summary { list-style: none; cursor: pointer; }
.calma-menu > summary::-webkit-details-marker { display: none; }
.calma-menu[open] > summary { border-color: var(--papel-tenue); }
.calma-menu-lista { position: absolute; top: calc(100% + 6px); right: 0; z-index: 39; display: grid; gap: 4px; width: min(300px, calc(100vw - 24px)); padding: 10px; background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); box-shadow: var(--sombra-2); }
html .calma-menu-lista .tf-banda-detalle { display: block; flex: none; margin: 2px 4px 8px; font-size: .8rem; line-height: 1.45; }
html .calma-menu-lista .tf-boton { justify-content: flex-start; min-height: 40px; border-color: transparent; }
html .calma-menu-lista .tf-boton:hover { background: var(--grafito-panel); }
@media (max-width: 560px) {
  html .tf-banda { padding: 6px 12px; }
  html .tf-banda .tf-boton { min-height: 44px; }
  html .tf-banda-botones { flex-wrap: nowrap; }
  html .tf-banda-botones > .calma-menu { flex: none; }
  html .tf-banda-botones .calma-menu .tf-boton { flex: none; }
}

/* ==================================================================== 7 · «TU FOLD»: una ficha, no una pila de tarjetas */
html .tf-hoja .tf-tarjeta.tf-plan { padding: 0 0 20px; background: transparent; border: 0; border-bottom: 1px solid var(--costura); border-radius: 0; }
html .tf-rejilla { display: block; margin: 0; }
html .tf-dato { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--costura); border-radius: 0; }
html .tf-dato:last-child { border-bottom: 0; }
html .tf-dato .tf-etiqueta { margin: 0; padding-top: 2px; }
html .tf-dato dd { margin: 0; }
.tf-nota { display: block; margin: 4px 0 0; font-size: .82rem; font-weight: 400; line-height: 1.45; color: var(--papel-apagado); }
.tf-uso { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--costura); }
.tf-uso[hidden] { display: none; }
.tf-uso .vis-tarjeta-titulo { display: none; }   /* el título ya lo pone la sección */
@media (max-width: 480px) { html .tf-dato { grid-template-columns: minmax(0, 1fr); } }