/* FOLD PIDE LO QUE FALTA (pide-lo-que-falta.js, 27/10/2026). Prefijo «plf-».
   Se apoya en estilos.css (variables, foco) y en tu-fold.css (.tf-boton): no inventa otro sistema. En calma
   (docs/context/interfaz-calma.md): «falta» no es una alarma (sin rojo ni ámbar), el estado lleva marca además de palabra
   (aro = falta, punto = entregado, punto con borde = revisado) y hay UN botón por fila. */
.plf-bloque { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--costura); }
.plf-titulo { margin: 0; font-size: .9rem; font-weight: 700; color: var(--papel); }
.plf-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.plf-fila { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control, 8px); background: var(--grafito); min-width: 0; }
.plf-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plf-nombre { flex: 1 1 12rem; min-width: 0; font-size: .9rem; font-weight: 650; color: var(--papel); overflow-wrap: anywhere; }
.plf-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; font-size: .78rem; font-weight: 650; color: var(--papel-apagado); border: 1px solid var(--costura-fuerte); border-radius: var(--r-pastilla, 999px); }
.plf-chip::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.plf-chip-pendiente::before { border: 2px solid var(--papel-apagado); }
.plf-chip-entregado { color: var(--papel); }
.plf-chip-entregado::before { background: var(--cobalto-claro); }
.plf-chip-revisado { color: var(--papel); }
.plf-chip-revisado::before { background: var(--cobalto-claro); box-shadow: 0 0 0 2px var(--grafito), 0 0 0 3px var(--cobalto-claro); }
.plf-ayuda, .plf-meta, .plf-nota, .plf-consentimiento, .plf-elegido { margin: 0; font-size: .84rem; overflow-wrap: anywhere; }
.plf-ayuda, .plf-meta { color: var(--papel-apagado); }
.plf-texto { color: var(--papel); }
.plf-consentimiento { color: var(--papel); }
.plf-elegido { font-weight: 650; color: var(--papel); }
.plf-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.plf-acciones .tf-boton { min-height: 44px; }
.plf-acciones .tf-boton:focus-visible { outline: 2px solid var(--cobalto-claro, #8FA6FF); outline-offset: 2px; }
.plf-paso { display: grid; gap: 8px; padding-top: 4px; }
.plf-form { display: grid; gap: 8px; }
.plf-etiqueta { font-size: .84rem; font-weight: 650; color: var(--papel); }
.plf-campo { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px; font: inherit; color: var(--papel); background: var(--grafito-alto); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control, 8px); }
.plf-error { margin: 0; font-size: .84rem; font-weight: 650; color: var(--ambar-texto); }
.plf-error[hidden], .plf-paso[hidden], .plf-acciones[hidden] { display: none; }

/* EL AVISO DE INICIO: una línea y un botón, encima de la conversación. Desaparece cuando no queda nada. Los mismos márgenes que
   .csl-oferta y .calma-vacio (carpeta-se-lee.css, calma.css), que van justo debajo. */
.plf-aviso { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 28px 8px; padding: 14px 16px; border: 1px solid var(--costura); border-radius: var(--r-panel, 12px); background: var(--superficie, var(--grafito-alto)); }
.plf-aviso[hidden] { display: none; }
@media (max-width: 860px) { .plf-aviso { margin-left: 16px; margin-right: 16px; } }
@media (max-width: 480px) { .plf-aviso { margin-left: 14px; margin-right: 14px; } }
.plf-aviso-texto { margin: 0; flex: 1 1 16rem; min-width: 0; font-size: .92rem; font-weight: 600; color: var(--papel); }
.plf-aviso-boton { min-height: 44px; }
.plf-aviso-boton:focus-visible { outline: 2px solid var(--cobalto-claro, #8FA6FF); outline-offset: 2px; }