/* ══════════════════════════════════════════════════════════════════════
   armazon.css — el CROMO del panel: cabecera, chips, pie
   ══════════════════════════════════════════════════════════════════════
   Lo que hace que un área se vea de Loea Solutions y no de otro producto.
   Su hermano `loea.css` trae los COLORES y las LETRAS; esto trae la FORMA.
   Ninguno de los dos menciona una fórmula, así que los dos viven aquí
   (la regla de oro del núcleo, `../README.md`).

   Cómo se usa: `nucleo/docs/ARMAZON-DEL-PANEL.md`.

   ── DE DÓNDE SALE ─────────────────────────────────────────────────────
   Extraído el 27 ago 2026 de `ax/src/taskpane/taskpane.html`, que era donde
   vivía el panel entero por haber sido `ax` el primer complemento. Salió en
   dos tandas el mismo día:

       el CROMO      cabecera, chips, botón de tema, pie
       la ENTRADA    las tarjetas del menú de áreas

   **`ax` ya lo consume**: se le borraron esas reglas y enlaza este archivo.
   No hay dos copias, así que no hay nada que mantener sincronizado. Lo que
   sigue en `ax` es lo suyo: los formularios, los resultados y las tablas del
   área actuarial.

   ── QUÉ SE CAMBIÓ AL COPIAR, Y QUÉ NO ─────────────────────────────────
   Las DECLARACIONES son las de `ax`, carácter por carácter, con una sola
   sustitución: el vocabulario viejo del panel resuelto a los tokens de la
   familia, que en `ax` ya son alias exactos uno de otro
   (`:root{--acc:var(--loea-acc);--acc2:var(--loea-soft);…}`):

       --acc → --loea-acc      --acc2 → --loea-soft    --brass → --loea-brass
       --ink → --loea-ink      --mut  → --loea-mut     --line  → --loea-line

   Los SELECTORES sí se renombraron, y hacía falta: `ax` usa el elemento
   `header` a secas y las clases `.pie`, `.plan`, `.lic`, `.filabtn`. Un
   archivo compartido con esos selectores le pintaría de verde cualquier
   `<header>` del área — a `tl`, sin ir más lejos, su `.tl-top`. El mapa, que
   es además el guion de la migración de `ax`:

       header       → .loea-cab            .pie        → .loea-pie
       header.hero  → .loea-cab.hero       .plan       → .loea-plan
       .hdarea      → .loea-cab .hdarea    .lic        → .loea-lic
       .hdfila      → .loea-cab .hdfila    .filabtn    → .loea-filabtn
       .hdhero      → .loea-cab .hdhero    .lnkbtn     → .loea-lnkbtn
                                           .verlinea   → .loea-verlinea
                                           .acerca-txt → .loea-acerca-txt
   ══════════════════════════════════════════════════════════════════════ */

/* ── La barra de marca ────────────────────────────────────────────────
   Es lo PRIMERO del <body>. Antes de ella no va nada: ni un título, ni un
   rótulo, ni un aviso. El fondo es `--loea-acc-fondo` y no `--loea-acc`:
   el segundo es el acento de TEXTO y en oscuro se aclara, con lo que el
   blanco de encima perdería contraste. */
.loea-cab{background:var(--loea-acc-fondo);color:var(--loea-on-acc);font-weight:600;}
/* SIN `transition` sobre el fondo, y no es un olvido ────────────────────
   `transition: background .12s` estaba en el original de `ax`. Con el acento
   por menú deja de ser inofensiva: un elemento con transición sobre `background`
   DEJA DE RE-RESOLVER el `var()` y se queda con el color que tuviera cuando la
   transición se estableció. Medido el 27 ago 2026 en el visor de `tl`: la barra
   se quedaba verde de Actuarial con `data-area="tl"` puesto y el token ya
   resuelto a violeta; un elemento nuevo con la misma clase salía violeta.
   Acotarla a `background-color` no bastó: entonces se congelaba en el primero
   que le tocara. Con `transition: none` sigue los cinco menús sin fallo.

   Lo que se pierde es un fundido de 120 ms al pasar el ratón. Lo que se gana es
   que el color del menú sea de verdad el del menú. Ver `../docs/PANEL-EN-EXCEL.md` §9. */
.loea-cab{cursor:pointer;}
.loea-cab:hover{background:var(--loea-deep);}
.loea-cab{display:block;padding:0;}
.loea-cab .hdfila{display:flex;align-items:center;gap:9px;padding:12px 16px;}

/* El isotipo es el de Academia LOEA, no uno del área: el usuario instaló un
   complemento, no cuatro.

   La imagen vive AQUÍ, en `nucleo/panel/`, y no en `ax/assets/` como en el
   original. Copiarla fue el precio de no dejar el armazón de toda la familia
   colgando de un archivo de un área: el día que `ax` se archive o se mueva
   —a `ex/` le pasó el 23 ago 2026— todas las áreas se quedarían sin isotipo.
   `ax` conserva su copia en `assets/` porque su manifest la pide para la
   cinta, que es otro trabajo; la duplicidad se suelta cuando se depure.

   La versión de DESARROLLO lleva el isotipo ámbar, igual que la cinta. La
   barra de marca es justo donde uno mira para saber en qué versión está, y
   con el mismo icono no hay manera de distinguirlas. La clase la pone
   `armazon.js` mirando el hostname; el CSS no puede saberlo solo. */
.loea-cab .marca{width:22px;height:22px;border-radius:6px;background:url("marca-128.png") center/contain no-repeat;display:inline-block;flex:none;}
.loea-cab.dev .marca{background-image:url("marca-dev-128.png");}
.loea-cab .app{flex:1;}
.loea-cab .sym{font-style:italic;font-family:Georgia,serif;font-size:18px;}
/* El nombre del área va JUNTO a «Loea Solutions», no en su lugar. */
.loea-cab .hdarea{font-weight:400;font-size:12.5px;opacity:.85;}
.loea-cab .v{font-weight:400;font-size:11px;opacity:.8;}

.loea-cab .chip{width:auto;margin:0;padding:2px 10px;font-size:11.5px;font-weight:600;color:var(--loea-on-acc);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);border-radius:999px;cursor:pointer;}
.loea-cab .chip:hover{background:rgba(255,255,255,.28);}

/* ── El botón de tema ─────────────────────────────────────────────────
   Va en la cabecera para tenerlo a mano desde cualquier pantalla. Hasta que
   se toca, el panel sigue el tema de Excel; en cuanto se pulsa, manda la
   elección del usuario y se guarda. */
.loea-cab .icono{width:26px;height:26px;padding:0;display:grid;place-items:center;
  border-radius:999px;flex:none;}
.loea-cab .icono svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* ── La cabecera como portada (sólo el menú de áreas) ─────────────────
   En la entrada la cabecera se vuelve portada. No es botón de regreso: ya
   estás en el menú, así que tampoco cambia de color al pasar por encima.

   El degradado va en `background-image` y NO en la abreviatura: la
   abreviatura pone `background-color` en transparente, y al salir de la
   portada la cabecera parpadeaba 120 ms en blanco (la transición de
   `.loea-cab`) antes de volver al verde. */
.loea-cab.hero{cursor:default;position:relative;overflow:hidden;padding-bottom:19px;
  background-color:var(--loea-deep);background-image:radial-gradient(125% 135% at 10% -20%,var(--loea-acc-vivo) 0%,var(--loea-acc-fondo) 40%,var(--loea-deep) 100%);}
.loea-cab.hero:hover{background-color:var(--loea-deep);background-image:radial-gradient(125% 135% at 10% -20%,var(--loea-acc-vivo) 0%,var(--loea-acc-fondo) 40%,var(--loea-deep) 100%);}
.loea-cab.hero::after{content:"";position:absolute;right:-50px;top:-56px;width:160px;height:160px;
  border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;}
.loea-cab.hero .hdfila,.loea-cab.hero .hdhero{position:relative;}
/* El nombre del área sobra aquí: es justo lo que vas a elegir. */
.loea-cab.hero .hdarea{display:none;}
.loea-cab.hero .app{font:500 11.5px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;opacity:.88;}
.loea-cab .hdhero{display:none;}
.loea-cab.hero .hdhero{display:block;padding:0 16px;}
.loea-cab .hdhero h2{margin:14px 0 5px;font:500 22px/1.18 var(--font-display);letter-spacing:-.02em;}
.loea-cab .hdhero h2 em{font-style:italic;opacity:.66;font-weight:500;}
.loea-cab .hdhero p{margin:0;font-size:12.5px;opacity:.82;line-height:1.55;max-width:54ch;}

/* La banda va de borde a borde; sólo el CONTENIDO se centra. Si se centrara
   también la banda, la cabecera se vería como un recuadro flotando. */
.loea-cab .hdfila,.loea-cab .hdhero{
  max-width:var(--loea-ancho);margin-left:auto;margin-right:auto;}

/* ── El pie ───────────────────────────────────────────────────────────
   La licencia va ABAJO. Lo primero del panel tiene que ser lo que el usuario
   vino a hacer; el estado de la licencia es una consulta, no un anuncio. La
   excepción es el candado duro (LICENCIAS.md §12.6), que ocupa la pantalla y
   no es esta caja — y su primo del menú, la puerta (§12.9), más abajo. */
.loea-pie{background:var(--loea-card);border:1px solid var(--loea-line);border-radius:10px;padding:12px 14px;margin-top:16px;}
.loea-plan{margin:0;font-size:12px;color:var(--loea-mut);line-height:1.55;}
.loea-plan b{color:var(--loea-ink);}
.loea-plan a{color:var(--loea-acc);font-weight:600;}
/* Una línea de plan VACÍA no deja hueco (18 sep 2026): en un área sin paquete
   —Enseñanza— se calla cuando no hay nada que contar (`caja-licencia.js`), y
   la caja de debajo tiene que subir a su sitio. En las demás nunca está vacía. */
.loea-plan:empty{display:none;}
.loea-plan:empty + .loea-lic{margin-top:0;}
/* Los botones de simulación: sólo en localhost, y AQUÍ, no al principio. */
.loea-plan .dev{display:block;margin-top:6px;color:var(--loea-brass);}
.loea-plan .dev button{width:auto;margin:0 0 0 6px;padding:2px 10px;font-size:11px;background:var(--loea-card);color:var(--loea-brass);border:1px solid var(--loea-brass-line);}

.loea-lic{margin-top:8px;font-size:11.5px;color:var(--loea-mut);}
.loea-lic .fila{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px;}
.loea-lic input{flex:1;min-width:130px;margin:0;padding:6px 8px;font-size:12.5px;font-family:Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--loea-line);border-radius:6px;}
/* Enfocado, con el color de la familia y no con el marco negro que pone Excel
   (18 sep 2026, elegido en `../docs/referencia/_licencia-vacia-menu.html`).
   Es la regla del buscador, tal cual: los dos campos se ven iguales. */
.loea-lic input:focus{outline:0;border-color:var(--loea-acc);box-shadow:0 0 0 3px rgba(31,85,96,.13);}
.loea-lic button{width:auto;margin:0;padding:6px 12px;font-size:11.5px;}
.loea-lic button.sec{background:var(--loea-card);color:var(--loea-mut);border:1px solid var(--loea-line);font-weight:500;}
.loea-lic .fila a{display:inline-flex;align-items:center;padding:6px 12px;font-size:11.5px;font-weight:600;color:var(--loea-acc);background:var(--loea-card);border:1px solid var(--loea-line);border-radius:9px;text-decoration:none;}
.loea-lic .fila a:hover{border-color:var(--loea-acc);background:var(--loea-soft);}
/* El aviso de privacidad, bajo el campo del código (29 ago 2026). Se lee como
   nota al pie por el TAMAÑO y por la línea que la separa, no por el color: a
   10.5 px el gris de tercer nivel (`--loea-mut-2`) se queda en 4.2:1 de
   contraste sobre blanco, y un aviso legal que cuesta leer no es un aviso.
   Va en `--loea-mut`, el mismo gris del resto de la caja. */
.loea-lic .aviso{margin:9px 0 0;padding-top:8px;border-top:1px solid var(--loea-line-soft);
  font-size:10.5px;line-height:1.55;color:var(--loea-mut);}
.loea-lic .aviso a{color:var(--loea-acc);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap;}
.loea-lic .msg{margin-top:6px;font-size:11.5px;}
.loea-lic .msg.mal{color:var(--loea-mal);}
.loea-lic .msg.bien{color:var(--loea-acc);font-weight:600;}
.loea-lic .eqs{margin-top:6px;padding-left:16px;}
.loea-lic .eqs li{margin:2px 0;}
.loea-lic .quien{color:var(--loea-ink);}
/* Una caja sin nada que decir no deja hueco (18 sep 2026): con el menú de
   materias, en cada materia sólo queda «Actualizar mi plan», y a quien ya es
   premium no le queda nada. */
.loea-lic:empty{display:none;}
/* El botón que es una liga: «Cerrar sesión en este equipo», en la cuenta del
   menú. Declarado entero, por el `button{width:100%;…}` de `menu-ac.css`. */
.loea-lic button.enlace{width:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;
  font-size:11.5px;font-weight:600;color:var(--loea-acc);cursor:pointer;}
.loea-lic button.enlace:hover{text-decoration:underline;text-underline-offset:3px;}
/* Lo de desarrollo, en latón, como en la línea de plan. */
.loea-lic .dev{display:block;margin:8px 0 0;font-size:11px;color:var(--loea-brass);}
.loea-lic .dev button{width:auto;margin:0 0 0 4px;padding:2px 10px;font-size:11px;background:var(--loea-card);
  color:var(--loea-brass);border:1px solid var(--loea-brass-line);}

/* ══════════════════════════════════════════════════════════════════════
   LA PUERTA DEL MENÚ DE MATERIAS (18 sep 2026, encargo 12)
   ══════════════════════════════════════════════════════════════════════
   Sin activar este Excel, el menú es la puerta: se pega el código aquí y las
   tarjetas de debajo se ven apagadas (`.card.cerrada`). Lo pinta
   `caja-licencia.js` → `htmlPuerta`. Es la A de
   `../docs/referencia/_activar-desde-menu.html`, con sus medidas.

   Un `div` y no un `section`: `menu-ac.css` trae `section{border-top:1px
   dashed…}` sin prefijo, y le pintaba una raya encima. */
.loea-puerta{position:relative;overflow:hidden;margin-top:14px;padding:18px 16px 16px;background:var(--loea-card);
  border:1px solid var(--loea-line);border-radius:var(--loea-radio);box-shadow:var(--loea-sombra-2);}
.loea-puerta::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--loea-acc-vivo),var(--loea-acc-fondo));}
.loea-puerta .tit{display:flex;align-items:center;gap:10px;font:500 18px/1.2 var(--font-display);
  letter-spacing:-.015em;color:var(--loea-ink);}
.loea-puerta .llave{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;
  background:var(--loea-soft);color:var(--loea-acc);}
.loea-puerta .llave svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.loea-puerta .txt{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--loea-mut);}
.loea-puerta .pasos{margin:10px 0 0;padding:0;list-style:none;counter-reset:paso;font-size:12px;color:var(--loea-ink);}
.loea-puerta .pasos li{position:relative;margin:6px 0;padding-left:26px;line-height:1.45;counter-increment:paso;}
.loea-puerta .pasos li::before{content:counter(paso);position:absolute;left:0;top:0;display:grid;place-items:center;
  width:18px;height:18px;border-radius:50%;background:var(--loea-acc-fondo);color:var(--loea-on-acc);
  font:700 10.5px var(--font-body);}
/* La línea de quien trae un pase de cortesía: no tiene cuenta, así que los
   dos pasos no son para él. Aparte y más discreta: es el caso raro. */
.loea-puerta .pase{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--loea-mut);}
/* La academia cerró la sesión (18 sep 2026): por qué vuelve a pedir el código.
   En latón, como un aviso y no como un error: no hizo nada mal. */
.loea-puerta .cerrada{margin:12px 0 0;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.45;
  color:var(--loea-ink);background:var(--loea-brass-soft);border:1px solid var(--loea-brass-line);}
.loea-puerta .loea-lic{margin-top:12px;}
.loea-puerta .loea-lic input{padding:9px 10px;font-size:15px;}
.loea-puerta .loea-lic .fila > button{padding:9px 16px;font-size:12.5px;}
/* Tocaron una materia con la puerta cerrada: la puerta se hace notar. */
@keyframes loea-llama{0%,100%{box-shadow:var(--loea-sombra-2);}35%{box-shadow:0 0 0 3px var(--loea-acc-vivo);}}
.loea-puerta.llamando{animation:loea-llama .9s ease-out;}
/* Recién activado: el «¡Listo!» arriba, donde estaba la puerta. */
.loea-listo{margin-top:12px;padding:9px 12px;border-radius:10px;background:var(--loea-soft);
  font:600 12px var(--font-body);color:var(--loea-acc);}
/* Activado con la licencia vacía: el aviso arriba del menú, con los DOS
   caminos —«Ya compré» y cerrar sesión para pegar otro código—, cada uno con
   su pregunta encima de su botón. Las tarjetas de debajo van apagadas. Es la B
   de `../docs/referencia/_licencia-vacia-menu.html` (18 sep 2026). */
.loea-avisomenu{margin-top:14px;padding:11px 14px 12px;border:1px solid var(--loea-line);border-radius:12px;background:var(--loea-soft);}
.loea-avisomenu .loea-lic{margin-top:0;}
.loea-avisomenu .quien{font-weight:600;font-size:12.5px;}
.loea-avisomenu .txt{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--loea-mut);}
.loea-avisomenu .camino{margin-top:10px;padding-top:9px;border-top:1px solid var(--loea-line-soft);}
.loea-avisomenu .camino p{margin:0;font-size:11.5px;line-height:1.45;color:var(--loea-ink);}
.loea-avisomenu .camino .fila{margin-top:6px;}
/* «¿Crees que es un error? Escríbenos…»: para los casos raros, al final y chico. */
.loea-avisomenu .duda{margin:10px 0 0;font-size:11px;line-height:1.45;color:var(--loea-mut);}
.loea-avisomenu .duda a{color:var(--loea-acc);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* Tocaron una tarjeta apagada: el aviso se hace notar, como la puerta. */
.loea-avisomenu.llamando{animation:loea-llama .9s ease-out;}
/* La cuenta, en el pie del menú: sin caja, antes del texto de «Acerca». */
.loea-cuenta{margin:0 0 12px;}
.loea-cuenta .fila{margin-top:4px;}
/* La segunda frase de la cabecera del menú, según la puerta (`ventana.js`). */
.loea-cab .si-cerrada{display:none;}
[data-puerta="cerrada"] .loea-cab .si-abierta{display:none;}
[data-puerta="cerrada"] .loea-cab .si-cerrada{display:inline;}
/* Con la licencia vacía no hay con cuál trabajar, y ya activó: ni una ni otra. */
[data-puerta="vacia"] .loea-cab .si-abierta{display:none;}

.loea-filabtn{display:flex;gap:8px;margin-top:12px;}
.loea-filabtn .loea-lnkbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;width:auto;margin:0;padding:9px 10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--loea-acc);background:var(--loea-card);border:1px solid var(--loea-line);border-radius:9px;text-decoration:none;cursor:pointer;box-sizing:border-box;}
.loea-filabtn .loea-lnkbtn:hover{border-color:var(--loea-acc);background:var(--loea-soft);}
.loea-acerca-txt{margin:0;font-size:12px;color:var(--loea-mut);line-height:1.55;}
.loea-acerca-txt b{color:var(--loea-ink);}
.loea-verlinea{margin:10px 0 0;font-size:11px;color:var(--loea-mut);text-align:center;}

/* ══════════════════════════════════════════════════════════════════════
   EL MENÚ DE ÁREAS — la pantalla de entrada
   ══════════════════════════════════════════════════════════════════════
   Una tarjeta por menú. Lo dibuja `menu-areas.js`.

   Extraído de `ax/src/taskpane/taskpane.html` el 27 ago 2026, líneas 186-212
   del `<style>`. Las declaraciones son las de `ax` carácter por carácter; lo
   único que cambió es el selector: `#areaCards` era el id de un elemento del
   HTML de `ax`, y un archivo de la familia no puede colgar de eso. Ahora es
   la clase `.loea-areas`, que `montarMenuDeAreas` pone en el contenedor.
   ══════════════════════════════════════════════════════════════════════ */
.loea-areas .card{display:flex;gap:13px;align-items:flex-start;position:relative;overflow:hidden;
  background:var(--loea-card);border:1px solid var(--loea-line);border-radius:var(--loea-radio);
  padding:14px;margin:12px 0 0;box-shadow:var(--loea-sombra-1);
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,border-color .16s;}
.loea-areas .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;opacity:0;
  background:linear-gradient(var(--loea-acc-vivo),var(--loea-acc-fondo));transition:opacity .16s;}
.loea-areas .card.clicable:hover{transform:translateY(-2px);border-color:transparent;box-shadow:var(--loea-sombra-2);}
.loea-areas .card.clicable:hover::before{opacity:1;}
.loea-areas .sym{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  font:500 18px var(--font-display);font-style:normal;color:#fff;
  background:linear-gradient(140deg,var(--loea-acc-vivo),var(--loea-acc-fondo));box-shadow:0 3px 11px rgba(31,85,96,.26);}
.loea-areas .cuerpo{flex:1;min-width:0;}
.loea-areas b{display:block;font:500 16px/1.2 var(--font-display);letter-spacing:-.015em;color:var(--loea-ink);}
.loea-areas p{margin:4px 0 0;font-size:12px;color:var(--loea-mut);line-height:1.5;}
.loea-areas .barrita{height:4px;border-radius:99px;background:var(--loea-line);margin-top:11px;overflow:hidden;}
.loea-areas .barrita i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--loea-acc-vivo),var(--loea-acc-fondo));}
.loea-areas .cuenta{margin:7px 0 0;font:500 11px var(--font-mono);color:var(--loea-mut);}
.loea-areas .cuenta b{display:inline;font:500 11px var(--font-mono);color:var(--loea-ink);}
.loea-areas .card.prox{opacity:.6;}
.loea-areas .card.prox .sym{background:var(--loea-line);color:var(--loea-mut);box-shadow:none;}
/* La etiqueta de PRÓXIMAMENTE va en latón, como el candado. La del plan que sí
   tienes va en el acento del menú: es información, no un candado. */
.loea-areas .tag{display:inline-block;margin:9px 0 0;font:700 10px var(--font-body);letter-spacing:.09em;
  text-transform:uppercase;border-radius:999px;padding:3px 10px;
  background:var(--loea-brass-soft);color:var(--loea-brass);border:1px solid var(--loea-brass-line);}
.loea-areas .tag.plan{background:var(--loea-soft);color:var(--loea-acc);border-color:transparent;}
/* La materia que la licencia no trae (18 sep 2026, encargo 12): un hueco
   punteado, no un candado de compra — se puede abrir a mirar. */
.loea-areas .tag.fuera{background:transparent;color:var(--loea-mut);border:1px dashed var(--loea-line);}
/* Lo que anuncia la academia (13 oct 2026, `estado-areas.js`): la nota del
   dueño debajo de «Próximamente» —«Llega en noviembre»—, y «Vista previa» en
   la que se abre sólo porque la licencia la trae (staff, cortesía). */
.loea-areas .nota-prox{display:block;margin:5px 0 0;font:600 11.5px var(--font-body);color:var(--loea-brass);}
/* «La academia no responde» (16 oct 2026, `aviso-academia.js`): una franja
   arriba de todas las vistas, en latón como los avisos de la familia. Se
   acota por su clase: no le pega a nadie más. */
.loea-aviso-academia{display:flex;gap:9px;align-items:flex-start;box-sizing:border-box;width:calc(100% - 32px);max-width:620px;margin:12px auto 0;padding:10px 13px;
  border-radius:10px;font:500 12.5px/1.5 var(--font-body);color:var(--loea-ink);
  background:var(--loea-brass-soft);border:1px solid var(--loea-brass-line);}
.loea-aviso-academia[hidden]{display:none;}
.loea-aviso-academia .ico{color:var(--loea-brass);font-weight:700;}
.loea-aviso-academia b{font-weight:700;}
.loea-areas .tag.previa{margin-left:6px;background:transparent;color:var(--loea-brass);border:1px dashed var(--loea-brass-line);}
/* Detrás de la puerta: se ven, no abren. El rótulo dice por qué. Es un `div`
   y no una `<p>`: dentro de `.loea-areas` las `<p>` son de las tarjetas. */
.loea-areas .rot-puerta{margin:20px 0 -4px;font:600 10px var(--font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--loea-mut);}
.loea-areas .card.cerrada{opacity:.5;box-shadow:none;cursor:not-allowed;}
.loea-areas .card.cerrada .sym{background:var(--loea-line);color:var(--loea-mut);box-shadow:none;}

/* ── Elegir qué materias se ven (16 sep 2026) ─────────────────────────
   Lo dibuja `menu-areas.js` (`dibujarMenu`): el enlace «Elegir materias», el
   modo con un interruptor por tarjeta y el renglón de las ocultas. Se eligió
   entre tres formas mirándolas a tamaño real, y ésta es la B de
   `../docs/referencia/_ocultar-materias.html`.

   Cada botón declara ancho, margen, fondo y borde, y no es manía:
   `ax/src/taskpane/menu-ac.css` trae `button{width:100%;margin-top:14px;…}`
   sin prefijo, y sin esto el enlace saldría como un botón verde de lado a
   lado. */
.loea-areas .elegir{display:flex;justify-content:flex-end;margin:10px 0 -4px;}
.loea-areas .enlace{display:inline-flex;align-items:center;gap:6px;width:auto;margin:0;padding:3px 0;
  border:0;border-radius:0;background:transparent;font:600 12px var(--font-body);color:var(--loea-acc);
  cursor:pointer;white-space:nowrap;}
.loea-areas .enlace:hover{background:transparent;text-decoration:underline;text-underline-offset:3px;}
.loea-areas .enlace svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
/* Punteado: es un hueco donde estaban, no una tarjeta más. */
.loea-areas .ocultas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;
  padding:9px 13px;border:1px dashed var(--loea-line);border-radius:12px;font-size:12px;color:var(--loea-mut);}
.loea-areas .ocultas span{min-width:0;}
.loea-areas .aviso-elegir{display:flex;align-items:center;gap:12px;margin-top:12px;padding:11px 13px;
  border-radius:12px;background:var(--loea-soft);font-size:11.5px;line-height:1.45;color:var(--loea-mut);}
.loea-areas .aviso-elegir strong{display:block;margin-bottom:1px;font:600 13px var(--font-body);color:var(--loea-ink);}
.loea-areas .terminar{flex:none;width:auto;margin:0;padding:7px 16px;border:0;border-radius:9px;
  background:var(--loea-acc-fondo);color:var(--loea-on-acc);font:600 12.5px var(--font-body);cursor:pointer;}
.loea-areas .terminar.ancho{display:block;width:100%;margin-top:14px;padding:9px;}
/* Eligiendo, la tarjeta entera es el interruptor: no entra, no se levanta. */
.loea-areas.eligiendo .card{cursor:pointer;}
.loea-areas.eligiendo .card:not(.fija):hover{border-color:var(--loea-acc);}
/* El hueco del interruptor va en TODO el cuerpo, no sólo en el título. En la
   maqueta bastaba con el título; con `menu-ac.css` encima, el título es más
   bajo y el interruptor pisaba la primera línea de la descripción. Visto en
   `../docs/referencia/_menu-banco.html` el 16 sep 2026. Que el texto se parta
   un renglón antes sólo pasa mientras se elige. */
.loea-areas.eligiendo .cuerpo{padding-right:46px;}
.loea-areas .card.apagada{opacity:.45;box-shadow:none;}
.loea-areas .card.apagada .sym{background:var(--loea-line);color:var(--loea-mut);box-shadow:none;}
.loea-areas .card.fija{cursor:not-allowed;}
/* La caja se declara ENTERA —margen, relleno, borde, medida— para que ninguna
   regla de un área la cambie: `.prox span` de `menu-ac.css` ya lo hizo una vez. */
.loea-areas .interruptor{position:absolute;top:16px;right:14px;display:block;box-sizing:border-box;
  width:36px;height:20px;margin:0;padding:0;border:0;border-radius:99px;
  background:var(--loea-acc-fondo);transition:background .15s;}
.loea-areas .interruptor::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translateX(16px);transition:transform .15s;}
.loea-areas .card.apagada .interruptor{background:var(--loea-line);}
.loea-areas .card.apagada .interruptor::after{transform:none;}
.loea-areas .card.fija .interruptor{opacity:.45;}

/* ── El chip del plan ─────────────────────────────────────────────────
   «Premium», «Gratis» o «Sin licencia» al principio de la línea de plan. Lo
   pinta `caja-licencia.js`. Extraído de `ax` el 27 ago 2026 (`.chipplan`).

   Gratis va en LATÓN y premium en el acento del menú, no al revés: el latón
   es el color del candado en todo el complemento, y el plan gratis es
   justamente el que tiene candados. Sin licencia va en rojo porque no es un
   plan, es una puerta cerrada. */
.loea-chipplan{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:2px 10px;margin-right:6px;vertical-align:1px;}
.loea-chipplan.premium{background:var(--loea-soft);color:var(--loea-acc);border:1px solid var(--loea-acc);}
.loea-chipplan.gratis{background:var(--loea-brass-soft);color:var(--loea-brass);border:1px solid var(--loea-brass-line);}
.loea-chipplan.sin{background:var(--loea-mal-soft);color:var(--loea-mal);border:1px solid var(--loea-mal-line);}

/* ══════════════════════════════════════════════════════════════════════
   EL BUSCADOR
   ══════════════════════════════════════════════════════════════════════
   La caja fija de arriba, su pista de ejemplos y los rótulos de los grupos de
   resultados. Lo dibuja `buscador.js`.

   Extraído de `ax/src/taskpane/taskpane.html` el 27 ago 2026. Las
   declaraciones son las de `ax`; el selector pasa de `#vInicio` —un id de su
   HTML— a la clase `.loea-buscador`, porque un archivo de la familia no puede
   colgar de un id de un menú.

   Lo que NO se movió: el dibujo de cada RESULTADO (`#buscaRes .fn`, `.mod`).
   Ese HTML lo compone cada menú con sus símbolos y sus candados, así que su
   CSS es suyo. El núcleo pone la caja y los rótulos; el menú, las filas.
   ══════════════════════════════════════════════════════════════════════ */
.loea-buscador{position:relative;margin-top:2px;} /* margin-top solo: los
  laterales los pone `auto` la regla del tope de ancho, y `margin:2px 0 0`
  los pisaba dejando la caja pegada a la izquierda. */
.loea-buscador input{width:100%;box-sizing:border-box;padding:13px 38px;
  border:1px solid var(--loea-line);border-radius:12px;font:inherit;font-size:13.5px;
  background:var(--loea-card);color:var(--loea-ink);box-shadow:var(--loea-sombra-1);
  transition:border-color .15s,box-shadow .15s;}
.loea-buscador input:focus{outline:0;border-color:var(--loea-acc);box-shadow:0 0 0 3px rgba(31,85,96,.13);}
.loea-buscador input::placeholder{color:var(--loea-mut);}
.loea-buscador .lupa{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--loea-mut);font-size:14px;pointer-events:none;}
.loea-buscador .limpiar{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:auto;margin:0;padding:4px 9px;background:transparent;color:var(--loea-mut);
  border:0;font-size:18px;line-height:1;border-radius:8px;}
.loea-buscador .limpiar:hover{color:var(--loea-ink);background:var(--loea-soft);}
.loea-pista{margin-top:9px;font-size:11.5px;color:var(--loea-mut);}
.loea-pista b{color:var(--loea-acc);font-weight:600;cursor:pointer;font-family:var(--font-mono);}
.loea-pista b:hover{text-decoration:underline;}

/* ── Rótulo de cada grupo de resultados ──────────────────────────────
   OJO: `margin-top` sola. Un `margin:20px 0 0` pone los laterales en 0 y pisa
   los `auto` del tope de ancho, y el rótulo se va a la izquierda mientras todo
   lo demás queda centrado. Ya pasó con la caja de búsqueda. */
.loea-res .rot{font:600 10.5px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--loea-mut);margin-top:20px;display:flex;align-items:center;gap:10px;}
.loea-res .rot::after{content:"";flex:1;height:1px;background:var(--loea-line);}
.loea-res .rot em{font-style:normal;letter-spacing:0;text-transform:none;font-size:11.5px;
  color:var(--loea-acc);font-weight:600;order:9;}
.loea-res mark{background:var(--loea-soft);color:inherit;border-radius:3px;padding:0 1px;}
.loea-res .nada{padding:22px 0;font-size:12.5px;color:var(--loea-mut);text-align:center;line-height:1.6;}
.loea-res .nada b{color:var(--loea-acc);cursor:pointer;font-family:var(--font-mono);font-weight:600;}

/* ══════════════════════════════════════════════════════════════════════
   LA PÁGINA DEL PANEL — y por qué estas dos reglas están AQUÍ
   ══════════════════════════════════════════════════════════════════════
   El carrusel de abajo sangra `margin:0 -16px` para que sus tarjetas lleguen
   a los bordes del panel. Eso NO es autosuficiente: da por hecho que alguien
   más arriba pone esos 16 px, y que el <body> no trae el margen de 8 px que
   el navegador da por omisión.

   Las dos reglas existían desde siempre... dentro de `ax/src/taskpane/menu-ac.css`
   —`body{margin:0}` y `main{padding:4px 16px 20px}`—. Cuando el carrusel se
   mudó aquí el 31 ago 2026, ellas se quedaron allá. `ax` siguió bien porque
   carga su propio CSS; `en` no, porque su página (`ensenanza.html`) sólo carga
   loea + armazon + paletas + menu-en.

   El síntoma, visto en Excel el 2 sep 2026: el carril medía 356 px en un panel
   de 340 —se pasaba justo los 8 px del margen del navegador—, salía barra de
   scroll HORIZONTAL en toda la página, y la segunda tarjeta quedaba fuera de
   alcance porque lo que se movía era la página y no el carrusel.

   Los valores son los que `ax` ya computaba (`main{4px…}` + `main.mod{padding-top:0}`
   = 0/16/20), así que para Actuarial esto no cambia un píxel. Y toda otra
   página que carga este archivo ya declara su propio `body{margin:0}`.
   ══════════════════════════════════════════════════════════════════════ */
/* ⚑ Y EL FONDO Y LA TINTA, QUE FALTABAN — EL TEMA OSCURO ESTABA A MEDIAS
   (7 sep 2026). `body` no declaraba ni `background` ni `color`, así que la
   página era TRANSPARENTE: se veía el blanco del panel de Excel por debajo.
   En claro no se nota —el blanco del anfitrión y el `#F5F6F3` nuestro se
   parecen, y la tinta oscura se lee igual—. En oscuro se rompe entero: las
   cajas se ponen oscuras porque usan `--loea-card`, pero **lo que va suelto
   sobre el fondo** —el título de la parada, las notas, el pie de versión— se
   pinta con `--loea-ink`, que en oscuro es casi blanco. Blanco sobre blanco.

   Lo vio él en Excel: *«el tono oscuro se ve mal feo»*, y con la captura se
   entiende de una: cajas negras flotando en una página blanca.

   ══ POR QUÉ NADIE LO VIO ANTES, QUE ES LO QUE HAY QUE RECORDAR ══════
   **Todas las maquetas se pintan el fondo ellas mismas.** Las seis de `en`,
   las dos de `ax` y el banco de pruebas llevan su propio
   `body{background:var(--loea-bg);color:var(--loea-ink)}` en su `<style>`.
   O sea que el oscuro se revisaba siempre en páginas que **tapaban el fallo**,
   y nunca en la única que lo tenía. `--loea-bg` no lo usaba **nadie** en este
   archivo: el token existía y no se gastaba.

   Es el mismo patrón que el `body{margin:0}` de aquí arriba y que el carrusel
   sin su JS: la apariencia se hereda, el mecanismo se queda atrás.        */
body{margin:0;background:var(--loea-bg);color:var(--loea-ink);}
#contenidoMenu{padding:0 16px 20px;}

/* ── EL SELECTOR DE VISTA · `.sw` — tres iconos a la derecha del rótulo ──
   Sube de `ax/src/taskpane/menu-ac.css` el 2 sep 2026, por lo mismo que el JS
   de las tres vistas: allá colgaba de `#vInicio`, que es un id de Actuarial,
   así que ninguna otra área podía usarlo aunque el carrusel ya fuera de todos.
   `ax` conserva su bloque —gana por especificidad y le añade el `order:9` que
   necesita su cabecera—, de modo que esto no le cambia nada. */
.sw{display:inline-flex;gap:2px;background:var(--loea-card);
  border:1px solid var(--loea-line);border-radius:999px;padding:2px;}
.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;cursor:pointer;}
.sw button:hover{color:var(--loea-ink);}
.sw button.act{background:var(--loea-soft);color:var(--loea-acc);}
.sw svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;}

/* ══════════════════════════════════════════════════════════════════════
   EL CARRUSEL DE MÓDULOS · `.loea-carrusel`
   ══════════════════════════════════════════════════════════════════════
   Las tres vistas de la lista de módulos: carrusel con tarjetas que se
   enganchan, tarjetas en rejilla, e índice de una línea por módulo.

   Vivía en `ax/src/taskpane/menu-ac.css` colgando de `#cards`, un id del
   HTML — que además está aquí, en `panel/taskpane.html`. Se mudó el 31 ago
   2026 porque `EN · Enseñanza Excel` decidió que su lista de cursos NO lleva
   tarjetas propias: reusa esto, porque la equivalencia es exacta —un curso es
   un módulo y una parada es una función— y así hereda las tres vistas sin
   escribirlas. De CSS propio Enseñanza aporta dos reglas, la barra de avance,
   en vez de veintidós.

   Un área no puede colgar de un id de otra, así que la única alternativa era
   duplicarlo, y dos copias del mismo carrusel se separan solas. Es el mismo
   caso de `#areaCards` → `.loea-areas` del 27 ago, y se hizo igual: las
   declaraciones se copiaron carácter por carácter y sólo cambió el selector.

   **Lo que NO se movió: qué dice cada tarjeta.** `ax` pone «10 funciones» y
   `en` pondrá «12 clases · 24 ejercicios»; eso lo compone cada menú, como
   pasa con las filas del buscador.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Vista CARRUSEL: la tarjeta del centro manda sobre lo de abajo ── */
.loea-carrusel .medidor{display:flex;align-items:center;gap:11px;padding:12px 0 0;}
.loea-carrusel .medidor .cnt{font:500 11px var(--font-mono);color:var(--loea-mut);letter-spacing:.06em;}
.loea-carrusel .medidor .via{flex:1;height:2px;background:var(--loea-line);border-radius:2px;overflow:hidden;}
.loea-carrusel .medidor .via i{display:block;height:100%;border-radius:2px;transform-origin:left;
  background:linear-gradient(90deg,var(--loea-acc-vivo),var(--loea-acc-fondo));
  transition:transform .28s cubic-bezier(.22,.9,.3,1);}
.loea-carrusel .carril{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:14px 16px 18px;margin:0 -16px;scrollbar-width:none;}
.loea-carrusel .carril::-webkit-scrollbar{display:none;}
/* El espaciador tiene que valer la MITAD de lo que sobra a los lados de una
   tarjeta, o la primera y la ultima no pueden llegar al centro: con
   tarjetas al 74% hacen falta 13%, y con 6% el carrusel se quedaba
   clavado en la penultima (el modulo 09 no dejaba pasar al 10).
   El 13% plano es el respaldo para navegadores sin min(). */
/* El espaciador vale la MITAD de lo que sobra al lado de una tarjeta: sin
   eso, ni la primera ni la ultima pueden quedar centradas y el carrusel se
   queda clavado en la penultima. Medido el 24 ago 2026: con 6% la primera
   nacia 74 px descentrada. El 13% plano es el respaldo si no hay min(). */
.loea-carrusel .carril .esp{flex:0 0 13%;flex-basis:calc(50% - min(37%, 170px));}
/* El de la DERECHA, mas ancho: Chromium no cuenta el padding final del
   contenedor en scrollWidth, asi que al carril le faltaban ~32 px para que
   la ultima tarjeta llegara al centro. Con el iman obligatorio eso la
   devolvia y el carrusel se quedaba clavado en el penultimo modulo.
   Medido el 24 ago 2026: tope 3532 px contra 3552 necesarios. */
/* El de la derecha, un poco mas: Chromium no cuenta el padding final del
   contenedor en scrollWidth. */
.loea-carrusel .carril .esp:last-child{flex-basis:calc(50% - min(37%, 170px) + 40px);}
.loea-carrusel .tar{scroll-snap-align:center;flex:0 0 74%;max-width:340px;position:relative;
  background:var(--loea-card);border:1px solid var(--loea-line);border-radius:16px;padding:16px;
  min-height:158px;display:flex;flex-direction:column;cursor:pointer;transform:scale(.9);opacity:.5;
  transition:transform .28s cubic-bezier(.22,.9,.3,1),opacity .28s,box-shadow .28s,border-color .28s;}
.loea-carrusel .tar.act{transform:scale(1);opacity:1;border-color:transparent;box-shadow:var(--loea-sombra-2);}
.loea-carrusel .tar .num{font:500 10.5px var(--font-mono);letter-spacing:.12em;color:var(--loea-mut);}
.loea-carrusel .tar .sym{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  margin:13px 0 auto;font:500 19px var(--font-display);font-style:normal;
  background:var(--loea-soft);color:var(--loea-acc);transition:background .28s,color .28s,box-shadow .28s;}
.loea-carrusel .tar.act .sym{background:linear-gradient(140deg,var(--loea-acc-vivo),var(--loea-acc-fondo));
  color:#fff;box-shadow:0 4px 12px rgba(31,85,96,.3);}
.loea-carrusel .tar b{font:500 16px/1.2 var(--font-display);letter-spacing:-.015em;margin-top:12px;color:var(--loea-ink);}
.loea-carrusel .tar small{display:block;margin-top:5px;font:500 10.5px var(--font-mono);color:var(--loea-mut);}
.loea-carrusel .tar .cand{position:absolute;right:15px;top:14px;font-size:12px;color:var(--loea-brass);z-index:3;}
/* ── La tarjeta CON banner (24 ago 2026) ──────────────────────────────
   La ilustración va dibujada en SVG a 340×104 px, la medida exacta de la
   franja: no se recorta nada. Vive en ilustraciones.js, que documenta las
   tres esquinas que hay que dejar libres porque el panel les pone encima
   el número, el candado y el símbolo.
   El módulo sin ilustración NO lleva la clase `banner` y se ve igual que
   siempre, así que esto no cambia nada hasta que hay dibujo. */
.loea-carrusel .tar.banner{padding:0;}
/* 142 px y no 104: las láminas del usuario llegan en proporciones que van
   de 1.5:1 a 2.1:1 y a 2.7 se les comía la mitad. A 2.4:1 (340×142) entran
   casi enteras. Ver scripts/preparar-laminas.ps1. */
.loea-carrusel .tar.banner .ilu{display:block;width:100%;height:142px;flex:none;
  object-fit:cover;}
.loea-carrusel .tar.banner .cuerpo{display:flex;flex-direction:column;flex:1;padding:0 16px 16px;}
/* El número de módulo y el candado, en el CUERPO y no sobre la imagen: el
   banner es solo imagen. Antes iban encima, y con las láminas —compuestas
   de borde a borde— chocaban con el dibujo; hicieron falta un velo y una
   sombra de texto para que se leyeran, y aun así estorbaban. Aquí no hace
   falta ninguno de los dos. */
.loea-carrusel .tar.banner .rotulo{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:11px;}
.loea-carrusel .tar.banner .rotulo .num{position:static;}
.loea-carrusel .tar.banner .rotulo .cand{position:static;right:auto;top:auto;font-size:11.5px;}
.loea-carrusel .tar.banner b{margin-top:5px;}
/* El símbolo se monta sobre el borde del banner, como una foto de perfil.
   Redondo y con aro de latón: es idea del usuario (24 ago 2026), de una
   lámina suya. El aro interior es del color de la tarjeta —separa el
   sello de la imagen— y el de fuera es el latón de la marca. */
.loea-carrusel .tar.banner .sym{margin:-30px 0 auto;border-radius:50%;
  border:3px solid var(--loea-card);
  box-shadow:0 0 0 2px var(--loea-brass),0 4px 12px rgba(31,85,96,.3);}
/* ── La tarjeta SIN lámina mide lo mismo que la que la tiene (9 oct 2026) ──
   Decisión del dueño, la «C» de docs/referencia/maqueta-tarjetas-iguales.html:
   las tarjetas eran de dos tamaños —248 px con lámina (Actuarial), 192 sin
   ella (Economía, Contabilidad, Herramientas)— y quiere que midan igual en
   todas, porque más adelante cada módulo llevará su lámina. Mientras no la
   tenga, el SITIO de la lámina se llena con una cuadrícula de hoja de cálculo
   teñida con la materia, y el símbolo se monta en su borde como en la de
   lámina. Cuando la lámina llegue, el área le pone `banner` y la imagen, y
   la tarjeta no cambia de tamaño.
   Va sólo con CSS para que les llegue a todas sin tocar su código: la banda
   es el ::before de la tarjeta (order -2), y el símbolo sube detrás (order
   -1), aunque en el marcado vaya después de «MÓDULO 01». Si la tarjeta trae
   `data-sym`, el símbolo grande sale además en la esquina de la banda.
   Contabilidad envuelve su contenido en `.cuerpo`: también le sirve. */
.loea-carrusel .tar:not(.banner){padding-top:0;}
.loea-carrusel .tar:not(.banner)::before{content:"";order:-2;display:block;flex:none;height:142px;margin:0 -16px;
  border-radius:15px 15px 0 0;background-color:var(--loea-soft);
  background-image:linear-gradient(180deg,transparent 40%,rgba(255,255,255,.55)),
    linear-gradient(var(--loea-line) 1px,transparent 1px),linear-gradient(90deg,var(--loea-line) 1px,transparent 1px);
  background-size:auto,44px 22px,44px 22px;}
.loea-carrusel .tar:not(.banner)[data-sym]::after{content:attr(data-sym);position:absolute;right:16px;top:12px;
  font:italic 70px/1 var(--font-display);color:var(--loea-acc);opacity:.35;pointer-events:none;}
.loea-carrusel .tar:not(.banner) > .sym,
.loea-carrusel .tar:not(.banner) > .cuerpo > .sym{order:-1;position:relative;z-index:1;margin:-30px 0 auto;border-radius:50%;
  border:3px solid var(--loea-card);box-shadow:0 0 0 2px var(--loea-brass),0 4px 12px rgba(31,85,96,.3);}
.loea-carrusel .tar:not(.banner) > .num{margin-top:11px;}
.loea-carrusel .tar:not(.banner) > b{margin-top:5px;}
.loea-carrusel .tar:not(.banner) .cand{top:152px;}
/* El sello mide 44 + 3 de borde por lado = 50 sólo en content-box. Un área que pone
   su panel en border-box (Contabilidad, 9 oct 2026) lo dejaba en 44 y la tarjeta 6 px
   más baja: se fija aquí, con y sin lámina, para que no dependa del área. */
.loea-carrusel .tar .sym{box-sizing:content-box;}
.loea-carrusel .detalle{animation:loeaSube .32s cubic-bezier(.22,.9,.3,1);}
@keyframes loeaSube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.loea-carrusel .detalle h3{margin:10px 0 0;font:500 15px/1.2 var(--font-display);
  letter-spacing:-.015em;color:var(--loea-ink);}
.loea-carrusel .detalle .desc{margin:7px 0 12px;font-size:12.5px;color:var(--loea-mut);line-height:1.6;}
.loea-carrusel .chip{display:inline-block;width:auto;margin:0 5px 6px 0;padding:5px 11px;
  font:500 11.5px var(--font-mono);border:1px solid var(--loea-line);border-radius:999px;
  background:var(--loea-card);color:var(--loea-ink);transition:border-color .14s,color .14s;}
.loea-carrusel .chip:hover{border-color:var(--loea-acc);color:var(--loea-acc);}
.loea-carrusel .chip.bloq{color:var(--loea-brass);border-color:var(--loea-brass-line);background:var(--loea-brass-soft);}
.loea-carrusel .abrir{width:100%;margin-top:12px;padding:11px;border:0;border-radius:12px;
  font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(120deg,var(--loea-acc-vivo),var(--loea-acc-fondo));
  box-shadow:0 4px 12px rgba(31,85,96,.26);transition:filter .14s,transform .14s;}
.loea-carrusel .abrir:hover{filter:brightness(1.07);transform:translateY(-1px);}

/* ── Vista TARJETAS: la lista de siempre, con la ropa nueva ── */
.loea-carrusel .card{display:grid;grid-template-columns:40px 1fr;gap:3px 12px;
  background:var(--loea-card);border:1px solid var(--loea-line);border-radius:13px;
  padding:13px 14px;margin:11px 0 0;box-shadow:var(--loea-sombra-1);
  transition:transform .15s,box-shadow .15s,border-color .15s;}
.loea-carrusel .card.clicable:hover{transform:translateY(-2px);border-color:var(--loea-acc);
  box-shadow:0 7px 20px rgba(31,85,96,.15);}
.loea-carrusel .card .sym{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;
  place-items:center;font:500 16px var(--font-display);font-style:normal;
  background:var(--loea-soft);color:var(--loea-acc);border:1px solid rgba(31,85,96,.16);}
.loea-carrusel .card b{font:500 14.5px/1.25 var(--font-display);letter-spacing:-.015em;
  color:var(--loea-ink);display:flex;align-items:center;gap:7px;}
.loea-carrusel .card b small{font:500 10.5px var(--font-mono);color:var(--loea-mut);margin:0;}
.loea-carrusel .card p{margin:3px 0 0;font-size:12px;color:var(--loea-mut);line-height:1.5;}
.loea-carrusel .card .meta{grid-column:2;display:flex;gap:7px;align-items:center;margin-top:9px;flex-wrap:wrap;}
.loea-carrusel .card .cuenta{font:500 11px var(--font-mono);color:var(--loea-mut);
  border:1px dashed var(--loea-line);border-radius:999px;padding:3px 10px;}
.loea-carrusel .card .tag{grid-column:auto;justify-self:auto;margin:0;font:700 10px var(--font-body);
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 10px;
  background:var(--loea-brass-soft);color:var(--loea-brass);border:1px solid var(--loea-brass-line);}
.loea-carrusel .card .ir{margin-left:auto;color:var(--loea-acc);font-weight:600;font-size:12.5px;}

/* ── Vista ÍNDICE: renglones, lo más compacto ── */
.loea-carrusel .fila-mod{display:grid;grid-template-columns:38px 1fr auto;gap:0 13px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--loea-line);cursor:pointer;transition:padding .15s;}
.loea-carrusel .fila-mod:first-child{border-top:1px solid var(--loea-line);}
.loea-carrusel .fila-mod:hover{padding-left:6px;}
.loea-carrusel .fila-mod:hover b{color:var(--loea-acc);}
.loea-carrusel .fila-mod:hover .sym{transform:scale(1.1);}
.loea-carrusel .fila-mod .sym{font:500 20px/1 var(--font-display);color:var(--loea-acc);
  text-align:center;transition:transform .15s;}
.loea-carrusel .fila-mod b{display:block;font:500 14.5px/1.25 var(--font-display);letter-spacing:-.015em;
  color:var(--loea-ink);transition:color .15s;}
.loea-carrusel .fila-mod .cuenta{display:block;margin-top:3px;font:500 10.5px var(--font-mono);color:var(--loea-mut);}
.loea-carrusel .fila-mod .der{font:500 10.5px var(--font-mono);color:var(--loea-mut);text-align:right;}
.loea-carrusel .fila-mod .der .cand{display:block;font-size:11px;color:var(--loea-brass);margin-bottom:2px;}

/* ── LA VITRINA: algo premium abierto con el plan gratis (5 oct 2026) ──────
   La pinta `vitrina.js`. Nació en Contabilidad; el dueño pidió que fuera de la
   familia. El DORADO (`--loea-brass`) es la marca de «hay más si pagas»: la
   chapita, el borde y el botón. */
.loea-chip-prem{display:inline-flex;align-items:center;gap:4px;font:600 10px/1 var(--font-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--loea-brass);background:var(--loea-brass-soft);border:1px solid var(--loea-brass-line);
  border-radius:999px;padding:4px 8px;white-space:nowrap;}
.loea-vitrina{background:var(--loea-card);border:1px solid var(--loea-brass-line);border-radius:12px;overflow:hidden;text-align:left;}
.loea-vit-top{background:linear-gradient(135deg,var(--loea-brass-soft),var(--loea-card));padding:14px 14px 12px;
  border-bottom:1px solid var(--loea-brass-line);}
.loea-vit-top h3{margin:6px 0 4px;padding:0;font:500 19px/1.2 var(--font-display);color:var(--loea-ink);}
.loea-vit-top p{margin:0;font-size:12.5px;color:var(--loea-mut);line-height:1.45;}
.loea-vit-bd{padding:12px 14px 14px;}
.loea-vit-muestra{border:1px solid var(--loea-line);border-radius:8px;overflow:hidden;margin:0 0 12px;}
.loea-vit-pest{display:flex;gap:2px;padding:4px 5px 0;background:var(--loea-bg);border-bottom:1px solid var(--loea-line);overflow:hidden;}
.loea-vit-pest span{font-size:10px;padding:3px 7px;border:1px solid var(--loea-line);border-bottom:0;
  border-radius:5px 5px 0 0;color:var(--loea-mut);white-space:nowrap;}
.loea-vit-pest span.on{background:var(--loea-card);color:var(--loea-ink);font-weight:600;}
.loea-vit-muestra table{border-collapse:collapse;width:100%;font:10.5px/1.3 var(--font-mono);}
.loea-vit-muestra th{background:var(--loea-acc-fondo);color:var(--loea-on-acc);text-align:left;padding:4px 6px;font-weight:600;}
.loea-vit-muestra td{padding:3px 6px;border-bottom:1px solid var(--loea-line-soft);color:var(--loea-ink);}
.loea-vit-muestra td.n{text-align:right;}
.loea-vit-cap{font:10px var(--font-body);color:var(--loea-mut-2);padding:4px 6px;}
ul.loea-vit-ganas{list-style:none;margin:0 0 12px;padding:0;font-size:12.5px;}
.loea-vit-ganas li{display:flex;gap:8px;padding:4px 0;color:var(--loea-ink);}
.loea-vit-ganas li::before{content:"✓";color:var(--loea-si);font-weight:700;}
.loea-vit-comprar{display:block;width:100%;margin:0;padding:10px;border:0;border-radius:8px;cursor:pointer;
  background:var(--loea-brass);color:#fff;font:600 13.5px var(--font-body);text-align:center;}
.loea-vit-comprar:hover{filter:brightness(1.08);}
.loea-vit-comprar small{display:block;font-weight:400;font-size:11px;opacity:.9;}
.loea-vit-ya{display:block;width:100%;margin:8px 0 0;padding:4px;background:none;border:0;cursor:pointer;
  font:600 12px var(--font-body);color:var(--loea-acc);}
.loea-vit-ya[disabled]{opacity:.5;cursor:default;}
.loea-vit-corta{border:1px solid var(--loea-brass-line);background:var(--loea-brass-soft);border-radius:10px;padding:10px 12px;text-align:left;}
.loea-vit-corta > p:first-child{margin:0 0 8px;font-size:12.5px;color:var(--loea-ink);line-height:1.45;}
.loea-vit-ya-txt{margin:8px 0 0;text-align:center;font-size:12px;color:var(--loea-mut);}
/* Sin plan en el área, el cuadro doble: ① activar · ② Premium (6 oct 2026). */
.loea-vit-paso{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;font-size:12.5px;color:var(--loea-ink);line-height:1.45;}
.loea-vit-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);}
.loea-vit-paso .num.d{background:var(--loea-brass);color:#fff;}
.loea-vit-paso + .loea-vit-paso{margin-bottom:12px;}
.loea-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:600 13.5px var(--font-body);text-align:center;}
.loea-vit-activar:hover{filter:brightness(1.08);}
.loea-vit-activar small{display:block;font-weight:400;font-size:11px;opacity:.9;}
.loea-vit-o{margin:8px 0;text-align:center;font-size:11.5px;color:var(--loea-mut-2);}