/* Self-hosted Google Fonts (SIL Open Font License 1.1), latin + latin-ext subsets. Generated once; see docs/licencias.md. */
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/AtkinsonHyperlegible-400i-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/AtkinsonHyperlegible-400i-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;
}
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/AtkinsonHyperlegible-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/AtkinsonHyperlegible-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/AtkinsonHyperlegible-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/AtkinsonHyperlegible-700-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;
}
/* latin-ext */
@font-face {
  font-family: 'Gentium Book Plus';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/GentiumBookPlus-400i-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Gentium Book Plus';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/GentiumBookPlus-400i-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;
}
/* latin-ext */
@font-face {
  font-family: 'Gentium Book Plus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/GentiumBookPlus-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Gentium Book Plus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/GentiumBookPlus-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/IBMPlexMono-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/IBMPlexMono-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/IBMPlexMono-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/IBMPlexMono-700-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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/LibreCaslonDisplay-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/LibreCaslonDisplay-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/LibreCaslonText-400i-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/LibreCaslonText-400i-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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/LibreCaslonText-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/LibreCaslonText-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/LibreCaslonText-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/LibreCaslonText-700-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;
}

/* GENERADO desde tokens/tokens.json por scripts/build.py. No editar: el diseño se cambia en tokens.json (ADR 0021). */
:root{
  --desk:#e6eaf0;
  --desk-2:#d9dfe8;
  --paper:#fdfdfb;
  --paper-2:#f3f5f8;
  --paper-3:#eaeef3;
  --ink:#17202e;
  --ink-2:#465165;
  --ink-3:#586275;
  --line:#7e868f;
  --line-2:#e1e6ed;
  --rule-red:#c4353d;
  --rule-blue:#c2d2e8;
  --accent:#24487b;
  --accent-2:#3a63a0;
  --accent-soft:#dfe8f5;
  --on-accent:#ffffff;
  --gold:#8c5f00;
  --gold-2:#ae8000;
  --gold-soft:#f5e7c2;
  --good:#14673a;
  --good-soft:#dbeee2;
  --warn:#9a5800;
  --warn-soft:#f7e7c9;
  --bad:#980d24;
  --bad-soft:#f6dadc;
  --seq-0:#e9edf3;
  --seq-1:#c9d8ec;
  --seq-2:#7494bd;
  --seq-3:#4f7fbf;
  --seq-4:#24487b;
  --hero-bg:#17202e;
  --hero-fg:#fdfdfb;
  --shadow:0 1px 0 rgba(23,32,46,.05),0 10px 24px -14px rgba(23,32,46,.35);
  --shadow-lift:0 2px 0 rgba(23,32,46,.05),0 18px 36px -16px rgba(23,32,46,.45);
  --on-bad:#ffffff;
  --on-rule-red:#ffffff;
  --overlay-sheet:rgba(8,12,20,.45);
  --overlay-modal:rgba(8,12,20,.5);
  --hero-eyebrow:color-mix(in srgb,var(--hero-fg) 65%,transparent);
  --hero-caption:color-mix(in srgb,var(--hero-fg) 72%,transparent);
  --hero-track:color-mix(in srgb,var(--hero-fg) 12%,transparent);
  --shadow-thumb:0 1px 2px rgba(0,0,0,.3);
  --mark:#f5e7c2;
  --on-mark:#17202e;
  --focus:#24487b;
  --f-display:"Libre Caslon Display","Libre Caslon Text",Georgia,"Times New Roman",serif;
  --f-serif:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --f-ui:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-ipa:"Gentium Book Plus","Gentium Plus","Charis SIL","Doulos SIL","Lucida Sans Unicode",serif;
  --f-num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r-s:6px;
  --r-m:10px;
  --r-l:16px;
  --peso-display:400;
  --anchura-display:100%;
  --tipo-headword:2rem;
  --tipo-headword-web:3rem;
  --tipo-headword-largo:1.5rem;
  --tipo-headword-largo-web:2.1rem;
  --tipo-figura:2.6rem;
  --tipo-figura-web:2.6rem;
  --borde-fino:1px;
  --borde-grueso:2px;
  --nav-w:236px;
  --tipo-66:.66rem;
  --tipo-74:.74rem;
  --tipo-78:.78rem;
  --tipo-80:.8rem;
  --tipo-82:.82rem;
  --tipo-85:.85rem;
  --tipo-88:.88rem;
  --tipo-90:.9rem;
  --tipo-95:.95rem;
  --tipo-100:1rem;
  --tipo-135:1.35rem;
  --tipo-160:1.6rem;
  --espacio-1:1px;
  --espacio-2:2px;
  --espacio-3:3px;
  --espacio-4:4px;
  --espacio-6:6px;
  --espacio-8:8px;
  --espacio-10:10px;
  --espacio-12:12px;
  --espacio-14:14px;
  --espacio-16:16px;
  --espacio-18:18px;
  --espacio-20:20px;
  --espacio-22:22px;
  --espacio-26:26px;
  --espacio-28:28px;
  --peso-regular:400;
  --peso-medio:500;
  --peso-seminegrita:600;
  --peso-negrita:700;
  --radio-3:3px;
  --radio-4:4px;
  --radio-5:5px;
  --radio-8:8px;
  --radio-9:9px;
  --radio-pildora:99px;
  --radio-circulo:50%;
  --ancho-navegacion:236px;
  --ancho-tooltip:240px;
  --ancho-carga:420px;
  --ancho-aviso:440px;
  --ancho-modal:520px;
  --ancho-hoja:720px;
  --ancho-legal:720px;
  --ancho-estudio:760px;
  --ancho-pagina:920px;
  --ancho-pagina-ancha:1120px;
  --capa-hoja-cabecera:2;
  --capa-buscador:10;
  --capa-pestanas:30;
  --capa-desplegable:40;
  --capa-hoja:50;
  --capa-modal:55;
  --capa-xp:60;
  --capa-tooltip:70;
  --capa-avisos:80;
  --duracion-80ms:80ms;
  --duracion-150ms:150ms;
  --duracion-220ms:220ms;
  --duracion-250ms:250ms;
  --duracion-280ms:280ms;
  --duracion-300ms:300ms;
  --duracion-350ms:350ms;
  --duracion-1000ms:1000ms;
  --duracion-1100ms:1100ms;
  --duracion-15000ms:15000ms;
  --duracion-19000ms:19000ms;
  --duracion-24000ms:24000ms;
  --curva-ease:ease;
  --curva-linear:linear;
  --curva-ease-in-out:ease-in-out;
  --curva-ease-out:ease-out;
}
@media (prefers-color-scheme:dark){:root:not([data-modo]){
  --desk:#0c1320;
  --desk-2:#121b2b;
  --paper:#172133;
  --paper-2:#1d2a3f;
  --paper-3:#24324a;
  --ink:#e8edf6;
  --ink-2:#b2bccd;
  --ink-3:#8f9bae;
  --line:#5d6d87;
  --line-2:#223049;
  --rule-red:#e35c62;
  --rule-blue:#26395a;
  --accent:#8db3ee;
  --accent-2:#a9c6f3;
  --accent-soft:#1f3150;
  --on-accent:#0c1320;
  --gold:#e5bb57;
  --gold-2:#f0cf7f;
  --gold-soft:#3a3122;
  --good:#63c48f;
  --good-soft:#163428;
  --warn:#feb85a;
  --warn-soft:#3b2f19;
  --bad:#f2767d;
  --bad-soft:#3e2027;
  --seq-0:#1a2539;
  --seq-1:#233c63;
  --seq-2:#3e6daa;
  --seq-3:#5d8fd3;
  --seq-4:#a9c6f3;
  --hero-bg:#223252;
  --hero-fg:#eef3fb;
  --shadow:0 1px 0 rgba(0,0,0,.25),0 12px 26px -14px rgba(0,0,0,.7);
  --shadow-lift:0 2px 0 rgba(0,0,0,.3),0 20px 40px -16px rgba(0,0,0,.8);
  --on-bad:#0c1320;
  --on-rule-red:#0c1320;
  --overlay-sheet:rgba(8,12,20,.45);
  --overlay-modal:rgba(8,12,20,.5);
  --hero-track:color-mix(in srgb,var(--hero-fg) 18%,transparent);
  --shadow-thumb:0 1px 2px rgba(0,0,0,.3);
  --mark:#3a3122;
  --on-mark:#e8edf6;
  --focus:#8db3ee;
  color-scheme:dark;
}}
:root[data-modo="oscuro"]{
  --desk:#0c1320;
  --desk-2:#121b2b;
  --paper:#172133;
  --paper-2:#1d2a3f;
  --paper-3:#24324a;
  --ink:#e8edf6;
  --ink-2:#b2bccd;
  --ink-3:#8f9bae;
  --line:#5d6d87;
  --line-2:#223049;
  --rule-red:#e35c62;
  --rule-blue:#26395a;
  --accent:#8db3ee;
  --accent-2:#a9c6f3;
  --accent-soft:#1f3150;
  --on-accent:#0c1320;
  --gold:#e5bb57;
  --gold-2:#f0cf7f;
  --gold-soft:#3a3122;
  --good:#63c48f;
  --good-soft:#163428;
  --warn:#feb85a;
  --warn-soft:#3b2f19;
  --bad:#f2767d;
  --bad-soft:#3e2027;
  --seq-0:#1a2539;
  --seq-1:#233c63;
  --seq-2:#3e6daa;
  --seq-3:#5d8fd3;
  --seq-4:#a9c6f3;
  --hero-bg:#223252;
  --hero-fg:#eef3fb;
  --shadow:0 1px 0 rgba(0,0,0,.25),0 12px 26px -14px rgba(0,0,0,.7);
  --shadow-lift:0 2px 0 rgba(0,0,0,.3),0 20px 40px -16px rgba(0,0,0,.8);
  --on-bad:#0c1320;
  --on-rule-red:#0c1320;
  --overlay-sheet:rgba(8,12,20,.45);
  --overlay-modal:rgba(8,12,20,.5);
  --hero-track:color-mix(in srgb,var(--hero-fg) 18%,transparent);
  --shadow-thumb:0 1px 2px rgba(0,0,0,.3);
  --mark:#3a3122;
  --on-mark:#e8edf6;
  --focus:#8db3ee;
  color-scheme:dark;
}
/* Layout: a lexicographer's desk. Left rail of pigeonholes on wide screens, bottom tabs on phones.
   The index slip (white card, red top rule, faint blue lines) is the hero object of every screen. */
/* The theme variables (colours, shadows, fonts, radii) and the scales (--tipo-*, --espacio-*, --peso-*, --capa-*, --duracion-*, --curva-*, --radio-*, --ancho-*) are in tokens.css,
   generated from tokens/tokens.json: change the design there. A value without a token (used fewer than 3 times, line heights, letter spacing, clamp()) is written here as is. */

*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--desk);color:var(--ink);font:16px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--f-serif);font-weight:var(--peso-negrita);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem)}
h2{font-size:var(--tipo-135)}
h3{font-size:1.08rem}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radio-4)}
[hidden]{display:none!important}  /* an author display (.panel grid, .btn flex...) must never beat the hidden attribute */
@media (hover:none),(pointer:coarse){kbd,.kbd{display:none!important}}  /* the keyboard shortcuts are seen with a fine pointer only: a phone has no keyboard (E-009, ADR 0031); like [hidden], an author display of a look must not beat it */
[data-solo-tema]{display:none}  /* data that the screens carry for the looks that paint it (docs/diseno/marcado-comun.md); a look shows it from its own sheet, so this one has no !important */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.live{top:0;left:0}   /* the hidden line for screen readers sits at the top of the page, not after the content, so it does not make the page taller */
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.eyebrow{font-size:var(--tipo-74);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:var(--peso-negrita)}

/* ------------------------------------------------------------------ shell */
.app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:100%}
.nav{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:100dvh;display:flex;flex-direction:column;gap:var(--espacio-4);padding:var(--espacio-22) var(--espacio-14);border-right:1px solid var(--line-2);background:var(--desk-2)}
.brand{display:flex;flex-direction:column;gap:var(--espacio-2);padding:0 var(--espacio-10) var(--espacio-18)}
.brand b{font-family:var(--f-display);font-weight:var(--peso-regular);font-size:1.9rem;letter-spacing:-.01em;line-height:1}
.brand b i{font-family:var(--f-serif);font-style:italic;color:var(--rule-red)}
.brand span{font-size:var(--tipo-78);color:var(--ink-3)}
.nav a{display:flex;align-items:center;gap:var(--espacio-12);padding:9px var(--espacio-12);border-radius:var(--r-m);color:var(--ink-2);text-decoration:none;font-weight:var(--peso-negrita);font-size:var(--tipo-95)}
.nav a svg{width:20px;height:20px;flex:none}
.nav a:hover{background:var(--paper-3);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.nav a .count{margin-left:auto;font-family:var(--f-num);font-size:var(--tipo-78);background:var(--rule-red);color:var(--on-rule-red);border-radius:var(--radio-pildora);padding:var(--espacio-1) 7px}
.nav .spacer{flex:1}
.nav .hoardmeter{padding:var(--espacio-12);border-radius:var(--r-m);background:var(--paper);box-shadow:var(--shadow);display:grid;gap:var(--espacio-6)}
.hoardmeter .big{font-family:var(--f-display);font-size:1.7rem;line-height:1}
.main{min-width:0;padding-block:var(--espacio-28) 96px;padding-inline:clamp(16px,4vw,48px)}
.page{max-width:var(--ancho-pagina);margin:0 auto;display:grid;gap:var(--espacio-22)}
.page.wide{max-width:var(--ancho-pagina-ancha)}
.tabs{display:none}
@media (max-width:899px){
  .app{grid-template-columns:minmax(0,1fr)}
  .today .fig b{font-size:var(--tipo-figura)}
  .nav{display:none}
  .main{padding-block:var(--espacio-18) calc(90px + env(safe-area-inset-bottom,0px));padding-inline:var(--espacio-16)}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--capa-pestanas);background:var(--desk-2);border-top:1px solid var(--line-2);padding:var(--espacio-6) var(--espacio-4) calc(6px + env(safe-area-inset-bottom,0px))}
  .tabs a{display:flex;flex-direction:column;align-items:center;gap:var(--espacio-2);font-size:.7rem;font-weight:var(--peso-negrita);color:var(--ink-3);text-decoration:none;padding:var(--espacio-4) 0;border-radius:var(--radio-8);position:relative}
  .tabs a svg{width:22px;height:22px}
  .tabs a[aria-current="page"]{color:var(--accent)}
  .tabs a .dot{position:absolute;top:2px;right:calc(50% - 18px);min-width:16px;height:16px;border-radius:var(--radio-9);background:var(--rule-red);color:var(--on-rule-red);font:var(--peso-negrita) .62rem/16px var(--f-ui);text-align:center;padding:0 var(--espacio-4)}
}
.mobilehead{display:flex;align-items:center;justify-content:space-between;gap:var(--espacio-12)}   /* the head of Hoy: the brand (on a phone only) and the appearance selector, on the right */
.mobilehead b{font-family:var(--f-display);font-weight:var(--peso-regular);font-size:var(--tipo-160);line-height:1}
.mobilehead b i{font-family:var(--f-serif);font-style:italic;color:var(--rule-red)}
@media not all and (max-width:899px){.mobilehead b{display:none}}   /* a wide screen: the side bar has the brand, and the selector stays on the right (margin-left:auto) */
.mobilehead .apar{margin-left:auto}
/* the header of appearance is on every screen of the list (ADR 0027): on a phone it stays on top and hides going down, shows again going up a little (the class `oculta` is set by
   cabeceraAspecto). Hoy keeps it where it was: its page is short and it scrolls away with it. The strip below it (box-shadow, no layout) keeps the text from touching it. */
@media (max-width:899px){
  .main:not([data-pantalla="hoy"]) .mobilehead{position:sticky;top:0;z-index:var(--capa-desplegable);background:var(--desk);box-shadow:0 var(--espacio-8) 0 var(--desk);transition:transform var(--duracion-220ms) var(--curva-ease)}
  .main:not([data-pantalla="hoy"]) .mobilehead.oculta{transform:translateY(calc(-100% - var(--espacio-8)))}
}

/* ------------------------------------------------------------------ controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--espacio-8);min-height:44px;padding:0 var(--espacio-18);border-radius:var(--r-m);border:1px solid transparent;background:var(--accent);color:var(--on-accent);font-weight:var(--peso-negrita);letter-spacing:.01em;transition:transform var(--duracion-80ms) var(--curva-ease),background var(--duracion-150ms) var(--curva-ease),box-shadow var(--duracion-150ms)}
.btn:hover{background:var(--accent-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--paper-3)}
.btn.soft{background:var(--accent-soft);color:var(--ink)}
.btn.soft:hover{background:var(--paper-3)}
.btn.gold{background:var(--gold);color:var(--paper)}
.btn.gold:hover{background:color-mix(in oklab,var(--gold) 85%,var(--ink))}
.btn.danger{background:var(--bad);color:var(--on-bad)}
.btn.small{min-height:34px;padding:0 var(--espacio-12);font-size:var(--tipo-88)}
.btn.big{min-height:56px;padding:0 var(--espacio-26);font-size:1.06rem;border-radius:var(--r-l)}
.btn.block{width:100%}
.btn svg{width:18px;height:18px}
.iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--radio-circulo);border:1px solid var(--line);background:var(--paper);color:var(--ink-2)}
.iconbtn:hover{color:var(--ink);background:var(--paper-3)}
.iconbtn svg{width:19px;height:19px}
.iconbtn.small{width:32px;height:32px}
.iconbtn.small svg{width:16px;height:16px}
.row-actions{display:flex;flex-wrap:wrap;gap:var(--espacio-8)}
.row-actions.center{justify-content:center}
.chips{display:flex;flex-wrap:wrap;gap:var(--espacio-6)}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--ink-2);border-radius:var(--radio-pildora);padding:5px var(--espacio-12);font-size:.84rem;font-weight:var(--peso-negrita);min-height:32px}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.input{width:100%;min-height:46px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--paper);padding:0 var(--espacio-14)}
.input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.input::placeholder{color:var(--ink-3);opacity:1}
.input.code{font-size:1.6rem;letter-spacing:.4em;text-align:center;max-width:12rem}
textarea.input{padding:var(--espacio-12) var(--espacio-14);min-height:110px;resize:vertical;line-height:1.5}
select.input{appearance:auto}
.field{display:grid;gap:var(--espacio-6)}
.field label{font-weight:var(--peso-negrita);font-size:var(--tipo-90)}
.hint{font-size:var(--tipo-82);color:var(--ink-3)}
.field .hint{font-size:var(--tipo-82);color:var(--ink-3)}
.field .range-head{display:flex;justify-content:space-between}
.hint.bad{color:var(--bad)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:var(--espacio-14);padding:var(--espacio-12) 0;border-bottom:1px solid var(--line-2)}
.switch:last-child{border-bottom:0}
.switch.flush{border-bottom:0;padding-bottom:0}
.switch input[type=checkbox]{appearance:none;width:44px;height:26px;border-radius:var(--radio-pildora);background:var(--line);position:relative;flex:none;transition:background var(--duracion-150ms)}
.switch input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radio-circulo);background:var(--paper);box-shadow:var(--shadow-thumb);transition:transform var(--duracion-150ms)}
.switch input[type=checkbox]:checked{background:var(--accent)}
.switch input[type=checkbox]:checked::after{transform:translateX(18px)}
input[type=range]{width:100%;accent-color:var(--accent)}

/* ------------------------------------------------------------------ surfaces */
.panel{background:var(--paper);border-radius:var(--r-l);box-shadow:var(--shadow);padding:var(--espacio-20);display:grid;gap:var(--espacio-14);min-width:0}
.panel.flat{box-shadow:none;border:1px solid var(--line-2)}
.panel h2{display:flex;align-items:baseline;justify-content:space-between;gap:var(--espacio-12);flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espacio-16)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--espacio-16)}
@media (max-width:720px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--espacio-6) var(--espacio-14);font-size:.92rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0}

/* ------------------------------------------------------------------ badges */
.lvl{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 var(--espacio-6);border-radius:var(--radio-5);font:var(--peso-negrita) .72rem/1 var(--f-num);letter-spacing:.02em;border:1px solid currentColor}
.lvl.A1,.lvl.A2{color:var(--good)} .lvl.B1,.lvl.B2{color:var(--accent)} .lvl.C1,.lvl.C2{color:var(--gold)} .lvl.N{color:var(--rule-red)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 var(--espacio-8);border-radius:var(--radio-5);background:var(--paper-3);color:var(--ink-2);font-size:var(--tipo-74);font-weight:var(--peso-negrita)}
.tag.reg{background:var(--gold-soft);color:var(--ink)}
.tag.cat{background:var(--accent-soft);color:var(--ink)}
.pos{font-family:var(--f-serif);font-style:italic;color:var(--ink-3)}
.fdots{display:inline-flex;gap:var(--espacio-2);vertical-align:middle}
.fdots i{width:6px;height:6px;border-radius:var(--radio-circulo);background:var(--line)}
.fdots i.on{background:var(--ink-2)}
.status{display:inline-flex;align-items:center;gap:var(--espacio-6);font-size:var(--tipo-78);font-weight:var(--peso-negrita);color:var(--ink-2)}
.status::before{content:"";width:9px;height:9px;border-radius:var(--radio-circulo);background:var(--line)}
.status.learning::before{background:var(--warn)} .status.known::before{background:var(--seq-2)} .status.mastered::before{background:var(--good)} .status.treasure::before{background:var(--gold)}
/* the states of the new method (R023b § 7.7): the dot by state; «lista para examen», «por confirmar» and «suspendida» are also said in words, never only by a colour */
.status.suspendida::before{background:var(--line)} .status.aprendiendo::before{background:var(--warn)} .status.aprendida::before{background:var(--good)} .status.dada::before{background:var(--seq-2)}
.status.lista::before{background:var(--accent)} .status.por-confirmar::before{background:none;border:var(--borde-grueso) solid var(--good)}

/* ------------------------------------------------------------------ the slip */
.slip{--slip-px:clamp(18px,4vw,40px);position:relative;background:var(--paper);border-radius:var(--radio-4) var(--radio-4) var(--r-m) var(--r-m);box-shadow:var(--shadow-lift);padding:var(--espacio-28) var(--slip-px) var(--espacio-26);min-width:0}
.slip .head{margin-inline:calc(-1 * var(--slip-px));padding:0 var(--slip-px) var(--espacio-12);border-bottom:2px solid var(--rule-red)}
.slip.ruled .body{margin:0 calc(-1 * var(--slip-px)) -26px;padding:var(--espacio-4) var(--slip-px) var(--espacio-26);min-height:120px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--rule-blue) 31px,var(--rule-blue) 32px)}
.slip.listen{display:grid;place-items:center;min-height:180px}
.slip .corner{position:absolute;top:12px;right:14px;display:flex;gap:var(--espacio-6);align-items:center}
.slip .hw{font-family:var(--f-display);font-weight:var(--peso-display);font-size:clamp(var(--tipo-headword),1.4rem + 2.6vw,var(--tipo-headword-web));line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere;padding-right:64px}
.slip .hw.long{font-size:clamp(var(--tipo-headword-largo),1.15rem + 1.6vw,var(--tipo-headword-largo-web))}
.slip .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--espacio-8) var(--espacio-10);margin-top:var(--espacio-10);min-height:28px}
.ipa{font-family:var(--f-ipa);font-size:1.02rem;color:var(--ink-2)}
.ipa small{font-family:var(--f-ui);font-size:var(--tipo-66);font-weight:var(--peso-negrita);color:var(--ink-3);margin-right:var(--espacio-3);letter-spacing:.06em}
.slip .body{display:grid;gap:var(--espacio-14);margin-top:var(--espacio-20)}
.meaning{font-size:1.32rem;font-weight:var(--peso-negrita);line-height:1.35}
.meaning ol{margin:0;padding-left:1.3em;display:grid;gap:var(--espacio-4)}
.meaning.q-meaning{font-size:var(--tipo-160);padding-right:50px}
.def{color:var(--ink-2);font-style:italic}
.example{font-family:var(--f-serif);font-size:1.12rem;line-height:1.55}
.example mark{background:none;color:var(--on-mark);font-weight:var(--peso-negrita);box-shadow:inset 0 -.42em 0 var(--mark);padding:0 var(--espacio-1)}
.example .tr{display:block;font-family:var(--f-ui);font-size:var(--tipo-95);color:var(--ink-2);margin-top:var(--espacio-4)}
.example.q-blank{font-size:1.3rem}
.example.q-cloze{font-size:1.32rem}
.example.q-def{font-size:var(--tipo-135);padding-right:50px}
.example.q-sentence{font-size:var(--tipo-135)}
.example.q-center{font-size:var(--tipo-135);text-align:center}
.note{border-left:3px solid var(--rule-red);padding:var(--espacio-4) 0 var(--espacio-4) var(--espacio-12);font-size:var(--tipo-95);color:var(--ink-2)}
.note b{color:var(--ink)}
.trap{background:var(--bad-soft);border-radius:var(--r-s);padding:var(--espacio-10) var(--espacio-12);font-size:var(--tipo-95)}
.syn{display:flex;flex-wrap:wrap;gap:var(--espacio-6);align-items:center;font-size:var(--tipo-90)}
.syn button{border:0;background:var(--paper-3);border-radius:var(--radio-5);padding:var(--espacio-3) var(--espacio-8);font-size:.86rem;color:var(--ink)}
.syn button:hover{background:var(--accent-soft)}
.ant-label{margin-left:var(--espacio-8)}
.blank{display:inline-block;min-width:3.2em;border-bottom:2px solid var(--ink-2);height:1.1em;vertical-align:-2px}
.blank.sized{min-width:var(--blank-w)}

/* ------------------------------------------------------------------ study */
.study{max-width:var(--ancho-estudio);margin:0 auto;display:grid;gap:var(--espacio-16)}
.studybar{display:flex;align-items:center;gap:var(--espacio-12)}
.progress{flex:1;height:8px;border-radius:var(--radio-pildora);background:var(--paper-3);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);border-radius:var(--radio-pildora);transition:width var(--duracion-300ms) var(--curva-ease)}
.progress.gold i{background:var(--gold-2)}
.counters{display:flex;gap:var(--espacio-10);font:var(--peso-negrita) var(--tipo-82) var(--f-num)}
.counters span{display:inline-flex;align-items:center;gap:var(--espacio-4)}
.counters .n{color:var(--accent)} .counters .l{color:var(--warn)} .counters .r{color:var(--good)}
.kind{display:flex;align-items:center;justify-content:space-between;gap:var(--espacio-10);flex-wrap:wrap}
.kind-meta{display:flex;gap:var(--espacio-8);align-items:center}
.prompt-q{font-size:var(--tipo-95);color:var(--ink-2);font-weight:var(--peso-negrita)}
.answer{display:grid;gap:var(--espacio-12)}
.answerline{display:flex;gap:var(--espacio-8)}
.answerline .input{font-size:1.15rem}
.feedback{border-radius:var(--r-m);padding:var(--espacio-12) var(--espacio-14);font-weight:var(--peso-negrita);display:flex;gap:var(--espacio-10);align-items:flex-start}
.feedback.ok{background:var(--good-soft);color:var(--good)}
.feedback.close{background:var(--warn-soft);color:var(--warn)}
.feedback.bad{background:var(--bad-soft);color:var(--bad)}
.feedback span{color:var(--ink);font-weight:var(--peso-regular)}
.rates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--espacio-8)}
.rate{display:grid;justify-items:center;gap:var(--espacio-1);min-height:58px;padding:var(--espacio-6) var(--espacio-4);border-radius:var(--r-m);border:1px solid var(--line);background:var(--paper);font-weight:var(--peso-negrita)}
@media (max-width:379px){.rate{padding-inline:0;white-space:nowrap}}
@media (max-width:339px){.rate{font-size:var(--tipo-90)}}   /* the narrowest phones: the name of a rating («Otra vez» is 63.6 px wide, the inside of the button 62 px at 360) stays on one line (nowrap: at 320 px the button is 62–71 px, E-009); the side padding gives way, never the text, the number or the disc. The themes that set their own padding are not touched (encargo 017) */
.rate small{font:var(--peso-medio) var(--tipo-74) var(--f-num);color:var(--ink-3)}
.rate.again{color:var(--bad)} .rate.hard{color:var(--warn)} .rate.good{color:var(--good)} .rate.easy{color:var(--accent)}
.rate:hover{background:var(--paper-3)}
.rate.sug{box-shadow:0 0 0 2px currentColor inset}
.rate kbd,.kbd{font:var(--peso-seminegrita) var(--tipo-66) var(--f-num);color:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--radio-4);padding:0 var(--espacio-4)}
.rate kbd{margin-top:var(--espacio-4)}   /* the words and the number of a rating button never touch: scripts/pantalla_unica_test.py asks for 4 px between them */
.kbd.inherit{color:inherit;opacity:.85}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espacio-10)}
@media (max-width:560px){.options{grid-template-columns:minmax(0,1fr)}}
.opt span{overflow-wrap:anywhere;hyphens:auto}   /* a long word of a label breaks instead of sticking out of its option (E-009) */
.opt{text-align:left;min-height:56px;padding:var(--espacio-12) var(--espacio-14);border-radius:var(--r-m);border:1px solid var(--line);background:var(--paper);font-weight:var(--peso-negrita);line-height:1.3;display:flex;gap:var(--espacio-10);align-items:center}
.opt:hover{border-color:var(--accent)}
.opt kbd{flex:none}
.opt.right{background:var(--good-soft);border-color:var(--good);color:var(--ink)}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--ink)}
.opt[disabled]{cursor:default}

/* ------------------------------------------------------------------ one card, one screen (docs/diseno/temas.md § 3: the rule is the product's, not a look's)
   The study session and the games never move the page: the bar, the card and the actions fit in the window, whatever its size. The app is as tall as the window and the column
   inside is a flex column: the bar and the actions keep their size and stay at the BOTTOM (the same place before and after turning the card, where the thumb is); a card longer
   than the room scrolls INSIDE itself (`data-mas` says where there is more, see scrollHint in ui.js). The results at the end are not a card: the main scrolls for them (never
   the document). scripts/pantalla_unica_test.py proves it. */
body:has(.main[data-pantalla="sesion"]),body:has(.main[data-pantalla="juego"]){height:calc(100vh - 2 * var(--espacio-8));height:calc(100dvh - 2 * var(--espacio-8))}   /* the window less the 8 px of margin of the body (the browser's own; a look that writes body{margin:0} gives the window whole) */
.app:has(> .main[data-pantalla="sesion"]),.app:has(> .main[data-pantalla="juego"]){height:calc(100vh - 2 * var(--espacio-8));height:calc(100dvh - 2 * var(--espacio-8));min-height:0;grid-template-rows:minmax(0,1fr)}
.app:has(> .main[data-pantalla="sesion"]) > .nav,.app:has(> .main[data-pantalla="juego"]) > .nav{height:100%}
@media not all and (max-width:899px){@media (max-height:680px){.app:has(> .main[data-pantalla="sesion"]) > .nav,.app:has(> .main[data-pantalla="juego"]) > .nav{overflow-y:auto}}}
.main[data-pantalla="sesion"],.main[data-pantalla="juego"]{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.main[data-pantalla="sesion"] > .study,.main[data-pantalla="juego"] > .study{flex:1 1 auto;width:100%;min-height:0;display:flex;flex-direction:column}
:is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
:is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > *{flex:none}
:is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip{flex:0 1 auto;min-height:0;overflow-y:hidden}
:is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip[data-mas]{overflow-y:auto}   /* it scrolls only when scrollHint says it needs to (what sticks out unseen, the ink of a big letter, does not make it a scrolling region) */
:is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip + *{margin-top:auto}
/* A card that scrolls inside says where there is more (scrollHint in ui.js): a soft shadow along the edge that has more behind it */
:is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip[data-mas="abajo"]{box-shadow:var(--shadow-lift),inset 0 -14px 12px -12px var(--line)}
:is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip[data-mas="arriba"]{box-shadow:var(--shadow-lift),inset 0 14px 12px -12px var(--line)}
:is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip[data-mas="ambos"]{box-shadow:var(--shadow-lift),inset 0 14px 12px -12px var(--line),inset 0 -14px 12px -12px var(--line)}
/* After answering a multiple-choice card the options go: the card turned over already says which was right (the verdict is the line under it), and the room is for the answer and the four buttons */
.main[data-pantalla="sesion"] > .study > .answer > .options:has(> .opt[disabled]){display:none}
.main[data-pantalla="sesion"] > .study > .answer > .slip + .options:has(> .opt[disabled]) + *{margin-top:auto}
@media not all and (max-width:899px){.main[data-pantalla="sesion"],.main[data-pantalla="juego"]{padding-bottom:var(--espacio-20)}}   /* no tabs to leave room for */
/* A low window (a phone with the browser's bars, a desktop 720 px tall): the same card, a little tighter */
@media (max-height:760px){
  .main[data-pantalla="sesion"],.main[data-pantalla="juego"]{padding-top:var(--espacio-12)}
  .main[data-pantalla="sesion"] > .study,.main[data-pantalla="juego"] > .study{gap:var(--espacio-8)}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer{gap:var(--espacio-8)}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip{padding-block:var(--espacio-14)}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip .meta{margin-top:var(--espacio-6);min-height:0;row-gap:0}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip .body{margin-top:var(--espacio-10);gap:var(--espacio-8)}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip .body > .def{order:1}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip .body > .note{order:2}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip .body > .syn{order:3}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer .rate{position:relative;min-height:48px;padding-block:var(--espacio-4)}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer .rate kbd{position:absolute;bottom:var(--espacio-3);right:var(--espacio-3);border:0;padding:0}   /* the corner of the line of the interval, not of the name: the name is centred and wide, the interval short */
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .feedback{padding-block:var(--espacio-8)}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .kind{flex-wrap:nowrap}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer > .slip .body > .example{font-size:var(--tipo-100)}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer .pairs{gap:var(--espacio-6)}
  :is(.main[data-pantalla="sesion"],.main[data-pantalla="juego"]) > .study > .answer .tile{min-height:48px;padding-block:var(--espacio-6)}
  .main[data-pantalla="sesion"] > .study > .answer.examen > .options > .opt{min-height:48px;padding-block:var(--espacio-6)}
  .main[data-pantalla="sesion"] > .study > .answer.examen > .examen-respuesta{padding-block:var(--espacio-8)}   /* the Examen keeps its 4 options with the answer: a little tighter, as the tiles */
}
@media (max-width:899px) and (max-height:760px){.main[data-pantalla="sesion"],.main[data-pantalla="juego"]{padding-bottom:calc(var(--espacio-28) * 2 + var(--espacio-10) + env(safe-area-inset-bottom,0px))}}   /* the tabs are 62 px tall: no more room than that */
/* E-006 (ADR 0029, which widens this rule for the games): on a wide window (900 px wide and 600 tall at least, where there are no tabs) the question and what is answered are ONE block,
   centred in the room under the bar of the game, instead of the answers sitting at the bottom of the window with a hole in between. The room for the notice of the answer (the feedback
   or the phrase of a look) is reserved under the options and the notice sits in it, so nothing moves when it appears. A phone, a short window and the study session keep the card as it
   was: the thumb reaches the options at the bottom. Parejas has no question above its tiles: it is not touched. */
@media not all and (max-width:899px){@media (min-height:600px){
  .main[data-pantalla="juego"] > .study > .answer:has(> .slip){flex:0 1 auto;margin-block:auto;position:relative;padding-bottom:calc(var(--espacio-28) * 2 + var(--espacio-10))}
  .main[data-pantalla="juego"] > .study > .answer:has(> .slip) > .slip{min-height:calc(3.3 * clamp(1.8rem,1.3rem + 2.4vw,2.8rem) + 2 * var(--espacio-12) + var(--espacio-28) + var(--espacio-26));align-content:center;align-content:safe center}   /* the reserve of the question: three lines (3 × 1.1, the line-height of .bigq) of the biggest letter of the games, .bigq, plus its padding (2 × 12) and the card's (28 above, 26 below); the text is centred in it (`safe`: a question taller than the reserve keeps its first line reachable), so the options stay put from one question to the next */
  @media (max-height:760px){.main[data-pantalla="juego"] > .study > .answer:has(> .slip) > .slip{min-height:calc(3.3 * clamp(1.8rem,1.3rem + 2.4vw,2.8rem) + 2 * var(--espacio-12) + 2 * var(--espacio-14))}}   /* a low window: the card is a little tighter (14 on each side) */
  .main[data-pantalla="juego"] > .study > .answer:has(> .slip) > .options{min-height:calc(2 * (2lh + 2 * var(--espacio-12)) + var(--espacio-10))}   /* the room of the options is always two rows of two lines (a question with two options, or labels that wrap, do not change the height of the block); the rows stretch to fill it (R008: no empty band under the cells, inside a frame or not), so the notice, anchored to the bottom of its reserve, sits 10 to 26 px under the options you see */
  .main[data-pantalla="juego"] > .study > .answer:has(> .slip) > .options > .opt{min-height:calc(2lh + 2 * var(--espacio-12))}   /* every option is as tall as two lines of its own letter, so a long label does not make the block taller (and the options move) from one question to the next */
  .main[data-pantalla="juego"] > .study > .answer:has(> .slip) > .slip + *{margin-top:var(--espacio-10)}
  .main[data-pantalla="juego"] > .study > .answer:has(> .slip) > :is(.feedback,.frase-respuesta){position:absolute;inset-inline:0;bottom:0;margin:0}
}
/* A very tall window (more than about 1100 px): the block sits 14 % of the height above the middle (about 35 to 44 %): the room left over stays below */
@media (min-height:1100px){
  .main[data-pantalla="juego"] > .study > .answer:has(> .slip){top:calc(100dvh * -.14)}
}
}
/* On a phone the session, the games in progress and the level test (once started) take the whole screen, with no tab bar, in every look (encargo 017; the other looks already hid it for the
   session and the games): what is left is the × of their bar. The room that the tabs took at the bottom goes back to the card. */
@media (max-width:899px){
  .app:has(> .main[data-pantalla="sesion"]) > .tabs,.app:has(> .main[data-pantalla="juego"]) > .tabs,.app:has(> .main[data-pantalla="prueba"] .studybar) > .tabs{display:none}
  .main[data-pantalla="sesion"],.main[data-pantalla="juego"],.main[data-pantalla="prueba"]:has(.studybar){padding-bottom:calc(var(--espacio-20) + env(safe-area-inset-bottom,0px))}
}
.combo{font:var(--peso-negrita) var(--tipo-90) var(--f-num);color:var(--gold)}
.xpfloat{position:fixed;z-index:var(--capa-xp);pointer-events:none;font:var(--peso-negrita) var(--tipo-100) var(--f-num);color:var(--gold);animation:xpup var(--duracion-1000ms) var(--curva-ease-out) forwards}
@keyframes xpup{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-46px)}}
.shake{animation:shake var(--duracion-350ms)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.flipin{animation:flipin var(--duracion-280ms) var(--curva-ease-out)}
@keyframes flipin{from{opacity:0;transform:translateY(8px) rotateX(8deg)}to{opacity:1;transform:none}}
.flipin.shake{animation:flipin var(--duracion-280ms) var(--curva-ease-out),shake var(--duracion-350ms);animation-composition:replace,add}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* «Completa la frase» and «Escríbela» (C-002, encargo 5; behind the switch of the method): a gap per word, never wider than the line (only in the game: the session keeps its gaps);
   the template of the word (its first letter and a dot per letter); the room of the result is kept from the start, so the field and its buttons do not move when it appears */
.main[data-pantalla="juego"] .hueco{min-width:min(var(--blank-w),100%);max-width:100%;vertical-align:bottom}   /* (min-width wins over max-width: the measured width is capped too) */
.hueco.lleno{height:auto;line-height:1.1;overflow-wrap:anywhere;border-bottom-color:var(--good);color:var(--good);font-weight:var(--peso-negrita);text-align:center}
.mj-pista{min-height:1lh;margin:0;font:var(--peso-negrita) var(--tipo-100) var(--f-num);color:var(--ink-2);overflow-wrap:anywhere}
.mj-instr{margin:0}
.molde,.mj-palabra{display:flex;flex-wrap:wrap;align-items:center;gap:var(--espacio-4) var(--espacio-12);min-height:44px;flex:0 0 auto}
/* Escríbela: the template (and, after answering, the word) right under the card, outside it, always in sight; on a phone the result and the field go together at the bottom */
.main[data-pantalla="juego"] > .study > .answer.mj-escribela > .slip + :is(.molde,.mj-palabra){margin-top:var(--espacio-10)}
.main[data-pantalla="juego"] > .study > .answer.mj-escribela > :is(.molde,.mj-palabra) + .mj-resultado{margin-top:auto}
.molde{font:var(--peso-negrita) var(--tipo-135) / 1.1 var(--f-num);color:var(--ink);letter-spacing:.14em;overflow-wrap:anywhere}
.molde-comodin{color:var(--ink-3);letter-spacing:0}
.molde-glosa{font:var(--peso-regular) var(--tipo-90) var(--f-ui);color:var(--ink-3);letter-spacing:0}
.mj-hw{font-family:var(--f-display);font-weight:var(--peso-display);font-size:var(--tipo-135);line-height:1.1;overflow-wrap:anywhere}   /* (not .hw: the looks paint the headword of a card big, and the word would make the card taller than its template) */
:is(.mj-completa,.mj-escribela) .answerline{flex-direction:column}   /* the field on a row of its own, the whole width; under it the three buttons */
.mj-acciones{flex-wrap:nowrap}
.mj-acciones .btn{flex:1 1 auto;min-width:0;white-space:nowrap}
@media (max-width:899px){.mj-resultado:not([data-resultado]){min-height:0;padding-block:0}}   /* on a phone the field sits at the bottom: the result takes room from above when it comes, the empty one takes none */
.mj-rotulo{display:grid}   /* «Comprobar» and «Siguiente», the same width (each carries the other label, unseen): the field does not move when one replaces the other */
.mj-rotulo > *{grid-area:1 / 1}
.mj-reserva{visibility:hidden}
.mj-instr{min-height:1lh}
.mj-resultado{min-height:calc(2lh + 2 * var(--espacio-10) + 2 * var(--borde-grueso));border-radius:var(--r-m);padding:var(--espacio-10) var(--espacio-14);display:grid;align-content:center;gap:var(--espacio-2)}
.mj-resultado p{margin:0}
.mj-resultado .mj-frase{font-weight:var(--peso-negrita)}
.mj-resultado .mj-frase span{font-weight:var(--peso-regular);color:var(--ink)}
.mj-resultado .mj-sentido{color:var(--ink-2);font-size:var(--tipo-90)}
.mj-resultado[data-resultado="exacto"],.mj-resultado[data-resultado="casi"]{background:var(--good-soft);color:var(--good)}
.mj-resultado:is([data-resultado="pista"],[data-resultado="sinonimo"],[data-resultado="us"],[data-resultado="otra"]){background:var(--warn-soft);color:var(--warn)}
.mj-resultado[data-resultado="fallo"]{background:var(--bad-soft);color:var(--bad)}
@media not all and (max-width:899px){@media (min-height:600px){
  .main[data-pantalla="juego"] > .study > .answer:is(.mj-completa,.mj-escribela){padding-bottom:0;min-height:0;max-height:100%}   /* the result has its own room in the flow: no reserve under the block; never taller than its room, also in a look that lays the game out as a grid (the card gives up room) */
  /* the room of the question: the reserve of the other games, but never more than a third of the window (under it go the result, the field and its buttons). In every look (html:root
     wins over the reserve that each look gives the card of its games: a minigame has more under its card than four options) */
  html:root .main[data-pantalla="juego"] > .study > .answer:is(.mj-completa,.mj-escribela) > .slip{flex:0 1 min(calc(3.3 * clamp(1.8rem,1.3rem + 2.4vw,2.8rem) + 2 * var(--espacio-12) + var(--espacio-28) + var(--espacio-26)),34dvh);height:auto;min-height:0}
  @media (max-height:760px){html:root .main[data-pantalla="juego"] > .study > .answer:is(.mj-completa,.mj-escribela) > .slip{flex-basis:min(calc(3.3 * clamp(1.8rem,1.3rem + 2.4vw,2.8rem) + 2 * var(--espacio-12) + 2 * var(--espacio-14)),34dvh)}}
  /* (a fixed height (its flex basis), not a minimum: the card is the same from one question to the next and when answering; a longer question scrolls inside with its notice, ADR 0023, and in a
     low window the card gives up room so that the result, the field and its buttons are always in sight) */
}}
/* A window 480 px tall or less (a phone with its keyboard open): these two games are played typing. The bar of the game on ONE line in every look (html:root wins over the
   bar that each look lays out on two or three rows), so that the question stays in sight above the field; Deletreo and the other games do not change */
@media (max-height:480px){
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .gamehead{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--espacio-8);grid-column:1 / -1;grid-row:1;position:static;min-width:0;width:100%;justify-self:stretch}
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .gamehead > .iconbtn{order:1;margin:0;align-self:center}
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .gamehead > .game-title{order:2;flex:1 1 auto;min-width:0;margin:0;padding:0;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .gamehead > .hud{order:3;display:flex;flex:none;gap:var(--espacio-10);align-items:baseline;min-height:0;margin:0}
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .gamehead > .hud > *{margin:0;padding:0}
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .gamehead > .hud b{display:inline;font-size:inherit;line-height:inherit}
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .gamehead > .hud > .hud-aciertos{grid-auto-flow:column;gap:var(--espacio-4);align-items:baseline}   /* (the look that stacks the figure and its word puts them side by side; the display is the look's: a look that does not paint it keeps it hidden) */
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .gamehead > .apar-barra{order:4;position:static;margin:0}
  html:root .main[data-pantalla="juego"]:has(> .study > .answer:is(.mj-completa,.mj-escribela)) .hilo-juego{display:none}   /* (the thread of a look under or across the bar: «1 de 10» is on the bar) */
  .answer:is(.mj-completa,.mj-escribela) > :is(.mj-instr,.mj-pista):empty{display:none}   /* (the empty lines give their room to the question; the field is at the bottom and does not move) */
}
.mode .mj-fuente{font-size:var(--tipo-82);color:var(--ink-3)}
.ejercicios-juegos p{margin:0}

/* ------------------------------------------------------------------ home */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--espacio-18)}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}}
.today{background:var(--hero-bg);color:var(--hero-fg);border-radius:var(--r-l);padding:24px;display:grid;gap:var(--espacio-16);box-shadow:var(--shadow-lift);min-width:0}
.today .eyebrow{color:var(--hero-eyebrow)}
.today .figs{display:flex;gap:var(--espacio-26);flex-wrap:wrap}
.today .fig b{display:block;font-family:var(--f-display);font-weight:var(--peso-display);font-size:var(--tipo-figura-web);line-height:1}
.today .fig span{font-size:var(--tipo-85);color:var(--hero-caption)}
.today .btn{background:var(--hero-fg);color:var(--hero-bg)}
.today .btn:hover{background:var(--gold-2)}
.today :focus-visible{outline-color:var(--hero-fg)}
.today .goal{height:6px;border-radius:var(--radio-9);background:var(--hero-track);overflow:hidden}
.today .goal i{display:block;height:100%;background:var(--gold-2)}
.goal-note{font-size:var(--tipo-80);opacity:.75}
.all-done{align-self:center;opacity:.8}
/* the Inicio of the new method (C-002, encargo 9, R023a; the mockups 1-inicio and 8-inicio-ordenador): the sentence, three blocks with their button, the goal with «Cambiar»;
   the place of the sentence is kept while its figures come (three lines in a phone, two wider), so nothing moves when they arrive */
.inicio-frase{font-family:var(--f-display);font-weight:var(--peso-display);font-size:var(--tipo-160);line-height:1.25;min-height:2lh;text-wrap:pretty}
@media (max-width:760px){.inicio-frase{min-height:3lh}}
.inicio-frase b{font-family:var(--f-num);font-weight:var(--peso-negrita);color:var(--gold-2)}
.bloques{display:grid;gap:var(--espacio-10)}
.bloque{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--espacio-14);min-height:64px;padding:var(--espacio-12) var(--espacio-16);text-align:left;border-radius:var(--r-m);border:var(--borde-fino) solid var(--hero-track);background:transparent;color:var(--hero-fg)}
.bloque:hover{border-color:var(--hero-caption)}
.bloque.principal{background:var(--hero-fg);color:var(--hero-bg);border-color:var(--hero-fg)}
.bloque.principal:hover{background:var(--gold-2);border-color:var(--gold-2)}
.bloque-ic{display:grid;place-items:center}
.bloque-ic svg{width:22px;height:22px}
.bloque-cuerpo{display:grid;gap:var(--espacio-2);min-width:0}
.bloque-cuerpo b{font-size:var(--tipo-100);font-weight:var(--peso-negrita)}
.bloque-texto{font-size:var(--tipo-85);color:var(--hero-caption)}
.bloque.principal .bloque-texto{color:inherit;opacity:.8}
.bloque-ir svg{width:18px;height:18px;transform:rotate(-90deg)}
.goal-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--espacio-10);margin-top:var(--espacio-8)}
.goal-pie .meta-cambiar{flex:none}
.today .btn.meta-cambiar{background:transparent;color:var(--hero-fg);border:var(--borde-fino) solid var(--hero-track)}
.today .btn.meta-cambiar:hover{background:var(--hero-track)}
.meta-caja{display:grid;gap:var(--espacio-10)}
.meta-caja h2{margin:0}
.meta-ajustes{display:grid;gap:var(--espacio-10)}
.mis-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--espacio-10)}
.mis-cifra{display:grid;align-content:start;gap:var(--espacio-2);min-width:0;padding:var(--espacio-14);text-align:left;background:var(--paper-2);border:var(--borde-fino) solid var(--line);border-radius:var(--r-m);color:var(--ink)}
.mis-cifra:hover{border-color:var(--accent)}
.mis-n{font-family:var(--f-num);font-size:var(--tipo-135);font-weight:var(--peso-negrita);line-height:1.1}
.mis-rotulo{font-size:var(--tipo-85);font-weight:var(--peso-negrita);overflow-wrap:anywhere}
.mis-detalle{font-size:var(--tipo-80);color:var(--ink-2)}
@media (max-width:560px){.mis-cifra{padding:var(--espacio-10) var(--espacio-8)}.mis-rotulo{font-size:var(--tipo-78);overflow-wrap:normal;hyphens:auto}}
@media (max-width:379px){.mis-cifra{padding-inline:var(--espacio-6)}.mis-rotulo{font-size:var(--tipo-74)}}   /* «Aprendiendo» whole in Clásico at 390 and 360 (R023b § 1.6); the other looks keep theirs */
@media (max-width:560px){.bloque-texto,.mis-detalle{min-height:2lh}}   /* in a phone the small texts may take two lines when their figures come: their place is kept from the start */
.level-row{display:flex;justify-content:space-between;gap:var(--espacio-8)}
.streak{display:flex;align-items:center;gap:var(--espacio-12)}
.streak .flame{width:46px;height:46px;border-radius:var(--radio-circulo);display:grid;place-items:center;background:var(--gold-soft);color:var(--gold)}
.streak .flame svg{width:26px;height:26px}
.streak-title{font-size:1.4rem;font-family:var(--f-serif)}
.wotd{display:grid;gap:var(--espacio-6);border-top:1px solid var(--line-2);padding-top:var(--espacio-12)}
.wotd-row{display:flex;gap:var(--espacio-10);align-items:center;flex-wrap:wrap}
.wotd .hw{font-family:var(--f-display);font-size:2rem;line-height:1.05}
.holes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--espacio-10)}
@media (max-width:560px){.holes{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:var(--espacio-16)}}
.hole{position:relative;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--espacio-12) var(--espacio-12) var(--espacio-14);display:grid;gap:var(--espacio-6);min-width:0}
.hole:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.hole,.mode{container-type:inline-size}   /* the title of a casillero or of a game fits its box, whole words (E-007): its size follows the width of the box (cqi) */
.hole b{font-family:var(--f-serif);font-size:min(var(--tipo-100),calc(100cqi / 7.7));line-height:1.2}
.hole .cnt{font:var(--peso-seminegrita) var(--tipo-78) var(--f-num);color:var(--ink-3)}
.hole .bar{height:6px;border-radius:var(--radio-9);background:var(--seq-0);overflow:hidden;display:flex;gap:var(--espacio-2)}
.hole .bar i{display:block;height:100%}
.hole .off{position:absolute;top:10px;right:10px;font-size:var(--tipo-66);font-weight:var(--peso-negrita);color:var(--ink-3)}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--espacio-12)}
@media (max-width:560px){.modes{grid-template-columns:repeat(2,minmax(0,1fr))}.mode{padding:var(--espacio-14)}.mode p{font-size:.84rem}}
.mode{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--espacio-16);display:grid;gap:var(--espacio-8);align-content:start;min-width:0}
.mode:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.mode .ic{width:40px;height:40px;border-radius:var(--r-m);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.mode .ic svg{width:22px;height:22px}
.mode b{font-family:var(--f-serif);font-size:min(1.08rem,calc(100cqi / 7.5))}
.mode p{font-size:var(--tipo-88);color:var(--ink-2)}
.mode .best{font:var(--peso-seminegrita) .76rem var(--f-num);color:var(--gold)}

/* ------------------------------------------------------------------ dictionary */
.searchbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--cab-alto,0px));transition:top var(--duracion-220ms) var(--curva-ease);z-index:var(--capa-buscador);background:var(--desk);padding-block:var(--espacio-8);display:grid;gap:var(--espacio-10)}
.searchbox{position:relative}
.searchbox svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-3)}
.searchbox .input{padding-left:44px;font-size:1.05rem;min-height:52px}
.filters-summary{cursor:pointer;font-weight:var(--peso-negrita);font-size:var(--tipo-90)}
.filters{display:grid;gap:var(--espacio-10);padding:var(--espacio-10) var(--espacio-8) 0;margin-inline:calc(-1 * var(--espacio-8));max-height:40vh;max-height:40dvh;overflow-y:auto}   /* E-001: the open panel is never taller than two fifths of the window: the sticky search bar would otherwise be taller than a phone screen and the way out would be out of reach */
.filters-acciones{display:flex;flex-wrap:wrap;gap:var(--espacio-10);position:sticky;bottom:0;padding-block:var(--espacio-8);background:var(--desk)}   /* E-001: «Quitar filtros» and «Cerrar filtros» at the end of the panel (the buttons are the secondary ones of each look) */
.list{display:grid;gap:var(--espacio-1);background:var(--line-2);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line-2)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--espacio-4) var(--espacio-12);align-items:center;padding:var(--espacio-12) var(--espacio-14);background:var(--paper);text-align:left;border:0;width:100%}
.item:hover{background:var(--paper-2)}
.item .w{font-family:var(--f-serif);font-weight:var(--peso-negrita);font-size:1.05rem;overflow-wrap:anywhere}
.item .g{grid-column:1/-1;color:var(--ink-2);font-size:var(--tipo-90);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .r{display:flex;gap:var(--espacio-6);align-items:center;grid-row:1;grid-column:2}
.empty{padding:var(--espacio-28);text-align:center;color:var(--ink-2);display:grid;gap:var(--espacio-12);justify-items:center}

/* ------------------------------------------------------------------ sheet */
.sheet-wrap{position:fixed;inset:0;z-index:var(--capa-hoja);background:var(--overlay-sheet);display:flex;justify-content:flex-end}
.sheet{width:min(var(--ancho-hoja),100%);height:100%;overflow-y:auto;background:var(--desk);padding:var(--espacio-18) clamp(16px,3vw,28px) calc(40px + env(safe-area-inset-bottom,0px));display:grid;gap:var(--espacio-16);align-content:start;animation:slidein var(--duracion-220ms) var(--curva-ease-out)}
@keyframes slidein{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.sheet-top{display:flex;justify-content:space-between;align-items:center;gap:var(--espacio-10);position:sticky;top:0;background:var(--desk);padding-block:var(--espacio-4);z-index:var(--capa-hoja-cabecera)}
.sheet-meta{display:flex;gap:var(--espacio-8);align-items:center;flex-wrap:wrap}
.sheet-acciones{display:flex;align-items:center;gap:var(--espacio-4);flex:none}
.modal-wrap{position:fixed;inset:0;z-index:var(--capa-modal);background:var(--overlay-modal);display:grid;place-items:center;padding:var(--espacio-16)}
body.scroll-lock{overflow:hidden;scrollbar-gutter:stable}
.sheet:focus-visible,.modal:focus-visible,.result:focus-visible{outline:none}   /* the dialogs and the result take the focus as a whole: the ring would only fence them */
.modal{width:min(var(--ancho-modal),100%);max-height:90vh;overflow:auto;background:var(--paper);border-radius:var(--r-l);box-shadow:var(--shadow-lift);padding:var(--espacio-22);display:grid;gap:var(--espacio-14)}

/* ------------------------------------------------------------------ stats */
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--espacio-12)}
.stat{background:var(--paper);border-radius:var(--r-m);border:1px solid var(--line-2);padding:var(--espacio-14);display:grid;gap:var(--espacio-2)}
.stat b{font-family:var(--f-display);font-weight:var(--peso-display);font-size:2rem;line-height:1.05}
.stat span{font-size:var(--tipo-82);color:var(--ink-2)}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);grid-auto-columns:12px;gap:var(--espacio-3);overflow-x:auto;padding-bottom:var(--espacio-4)}
.heat i{width:12px;height:12px;border-radius:var(--radio-3);background:var(--seq-0)}
.heat i[data-l="1"]{background:var(--seq-1)} .heat i[data-l="2"]{background:var(--seq-2)} .heat i[data-l="3"]{background:var(--seq-3)} .heat i[data-l="4"]{background:var(--seq-4)}
.heat .pad{visibility:hidden}
.legend{display:flex;align-items:center;gap:var(--espacio-6);font-size:var(--tipo-78);color:var(--ink-3);flex-wrap:wrap}
.legend i{width:12px;height:12px;border-radius:var(--radio-3);display:inline-block}
.seg-owned{background:var(--seq-4)}
.seg-learning{background:var(--seq-2)}
.seg-dadas{background:var(--gold)}   /* the Dadas por sabidas of the method (R023b § 7.8) */
.seg-todo{background:var(--seq-0);border:1px solid var(--line)}
.leyenda-par{display:inline-flex;align-items:center;gap:inherit}   /* a mark and its term stay together when the key wraps (E-009) */
.legend .leyenda-par + .leyenda-par{margin-left:var(--espacio-10)}
.seq-0{background:var(--seq-0)}
.seq-1{background:var(--seq-1)}
.seq-2{background:var(--seq-2)}
.seq-3{background:var(--seq-3)}
.seq-4{background:var(--seq-4)}
.bars{display:flex;align-items:flex-end;gap:var(--espacio-4);height:140px;padding-top:var(--espacio-8);border-bottom:1px solid var(--line-2)}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;position:relative;min-width:0}
.bars .b i{display:block;background:var(--seq-3);border-radius:var(--radio-4) var(--radio-4) 0 0;min-height:2px}
.bars .b:hover i{background:var(--seq-4)}
.barlabels{display:flex;gap:var(--espacio-4);font:var(--peso-medio) .68rem var(--f-num);color:var(--ink-3)}
.barlabels span{flex:1;text-align:center;min-width:0;overflow:hidden}
.hbar{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) auto;gap:var(--espacio-10);align-items:center;font-size:var(--tipo-88)}
.hbar .track{height:12px;border-radius:var(--radio-4);background:var(--seq-0);display:flex;gap:var(--espacio-2);overflow:hidden}
.hbar .track i{display:block;height:100%}
.lvrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--espacio-8) var(--espacio-12);align-items:center;padding:var(--espacio-12) 0;border-top:1px solid var(--line-2)}
.lvrow .lvhead{display:flex;align-items:center;gap:var(--espacio-10);flex-wrap:wrap;grid-column:1/-1}
.lvrow .track{height:12px;border-radius:var(--radio-4);background:var(--seq-0);display:flex;gap:var(--espacio-2);overflow:hidden}
.lvrow .track i{display:block;height:100%}
.lvrow .btn{grid-column:1/-1;justify-self:start}
@media (min-width:640px){.lvrow{grid-template-columns:minmax(0,1fr) 3.2em 10em}.lvrow .btn{grid-column:auto;justify-self:stretch}}
.tip-on{outline:2px solid var(--accent);outline-offset:1px}
.tip{position:fixed;z-index:var(--capa-tooltip);pointer-events:none;background:var(--ink);color:var(--paper);font-size:var(--tipo-80);padding:var(--espacio-6) 9px;border-radius:var(--r-s);box-shadow:var(--shadow);max-width:var(--ancho-tooltip)}
.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--espacio-10)}
.badge{display:flex;gap:var(--espacio-12);align-items:center;padding:var(--espacio-12);border-radius:var(--r-m);border:1px dashed var(--line-2);background:var(--paper-2)}
.badge .seal{width:42px;height:42px;border-radius:var(--radio-circulo);flex:none;display:grid;place-items:center;background:var(--paper-3);color:var(--ink-3)}
.badge .seal svg{width:22px;height:22px}
.badge.got{border-style:solid;background:var(--paper)}
.badge.got .seal{background:var(--gold-soft);color:var(--gold)}
.badge b{display:block;font-size:.92rem}
.badge span{font-size:var(--tipo-80);color:var(--ink-2)}

/* ------------------------------------------------------------------ games */
.gamehead{display:flex;align-items:center;justify-content:space-between;gap:var(--espacio-8)}   /* one row even with the button of the appearance at its end: the title gives way (ADR 0027) */
.hud{display:flex;gap:var(--espacio-16);align-items:center;flex:none;white-space:nowrap;font:var(--peso-negrita) var(--tipo-100) var(--f-num)}
.hud .lives{color:var(--rule-red);letter-spacing:2px}
.game-title{font-family:var(--f-serif);font-size:1.2rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:899px){.gamehead{flex-wrap:wrap}.gamehead .apar-barra{margin-left:auto}.hud{order:1;flex:0 0 100%;min-height:1.4em}}   /* a phone: the counters go on a line of their own under the bar (its height is kept while they are still empty, so nothing jumps when they fill in), so the name of the game (× · name · appearance button) is never cut by them (encargo 018); the looks that draw the bar as a grid (`display:contents`) place the name and the counters themselves */
.studybar .iconbtn,.gamehead .iconbtn{flex:none}   /* the title gives way, never the buttons (a 44 px target) */
.timer{height:6px;border-radius:var(--radio-9);background:var(--paper-3);overflow:hidden}
.timer i{display:block;height:100%;background:var(--gold-2);transition:width var(--duracion-250ms) var(--curva-linear)}
.bigq{font-family:var(--f-display);font-size:clamp(1.8rem,1.3rem + 2.4vw,2.8rem);line-height:1.1;text-align:center;overflow-wrap:anywhere;padding:var(--espacio-12) 0}
.bigq.q-es{font-family:var(--f-ui);font-weight:var(--peso-negrita);font-size:var(--tipo-160)}
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espacio-10)}
.tile{min-height:64px;padding:var(--espacio-10) var(--espacio-12);border-radius:var(--r-m);border:1px solid var(--line);background:var(--paper);font-weight:var(--peso-negrita);line-height:1.25;text-align:center}
.tile.en{font-family:var(--f-serif)}
.tile.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tile.done{visibility:hidden}
.tile.bad{border-color:var(--bad);background:var(--bad-soft)}
.result{display:grid;gap:var(--espacio-14);justify-items:center;text-align:center;padding:var(--espacio-12)}
.result .score{font-family:var(--f-display);font-size:4rem;line-height:1}
.missed{display:grid;gap:var(--espacio-6);width:100%}

/* ------------------------------------------------------------------ toasts & loading */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:var(--capa-avisos);display:grid;gap:var(--espacio-8);width:min(var(--ancho-aviso),calc(100% - 32px))}
.toast{background:var(--ink);color:var(--paper);border-radius:var(--r-m);padding:var(--espacio-12) var(--espacio-14);box-shadow:var(--shadow-lift);display:flex;gap:var(--espacio-10);align-items:center;font-weight:var(--peso-negrita);animation:flipin var(--duracion-250ms) var(--curva-ease-out)}
.toast-accion{flex-wrap:wrap}
.toast-enlace{color:inherit;font-weight:var(--peso-negrita);text-decoration:underline;padding-block:var(--espacio-14);margin-block:calc(-1 * var(--espacio-14))}   /* «Cómo solucionarlo» (C-010): a link of 44 px at least inside the notice */
.voz-ayuda{display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--espacio-4)}   /* Ajustes › Voz: «¿No oyes nada?» and the links to the help page */
.toast .seal{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radio-circulo);background:var(--gold-soft);color:var(--gold)}
/* The notice «Hay una versión nueva de Wordfall» (web; app/actualizacion.js, ADR 0024): a strip above the tabs, like the toasts, with two buttons. The zone is a live region that exists from the start and is empty. */
.aviso-version-zona{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:var(--capa-avisos);width:min(var(--ancho-aviso),calc(100% - 32px));pointer-events:none}
.aviso-version{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--espacio-8) var(--espacio-12);padding:var(--espacio-10) var(--espacio-14);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-lift);animation:flipin var(--duracion-250ms) var(--curva-ease-out)}
.aviso-version-texto{font-size:var(--tipo-95);font-weight:var(--peso-negrita)}
.aviso-version-acciones{display:flex;gap:var(--espacio-8)}
.cookies-zona{position:sticky;bottom:var(--espacio-16);z-index:var(--capa-avisos);width:min(var(--ancho-modal),calc(100% - 32px));margin-inline:auto;pointer-events:none}   /* last in the page: it floats above the tabs while there is more page below, and at the end it rests under the content, covering nothing */
@media (max-width:899px){.cookies-zona{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
.cookies-banner{pointer-events:auto;max-height:calc(100dvh - 130px);overflow:auto;display:grid;gap:var(--espacio-10);padding:var(--espacio-14) var(--espacio-16);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-lift)}
.cookies-banner h2{margin:0;font-size:var(--tipo-100)}
.cookies-banner p{margin:0;font-size:var(--tipo-88);line-height:1.5;color:var(--ink-2)}
.cookies-botones{display:grid;grid-template-columns:1fr 1fr;gap:var(--espacio-8)}
.cookies-enlace{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;font-size:var(--tipo-88)}
.cookies-fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--espacio-8) var(--espacio-12)}
.cookies-nombre{flex:1 1 auto}
.cookies-acciones{display:flex;gap:var(--espacio-8)}
body:has(.cookies-zona) .aviso-version-zona{display:none}
body:has(.espacio-zona) .cookies-zona:not(.espacio-zona){display:none}   /* the notice of space (R024a) first: one notice at a time */
.espacio-marca{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--espacio-4));left:50%;transform:translateX(-50%);z-index:var(--capa-avisos);padding:var(--espacio-2) var(--espacio-10);border-radius:var(--radio-pildora);background:var(--ink);color:var(--paper);font-size:var(--tipo-74);font-weight:var(--peso-negrita);pointer-events:none}   /* during a card: a small fixed mark, never in the way (ADR 0023) */
.espacio-previo{display:grid;gap:var(--espacio-10)}
.espacio-previo h2{margin:0;font-size:var(--tipo-100)}
.espacio-previo p{margin:0}
.copia-borrar{display:grid;gap:var(--espacio-8)}
.copia-borrar p{margin:0}
.copia-guardada{display:flex;align-items:center;gap:var(--espacio-8);min-height:44px;cursor:pointer}
.copia-guardada input{accent-color:var(--accent)}
.toast .seal svg{display:block;width:20px;height:20px}
.loading{min-height:70vh;display:grid;place-items:center;text-align:center}
.loading .slip{width:min(var(--ancho-carga),100%);text-align:left}
.loadbar{height:4px;background:var(--paper-3);border-radius:var(--radio-9);overflow:hidden;margin-top:var(--espacio-18)}
.loadbar i{display:block;height:100%;width:30%;background:var(--rule-red);animation:load var(--duracion-1100ms) var(--curva-ease-in-out) infinite}
.fall{font-family:var(--f-serif);color:var(--rule-red)}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.md{display:grid;gap:var(--espacio-10);line-height:1.6}
.md h4{font-family:var(--f-serif);font-size:1.02rem;margin:var(--espacio-6) 0 0}
.md ul{margin:0;padding-left:1.2em;display:grid;gap:var(--espacio-4)}
.md p{margin:0}
.chat{display:grid;gap:var(--espacio-10)}
.bubble{padding:var(--espacio-12) var(--espacio-14);border-radius:var(--r-m);background:var(--paper-2);max-width:90%}
.bubble.me{justify-self:end;background:var(--accent-soft)}
.scorepill{display:inline-flex;align-items:center;gap:var(--espacio-6);font:var(--peso-negrita) 1.4rem var(--f-num)}
.scorepill.good{color:var(--good)}
.scorepill.warn{color:var(--warn)}
.scorepill.bad{color:var(--bad)}
.score-row{display:flex;align-items:center;gap:var(--espacio-12);flex-wrap:wrap}
.write-best{color:var(--gold);font-size:var(--tipo-85)}

.credits{display:grid;gap:var(--espacio-8);padding-left:1.1em;margin:0}
.credits .faint{display:block;font-size:var(--tipo-82)}
.license{border-top:1px solid var(--line-2);padding:var(--espacio-8) 0}
.license summary{cursor:pointer;font-weight:var(--peso-negrita)}
.license pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:.72rem;line-height:1.45;color:var(--ink-2);margin:var(--espacio-8) 0 0}
.license .row-actions{margin-top:var(--espacio-10)}   /* «Cerrar licencia», at the end of the text (E-008) */

/* Aviso legal y Privacidad: enlaces de la web y páginas estáticas (build.py) */
.legal-links{display:flex;gap:var(--espacio-6) var(--espacio-18);flex-wrap:wrap;margin:0;font-size:var(--tipo-82)}
.legal-links a{color:var(--ink-2);padding:var(--espacio-6) 0}
.legal-links a:hover{color:var(--ink)}
.nav .legal-links{padding:0 var(--espacio-12)}
.nav .legal-links a{display:inline;padding:var(--espacio-6) 0;border-radius:0;font-weight:var(--peso-regular);font-size:var(--tipo-82);color:var(--ink-2);text-decoration:underline}
.nav .legal-links a:hover{background:none;color:var(--ink)}
.page > .legal-links{justify-content:center;padding:var(--espacio-8) 0 24px}
.legal-page{max-width:var(--ancho-legal);margin:0 auto;padding:var(--espacio-20) var(--espacio-16) calc(48px + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr);gap:var(--espacio-12);line-height:1.6;overflow-wrap:anywhere}   /* a long word (the address of Google in the cookies page) breaks instead of widening the page: no sideways scroll on a phone, in any look (encargo 018) */
.legal-page h1{margin-top:var(--espacio-8)}
.legal-page h2{margin-top:var(--espacio-14)}
.legal-page p,.legal-page ul{margin:0}
.legal-page ul{padding-left:1.2em;display:grid;gap:var(--espacio-6)}
.legal-page ol{padding-left:var(--espacio-22);display:grid;gap:var(--espacio-6)}   /* the help page «Cómo escuchar la pronunciación» (C-010): its steps */
.sistema{border:1px solid var(--line-2);border-radius:var(--r-m);padding:0 var(--espacio-14)}   /* one <details> per system: always on the page, the one of the visitor's system open */
.sistema > summary{cursor:pointer;font-weight:var(--peso-negrita);padding-block:var(--espacio-12)}
.sistema > div{display:grid;gap:var(--espacio-12);padding-bottom:var(--espacio-14)}
.legal-page .nota{color:var(--ink-3);font-size:var(--tipo-90)}
.novedades-lista{display:grid;gap:var(--espacio-20);padding-top:var(--espacio-8)}   /* the page «Novedades» (T-001): one <article> per entry, in the frame of the legal pages */
.novedad{display:grid;gap:var(--espacio-6);padding-bottom:var(--espacio-20);border-bottom:1px solid var(--line-2)}
.novedad:last-child{padding-bottom:0;border-bottom:0}
.legal-page .novedad h2{margin:0}
.legal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--espacio-12);max-width:var(--ancho-legal);min-height:calc(44px + var(--espacio-12));margin:0 auto;padding:var(--espacio-12) var(--espacio-16) 0}   /* the head of the legal pages (encargo 018): the brand and the buttons of the appearance (app/legal.js), as in the head of every screen */
.legal-marca{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}   /* the pointer target of the brand: 44 px tall, with no change to what is seen (the head is already as tall as its buttons) */
.legal-marca b{font-family:var(--f-display);font-weight:var(--peso-regular);font-size:var(--tipo-160);line-height:1}
.legal-marca b i{font-family:var(--f-serif);font-style:italic;color:var(--rule-red)}
.legal-head .apar-pop{right:0}   /* the page has its own gutter: the panel is as far from the edge of the screen as the buttons */
/* The page «Conoce Wordfall» (E-002), in the frame of the public pages: a cover with its «rain of words» (real words of the corpus that fall slowly behind the headline; only CSS; still with
   «reduce motion», where the global rule below stops every animation, and in the looks that do not move: Calma and Cartel), four sections and two real captures of the app. */
.conoce-portada{display:grid;gap:var(--espacio-16);padding:var(--espacio-8) 0 var(--espacio-22)}   /* no overflow here: the ring of focus of the button must not be cut */
.conoce-portada h1{margin:0;font-family:var(--f-display);font-size:var(--tipo-headword-largo);line-height:1.05}
@media not all and (max-width:899px){.conoce-portada h1{font-size:var(--tipo-headword-largo-web)}}
.conoce-frase{font-size:var(--tipo-135);color:var(--ink-2)}
.conoce-empezar{margin-top:var(--espacio-6)}
.conoce-empezar .btn{text-decoration:none}
.lluvia{position:relative;height:calc(var(--espacio-28) * 3);container-type:size;pointer-events:none;overflow:hidden}   /* its own strip above the headline: the words never go behind the text or the button */
.lluvia span{position:absolute;white-space:nowrap;font-family:var(--f-display);font-size:var(--tipo-160);line-height:1;color:var(--paper-2);animation:caer var(--duracion-19000ms) var(--curva-linear) infinite}   /* a texture: 1.6:1 against the page at most (conoce_test.py) */
.lluvia span:nth-child(1){left:2%;top:2%;animation-duration:var(--duracion-24000ms)}
.lluvia span:nth-child(2){left:34%;top:2%;animation-duration:var(--duracion-15000ms);animation-delay:calc(var(--duracion-15000ms) * -.35)}
.lluvia span:nth-child(3){left:66%;top:2%;animation-duration:var(--duracion-19000ms);animation-delay:calc(var(--duracion-19000ms) * -.6)}
.lluvia span:nth-child(4){left:12%;top:33%;animation-duration:var(--duracion-24000ms);animation-delay:calc(var(--duracion-24000ms) * -.15)}
.lluvia span:nth-child(5){left:44%;top:33%;animation-duration:var(--duracion-15000ms);animation-delay:calc(var(--duracion-15000ms) * -.8)}
.lluvia span:nth-child(6){right:0;top:33%;animation-duration:var(--duracion-19000ms);animation-delay:calc(var(--duracion-19000ms) * -.25)}
.lluvia span:nth-child(7){left:2%;top:64%;animation-duration:var(--duracion-24000ms);animation-delay:calc(var(--duracion-24000ms) * -.55)}
.lluvia span:nth-child(8){left:26%;top:64%;animation-duration:var(--duracion-15000ms);animation-delay:calc(var(--duracion-15000ms) * -.1)}
.lluvia span:nth-child(9){left:50%;top:64%;animation-duration:var(--duracion-24000ms);animation-delay:calc(var(--duracion-24000ms) * -.9)}
.lluvia span:nth-child(10){right:0;top:64%;animation-duration:var(--duracion-19000ms);animation-delay:calc(var(--duracion-19000ms) * -.45)}
@keyframes caer{from{transform:translateY(-110cqh)}to{transform:translateY(110cqh)}}
.conoce-seccion{display:grid;gap:var(--espacio-12)}
.conoce-seccion h2{margin-top:var(--espacio-20)}
.conoce-pasos,.conoce-valores,.conoce-ayuda{gap:var(--espacio-10)}
.conoce-capturas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espacio-16);margin-top:var(--espacio-8)}
@media (max-width:560px){.conoce-capturas{grid-template-columns:minmax(0,1fr)}}
.conoce-capturas figure{margin:0;display:grid;gap:var(--espacio-8);justify-items:center;align-content:start}
.conoce-capturas img{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--r-l)}
.conoce-capturas figcaption{color:var(--ink-3);font-size:var(--tipo-90);text-align:center}
.conoce-correo{user-select:all}
.legal-back{font-weight:var(--peso-negrita)}
.legal-date{color:var(--ink-3);font-size:var(--tipo-90)}
.legal-foot{display:flex;gap:var(--espacio-16);flex-wrap:wrap;margin-top:var(--espacio-16);padding-top:var(--espacio-12);border-top:1px solid var(--line-2)}

/* ------------------------------------------------------------------ touch targets
   A control that is pressed answers over 44x44 px at least (phase 5b-3), without changing what is seen:
   - a button or chip: a transparent ::after enlarges only the area that answers the finger (an inset is measured from the padding box: with a 1px border it needs 1px more);
   - text without a background (links, `summary`): more padding and the same amount of negative margin, so the text and the room it takes stay where they were
     (a ::after would need `position:relative`, and Chromium then draws that text without sub-pixel anti-aliasing, which the captures notice; the buttons without a background (ghost) do get it: their text changes in that way only);
   - the rail links (they do have a background on hover and when current): a transparent border, with the background clipped to the padding box.
   Where two controls are closer than the extension needs (chips or synonyms wrapped onto a second row), the one that comes later in the page answers in the overlap.
   scripts/a11y_test.py measures every control (the control joined with its ::after) and fails under 44. */
.iconbtn,.chip,.btn.small,.syn button{position:relative}
.iconbtn::after,.chip::after,.btn.small::after,.syn button::after{content:"";position:absolute}
.nav > a{border-block:2px solid transparent;border-radius:calc(var(--r-m) + 2px);background-clip:padding-box;margin-block:calc(-1 * var(--espacio-2))}   /* the rail links: a transparent border takes the 2px the hit area needs; the background stops at the padding box and the radius is 2px bigger, so the pill is the same */
.iconbtn::after{inset:-3px}
.iconbtn.small::after{inset:-7px}
.chip::after{inset:-7px -3px}
.btn.small::after{inset:-6px 0}
.syn button::after{inset:-9px -2px}
.legal-links a,.nav .legal-links a{padding-block:var(--espacio-14);margin-block:calc(var(--espacio-6) - var(--espacio-14))}
.legal-back a{padding-block:var(--espacio-14)}
.legal-foot a{padding-block:var(--espacio-10);margin-block:calc(-1 * var(--espacio-10))}
.filters-summary{padding-block:var(--espacio-12);margin-block:calc(-1 * var(--espacio-12))}
.license summary{padding-block:var(--espacio-12);margin-block:calc(-1 * var(--espacio-12))}
.legal-page li > a:only-child,.legal-page .volver > a{display:inline-flex;align-items:center;min-height:44px}   /* a list of links on its own: the rows are taller (the only visible change of this phase) */
.legal-page ol li > a:only-child{display:inline;min-height:0}   /* the steps of the help page (C-010): a link inside a sentence stays in the line (it is not a list of links) */
input[type=range]{position:relative;height:44px;margin-block:calc(var(--espacio-2) - var(--espacio-14))}   /* the slider answers over 44px; the negative margin keeps the room it takes (16px + the 2px margin of the browser) */

/* ------------------------------------------------------------------ utilities
   Few and only for patterns that repeat a lot (ADR 0021, phase 3b); they come last so that they win over a component rule of the same weight.
   The number of a size-* is its token (--tipo-85) and the one of a stack-* or mt-* is the --espacio-* of the gap or the margin. */
.size-74{font-size:var(--tipo-74)}
.size-80{font-size:var(--tipo-80)}
.size-82{font-size:var(--tipo-82)}
.size-85{font-size:var(--tipo-85)}
.size-90{font-size:var(--tipo-90)}
.stack-6{display:grid;gap:var(--espacio-6)}
.stack-8{display:grid;gap:var(--espacio-8)}
.stack-10{display:grid;gap:var(--espacio-10)}
.stack-12{display:grid;gap:var(--espacio-12)}
.mt-6{margin-top:var(--espacio-6)}
.mt-8{margin-top:var(--espacio-8)}
.mt-10{margin-top:var(--espacio-10)}
/* ---- The appearance selector (docs/diseno/temas-selector.md): two buttons in the head of Hoy and a row of Ajustes open the panel «Aspecto». Only tokens. ---- */
.apar{position:relative}
.apar-btns{display:flex;align-items:center;gap:var(--espacio-6)}
.apar-ico{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--radio-circulo);background:none;color:var(--ink-2)}
.apar-ico:hover{color:var(--ink);background:var(--paper-3)}
.apar-ico svg,.apar-tema svg{width:22px;height:22px}
.apar-tema{display:inline-flex;align-items:center;gap:var(--espacio-8);min-height:44px;padding:0 var(--espacio-14) 0 var(--espacio-12);border:1px solid var(--line);border-radius:var(--radio-pildora);background:var(--paper);color:var(--ink);font-size:var(--tipo-90)}
.apar-tema:hover{background:var(--paper-3)}
.apar-tema[aria-expanded="true"]{border-color:var(--ink)}
.apar-tema svg:last-child{width:16px;height:16px}
.apar-fila{display:flex;align-items:center;gap:var(--espacio-12);width:100%;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left}
.apar-fila .apar-valor{margin-left:auto;color:var(--ink-2);font-size:var(--tipo-90)}
.apar-fila svg{width:18px;height:18px;color:var(--ink-3);transform:rotate(-90deg)}
.apar-pop{position:absolute;z-index:var(--capa-desplegable);right:0;top:calc(100% + var(--espacio-8));width:var(--ancho-modal);max-width:calc(100vw - 32px);padding:var(--espacio-18);border:1px solid var(--line-2);border-radius:var(--r-l);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lift);display:grid;gap:var(--espacio-14)}
.apar-pop:focus-visible{outline:none}   /* the panel takes the focus when it opens so that a screen reader reads it; it is not a control */
.apar-barra{flex:none}   /* holds the only button of the bar of a session, a game, the test or the entry sheet (an `iconbtn` of the look) and its panel */
.apar-pop h2{display:flex;align-items:center;min-height:44px;margin:0;font:var(--peso-negrita) var(--tipo-100) var(--f-ui)}
.apar-pop .lab{margin:0;font-size:var(--tipo-80);letter-spacing:.02em;color:var(--ink-3)}
.apar-cerrar{position:absolute;top:var(--espacio-18);right:var(--espacio-18);min-width:44px;min-height:44px;padding:0;border:0;background:none;color:var(--ink-2);font-size:var(--tipo-88);text-decoration:underline;text-underline-offset:3px}
.apar-cerrar:hover{color:var(--ink)}
.apar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--espacio-8)}   /* a wide screen: the four in a row, all of the same size (the chosen one does not grow); more themes, more rows */
.apar-op{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--espacio-6);width:100%;padding:var(--espacio-6);border:0;border-radius:var(--r-m);background:none;color:var(--ink);font:inherit;text-align:left}
.apar-op:hover{background:var(--paper-2)}
.apar-op[aria-checked="true"]{box-shadow:inset 0 0 0 var(--borde-grueso) var(--accent)}
.apar-op .nm{display:flex;justify-content:space-between;align-items:center;padding:0 var(--espacio-4) var(--espacio-2);font-size:var(--tipo-90);font-weight:var(--peso-seminegrita)}
.mini-wrap{display:block;position:relative;aspect-ratio:220/150;overflow:hidden}   /* the thumbnail of the panel: the generated image, with the CSS one under it while it loads or if it fails */
.mini-wrap>.mini{height:100%}
.mini-foto{display:block;width:100%;height:100%;object-fit:cover;outline:1px solid var(--line-2);outline-offset:-1px}
.apar-op .nm svg{width:16px;height:16px;stroke-width:2;visibility:hidden}
.apar-op[aria-checked="true"] .nm svg{visibility:visible}
.mini{position:relative;height:70px;border-radius:var(--radio-5);overflow:hidden;background:var(--m-p);color:var(--m-t);box-shadow:inset 0 0 0 1px var(--line-2);padding:var(--espacio-10);display:grid;align-content:start;gap:var(--espacio-3)}
.mini .n{font-family:var(--m-f);font-weight:var(--m-w,var(--peso-regular));font-stretch:var(--m-s,100%);font-size:var(--tipo-135);line-height:1;color:var(--m-a)}
.mini .l{height:5px;width:62%;border-radius:var(--radio-3);background:var(--m-t);opacity:.75}
.mini .l.s{width:40%;opacity:.35}
.mini .b{position:absolute;left:10px;bottom:9px;width:44%;height:12px;border-radius:var(--m-r,var(--r-m));background:var(--m-a)}
.apar-modos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--espacio-6);padding:var(--espacio-4);border-radius:var(--radio-pildora);background:var(--paper-2)}
.apar-modo{display:inline-flex;align-items:center;justify-content:center;gap:var(--espacio-6);min-height:44px;padding:0 var(--espacio-6);border:0;border-radius:var(--radio-pildora);background:none;color:var(--ink-2);font-size:var(--tipo-88);white-space:nowrap}
.apar-modo svg{width:17px;height:17px}
.apar-modo[aria-checked="true"]{background:var(--accent);color:var(--on-accent);font-weight:var(--peso-seminegrita)}
@media not all and (max-width:899px){.apar-pop{width:min(720px,calc(100vw - 32px))}}   /* a wide screen: the panel widens to give each of the four thumbnails 132 px or more */
@media (max-width:899px){   /* on a phone: the brand, a narrower panel, two thumbnails a row (after the rules above, which are the wide screen) */
  .apar-pop{width:360px;right:calc(-1 * var(--espacio-8))}   /* the 8 px gutter of the app: the panel is as far from each edge of the screen */
  .apar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espacio-10)}
  .mini{height:78px}
  .mini .n{font-size:var(--tipo-160)}
}
@media (max-width:899px) and (max-height:760px){   /* a short phone window (360×640, 390×664): the panel «Aspecto» fits above the tab bar without scrolling: less air between its parts, never less text (encargo 018) */
  .apar-pop{padding-block:var(--espacio-12);gap:var(--espacio-8)}
  .apar-pop h2{min-height:40px}
  .apar-cerrar{top:var(--espacio-12)}
  .apar-op{gap:var(--espacio-4);padding-block:var(--espacio-4)}
}

/* the Estudio of the new method (C-002, encargo 4; only with the switch on): the panel «Personaliza tu sesión» and two things of its session */
.estudio-que,.estudio-como{display:grid;gap:var(--espacio-10)}
.estudio-que>.eyebrow,.estudio-como>.eyebrow,.estudio-cab{margin-top:var(--espacio-8)}
.estudio-que>.hint{margin:0}
.estudio-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--espacio-12)}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--espacio-6)}
.seg .chip{min-height:44px;padding-inline:var(--espacio-8);text-align:center}
.seg .chip[aria-checked="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opciones{display:grid;gap:var(--espacio-8)}
.opcion{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--espacio-12);row-gap:var(--espacio-2);align-items:center;width:100%;min-height:44px;padding:var(--espacio-12) var(--espacio-14);border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);color:var(--ink);font:inherit;text-align:left}
.opcion::before{content:"";grid-row:1 / span 2;align-self:start;width:18px;height:18px;margin-top:var(--espacio-2);border:var(--borde-grueso) solid var(--ink-3);border-radius:var(--radio-circulo);box-sizing:border-box}
.opcion:hover{border-color:var(--ink-3)}
.opcion[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.opcion[aria-checked="true"]::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 var(--borde-grueso) var(--paper)}
.opcion b{font-weight:var(--peso-negrita)}
.opcion .hint{grid-column:2}
.estudio-resumen{margin:0;padding:var(--espacio-14) var(--espacio-16);border-radius:var(--r-m);background:var(--accent-soft);color:var(--ink-2)}
.estudio-empezar{flex:1}
.studybar .estudio-cuenta{flex:none;font:var(--peso-negrita) var(--tipo-82) var(--f-num);color:var(--ink-3);white-space:nowrap}
.yalase-nota{margin:0;text-align:center}
/* the Examen of the new method (C-002, encargo 6): its options stay in sight, coloured, after the answer (the session hides its own), and the answer goes above them */
.main[data-pantalla="sesion"] > .study > .answer.examen > .options:has(> .opt[disabled]){display:grid}
.examen-respuesta{display:flex;flex-direction:column;gap:var(--espacio-4);border-radius:var(--r-m);padding:var(--espacio-12) var(--espacio-14);font-weight:var(--peso-negrita)}   /* the notice of the games (.feedback) is hidden by the looks that say it with a phrase: the answer of the Examen, with the trap, is seen in all of them */
.examen-respuesta.ok{background:var(--good-soft);color:var(--good)}
.examen-respuesta.bad{background:var(--bad-soft);color:var(--bad)}
.examen-acciones{display:grid}
.examen-acciones > *{grid-area:1 / 1}
.examen-oculto{visibility:hidden}
.examen-veredicto{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:var(--espacio-10)}
.examen-xp{font-family:var(--f-num)}   /* the points of the answer, in its line: nothing floats over the options (encargo 6, director) */
/* Mis palabras and «Declarar mi nivel» (C-002, encargo 7, R021): the tabs with their figures, the filters, the rows with their marks and date, the groups of the declarations */
.mispalabras{display:grid;gap:var(--espacio-16)}
.mp-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line-2)}
.mp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--espacio-2);min-height:56px;padding:var(--espacio-8) var(--espacio-4);background:none;border:0;border-bottom:3px solid transparent;color:var(--ink-2);font-weight:var(--peso-negrita);text-align:center}
.mp-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--rule-red)}
.mp-cifra{font-size:var(--tipo-95)}
.mp-panel,.mp-lista,.mp-grupo,.mp-comprobar{display:grid;gap:var(--espacio-12);min-width:0}
.mp-filtros{display:grid;gap:var(--espacio-10)}
.mp-selects{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--espacio-10)}
.mp-cuenta,.mp-vacia,.mp-comprobar>p{margin:0}
.mp-fila .mp-pie{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--espacio-6)}
.mp-marca{background:var(--gold-soft);color:var(--ink)}
.mp-grupo-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--espacio-8)}
.mp-grupo-cab h3{margin:0;font-size:var(--tipo-100)}
.mp-mas{justify-self:start}
.mp-nivel>.eyebrow{margin-top:var(--espacio-4)}
.mp-nivel>.hint,.dec-confirma>p{margin:0}
.dec-error:empty{display:none}
.dec-error{color:var(--bad);font-weight:var(--peso-negrita)}
.examen-trampa{font-weight:var(--peso-regular);color:var(--ink)}
.examen-aviso{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--espacio-10);margin:var(--espacio-10) 0 0;font-size:var(--tipo-85);color:var(--ink-2)}
.examen-aviso a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.examen-correo{color:var(--ink-2)}

.mt-12{margin-top:var(--espacio-12)}
.text-center{text-align:center}
.w-full{width:100%}
.grow{flex:1}
.justify-start{justify-self:start}