/* La paleta va primero y en su propio archivo (pc-b/estructura, 27/10/2026): así la reciben también las páginas que solo cargan este. */
@import url('/paleta.css');
/* Fold · la ventana. Marca de Fold Burnao (antes Automatizaciones Burnao; Web_AutomatizacionesBurnao/DESIGN.md):
   grafito de noche, papel cálido y UN cobalto para lo procesado. Fuente Archivo (OFL), local.
   Ahora es una web central (usuario y contraseña) que la oficina abre desde ordenador, móvil y
   tablet: hay tema claro y oscuro, la barra lateral se convierte en cajón en móvil y todo
   objetivo táctil mide 44px o más. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('fuentes/archivo-variable-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('fuentes/archivo-variable-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0; }

/* LOS NOMBRES DE SIEMPRE (pc-b/estructura, 27/10/2026). Los COLORES viven en paleta.css, que va antes: aquí solo se dice qué
   papel de la paleta es cada nombre que usan las hojas de estilo de siempre (y las de las ramas). Un solo bloque para los dos temas:
   cada var() se resuelve con el tema que toque, porque la paleta cambia sus valores en :root.
   Lo de antes (grafito casi negro, papel blanco puro #FFFFFF en el claro, cobalto #3358FF) está en el historial de git. */
:root {
  /* el suelo y los paneles */
  --grafito: var(--fondo); --grafito-alto: var(--superficie); --grafito-panel: var(--hundido);
  --costura: var(--linea); --costura-fuerte: var(--linea-fuerte);
  /* el texto */
  --papel: var(--texto); --papel-apagado: var(--texto-2); --papel-tenue: var(--texto-3);
  /* el folio: desde el 27/10 cambia con el tema (claro sobre claro, oscuro sobre oscuro), con su tinta */
  --superficie-papel: var(--folio); --canto: var(--folio-canto); --tinta-apagada: var(--tinta-2);
  /* el cobalto de Fold, menos saturado; --cobalto-claro es el de los enlaces y las cifras */
  --cobalto: var(--acento); --cobalto-hover: var(--acento-hover); --cobalto-claro: var(--acento-texto); --cobalto-sombra: var(--pliegue-sombra);
  --cobalto-tenue: var(--acento-tenue);
  --r-folio: 4px; --r-control: 8px; --r-panel: 12px; --r-pastilla: 999px;
  /* sistema de diseño (29/09/2026): superficie, hoja, sombras y foco vienen de la paleta; la escala de espacios, de aquí */
  --pastilla: var(--superficie);
  --anillo-foco: var(--foco);
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px;
  /* los nombres de la MARCA (Marca_Burnao), que usa fold-animado.css (Q5-3, PC-C 06/10/2026) */
  --accion: var(--acento); --accion-hover: var(--acento-hover); --accion-etiqueta: var(--sobre-acento); --panel: var(--hundido);
  --fuente: 'Archivo', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--grafito); color: var(--papel); font-family: 'Archivo', system-ui, sans-serif; font-size: 16px; line-height: 1.55; font-variation-settings: 'wdth' 100; transition: background-color .2s, color .2s; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* «Ir a la conversación» (Q5-6): fuera de la vista hasta que el teclado llega a él; entonces, arriba a la izquierda. */
.saltar-contenido { position: fixed; left: var(--e-2); top: var(--e-2); z-index: 1000; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: var(--r-control); background: var(--cobalto); color: #fff; font-weight: 600; text-decoration: none; transform: translateY(calc(-100% - 2 * var(--e-2))); }
/* La sombra, solo al enfocarlo: escondido arriba, su sombra asomaba 2-8 px en todas las pantallas (07/10/2026). */
.saltar-contenido:focus { transform: none; box-shadow: var(--sombra-2); }
:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; }
/* Casillas y opciones: 24 px (WCAG 2.2, 2.5.8 · auditoría de accesibilidad del 29/09/2026: medían 18). */
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--cobalto); cursor: pointer; }
/* Campos: el foco se ve como borde cobalto + halo (y el contorno queda para el modo de alto contraste). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid transparent; outline-offset: 0; border-color: var(--cobalto) !important; box-shadow: var(--anillo-foco); }
.pm-tabla, .tabla-ahorro, .tabla-escalera, .uso-fila-cab .cuenta, .vis-cifra { font-variant-numeric: tabular-nums; }

/* ==================================================================== ENTRADA (login) */
.entrada-pantalla {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px;
  background: radial-gradient(120% 100% at 50% -10%, var(--grafito-alto) 0%, var(--grafito) 62%);
}
.entrada-caja { width: 100%; max-width: 360px; text-align: center; }
.entrada-marca { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 30px; }
.entrada-marca .fold-vector { width: 64px; height: 64px; }
.entrada-marca h1 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; font-variation-settings: 'wdth' 118; }
.entrada-marca p { margin: 0; font-size: .88rem; color: var(--papel-apagado); }
.entrada-form { display: grid; gap: 12px; text-align: left; }
.entrada-form[hidden] { display: none; }
.entrada-campo { display: grid; gap: 6px; }
.entrada-campo label { font-size: .82rem; font-weight: 500; color: var(--papel-apagado); }
.entrada-campo input { font: inherit; font-size: 1rem; color: var(--papel); background: var(--grafito-alto); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); padding: 0 14px; height: 48px; min-height: 44px; }
.entrada-campo input:focus { outline: 2px solid var(--cobalto); outline-offset: 1px; border-color: transparent; }
.entrada-form .pulsador { width: 100%; margin-top: 6px; min-height: 44px; }
.entrada-error { margin: 2px 0 0; font-size: .84rem; color: var(--ambar-texto); text-align: left; }
.entrada-error:empty { display: none; }
.entrada-pie { margin-top: 22px; font-size: .74rem; color: var(--papel-tenue); }
.entrada-enlace { display: block; width: 100%; margin-top: 16px; min-height: 44px; font: inherit; font-size: .84rem; color: var(--cobalto-claro); background: transparent; border: 0; cursor: pointer; }
.entrada-enlace:hover { text-decoration: underline; }
#entrada-fila-2fa[hidden] { display: none; }
.entrada-check { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--papel-apagado); line-height: 1.4; }
.entrada-check input { margin-top: -2px; }
.entrada-check a { color: var(--cobalto-claro); }
.fold-estatico { width: 64px; height: 64px; opacity: .9; }
/* Inicio de sesión (28/09/2026): Google y llave de acceso con su texto, 44 px de alto como mínimo y el foco del cobalto de marca. */
.metodos-entrada { display: grid; gap: 10px; }
.metodo-boton { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; height: 48px; padding: 0 16px; font: inherit; font-weight: 600; font-size: .95rem; color: var(--papel); background: var(--grafito-alto); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; text-decoration: none; }
.metodo-boton:hover { border-color: var(--cobalto-claro); }
.metodo-boton:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; }
/* Todo lo escondido dentro de la entrada se esconde de verdad (display: grid/flex de .entrada-form o .pulsador
   ganaba al atributo hidden: el formulario del SSO y su botón vacío se veían siempre). */
.entrada-caja [hidden] { display: none; }
.entrada-form .metodo-boton { margin-top: 2px; }
.separador-metodos { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font-size: .78rem; color: var(--papel-tenue); }
.separador-metodos::before, .separador-metodos::after { content: ''; flex: 1; height: 1px; background: var(--costura-fuerte); }
.tarjeta-empresa { display: grid; gap: 8px; margin-bottom: 12px; padding: 14px; text-align: left; border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); background: var(--grafito-alto); }
.tarjeta-empresa p { margin: 0; }
.aviso-revisar { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--ambar-texto); border-radius: var(--r-panel); background: var(--ambar-tenue); color: var(--papel); font-size: .86rem; }
span.aviso-revisar { display: inline; margin: 0; padding: 1px 6px; }
.metodo-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--costura); }
#metodos-seguridad .entrada-form, #dominio-equipo .entrada-form { margin: 8px 0 12px; }
/* Fold vectorial estático (rebranding 26/09/2026, paso 10d): solo en las pantallas de entrada
   (login, registro, olvido...); el pixel 16×16 sigue siendo el favicon origen (MANUAL-DE-MARCA.md).
   La cabecera y el resto de la app usan el componente vivo (fold-animado.css), sin estas clases. */
.fold-vector { display: block; object-fit: contain; }
.secreto-totp { font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace; font-size: 1.05rem; letter-spacing: .08em; background: var(--grafito-alto); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); padding: 10px 14px; word-break: break-all; }
.mejora.destacada, li.destacada { outline: 2px solid var(--cobalto-claro); outline-offset: 3px; border-radius: var(--r-panel); }

/* ==================================================================== marco de la app */
/* Una sola columna que NUNCA pasa de la ventana: con la columna implícita (auto) el ancho mínimo del contenido del chat (el aviso del perfil, ~940 px) la ensanchaba a 1.299 px y salía barra horizontal (V2c-1280). */
.marco { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; height: 100vh; height: 100dvh; max-width: 1280px; margin: 0 auto; }
.marco[hidden], .entrada-pantalla[hidden] { display: none; }
/* C2b (08/10/2026): hasta que se sabe cómo se puede entrar (entrada.js, /api/entrar/metodos), solo correo y contraseña.
   Así un Fold en local nunca enseña, ni un instante, lo que en local no funciona (G4). */
.entrada-pantalla.metodos-pendientes :is(#entrar-llave, #ir-a-sso, #form-sso, #entrada-sso-empresa, #ir-a-enlace, #entrada-pista-otros, #entrada-sin-cuenta, #ir-a-registro,
  #entrar-google, #entrar-microsoft, #separador-entrada, #registro-google, #registro-microsoft, #separador-registro, #invitacion-google, #invitacion-microsoft, #invitacion-sep-sin-clave, #invitacion-sin-contrasena) { display: none !important; }
.banner-cuenta { margin: 12px 24px 0; }
.banner-cuenta[hidden] { display: none; }
.banner-cuenta button { font: inherit; font-size: .84rem; min-height: 40px; padding: 0 14px; background: var(--cobalto); color: #fff; border: 0; border-radius: var(--r-control); cursor: pointer; margin-left: auto; white-space: nowrap; }
@media (max-width: 680px) { .banner-cuenta { margin: 10px 14px 0; } }

/* ---------------------------------------------------------------- cabecera */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--costura); }
.quien { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* El Fold de la cabecera es el componente animado (fold-animado.css/js, recurso propio de esta
   app): aquí solo se fija el tamaño para la cabecera; sus estados y reacciones vienen de ahí. */
.fold { width: 48px; height: 48px; flex: none; }
h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; font-variation-settings: 'wdth' 118; line-height: 1; display: flex; align-items: center; gap: 10px; }
.marca-cliente { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--papel-tenue); background: var(--grafito-panel); border: 1px solid var(--costura); border-radius: 999px; padding: 3px 9px 3px 5px; }
.marca-cliente img { border-radius: 2px; display: block; }
/* Logo de CADA empresa (o su inicial si no ha subido ninguno): nunca el de otra, ver rutas-empresa.js */
.logo-empresa { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; overflow: hidden; flex: none; }
.logo-empresa img { width: 16px; height: 16px; display: block; border-radius: 3px; object-fit: cover; }
.logo-empresa.logo-inicial { background: var(--cobalto-claro); color: var(--grafito-alto); font-size: 9px; font-weight: 800; line-height: 1; text-transform: uppercase; }
/* UX-01 (18/10/2026): la empresa es un <button> (abre su perfil). Se viste como el texto que era: sin el aspecto del navegador,
   y deshabilitado (sin permiso, cargando) se ve IGUAL, solo sin cursor de control; nunca «gris roto». Las medidas y el color
   de la cabecera los sigue poniendo calma.css (.cabecera .marca-cliente), que va después y manda. */
/* min-height 24px: área mínima de pulsación (WCAG 2.5.8); el margen negativo simétrico la compensa para que la cabecera no
   crezca ni se descentre (el h1 alinea al centro). */
.identidad-empresa { font-family: inherit; line-height: inherit; text-align: start; margin: -2px 0; min-height: 24px; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; cursor: pointer; }
.identidad-empresa:disabled { cursor: default; opacity: 1; }
.identidad-empresa:not(:disabled):hover > #nombre-empresa { text-decoration: underline; text-underline-offset: 3px; }
#identidad-empresa:focus-visible { outline: 2px solid transparent; outline-offset: 0; box-shadow: var(--anillo-foco); border-radius: 4px; }
.marca-fold { flex: none; }
/* UX-01 (20/10/2026): en escritorio el nombre también tiene tope. Sin él, un nombre de 200 caracteres medía 1.455 px y
   empujaba «Fold» y el menú fuera de la ventana. Se corta con «…» (el recorte lo pone calma.css) y el completo va en su title.
   En móvil manda la regla de 640 px, que va después. */
.marca-cliente > span#nombre-empresa { max-width: min(34ch, 30vw); }
.estado { margin: 4px 0 0; font-size: .86rem; color: var(--papel-apagado); }
.estado .punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cobalto-claro); margin-right: 7px; vertical-align: 1px; }
.estado.alerta .punto { background: var(--ambar); }
.estado.sin-conexion .punto { background: transparent; border: 1.5px solid var(--papel-tenue); }
.cabecera-derecha { display: flex; align-items: center; gap: 2px; flex: none; }
.version { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--papel-tenue); font-variation-settings: 'wdth' 75; white-space: nowrap; }
/* Navegación de la cabecera: botones «fantasma» (sin marco hasta que los tocas), como una barra de
   producto; ocho botones con borde cada uno hacían de la cabecera un formulario. */
.tema, .panel-boton, .nav-boton { font: inherit; font-size: .84rem; font-weight: 550; color: var(--papel-apagado); background: transparent; border: 1px solid transparent; border-radius: var(--r-control); padding: 0 11px; height: 36px; min-height: 36px; cursor: pointer; white-space: nowrap; }
.tema:hover, .panel-boton:hover, .nav-boton:hover { color: var(--papel); background: var(--grafito-panel); }
/* «Fichar» (control horario, 30/09/2026) es un enlace a /fichar con aspecto de botón de la cabecera. */
a.nav-boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.nav-boton[hidden] { display: none; }
.tema { border-color: var(--costura-fuerte); margin-right: 6px; }
.panel-boton { display: none; }
/* Cabecera con «Más» (29/09/2026): el modo oscuro es un icono (su nombre accesible es el texto del botón,
   que se oculta a la vista con font-size 0, como en el móvil) y lo menos frecuente va en el menú «Más». */
.tema { font-size: 0; width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin: 0 0 0 4px; }
.tema::before, .mas-boton::after, .menu-mas-lista .nav-boton::before {
  content: ''; display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--mv-ico, none) center / contain no-repeat; mask: var(--mv-ico, none) center / contain no-repeat;
}
.tema { --mv-ico: var(--mv-ico-tema); }
.menu-mas { position: relative; display: inline-flex; }
/* M14 (05/10/2026): el «display» de arriba gana al atributo hidden, así que el selector de empresa (que app.js oculta
   con hidden si la persona está en una sola) salía igual: a 1280 un «Empresa ⌄» con el menú vacío y, a 500, un
   cuadrado negro (ese botón no tiene icono). En un Fold en local (html.tf-local, lo pone tu-fold.js) siempre hay una
   sola empresa. Solo en local para no cambiar la nube en este arreglo; en la nube pasa lo mismo (ver el informe M14). */
html.tf-local .menu-mas[hidden] { display: none; }
/* 17/10/2026 (ensayo de la demo): en la nube pasaba lo mismo tras crear la cuenta (una sola empresa): «Empresa ⌄» abría
   un menú vacío. El atributo hidden manda también fuera de local. */
.menu-mas[hidden] { display: none; }
.mas-boton { display: inline-flex; align-items: center; gap: 4px; }
.mas-boton::after { width: 14px; height: 14px; --mv-ico: var(--mv-ico-flecha); transition: transform .16s ease; }
.mas-boton[aria-expanded="true"] { color: var(--papel); background: var(--grafito-panel); }
.mas-boton[aria-expanded="true"]::after { transform: rotate(180deg); }
.menu-mas-lista { position: absolute; top: calc(100% + 6px); right: 0; z-index: 35; min-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); box-shadow: var(--sombra-3); }
.menu-mas-lista[hidden] { display: none; }
.menu-mas-lista .nav-boton { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; min-height: 40px; padding: 0 12px; font-size: .9rem; text-align: left; color: var(--papel); }
.menu-mas-lista .nav-boton[hidden] { display: none; }
.menu-mas-lista .nav-boton:hover, .menu-mas-lista .nav-boton:focus-visible { background: var(--grafito-panel); }
.menu-mas-lista #abrir-mejoras { --mv-ico: var(--mv-ico-funciones); }
.menu-mas-lista #abrir-redes { --mv-ico: var(--mv-ico-redes); }
.menu-mas-lista #abrir-web { --mv-ico: var(--mv-ico-web); }
.menu-mas-lista #abrir-organizar { --mv-ico: var(--mv-ico-organizar); }
.menu-mas-lista #abrir-soporte { --mv-ico: var(--mv-ico-soporte); }
/* Unión de v1 (06/10/2026): las entradas que añaden tu-fold.js y automatizaciones-basicas.js no traían icono, y una entrada
   sin --mv-ico pinta un cuadrado macizo (la máscara es «none»). Toda entrada nueva de «Más» necesita la suya (lo vigila elian-demo). */
.menu-mas-lista #abrir-tu-fold { --mv-ico: 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 3.5h7.5l4 4v12a1 1 0 0 1-1 1h-10.5a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3.5v4h4'/%3E%3Cpath d='M9 13l2 2 4-4'/%3E%3C/svg%3E"); }
/* Bandeja («Lo que necesita tu atención») y «Valor del mes»: sin su icono salían como cuadrado macizo (19/10/2026). Sus hojas propias solo tocan bj-/imv-. */
.menu-mas-lista #abrir-bj { --mv-ico: 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='M3.5 13.5l2.6-7.2a1.5 1.5 0 0 1 1.4-1h9a1.5 1.5 0 0 1 1.4 1l2.6 7.2'/%3E%3Cpath d='M3.5 13.5V18a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5v-4.5h-5a3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E"); }
.menu-mas-lista #abrir-informe-mensual { --mv-ico: 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='M4 20h16'/%3E%3Cpath d='M7 20v-7M12 20V6M17 20v-10'/%3E%3C/svg%3E"); }
.menu-mas-lista #abrir-lo-que-viene { --mv-ico: 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%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8 12h8M12.5 8.5L16 12l-3.5 3.5'/%3E%3C/svg%3E"); }
.menu-mas-lista #abrir-automatizaciones-tamano { --mv-ico: 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%3Crect x='3' y='13' width='5' height='8' rx='1'/%3E%3Crect x='10' y='8' width='5' height='13' rx='1'/%3E%3Crect x='17' y='3' width='4' height='18' rx='1'/%3E%3C/svg%3E"); }
.menu-mas-lista #abrir-motor-local { --mv-ico: 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%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.menu-mas-lista #abrir-automatizaciones-basicas { --mv-ico: 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='M13 3L5 13.5h6L10 21l9-10.5h-6z'/%3E%3C/svg%3E"); }
.menu-mas-lista a.nav-boton { justify-content: flex-start; }
/* CUATRO SECCIONES (19/10/2026, docs/roadmap/menu-cuatro-secciones.md): abren la lista de «Más» con solo lo suyo. */
.secciones { display: flex; align-items: center; gap: 2px; margin-left: auto; padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--costura); }
.secciones .seccion-boton { color: var(--papel); font-size: .88rem; }
.menu-seccion .menu-mas-lista { right: auto; left: 0; }
.menu-mas-lista > [data-fuera] { display: none; }
#abrir-seccion-inicio { --mv-ico: 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='M4 11l8-6.5 8 6.5'/%3E%3Cpath d='M6 9.5v10h12v-10'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E"); }
#abrir-seccion-asistente, .menu-mas-lista #ir-preguntar { --mv-ico: 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='M5 5.5h14a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1-1.5 1.5h-7l-4.5 3.5v-3.5h-2.5a1.5 1.5 0 0 1-1.5-1.5v-8a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M8.5 10.5h7M8.5 13h4'/%3E%3C/svg%3E"); }
#abrir-seccion-trabajo { --mv-ico: 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%3Crect x='3.5' y='7.5' width='17' height='12' rx='2'/%3E%3Cpath d='M9 7.5v-2a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 1.5 1.5v2M3.5 12.5h17'/%3E%3C/svg%3E"); }
#abrir-seccion-finanzas { --mv-ico: 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%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15.5 8.6a4 4 0 1 0 0 6.8M7.5 10.8h6M7.5 13.2h6'/%3E%3C/svg%3E"); }
.menu-mas-lista #ir-tu-dia { --mv-ico: 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%3Ccircle cx='12' cy='12' r='3.8'/%3E%3Cpath d='M12 3v2.2M12 18.8V21M3 12h2.2M18.8 12H21M5.6 5.6l1.6 1.6M16.8 16.8l1.6 1.6M5.6 18.4l1.6-1.6M16.8 7.2l1.6-1.6'/%3E%3C/svg%3E"); }
/* Flujos por pasos no traía icono (cuadrado macizo, 19/10/2026). */
.menu-mas-lista #abrir-flujos { --mv-ico: 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%3Crect x='3.5' y='4' width='6' height='5' rx='1'/%3E%3Crect x='14.5' y='10' width='6' height='5' rx='1'/%3E%3Crect x='3.5' y='16' width='6' height='5' rx='1'/%3E%3Cpath d='M9.5 6.5h2.5a1.5 1.5 0 0 1 1.5 1.5v3h1M9.5 18.5h2.5a1.5 1.5 0 0 0 1.5-1.5v-3'/%3E%3C/svg%3E"); }
.menu-mas-lista #abrir-agenda { --mv-ico: var(--mv-ico-agenda); }
.menu-mas-lista #abrir-panel-mensual { --mv-ico: var(--mv-ico-dashboard); }
@media (max-width: 640px) {
  /* Móvil: fila propia con dibujo y nombre (un icono suelto no dice «Trabajo»); la lista, a todo el ancho. */
  .cabecera { flex-wrap: wrap; }
  .secciones { order: 3; flex: 1 0 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    margin: 0; padding: 6px 0 0; border-right: 0; border-top: 1px solid var(--costura); position: relative; }
  .secciones .menu-seccion { position: static; display: flex; }
  .secciones .menu-seccion[hidden] { display: none; }
  html .secciones .seccion-boton { width: 100%; height: 52px; min-height: 52px; padding: 0 2px; font-size: .72rem; font-weight: 600;
    flex-direction: column; justify-content: center; gap: 3px; color: var(--papel-apagado); }
  html .secciones .seccion-boton::before { width: 20px; height: 20px; margin: 0; }
  html .secciones .seccion-boton[aria-expanded="true"] { color: var(--papel); background: var(--grafito-panel); }
  .secciones .menu-mas-lista { left: 0; right: 0; min-width: 0; }
}
#fichar-arriba, #fichar-mas { --mv-ico: 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%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2'/%3E%3Cpath d='M10 2.5h4'/%3E%3C/svg%3E"); }

/* «Cerrar panel» es solo el botón del cajón en móvil: en escritorio el lateral no es un
   cajón, así que se oculta por defecto y solo se estiliza y enseña dentro de esa media query
   de abajo (si no, sale con el estilo por defecto del navegador). */
.lateral-cerrar { display: none; }

/* ==================================================================== MEJORAS Y SOPORTE (overlay) */
.overlay { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; }
.overlay[hidden] { display: none; }
.velo-overlay { position: absolute; inset: 0; background: var(--velo); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.hoja-overlay { position: relative; width: min(480px, 100vw); height: 100%; background: var(--hoja); border-left: 1px solid var(--costura); box-shadow: var(--sombra-3); display: flex; flex-direction: column; animation: hoja-entra .32s cubic-bezier(.16, 1, .3, 1); }
@keyframes hoja-entra { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.cabecera-overlay { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 16px 20px; border-bottom: 1px solid var(--costura); flex: none; }
.cabecera-overlay h2 { margin: 0; font-size: 1.14rem; font-weight: 760; letter-spacing: -0.015em; font-variation-settings: 'wdth' 108; }
.cerrar-overlay { font: inherit; font-size: .84rem; font-weight: 550; min-height: 44px; padding: 0 14px; color: var(--papel-apagado); background: transparent; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; }
.cerrar-overlay:hover { color: var(--papel); background: var(--grafito-panel); }
.cuerpo-overlay { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.cuerpo-overlay[hidden] { display: none; }
.letra-pequena-clara { margin: 0; font-size: .86rem; color: var(--papel-apagado); }
/* Estado vacío de Mis datos y «subiendo tu archivo» (fold-animado.css): dentro del panel lateral
   sobra el relleno pensado para pantalla completa. */
#vista-datos .fold-pantalla { padding: 18px 10px 26px; }
#vista-datos .fold-subida { padding: 10px 0 4px; }

/* --- pedir mejoras --- */
.form-mejora { display: grid; gap: 10px; }
.form-mejora textarea { font: inherit; font-size: .95rem; color: var(--papel); background: var(--grafito); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); padding: 12px 14px; resize: vertical; min-height: 76px; }
.form-mejora textarea:focus { outline: 2px solid var(--cobalto); outline-offset: 1px; border-color: transparent; }
.form-mejora .pulsador { justify-self: start; min-width: 180px; }
.aviso-error { margin: 0; font-size: .84rem; color: var(--ambar-texto); }
.aviso-error:empty { display: none; }
.lista-mejoras { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.mejora { border: 1px solid var(--costura); border-radius: var(--r-panel); padding: 14px 16px; background: var(--superficie); box-shadow: var(--sombra-1); }
.mejora-texto { margin: 0 0 10px; font-size: .95rem; color: var(--papel); }
.mejora-meta { margin: 0 0 10px; font-size: .74rem; color: var(--papel-tenue); }
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.pasos li { display: flex; align-items: center; font-size: .72rem; color: var(--papel-tenue); }
.pasos li::before { content: ''; width: 7px; height: 7px; margin-right: 6px; background: var(--costura-fuerte); flex: none; }
.pasos li:not(:last-child)::after { content: ''; width: 16px; height: 1px; background: var(--costura-fuerte); margin: 0 8px; }
.pasos li.hecho { color: var(--papel-apagado); }
.pasos li.hecho::before { background: var(--cobalto-claro); }
.pasos li.actual { color: var(--papel); font-weight: 650; }
.pasos li.actual::before { background: var(--cobalto); }
.mejora.rechazada .pasos { display: none; }
.mejora.rechazada .mejora-estado-texto { color: var(--papel-tenue); }
.mejora-precio { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--costura); }
.mejora-precio .cifra-precio { font-size: 1.3rem; font-weight: 800; font-variation-settings: 'wdth' 125; color: var(--cobalto-claro); font-feature-settings: 'tnum' 1; }
.mejora-precio .cifra-precio.a-medida { font-size: .92rem; font-weight: 650; font-variation-settings: 'wdth' 100; }
.mejora-precio .acciones { display: flex; gap: 8px; margin-left: auto; }
.mejora-precio button { font: inherit; font-size: .84rem; min-height: 44px; padding: 0 14px; border-radius: var(--r-control); cursor: pointer; }
.mejora-precio .aceptar { background: var(--cobalto); border: 1px solid var(--cobalto); color: #fff; }
.mejora-precio .aceptar:hover { background: var(--cobalto-hover); }
.mejora-precio .rechazar { background: transparent; border: 1px solid var(--costura-fuerte); color: var(--papel-apagado); }
.mejora-precio .rechazar:hover { border-color: var(--ambar); color: var(--ambar-texto); }
.vacio-overlay { margin: 0; font-size: .88rem; color: var(--papel-tenue); padding: 18px 0; }
.titulo-seccion { margin-top: 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--papel-tenue); }
.form-mejora input[type="text"], .form-mejora input[type="email"], .form-mejora input[type="url"], .form-mejora input[type="password"], .form-mejora select { font: inherit; font-size: .95rem; color: var(--papel); background: var(--grafito); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); padding: 0 14px; height: 44px; }
.form-mejora input[type="file"] { font: inherit; font-size: .85rem; color: var(--papel-apagado); }
.form-mejora input:focus, .form-mejora select:focus { outline: 2px solid var(--cobalto); outline-offset: 1px; border-color: transparent; }
/* Programas propios (paso 16): bloques del formulario y el secreto del webhook (largo, se corta). */
.form-conector .cnx-bloque { display: grid; gap: 10px; }
.form-conector .cnx-bloque[hidden] { display: none; }
.secreto { font-family: ui-monospace, Consolas, monospace; word-break: break-all; }

/* --- lista de comprobación de «Funciones» en descubrimiento --- */
.filas-checklist { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.filas-checklist li { position: relative; font-size: .88rem; color: var(--papel-apagado); padding: 2px 0 2px 18px; }
.filas-checklist li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--costura-fuerte); }
.filas-checklist li.hecho { color: var(--papel); }
.filas-checklist li.hecho::before { background: var(--cobalto-claro); }
.filas-checklist li.pendiente::before { background: var(--ambar); }
/* Darse de baja de Fold: lo contratado aparte con su casilla «Cerrarlo también en la misma fecha» (20/10/2026). */
.bs-aparte-lista li { display: grid; color: var(--papel); }
.bs-aparte-casilla { display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-height: 44px; font-size: .84rem; color: var(--papel-apagado); cursor: pointer; }
.bs-aparte-casilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--cobalto-claro); }
.especificacion { white-space: pre-wrap; font-family: inherit; font-size: .85rem; color: var(--papel); background: var(--grafito); border: 1px solid var(--costura); border-radius: var(--r-panel); padding: 12px 14px; margin: 10px 0; max-height: 260px; overflow-y: auto; }
.mensajero-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.mensajero-acciones[hidden] { display: none; }
/* Sin Mensajero publicado: «Descargar Fold para Windows» y qué es (27/10/2026, app.js › pintarDescargas). */
.mensajero-fold { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--costura); }
.mensajero-fold[hidden] { display: none; }
.mensajero-fold .letra-pequena { margin: 4px 0 0; }
.texto-aviso { color: var(--ambar-texto); }
.enlace-largo { word-break: break-all; }

/* --- soporte --- */
.soporte-estado { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px; background: var(--superficie); border: 1px solid var(--costura); border-radius: var(--r-panel); box-shadow: var(--sombra-1); }
.soporte-estado .mensajero-estado { margin: 0; }
/* Botón secundario neutro (antes ámbar: el ámbar es «lo reviso a mano» en el manual de marca, no un color de botón). */
.enlace-discreto { font: inherit; font-size: .8rem; font-weight: 550; min-height: 44px; padding: 0 14px; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); box-shadow: var(--sombra-1); cursor: pointer; }
.enlace-discreto:hover { background: var(--superficie-hover); border-color: var(--papel-tenue); }
.hilo-soporte { display: flex; flex-direction: column; gap: 12px; }
.msg-soporte { max-width: 92%; }
.msg-soporte.central { align-self: flex-start; }
.msg-soporte.central p { margin: 0; background: var(--superficie); border: 1px solid var(--costura); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: .92rem; color: var(--papel); box-shadow: var(--sombra-1); }
.msg-soporte.mio { align-self: flex-end; }
.msg-soporte.mio p { margin: 0; background: var(--cobalto); border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: .92rem; color: #fff; }
.msg-soporte .sello-caso { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: .74rem; color: var(--papel-tenue); }
.msg-soporte .sello-caso.resuelto { color: var(--cobalto-claro); }
.msg-soporte .sello-caso.pasado { color: var(--ambar-texto); }
.msg-soporte .sello-caso .marca-estado { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.msg-soporte.sistema { align-self: center; max-width: 100%; }
.msg-soporte.sistema p { margin: 0; background: transparent; border: 1px dashed var(--costura-fuerte); border-radius: var(--r-control); padding: 6px 12px; font-size: .78rem; color: var(--papel-tenue); text-align: center; }

/* El campo trampa del registro (central/lib/reto-alta.js): fuera de la vista sin display:none (hay robots que
   se saltan lo que no se pinta) y sin ocupar sitio. Y el aviso de «sin JavaScript». */
.canje-codigo { margin: 12px 0; font-size: .86rem; }
.canje-codigo summary { cursor: pointer; color: var(--cobalto-claro); min-height: 32px; }
.canje-codigo .fila-canje { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.canje-codigo input { flex: 1 1 200px; min-height: 40px; padding: 0 10px; font: inherit; border: 1px solid var(--costura-fuerte); border-radius: 10px; background: var(--superficie); color: var(--papel); }
.campo-trampa { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sin-js { max-width: 520px; margin: 18vh auto; padding: 0 20px; font: 1rem/1.5 system-ui, sans-serif; text-align: center; }
/* ==================================================================== CUENTA (uso y plan) */
/* Escalera nueva (05/10/2026): lema del plan, el destacado y lo que incluye, con «muy pronto» en lo que aún no existe. */
.lema-plan { display: block; margin: 2px 0 4px; font-size: .9rem; font-weight: 600; color: var(--papel); }
.etiqueta-destacado { display: inline-block; margin-left: 6px; padding: 1px 8px; font-size: .68rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--cobalto-claro); border: 1px solid var(--cobalto-claro); border-radius: 999px; vertical-align: middle; }
.plan-fila.destacado { border-color: var(--cobalto-claro); }
.plan-incluye { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .82rem; line-height: 1.4; color: var(--papel-apagado); }
.plan-incluye li { position: relative; padding-left: 18px; }
.plan-incluye li::before { content: '✓'; position: absolute; left: 0; color: var(--cobalto-claro); font-weight: 700; }
.plan-incluye li.pronto { color: var(--papel-tenue); }
.plan-incluye li.pronto::before { content: '·'; color: var(--papel-tenue); }
.hoja-overlay.ancha { width: min(560px, 100vw); }
/* Paso 13: con la pestaña Conexiones ya son 8. En una línea y con desplazamiento lateral (antes
   «Plan y pago» se partía en tres líneas y en el móvil «Seguridad» quedaba cortada fuera). */
/* PESTAÑAS COMO SEGMENTO (29/09/2026): Cuenta y Dashboard. Un carril hundido y la pestaña elegida como
   una píldora que se levanta; la píldora que viaja entre pestañas la pone movimiento.js (.mv-indicador).
   Sin JS, la elegida lleva su propio fondo. Con muchas pestañas el carril se desplaza de lado. */
.pestanas-cuenta, .pm-pestanas { position: relative; display: flex; gap: 2px; flex: none; margin: 12px 20px 4px; padding: 3px; background: var(--carril); border: 1px solid var(--costura); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.pestanas-cuenta::-webkit-scrollbar, .pm-pestanas::-webkit-scrollbar { display: none; }
.pestana-cuenta, .pm-pestanas button { position: relative; z-index: 1; flex: none; font: inherit; font-size: .86rem; font-weight: 550; min-height: 36px; padding: 0 12px; white-space: nowrap; color: var(--papel-apagado); background: transparent; border: 0; border-radius: 9px; cursor: pointer; transition: color .18s, background-color .18s; }
.pestana-cuenta:hover, .pm-pestanas button:hover { color: var(--papel); }
.pestana-cuenta.activa, .pestana-cuenta[aria-selected="true"], .pm-pestanas button[aria-selected="true"] { color: var(--papel); font-weight: 650; background: var(--pastilla); box-shadow: var(--sombra-1); }
.mv-con-indicador .pestana-cuenta[aria-selected="true"], .mv-con-indicador .pestana-cuenta.activa, .mv-con-indicador.pm-pestanas button[aria-selected="true"] { background: transparent; box-shadow: none; }
.pestana-cuenta:focus-visible, .pm-pestanas button:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: -2px; }
@media (max-width: 480px) { .pestanas-cuenta, .pm-pestanas { margin: 10px 12px 2px; } }

.uso-bloque { border: 1px solid var(--costura); border-radius: var(--r-panel); padding: 16px 18px; background: var(--superficie); box-shadow: var(--sombra-1); }
.uso-fila + .uso-fila { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--costura); }
.uso-fila-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: .88rem; }
.uso-fila-cab .cuenta { color: var(--papel); font-size: 1.05rem; font-weight: 750; letter-spacing: -0.01em; font-feature-settings: 'tnum' 1; }
.uso-fila-cab .cuenta .de { font-weight: 400; color: var(--papel-tenue); }
.uso-renueva { margin: 6px 0 0; font-size: .74rem; color: var(--papel-tenue); }
.barra.grande { height: 8px; }
.uso-persona { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.uso-persona li { display: flex; justify-content: space-between; font-size: .88rem; color: var(--papel-apagado); }
.uso-persona li span:last-child { color: var(--papel); font-feature-settings: 'tnum' 1; }
.aviso-uso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; background: var(--ambar-tenue); border: 1px solid var(--ambar); border-radius: var(--r-panel); font-size: .88rem; color: var(--papel); }
.aviso-uso button { font: inherit; font-size: .84rem; min-height: 40px; padding: 0 14px; background: var(--cobalto); color: #fff; border: 0; border-radius: var(--r-control); cursor: pointer; margin-left: auto; }
.plan-gratis-explica { margin: 0; font-size: .8rem; color: var(--papel-tenue); }

/* Nivel de uso por automatización (29/09/2026, central/lib/rutas-niveles.js): mismo lenguaje visual
   que el resto de «Cuenta» (.uso-bloque, .barra.grande), nada nuevo que aprender. */
.nivel-bloque { margin-top: 10px; }
.nivel-bloque p { margin: 4px 0; }
.nivel-cambiar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.nivel-select { font: inherit; font-size: .84rem; min-height: 44px; padding: 0 10px; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); background: var(--grafito-panel); color: var(--papel); }
.nivel-preview { flex-basis: 100%; padding: 10px 12px; border: 1px solid var(--costura); border-radius: var(--r-control); background: var(--grafito-alto); }
.nivel-preview .nivel-confirmar { margin-top: 4px; }
/* Tarjeta «Almacenamiento Fold» (29/09/2026, capa dormida): default / solicitada / activa, en Cuenta › Plan. */
.tarjeta-almacen { display: grid; gap: 10px; margin-top: 4px; animation: entra .28s cubic-bezier(.2, .7, .2, 1); }
.tarjeta-almacen:empty { display: none; }

.lista-planes { display: grid; gap: 12px; }
.plan-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--costura); border-radius: var(--r-panel); background: var(--superficie); box-shadow: var(--sombra-1); }
.plan-fila.actual { border-color: var(--cobalto-claro); box-shadow: var(--sombra-1), 0 0 0 1px var(--cobalto-claro); }
.plan-fila .nombre-plan { font-weight: 650; font-size: .96rem; color: var(--papel); }
.plan-fila .precio-plan { display: block; margin-top: 2px; font-size: .8rem; color: var(--papel-tenue); font-feature-settings: 'tnum' 1; }
.desglose-iva { font-size: .92em; color: var(--papel-tenue); }
/* Promoción de entrada en Core (18/10/2026): una línea propia bajo el precio, en el color de acción, y su condición debajo. */
.plan-fila .promo-entrada { display: block; margin-top: 4px; font-size: .84rem; font-weight: 650; color: var(--cobalto-claro); font-feature-settings: 'tnum' 1; }
.plan-fila .promo-condicion { display: block; margin-top: 2px; }
.plan-fundador .precio-plan b { color: var(--cobalto-claro); font-weight: 700; }
.plan-fundador .precio-tachado { opacity: .7; }
.plan-fundador .descuento-fundador { font-weight: 700; }
.plan-fundador .letra-pequena-clara { display: block; margin-top: 6px; }
.etiqueta-actual { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalto-claro); border: 1px solid var(--cobalto-claro); border-radius: 999px; padding: 2px 9px; }
.plan-fila button { font: inherit; font-size: .84rem; min-height: 44px; padding: 0 14px; border-radius: var(--r-control); cursor: pointer; background: transparent; border: 1px solid var(--costura-fuerte); color: var(--papel-apagado); }
.plan-fila button:hover { border-color: var(--cobalto-claro); color: var(--papel); }
.excedente-nota { margin: 0; font-size: .78rem; color: var(--papel-tenue); }

/* ---- PLANES ESCALONADOS (27/09/2026): mensual/anual, prueba de 7 días, tabla con candados, avisos, catálogo, equipo */
.selector-periodo { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--costura); border-radius: 999px; background: var(--grafito-panel); justify-self: start; }
.selector-periodo .periodo { font: inherit; font-size: .84rem; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--papel-apagado); cursor: pointer; }
.selector-periodo .periodo.activo { background: var(--cobalto); color: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .16); }
.selector-periodo .periodo:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; }
.selector-periodo .regalo { font-size: .72rem; font-weight: 700; margin-left: 4px; color: var(--ambar-texto); }
.selector-periodo .periodo.activo .regalo { color: #FFFFFF; }
.plan-fila .ahorro { font-weight: 650; color: var(--ambar-texto); }
.prueba-plan { display: grid; gap: 6px; padding: 14px 16px; border: 1px dashed var(--cobalto-claro); border-radius: var(--r-panel); background: var(--cobalto-tenue); }
.prueba-plan p { margin: 0; font-size: .88rem; color: var(--papel); }
.prueba-plan .pulsador { justify-self: start; }
.escalera { display: grid; gap: 8px; }
.tabla-escalera-caja { overflow-x: auto; border: 1px solid var(--costura); border-radius: var(--r-panel); background: var(--superficie); box-shadow: var(--sombra-1); }
.tabla-escalera-caja:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; }
.tabla-escalera { width: 100%; min-width: 470px; border-collapse: collapse; font-size: .76rem; font-feature-settings: 'tnum' 1; }
.tabla-escalera th, .tabla-escalera td { padding: 7px 6px; border-bottom: 1px solid var(--costura); text-align: center; color: var(--papel-apagado); }
.tabla-escalera td, .tabla-escalera thead th { white-space: nowrap; }
.tabla-escalera tbody th { min-width: 136px; }
.tabla-escalera thead th { font-weight: 650; color: var(--papel); background: var(--grafito-panel); border-bottom-color: var(--costura-fuerte); }
.tabla-escalera tbody th { text-align: left; font-weight: 500; color: var(--papel); }
.tabla-escalera tr:last-child th, .tabla-escalera tr:last-child td { border-bottom: 0; }
.tabla-escalera .col-mia { background: var(--cobalto-tenue); color: var(--papel); }
.tabla-escalera .si { color: var(--cobalto-claro); font-weight: 700; }
.tabla-escalera .si-arriba, .tabla-escalera .si-pronto { color: var(--papel-tenue); }
.tabla-escalera .no { color: var(--papel-tenue); }
.etiqueta-pronto { display: inline-block; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ambar-texto); border: 1px solid var(--ambar-texto); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
.plan-fila > .plan-muy-pronto { flex-shrink: 0; align-self: center; }   /* Scale en Cuenta › Plan: «Muy pronto» donde iría el botón (18/10/2026) */
/* El candado: dibujado con dos cajas (sin imágenes ni estilos en línea, que la CSP no deja). */
.candado { display: inline-block; position: relative; width: 10px; height: 8px; margin: 0 5px 0 3px; border-radius: 2px; background: currentColor; vertical-align: -1px; opacity: .8; }
.candado::before { content: ''; position: absolute; left: 2px; top: -5px; width: 6px; height: 6px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.bloqueo-plan { display: grid; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--ambar-texto); border-radius: var(--r-panel); background: var(--ambar-tenue); }
.bloqueo-plan .bloqueo-texto { margin: 0; font-size: .86rem; color: var(--papel); }
.bloqueo-plan .candado { color: var(--ambar-texto); }
.bloqueo-plan .opciones { margin-top: 0; }
.plan-fila.con-candado .nombre-plan { color: var(--papel-tenue); }
.ficha-catalogo > div { display: grid; gap: 3px; max-width: 520px; }
.ficha-catalogo .precio-tachado { opacity: .7; }
.ficha-catalogo .precio-plan b { color: var(--papel); }
.factura-fila.persona { gap: 10px; flex-wrap: wrap; }
.factura-fila.congelada, .factura-fila.fuera { opacity: .72; }
.acciones-persona { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acciones-persona select { font: inherit; font-size: .8rem; min-height: 36px; padding: 0 8px; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); background: var(--superficie); color: var(--papel); }
.casilla { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: .86rem; color: var(--papel); }
.rol-propietario { color: var(--cobalto-claro); font-weight: 650; }
.metodo-pago, .facturas { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--costura); border-radius: var(--r-panel); font-size: .88rem; background: var(--superficie); box-shadow: var(--sombra-1); }
.factura-fila { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--costura); font-size: .86rem; }
.factura-fila:last-child { border-bottom: 0; }
.factura-fila button { font: inherit; font-size: .8rem; min-height: 36px; padding: 0 10px; background: transparent; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); color: var(--papel-apagado); cursor: pointer; }
.cancelar-caja { border-top: 1px solid var(--costura); padding-top: 16px; }
.cancelar-caja button { font: inherit; font-size: .84rem; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); color: var(--ambar-texto); cursor: pointer; }
.cancelar-caja button:hover { border-color: var(--ambar); }
.cancelar-confirma { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cancelar-confirma[hidden] { display: none; }
.cancelar-confirma button.si { background: var(--ambar); border-color: var(--ambar); color: #16110a; font-weight: 650; }

/* ---------------------------------------------------------------- cuerpo */
.cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.charla { display: grid; grid-template-rows: 1fr auto auto; min-height: 0; border-right: 1px solid var(--costura); }
.hilo { overflow-y: auto; padding: 24px 28px 12px; display: flex; flex-direction: column; gap: 18px; scroll-behavior: smooth; }

.msg { max-width: 760px; animation: entra .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes entra { from { transform: translateY(6px); } to { transform: none; } }

/* Bienvenida: los 3 ejemplos pulsables se resaltan solo la primera vez, sin ocultar nada:
   los botones ya son visibles y usables; esto añade un aviso y un realce que se apaga solos. */
.bienvenida-pista { margin: 0; padding: 0 28px; font-size: .82rem; color: var(--cobalto-claro); animation: pista-entra .3s ease-out; }
.bienvenida-pista[hidden] { display: none; }
@keyframes pista-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sugerencias.primera-vez .sug { border-color: var(--cobalto-claro); animation: pulso-sug 1.6s ease-in-out 2; }
@keyframes pulso-sug { 0%, 100% { box-shadow: 0 0 0 0 var(--cobalto-tenue); } 50% { box-shadow: 0 0 0 5px var(--cobalto-tenue); } }

/* Lo que dice Fold es un FOLIO: papel, tinta y la esquina doblada en cobalto, como su dibujo. */
.fold-msg .folio {
  position: relative; background: var(--superficie-papel); color: var(--tinta); border-radius: var(--r-folio);
  padding: 16px 44px 14px 18px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
/* El canto del folio. Va en un envoltorio (.hoja) y con drop-shadow porque el recorte de la
   esquina se come cualquier box-shadow del propio folio (primera captura: no salía). Y no
   en todo el mensaje: ahí duplicaba también el pie con las fuentes (segunda captura). */
.hoja { filter: drop-shadow(3px 3px 0 var(--canto)) drop-shadow(0 10px 14px rgba(0, 0, 0, .10)); }
.fold-msg.no-esta .hoja, .fold-msg.ambiguo .hoja { filter: drop-shadow(3px 3px 0 var(--ambar)); }
.fold-msg.novedades .hoja { filter: drop-shadow(3px 3px 0 var(--cobalto)); }
.fold-msg .folio::after {
  content: ''; position: absolute; top: 0; right: 0; width: 22px; height: 22px;
  background: linear-gradient(225deg, transparent 50%, var(--cobalto) 50%, var(--cobalto) 78%, var(--cobalto-sombra) 78%);
}
.folio p { margin: 0 0 8px; white-space: pre-line; }
.folio p:last-child { margin-bottom: 0; }
/* Respuestas en frase (29/09/2026): las cifras van con números tabulares pero SIN negrita; en negrita solo
   lo que el servidor marca como clave (**…** -> <strong>), para que se vea de un vistazo qué es lo importante. */
.folio .cifra { font-feature-settings: 'tnum' 1; }
.folio strong { font-weight: 700; }
/* La cifra protagonista: cuando la respuesta es un dato suelto (no una lista), el primer
   número sale grande y en cobalto, como el "readout" de la marca; el resto del texto queda
   de etiqueta discreta alrededor. */
.folio .cifra-grande { display: inline-block; font-size: 1.5em; font-weight: 800; font-variation-settings: 'wdth' 125; color: var(--acento-texto); letter-spacing: -0.01em; }
.letra-pequena { font-size: .8rem; color: var(--tinta-apagada); }
:is(.lateral, .sp-lateral) .letra-pequena { color: var(--papel-tenue); margin: 10px 0 0; }

/* Filas de datos: cuando una respuesta trae varias líneas con "· ", se enseñan como filas
   sobre costuras finas (la tabla de la casa) en vez de un párrafo apelmazado. */
.folio .filas-datos { list-style: none; margin: 4px 0 10px; padding: 0; border-top: 1px solid var(--tinta-linea); }
.folio .filas-datos li { padding: 7px 0; border-bottom: 1px solid var(--tinta-linea); font-size: .95rem; line-height: 1.4; }
.folio .filas-datos li:last-child { margin-bottom: 0; }

.origen { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .74rem; color: var(--papel-tenue); }
.origen .ficha { border: 1px solid var(--costura-fuerte); border-radius: var(--r-pastilla); padding: 1px 9px; color: var(--papel-apagado); background: var(--superficie); }
.origen .nivel { letter-spacing: .08em; text-transform: uppercase; font-variation-settings: 'wdth' 80; }
/* Cuánto ha contado la consulta (29/09/2026): discreto si no cuesta; marcado si ha contado varias. */
.origen .cuenta-preguntas { color: var(--papel-apagado); }
.origen .cuenta-preguntas.varias { border: 1px solid var(--costura-fuerte); border-radius: 3px; padding: 1px 7px; font-weight: 600; }
/* Frescura de la fuente (04/10/2026): de cuándo es cada archivo citado; lo viejo y lo roto, en ámbar y CON su texto. */
.origen.frescura-linea { margin-top: 4px; }
.origen .frescura.ojo, .origen .frescura.mal { color: var(--ambar-texto); }
.frescura-aviso { margin: 6px 0 0; font-size: .8rem; line-height: 1.4; color: var(--ambar-texto); max-width: 62ch; }
.frescura-aviso.mal { border-left: 2px solid var(--ambar); padding-left: 9px; }

.yo { align-self: flex-end; }
.yo p { margin: 0; background: var(--superficie); border: 1px solid var(--costura); border-radius: 16px 16px 4px 16px; padding: 10px 16px; color: var(--papel); box-shadow: var(--sombra-1); }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.opciones button { font: inherit; font-size: .9rem; border-radius: var(--r-control); padding: 7px 14px; min-height: 44px; cursor: pointer; border: 1px solid var(--tinta-apagada); background: transparent; color: var(--tinta); }
.opciones button.primera { background: var(--cobalto); border-color: var(--cobalto); color: #fff; }
.opciones button:hover { border-color: var(--cobalto); }
.opciones button:disabled { opacity: .45; cursor: default; }

.novedades h2 { margin: 0 0 6px; font-size: 1rem; font-weight: 750; }

.pensando .folio { color: var(--tinta-apagada); }

/* ---------------------------------------------------------------- escribir */
.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 28px 10px; }
.sugerencias.sug-repetida { display: none; }
/* (c, 27/10/2026) Mientras «Tu Fold» o «Se lee tu carpeta» enseñan sus preguntas para pulsar (las mismas de /api/estado), la tira de
   debajo del chat no las repite en otra tarjeta; vuelve sola al cerrarse esa hoja. */
body:has(#tf-sugerencias button, #csl-sugerencias button) #sugerencias { display: none; }   /* la última respuesta ya trae esos mismos ejemplos como botones (app.js) */
.sug { font: inherit; font-size: .84rem; font-weight: 500; color: var(--papel-apagado); background: var(--superficie); border: 1px solid var(--costura); border-radius: 999px; padding: 5px 16px; min-height: 44px; cursor: pointer; box-shadow: var(--sombra-1); }
.sug:hover { color: var(--papel); border-color: var(--costura-fuerte); background: var(--superficie-hover); }
/* Modo consulta (licencia cortada): la caja y las sugerencias siguen visibles, atenuadas y sin poder enviar; el separador marca lo de antes. */
.sugerencias.sug-consulta .sug { opacity: .55; cursor: default; box-shadow: none; }
.sugerencias.sug-consulta .sug:hover { color: var(--papel-apagado); border-color: var(--costura); background: var(--superficie); }
.escribir input:disabled { opacity: .55; cursor: default; box-shadow: none; }
.separador-consulta { margin: 14px 28px 6px; padding: 8px 0; border-top: 1px solid var(--costura-fuerte); font-size: .84rem; color: var(--papel-apagado); }
.escribir { display: flex; gap: 10px; padding: 12px 28px 20px; }
.escribir input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--papel); background: var(--superficie); border: 1px solid var(--costura-fuerte); border-radius: 12px; padding: 0 16px; height: 50px; box-shadow: var(--sombra-1); transition: border-color .16s, box-shadow .16s; }
.escribir input::placeholder { color: var(--papel-tenue); }
.pulsador { font: inherit; font-weight: 650; background: var(--cobalto); color: #fff; border: 0; border-radius: 12px; padding: 0 22px; height: 50px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(10, 20, 80, .3), 0 6px 16px -8px rgba(51, 88, 255, .7); }
.pulsador:hover { background: var(--cobalto-hover); }
.pulsador:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 3px; }
.pulsador:disabled { opacity: .55; cursor: default; box-shadow: none; }
/* IA AVANZADA (créditos, 22/10/2026): el interruptor bajo la caja de preguntar (app.js › pintarAvanzada), solo en los planes que la
   traen. Calmado: una pastilla con un interruptor dibujado; encendida, en cobalto tenue. La nota dice lo que cuesta, sin alarma. */
.ia-avanzada[hidden] { display: none; }
.ia-avanzada { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: -12px; padding: 0 28px 14px; }
.ia-avanzada-boton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--papel-apagado); background: transparent; border: 1px solid transparent; border-radius: var(--r-pastilla); cursor: pointer; transition: border-color .16s, background-color .16s, color .16s; }
.ia-avanzada-boton:hover { color: var(--papel); background: var(--superficie-hover); border-color: var(--costura); }
.ia-avanzada-boton:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; }
.ia-avanzada-marca { position: relative; flex: none; width: 30px; height: 18px; border-radius: var(--r-pastilla); background: var(--carril); border: 1px solid var(--costura-fuerte); transition: background-color .16s, border-color .16s; }
.ia-avanzada-marca::after { content: ''; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--papel-tenue); transition: transform .16s, background-color .16s; }
.ia-avanzada-boton[aria-pressed="true"] { color: var(--papel); background: var(--cobalto-tenue); border-color: var(--costura-fuerte); }
.ia-avanzada-boton[aria-pressed="true"] .ia-avanzada-marca { background: var(--cobalto); border-color: var(--cobalto); }
.ia-avanzada-boton[aria-pressed="true"] .ia-avanzada-marca::after { transform: translateX(12px); background: #fff; }
.ia-avanzada-nota { font-size: .8rem; color: var(--papel-tenue); }
@media (prefers-reduced-motion: reduce) { .ia-avanzada-boton, .ia-avanzada-marca, .ia-avanzada-marca::after { transition: none; } }
@media (max-width: 860px) { .ia-avanzada { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 480px) { .ia-avanzada { padding-left: 14px; padding-right: 14px; } }

/* ---------------------------------------------------------------- lateral (el mensajero) */
.lateral { padding: 22px 22px; overflow-y: auto; background: var(--hoja); }
/* M14 (05/10/2026): en un Fold en local no hay Mensajero (la carpeta de los Excel la lee la propia central:
   lib/carpeta-vigilada.js; sus rutas dan 404 en local, lib/modo-local.js). Su bloque del lateral no sale. */
html.tf-local :is(.lateral, .sp-lateral) .bloque:has(> #mensajero-estado) { display: none; }
.bloque + .bloque { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--costura); }
:is(.lateral, .sp-lateral) h2 { margin: 0 0 12px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--papel-tenue); font-variation-settings: 'wdth' 80; }

.mensajero-estado { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .92rem; color: var(--papel); }
.mensajero-estado .marca-estado { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--papel-tenue); }
.mensajero-estado.conectado .marca-estado { background: var(--cobalto-claro); }
.mensajero-estado.error .marca-estado { background: var(--ambar); }
.mensajero-estado.desconectado .marca-estado { background: transparent; border: 1.5px solid var(--papel-tenue); }
.mensajero-ultima { margin: 0 0 14px; font-size: .78rem; color: var(--papel-tenue); }

.vigilados, .fuentes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vigilados li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; align-items: start; }
.vigilados .marca { width: 12px; height: 15px; margin-top: 3px; background: var(--superficie-papel); clip-path: polygon(0 0, 65% 0, 100% 28%, 100% 100%, 0 100%); position: relative; }
.vigilados .marca::after { content: ''; position: absolute; top: 0; right: 0; width: 35%; height: 28%; background: var(--cobalto); }
.vigilados li.mal .marca::after { background: var(--ambar); }
.vigilados .nombre { font-size: .9rem; color: var(--papel); word-break: break-word; line-height: 1.3; }
.vigilados .cuando { display: block; font-size: .76rem; color: var(--papel-tenue); margin-top: 2px; }
.vigilados li.mal .cuando { color: var(--ambar-texto); }
.vigilados .vacio { display: block; color: var(--papel-tenue); font-size: .88rem; }
.fuentes li { font-size: .82rem; color: var(--papel-apagado); line-height: 1.35; }
.fuentes li span { display: block; color: var(--papel-tenue); font-size: .74rem; }
.fuentes li.mal span, .fuentes li.ojo span { color: var(--ambar-texto); }
.barra { height: 6px; border-radius: 999px; background: var(--grafito-panel); box-shadow: inset 0 0 0 1px var(--costura); overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--cobalto); }
.barra span.aviso { background: var(--ambar); }

.pie { padding: 8px 24px 12px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--papel-tenue); text-align: right; font-variation-settings: 'wdth' 75; border-top: 1px solid var(--costura); }

/* ---------------------------------------------------------------- notificación discreta */
/* z-index 50: por encima de .overlay (40) y de la banda de Tu Fold (38); con 20 los avisos lanzados desde un panel quedaban detras (M17). */
.notificacion { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(320px, calc(100vw - 40px)); pointer-events: none; }
.notificacion .aviso { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--grafito-alto); border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); padding: 12px 14px; font-size: .86rem; color: var(--papel); box-shadow: var(--sombra-3); animation: aviso-entra .22s ease-out; }
@keyframes aviso-entra { from { opacity: 0; } to { opacity: 1; } }
.notificacion .aviso.saliendo { animation: aviso-sale .25s ease-in forwards; }
@keyframes aviso-sale { to { opacity: 0; } }
.notificacion .aviso .marca-estado { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalto-claro); flex: none; }
.notificacion .aviso:has(.aviso-boton) { flex-wrap: wrap; }
.notificacion .aviso .aviso-boton { flex: 1 0 100%; font: inherit; font-size: .84rem; min-height: 36px; padding: 0 14px; background: var(--cobalto); color: #fff; border: 0; border-radius: var(--r-control); cursor: pointer; margin-top: 2px; }

/* ---------------------------------------------------------------- cajón lateral en móvil */
.velo { display: none; }

@media (max-width: 860px) {
  .cuerpo { grid-template-columns: 1fr; position: relative; }
  .panel-boton { display: inline-flex; align-items: center; justify-content: center; }
  .lateral {
    display: block; position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); z-index: 30;
    transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.7,.2,1);
    box-shadow: -18px 0 40px -20px rgba(0,0,0,.5); padding-top: 76px;
  }
  .lateral.abierto { transform: none; }
  .velo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 25; opacity: 0; pointer-events: none; transition: opacity .22s; }
  .velo.visible { opacity: 1; pointer-events: auto; }
  .lateral-cerrar { display: block; width: 100%; min-height: 44px; margin-bottom: 18px; font: inherit; font-size: .84rem; color: var(--papel-apagado); background: transparent; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; }
  .hilo, .sugerencias, .escribir { padding-left: 16px; padding-right: 16px; }
  .hoja-overlay { width: 100vw; }
}

@media (max-width: 640px) {
  .cabecera-derecha { gap: 8px; }
  .version { display: none; }
  .tema, .panel-boton, .nav-boton { font-size: 0; width: 44px; height: 44px; padding: 0; flex: none; }
  .tema::before { content: '◐'; font-size: 1.1rem; }
  .panel-boton::before { content: '☰'; font-size: 1.05rem; }
  .nav-boton#abrir-cuenta::before { content: '⚙'; font-size: 1.05rem; }
  .nav-boton#abrir-mejoras::before { content: '＋'; font-size: 1.15rem; }
  .nav-boton#abrir-soporte::before { content: '？'; font-size: 1.05rem; }  /* UX-01 (18/10/2026): en móvil el NOMBRE ya no se esconde (antes
     display: none): se corta con «…» y el completo sigue en el DOM y en su title. El logo o la inicial se quedan como estaban. */
  .marca-cliente > span#nombre-empresa { display: block; min-width: 0; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 480px) {
  .cabecera { padding: 10px 14px; gap: 10px; }
  .quien { gap: 10px; }
  .fold { width: 40px; height: 40px; }
  h1 { font-size: 1.15rem; }
  .estado { font-size: .78rem; }
  .hilo, .sugerencias, .escribir { padding-left: 14px; padding-right: 14px; }
  .escribir { gap: 8px; }
  .pulsador { padding: 0 16px; }
  .msg { max-width: 100%; }
}

/* Pantalla muy estrecha (320 px = zoom del 400 %, WCAG 1.4.10, Q5-9, 06/10/2026): la columna del marco y la del chat se
   fijaban al ancho mínimo de lo que llevan dentro (364 px) y la página se salía por la derecha. Con minmax(0, 1fr) pueden
   encogerse, y la cabecera y sus botones pasan a otra fila en vez de salirse. */
@media (max-width: 400px) {
  .marco, .charla { grid-template-columns: minmax(0, 1fr); }
  .cabecera { flex-wrap: wrap; }
  .cabecera-derecha { flex: 0 1 auto; flex-wrap: wrap; gap: 4px; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .msg, .bienvenida-pista, .notificacion .aviso { animation: none; }
  .hilo { scroll-behavior: auto; }
  .sugerencias.primera-vez .sug { animation: none; box-shadow: 0 0 0 2px var(--cobalto-tenue); }
  .fold, .lateral, .velo, .barra span { transition: none; }
  .tarjeta-almacen { animation: none; }
  .hoja-overlay { animation: none; }
}

/* ---------------------------------------------------------------- CONEXIONES (paso 13, 27/09/2026) */
.conexion { display: grid; gap: 8px; margin-top: 10px; }
.conexion-elemento span { min-width: 0; overflow-wrap: anywhere; }
.conexion-elemento.hijo { padding-left: 18px; font-size: .82rem; color: var(--papel-apagado); }
.acciones-conexion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.explorador { border-top: 1px solid var(--costura); padding-top: 8px; }
/* ---------------------------------------------------------------- DESCUBRIMIENTO CON IA (paso 13) */
.hilo-descubrimiento { display: grid; gap: 8px; margin: 10px 0; }
.hilo-descubrimiento p { margin: 0; padding: 10px 12px; border-radius: var(--r-panel); font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.hilo-descubrimiento .msg-fold { background: var(--grafito-panel); border: 1px solid var(--costura); }
.hilo-descubrimiento .msg-cliente { background: var(--cobalto-tenue); justify-self: end; max-width: 88%; }
.hilo-descubrimiento .quien { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--papel-tenue); margin-bottom: 2px; }
/* Punto 19 · Acceso (acceso.js): inicio de sesión corporativo y dirección propia. */
.entrada-sso-empresa { display: flex; align-items: center; justify-content: center; margin-top: 16px; text-decoration: none; text-align: center; }
.entrada-campo select, .entrada-campo textarea { font: inherit; font-size: .95rem; color: var(--papel); background: var(--grafito-alto); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); padding: 10px 14px; min-height: 44px; }
.entrada-campo textarea { resize: vertical; min-height: 76px; }
.entrada-campo select:focus, .entrada-campo textarea:focus { outline: 2px solid var(--cobalto); outline-offset: 1px; border-color: transparent; }
.entrada-campo input[readonly] { color: var(--papel-apagado); }
#vista-acceso .entrada-form { margin-top: 8px; }
/* Avisos de negocio (alertas.js, 28/09/2026): una tarjeta por aviso, con la gravedad en el canto. */
.titulo-seccion-aviso { font-size: 1rem; margin: 20px 0 8px; }
.aviso-negocio { position: relative; border: 1px solid var(--costura); border-radius: var(--r-panel); padding: 12px 16px 12px 40px; margin: 0 0 10px; background: var(--superficie); box-shadow: var(--sombra-1); }
.aviso-negocio::before { content: ''; position: absolute; left: 16px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--papel-tenue); box-shadow: 0 0 0 4px var(--grafito-panel); }
.aviso-negocio.grav-alta::before { background: var(--ambar); box-shadow: 0 0 0 4px var(--ambar-tenue); }
.aviso-negocio.grav-media::before { background: var(--cobalto); box-shadow: 0 0 0 4px var(--cobalto-tenue); }
.aviso-negocio-cab { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.aviso-negocio-titulo { font-weight: 600; margin: 2px 0 4px; overflow-wrap: anywhere; }
.aviso-negocio-texto { margin: 0 0 4px; overflow-wrap: anywhere; }
.marca-aviso { font-size: .75rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--costura-fuerte); color: var(--papel-apagado); }
.marca-aviso.nueva { color: var(--cobalto-claro); border-color: var(--cobalto-claro); }
.marca-aviso.sin-confirmar { color: var(--ambar-texto); background: var(--ambar-tenue); border-color: transparent; }
.rejilla-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
#vista-alertas .entrada-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
/* Gestor de redes (redes.js, 28/09/2026): cada pieza con su vídeo, su texto y sus botones. */
.redes-pieza { margin: 12px 0; }
.redes-pieza .opciones { flex-wrap: wrap; }
.redes-video { display: block; width: 100%; max-width: 320px; max-height: 480px; border-radius: var(--r-panel); background: #000; margin: 8px 0; }
.redes-texto { white-space: pre-line; font-size: .92rem; }
#vista-redes .form-mejora { margin: 10px 0; }
/* PRIMEROS PASOS, EMPRESA DE EJEMPLO, «TE HA AHORRADO» Y VENTA EN EL MOMENTO (29/09/2026, primeros-pasos.js) */
.primeros-pasos { margin: 0 16px 8px; padding: 12px 14px; border: 1px solid var(--costura); border-radius: var(--r-panel); background: var(--superficie); box-shadow: var(--sombra-1); display: grid; gap: 8px; max-height: 40vh; overflow: auto; }
.primeros-pasos .pp-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.primeros-pasos .pp-titulo { margin: 0; font-size: .86rem; font-weight: 650; color: var(--papel); }
.primeros-pasos .pp-titulo span { font-weight: 400; color: var(--papel-apagado); }
.primeros-pasos .pp-ocultar { font: inherit; font-size: .76rem; min-height: 32px; padding: 0 10px; color: var(--papel-apagado); background: transparent; border: 0; text-decoration: underline; cursor: pointer; }
.primeros-pasos .pp-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.primeros-pasos .pp-pasos li { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--papel); }
.primeros-pasos .pp-pasos li.hecho { color: var(--papel-tenue); text-decoration: line-through; }
.primeros-pasos .pp-marca { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--costura-fuerte); color: var(--cobalto-claro); font-size: .7rem; flex: none; }
.primeros-pasos li.hecho .pp-marca { background: var(--cobalto-tenue); border-color: var(--cobalto-claro); }
.primeros-pasos .enlace-discreto { min-height: 36px; }
/* Propuesta de verificación en dos pasos al propietario (05/10/2026): arriba de la lista, con «más tarde». */
.primeros-pasos .pp-seguridad { display: grid; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--costura); }
.primeros-pasos .pp-seguridad:last-child { padding-bottom: 0; border-bottom: 0; }
.primeros-pasos .pp-seg-texto { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--papel-apagado); max-width: 70ch; }
.primeros-pasos .pp-seguridad .opciones { margin-top: 2px; }
.primeros-pasos .pp-seguridad .opciones button { color: var(--papel); border-color: var(--costura-fuerte); }
.primeros-pasos .pp-seguridad .opciones button.primera { color: #fff; border-color: var(--cobalto); }
.primeros-pasos:has(.pp-seguridad) { max-height: 58vh; }
/* Recorrido del alta abierta (05/10/2026): mientras se pregunta a la empresa de ejemplo, la lista se encoge para
   que se VEA la respuesta. En el móvil, con la propuesta de dos pasos, la lista y la banda de ejemplo, la primera
   respuesta quedaba tapada entera (solo asomaba la fila de la fuente). La lista sigue ahí, con su barra. */
.primeros-pasos:has(~ .banda-ejemplo:not(.apagada):not([hidden])) { max-height: 24vh; }
/* En el móvil, con la propuesta de dos pasos, la lista tapaba el final del saludo de Fold: se queda con lo que sobra
   tras dejarle sitio al saludo (y nunca con menos de 170 px; el resto se desplaza dentro de la lista). */
@media (max-width: 600px) { .primeros-pasos:has(.pp-seguridad) { max-height: clamp(170px, calc(100vh - 560px), 46vh); } }
/* Elegir los archivos a vigilar sin teclear rutas (05/10/2026, elegir-archivos.js) */
.elegir-archivos { display: grid; gap: 8px; margin: 10px 0; }
.elegir-archivos .pulsador { justify-self: start; }
.elegir-archivos .elegir-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 260px; overflow: auto; border: 1px solid var(--costura); border-radius: var(--r-control); }
.elegir-archivos .elegir-lista label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; font-size: .86rem; cursor: pointer; overflow-wrap: anywhere; }
.elegir-archivos .elegir-lista input { flex: none; width: 18px; height: 18px; }
.elegir-archivos .opciones { margin-top: 0; }
.banda-ejemplo { margin: 0 16px 8px; padding: 10px 12px; border: 1px dashed var(--ambar); border-radius: var(--r-panel); background: var(--ambar-tenue); display: grid; gap: 6px; }
.banda-ejemplo.apagada { border: 0; background: transparent; padding: 0; }
.banda-ejemplo p { margin: 0; font-size: .84rem; color: var(--papel); }
.banda-ejemplo .opciones { margin-top: 0; }
.etiqueta-ejemplo { justify-self: start; font-size: .7rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--ambar); color: #101114; }
.msg-ejemplo .hoja { outline: 2px dashed var(--ambar); outline-offset: 2px; }
.valor-uso { display: grid; gap: 12px; }
.ahorro-total { margin: 4px 0; font-size: 1.3rem; font-weight: 700; color: var(--papel); font-feature-settings: 'tnum' 1; }
.tabla-ahorro { width: 100%; border-collapse: collapse; font-size: .8rem; font-feature-settings: 'tnum' 1; }
.tabla-ahorro th, .tabla-ahorro td { padding: 7px 6px; border-bottom: 1px solid var(--costura); text-align: right; color: var(--papel); vertical-align: top; }
.tabla-ahorro thead th { font-weight: 650; background: var(--grafito-panel); border-bottom-color: var(--costura-fuerte); }
.tabla-ahorro tbody th { text-align: left; font-weight: 500; }
.tabla-ahorro tbody th .letra-pequena-clara { display: block; }
.tabla-ahorro .ahorro-min { width: 4.5em; min-height: 36px; font: inherit; text-align: right; }
/* «Lo que Fold ha hecho por ti» (02/11/2026): la cifra en grande arriba; el desglose y «Ajustar mis tiempos», plegados. */
.ahorro .ahorro-grande { font-size: clamp(1.45rem, 4.2vw, 1.9rem); line-height: 1.2; margin: 6px 0 4px; text-wrap: balance; }
.ahorro .ahorro-mas { margin: 12px 0 4px; padding: 10px 12px; border-left: 3px solid var(--cobalto-claro); background: var(--grafito-panel); border-radius: 0 var(--r-control) var(--r-control) 0; }
.ahorro .ahorro-mas p { margin: 0 0 4px; }
.ahorro .ahorro-mas ul { margin: 0; padding-left: 18px; color: var(--papel); font-size: .88rem; }
.ahorro .ahorro-mas li + li { margin-top: 4px; }
.ahorro details.ahorro-plegado { margin-top: 10px; border-top: 1px solid var(--costura); padding-top: 6px; }
.ahorro details.ahorro-plegado > summary { display: inline-block; min-height: 44px; padding: 11px 2px 9px; box-sizing: border-box; font-size: .9rem; font-weight: 600; color: var(--cobalto-claro); cursor: pointer; list-style: none; }
.ahorro details.ahorro-plegado > summary::-webkit-details-marker { display: none; }
.ahorro details.ahorro-plegado > summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.ahorro details.ahorro-plegado[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ahorro details.ahorro-plegado > summary:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 2px; border-radius: 4px; }
.ahorro details.ahorro-ajustar > summary { font-weight: 500; color: var(--papel-apagado); font-size: .84rem; }
.ahorro .ahorro-lineas { list-style: none; margin: 6px 0; padding: 0; font-size: .86rem; color: var(--papel); font-feature-settings: 'tnum' 1; }
.ahorro .ahorro-lineas li { padding: 7px 0; border-bottom: 1px solid var(--costura); }
.ahorro .ahorro-lineas li .letra-pequena-clara { display: block; margin-top: 2px; }
.tabla-escalera .probar-fila { font: inherit; font-size: .7rem; min-height: 28px; margin-left: 4px; padding: 0 8px; color: var(--cobalto-claro); background: transparent; border: 1px solid var(--cobalto-claro); border-radius: var(--r-control); cursor: pointer; }
@media (max-width: 600px) { .primeros-pasos, .banda-ejemplo { margin: 0 8px 8px; } .primeros-pasos .pp-pasos { flex-direction: column; } }
/* Cerrar sesión (M18, cerrar-sesion.js): el botón de la cabecera de Cuenta, junto a «Cerrar». */
.cabecera-acciones { display: flex; align-items: center; gap: var(--e-2, 8px); flex: none; }
.cerrar-sesion { font: inherit; font-size: .84rem; font-weight: 550; min-height: 44px; padding: 0 14px; color: var(--papel); background: transparent; border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); cursor: pointer; }
.cerrar-sesion:hover { background: var(--grafito-panel); }
@media (max-width: 600px) { .cabecera-acciones { gap: 6px; } .cabecera-acciones .cerrar-overlay, .cabecera-acciones .cerrar-sesion { padding: 0 10px; } }

/* ---------------------------------------------------------------- M14 · FOLD EN LOCAL (05/10/2026)
   Todo con html.tf-local (lo pone tu-fold.js cuando /api/local/inicio contesta): en la nube no cambia nada. */
/* (a) LA REJILLA DE LA VENTANA. .marco es «auto auto 1fr auto» pensando en cabecera, aviso de cuenta, cuerpo y pie; pero el
   aviso de cuenta casi siempre está oculto (display: none no ocupa celda), así que el cuerpo caía en la fila «auto» y el
   PIE en la «1fr»: si el cuerpo no llenaba, el pie se quedaba el sitio (un hueco bajo «Fold Burnao») y, si no cabía, el pie
   se pintaba encima de «Preguntar». Cada pieza va a su fila y el cuerpo puede encoger (minmax(0, 1fr)). */
html.tf-local .marco { grid-template-rows: auto auto minmax(0, 1fr) auto; }
/* B145: la banda y la ventana comparten el alto; enfocar la pregunta no desplaza la cabecera bajo el aviso. */
body:has(> #fold-licencia-aviso) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body > #fold-licencia-aviso { flex: none; }
body:has(> #fold-licencia-aviso) > .marco { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; }
html.tf-local .marco > .cabecera { grid-row: 1; }
html.tf-local .marco > .banner-cuenta { grid-row: 2; }
html.tf-local .marco > .cuerpo { grid-row: 3; }
html.tf-local .marco > .pie { grid-row: 4; }
/* En la empresa de ejemplo la banda «EMPRESA DE EJEMPLO» va encima de la ventana (tu-fold.js, fuera de .marco): la ventana
   ocupa lo que queda, en vez de 100 % del alto MÁS la banda (el formulario quedaba por debajo del borde). */
html.tf-local.tf-es-ejemplo body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
html.tf-local.tf-es-ejemplo body > .tf-banda { flex: none; }
html.tf-local.tf-es-ejemplo body > .marco { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; }
/* La lista de primeros pasos (con la propuesta de seguridad podía llevarse el 58 % del alto) ya al entrar se queda en una
   franja del 20 % que se desplaza dentro: la bienvenida y el hilo se ven. */
html.tf-local .charla > .primeros-pasos, html.tf-local .charla > .primeros-pasos:has(.pp-seguridad) { max-height: 20vh; }
/* La tira «Tienes guardada la empresa de ejemplo… Volver · Borrar» (tu-fold.js) en una sola fila cuando cabe. */
html.tf-local .tf-tira { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 8px; padding-bottom: 8px; }
html.tf-local .tf-tira > p { flex: 1 1 260px; }
/* Estrecho (móvil, ≤ 640 px): la cabecera ya ocupa dos filas. «Tu día» (tu-dia.css) y la lista se quedan en una franja que se desplaza
   dentro, y las sugerencias en una sola fila que se desliza de lado (antes, tres filas de botones). */
@media (max-width: 640px) {
  html.tf-local .charla > .primeros-pasos, html.tf-local .charla > .primeros-pasos:has(.pp-seguridad) { max-height: 14vh; }
  html.tf-local .sugerencias { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  html.tf-local .sugerencias .sug { flex: none; white-space: nowrap; }
}
/* Ventanas muy bajas (640×400): no caben a la vez la cabecera, «Tu día», la lista y el formulario. Se deja que la página
   baje (el pie va después de «Preguntar», nunca encima) y el hilo conserva un alto mínimo para leer la respuesta. */
@media (max-height: 560px) {
  html.tf-local .marco { height: auto; min-height: 100vh; min-height: 100dvh; grid-template-rows: auto auto auto auto; }
  html.tf-local.tf-es-ejemplo body { height: auto; min-height: 100dvh; }
  html.tf-local .hilo { min-height: min(260px, 60vh); max-height: 70vh; }
}
/* (e) LO QUE NO SE PUEDE CONTRATAR, OCULTO. En local el plan lo trae la licencia: no hay pago, ni prueba, ni registro
   (lib/modo-local.js). En «Plan y pago» se queda el plan que se tiene (y sus facturas, si las hubiera: eso no se toca
   aquí); se ocultan la prueba de 7 días, el selector mensual/anual, los otros planes con sus «Mejorar plan», la tabla de la
   escalera, el precio del exceso, el método de pago, cancelar y la oferta de almacenamiento. Y la pestaña «Trae una
   empresa», cuyo enlace lleva a un registro que en local no existe. No se cambia ningún precio ni ningún texto. */
html.tf-local #tab-trae,
html.tf-local #vista-plan .prueba-plan:not(.en-curso),
html.tf-local #vista-plan .selector-periodo,
html.tf-local #vista-plan .lista-planes > .mejora-meta,
html.tf-local #vista-plan .lista-planes > .letra-pequena-clara,
html.tf-local #vista-plan .lista-planes > .plan-fila:not(.actual),
html.tf-local #vista-plan .mejorar-plan,
html.tf-local #vista-plan .escalera,
html.tf-local #vista-plan .excedente-nota,
html.tf-local #vista-plan div:has(> .metodo-pago),
html.tf-local #vista-plan .cancelar-caja,
html.tf-local #vista-plan .tarjeta-almacen { display: none; }
/* (g) Un texto largo sin espacios se parte dentro de su burbuja en vez de salirse. */
html.tf-local .yo p { overflow-wrap: anywhere; }

/* (auditoría visual #6, 28/10/2026) Respuestas con muchas filas: las 5 primeras a la vista y el resto plegado en «Ver N más» (app.js). */
.folio .filas-mas { margin: -4px 0 10px; }
.folio .filas-mas > summary { display: inline-block; box-sizing: border-box; min-height: 44px; padding: 11px 2px 9px; font-size: .92rem; font-weight: 600; color: var(--cobalto); cursor: pointer; list-style: none; }
.folio .filas-mas > summary::-webkit-details-marker { display: none; }
.folio .filas-mas > summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.folio .filas-mas[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.folio .filas-mas > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.folio .filas-mas > summary:active { opacity: .75; }
.folio .filas-mas > summary:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 2px; border-radius: 4px; }
.folio .filas-mas[open] > .filas-datos { border-top: 0; }

/* «Tu diagnóstico» por el chat (02/11/2026, app.js): el enlace que abre la hoja, con la misma forma que .opciones button.primera. */
.opciones a.boton-enlace { display: inline-flex; align-items: center; font-size: .9rem; border-radius: var(--r-control); padding: 7px 14px; min-height: 44px; box-sizing: border-box; text-decoration: none; border: 1px solid var(--cobalto); }
.opciones a.boton-enlace.primera { background: var(--cobalto); color: #fff; }
.opciones a.boton-enlace:focus-visible { outline: none; box-shadow: var(--anillo-foco); }