/* Tipografía autoalojada: la web presume de no llamar a terceros, así que tampoco llama a Google Fonts. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Display: sólo para H1, marca y H2 de sección (ver tools/NOTAS.md, pedido 2026-09-09 tras el "se ve muy genérico" — el cuerpo y la UI de las herramientas se quedan en Inter, esto es sólo para lo grande). También autoalojada por la misma razón que Inter arriba. Variable, con eje óptico (opsz): a tamaño de titular se activa su corte de exhibición solo, sin CSS aparte. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('assets/fonts/bricolage-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('assets/fonts/bricolage-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== Herramenta — hoja de estilo única Orden: tokens · base · controles · header/footer · tool card · secciones · ads ========================================================================== */ /* ── 1. Tokens ─────────────────────────────────────────────────────────── */ :root { /* Repaleta 2026-09-06: neutros de beige cálido a gris frío, y acento de naranja a índigo — decisión del dueño tras comparar las dos direcciones en vivo (ver tools/NOTAS.md). Contraste recalculado desde cero, no heredado del naranja anterior. */ --ink: #14151a; --ink: light-dark(#14151a, #eef0f3); --ink-soft: #494c56; --ink-soft: light-dark(#494c56, #aab0bb); /* 4,66:1 sobre --surface-2 en claro; 5,14:1 en oscuro. */ --ink-faint: #686b74; --ink-faint: light-dark(#686b74, #8b8f99); --paper: #f7f8fb; --paper: light-dark(#f7f8fb, #0d0e12); --surface: #ffffff; --surface: light-dark(#ffffff, #16171d); --surface-2: #eef0f3; --surface-2: light-dark(#eef0f3, #1c1e25); --line: #dde1e7; --line: light-dark(#dde1e7, #2b2e37); --line-soft: #e7eaef; --line-soft: light-dark(#e7eaef, #23252d); --accent: #4338ca; --accent: light-dark(#4338ca, #818cf8); --accent-ink: #ffffff; --accent-ink: light-dark(#ffffff, #141033); --accent-soft:#ebeafc; --accent-soft:light-dark(#ebeafc, #1c1a35); /* A diferencia del naranja, el índigo SÍ vale como texto directo: 6,92:1 sobre --surface-2 (el peor caso), muy por encima del mínimo de 4,5. No hace falta un segundo tono — accent y accent-text son el mismo. */ --accent-text:#4338ca; --accent-text:light-dark(#4338ca, #818cf8); --ok: #0f7b52; --ok: light-dark(#0f7b52, #3ec98d); --warn: #a15c00; --warn: light-dark(#a15c00, #e0a03a); --warn-soft: #fdf5e3; --warn-soft: light-dark(#fdf5e3, #2b2314); --danger: #b4231d; --danger: light-dark(#b4231d, #f0736c); --danger-soft:#fdeceb; --danger-soft:light-dark(#fdeceb, #2e1717); --r-sm: 8px; --r: 14px; --r-lg: 22px; /* light-dark() sólo acepta colores, no una lista de box-shadow entera, así que lo que cambia de tema es el color de cada capa. En oscuro la segunda capa de --shadow-sm se apaga: sobre fondo negro un halo ancho se ve como suciedad, no como elevación. */ --shadow-sm-1: light-dark(rgba(22,21,26,.06), rgba(0,0,0,.4)); --shadow-sm-2: light-dark(rgba(22,21,26,.04), transparent); --shadow-1: light-dark(rgba(22,21,26,.05), rgba(0,0,0,.35)); --shadow-2: light-dark(rgba(22,21,26,.11), rgba(0,0,0,.5)); --shadow-sm: 0 1px 2px var(--shadow-sm-1), 0 2px 8px var(--shadow-sm-2); /* Repensada 2026-09-08 (32px→18px) y otra vez 2026-09-09 (18px→14px, más opacidad para compensar): el detector de impeccable seguía marcando "gpt-thin-border-wide-shadow" con 18px. Menos difusión todavía, más resuelto — una sombra que parece dibujada, no un halo genérico. */ --shadow: 0 1px 2px var(--shadow-1), 0 6px 14px var(--shadow-2); --wrap: 1120px; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display: "Bricolage Grotesque", var(--sans); /* light-dark() necesita saber en qué esquema está. Sin fijar nada sigue al sistema; el botón de tema (main.js, initTema) pone data-theme. */ color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ── 2. Base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } /* Bug real encontrado en el pase de diseño de 2026-09-13, no cosmético: la hoja de estilos fija `display` (block/flex/grid/inline-flex...) en varias clases que a la vez se usan sobre elementos que JS oculta con la propiedad `hidden` (.notice, .detalle-row, .lista-img, .btn, .firma-preview...). La cascada da a CUALQUIER regla de autor —por floja que sea su especificidad— prioridad sobre la hoja del navegador, así que ese `display` ganaba siempre a `[hidden]{display:none}` y el elemento se veía aunque JS lo hubiera marcado oculto. Encontrado en vivo: con un sueldo de 2.143 €/mes (muy por debajo del tope de cotización) `calculadora-sueldo-neto.html` seguía mostrando «Has superado la base máxima de cotización» porque el aviso es un `.notice` y `.notice{display:block}` tapaba su `hidden`. Mismo defecto en `#hp-comision-row` (.detalle-row), `#meta-lista` (.lista-img), `#meta-descargar-todas` (.btn) y `#firma-preview` (.firma-preview) — la única excepción que ya funcionaba por accidente era `aside.ad-toast[hidden]`, que años atrás se blindó igual que aquí. Una regla, `!important`, arriba de todo: gana a cualquier `display` que se añada después sin tener que acordarse de repetir el blindaje clase a clase. La regla de `aside.ad-toast` queda ahora redundante pero no estorba; no se ha tocado para no mezclar dos cambios en el mismo sitio. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; } h1 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.85rem); } h2 { font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.95rem); } h3 { font-size: 1.1rem; } /* Título de sección (no las etiquetas pequeñas de panel ni el

del diálogo de anuncio: esos son roles de UI, no titulares). */ .section > .wrap > h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; } p { margin: 0 0 1em; } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; } img, canvas, svg { max-width: 100%; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Lo que dibuja el navegador y no habíamos vestido: selección, cursor de texto y barras de desplazamiento. Salen de los mismos tokens, así que siguen al tema claro/oscuro sin reglas aparte. */ ::selection { background: var(--accent-soft); color: var(--ink); } input, textarea { caret-color: var(--accent); } /* El flash gris por defecto al tocar un enlace en móvil tampoco es nuestro: mismo criterio que la selección de texto y el cursor de arriba. */ html { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 22%, transparent); } html { scrollbar-color: var(--line) var(--surface-2); scrollbar-width: thin; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--surface-2); } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid var(--surface-2); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Oculta como .sr-only hasta que recibe foco de teclado (Tab): entonces se planta arriba a la izquierda, visible, para saltar los 7 enlaces de nav antes de llegar al contenido. Sin esto, cada página exige tabular por toda la cabecera para llegar a lo que trajo a la persona aquí. */ .skip-link { position: absolute; top: -3rem; left: .75rem; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: .6rem 1.1rem; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: .75rem; } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* ── 3. Controles ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600; line-height: 1.3; padding: .8rem 1.2rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .1s ease; } .btn:hover { border-color: var(--ink-faint); } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--primary:hover { filter: brightness(1.06); border-color: var(--accent); } .btn--big { padding: 1.05rem 1.6rem; font-size: 1.05rem; border-radius: var(--r); } .btn--link { background: none; border: none; padding: .4rem 0; color: var(--accent-text); text-decoration: underline; cursor: pointer; } .field { display: block; margin-bottom: 1rem; } .field > .label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-soft); margin-bottom: .35rem; } .field .hint { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: .3rem; } /* Avisos de validación (main.js, validarCampo). Dos niveles a propósito: "error" es que no se ha entendido lo escrito, "ajuste" es que sí se ha entendido pero se ha topado con un límite. Pintar los dos de rojo haría que tocar el tope pareciera un fallo del usuario. */ .campo-aviso { display: flex; gap: .35rem; align-items: baseline; font-size: .78rem; font-weight: 500; margin-top: .35rem; } .campo-aviso::before { font-weight: 700; } .campo-aviso[data-tipo="error"] { color: var(--danger); } .campo-aviso[data-tipo="error"]::before { content: "!"; } .campo-aviso[data-tipo="ajuste"] { color: var(--ink-soft); } .campo-aviso[data-tipo="ajuste"]::before { content: "→"; } input.is-invalido { border-color: var(--danger); } input.is-invalido:focus { outline-color: var(--danger); border-color: var(--danger); } /* El ajuste no tiñe el borde: el dato es válido, sólo se ha recortado. */ input.is-ajustado { border-color: var(--ink-faint); } input[type="text"], input[type="url"], input[type="password"], input[type="number"], select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .85rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } /* El salto de contenido y el botón de volver arriba mueven el foco a
. Es un destino, no un control: el anillo ahí sólo desconcierta. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } /* Alto contraste de Windows: los colores de marca se descartan y el foco de acento desaparece. CanvasText es el único color garantizado. */ @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } .btn, .arriba, input, select, textarea { border: 1px solid CanvasText; } input.is-invalido { border: 2px solid CanvasText; } } input[type="range"] { width: 100%; accent-color: var(--accent); } input[type="color"] { width: 100%; height: 44px; padding: 3px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); } input[type="file"] { font-size: .85rem; } /* Selector de color + su hex escribible al lado: el `` a solas obliga a acertar un tono a base de arrastrar el cursor por una rueda — quien busca su color de marca exacto ("#E63946") lo escribe una vez y ya. El propio swatch se encoge a 44px (mismo alto que .icon-btn) en vez de ocupar toda la fila; el texto se lleva el resto. */ .color-input { display: flex; gap: .5rem; } .color-input input[type="color"] { width: 44px; flex: none; } .color-input input.hex { flex: 1; min-width: 0; text-transform: uppercase; } .color-pair { display: flex; align-items: flex-end; gap: .6rem; } .color-pair .field { flex: 1; min-width: 0; } .color-swap { flex: none; margin-bottom: 1px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-soft); } .color-swap:hover { color: var(--ink); border-color: var(--ink-faint); } .color-swap svg { width: 18px; height: 18px; transition: transform .2s ease; } .color-swap:active svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .color-swap:active svg { transform: none; } } .segmented { display: flex; flex-wrap: wrap; gap: .4rem; } .segmented input { position: absolute; opacity: 0; pointer-events: none; } .segmented label { flex: 1 1 auto; min-width: max-content; text-align: center; padding: .55rem .8rem; font-size: .88rem; font-weight: 600; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; } .segmented label:hover { border-color: var(--ink-faint); } .segmented label:active { transform: scale(.96); } .segmented input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } @media (prefers-reduced-motion: reduce) { .segmented label:active { transform: none; } } .segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── 4. Header / footer ────────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--line-soft); background: var(--paper); position: sticky; top: 0; z-index: 40; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--ink); text-decoration: none; letter-spacing: -.02em; } .brand svg { width: 26px; height: 26px; color: var(--accent); } .site-header nav { display: flex; gap: 1.2rem; font-size: .92rem; font-weight: 600; } .site-header nav a { color: var(--ink-soft); text-decoration: none; } .site-header nav a:hover { color: var(--accent-text); } .site-header nav a[aria-current="page"] { color: var(--accent-text); } /* Menú plegable (main.js, initMenu). Las siete herramientas no caben en una línea por debajo de ~920 px: en vez de una tira que se corta, un botón «Menú» que despliega la lista entera bajo la cabecera. Sin JavaScript (html.no-js) se queda la tira desplazable de siempre. */ .menu-btn { display: none; align-items: center; gap: .45rem; margin-left: auto; min-height: 40px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } .menu-btn svg { width: 18px; height: 18px; } .menu-btn .menu-btn__cerrar { display: none; } .menu-btn[aria-expanded="true"] .menu-btn__abrir { display: none; } .menu-btn[aria-expanded="true"] .menu-btn__cerrar { display: block; } .menu-btn:active { transform: scale(.96); transition-duration: .09s; } .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .menu-btn:hover { border-color: var(--accent); } } @media (max-width: 920px) { html:not(.no-js) .menu-btn { display: inline-flex; } html:not(.no-js) .site-header .tema-btn { margin-left: 0; } html:not(.no-js) .site-header nav.menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: .4rem max(1.25rem, (100% - var(--wrap)) / 2) 1rem; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(15, 14, 20, .12); font-size: 1rem; overflow: visible; -webkit-mask-image: none; mask-image: none; max-height: calc(100dvh - 100%); overflow-y: auto; } html:not(.no-js) .site-header.is-menu-abierto nav.menu { display: flex; animation: menu-in .18s cubic-bezier(.22,.61,.36,1); } html:not(.no-js) .site-header nav.menu a { display: flex; align-items: center; min-height: 48px; padding: .2rem 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); white-space: normal; } html:not(.no-js) .site-header nav.menu a:last-child { border-bottom: 0; } html:not(.no-js) .site-header nav.menu a[aria-current="page"] { color: var(--accent-text); } html:not(.no-js) .site-header nav.menu a[aria-current="page"]::after { content: "Estás aquí"; margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--ink-faint); } } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .site-header.is-menu-abierto nav.menu { animation: none !important; } } @media print { .menu-btn { display: none !important; } } /* Botón de tema (main.js, initTema). Va suelto en .wrap, no dentro del