/* ══════════════════════════════════════════════════════════════════════
   menu-ac.css — lo que es del MENÚ ACTUARIAL y de nadie más
   ══════════════════════════════════════════════════════════════════════
   Sus formularios, sus resultados, sus tablas, sus tarjetas de módulo y sus
   pestañas. Estaba en línea dentro de `taskpane.html`; salió el 27 ago 2026,
   cuando esa página dejó de ser de `ax` para ser la VENTANA del complemento.

   Lo que NO está aquí y no debe volver: la cabecera de marca, el botón de
   tema, el pie, la caja de licencia, el menú de áreas y la caja de búsqueda.
   Todo eso es de la familia y vive en `../../../nucleo/panel/armazon.css`.

   Los colores salen de los tokens `--loea-*`. El vocabulario viejo del panel
   (`--acc`, `--mut`, `--line`…) sigue arriba como ALIAS de esos tokens: así el
   modo oscuro y el acento por menú viajan solos, sin una segunda lista aquí.
   ══════════════════════════════════════════════════════════════════════ */

/* El vocabulario viejo del panel (--acc, --mut, --line…) ya no tiene
   colores propios: es un ALIAS del de la familia (nucleo/panel/loea.css).
   Con esto el modo oscuro no necesita una segunda lista aqui — basta con
   que el nucleo cambie sus tokens y todo el panel viaja con ellos.
   OJO: `--acc` es el acento de TEXTO, que en oscuro se aclara. Donde el
   verde es SUPERFICIE (cabecera, botones, barra, pestanas) va
   `--loea-acc-fondo`, que no cambia, para no quitarle contraste al texto
   claro que lleva encima. */
:root{--acc:var(--loea-acc);--acc2:var(--loea-soft);--brass:var(--loea-brass);
  --bg:var(--loea-bg);--ink:var(--loea-ink);--mut:var(--loea-mut);--line:var(--loea-line);}
body{font:14px/1.5 "Segoe UI",system-ui,sans-serif;margin:0;background:var(--bg);color:var(--ink);}
header{background:var(--loea-acc-fondo);color:var(--loea-on-acc);padding:12px 16px;font-weight:600;}
header .sym{font-style:italic;font-family:Georgia,serif;}
main{padding:4px 16px 20px;}
label{display:block;font-size:11.5px;font-weight:600;color:var(--mut);margin:10px 0 3px;}
label small{font-weight:400;}
/* `color` explicito: los controles de formulario NO heredan el color del
   body, usan el del sistema. En claro eso era negro sobre blanco y no se
   notaba; en oscuro quedaba NEGRO sobre fondo oscuro, ilegible. */
input,select,textarea{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--loea-card);color:var(--loea-ink);}
/* Los textos de ejemplo, más claros que lo escrito (20 oct 2026, el dueño:
   «no tan fuertes»): que no se confundan con un valor ya puesto. */
input::placeholder,textarea::placeholder{color:var(--loea-mut-2);opacity:.7;}
/* La tabla pegada se mira en columnas: con la tipografía del panel, un
   "0,000892" y el de la fila de abajo no quedan alineados y los ceros de
   más no se ven. Monoespaciada, y sin ajuste de línea por la misma razón. */
textarea{font-family:Consolas,monospace;font-size:11.5px;white-space:pre;overflow-x:auto;resize:vertical;margin-top:2px;}
button{margin-top:14px;width:100%;padding:10px;border:none;border-radius:9px;background:var(--loea-acc-fondo);color:#fff;font:inherit;font-weight:600;cursor:pointer;}
button.sec{background:var(--loea-card);color:var(--acc);border:1px solid var(--acc);}
section h2{font-size:13px;color:var(--acc);text-transform:uppercase;letter-spacing:.05em;margin:12px 0 0;}
.msg{margin-top:8px;font-size:12px;color:var(--loea-mut);}
/* Un aviso de que algo NO se hizo (19 oct 2026): en recuadro, con ⚠, para
   que no se confunda con un «✔ listo». Lo pone `avisosVisibles()`. */
#contenidoMenu .msg.mal{color:var(--loea-mal);background:color-mix(in srgb,var(--loea-mal) 10%,transparent);border:1px solid color-mix(in srgb,var(--loea-mal) 45%,transparent);border-left-width:4px;border-radius:6px;padding:8px 10px;font-size:12.5px;line-height:1.45;}
#contenidoMenu .msg.mal::before{content:"⚠ ";font-weight:700;}
#contenidoMenu .msg.bien{color:var(--loea-si);background:var(--loea-si-soft);border:1px solid color-mix(in srgb,var(--loea-si) 45%,transparent);border-left-width:4px;border-radius:6px;padding:8px 10px;font-size:12.5px;line-height:1.45;font-weight:600;}
#contenidoMenu .msg.aviso-nuevo{animation:aviso-nuevo .5s ease-out 2;}
@keyframes aviso-nuevo{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){#contenidoMenu .msg.aviso-nuevo{animation:none}}
/* «Dónde ponerlo» con botones de opción (19 oct 2026). */
#contenidoMenu .opciones{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
/* Banco de tablas (19 oct 2026): la forma de ax/docs/maqueta-banco-de-tablas.html. */
#contenidoMenu .bt-buscar{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;background:var(--loea-card);padding:6px 9px;margin-top:6px;}
#contenidoMenu .bt-buscar input{border:0;outline:0;background:transparent;padding:0;margin:0;font:inherit;color:var(--ink);width:100%;}
#contenidoMenu .bt-chips{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 4px;}
#contenidoMenu .bt-chips button{width:auto;margin:0;font:600 11px var(--font-body);padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:var(--loea-card);color:var(--loea-mut);}
#contenidoMenu .bt-chips button.on{color:var(--acc);border-color:var(--acc);background:var(--loea-soft);}
/* Sin tope ni barra propia (20 oct 2026, el dueño en Excel: «se ve muy cortado el
   slider»): la lista corre con el panel, como la de fórmulas del módulo. */
#contenidoMenu .bt-lista{padding-right:2px;}
#contenidoMenu .bt-grupo{font:600 10px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--loea-mut-2);margin:12px 0 6px;}
#contenidoMenu .bt-tabla{display:block;width:100%;margin:0 0 6px;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--loea-card);padding:8px 10px;font:inherit;font-weight:400;color:var(--ink);}
#contenidoMenu .bt-tabla:hover,#contenidoMenu .bt-tabla.sel{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc);}
#contenidoMenu .bt-tabla .n{display:flex;justify-content:space-between;gap:8px;font-weight:600;font-size:12.5px;}
#contenidoMenu .bt-tabla .u{display:block;font-size:11.5px;color:var(--loea-mut);margin-top:1px;}
#contenidoMenu .bt-tabla .d{display:block;font:10.5px var(--font-mono);color:var(--loea-mut-2);margin-top:2px;}
#contenidoMenu .bt-plan{flex:none;align-self:flex-start;font:600 9.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:999px;}
#contenidoMenu .bt-plan.gratis{color:var(--loea-si);background:var(--loea-si-soft);}
#contenidoMenu .bt-plan.premium{color:var(--loea-brass);background:var(--loea-brass-soft);border:1px solid var(--loea-brass-line);}
#contenidoMenu .bt-plan.enlace{color:var(--loea-mut);background:var(--loea-card);border:1px dashed var(--loea-mut-2);}
#contenidoMenu .bt-ficha{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--loea-card);padding:10px 12px;}
#contenidoMenu .bt-ficha h3{margin:6px 0 2px;font:500 17px/1.25 var(--font-display);}
#contenidoMenu .bt-campo{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid var(--line);font-size:11.5px;}
#contenidoMenu .bt-campo span{color:var(--loea-mut-2);flex:none;}
#contenidoMenu .bt-campo b{text-align:right;font-weight:600;}
#contenidoMenu .bt-campo a{color:var(--acc);}
#contenidoMenu .bt-vistas{display:flex;gap:0;margin:2px 0 8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
#contenidoMenu .bt-vistas button{flex:1;margin:0;padding:8px;border:0;border-radius:0;background:var(--loea-card);color:var(--loea-mut);font:600 12.5px var(--font-body);}
#contenidoMenu .bt-vistas button.on{background:var(--acc);color:#fff;}
#contenidoMenu .bt-plan.mia{color:var(--acc);background:var(--loea-soft);}
/* Un botón de verdad, a lo ancho y con contorno: chiquito y sin marco se
   confundía con el «‹ 03 Biometría» de arriba (el dueño en Excel, 19 oct 2026). */
#contenidoMenu .bt-volver{display:block;width:100%;margin:10px 0 2px;padding:9px 12px;background:var(--loea-card);border:1px solid var(--acc);border-radius:9px;color:var(--acc);font:600 13px var(--font-body);text-align:left;}
#contenidoMenu .bt-volver:hover{background:var(--loea-soft);}
/* Proponer una tabla y «Mis propuestas» (20 oct 2026). */
#contenidoMenu #btPropuesta .tip a{color:var(--acc);font-weight:600;text-decoration:none;white-space:nowrap;}
#contenidoMenu .bt-invita{border:1px solid var(--acc);background:var(--loea-soft);border-radius:10px;padding:10px 11px;margin:10px 0 4px;}
#contenidoMenu .bt-invita b{color:var(--acc);font-size:13px;}
#contenidoMenu .bt-invita p{margin:3px 0 8px;font-size:12px;line-height:1.4;}
#contenidoMenu #btIrProponer{width:100%;margin:0;}
#contenidoMenu #btPropuesta textarea{width:100%;box-sizing:border-box;font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--loea-card);color:var(--ink);resize:vertical;}
#contenidoMenu .bt-aporte{display:block;font-size:11px;color:var(--acc);font-weight:600;margin-top:2px;}
#contenidoMenu .bt-prop{border:1px solid var(--line);border-radius:8px;background:var(--loea-card);padding:7px 10px;margin-top:6px;}
#contenidoMenu .bt-prop-fila{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12.5px;}
#contenidoMenu .bt-prop-porque{margin:4px 0 0;font-size:11.5px;color:var(--loea-mut);}
#contenidoMenu .bt-est{flex:none;font:600 9.5px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:999px;}
#contenidoMenu .bt-est.pend{color:var(--loea-brass);background:var(--loea-brass-soft);}
#contenidoMenu .bt-est.ok{color:var(--loea-si);background:var(--loea-si-soft);}
#contenidoMenu .bt-est.no{color:var(--loea-mal);background:var(--loea-mal-soft);}
#contenidoMenu .bt-curva{display:block;width:100%;margin-top:6px;color:var(--acc);}
#contenidoMenu .bt-cap{font-size:10.5px;color:var(--loea-mut-2);margin-top:2px;}
#contenidoMenu .bt-graf{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--loea-card);padding:8px 8px 6px;}
#contenidoMenu .bt-g-esc{display:flex;gap:4px;justify-content:flex-end;}
#contenidoMenu .bt-g-esc button{width:auto;margin:0;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--loea-card);color:var(--loea-mut);font:600 10.5px var(--font-body);}
#contenidoMenu .bt-g-esc button.on{color:var(--acc);border-color:var(--acc);background:var(--loea-soft);}
#contenidoMenu .bt-curva .bt-g-txt{font:8.5px var(--font-mono);fill:var(--loea-mut-2);}
#contenidoMenu .bt-curva .bt-g-rej{stroke:var(--line);stroke-width:.6;}
#contenidoMenu .bt-curva .bt-g-eje{stroke:var(--loea-mut-2);stroke-width:.8;}
#contenidoMenu .bt-curva .bt-g-guia{stroke:var(--loea-mut-2);stroke-width:.6;stroke-dasharray:2 2;}
#contenidoMenu .bt-curva .bt-g-pto{fill:var(--acc);}
#contenidoMenu .bt-curva .bt-g-rot{font:600 9.5px var(--font-mono);fill:var(--ink);}
#contenidoMenu .bt-vista{width:100%;border-collapse:collapse;margin-top:8px;font:11px/1.5 var(--font-mono);}
#contenidoMenu .bt-vista th{text-align:left;color:var(--loea-on-acc);background:var(--loea-acc-fondo);padding:3px 6px;}
#contenidoMenu .bt-vista td{padding:2px 6px;border-bottom:1px solid var(--line);}
#contenidoMenu .bt-vista td:last-child,#contenidoMenu .bt-vista th:last-child{text-align:right;}
#btVit:not(:empty),#btEnlace:not([hidden]){margin-top:10px;}
#contenidoMenu .opciones label{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--loea-card);font-size:12.5px;font-weight:400;cursor:pointer;}
#contenidoMenu .opciones label:has(input:checked){border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);}
#contenidoMenu .opciones input{margin:0;accent-color:var(--acc);width:auto;}
details{margin-top:14px;border-top:1px dashed var(--line);padding-top:8px;}
details summary{cursor:pointer;font-weight:600;color:var(--acc);font-size:13px;}
.tip{font-size:11.5px;color:var(--loea-mut);margin:8px 0 2px;line-height:1.5;}
/* insertador universal */
.que{font-size:12px;color:var(--ink);background:var(--loea-card);border-left:3px solid var(--acc);padding:6px 10px;margin:10px 0 2px;border-radius:0 6px 6px 0;}
.desc{display:block;font-size:11px;color:var(--mut);font-weight:400;margin-top:1px;}
.formula{font-family:Consolas,monospace;font-size:12px;background:var(--loea-card);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-top:12px;word-break:break-all;}
.chk{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;}
.chk input{width:auto;}
/* Diagnóstico de una tabla importada. Tres colores porque son tres cosas
   distintas: lo que se ENTENDIÓ (y hay que confirmar), lo que IMPIDE
   importar, y lo que solo hay que saber. Mezclarlos haría que el usuario
   leyera los tres igual, que es como se importa una tabla mala. */
.diag{margin-top:10px;font-size:11.5px;line-height:1.55;}
.diag b{font-weight:600;}
.diag div{padding:6px 9px;border-radius:7px;margin-top:5px;border-left:3px solid var(--line);background:var(--loea-card);}
.diag .leido{border-left-color:var(--acc);}
.diag .err{border-left-color:#b3261e;color:#b3261e;}
.diag .avi{border-left-color:#b26a00;}
.diag table{width:100%;border-collapse:collapse;margin-top:4px;}
.diag td{padding:1px 0;vertical-align:top;}
.diag td:first-child{color:var(--loea-mut);padding-right:8px;white-space:nowrap;}
/* Fichas ya guardadas en la biblioteca del libro. */
.fichas{margin:8px 0 2px;font-size:11.5px;}
.fichas .ficha{display:flex;gap:8px;align-items:baseline;padding:6px 9px;border:1px solid var(--line);border-radius:7px;margin-top:5px;background:var(--loea-card);}
.fichas .ficha b{flex:1;font-weight:600;}
.fichas .ficha span{color:var(--loea-mut);}
.fichas .ficha button{width:auto;margin:0;padding:2px 8px;font-size:11px;background:transparent;color:var(--loea-mut);border:1px solid var(--line);}
code{font-family:Consolas,monospace;font-size:11px;}
section{margin-top:16px;border-top:1px dashed var(--line);padding-top:4px;}
section:first-of-type{border-top:none;margin-top:0;}
[hidden]{display:none !important;}
a.ayuda{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;
  padding:10px 12px;font-size:12.5px;font-weight:600;color:var(--loea-acc);
  background:var(--loea-card);border:1px solid var(--loea-line);border-radius:11px;
  text-decoration:none;box-shadow:var(--loea-sombra-1);
  transition:border-color .14s,background .14s;}
a.ayuda:hover{border-color:var(--loea-acc);background:var(--loea-soft);}
details.guia{margin:6px 0 0;border:none;padding:0;}
details.guia summary{font-size:12px;}
details.guia ul{margin:4px 0 0;padding-left:0;list-style:none;}
details.guia li{font-size:12px;margin:5px 0;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;}
details.guia li .desc{flex-basis:100%;margin-left:44px;}
button.usar{width:auto;margin:0;padding:2px 8px;font-size:11px;border-radius:6px;background:var(--acc2);color:var(--acc);border:1px solid var(--acc);}
.rango{display:flex;gap:6px;align-items:stretch;}
.rango input{flex:1;}
.rango button.usar{white-space:nowrap;padding:6px 8px;}
/* El cuadrito de «tomar la selección», como el de Excel en «Argumentos de
   función»: cuadrado, de la altura del campo y con la flecha dentro. El icono
   viene en el MARCADO (`nucleo/panel/boton-seleccion.js`) y no de aquí; el
   porqué está escrito allá. Va DESPUÉS de `.rango button.usar` a propósito:
   empata en especificidad y gana por orden, sin `!important`. */
.rango button.usar.loea-sel{flex:0 0 auto;width:28px;min-width:28px;padding:0;display:flex;align-items:center;justify-content:center;}
.loea-sel .loea-sel-ico{display:block;}
/* «Traer de la selección» (Importar tabla, Importar curva): trae la TABLA
   entera al cuadro de pegar, no su dirección, así que se queda ancho y con
   su texto; lleva la flecha del cuadrito para que se lea de la misma familia
   (el dueño, 13 oct 2026: era el último 📍 del panel). */
#impDeSeleccion, #icDeSeleccion{display:inline-flex;align-items:center;gap:5px;}  /* por id: acotada a Actuarial (verificar-css-areas) */
.idioma{font-size:11.5px;color:var(--mut);margin-top:5px;line-height:1.45;}
.idioma b{color:var(--ink);font-family:Consolas,monospace;}
.lectura{font-size:12px;color:var(--ink);background:var(--loea-brass-soft);border:1px solid var(--loea-brass-line);border-radius:8px;padding:6px 10px;margin-top:6px;}
.res{margin-top:10px;background:var(--loea-card);border:1px solid var(--line);border-left:4px solid var(--loea-acc);border-radius:8px;padding:8px 12px;}
.res .cap{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:600;}
.res .big{font-family:Consolas,monospace;font-size:20px;color:var(--acc);font-weight:600;word-break:break-all;}
.res table{border-collapse:collapse;font-size:11px;margin-top:6px;font-family:Consolas,monospace;}
.res td{border:1px solid var(--line);padding:1px 6px;text-align:right;white-space:nowrap;}
.res .mas{font-size:11px;color:var(--mut);margin-top:4px;}
button.sec + .res{margin-top:10px;}
/* ── Navegación estilo ventanas: Inicio (tarjetas) → módulo (barra + pestañas + chips) ── */
/* La CABECERA, el botón de TEMA y el PIE ya no se describen aquí: son
   el ARMAZÓN de la familia y viven en `nucleo/panel/armazon.css`, que
   este HTML enlaza arriba. El acento por menú, en `paletas.css`. Aquí
   abajo queda sólo lo que es de AC. Extraído el 27 ago 2026; el mapa de
   selectores viejos → nuevos está en la cabecera de `armazon.css`. */
.intro{font-size:12.5px;color:var(--mut);margin:12px 0 6px;}
.card{background:var(--loea-card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;display:grid;grid-template-columns:38px 1fr;gap:2px 10px;}
.card.clicable{cursor:pointer;transition:border-color .12s,box-shadow .12s;}
.card.clicable:hover{border-color:var(--acc);box-shadow:0 1px 6px rgba(31,85,96,.14);}
.card .sym{grid-row:span 2;width:38px;height:38px;border-radius:9px;background:var(--acc2);color:var(--acc);display:flex;align-items:center;justify-content:center;font:italic 16px Georgia,serif;}
.card b{font-size:13.5px;}
.card b small{color:var(--mut);font-weight:400;margin-right:4px;}
.card p{margin:0;font-size:12px;color:var(--mut);}
.card .acc{grid-column:2;display:flex;justify-content:flex-end;margin-top:6px;}
.card button{width:auto;margin:0;padding:6px 18px;font-size:12.5px;}
/* Candados del plan gratis: se ve todo, se usa lo que corresponde. */
.card .tag{grid-column:2;justify-self:start;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--brass);background:var(--loea-brass-soft);border:1px solid var(--loea-brass-line);border-radius:999px;padding:1px 8px;margin-top:6px;}
.candado{margin-top:10px;background:var(--loea-brass-soft);border:1px solid var(--loea-brass-line);border-left:4px solid var(--brass);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--ink);}
.candado b{color:var(--brass);}
.candado a{color:var(--brass);font-weight:600;}
/* El chip del plan en la tarjeta de área. El resto del pie —la caja, los
   botones en fila y la línea de versión— es del armazón. */
.prox{margin-top:14px;}
.prox h3{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px;}
.prox span{display:inline-block;font-size:11.5px;color:var(--mut);background:var(--loea-card);border:1px dashed var(--line);border-radius:999px;padding:2px 9px;margin:2px 3px 2px 0;}
.barra{background:var(--loea-acc-fondo);color:var(--loea-on-acc);display:flex;align-items:center;gap:6px;padding:0 8px 0 4px;min-height:40px;}
.barra button.atras{width:auto;margin:0;padding:4px 8px;background:transparent;color:#fff;font-size:18px;line-height:1;}
.barra .mt{flex:1;min-width:0;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.barra .mt small{opacity:.75;font-weight:400;margin-right:4px;}
/* «📖 Ayuda» (8 oct 2026): con la letra del título —antes 15 px y normal, y el
   dueño la vio «rara»— y sin encogerse: con el panel angosto cede el título
   (min-width:0 arriba, con su «…»), nunca el botón, que salía «Ayud». */
.barra a{color:#fff;text-decoration:none;font:inherit;font-weight:600;font-size:13.5px;white-space:nowrap;flex-shrink:0;}
/* La tira desplaza, pero la barra va oculta: sin las flechas de al lado no
   hay NINGUNA señal de que haya más secciones, y en el WebView2 de Excel no
   hay rueda horizontal. El módulo 12 tiene nueve pestañas —unos 1290 px en
   un panel de 400— y cuatro quedaban inalcanzables (26 ago 2026). */
.tiraTabs{position:relative;background:var(--loea-acc-fondo);}
.tabs{background:var(--loea-acc-fondo);display:flex;gap:2px;overflow-x:auto;padding:0 26px;scrollbar-width:none;scroll-behavior:smooth;}
.tabs::-webkit-scrollbar{display:none;}
.fltab{position:absolute;top:0;bottom:0;width:26px;margin:0;padding:0;border:none;border-radius:0;
  background:var(--loea-acc-fondo);color:#fff;font-size:16px;line-height:1;display:flex;
  align-items:center;justify-content:center;cursor:pointer;z-index:2;}
.fltab.izq{left:0;box-shadow:8px 0 10px -5px var(--loea-acc-fondo);}
.fltab.der{right:0;box-shadow:-8px 0 10px -5px var(--loea-acc-fondo);}
.fltab:disabled{color:rgba(255,255,255,.28);cursor:default;box-shadow:none;}
/* Cuando caben todas —el módulo 01 tiene dos— las flechas estorban. */
.tiraTabs.cabe .fltab{display:none;}
.tiraTabs.cabe .tabs{padding:0 8px;}
.tabs button{width:auto;margin:0;padding:7px 10px 8px;background:transparent;color:rgba(255,255,255,.72);font-weight:500;font-size:12.5px;border-radius:0;border-bottom:3px solid transparent;white-space:nowrap;}
.tabs button.act{color:#fff;font-weight:600;border-bottom-color:#fff;}
.pills{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px 0;}
.pills button{width:auto;margin:0;padding:4px 10px;font-size:12px;font-family:Consolas,monospace;background:var(--loea-card);color:var(--acc);border:1px solid var(--line);border-radius:999px;font-weight:500;}
.pills button.act{background:var(--loea-acc-fondo);color:#fff;border-color:var(--acc);}
main.mod{padding-top:0;}
main.mod section{border-top:none;margin-top:0;}
.titfn{margin:10px 0 0;font-size:12.5px;color:var(--mut);}
.titfn b{color:var(--ink);}
/* ════════ Fase 12 · paso 2 — la pantalla de entrada ════════════════
   Rediseño aprobado en docs/referencia/maqueta-panel-v5.html.
   Todo va acotado a `#vAreas`: los módulos y el
   formulario NO se tocan (eso es de los pasos 3 y 4). Los colores
   salen de los tokens --loea-* del núcleo (nucleo/panel/loea.css). */

/* ── Tope de ancho ──────────────────────────────────────────────────
   El degradado y los separadores siguen yendo de borde a borde (si no,
   la portada se ve como un recuadro flotando), pero el CONTENIDO se
   centra y no pasa de --loea-ancho. Sólo la entrada: los módulos y el
   formulario van en los pasos 3 y 4. */
#vAreas>*{
  max-width:var(--loea-ancho);margin-left:auto;margin-right:auto;}

/* La TARJETA DE ÁREA ya no se describe aquí: el menú de áreas es del
   complemento, no de este menú. Vive en `nucleo/panel/armazon.css`
   (sección «El menú de áreas») y lo dibuja `nucleo/panel/menu-areas.js`. */
#vAreas{font-family:var(--font-body);background:var(--loea-bg);}

/* ── Pie de la entrada: líneas finas, sin caja ── */
#vAreas .loea-pie{background:transparent;border:0;border-top:1px solid var(--loea-line);
  border-radius:0;margin-top:24px;padding:15px 0 0;}
#vAreas .loea-acerca-txt{font-size:12px;color:var(--loea-mut);line-height:1.6;}
#vAreas .loea-acerca-txt b{color:var(--loea-ink);}
#vAreas .loea-filabtn .loea-lnkbtn{border-radius:11px;border-color:var(--loea-line);
  color:var(--loea-acc);background:var(--loea-card);}
#vAreas .loea-filabtn .loea-lnkbtn:hover{border-color:var(--loea-acc);background:var(--loea-soft);}
#vAreas .loea-verlinea{font:500 10.5px var(--font-mono);color:var(--loea-mut);}
/* ════════ Fase 12 · paso 3 — el buscador ══════════════════════════
   Todo acotado a #vInicio y #buscaRes: el panel ya usa .res, .fila y
   .card con otro significado y pisarlas rompería las demás vistas.
   El formulario sigue sin tocarse (paso 4). */
/* Mismo tope de ancho que la entrada, para que no bailen entre sí. */
#vInicio>*{max-width:var(--loea-ancho);margin-left:auto;margin-right:auto;}
#vInicio{font-family:var(--font-body);}
/* La CAJA de búsqueda, su pista y los rótulos de los grupos viven en
   `nucleo/panel/armazon.css` (sección «El buscador») desde el 27 ago 2026.
   Aquí abajo queda el dibujo de cada FILA de resultado, que sí es de AC:
   sus símbolos, su «módulo N · corto» y sus candados. */
#buscaRes .fn{display:flex;gap:11px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--loea-line);cursor:pointer;transition:padding .14s;}
#buscaRes .fn:hover{padding-left:5px;}
#buscaRes .fn:hover .nombre{color:var(--loea-acc);}
#buscaRes .fn .nombre{font:500 12.5px var(--font-mono);flex:none;transition:color .14s;}
#buscaRes .fn .txt{flex:1;min-width:0;}
#buscaRes .fn .titulo{font-size:12.5px;line-height:1.4;display:block;color:var(--loea-ink);}
#buscaRes .fn .donde{font:500 10.5px var(--font-mono);color:var(--loea-mut);margin-top:2px;display:block;}
#buscaRes .fn .cand{color:var(--loea-brass);font-size:11px;flex:none;}
#buscaRes .mod{display:grid;grid-template-columns:34px 1fr auto;gap:0 12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--loea-line);cursor:pointer;transition:padding .14s;}
#buscaRes .mod:hover{padding-left:5px;}
#buscaRes .mod:hover b{color:var(--loea-acc);}
#buscaRes .mod .sym{font:500 17px/1 var(--font-display);color:var(--loea-acc);text-align:center;}
#buscaRes .mod b{font:500 13.5px/1.2 var(--font-display);letter-spacing:-.01em;
  color:var(--loea-ink);transition:color .14s;}
#buscaRes .mod .der{font:500 10.5px var(--font-mono);color:var(--loea-mut);}
/* ════════ Fase 12 · paso 4 — las tres vistas de módulos ═══════════
   Los mismos módulos, vistos como el alumno prefiera. La elección se
   guarda en localStorage: se decide una vez. Todo acotado a #vInicio
   para no tocar la ficha de función (#vMod). */
#vInicio #modRot{margin-top:16px;}

/* ── El selector: tres iconos a la derecha del rótulo ── */
#vInicio .sw{order:9;display:inline-flex;gap:2px;background:var(--loea-card);
  border:1px solid var(--loea-line);border-radius:999px;padding:2px;}
#vInicio .sw button{width:28px;height:22px;display:grid;place-items:center;border:0;
  background:transparent;color:var(--loea-mut);border-radius:999px;padding:0;margin:0;
  transition:background .14s,color .14s;}
#vInicio .sw button:hover{color:var(--loea-ink);}
#vInicio .sw button.act{background:var(--loea-soft);color:var(--loea-acc);}
#vInicio .sw svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;}

/* ── La lista del módulo (lista-modulo.js, 5 oct 2026) ─────────────────
   La misma forma que la de Contabilidad (co/src/taskpane/menu-co.css,
   `.co-flist`): las gratis en verde y las premium con su 🔒 dorado
   (`.loea-chip-prem`, del núcleo). */
#modLista{padding:12px 16px 16px;}
#modLista .ac-ldesc{margin:0 0 4px;font-size:12.5px;color:var(--loea-mut);line-height:1.45;}
#modLista .ac-lsec{display:flex;justify-content:space-between;gap:8px;margin:14px 2px 6px;
  font:600 10px/1.2 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--loea-mut-2);}
#modLista .ac-lsec .k{color:var(--loea-brass);}
#modLista ul.ac-flist{list-style:none;margin:0;padding:0;}
#modLista .ac-flist li{display:flex;align-items:center;gap:8px;padding:8px 10px;margin:0 0 6px;background:var(--loea-card);
  border:1px solid var(--loea-line);border-radius:8px;cursor:pointer;}
#modLista .ac-flist li:hover,#modLista .ac-flist li:focus{border-color:var(--loea-acc);outline:none;}
#modLista .ac-flist .nm{flex:1;min-width:0;}
#modLista .ac-flist .nm b{display:block;font:600 12.5px var(--font-mono);color:var(--loea-ink);overflow-wrap:anywhere;}
#modLista .ac-flist li.herr .nm b{font-family:var(--font-body);}
#modLista .ac-flist .nm small{display:block;color:var(--loea-mut);font-size:11.5px;line-height:1.35;}
#modLista .ac-flist li.cerrada{background:var(--loea-bg);}
#modLista .ac-flist li.cerrada .nm b{color:var(--loea-mut);}
#modLista .ac-chip-gr,#modLista .ac-chip-abierta{font:600 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:4px 8px;white-space:nowrap;}
#modLista .ac-chip-gr{color:var(--loea-si);background:var(--loea-si-soft);}
#modLista .ac-chip-abierta{color:var(--loea-mut);border:1px dashed var(--loea-line);}
#modLista .fl{color:var(--loea-mut-2);font-size:16px;}
#modLista .ac-vit-mod{margin-top:12px;}
#modTit .loea-chip-prem{margin-left:6px;vertical-align:middle;}

/* ── La hoja de cada fórmula con la forma de Contabilidad (5 oct 2026) ──
   Sólo con `.ac-hoja`, que `pintarMarco` pone en las áreas de CON_LISTA.
   Sin ella —Economía— el marco nuevo no se ve: el fieldset no dibuja nada. */
fieldset.ac-llena{border:0;padding:0;margin:0;min-width:0;}
fieldset.ac-llena legend{display:none;}
#secFn.ac-hoja{background:var(--loea-card);border:1px solid var(--loea-line);border-radius:12px;padding:14px 14px 12px;margin-top:12px;}
#secFn.ac-hoja .titfn{margin:8px 0 2px;font:500 19px/1.2 var(--font-display);color:var(--loea-ink);}
#secFn.ac-hoja .que{border:0;background:none;padding:0;margin:4px 0 8px;font-size:12.5px;color:var(--loea-mut);line-height:1.5;}
#secFn.ac-hoja .ac-sint{margin:0 0 10px;padding:7px 10px;font:12px/1.4 var(--font-mono);background:var(--loea-bg);border:1px solid var(--loea-line);border-radius:7px;white-space:pre-wrap;word-break:break-word;}
#secFn.ac-hoja fieldset.ac-llena{border:1px solid var(--loea-line);border-radius:10px;padding:4px 12px 12px;margin:10px 0 0;background:var(--loea-bg);}
#secFn.ac-hoja fieldset.ac-llena legend{display:block;padding:0 6px;font:600 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--loea-mut-2);}
#secFn.ac-hoja fieldset.ac-llena label{color:var(--loea-ink);font-size:12.5px;}
#secFn.ac-hoja .ac-arg-desc{margin:4px 0 0;font-size:11.5px;line-height:1.4;}
#secFn.ac-hoja .rango button.usar{background:var(--loea-card);border-color:var(--loea-line);color:var(--loea-mut);}
#secFn.ac-hoja .formula{background:var(--loea-soft);border:0;font-family:var(--font-mono);}
#secFn.ac-hoja .lectura{background:var(--loea-soft);border:0;border-left:3px solid var(--loea-acc);border-radius:0 8px 8px 0;}
#secFn.ac-hoja .ac-acciones{display:flex;gap:8px;margin-top:12px;}
#secFn.ac-hoja .ac-acciones button{flex:1;margin:0;padding:9px 6px;font-size:12.5px;}
#secFn.ac-hoja .ac-chip-gr,#secFn.ac-hoja .ac-chip-abierta{font:600 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 8px;}
#secFn.ac-hoja .ac-chip-gr{color:var(--loea-si);background:var(--loea-si-soft);}
#secFn.ac-hoja .ac-chip-abierta{color:var(--loea-mut);border:1px dashed var(--loea-line);}
#secFn.ac-hoja .ac-ejemplo{margin-top:14px;}
#secFn.ac-hoja .ac-ej-rot{margin:0 0 4px;font:600 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--loea-mut-2);}
#secFn.ac-hoja .ac-ej-celda{display:flex;justify-content:space-between;gap:10px;align-items:baseline;border:1px solid var(--loea-line);border-radius:7px;padding:7px 10px;font:12px var(--font-mono);}
#secFn.ac-hoja .ac-ej-celda code{font:inherit;background:none;word-break:break-word;}
#secFn.ac-hoja .ac-ej-celda b{white-space:nowrap;}
#secFn.ac-hoja .ac-ej-pie{margin:4px 0 0;font-size:11.5px;color:var(--loea-mut);}
#secFn.ac-hoja .ac-ojo{margin-top:10px;padding:8px 10px;border-left:3px solid var(--loea-acc);background:var(--loea-bg);font-size:12px;color:var(--loea-mut);line-height:1.45;}
#secFn.ac-hoja .ac-ojo b{color:var(--loea-ink);}
#secFn.ac-hoja .ac-fuente{margin:10px 0 0;font-size:11px;color:var(--loea-mut-2);line-height:1.45;}
/* La vitrina corta de una premium (pintarCandadoFn) no trae el margen del aviso viejo. */
#fnCandado{margin-top:10px;}

/* ── La vitrina del módulo, segunda forma (5 oct 2026, maqueta-vitrina-modulo):
   el lema, dos ejemplos con su pregunta, y sin licencia los dos pasos. ── */
#modLista .ac-vit2 .ac-lema{margin:2px 0 0;font:italic 500 14px/1.35 var(--font-display);color:var(--loea-ink);}
#modLista .ac-ej{border:1px solid var(--loea-line);border-radius:9px;margin:0 0 10px;overflow:hidden;background:var(--loea-card);}
#modLista .ac-ej-cab{display:flex;gap:6px;align-items:center;padding:6px 9px;background:var(--loea-bg);border-bottom:1px solid var(--loea-line);}
#modLista .ac-ej-cab .t{font:600 9.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--loea-brass);border:1px solid var(--loea-brass-line);background:var(--loea-brass-soft);border-radius:999px;padding:3px 6px;}
#modLista .ac-ej-cab b{font:600 11.5px var(--font-mono);}
#modLista .ac-ej-q{margin:0;padding:6px 9px 2px;font-size:11.5px;color:var(--loea-mut);line-height:1.4;}
#modLista .ac-ej table{width:100%;border-collapse:collapse;font:11px/1.3 var(--font-mono);margin:4px 0 0;}
#modLista .ac-ej td{padding:4px 9px;border-top:1px solid var(--loea-line-soft);}
#modLista .ac-ej td.n{text-align:right;white-space:nowrap;}
#modLista .ac-ej td.d{color:var(--loea-brass);font-weight:600;}
#modLista .ac-ej-pie{margin:-4px 0 10px;font-size:10.5px;color:var(--loea-mut-2);}
#modLista .ac-paso{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;font-size:12.5px;}
#modLista .ac-paso .num{flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font:600 11px var(--font-mono);background:var(--loea-acc-fondo);color:var(--loea-on-acc);}
#modLista .ac-paso .num.d{background:var(--loea-brass);}
#modLista button.ac-vit-activar{display:block;width:100%;margin:0;padding:10px;border:0;border-radius:8px;cursor:pointer;background:var(--loea-acc-fondo);color:var(--loea-on-acc);font:inherit;font-weight:600;font-size:13.5px;}
#modLista button.ac-vit-activar small{display:block;font-weight:400;font-size:11px;opacity:.9;}
#modLista .ac-vit-o{margin:8px 0;text-align:center;font-size:11.5px;color:var(--loea-mut-2);}

/* Un botón cerrado tiene que VERSE cerrado (el dueño en Excel, 5 oct 2026:
   «🔒 Insertar (requiere Premium)» salía tan verde como uno que funciona).
   Como en Contabilidad: apagado y sin la mano. Las flechas de las pestañas
   tienen su propio :disabled, más arriba. */
button:disabled:not(.fltab){opacity:.5;cursor:not-allowed;filter:grayscale(.6);}