/* menu-tl.css — los componentes del panel de LOEA Tools.
*
* Los COLORES y las LETRAS no se definen aquí: salen de `nucleo/panel/loea.css`,
* que es de toda la familia. Aquí sólo se dice cómo se arman las piezas de este
* panel con esos tokens. Si hace falta un color nuevo, va al núcleo, no aquí.
*
* El panel de Excel se puede ensanchar tanto como quiera el usuario, así que el
* contenido se centra y no pasa de `--loea-ancho`: a 950 px las líneas llegan a
* 110 caracteres y se vuelven ilegibles.
*
* ── SE CARGA EN LA VENTANA DE TODA LA FAMILIA ─────────────────────────────
* Desde el 16 sep 2026 este archivo va enlazado en `nucleo/panel/taskpane.html`,
* al lado de `menu-ac.css` y `menu-en.css`, y se carga SIEMPRE, se esté en el
* área que se esté. De ahí salen dos reglas, y las dos las comprueba
* `scripts/verificar-empaque.mjs`:
*
* 1. TODO selector empieza por `.tl-` o por `:where(.tl-panel)`. Hasta ese día
* este archivo se llamaba `panel.css` y traía `body {…}` y `* {…}`
* globales: enlazado en la ventana, le habría cambiado la letra y las cajas
* a Actuarial, que está en producción.
* 2. Lo que `menu-ac.css` pone a ELEMENTOS sueltos —`button`, `label`,
* `input`, `header`, `section`…— se deshace dentro de `.tl-panel`. Esas
* reglas son de Actuarial y no llevan prefijo; sin deshacerlas, cada botón
* de este panel salía verde, a lo ancho y con 14 px de margen arriba.
*/
/* La letra y las cajas, en el panel y no en el `body`: el `body` es de la
ventana, y la ventana es de todos. */
.tl-panel {
max-width: var(--loea-ancho); margin: 0 auto; padding: 20px 18px 56px;
color: var(--loea-ink); font-family: var(--font-body);
font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.tl-panel, .tl-panel *, .tl-panel *::before, .tl-panel *::after { box-sizing: border-box; }
/* Dentro de la ventana el hueco (`#vArea`) ya trae su margen a los lados: el
panel no suma el suyo. La clase la pone `panel.js` al montarse ahí. */
.tl-panel.tl-dentro { padding: 6px 0 8px; }
/* Las reglas de ELEMENTO de `menu-ac.css`, deshechas dentro de este panel.
`revert` devuelve cada propiedad a lo que pone el navegador, que es lo mismo
que tiene este panel en su página aparte: se ve igual en los dos sitios.
La especificidad está medida y no es casual. `:where()` pesa cero, así que
`:where(.tl-panel) button` pesa lo mismo que el `button` de Actuarial y gana
por ir después; y las reglas de este panel (`.tl-boton`, una clase) pesan
más y ganan a ésta. `section h2` y `details summary` pesan dos elementos en
`menu-ac.css`, y por eso van con su pareja. */
:where(.tl-panel) :is(header, main, label, input, select, textarea, button, details, section, code) { all: revert; }
:where(.tl-panel) :is(section h2, details summary, label small) { all: revert; }
/* Y lo que `all: revert` se llevaba de más: el `display: none` de `hidden`. En
la ventana no se nota —`menu-ac.css` lo repone con `!important`—, pero en la
página aparte (`npm run start:tl`, el visor del 4310) el inicio se quedaba a
la vista encima de cada herramienta. Visto el 19 sep 2026. */
:where(.tl-panel) [hidden] { display: none !important; }
/* ── Cabecera ─────────────────────────────────────────────────────── */
.tl-top { padding: 6px 0 18px; border-bottom: 1px solid var(--loea-line); }
.tl-top h1 {
margin: 0; font-family: var(--font-display); font-weight: 500;
font-size: 1.7rem; line-height: 1.15; letter-spacing: -.01em;
}
.tl-lede { margin: 8px 0 0; color: var(--loea-mut); max-width: 52ch; }
/* ── El formulario ────────────────────────────────────────────────── */
.tl-form { margin: 18px 0 0; }
/* Aire entre los bloques del formulario (16 sep 2026, visto en Excel): «Cómo
comparar la llave» y «Dónde queda» iban pegados al cuadro de arriba, y el
rótulo de cada cuadro chocaba con el borde del anterior. */
.tl-form > * + .tl-tabla, .tl-form > * + .tl-tablas { margin-top: 18px; }
.tl-tablas { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .tl-tablas { grid-template-columns: 1fr 1fr; } }
.tl-tabla {
margin: 0; padding: 12px 14px 14px; border: 1px solid var(--loea-line);
border-radius: var(--loea-radio-chico); background: var(--loea-card);
box-shadow: var(--loea-sombra-1);
}
.tl-tabla legend {
padding: 0 6px; font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: .1em; text-transform: uppercase; color: var(--loea-acc);
}
.tl-tabla label {
display: block; margin-top: 8px; font-size: 12px; color: var(--loea-mut);
}
.tl-tabla select {
display: block; width: 100%; margin-top: 3px; padding: 7px 9px;
font-family: inherit; font-size: 13.5px; color: var(--loea-ink);
background: var(--loea-card); border: 1px solid var(--loea-line);
border-radius: 7px;
}
.tl-tabla select:focus-visible { outline: 2px solid var(--loea-acc); outline-offset: 1px; }
/* ── Las opciones, que salen de la herramienta ────────────────────── */
.tl-opciones { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.tl-opcion {
flex: 1 1 180px; text-align: left; padding: 9px 11px; cursor: pointer;
font-family: inherit; color: var(--loea-mut);
background: var(--loea-card); border: 1px solid var(--loea-line);
border-radius: var(--loea-radio-chico);
}
.tl-opcion b { display: block; font-weight: 600; font-size: 12.5px; color: var(--loea-ink); }
.tl-opcion span { display: block; margin-top: 2px; font-size: 11.5px; }
.tl-opcion.es { border-color: var(--loea-acc); background: var(--loea-soft); }
.tl-opcion.es b { color: var(--loea-acc); }
.tl-opcion:focus-visible { outline: 2px solid var(--loea-acc); outline-offset: 1px; }
/* ── El botón ─────────────────────────────────────────────────────── */
.tl-boton {
margin: 14px 0 0; width: 100%; padding: 11px 16px; cursor: pointer;
font-family: inherit; font-size: 14.5px; font-weight: 600;
color: var(--loea-on-acc); background: var(--loea-acc-fondo);
border: 0; border-radius: var(--loea-radio-chico); box-shadow: var(--loea-sombra-1);
}
.tl-boton:hover { background: var(--loea-acc-vivo); }
.tl-boton:disabled { opacity: .55; cursor: default; }
.tl-boton:focus-visible { outline: 2px solid var(--loea-acc); outline-offset: 2px; }
.tl-nota { margin: 7px 0 0; font-size: 11.5px; color: var(--loea-mut-2); text-align: center; }
/* ── Avisos ───────────────────────────────────────────────────────── */
.tl-aviso {
margin: 16px 0 0; padding: 10px 12px; font-size: 13px;
border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico);
background: var(--loea-card);
}
.tl-aviso.tl-mal { color: var(--loea-mal); background: var(--loea-mal-soft); border-color: var(--loea-mal-line); }
.tl-aviso.tl-avisar { color: var(--loea-brass); background: var(--loea-brass-soft); border-color: var(--loea-brass-line); }
/* ── Mientras lee ─────────────────────────────────────────────────── */
.tl-cargando { margin-top: 22px; text-align: center; color: var(--loea-mut); }
.tl-barra {
height: 6px; margin: 10px 0 6px; overflow: hidden;
background: var(--loea-line-soft); border-radius: 99px;
}
.tl-barra i { display: block; height: 100%; background: var(--loea-acc-fondo); transition: width .2s; }
.tl-pct { margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--loea-mut-2); }
/* ── Sin resultado todavía ────────────────────────────────────────── */
.tl-vacio {
margin-top: 20px; padding: 18px; color: var(--loea-mut);
border: 1px dashed var(--loea-line); border-radius: var(--loea-radio);
}
.tl-vacio p { margin: 0 0 6px; }
.tl-vacio p:last-child { margin: 0; }
/* ── El resultado ─────────────────────────────────────────────────── */
.tl-res { margin-top: 22px; }
.tl-res h3 {
margin: 24px 0 8px; font-family: var(--font-display); font-weight: 600;
font-size: 1.05rem;
}
.tl-veredicto {
margin: 0; padding: 13px 15px; font-size: 15px; line-height: 1.45;
border-radius: var(--loea-radio); border: 1px solid var(--loea-line);
background: var(--loea-card);
}
.tl-veredicto.tl-mal { color: var(--loea-mal); background: var(--loea-mal-soft); border-color: var(--loea-mal-line); }
.tl-veredicto.tl-si { color: var(--loea-si); background: var(--loea-si-soft); border-color: var(--loea-si); }
.tl-veredicto.tl-avisar { color: var(--loea-brass); background: var(--loea-brass-soft); border-color: var(--loea-brass-line); }
/* Las tres cifras grandes */
.tl-cifras {
display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr);
margin: 12px 0 0; padding: 0; list-style: none;
}
.tl-cifras li {
padding: 11px 12px; text-align: center; background: var(--loea-card);
border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico);
}
.tl-cifras b {
display: block; font-family: var(--font-mono); font-size: 1.5rem;
font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tl-cifras span { display: block; margin-top: 3px; font-size: 11px; color: var(--loea-mut-2); }
.tl-cifras .tl-mal b { color: var(--loea-mal); }
.tl-cifras .tl-si b { color: var(--loea-si); }
.tl-cifras .tl-avisar b { color: var(--loea-brass); }
.tl-cifras .tl-gris b { color: var(--loea-mut-2); }
/* Cuatro cifras (Comparar tablas): de dos en dos. En tres columnas la cuarta
se quedaba sola abajo, y a 340 px cada caja no cabe ni un «25,447». */
.tl-cifras.tl-cuatro { grid-template-columns: repeat(2, 1fr); }
/* El arreglo recomendado */
.tl-arreglo {
margin: 16px 0 0; padding: 14px 15px;
border: 1px solid var(--loea-acc); border-radius: var(--loea-radio);
background: var(--loea-soft);
}
.tl-arreglo h3 {
margin: 0; font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: .1em; text-transform: uppercase; color: var(--loea-acc);
}
.tl-arr-t { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--loea-ink); }
.tl-arr-d { margin: 4px 0 0; color: var(--loea-mut); }
.tl-arr-n { margin: 9px 0 0; font-size: 12px; color: var(--loea-mut); }
/* Los hallazgos: un renglón por problema, con su gravedad y su cuenta */
.tl-hallazgos, .tl-lados { width: 100%; border-collapse: collapse; font-size: 13px; }
.tl-hallazgos td { padding: 9px 8px; border-top: 1px solid var(--loea-line-soft); vertical-align: top; }
.tl-hallazgos tr:first-child td { border-top: 0; }
.tl-punto { width: 16px; padding-right: 0 !important; }
.tl-punto span[aria-hidden] {
display: block; width: 8px; height: 8px; margin-top: 6px; border-radius: 99px;
background: var(--loea-brass);
}
.tl-g-alta .tl-punto span[aria-hidden] { background: var(--loea-mal); }
.tl-donde { width: 1%; white-space: nowrap; color: var(--loea-mut-2); font-family: var(--font-mono); font-size: 11px; }
.tl-cuantos { width: 1%; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tl-limpio {
margin: 0; padding: 12px 14px; color: var(--loea-si);
background: var(--loea-si-soft); border: 1px solid var(--loea-si);
border-radius: var(--loea-radio-chico);
}
/* Las dos columnas, lado a lado */
.tl-lados { font-family: var(--font-mono); font-size: 11.5px; }
.tl-lados th, .tl-lados td { padding: 7px 6px; text-align: right; border-top: 1px solid var(--loea-line-soft); }
.tl-lados thead th { color: var(--loea-mut-2); font-weight: 400; border-top: 0; }
.tl-lados tbody th, .tl-lados thead th:first-child { text-align: left; }
.tl-lados tbody td:first-of-type { text-align: left; }
.tl-lados .tl-col { display: block; color: var(--loea-mut-2); }
/* Sólo para lectores de pantalla */
.tl-sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ── Piezas del formulario de cruce ───────────────────────────────── */
.tl-tabla select[multiple] { padding: 4px; }
.tl-tabla input[type="text"] {
display: block; width: 100%; margin-top: 3px; padding: 7px 9px;
font-family: inherit; font-size: 13.5px; color: var(--loea-ink);
background: var(--loea-card); border: 1px solid var(--loea-line); border-radius: 7px;
}
.tl-pista { margin: 8px 0 0; font-size: 11.5px; color: var(--loea-mut-2); }
.tl-columnas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.tl-columna { font-size: 12.5px; color: var(--loea-ink); display: flex; align-items: center; gap: 5px; }
/* ── Las fases que sólo tiene una herramienta que escribe ─────────── */
.tl-acciones { display: flex; gap: 8px; margin-top: 16px; }
.tl-acciones .tl-boton { margin: 0; }
.tl-boton.tl-secundario {
color: var(--loea-acc); background: var(--loea-card);
border: 1px solid var(--loea-line); box-shadow: none;
}
.tl-boton.tl-secundario:hover { background: var(--loea-soft); border-color: var(--loea-acc); }
.tl-resumen { margin: 0; padding-left: 18px; }
.tl-resumen li { margin-bottom: 5px; }
.tl-avisos {
margin: 12px 0 0; padding: 10px 12px 10px 28px; font-size: 12.5px;
color: var(--loea-brass); background: var(--loea-brass-soft);
border: 1px solid var(--loea-brass-line); border-radius: var(--loea-radio-chico);
}
.tl-sub { margin: 6px 0 0; color: var(--loea-mut); font-size: 13px; }
/* La muestra del resultado: se desplaza sola, nunca empuja el panel */
.tl-muestra { overflow-x: auto; border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico); }
.tl-muestra table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11.5px; }
.tl-muestra th, .tl-muestra td {
padding: 6px 8px; text-align: left; white-space: nowrap;
border-bottom: 1px solid var(--loea-line-soft);
}
.tl-muestra thead th { color: var(--loea-mut-2); font-weight: 400; background: var(--loea-bg); }
.tl-muestra tbody tr:last-child td { border-bottom: 0; }
.tl-mas { margin: 6px 0 0; font-size: 11.5px; color: var(--loea-mut-2); }
/* Las casillas de «Limpiar tabla completa» (20 sep 2026). Es la única pantalla
del área donde se marca una LISTA en vez de elegir una de varias.
Un BOTÓN y no un ``: el dibujo es HTML como texto y se
repinta entero en cada cambio, así que un input perdería su estado marcado
—lo guarda el arnés, no el DOM— y el foco. */
.tl-casilla {
width: 24px; height: 24px; padding: 0; cursor: pointer;
font-family: var(--font-mono); font-size: 13px; line-height: 1;
color: var(--loea-mut-2); background: var(--loea-card);
border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico);
}
.tl-casilla.tl-marcada {
color: var(--loea-acc); background: var(--loea-soft); border-color: var(--loea-acc);
}
.tl-casilla:focus-visible { outline: 2px solid var(--loea-acc); outline-offset: 1px; }
/* Esta tabla lleva el porqué de cada problema debajo de su nombre, y con el
`nowrap` de `.tl-muestra` el panel se iría a 900 px de ancho dentro de una
barra de 340. */
.tl-problemas td:nth-child(2) { white-space: normal; min-width: 170px; }
.tl-problemas td { vertical-align: top; }
/* Los destinos de «Vínculos externos» (20 sep 2026). Cada uno es un archivo al
que apunta el libro, con su casilla y, debajo, dónde está cada cosa que
apunta ahí. Se rompe POR DESTINO, como en el cuadro de vínculos de Excel. */
.tl-destino { margin: 14px 0 0; }
.tl-destino-cab {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 6px; font-size: 13px;
}
.tl-destino-cab b { word-break: break-all; }
.tl-destino-cab .tl-pista { margin: 0; }
/* Debajo de la cabecera, la carpeta UNA vez y los sitios en renglones (el
anotado 45, la forma C de `docs/maqueta-vinculos.html`). Nada en una tabla:
a 350 px la de tres columnas cortaba la ruta con barra. */
.tl-carpeta {
margin: 0 0 6px 30px; font: 11.5px/1.45 var(--font-mono);
color: var(--loea-mut-2); overflow-wrap: anywhere;
}
.tl-renglones { list-style: none; margin: 0 0 0 30px; padding: 0; border-left: 2px solid var(--loea-line); }
.tl-renglones li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
padding: 5px 0 5px 10px;
}
.tl-renglones li + li { border-top: 1px solid var(--loea-line-soft); }
.tl-r-donde { font: 600 13px/1.3 var(--font-mono); color: var(--loea-ink); overflow-wrap: anywhere; }
.tl-r-tipo { font: 600 10px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.tl-r-tipo.tl-avisar { color: var(--loea-brass); }
.tl-r-tipo.tl-gris { color: var(--loea-mut-2); }
.tl-r-lee { flex-basis: 100%; font: 11.5px/1.4 var(--font-mono); color: var(--loea-mut); overflow-wrap: anywhere; }
/* La casilla apagada de lo que NO se rompe desde aquí. Se enseña igual —para
que se vea que el hallazgo existe— pero no se puede pulsar: si pareciera una
casilla de verdad, el usuario la marcaría y no pasaría nada, que es la peor
manera de enterarse. */
.tl-casilla.tl-nula {
display: inline-flex; align-items: center; justify-content: center;
cursor: default; opacity: .5;
}
/* El candado. Latón, NUNCA el rojo del error: no salió nada mal */
.tl-candado {
margin: 14px 0 0; padding: 11px 13px; font-size: 13px; color: var(--loea-brass);
background: var(--loea-brass-soft); border: 1px solid var(--loea-brass-line);
border-radius: var(--loea-radio-chico);
}
/* Después de pulsar «Aplicar (premium)»: el mismo aviso, marcado, en vez de
otra caja que dice lo mismo (4 oct 2026, el anotado 17). */
.tl-candado.tl-insiste { border-width: 2px; border-color: var(--loea-brass); }
/* ══════════════ EL ARMAZÓN ══════════════ */
.tl-volver {
margin: 0 0 10px; padding: 5px 10px 5px 8px; cursor: pointer;
font-family: var(--font-mono); font-size: 11px; color: var(--loea-mut);
background: var(--loea-card); border: 1px solid var(--loea-line);
border-radius: 99px;
}
.tl-volver::before { content: "← "; }
.tl-volver:hover { color: var(--loea-acc); border-color: var(--loea-acc); }
/* La fila del regreso y del «📖 Ayuda» (8 oct 2026, ARMAZON-DEL-PANEL.md
§12, la receta de Contabilidad): la letra del botón, 13.5 px y 600; con el
panel angosto cede el REGRESO con «…», nunca el botón —sin eso salía «Ayud»—. */
.tl-top-fila { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; min-height: 0; }
.tl-top-fila .tl-volver { margin: 0; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* `.tl-boton-ayuda` y no `.tl-ayuda`: ésa es la clase de la FICHA
(`vista-ayuda.js`), y con este `nowrap` la ficha salía a lo ancho (anotado 47). */
.tl-boton-ayuda {
margin-left: auto; flex-shrink: 0; white-space: nowrap;
color: var(--loea-ink); text-decoration: none; font: inherit; font-size: 13.5px; font-weight: 600;
}
.tl-boton-ayuda:hover { text-decoration: underline; }
/* ── Inicio: los módulos, con las tres vistas de la familia ───────── */
/* La fila del rótulo: la cuenta a la izquierda y el selector de vista (`.sw`,
del armazón) a la derecha. Como `.en-rot-fila` de Enseñanza. */
.tl-rot-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.tl-rot { margin: 0; font: 600 10.5px/1.3 var(--font-mono); letter-spacing: .1em;
text-transform: uppercase; color: var(--loea-mut); }
/* Las fichas que todavía no funcionan, también en los chips del carrusel. */
.tl-panel .chip.tl-chip-por-venir { color: var(--loea-mut-2); }
/* ── Un módulo: sus fichas ───────────────────────────────────────── */
.tl-inicio { margin-top: 16px; }
.tl-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tl-item {
display: block; width: 100%; text-align: left; padding: 10px 12px; cursor: pointer;
font-family: inherit; background: var(--loea-card);
border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico);
}
.tl-item:hover { border-color: var(--loea-acc); }
.tl-item:focus-visible { outline: 2px solid var(--loea-acc); outline-offset: 1px; }
.tl-item-n { display: block; font-size: 13.5px; font-weight: 600; color: var(--loea-ink); }
.tl-item-t { display: block; margin-top: 1px; font-size: 11.5px; color: var(--loea-mut); }
.tl-item-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
/* Lo que todavía no está escrito se dice, no se esconde ni se disfraza */
.tl-por-venir { opacity: .72; }
.tl-por-venir .tl-item-n { font-weight: 500; }
.tl-chip {
font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
background: var(--loea-soft); color: var(--loea-acc); white-space: nowrap;
}
.tl-chip-pre { background: var(--loea-brass-soft); color: var(--loea-brass); }
.tl-chip-si { background: var(--loea-si-soft); color: var(--loea-si); }
.tl-chip-gris { background: var(--loea-bg); color: var(--loea-mut-2); border: 1px solid var(--loea-line); }
.tl-chip-f { background: var(--loea-bg); color: var(--loea-mut); border: 1px solid var(--loea-line); }
/* ── Los pasos del arnés ──────────────────────────────────────────── */
.tl-pasos {
display: flex; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
text-transform: uppercase;
}
.tl-pasos li {
flex: 1; padding: 6px 8px; text-align: center; color: var(--loea-mut-2);
background: var(--loea-card); border: 1px solid var(--loea-line);
border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-pasos .hecho { color: var(--loea-si); border-color: var(--loea-si); background: var(--loea-si-soft); }
.tl-pasos .actual { color: var(--loea-on-acc); background: var(--loea-acc-fondo); border-color: var(--loea-acc-fondo); }
/* ── La barra de licencia ─────────────────────────────────────────── */
.tl-lic {
margin: 14px 0 0; padding: 11px 13px;
background: var(--loea-card); border: 1px solid var(--loea-line);
border-radius: var(--loea-radio-chico);
}
.tl-lic-sin { background: var(--loea-brass-soft); border-color: var(--loea-brass-line); }
.tl-lic-t { margin: 0; font-size: 13px; font-weight: 600; }
.tl-lic-d { margin: 4px 0 0; font-size: 11.5px; color: var(--loea-mut); }
.tl-lic .tl-boton { margin-top: 9px; }
.tl-lic-codigo { display: flex; gap: 6px; margin-top: 9px; }
.tl-lic-codigo input {
flex: 1; min-width: 0; padding: 7px 9px; font-family: var(--font-mono); font-size: 12.5px;
color: var(--loea-ink); background: var(--loea-card);
border: 1px solid var(--loea-line); border-radius: 7px;
}
.tl-lic-codigo .tl-boton { width: auto; margin: 0; padding: 7px 14px; font-size: 13px; }
/* Sólo en localhost: el núcleo no deja simular en producción */
.tl-lic-dev {
display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--loea-line);
font-family: var(--font-mono); font-size: 10px; color: var(--loea-mut-2);
}
.tl-lic-dev button {
padding: 3px 8px; cursor: pointer; font-family: inherit; font-size: 10px;
color: var(--loea-mut); background: var(--loea-bg);
border: 1px solid var(--loea-line); border-radius: 99px;
}
.tl-lic-dev button:hover { color: var(--loea-acc); border-color: var(--loea-acc); }
/* ── La ayuda: la ficha dentro del panel ──────────────────────────── */
.tl-caja-ayuda {
margin-top: 26px; padding: 10px 12px;
background: var(--loea-card); border: 1px solid var(--loea-line);
border-radius: var(--loea-radio-chico);
}
.tl-caja-ayuda summary {
cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--loea-acc);
}
.tl-ayuda h3 {
margin: 14px 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
}
.tl-ayuda h4 {
margin: 16px 0 5px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: .1em; text-transform: uppercase; color: var(--loea-mut-2);
}
.tl-ay-que { margin: 0 0 7px; color: var(--loea-mut); font-size: 13px; }
.tl-ay-usar, .tl-ay-hoy { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--loea-mut); }
.tl-ay-usar li, .tl-ay-hoy li { margin-bottom: 4px; }
.tl-ay-escribe { margin: 0; font-size: 12.5px; color: var(--loea-ink); }
.tl-ay-ojo {
margin: 14px 0 0; padding: 9px 11px; font-size: 12.5px; color: var(--loea-brass);
background: var(--loea-brass-soft); border: 1px solid var(--loea-brass-line);
border-radius: var(--loea-radio-chico);
}
.tl-ay-clave { margin: 14px 0 0; font-size: 12px; color: var(--loea-mut-2); font-style: italic; }
.tl-ay-impacto { grid-template-columns: repeat(2, 1fr); }
.tl-ay-impacto b { font-size: 1.1rem; }
.tl-sintaxis {
margin: 10px 0 0; padding: 9px 11px; overflow-x: auto;
font-family: var(--font-mono); font-size: 12px; color: var(--loea-acc);
background: var(--loea-soft); border-radius: var(--loea-radio-chico);
}
.tl-ayuda code {
font-family: var(--font-mono); font-size: .88em; padding: 1px 4px;
background: var(--loea-bg); border-radius: 3px;
}
/* ── La hojita de las fórmulas (19 sep 2026) ──────────────────────────
Copiada de la de Actuarial: un campo por argumento, la fórmula en vivo, y
Calcular / Insertar. Los campos son los de los formularios de este panel. */
.tl-hojita { margin: 4px 0 26px; }
.tl-hojita .tl-tabla { margin-top: 12px; }
.tl-tabla .tl-arg { margin-top: 12px; color: var(--loea-ink); font-weight: 600; font-size: 12.5px; }
.tl-tabla .tl-arg small { font-weight: 400; color: var(--loea-mut-2); }
.tl-arg-desc { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--loea-mut-2); }
.tl-arg-fila { display: flex; gap: 6px; align-items: stretch; margin-top: 3px; }
.tl-arg-fila input[type="text"] { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.tl-usar {
flex: 0 0 auto; padding: 0 9px; cursor: pointer; font-family: inherit; font-size: 11.5px;
color: var(--loea-acc); background: var(--loea-card); border: 1px solid var(--loea-line); border-radius: 7px;
}
.tl-usar:hover { border-color: var(--loea-acc); background: var(--loea-soft); }
.tl-formula-viva { margin: 14px 0 0; white-space: pre-wrap; word-break: break-all; }
.tl-hojita .tl-acciones .tl-boton:disabled { cursor: not-allowed; }
.tl-res-formula { margin-top: 14px; }
.tl-res-grande {
margin: 4px 0 0; padding: 12px 14px; font-size: 16px; font-weight: 600; color: var(--loea-ink);
background: var(--loea-soft); border-radius: var(--loea-radio-chico); word-break: break-word;
}
/* ── El «Contador de tiempo ahorrado» (20 sep 2026) ───────────────────
La banda va ARRIBA del todo en el inicio, antes que los módulos: es lo
primero que se ve al abrir el área, que es donde contesta a la pregunta
para la que existe —«¿y esto para qué lo pago?»— el día de la renovación.
En cero se dibuja apagada (`tl-contador-cero`) en vez de esconderse: un
contador que aparece de la nada el día que llega a 1 no se entiende, y uno
que enseña «0 h» parece roto. Apagado dice qué va a pasar ahí. */
/* En UNA línea desde el 6 oct 2026 (el anotado 25, opción B): en dos
renglones con su recuadro empujaba el carrusel, y la tarjeta salía más
chica que las de las otras áreas. El mismo día, mirándolo en Excel, bajó
al FINAL del inicio como un botón chico (el anotado 31): no hace falta
verlo todo el tiempo. En cero, punteado. */
.tl-contador {
display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 18px 0 4px;
padding: 6px 10px; text-align: left; cursor: pointer; font: inherit;
color: var(--loea-ink); background: var(--loea-soft);
border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico);
}
.tl-contador:hover { border-color: var(--loea-acc); }
.tl-contador:focus-visible { outline: 2px solid var(--loea-acc); outline-offset: 2px; }
.tl-contador-sym { flex: 0 0 auto; font-size: 15px; line-height: 1; color: var(--loea-acc); }
.tl-contador-txt { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-contador-txt b { font-size: 13px; font-weight: 600; }
.tl-contador-txt small { font-size: 11.5px; color: var(--loea-mut-2); }
.tl-contador-cero { background: transparent; border-style: dashed; }
.tl-contador-cero .tl-contador-sym, .tl-contador-cero .tl-contador-txt b { color: var(--loea-mut-2); }
.tl-contador-total { margin: 4px 0 18px; }
.tl-contador-total b { font-size: 26px; font-weight: 600; color: var(--loea-ink); }
.tl-contador-total span { margin-left: 8px; font-size: 12.5px; color: var(--loea-mut-2); }
/* Las cifras, alineadas a la derecha y en monoespaciada: una columna de
tiempos que no alinea no se puede sumar con la vista. */
.tl-muestra td.tl-num, .tl-muestra th.tl-num { text-align: right; white-space: nowrap; }
/* La tarifa es la letra chica del renglón: está para poder comprobar la
multiplicación, no para leerla de corrido. */
.tl-muestra td.tl-tarifa { font-size: 10.5px; color: var(--loea-mut-2); white-space: nowrap; }
.tl-formula { margin: 8px 0; }
.tl-formula code { font-family: var(--font-mono); font-size: 11.5px; word-break: break-word; }
.tl-contador-pie { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--loea-line); }
.tl-contador-pie small { display: block; margin-top: 6px; font-size: 11px; color: var(--loea-mut-2); }
.tl-boton-flojo {
padding: 7px 13px; cursor: pointer; font: inherit; font-size: 12.5px;
color: var(--loea-mut-2); background: var(--loea-card);
border: 1px solid var(--loea-line); border-radius: 7px;
}
.tl-boton-flojo:hover { color: var(--loea-ink); border-color: var(--loea-acc); }
.tl-boton-flojo:focus-visible { outline: 2px solid var(--loea-acc); outline-offset: 2px; }
/* Los dos botones de «Llevártelo» (20 sep 2026). Van UNO AL LADO DEL OTRO a
propósito: es la regla del área —gratis ve, premium escribe— puesta donde
se entiende de un vistazo en vez de explicada en un párrafo. */
.tl-llevarselo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tl-llevarselo .tl-boton { flex: 1 1 auto; margin: 0; }
/* ── «¿Qué fórmula uso?» (21 sep 2026) ────────────────────────────────
Una caja arriba, lo que se entendió de tu selección, y la lista. La primera
propuesta se marca: es la que el buscador cree que buscas, y el ojo tiene
que ir ahí antes que a las demás. */
.tl-qf { margin: 4px 0 26px; }
.tl-qf-caja { display: block; font-size: 12.5px; font-weight: 600; color: var(--loea-ink); }
.tl-qf-caja input {
display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
font-family: inherit; font-size: 14px; color: var(--loea-ink);
background: var(--loea-card); border: 1px solid var(--loea-line); border-radius: 8px;
}
.tl-qf-caja input:focus-visible { outline: 2px solid var(--loea-acc); outline-offset: 1px; border-color: var(--loea-acc); }
/* Lo que se entendió de la selección. Apagado cuando NO son tus datos: es
un aviso, no un adorno, y tiene que verse distinto. */
.tl-qf-sel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
margin-top: 10px; padding: 8px 10px; font-size: 12px; color: var(--loea-mut-2);
background: var(--loea-soft); border-radius: var(--loea-radio-chico); }
.tl-qf-sel p { margin: 0; flex: 1 1 220px; }
.tl-qf-sel code { font-family: var(--font-mono); font-size: 11.5px; color: var(--loea-ink); }
.tl-qf-sel-no { background: transparent; border: 1px dashed var(--loea-line); }
.tl-qf-pista { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--loea-mut-2); }
.tl-qf-lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.tl-qf-item { padding: 12px 13px; background: var(--loea-card);
border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico); }
.tl-qf-primera { border-color: var(--loea-acc); }
/* La fórmula es lo que se copia con la vista: monoespaciada, y partida ENTRE
argumentos —un `` tras cada separador, `conCortes()`—, no a media
palabra. `overflow-wrap: anywhere` sólo entra si UN argumento solo ya no cabe.
Con `word-break: break-all` salía `"Nort` / `e"` a 340 px (21 sep 2026). */
.tl-qf-formula { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--loea-acc);
overflow-wrap: anywhere; }
/* «Si quieres calcular …, es:» — lo que la receta AÑADE y tú no pediste
(28 sep 2026). Va ANTES de la fórmula: después ya se ha leído como tuya. */
.tl-qf-si { margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--loea-mut-2); }
.tl-qf-si b { color: var(--loea-ink); }
.tl-qf-papeles { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--loea-mut-2); }
.tl-qf-papeles code { font-family: var(--font-mono); font-size: 11px; color: var(--loea-ink); }
.tl-qf-para { margin: 6px 0 0; font-size: 12.5px; color: var(--loea-ink); }
.tl-qf-ojo { margin-top: 8px; font-size: 11.5px; color: var(--loea-mut-2); }
.tl-qf-ojo b { display: block; font: 600 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.tl-qf-ojo ul { margin: 4px 0 0; padding-left: 16px; }
.tl-qf-ojo li + li { margin-top: 3px; }
.tl-qf-ojo code { font-family: var(--font-mono); font-size: 11px; color: var(--loea-ink); }
.tl-qf-acciones { margin-top: 10px; }
.tl-qf-acciones .tl-boton { margin: 0; }
/* ── «Formato profesional» (21 sep 2026) ──────────────────────────────
La tabla de «qué es cada columna». La columna «Por qué» es la que se lee:
es lo que deja decir «no, eso no es dinero» ANTES de aplicar. Las claves se
marcan, porque son lo único de la herramienta que evita perder datos. */
/* Una tarjeta por columna, no una tabla: a 340 px una tabla de cuatro
columnas escondía el «Por qué» a la derecha (visto en el navegador). */
.tl-fmt-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tl-fmt-item { padding: 10px 12px; background: var(--loea-card);
border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico); }
.tl-fmt-item p { margin: 0; }
.tl-fmt-item p + p { margin-top: 4px; }
.tl-fmt-clave { border-left: 3px solid var(--loea-acc); }
.tl-fmt-nombre b { color: var(--loea-ink); font-size: 13px; }
.tl-fmt-clave .tl-fmt-nombre b { color: var(--loea-acc); }
.tl-fmt-formato { font-size: 12.5px; color: var(--loea-ink); }
.tl-fmt-formato code { font-family: var(--font-mono); font-size: 11.5px; }
.tl-fmt-porque { font-size: 11.5px; line-height: 1.45; color: var(--loea-mut-2); }
.tl-boton.tl-boton-chico { margin-top: 8px; padding: 5px 10px; font-size: 12px; width: auto; }
/* «Formato financiero»: el negativo, en el rojo con que lo pinta Excel. */
.tl-negativo { color: #c00000; }
/* ── «Fórmula paso a paso»: el árbol con papeles (28 sep 2026) ────────
La forma que eligió el dueño mirando `docs/maqueta-arbol.html`: delante de
cada rama, para qué sirve dentro de su función. El sangrado va en píxeles y
con tope, que a 350 px una rama honda se sale por la derecha. */
.tl-pap-formula { display: block; margin: 8px 0 12px; padding: 8px 10px; background: var(--loea-soft);
border-radius: var(--loea-radio-chico); font-family: var(--font-mono); font-size: 12px;
color: var(--loea-acc); overflow-wrap: anywhere; }
/* La escalera (4 oct 2026): la fórmula resolviéndose renglón a renglón. Los
colores de la maqueta elegida (`docs/maqueta-paso-a-paso.html`, forma 1). */
.tl-esc { list-style: none; margin: 10px 0 0; padding: 0; }
.tl-esc-renglon code { display: block; padding: 7px 10px; border: 1px solid var(--loea-line);
border-radius: var(--loea-radio-chico); background: var(--loea-card); font-family: var(--font-mono);
font-size: 12.5px; color: var(--loea-ink); overflow-wrap: anywhere; }
.tl-esc-final code { background: var(--loea-si-soft); border-color: transparent; font-size: 15px;
font-weight: 700; color: var(--loea-si); }
.tl-esc-flecha { display: flex; gap: 8px; align-items: baseline; padding: 3px 0 3px 14px;
font-size: 11.5px; color: var(--loea-mut); }
.tl-esc-flecha::before { content: "↓"; font-size: 15px; color: var(--loea-acc); }
.tl-esc mark { border-radius: 4px; padding: 0 3px; font-weight: 700; }
.tl-esc-ref { background: var(--loea-soft); color: var(--loea-acc); }
.tl-esc-nuevo { background: var(--loea-brass-soft); color: var(--loea-brass); }
.tl-esc-final mark { background: transparent; color: inherit; padding: 0; }
.tl-pap-arbol { margin-top: 18px; padding: 10px 12px; background: var(--loea-card);
border: 1px solid var(--loea-line); border-radius: var(--loea-radio-chico); }
.tl-pap-arbol summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--loea-acc); }
.tl-pap-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tl-pap-item { padding: 2px 0 2px 10px; border-left: 2px solid var(--loea-line); }
.tl-pap-raiz { border-left-color: var(--loea-acc); }
.tl-pap-item p { margin: 0; }
.tl-pap-papel { font: 600 10px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--loea-mut-2); }
.tl-pap-rama { font-size: 12.5px; margin-top: 2px; }
.tl-pap-rama code { font-family: var(--font-mono); font-size: 12px; color: var(--loea-ink); overflow-wrap: anywhere; }
.tl-pap-da { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.tl-pap-sin { margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--loea-brass); }
/* ── «Reparar fórmula» (28 sep 2026) ──────────────────────────────────
Una tarjeta por hallazgo, no una tabla: en Excel, la columna «Detalle» —la
que se lee— quedaba cortada a la derecha. Y la fórmula, partida entre
argumentos (`conCortes`), no a mitad de palabra. */
.tl-rep-formula { display: block; margin: 6px 0; padding: 8px 10px; background: var(--loea-soft);
border-radius: var(--loea-radio-chico); font-family: var(--font-mono); font-size: 12px;
color: var(--loea-ink); overflow-wrap: anywhere; }
.tl-rep-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tl-rep-item { padding: 10px 12px; background: var(--loea-card);
border: 1px solid var(--loea-line); border-left: 3px solid var(--loea-brass); border-radius: var(--loea-radio-chico); }
.tl-rep-solo { border-left-color: var(--loea-line); }
.tl-rep-item p { margin: 0; }
.tl-rep-que { font-size: 12.5px; }
.tl-rep-detalle { margin-top: 4px; font-size: 11.5px; line-height: 1.45; color: var(--loea-mut-2); }
/* ── «Modernizar fórmula» (21 sep 2026) ───────────────────────────────
Una tarjeta por fórmula distinta, con el antes y el después uno debajo del
otro, partidos ENTRE argumentos (`conCortes`). Lo que no se pudo comprobar
se ve apagado y sin botón: no se ofrece, y tiene que notarse. */
.tl-mod-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.tl-mod-item { padding: 11px 13px; background: var(--loea-card);
border: 1px solid var(--loea-line); border-left: 3px solid var(--loea-acc); border-radius: var(--loea-radio-chico); }
.tl-mod-item p { margin: 0; }
.tl-mod-item p + p, .tl-mod-item code + p { margin-top: 6px; }
.tl-mod-no { border-left-color: var(--loea-line); opacity: .8; }
.tl-mod-donde { font-size: 12.5px; color: var(--loea-ink); }
.tl-mod-cambios { font-size: 12px; line-height: 1.8; }
.tl-mod-rinde { font-size: 11px; color: var(--loea-mut-2); }
.tl-mod-rotulo { font: 600 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--loea-mut-2); }
.tl-mod-formula { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 12px;
color: var(--loea-acc); overflow-wrap: anywhere; }
/* En gris y SIN tachar: tachada, la de antes no se puede comparar letra a
letra con la de después, que es para lo que está (navegador, 21 sep 2026). */
.tl-mod-antes { color: var(--loea-mut-2); }
.tl-mod-porque { font-size: 11.5px; line-height: 1.45; color: var(--loea-mut-2); }
.tl-mod-ok { font-size: 11.5px; color: var(--loea-si); }