/* Superficie propia del perfil: no modifica overlays, tutorial ni estilos B. */
.fpie-raiz { margin: .75rem 0; padding: 0 1rem; color: var(--texto, #202426); }
/* B15 (12/10/2026): el bloque vive DENTRO de la columna de la conversación (.charla, flex en columna), no en la rejilla de la ventana.
   Cerrado es una línea con su botón. Abierto, el formulario ocupa la columna y se desplaza por dentro, y la conversación se aparta
   (display: none): dos cosas a la vez en una columna de alto fijo se pintaban una encima de otra y tapaban «Cerrar». */
.charla > .fpie-raiz:has(> .fpie-panel:not([hidden])) { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.charla:has(> .fpie-raiz > .fpie-panel:not([hidden])) > :not(.fpie-raiz) { display: none !important; }
.fpie-raiz [hidden] { display: none !important; }
.fpie-raiz button, .fpie-raiz input, .fpie-raiz select, .fpie-raiz textarea { font: inherit; }
.fpie-raiz button { min-height: 44px; padding: .65rem 1rem; border: 1px solid currentColor; border-radius: .55rem; background: var(--superficie, #16191f); color: inherit; cursor: pointer; }
.fpie-raiz button:disabled { opacity: .65; cursor: default; }
.fpie-raiz :focus-visible { outline: 3px solid var(--cobalto-claro, #8bb3ff); outline-offset: 3px; }
.fpie-panel { box-sizing: border-box; max-width: 54rem; margin: .75rem auto; padding: 1.5rem; border: 1px solid #819096; border-radius: .8rem; background: var(--superficie, #16191f); overflow-wrap: anywhere; }
.fpie-panel h2 { margin-top: 0; }
.fpie-panel p { line-height: 1.5; }
.fpie-panel #fpie-cerrar { float: right; }
.fpie-campo { margin: 1.25rem 0; padding: 0; border: 0; min-width: 0; }
.fpie-campo > label, .fpie-campo > legend { display: block; margin-bottom: .5rem; font-weight: 600; }
.fpie-campo textarea, .fpie-campo select { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 44px; padding: .65rem; border: 1px solid #819096; border-radius: .35rem; color: inherit; background: var(--superficie, #16191f); }
.fpie-campo textarea { resize: vertical; }
.fpie-seleccion { display: flex; align-items: center; gap: .65rem; min-height: 44px; font-weight: normal; }
.fpie-seleccion input { width: 1.25rem; height: 1.25rem; flex: none; margin: 0; }
.fpie-ayuda { font-size: .9rem; }
.fpie-aviso { padding: .75rem; border-left: 3px solid #819096; }
/* LO QUE FALTA, EN ROJO (17/10/2026). Rojo con contraste AA en cada tema: #FF9B8F sobre #16191F da 8,7:1; #B42318 sobre
   blanco, 6,6:1. El rojo nunca va solo: siempre lleva el texto que dice qué falta (y el borde, que no depende del color). */
.fpie-raiz { --fpie-rojo: #FF9B8F; --fpie-rojo-fondo: rgba(255, 155, 143, .10); }
:root[data-tema="claro"] .fpie-raiz { --fpie-rojo: #B42318; --fpie-rojo-fondo: rgba(180, 35, 24, .06); }
@media (prefers-color-scheme: light) { :root:not([data-tema="oscuro"]) .fpie-raiz { --fpie-rojo: #B42318; --fpie-rojo-fondo: rgba(180, 35, 24, .06); } }
.fpie-error { color: var(--fpie-rojo); font-weight: 600; }
.fpie-pie-campo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-top: .35rem; }
.fpie-pie-campo p { margin: 0; }
.fpie-contador { font-size: .9rem; font-variant-numeric: tabular-nums; }
.fpie-contador-mal { color: var(--fpie-rojo); font-weight: 600; }
.fpie-falta { display: block; color: var(--fpie-rojo); font-weight: 600; }
.fpie-falta:empty { display: none; }
p.fpie-falta { margin: .45rem 0 0; }
.fpie-campo-mal textarea, .fpie-campo-mal select { border: 2px solid var(--fpie-rojo); }
.fpie-campo-mal > label, .fpie-campo-mal > legend { color: var(--fpie-rojo); }
.fpie-faltan { margin: 1rem 0; padding: 1rem 1.1rem; border: 2px solid var(--fpie-rojo); border-radius: .55rem; background: var(--fpie-rojo-fondo); }
.fpie-faltan h3 { margin: 0 0 .35rem; color: var(--fpie-rojo); }
.fpie-faltan p { margin: 0 0 .5rem; }
.fpie-faltan ul { margin: 0; padding-left: 1.2rem; }
.fpie-faltan li { margin: .35rem 0; line-height: 1.45; }
.fpie-faltan a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.fpie-faltan:focus { outline: none; }
.fpie-dd-mal { padding-left: .6rem; border-left: 3px solid var(--fpie-rojo); }
.fpie-dd-mal .fpie-falta { margin-top: .2rem; white-space: normal; }
.fpie-error:empty, #fpie-estado:empty { margin: 0; }
/* UX-03: si el autoguardado no ha podido guardar (error o conflicto), el estado se lee como aviso, con el mismo rojo y su texto. */
#fpie-estado[data-autoguardado="error"], #fpie-estado[data-autoguardado="conflicto"] { color: var(--fpie-rojo); font-weight: 600; }
.fpie-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.fpie-resumen { padding: 1rem 0; border-bottom: 1px solid #819096; }
.fpie-resumen dt { font-weight: 600; margin-top: .75rem; }
.fpie-resumen dd { margin: .25rem 0 .5rem; white-space: pre-wrap; }
.fpie-conflicto { padding: 1rem; margin: 1rem 0; border: 2px solid #a36e1d; border-radius: .5rem; }
.fpie-conflicto button { margin: .5rem .5rem .5rem 0; }
.fpie-comparacion p { white-space: pre-wrap; }
@media (max-width: 560px) {
  .fpie-raiz { padding: 0 .5rem; }
  .fpie-panel { padding: 1rem; }
  .fpie-acciones { flex-direction: column; }
  .fpie-acciones button { width: 100%; }
}

/* ------------------------------------------------------------------ LA PANTALLA PRIMERO (27/10/2026)
   Con el perfil de la empresa pendiente, la propietaria ve SOLO la marca de Fold y el formulario (perfil-inicial-empresa.js pone
   «fpie-primero» en <html> y cuelga #fpie-raiz del <body>). Todo lo demás del <body> (el marco con la cabecera y el panel lateral,
   los diálogos, la notificación) no se pinta: display: none, que además lo saca del árbol de accesibilidad y del tabulador. El
   marco sigue en la página y sin «hidden» (los módulos lo rellenan por detrás); al «Terminar», la clase se quita y ya está todo.
   LA PALETA SUAVE (docs/architecture/estructura-sencilla.md §8, decisión de David): base cálida y apagada, sin blanco puro; las
   superficies se separan por tono y una sombra blanda. Va solo en esta pantalla (prefijo --fp-) hasta que PC-B la lleve a
   estilos.css; contrastes medidos ahí (ningún texto baja de 4,5:1). Los bordes de los campos, más oscuros que el canto del
   folio, para llegar a 3:1 (WCAG 1.4.11). */
html.fpie-primero {
  --fp-fondo: #1D1E21; --fp-superficie: #25262A; --fp-campo: #2B2B2D; --fp-canto: #3A3936; --fp-borde-campo: #77736C;
  --fp-texto: #E7E3DB; --fp-texto-2: #B5B0A7; --fp-acento: #6E80D6; --fp-acento-hover: #8191DD; --fp-acento-letra: #141518; --fp-rojo: #E39484;
  --fp-sombra: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 28px -16px rgba(0, 0, 0, .55);
}
html.fpie-primero[data-tema="claro"] {
  --fp-fondo: #EAE6DE; --fp-superficie: #F3F0EA; --fp-campo: #F6F3EE; --fp-canto: #D8D1C3; --fp-borde-campo: #8A8478;
  --fp-texto: #24262B; --fp-texto-2: #55585F; --fp-acento: #4459BE; --fp-acento-hover: #3A4FB0; --fp-acento-letra: #F7F6F2; --fp-rojo: #9A3B2B;
  --fp-sombra: 0 1px 2px rgba(60, 48, 30, .05), 0 10px 26px -14px rgba(60, 48, 30, .20);
}
@media (prefers-color-scheme: light) {
  html.fpie-primero:not([data-tema="oscuro"]) {
    --fp-fondo: #EAE6DE; --fp-superficie: #F3F0EA; --fp-campo: #F6F3EE; --fp-canto: #D8D1C3; --fp-borde-campo: #8A8478;
    --fp-texto: #24262B; --fp-texto-2: #55585F; --fp-acento: #4459BE; --fp-acento-hover: #3A4FB0; --fp-acento-letra: #F7F6F2; --fp-rojo: #9A3B2B;
    --fp-sombra: 0 1px 2px rgba(60, 48, 30, .05), 0 10px 26px -14px rgba(60, 48, 30, .20);
  }
}
html.fpie-primero body { background: var(--fp-fondo); }
html.fpie-primero body > :not(#fpie-raiz) { display: none !important; }
.fpie-marca, .fpie-abriendo { display: none; }
html.fpie-primero #fpie-raiz {
  --fpie-rojo: var(--fp-rojo); --fpie-rojo-fondo: transparent;
  box-sizing: border-box; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 28px 16px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  background: var(--fp-fondo); color: var(--fp-texto);
}
html.fpie-primero .fpie-marca:not([hidden]) { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 46rem; }
html.fpie-primero .fpie-marca-fold { width: 44px; height: 44px; flex: none; }
html.fpie-primero .fpie-marca-nombre { margin: 0; font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variation-settings: 'wdth' 112; }
html.fpie-primero .fpie-abriendo:not([hidden]) { display: block; margin: 0; color: var(--fp-texto-2); }
html.fpie-primero #fpie-raiz > .fpie-error { width: 100%; max-width: 46rem; margin: 0; }
html.fpie-primero .fpie-panel {
  width: 100%; max-width: 46rem; margin: 0; padding: 32px 36px 28px;
  border: 0; border-radius: 14px; background: var(--fp-superficie); box-shadow: var(--fp-sombra);
}
html.fpie-primero .fpie-panel h1 { margin: 0 0 .6rem; font-size: 1.65rem; font-weight: 650; line-height: 1.2; letter-spacing: -.02em; }
html.fpie-primero .fpie-panel h2 { margin: 1.4rem 0 0; font-size: 1.2rem; font-weight: 650; line-height: 1.3; }
html.fpie-primero .fpie-entradilla { margin: 0 0 .5rem; color: var(--fp-texto-2); }
html.fpie-primero .fpie-aviso { margin: 1rem 0 0; font-size: .95rem; border-left-color: var(--fp-borde-campo); }
html.fpie-primero .fpie-campo textarea, html.fpie-primero .fpie-campo select { background: var(--fp-campo); color: var(--fp-texto); border-color: var(--fp-borde-campo); border-radius: 10px; }
html.fpie-primero .fpie-seleccion input { accent-color: var(--fp-acento); }
html.fpie-primero .fpie-raiz :focus-visible, html.fpie-primero #fpie-raiz :focus-visible { outline-color: var(--fp-acento); }
html.fpie-primero #fpie-raiz button { border-radius: 10px; border-color: var(--fp-borde-campo); background: var(--fp-superficie); color: var(--fp-texto); }
html.fpie-primero #fpie-raiz button:active:not(:disabled) { transform: translateY(1px); }
/* «Paso 2 de 4» (o «3 preguntas · menos de un minuto»): una rayita por paso y el texto, que es lo que lee quien no ve las rayas. */
html.fpie-primero #fpie-progreso { display: flex; align-items: center; gap: 12px; margin: 1.5rem 0 0; font-size: .9rem; font-weight: 650; color: var(--fp-texto-2); }
.fpie-barras { display: inline-flex; gap: 4px; flex: none; }
.fpie-barras i { display: block; width: 26px; height: 4px; border-radius: 2px; background: var(--fp-canto, #819096); }
.fpie-barras i.fpie-barra-hecha { background: var(--fp-acento, #3358FF); }
/* Las casillas de «Excel u otro programa», en dos columnas cuando hay sitio: siete opciones en fila eran media pantalla. */
/* (Con la casilla en su línea a cualquier ancho: a 500 px otra regla de ancho estrecho le quitaba el flex y la casilla subía.) */
html.fpie-primero fieldset.fpie-campo > .fpie-seleccion { display: inline-flex; align-items: center; gap: .65rem; box-sizing: border-box; width: 100%; vertical-align: top; }
@media (min-width: 561px) {
  html.fpie-primero fieldset.fpie-campo > .fpie-seleccion { width: 50%; padding-right: 1rem; }
}
/* La acción que lleva adelante, con el acento; «Anterior», a la izquierda. */
html.fpie-primero .fpie-acciones { justify-content: flex-end; }
html.fpie-primero #fpie-anterior { margin-right: auto; }
html.fpie-primero #fpie-raiz #fpie-siguiente, html.fpie-primero #fpie-raiz #fpie-finalizar { border-color: var(--fp-acento); background: var(--fp-acento); color: var(--fp-acento-letra); font-weight: 650; }
html.fpie-primero #fpie-raiz #fpie-siguiente:hover:not(:disabled), html.fpie-primero #fpie-raiz #fpie-finalizar:hover:not(:disabled) { border-color: var(--fp-acento-hover); background: var(--fp-acento-hover); }
@media (max-width: 560px) {
  html.fpie-primero #fpie-raiz { padding: 18px 12px 32px; gap: 14px; }
  html.fpie-primero .fpie-panel { padding: 22px 18px 20px; }
  html.fpie-primero .fpie-panel h1 { font-size: 1.4rem; }
  html.fpie-primero .fpie-marca-fold { width: 36px; height: 36px; }
  html.fpie-primero .fpie-marca-nombre { font-size: 1.45rem; }
  html.fpie-primero #fpie-anterior { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .fpie-raiz *, .fpie-raiz *::before, .fpie-raiz *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }