/* Fold · LA ESTRUCTURA (pc-b/estructura, 27/10/2026; diseño B «Papel», claude-a/diseno-b, 02/11/2026).
   La barra lateral (cinco apartados; abajo Ayuda, Cuenta y ajustes y Salir), la página de cada apartado, «Para hoy» (en Trabajo), el
   perfil de la empresa a página completa y lo que se abre desde una página, como página. Maquetas: workspace/central/mejoras/
   diseno-saas-20261101/b (comun.css + b.css). Solo colores de paleta.css. Va la ÚLTIMA de las hojas de la ventana (index.html).
   Regla del motivo: LO QUE PROPONE FOLD lleva la esquina doblada (sus propuestas); lo tuyo (tus respuestas, tus formularios) es papel liso.
   Radios: 10 (pequeño y botones), 14 (cajas) y 18 (la caja de escribir). Todo lo pulsable mide 40-44 px y tiene :active. */

/* ==================================================================== 0 · EL ARMAZÓN: barra + principal */
:root { --ancho-barra: 264px; --titulo-ancho: 118; }
.marco { display: grid; grid-template-columns: var(--ancho-barra) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-width: none; height: 100vh; height: 100dvh; }
/* En un Fold instalado, estilos.css daba a la rejilla las 4 filas de antes (html.tf-local .marco, más específica): con una conversación
   corta, la barra y la página se quedaban en su alto natural y no llegaban abajo (lo vio interfaz-sencilla con un miembro a 1366×657). */
html.tf-local .marco { grid-template-rows: minmax(0, 1fr); }
@media (max-height: 560px) and (min-width: 761px) { html.tf-local .marco { height: 100vh; height: 100dvh; min-height: 0; } }
.almacen, .almacen[hidden] { display: none !important; }
.principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fondo); }
.principal > .calma-franja { flex: none; }
.cuerpo { flex: 1 1 auto; display: block; position: relative; min-height: 0; }
.sitio-pantalla { height: 100%; min-height: 0; }
.sitio-pantalla[hidden] { display: none !important; }
::selection { background: var(--acento); color: var(--sobre-acento); }
input, textarea { caret-color: var(--acento); }
* { scrollbar-width: thin; scrollbar-color: var(--folio-canto) transparent; }
body { background: var(--fondo); }

/* En el escritorio la ventana no se desplaza: se desplaza cada página por dentro. */
@media (min-width: 761px) { html:has(#marco:not([hidden])), html:has(#marco:not([hidden])) body { overflow: hidden; } }
/* Los ejemplos de pregunta, solo con la conversación vacía (estructura-sencilla §2.2): tras la primera pregunta, compiten con la respuesta. */
html:not(.tut-abierto) .charla:has(.hilo > .yo) > .sugerencias, html:not(.tut-abierto) .charla:has(.hilo > .yo) > .bienvenida-pista { display: none; }   /* (el tutorial enseña a pulsarlos: con él abierto, se ven) */

/* ==================================================================== 1 · LA BARRA LATERAL (tinta, con texto claro) */
.carril { display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 14px 12px 12px; background: var(--barra); color: var(--barra-texto); border-right: 1px solid var(--barra-borde); overflow-y: auto; }
.carril-cabeza { display: grid; gap: 6px; padding-bottom: 10px; }
.carril-marca { display: flex; align-items: center; gap: 8px; padding: 2px 8px 8px; }
.carril-marca .fold { width: 34px; height: 34px; }
.carril-marca .carril-marca-nombre { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; font-variation-settings: 'wdth' 118; color: var(--barra-texto); }
.carril-empresa { margin: 0; font-size: 1rem; line-height: 1.25; display: block; }
/* La empresa: su logo (o inicial) y su nombre, que lleva a Tu empresa › Cómo trabajas; debajo, el plan. */
html .carril .identidad-empresa { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--barra-texto); font: inherit; font-size: .875rem; font-weight: 600; text-align: left; letter-spacing: 0; box-shadow: none; }
html .carril .identidad-empresa:not(:disabled):hover { background: var(--barra-hover); }
html .carril .identidad-empresa:not(:disabled):active { background: var(--barra-boton); }
html .carril .identidad-empresa:disabled { opacity: 1; cursor: default; }
html .carril .identidad-empresa:focus-visible { outline: 2px solid var(--barra-texto); outline-offset: 2px; box-shadow: none; }
html .carril .logo-empresa { width: 28px; height: 28px; border-radius: 7px; flex: none; }
html .carril .logo-empresa img { width: 28px; height: 28px; border-radius: 7px; }
html .carril .logo-empresa.logo-inicial { background: var(--acento); color: var(--sobre-acento); font-size: .8125rem; font-weight: 700; }
.carril-empresa-textos { display: grid; min-width: 0; }
html .carril #nombre-empresa { max-width: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.25; color: var(--barra-texto); }
.carril-plan { color: var(--barra-texto-3); font-size: .78rem; font-weight: 500; }
.carril-plan:empty { display: none; }
/* El plan que pinta planes-bienvenida.js (con «Ver planes» si se puede contratar) va debajo del nombre y sustituye al rótulo del plan. */
.carril-empresa:has(.pb-plan-cabecera) .carril-plan { display: none; }
html .carril .carril-empresa .pb-plan-cabecera { display: inline-flex; align-items: center; min-height: 32px; height: auto; margin: 2px 0 0 46px; padding: 2px 10px; border: 1px solid var(--barra-borde-fuerte); border-radius: 999px; background: var(--barra-boton); color: var(--barra-texto-2); font: inherit; font-size: .78rem; font-weight: 600; box-shadow: none; }
html .carril .carril-empresa .pb-plan-cabecera.pb-plan-discreto { border-color: transparent; background: transparent; padding-left: 0; color: var(--barra-texto-3); }
html .carril .carril-empresa .pb-plan-cabecera:hover { color: var(--barra-texto); }
@media (max-width: 760px) { html .carril .carril-empresa .pb-plan-cabecera { display: none; } }
/* Cambiar de empresa (solo con más de una): debajo del nombre. */
html .carril .menu-empresas { position: relative; display: block; }
html .carril .menu-empresas[hidden] { display: none; }
html .carril .menu-empresas .mas-boton { display: flex; align-items: center; width: 100%; min-height: 38px; height: auto; padding: 6px 10px; border: 1px solid var(--barra-borde-fuerte); border-radius: 10px; background: var(--barra-boton); color: var(--barra-texto); font: inherit; font-size: .84rem; font-weight: 600; box-shadow: none; }
html .carril .menu-empresas .mas-boton:hover { background: var(--barra-hover); }
html .carril .menu-empresas .menu-mas-lista { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 35; padding: 6px; background: var(--superficie); color: var(--texto); border-radius: 12px; box-shadow: var(--sombra-3); }

.sitios { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.sitios li[hidden] { display: none; }
.sitio { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--barra-texto-2); font: inherit; font-size: .9375rem; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.sitio:hover { background: var(--barra-hover); color: var(--barra-texto); }
.sitio:active { background: var(--barra-boton); }
.sitio[aria-current="page"] { background: var(--barra-activo); color: var(--barra-activo-texto); font-weight: 600; }
.sitio[aria-current="page"] .ic { color: var(--barra-activo-icono); }
.sitio:focus-visible { outline: 2px solid var(--barra-texto); outline-offset: 1px; box-shadow: none; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sitio-nombre-corto { display: none; }
/* EL ÚNICO NÚMERO: lo que hay para hoy, junto a Trabajo (ámbar, como lo que cuenta). */
.insignia { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--insignia); color: var(--sobre-insignia); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.insignia[hidden] { display: none; }
.sitio-punto, .sitio-punto[hidden] { display: none; }

.carril-pie { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--barra-borde); display: grid; gap: 1px; }
.sitio-pie { min-height: 38px; font-size: .9063rem; }
/* Quién ha entrado (sus iniciales en ámbar, su nombre y su rol) y «Salir». */
.persona { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 4px; padding: 6px 4px 2px 8px; color: var(--barra-texto); }
.iniciales { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--insignia); color: var(--sobre-insignia); font-size: .75rem; font-weight: 700; }
.iniciales:empty { visibility: hidden; }
.persona-textos { display: grid; flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; line-height: 1.25; }
.persona-textos > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-textos small { color: var(--barra-texto-3); font-size: .78rem; font-weight: 400; }
.persona-salir { flex: none; }
html .carril .cerrar-sesion { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--barra-texto-2); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; box-shadow: none; text-decoration: none; }
html .carril .cerrar-sesion:hover { background: var(--barra-hover); color: var(--barra-texto); }
html .carril .cerrar-sesion:active { background: var(--barra-boton); }
html .carril .cerrar-sesion:focus-visible { outline: 2px solid var(--barra-texto); outline-offset: 1px; }

/* ==================================================================== 2 · INICIO: la conversación en una columna */
html .charla { border-right: 0; overflow-y: auto; background: var(--fondo); }   /* si lo que va fijo no cabe, se desplaza la columna: la caja de preguntar nunca queda fuera */
html .charla > * { width: 100%; max-width: 784px; margin-left: auto; margin-right: auto; }
html .charla > .hilo { max-width: none; padding-left: max(28px, calc((100% - 728px) / 2)); padding-right: max(28px, calc((100% - 728px) / 2)); gap: 26px; }
/* Lo tuyo, en tinta (la burbuja azul noche); lo de Fold, en papel con su cara al lado. */
html .yo p { background: var(--burbuja-yo); color: var(--burbuja-yo-texto); border: 0; border-radius: 18px 18px 6px 18px; padding: 10px 16px; box-shadow: none; }
html .fold-msg { position: relative; padding-left: 54px; }
html .fold-msg::before { content: ''; position: absolute; left: 0; top: 4px; width: 40px; height: 36px; background: url('/marca/fold/claro/fold-normal.svg') center / contain no-repeat; }
html .fold-msg .hoja { filter: none; }
html .fold-msg .folio { background: transparent; color: var(--texto); clip-path: none; padding: 6px 0 2px; border-radius: 0; font-size: 1rem; line-height: 1.6; }
html .fold-msg .folio::after { display: none; }
html .fold-msg.no-esta .hoja, html .fold-msg.ambiguo .hoja, html .fold-msg.novedades .hoja { filter: none; }
html .fold-msg .folio .cifra-grande, html .fold-msg .folio .cifra { color: var(--acento-texto); }
html .fold-msg .origen .ficha { background: var(--hundido); border-color: transparent; border-radius: 6px; color: var(--texto-2); }
/* LA ESQUINA DOBLADA: solo en lo que prepara Fold para ti (una propuesta con su botón). Como en el logo: la punta cortada (el color de la
   mesa) y la solapa en cobalto. */
.doblez, html .fold-msg .propuesta-fold, html .tn-cosa, html .pem-aviso, html .csl-oferta { position: relative; }
.doblez::before, .doblez::after { content: ''; position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; pointer-events: none; }
.doblez::after { background: linear-gradient(225deg, var(--fondo) 50%, transparent 50%); }
.doblez::before { background: linear-gradient(45deg, var(--pliegue) 50%, transparent 50%); border-bottom-left-radius: 5px; }
/* Lo que propone Fold en las pantallas de siempre, sin tocar su HTML: la esquina doblada se pinta con el fondo (dos degradados en la
   esquina de arriba a la derecha: la punta cortada del color de la mesa y la solapa en cobalto), así no choca con los ::before/::after que
   ya usan. «He encontrado N Excel… ¿los leo?» y «¿Lo miro más a fondo?» en papel ámbar; «Para hoy», en papel con su esquina. */
html .csl-oferta:not([hidden]), html .para-hoy, html .a-fondo {
  background-image: linear-gradient(225deg, var(--fondo) 50%, transparent 50%), linear-gradient(45deg, var(--pliegue) 50%, transparent 50%);
  background-size: 22px 22px, 22px 22px; background-position: top right, top right; background-repeat: no-repeat; border-top-right-radius: 4px; }
html .csl-oferta:not([hidden]) { background-color: var(--propuesta); border: 1px solid var(--propuesta-borde); box-shadow: none; }
html .a-fondo { padding: 10px 14px; border: 1px solid var(--propuesta-borde); border-radius: 12px 4px 12px 12px; background-color: var(--propuesta); }
/* La caja de escribir: papel con sombra, redondeada, como en Claude. */
html .escribir { max-width: 760px; margin: 6px auto 18px; padding: 10px 10px 10px 18px; gap: 10px; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: 18px; box-shadow: var(--sombra-componer); width: calc(100% - 56px); }
html .escribir input { height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 1rem; color: var(--texto); }
html .escribir input:focus, html .escribir input:focus-visible, html .escribir input:hover { outline: none; box-shadow: none; border: 0; background: transparent; }
/* El foco se ve en la caja entera (el borde y un halo en cobalto), no en el campo de dentro. */
html .escribir:focus-within { border-color: var(--acento); box-shadow: var(--sombra-componer), var(--foco); }
html .escribir .pulsador { height: 44px; border-radius: 12px; padding: 0 18px; background: var(--acento); color: var(--sobre-acento); box-shadow: none; }
html .escribir .pulsador:hover { background: var(--acento-hover); }
/* La IA avanzada fuera de la vista (decisión (b) del mando, 27/10): nunca se pinta el interruptor. */
html .ia-avanzada, html .ia-avanzada[hidden] { display: none; }
/* «¿Lo miro más a fondo?»: la única acción de la IA avanzada, bajo la respuesta que la necesita (app.js, ofrecerAFondo). */
.a-fondo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; }
.a-fondo-boton { min-height: 40px; padding: 0 14px; border: 1px solid var(--linea-fuerte); border-radius: 10px; background: var(--superficie); color: var(--acento-texto); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; }
.a-fondo-boton:hover { background: var(--acento-tenue); }
.a-fondo-boton:active { background: var(--hundido); }
.a-fondo-boton:disabled { opacity: .55; cursor: default; }
.a-fondo-nota { color: var(--texto-3); font-size: .8125rem; }
/* EL CHAT LIMPIO, primer paso (estructura-sencilla §2.6): bajo la respuesta, la fuente y su acción. «Respuesta directa de tus archivos»
   (lo normal), y «Sin coste de créditos» no se pintan; lo que cuesta, sí. */
.origen .nivel-directa, .origen .cuenta-preguntas.sin-coste { display: none; }
/* «leído ahora» (de cuándo es el dato) se queda: es la mitad de «de dónde sale» y el tutorial lo enseña (capítulo «origen», paso «fecha»). */
/* El botón «Perfil de la empresa» ya no va bajo la conversación: el perfil vive en Tu empresa › Cómo trabajas. */
html .charla #fpie-abrir { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Algo urgente para hoy: una línea arriba que lleva a Trabajo (sin número: el número va en la barra). */
.inicio-hoy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 16px auto 0; padding: 10px 16px; background: var(--propuesta); border: 1px solid var(--propuesta-borde); border-radius: 12px; color: var(--texto); font-size: .9375rem; }
html .charla > .inicio-hoy { width: calc(100% - 56px); max-width: 728px; }
.inicio-hoy[hidden] { display: none; }
.inicio-hoy-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); flex: none; }
html .inicio-hoy .enlace-discreto { min-height: 40px; padding: 0 6px; color: var(--acento-texto); font-weight: 600; }

/* ==================================================================== 3 · PARA HOY (en Trabajo) */
.para-hoy { margin: 0 0 28px; padding: 18px 22px 12px; background-color: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-2); }
.para-hoy[hidden] { display: none; }
.para-hoy-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.para-hoy h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; color: var(--texto); }
.para-hoy-cuenta { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--insignia); color: var(--sobre-insignia); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.para-hoy-cuenta:empty { display: none; }
html .para-hoy .para-hoy-fichar { display: inline-flex; align-items: center; min-height: 40px; height: auto; width: auto; padding: 0 14px; font-size: .875rem; font-weight: 600; color: var(--sobre-acento); background: var(--acento); border-radius: 10px; text-decoration: none; }
html .para-hoy .para-hoy-fichar[hidden] { display: none; }
.para-hoy-filas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.para-hoy-fila { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--hundido); }
.para-hoy-fila.urgente { background: var(--rojo-tenue); }
.para-hoy-fila.pronto { background: var(--ambar-tenue); }
.para-hoy-punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--texto-3); }
.para-hoy-punto.urgente { background: var(--rojo); }
.para-hoy-punto.pronto { background: var(--ambar); }
.para-hoy-que { display: grid; flex: 1; min-width: 0; }
.para-hoy-titulo { line-height: 1.35; overflow-wrap: anywhere; font-weight: 600; color: var(--texto); }
.para-hoy-sub { color: var(--texto-2); font-size: .8125rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .para-hoy .para-hoy-accion { min-height: 40px; padding: 0 12px; color: var(--acento-texto); white-space: nowrap; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: 10px; font-weight: 600; }
html .para-hoy .para-hoy-accion:hover { background: var(--acento-tenue); text-decoration: none; }
.para-hoy-nada { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; color: var(--texto-2); font-size: .9375rem; }
.para-hoy-nada::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; }
.para-hoy-nada[hidden], html .para-hoy .para-hoy-mas[hidden] { display: none; }
html .para-hoy .para-hoy-mas { border: 0; background: transparent; box-shadow: none; display: inline-flex; align-items: center; min-height: 40px; margin: 4px 0 2px -10px; padding: 0 10px; color: var(--acento-texto); font-weight: 600; font-size: .9rem; }
html .para-hoy .para-hoy-plegar, html .para-hoy .para-hoy-plegar[hidden] { display: none; }
.para-hoy-cab > h3 { flex: 1; }
/* Tu día, dentro de Para hoy: una línea más de la caja, sin su propio marco. */
html .para-hoy .tu-dia { margin: 10px -22px 0; border-top: 1px solid var(--linea); background: transparent; }
html .para-hoy .tu-dia[hidden] { display: none; }

/* ==================================================================== 4 · LA PÁGINA DE CADA APARTADO: hojas de papel sobre la mesa */
.sitio-pantalla:not(.charla) { overflow-y: auto; padding: 32px max(40px, calc((100% - 860px) / 2)) 56px; }
.sp-cabecera { margin-bottom: 26px; }
.sp-cabecera h2 { margin: 0; font-size: 2rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; font-variation-settings: 'wdth' 118; color: var(--texto); }
.sp-cabecera h2:focus { outline: none; }
.sp-cabecera h2:focus-visible { box-shadow: var(--foco); border-radius: 6px; }
/* La frase de qué es y para qué (regla 5 de la interfaz sencilla, 28/10/2026): una línea, debajo del título. */
/* La de cada hoja que se abre encima (Funciones y cada pestaña de Cuenta), debajo de su cabecera. */
.hoja-frase { margin: 12px 20px 4px; max-width: 62ch; color: var(--texto-2); font-size: 0.92rem; line-height: 1.45; }
.hoja-frase[hidden] { display: none; }
.sp-frase { margin: 6px 0 0; max-width: 62ch; color: var(--texto-2); font-size: .9688rem; line-height: 1.5; }
.sp-apartado { margin: 0 0 28px; }
.sp-apartado[hidden] { display: none; }
.sp-ap-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 0 0 10px; position: relative; }
.sp-ap-cab h3 { margin: 0; font-size: 1rem; font-weight: 650; letter-spacing: 0; color: var(--texto); }
.sp-filas { display: grid; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-2); overflow: hidden; }
.sp-filas:empty { display: none; }
.sp-fila { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 13px 20px; border: 0; border-top: 1px solid var(--linea); background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s; }
.sp-fila:first-child { border-top: 0; }
.sp-fila:hover { background: var(--superficie-hover); }
.sp-fila:active { background: var(--hundido); }
.sp-fila:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--acento-tenue), inset 0 0 0 1px var(--acento-texto); }
.sp-fila-textos { display: grid; flex: 1; min-width: 0; gap: 2px; }
.sp-fila-nombre { font-weight: 600; font-size: .9688rem; }
.sp-fila-desc { color: var(--texto-2); font-size: .8438rem; line-height: 1.4; }
.sp-fila-ir { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--texto-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Lo que vivía en el panel lateral (Lo que leo, el mensajero): tarjetas de la página, no columnas sueltas. */
html .sp-lateral > .bloque { margin: 14px 0 0; padding: 18px 20px; border: 0; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-2); }
html .sp-lateral > .bloque:has(> #fuentes:empty) { display: none; }
.sp-bloque { margin-top: 14px; padding: 18px 20px; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-2); }
.sp-bloque[hidden] { display: none; }
.sp-bloque h4 { margin: 0 0 10px; font-size: .9063rem; font-weight: 650; color: var(--texto); }
.sp-nota { margin: 10px 0 0; color: var(--texto-2); font-size: .875rem; line-height: 1.5; max-width: 62ch; }
.sp-nota[hidden] { display: none; }
/* El mensajero de la oficina solo hace falta en la nube (en un Fold instalado, Fold ya está en la oficina). */
html.tf-local .sp-mensajero { display: none; }
/* El estado de la lectura («Al día» y su detalle), en la cabecera de Tus archivos. */
.sp-ap-cab .calma-estado-fila { display: flex; align-items: center; gap: 4px; }
.sp-ap-cab .estado { margin: 0; }
.sp-ap-cab .calma-estado-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; }

/* Las pestañas de una página (Tu empresa): subrayado ámbar en la elegida. */
.sp-pestanas { position: sticky; top: -32px; z-index: 5; display: flex; gap: 4px; margin: -8px 0 24px; padding-top: 6px; background: var(--fondo); border-bottom: 1px solid var(--linea-fuerte); overflow-x: auto; scrollbar-width: none; }
.sp-panel { scroll-margin-top: 70px; }
.sp-pestana { position: relative; min-height: 44px; padding: 10px 12px 12px; border: 0; background: transparent; color: var(--texto-2); font: inherit; font-size: .9375rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.sp-pestana:hover { color: var(--texto); }
.sp-pestana[aria-current="true"] { color: var(--texto); font-weight: 650; }
.sp-pestana[aria-current="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--insignia); }
.sp-pestana:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 8px; }
.sp-panel { margin-bottom: 32px; }

/* Cuenta y ajustes: cuatro tarjetas, cada una con sus ajustes a la vista. */
.sp-secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sp-seccion { margin: 0; padding: 20px 22px; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-2); display: grid; align-content: start; gap: 8px; }
.sp-seccion h3 { margin: 0; font-size: 1.0625rem; font-weight: 650; color: var(--texto); }
.sp-seccion-desc { margin: 0; color: var(--texto-2); font-size: .875rem; line-height: 1.45; }
.sp-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sp-enlaces:empty { display: none; }
.sp-enlace { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; }
.sp-enlace:hover { background: var(--hundido); }
.sp-enlace:active { background: var(--fondo); }
.sp-enlace:focus-visible { outline: none; box-shadow: var(--foco); }
.sp-uso { margin-top: 4px; }
.sp-uso[hidden] { display: none; }
.sp-uso .barra { height: 6px; border-radius: 3px; background: var(--hundido); overflow: hidden; }
.sp-uso .barra span { display: block; height: 100%; background: var(--acento); border-radius: 3px; }
.sp-uso .letra-pequena { margin: 8px 0 0; color: var(--texto-2); font-size: .8438rem; }
.sp-apariencia { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; color: var(--texto-2); font-size: .9063rem; }
html .sp-apariencia .tema { width: auto; height: auto; }

/* ==================================================================== 5 · TU EMPRESA › CÓMO TRABAJAS: el perfil a página completa */
html #empresa-perfil .fpie-raiz { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; max-width: none; width: auto; }
/* El botón de siempre, solo para el teclado y los lectores (como en la conversación): una caja de 1 px. */
html #empresa-perfil #fpie-abrir { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html #empresa-perfil .fpie-panel.fpie-en-pagina { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 36px; align-items: start; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; max-width: none; }
html #empresa-perfil .fpie-panel[hidden] { display: none; }
.fpie-pasos-col { position: sticky; top: 0; display: grid; gap: 14px; }
.fpie-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fpie-paso { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--texto-2); font: inherit; font-size: .9063rem; font-weight: 500; text-align: left; cursor: pointer; }
.fpie-paso:hover { background: var(--hundido); }
.fpie-paso b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: var(--hundido); color: var(--texto-2); }
.fpie-paso.hecho b { background: var(--verde-tenue); color: var(--verde); }
.fpie-paso[aria-current="step"] { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-2); }
.fpie-paso[aria-current="step"] b { background: var(--acento); color: var(--sobre-acento); }
.fpie-paso-nombre { display: grid; min-width: 0; line-height: 1.3; }
.fpie-paso small { display: block; font-size: .78rem; font-weight: 400; color: var(--texto-3); }
.fpie-paso:focus-visible { outline: none; box-shadow: var(--foco); }
.fpie-pasos-nota { margin: 0; padding: 12px; font-size: .8125rem; line-height: 1.45; color: var(--texto-2); border-radius: 10px; background: var(--hundido); }
/* La hoja: papel liso (lo escribes tú), con el paso de ahora. «Paso N de M» encima del título; los botones, abajo y a la vista. */
html #empresa-perfil .fpie-hoja { display: flex; flex-direction: column; gap: 14px; padding: 30px 34px 0; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-2); min-width: 0; }
html #empresa-perfil .fpie-hoja > #fpie-progreso { order: -1; margin: 0 0 -8px; color: var(--texto-3); font-size: .8125rem; font-weight: 500; }
html #empresa-perfil .fpie-hoja > #fpie-progreso .fpie-barras { display: none; }
html #empresa-perfil .fpie-paso-titulo { margin: 0 0 4px; font-size: 1.625rem; font-weight: 750; letter-spacing: -0.01em; line-height: 1.2; font-variation-settings: 'wdth' 118; color: var(--texto); }
html #empresa-perfil .fpie-hoja > #fpie-titulo { font-size: .875rem !important; font-weight: 600 !important; color: var(--texto-3) !important; font-variation-settings: 'wdth' 100 !important; letter-spacing: 0 !important; order: -2; }
html #empresa-perfil .fpie-hoja > #fpie-titulo.x { margin: 0; padding-right: 96px; font-size: 1.625rem; font-weight: 750; letter-spacing: -0.01em; line-height: 1.2; font-variation-settings: 'wdth' 118; color: var(--texto); }
html #empresa-perfil .fpie-hoja > p { margin: 0; color: var(--texto-2); max-width: 60ch; }
html #empresa-perfil .fpie-hoja > .fpie-aviso { font-size: .8438rem; color: var(--texto-3); }
html #empresa-perfil #fpie-form { display: grid; gap: 20px; margin: 4px 0 0; }
html #empresa-perfil .fpie-acciones { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 -34px; padding: 14px 34px 18px; border-top: 1px solid var(--linea); background: var(--superficie); border-radius: 0 0 14px 14px; }
html #empresa-perfil #fpie-estado { margin: 0; color: var(--texto-3); font-size: .8125rem; }
html #empresa-perfil #fpie-error:empty, html #empresa-perfil #fpie-estado:empty { display: none; }
html #empresa-perfil .fpie-hoja { position: relative; }
html #empresa-perfil #fpie-raiz #fpie-cerrar { position: absolute; top: 22px; right: 24px; min-height: 40px; padding: 0 14px; border-color: transparent; background: transparent; color: var(--texto-2); font-weight: 500; }
html #empresa-perfil #fpie-raiz #fpie-guardar-cerrar { border-color: transparent; background: transparent; color: var(--acento-texto); }
html #empresa-perfil #fpie-titulo:focus { outline: none; }
html #empresa-perfil #fpie-titulo:focus-visible { outline: none; box-shadow: none; }   /* un título que recibe el foco al llegar: no es un control */
/* El subrayado que viaja de movimiento.js es una píldora pensada para las pestañas de las hojas: aquí tapaba el nombre. Va el subrayado ámbar. */
html .sp-pestanas > .mv-indicador { display: none; }
/* Los botones del perfil (perfil-inicial-empresa.css les pone un borde de su color): papel, y la acción que lleva adelante en cobalto. */
html #empresa-perfil #fpie-raiz button { width: auto; min-height: 44px; padding: 0 18px; border: 1px solid var(--linea-fuerte); border-radius: 10px; background: var(--superficie); color: var(--texto); font-weight: 600; }
html #empresa-perfil #fpie-raiz button:hover:not(:disabled) { background: var(--hundido); }
html #empresa-perfil #fpie-raiz #fpie-siguiente, html #empresa-perfil #fpie-raiz #fpie-finalizar { border-color: var(--acento); background: var(--acento); color: var(--sobre-acento); }
html #empresa-perfil #fpie-raiz #fpie-siguiente:hover:not(:disabled), html #empresa-perfil #fpie-raiz #fpie-finalizar:hover:not(:disabled) { background: var(--acento-hover); border-color: var(--acento-hover); }
html #empresa-perfil #fpie-raiz #fpie-anterior { border-color: transparent; background: transparent; color: var(--texto-2); }
html #empresa-perfil #fpie-raiz .fpie-paso { display: grid; width: 100%; min-height: 52px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--texto-2); font-weight: 500; }
html #empresa-perfil #fpie-raiz .fpie-paso:hover:not(:disabled) { background: var(--hundido); }
html #empresa-perfil #fpie-raiz .fpie-paso[aria-current="step"] { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-2); }
html #empresa-perfil .fpie-campo textarea, html #empresa-perfil .fpie-campo select, html #empresa-perfil .fpie-campo input[type="text"] { width: 100%; padding: 12px 14px; border: 1px solid var(--linea-fuerte); border-radius: 10px; background: var(--superficie); color: var(--texto); font: inherit; font-size: .9688rem; }
html #empresa-perfil .fpie-campo textarea:focus, html #empresa-perfil .fpie-campo select:focus { outline: none; border-color: var(--acento); box-shadow: var(--foco); }
html #empresa-perfil .fpie-campo label, html #empresa-perfil .fpie-campo legend { font-weight: 600; color: var(--texto); }
html #empresa-perfil .fpie-aviso { border-left: 3px solid var(--propuesta-borde); padding: 8px 12px; background: var(--propuesta); border-radius: 0 8px 8px 0; }
#sitio-empresa { padding-bottom: 0; }
#sitio-empresa .sp-panel:not([data-apartado="perfil"]) { padding-bottom: 48px; }
/* Las pestañas de la página no son las de la hoja de Cuenta: sin su fondo ni su color de elegida. */
html #sitio-empresa .sp-pestanas .sp-pestana { background: transparent; color: var(--texto-2); box-shadow: none; border: 0; border-radius: 0; }
html #sitio-empresa .sp-pestanas .sp-pestana[aria-current="true"] { background: transparent; color: var(--texto); font-weight: 650; }
html #sitio-empresa .sp-pestanas .sp-pestana:focus-visible { box-shadow: var(--foco); border-radius: 8px; }

/* ==================================================================== 6 · LO QUE SE ABRE DESDE UNA PÁGINA, COMO PÁGINA (estructura.js, .como-pagina)
   La hoja de siempre, a la derecha de la barra, a todo lo alto, sin velo y con su contenido en una columna de lectura. El velo sigue ahí,
   transparente: un clic en la barra cae en él, la hoja se cierra y se va adonde se pulsó (estructura.js). */
@media (min-width: 761px) {
  html .overlay.como-pagina > .velo-overlay { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  html .overlay.como-pagina .hoja-overlay { width: calc(100vw - var(--ancho-barra)) !important; max-width: none; height: 100%; border: 0; border-radius: 0; box-shadow: none; background: var(--fondo); animation: none;
    padding-left: max(0px, calc((100vw - var(--ancho-barra) - 900px) / 2)); padding-right: max(0px, calc((100vw - var(--ancho-barra) - 900px) / 2)); }
  html .overlay.como-pagina .cabecera-overlay { padding: 28px 40px 14px; border-bottom: 0; background: transparent; }
  html .overlay.como-pagina .cabecera-overlay h2 { font-size: 1.75rem; font-weight: 750; letter-spacing: -0.02em; font-variation-settings: 'wdth' 118; }
  html .overlay.como-pagina .cuerpo-overlay { padding-left: 40px; padding-right: 40px; }
  html .overlay.como-pagina .hoja-frase { margin-left: 40px; margin-right: 40px; }
}

/* ==================================================================== 7 · LA HOJA DE CUENTA, SOLO CON LO DEL APARTADO (sitios.js, data-grupo) */
#overlay-cuenta[data-grupo] #cuenta-primeros-pasos { display: none; }
#overlay-cuenta[data-grupo="archivos"] .pestana-cuenta:not([data-grupos~="archivos"]),
#overlay-cuenta[data-grupo="plan"] .pestana-cuenta:not([data-grupos~="plan"]),
#overlay-cuenta[data-grupo="equipo"] .pestana-cuenta:not([data-grupos~="equipo"]),
#overlay-cuenta[data-grupo="avisos"] .pestana-cuenta:not([data-grupos~="avisos"]),
#overlay-cuenta[data-grupo="conexiones"] .pestana-cuenta:not([data-grupos~="conexiones"]),
#overlay-cuenta[data-grupo="privacidad"] .pestana-cuenta:not([data-grupos~="privacidad"]),
#overlay-cuenta[data-grupo="cuenta"] .pestana-cuenta:not([data-grupos~="cuenta"]) { display: none; }
/* Las secciones propias de la hoja (hojas-agenda-cuenta.js: Tu plan, Tu acceso, Tu equipo, Tus datos) sobran cuando la hoja ya llega con
   su apartado: se quitan y la hoja vuelve a ser de una columna. Las pestañas del apartado se ven aunque sean de secciones distintas. */
#overlay-cuenta[data-grupo] .hc-secciones { display: none; }
@media (min-width: 900px) {
  #overlay-cuenta[data-grupo] .hoja-overlay.hc-cuenta { width: min(760px, 100vw); grid-template-columns: minmax(0, 1fr); }
  #overlay-cuenta[data-grupo] .hc-cuenta > .pestanas-cuenta, #overlay-cuenta[data-grupo] .hc-cuenta > .cuerpo-overlay { grid-column: 1; }
}
#overlay-cuenta[data-grupo] .pestanas-cuenta.hc-una { display: flex; }
#overlay-cuenta[data-grupo="archivos"] .pestanas-cuenta > .pestana-cuenta[data-grupos~="archivos"]:not([hidden]),
#overlay-cuenta[data-grupo="plan"] .pestanas-cuenta > .pestana-cuenta[data-grupos~="plan"]:not([hidden]),
#overlay-cuenta[data-grupo="equipo"] .pestanas-cuenta > .pestana-cuenta[data-grupos~="equipo"]:not([hidden]),
#overlay-cuenta[data-grupo="avisos"] .pestanas-cuenta > .pestana-cuenta[data-grupos~="avisos"]:not([hidden]),
#overlay-cuenta[data-grupo="conexiones"] .pestanas-cuenta > .pestana-cuenta[data-grupos~="conexiones"]:not([hidden]),
#overlay-cuenta[data-grupo="privacidad"] .pestanas-cuenta > .pestana-cuenta[data-grupos~="privacidad"]:not([hidden]),
#overlay-cuenta[data-grupo="cuenta"] .pestanas-cuenta > .pestana-cuenta[data-grupos~="cuenta"]:not([hidden]) { display: inline-flex; }
/* Un apartado de una sola pestaña no enseña pestañas. */
#overlay-cuenta[data-grupo="equipo"] .pestanas-cuenta.pestanas-cuenta.pestanas-cuenta { display: none; }

/* ==================================================================== 8 · EL MÓVIL (≤ 760 px): arriba la empresa, Ayuda, Cuenta y Salir; abajo los cinco apartados */
@media (max-width: 760px) {
  .marco { display: block; height: auto; min-height: 100vh; min-height: 100dvh; }
  .carril { display: contents; }
  .carril-cabeza { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 6px; height: 56px; padding: 6px 150px 6px max(10px, env(safe-area-inset-left, 0px)); background: var(--barra); border-bottom: 1px solid var(--barra-borde); }
  /* Con el aviso de la licencia arriba (estilos.css lo pone encima de .marco), la barra de arriba va DEBAJO del aviso, no tapada por él (B145). */
  body:has(> #fold-licencia-aviso) > .marco { position: relative; }
  body:has(> #fold-licencia-aviso) .carril-cabeza, body:has(> #fold-licencia-aviso) .carril-pie { position: absolute; }
  body:has(> #fold-licencia-aviso) .principal { height: 100%; min-height: 0; }
  /* Lo mismo con la banda «Empresa de ejemplo» (tu-fold.js, también encima de .marco; estilos.css le da a .marco el alto que
     queda): .principal medía el 100 % de la pantalla MÁS la banda, la caja de preguntar caía bajo la barra de abajo y no se podía
     escribir (captura de Chat a 500 px, 03/11/2026), y la barra de arriba (empresa, Ayuda, Salir) quedaba tapada por la banda. */
  html.tf-local.tf-es-ejemplo body:has(> .tf-banda) > .marco { position: relative; }
  html.tf-local.tf-es-ejemplo body:has(> .tf-banda) .carril-cabeza, html.tf-local.tf-es-ejemplo body:has(> .tf-banda) .carril-pie { position: absolute; }
  html.tf-local.tf-es-ejemplo body:has(> .tf-banda) .principal { height: 100%; min-height: 0; }
  .carril-marca { display: none; }
  .carril-empresa { flex: 1; min-width: 0; }
  html .carril .identidad-empresa { padding: 6px; min-height: 44px; }
  html .carril #nombre-empresa { -webkit-line-clamp: 1; }
  .carril-plan { display: none; }
  html .carril .menu-empresas .mas-boton { min-height: 36px; padding: 4px 8px; font-size: .78rem; }
  .carril-pie { position: fixed; top: 6px; right: max(8px, env(safe-area-inset-right, 0px)); z-index: 31; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; border: 0; }
  .sitio-pie { width: 44px; min-height: 44px; padding: 0; justify-content: center; color: var(--barra-texto); }
  .sitio-pie .sitio-nombre, .sitio-pie .sitio-nombre-corto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sitio-pie[aria-current="page"] { background: var(--barra-hover); color: var(--barra-texto); }
  .sitio-pie[aria-current="page"] .ic { color: var(--insignia); }
  .persona { width: auto; min-height: 44px; margin: 0; padding: 0; gap: 2px; }
  .persona .iniciales, .persona-textos { display: none; }
  html .carril .cerrar-sesion { min-height: 44px; padding: 0 8px; font-size: .8125rem; color: var(--barra-texto); }
  .sitios { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; margin: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--barra); border-top: 1px solid var(--barra-borde); }
  .sitios .sitio { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 0; font-size: .6875rem; font-weight: 500; text-align: center; color: var(--barra-texto-2); }
  .sitios .sitio[aria-current="page"] { background: transparent; color: var(--barra-activo-icono); font-weight: 700; }
  .sitios .sitio[aria-current="page"] .ic { color: var(--insignia); }
  :root[data-tema="claro"] .sitios .sitio[aria-current="page"], :root[data-tema="claro"] .sitios .sitio[aria-current="page"] .ic { color: var(--insignia); }
  .sitios .ic { width: 22px; height: 22px; }
  .sitios .sitio-nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sitios .sitio-nombre-corto { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sitios .insignia { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: .625rem; }
  .principal { min-height: 100vh; min-height: 100dvh; height: 100vh; height: 100dvh; padding: 56px 0 calc(66px + env(safe-area-inset-bottom, 0px)); }
  html .charla > .hilo { padding-left: 16px; padding-right: 16px; gap: 22px; }
  html .fold-msg { padding-left: 0; }
  html .fold-msg::before { display: none; }
  html .escribir { width: calc(100% - 24px); margin: 6px auto 10px; padding: 8px 8px 8px 14px; }
  html .charla > .inicio-hoy { width: calc(100% - 32px); }
  .sitio-pantalla:not(.charla) { padding: 20px 16px 40px; }
  .sp-cabecera { margin-bottom: 18px; }
  .sp-cabecera h2 { font-size: 1.625rem; }
  .sp-fila { padding: 12px 16px; }
  .sp-secciones { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sp-pestanas { top: -20px; }
  .sp-seccion { padding: 16px 18px; }
  .para-hoy { padding: 14px 14px 8px; }
  .para-hoy-fila { flex-wrap: wrap; gap: 8px 12px; }
  .para-hoy-que { flex: 1 1 calc(100% - 24px); }
  html .para-hoy .para-hoy-accion { margin-left: 22px; }
  html .para-hoy .tu-dia { margin-left: -14px; margin-right: -14px; }
  html #empresa-perfil .fpie-panel.fpie-en-pagina { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fpie-pasos-col { position: static; }
  .fpie-pasos { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .fpie-paso { min-height: 44px; }
  .fpie-paso small, .fpie-pasos-nota { display: none; }
  html #empresa-perfil .fpie-hoja { padding: 20px 18px 0; }
  html #empresa-perfil .fpie-hoja > #fpie-titulo { font-size: 1.375rem; }
  html #empresa-perfil .fpie-acciones { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; margin: 0 -18px; padding: 10px 18px 10px; bottom: 0; }
  html #empresa-perfil #fpie-raiz .fpie-acciones button { height: auto; min-height: 44px; max-width: 100%; padding: 8px 12px; white-space: normal; }
  html #empresa-perfil #fpie-raiz .fpie-acciones #fpie-guardar-cerrar, html #empresa-perfil #fpie-raiz .fpie-acciones #fpie-anterior { flex: 1 1 auto; min-height: 40px; }
  /* En el móvil la primera pregunta tiene que quedar por encima de los botones pegados abajo (perfil-empresa-apilado, 390 px):
     fuera la frase de la página y la entradilla del perfil (se ven en el ordenador). */
  #sitio-empresa .sp-frase, html #empresa-perfil .fpie-entradilla { display: none; }
  html #empresa-perfil .fpie-hoja { gap: 8px; }
  html #empresa-perfil .fpie-paso-titulo { font-size: 1.25rem; margin: 0; }
  html #empresa-perfil .fpie-aviso { padding: 6px 10px; font-size: .8125rem; line-height: 1.4; }
  html #empresa-perfil #fpie-form { gap: 14px; margin: 0; }
  html #empresa-perfil .fpie-acciones button:last-child { flex: 1 1 100%; order: -1; }
}

/* NADA QUE NO FUNCIONE A LA VISTA (interfaz sencilla, regla 3; 28/10/2026). Lo que aún no se puede usar («Muy pronto») no se pinta en
   Funciones (lo que llega se cuenta en Ayuda › Novedades, «Lo que viene»); en «Elegir automatizaciones» va plegado en «Más adelante»
   (automatizaciones-tamano.js, de la 1.0.4). */
html .ficha-catalogo.muy-pronto { display: none; }

/* «Te necesitan» va dentro de Para hoy (estructura.js): su mensaje no se repite en la conversación. */
html.con-para-hoy #tn-inicio { display: none; }

/* La frase de la pestaña de Cuenta (#cuenta-frase, regla 5): en ancho la hoja es una rejilla (hojas-agenda-cuenta.css, avisos-centro.css)
   y una pieza sin sitio caía al final. Se le da su fila, justo debajo del título y encima de las pestañas. */
@media (min-width: 900px) {
  #overlay-cuenta .hoja-overlay.hc-cuenta { grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  #overlay-cuenta .hc-cuenta > .hc-secciones { grid-row: 2 / 6; }
  #overlay-cuenta .hc-cuenta > #cuenta-frase { grid-column: 2; grid-row: 2; margin: 14px 24px 0; }
  #overlay-cuenta .hc-cuenta > .pestanas-cuenta { grid-row: 3; }
  #overlay-cuenta .hc-cuenta > #cuenta-primeros-pasos { grid-row: 4; }
  #overlay-cuenta .hc-cuenta > .cuerpo-overlay { grid-row: 5; }
  #overlay-cuenta[data-grupo] .hc-cuenta > #cuenta-frase, #overlay-cuenta[data-grupo] .hc-cuenta > #cuenta-primeros-pasos { grid-column: 1; }
}

/* EL PRIMER DÍA (interfaz sencilla, regla 2): mientras Fold ofrece leer los Excel de la carpeta, esa es la acción principal de Inicio;
   «Preguntar» sigue ahí, en segundo plano, hasta que haya algo leído (sin datos, Fold no tiene con qué contestar). */
.charla:has(> .csl-oferta:not([hidden]) [data-csl="si"]) .escribir .pulsador { background: transparent; color: var(--acento-texto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }

/* Quien no puede editar el perfil de la empresa (un miembro) veía, debajo de la caja de preguntar, «El propietario debe completar el perfil
   antes de la puesta en marcha…» (perfil-inicial-empresa.js): nada que pueda hacer él, y suelto bajo la caja (reglas 2 y 3). Fuera de la vista. */
html .charla > .fpie-raiz > p { display: none; }