/*
* Sistema de diseño JMF: común a josemariafernandez.es y a app.josemariafernandez.es (jmfapp).
*
* Fuente de verdad: este fichero, en el repositorio de la web. jmfapp lo copia con
* scripts/sincronizar-diseno.sh; no se edita la copia. Cada proyecto añade después su propia hoja
* (site.css en la web, app.css en la app) con lo que solo usa él.
*
* Principios:
* - Máxima legibilidad: Atkinson Hyperlegible Next, texto base de 18,7 px, interlineado 1,7,
* líneas de 68 caracteres como máximo.
* - Contraste WCAG 2.2 AAA: todo texto, en modo claro y oscuro y sobre cualquier fondo del sistema,
* llega a 7:1; bordes de controles, iconos y foco, a 3:1 o más (1.4.11).
* - Foco siempre visible, objetivos táctiles de 44 px, respeto a movimiento reducido y a colores
* forzados. El color nunca es el único portador de significado.
* - Nombres de clase en inglés, los mismos en los dos proyectos.
*/
@layer reset, tokens, base, layout, components, content, utilities;
/* ---------- Fuente (subconjunto latino en woff2, en /fonts) ---------- */
@font-face {
font-family: 'Atkinson Hyperlegible Next';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/atkinson-hyperlegible-next-latin-400-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
}
/* ---------- Reset mínimo ---------- */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
}
/* ---------- Tokens ---------- */
@layer tokens {
:root {
color-scheme: light dark;
/* Tipografía */
--font: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--text-base: 1.1667rem;
--text-sm: 1.0625rem; /* 17 px: mínimo para textos secundarios */
--text-lg: 1.375rem;
--text-xl: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
--text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
--text-3xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
--leading: 1.7;
--leading-tight: 1.2;
--measure: 68ch;
/* Espaciado */
--space-1: .25rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4.5rem;
--gutter: clamp(1rem, .5rem + 2.5vw, 2rem);
--container: 80rem;
/* Formas */
--radius-sm: .5rem;
--radius: .875rem;
--radius-full: 999px;
--target: 2.75rem; /* 44 px */
--focus-width: 3px;
/*
* Color: modo claro. Contrastes comprobados (docs/sistema-diseno.md):
* texto, texto secundario y acento sobre bg, bg-soft, bg-raised y accent-soft: 7:1 o más.
*/
--bg: #ffffff;
--bg-soft: #f2f6f9;
--bg-raised: #ffffff;
--text: #15202b; /* 16,5:1 */
--text-muted: #46525f; /* 8,0:1 */
--line: #d3dce5; /* separadores decorativos */
--line-strong: #6b7a89; /* bordes de controles: 4,4:1 */
--accent: #005682; /* 7,9:1 */
--accent-hover: #003a58;
--accent-soft: #edf5fa; /* acento sobre él: 7,2:1 */
--on-accent: #ffffff;
--focus: #005682;
--band: #005682;
--band-text: #ffffff;
--band-muted: #eef5fa; /* sobre --band: 7,2:1 */
--footer-bg: #15202b;
--footer-text: #d5dde5;
--mark: #fff3b0;
--error: #8f1220;
--error-bg: #fdf0f1;
--ok: #1c5a2c;
--ok-bg: #eef7f0;
--warn: #5c4300;
--warn-bg: #fff6db;
--shadow: 0 1px 2px rgb(21 32 43 / .06), 0 8px 24px rgb(21 32 43 / .08);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f161d;
--bg-soft: #16212b;
--bg-raised: #18242f;
--text: #e9eef3;
--text-muted: #b1bfcc;
--line: #2c3a47;
--line-strong: #6f8193;
--accent: #84c8ef;
--accent-hover: #b3dcf5;
--accent-soft: #112d43;
--on-accent: #0b1218;
--focus: #84c8ef;
--band: #123a52;
--band-text: #ffffff;
--band-muted: #c4dcea;
--footer-bg: #0a0f14;
--footer-text: #c3ced8;
--mark: #5c4d00;
--error: #ffb3ba;
--error-bg: #2a1518;
--ok: #a6e3b4;
--ok-bg: #13241a;
--warn: #ffd77a;
--warn-bg: #2a2210;
--shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .35);
}
}
}
/* ---------- Base ---------- */
@layer base {
html { scroll-padding-top: var(--space-6); }
body {
min-width: 20rem;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: var(--text-base);
line-height: var(--leading);
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--leading-tight); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p, li { text-wrap: pretty; }
strong, b { font-weight: 700; }
a { color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: .14em; }
mark { background: var(--mark); color: inherit; padding-inline: .15em; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 3px; border-radius: 2px; }
/* Destinos de foco por programa (main, h1 y títulos con tabindex="-1"): reciben el foco para
que el lector de pantalla anuncie dónde se está, pero no son controles: sin anillo. */
[tabindex="-1"]:focus { outline: none; }
hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-7); }
code, kbd, pre { font-family: var(--font-mono); font-size: .9em; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: var(--space-2); font-weight: 700; }
}
/* ---------- Estructura ---------- */
@layer layout {
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
}
/* ---------- Componentes ---------- */
@layer components {
/* Salto al contenido */
.skip-link {
position: absolute; z-index: 100; inset: var(--space-2) auto auto var(--space-2);
padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
background: var(--accent); color: var(--on-accent); font-weight: 700;
transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
/* Botones. Siempre con una variante de color: primary, secondary, danger o link. */
.button {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: var(--target); padding: var(--space-2) var(--space-5);
border: 2px solid transparent; border-radius: var(--radius-full);
font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
transition: background-color .15s, color .15s, border-color .15s;
}
.button-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.button-secondary { background: transparent; border-color: var(--accent); color: var(--accent); }
.button-secondary:hover { background: var(--accent-soft); color: var(--accent-hover); }
.button-danger { background: transparent; border-color: var(--error); color: var(--error); }
.button-danger:hover { background: var(--error); border-color: var(--error); color: var(--bg); }
.button-link { min-height: var(--target); padding: var(--space-2); background: none; border: 0; color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.button-inverse { background: #fff; border-color: #fff; color: #003a58; }
.button-inverse:hover { background: #e1eef6; border-color: #e1eef6; color: #003a58; }
.button-large { min-height: 3.25rem; padding-inline: var(--space-6); font-size: var(--text-lg); }
.button-small { font-size: var(--text-sm); padding-inline: var(--space-4); }
/* Solo icono: necesita nombre accesible (aria-label o texto .visually-hidden). */
.button-icon { min-width: var(--target); padding: var(--space-2); }
.button:disabled, .button[aria-disabled='true'] { opacity: .6; cursor: not-allowed; }
.button-primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.button-secondary:disabled:hover { background: transparent; color: var(--accent); }
/* Campos */
.input {
display: block; width: 100%; min-height: var(--target); padding: var(--space-2) var(--space-4);
background: var(--bg-raised); color: var(--text);
border: 2px solid var(--line-strong); border-radius: var(--radius-full);
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:focus-visible { border-color: var(--focus); outline-offset: 2px; }
.input[aria-invalid='true'], .input.input-validation-error { border-color: var(--error); }
textarea.input { min-height: 10rem; border-radius: var(--radius); resize: vertical; }
select.input { padding-right: var(--space-6); }
input[type='file'].input { border-radius: var(--radius); }
.field { margin-bottom: var(--space-5); }
.field > label, .label { display: block; margin-bottom: var(--space-2); font-weight: 700; }
.hint { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.field-error, .field-validation-error { display: block; margin-top: var(--space-1); color: var(--error); font-weight: 700; }
.required-mark { color: var(--error); }
.check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--target); }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: .2rem 0 0; accent-color: var(--accent); }
.check label { font-weight: 400; margin: 0; }
.input-group { display: flex; gap: var(--space-3); }
.input-group > .input { flex: 1; }
.form { max-width: 40rem; }
/* Opciones exclusivas con aspecto de botón: .
El radio nativo queda visible dentro de la píldora (se recorre con flechas y muestra su foco). */
.options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.option {
display: inline-flex; align-items: center; gap: var(--space-2);
min-height: var(--target); padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
border: 2px solid var(--accent); border-radius: var(--radius-full);
color: var(--accent); font-weight: 700; cursor: pointer;
}
.option input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.option:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.option:has(input:checked) input { accent-color: var(--on-accent); }
/* Sobre la píldora marcada el foco va en el color del texto (7,9:1), no en el del fondo. */
.option:has(input:checked) input:focus-visible { outline-color: var(--on-accent); }
.option:hover:not(:has(input:checked)) { background: var(--accent-soft); color: var(--accent-hover); }
/* Avisos: el tipo siempre se dice con texto («Error:», «Hecho:»), el color solo lo refuerza. */
.notice {
margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5);
border-left: .375rem solid var(--line-strong); border-radius: var(--radius-sm);
background: var(--bg-soft); color: var(--text);
}
.notice > :last-child { margin-bottom: 0; }
.notice a { color: inherit; }
.notice-success { border-left-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.notice-error, .validation-summary-errors { border-left-color: var(--error); background: var(--error-bg); color: var(--error); }
.notice-warning { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.notice-info { border-left-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.validation-summary-errors { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border-left: .375rem solid var(--error); border-radius: var(--radius-sm); }
.validation-summary-errors ul { margin: 0; padding-left: var(--space-5); }
.validation-summary-valid { display: none; }
/* Insignias: etiquetas cortas, siempre con texto. */
.badge {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: 0 var(--space-2); border: 1px solid currentColor; border-radius: var(--radius-sm);
background: var(--bg-soft); color: var(--text);
font-size: var(--text-sm); font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.badge-success { background: var(--ok-bg); color: var(--ok); }
.badge-error { background: var(--error-bg); color: var(--error); }
.badge-warning { background: var(--warn-bg); color: var(--warn); }
/* Cabecera: logotipo JMF en braille, menú principal y botón «Menú» en pantallas estrechas. */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding-block: var(--space-3); }
.brand { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.logo-symbol { flex-shrink: 0; width: 2.75rem; height: 2.75rem; }
.logo-bg { fill: var(--accent); }
.logo-fg { fill: var(--on-accent); }
.logo-cell { opacity: .3; }
.brand:hover .logo-bg { fill: var(--accent-hover); }
.brand-name { display: flex; flex-direction: column; font-size: 1.1667rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.menu-toggle, .header-button {
display: none; align-items: center; justify-content: center; gap: var(--space-2); min-width: var(--target); min-height: var(--target);
padding: var(--space-2) var(--space-4); background: transparent; color: var(--text);
border: 2px solid var(--line-strong); border-radius: var(--radius-full); font-weight: 700;
}
.header-button { display: inline-flex; }
.menu-toggle:hover, .header-button:hover { border-color: var(--accent); color: var(--accent); }
.header-button[aria-expanded='true'] { border-color: var(--accent); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-toggle[aria-expanded='true'] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded='true'] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
.nav-list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.nav-link {
display: flex; align-items: center; min-height: var(--target); padding: var(--space-1) var(--space-3);
border-radius: var(--radius-sm); color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.nav-link:hover { background: var(--bg-soft); color: var(--accent); }
.nav-link[aria-current='page'] { background: var(--accent-soft); color: var(--accent-hover); box-shadow: inset 0 -3px 0 var(--accent); }
/* Menú plegado en pantallas estrechas, solo si hay JavaScript (clase .js en ). */
@media (max-width: 71.99em) {
.js .menu-toggle { display: inline-flex; }
.site-nav { order: 1; flex-basis: 100%; }
.js .site-nav:not([data-open='true']) { display: none; }
.nav-list { flex-direction: column; gap: 0; }
.nav-list li + li { border-top: 1px solid var(--line); }
.nav-link { min-height: 3.25rem; padding-inline: var(--space-2); font-size: var(--text-lg); border-radius: 0; }
.nav-link[aria-current='page'] { box-shadow: inset 4px 0 0 var(--accent); padding-left: var(--space-4); }
}
@media (max-width: 23.99em) {
.brand { gap: var(--space-2); }
.logo-symbol { width: 2.5rem; height: 2.5rem; }
.brand-name { font-size: 1.0625rem; }
.menu-toggle { padding-inline: var(--space-3); }
}
/* Paginación: enlaces (web) o botones (app). La página actual lleva aria-current="page". */
.pagination ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.page-link {
display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target);
padding-inline: var(--space-3); background: transparent; border: 2px solid var(--line-strong); border-radius: var(--radius-full);
color: var(--accent); font-weight: 700; text-decoration: none;
}
a.page-link:hover, button.page-link:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); }
button.page-link:disabled { opacity: .6; cursor: not-allowed; }
.page-link[aria-current='page'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Tablas de datos. El contenedor desplazable lleva role="region", nombre y tabindex="0". */
.table-wrap { overflow-x: auto; margin-bottom: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table caption { padding: var(--space-3) var(--space-4); text-align: left; font-weight: 700; caption-side: top; }
.data-table :where(th, td) { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th { background: var(--bg-soft); border-top: 0; white-space: nowrap; }
.data-table tbody tr:hover { background: var(--bg-soft); }
.data-table code { color: var(--text); overflow-wrap: anywhere; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Diálogos nativos (