/* =========================================================================
   te-dictionary
   Sistema de diseño de test-english.com aplicado al diccionario de errores.
   Orden: tokens · base · navbar · cabecera · A–Z · contenedores · portada ·
          índices · entrada · retroestilado · búsqueda · pie · responsive
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------
   Heredados de test-english.com tal cual, más la casilla del diccionario.  */

:root {
    /* del portal */
    --w: #fff;
    --b: #000;
    --greyblue: #37424e;
    --grey: #4d4d4d;
    --grey-mid: #838383;
    --grey-light: #f5f5f5;
    --grey-dark: #353535;
    --main-bg: #f6f9fc;
    --test-bg: #fcfcfc;
    --c-testenglish: #50af31;
    --b-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 2px 6px 2px;
    --b-shadow-hover: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);

    /* la sección Dictionary */
    --c-Dictionary: #004c42;        /* 9,94:1 sobre blanco — AAA */
    --c-Dictionary-light: #b9d9d1;
    --c-Dictionary-tint: #eef5f3;
    --c-Dictionary-ink: #14342e;    /* texto largo, teal casi negro */

    /* corrección y error: sustituyen al #ff0000 / #008000 del contenido */
    --c-wrong: #c62828;             /* 5,62:1 — el #ff0000 original daba 4,00:1 */
    --c-wrong-bg: #fdf1f1;
    --c-right: #1b6b3a;             /* 6,54:1 */
    --c-right-bg: #eef7f1;

    --radius: 4px;
    --radius-card: 15px;
    --navbar-h: 58px;
}

/* ---------- 2. Base ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--main-bg);
    color: var(--b);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--c-Dictionary); }

:where(a, button, input, [tabindex]):focus-visible {
    outline: 3px solid var(--c-Dictionary);
    outline-offset: 2px;
    border-radius: 2px;
}

h1, h2, h3, h4 { text-wrap: balance; }
:is(h1, h2, h3, h4, p):empty { display: none; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    background: var(--w); color: var(--c-Dictionary);
    padding: 12px 18px; font-weight: 600; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Navbar del portal --------------------------------------
   Medidas tomadas de testheme26Gen01 (header-css-nav.php) y verificadas
   sobre test-english.com en vivo a 1440px:
     barra 58px · #313b49f7 · sombra 0 1px 13px 0 #0000004d
     #logo-top absoluto, caja 224px, padding 14px 16px, imagen 174×29
     #navbar-ul centrado, padding 14px 0 0, align-items flex-end
     li padding 0 0 10px · a 16px/600, padding 8px, margen 0 6px, radio 4px
     #navbar-ul-r absoluto, top 10px, right 16px
     .nav-btn borde 2px, radio 10px, padding 4px 6px
   El portal cambia a menú hamburguesa por debajo de 1000px; aquí, con ocho
   secciones y sin desplegables, sale mejor una fila desplazable.          */

#navbar {
    position: sticky; top: 0; z-index: 9999999;
    background: #313b49f7;
    box-shadow: 0 1px 13px 0 #0000004d;
}

#navbar-top {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}

#logo-top { display: block; line-height: 0; flex: none; }
#logo-top img { display: block; width: 174px; height: 29px; max-width: 100%; }

#navbar-ul {
    display: flex; flex-direction: row;
    list-style: none; margin: 0;
}
#navbar-ul li { width: auto; }
#navbar-ul li > a {
    display: block;
    color: var(--w); text-decoration: none; white-space: nowrap;
    font-size: 16px; font-weight: 600;
    line-height: normal;   /* el portal no hereda el 1.5 del body: sin esto el
                              enlace mide 40px de alto en vez de 36 */
    padding: 8px; margin: 0 6px;
    border-radius: 4px;
}
#navbar-ul li > a:hover { background: rgba(255, 255, 255, .1); }
#navbar-ul .is-current > a {
    color: #bfe3da;
    box-shadow: inset 0 -2px 0 0 var(--c-Dictionary);
}

#navbar-ul-r { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-btn {
    display: block;
    background: none; border: 2px solid var(--w); border-radius: 10px;
    color: var(--w); text-decoration: none;
    font-size: 16px; font-weight: 600; line-height: 20px;
    padding: 4px 6px;
}
.nav-btn:hover { background: rgba(255, 255, 255, .12); }

/* ≥1000px: la disposición del portal, exacta */
@media (min-width: 1000px) {
    /* flex-start, no center: en el portal el <ul> arranca en y=0 y su propio
       padding-top de 14px es lo que coloca los enlaces. Centrarlo los subía
       2px. El conjunto mide 60px y rebosa 2px la barra de 58, igual que allí. */
    #navbar-top { height: 58px; align-items: flex-start; }
    #logo-top {
        position: absolute; left: 0; top: 0;
        max-width: 224px; padding: 14px 16px; z-index: 9;
    }
    #navbar-ul {
        align-items: flex-end; justify-content: center;
        height: auto; padding: 14px 0 0;
    }
    #navbar-ul li { padding: 0 0 10px; }
    #navbar-ul li > a { font-size: 14.4px; font-weight: 700; }
    /* El portal deja el bloque derecho en top:10px porque ahí lleva también la
       lupa, más alta que el botón. Sin lupa, lo que cuadra es centrarlo. */
    #navbar-ul-r {
        position: absolute; top: 0; right: 16px;
        height: 58px; align-items: center;
    }
}

/* ≥70em: el portal sube los enlaces a 16px/600 */
@media (min-width: 70em) {
    #navbar-ul li > a { font-size: 16px; font-weight: 600; }
}

/* hamburguesa: mismas medidas y misma animación que el portal */
#o-hmenu { display: flex; align-items: center; }
.hmenu-btn {
    background: none; border: 0; cursor: pointer;
    padding: 4px 10px; display: grid; place-items: center;
}
.hamburger-lines {
    display: flex; flex-direction: column; justify-content: space-between;
    height: 23px; width: 35px;
}
.hamburger-lines .line {
    display: block; height: 4px; width: 100%;
    border-radius: 10px; background: var(--c-testenglish);
}
.hamburger-lines .line1 { transform-origin: 4% 0%;   transition: transform .4s ease-in-out; }
.hamburger-lines .line2 { transition: transform .2s ease-in-out; }
.hamburger-lines .line3 { transform-origin: 0% 100%; transition: transform .4s ease-in-out; }
.hmenuON .hamburger-lines .line1 { transform: rotate(40deg); }
.hmenuON .hamburger-lines .line2 { transform: scaleY(0); }
.hmenuON .hamburger-lines .line3 { transform: rotate(-42deg); }

/* ---------- 4. Cabecera de página: banda + migas ----------------------- */

#page-header {
    max-width: 1100px; margin: 0 auto;
    /* los 14px de abajo son los que impiden que la banda de título quede
       pegada al primer bloque de contenido en cualquier plantilla */
    padding: 18px 16px 14px;
}

#breadcrumbs {
    font-size: 14px; font-weight: 400;
    color: var(--c-Dictionary);
    padding: 0 2px 6px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
#breadcrumbs a { color: var(--c-Dictionary); text-decoration: none; }
#breadcrumbs a:hover { text-decoration: underline; }
#breadcrumbs .sep { color: var(--c-Dictionary-light); }
#breadcrumbs .breadcrumb_last { color: var(--grey-mid); }

.page-title {
    margin: 0;
    background: var(--c-Dictionary);
    color: var(--w);
    border-radius: var(--radius);
    padding: 14px 16px 13px;
    font-size: 20px; font-weight: 600; line-height: 1.2;
    letter-spacing: .01em; text-transform: uppercase; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.page-title-sub {
    text-transform: none; font-weight: 400; font-size: 13px;
    letter-spacing: normal; opacity: .78;
}

/* El lema de una entrada va en minúscula: en un diccionario la caja de la
   palabra es información, no decoración. Es la única desviación deliberada
   respecto a las versales del portal. */
.is-entry .page-title,
.is-search .page-title {
    text-transform: none;
    font-size: 30px;
    letter-spacing: -.01em;
}

/* ---------- 5. La banda A–Z -------------------------------------------- */

.az-band {
    max-width: 1100px;
    margin: 14px auto;
    padding: 0 16px;
}
.az-list {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
    margin: 0; padding: 11px 12px; list-style: none;
    background: var(--w); border-radius: var(--radius-card);
    box-shadow: var(--b-shadow);
}
.az-letter {
    position: relative;
    min-width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: var(--radius);
    font-size: 14px; font-weight: 500; text-decoration: none;
    color: var(--c-Dictionary); background: var(--c-Dictionary-tint);
}
a.az-letter:hover { background: var(--c-Dictionary-light); }
.az-letter.is-current { background: var(--c-Dictionary); color: var(--w); }
.az-letter.is-empty { color: #b9c1bf; background: transparent; border: 1px dashed #dfe5e3; cursor: default; }
.az-all {
    min-width: auto; padding: 0 14px; font-weight: 600;
    background: var(--w); border: 1px solid var(--c-Dictionary-light);
    display: flex; align-items: center; gap: 7px;
}
.az-count {
    position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
    background: var(--c-Dictionary); color: var(--w);
    font-size: 9px; font-weight: 600; line-height: 1;
    padding: 3px 4px; border-radius: 2px;
    opacity: 0; transition: opacity .15s;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.az-letter:hover .az-count,
.az-letter:focus-visible .az-count { opacity: 1; }
.az-all .az-count { position: static; opacity: 1; }

/* filtro en vivo (az.js) */
.az-letter[hidden] { display: none !important; }

/* ---------- 6. Contenedores -------------------------------------------- */

.wrap { margin: 0 auto; padding-inline: 16px; padding-block: 0 8px; }
.maxW1100 { max-width: 1100px; }
.maxW900 { max-width: 900px; }

.card {
    background: var(--w);
    border-radius: var(--radius-card);
    box-shadow: var(--b-shadow);
    padding: 22px 24px;
    margin-bottom: 16px;
}

/* ---------- 7. Portada ------------------------------------------------- */

.home-search {
    max-width: 620px;
    margin: 0 auto 16px;
    padding-inline: 16px;
}

.dict-search { display: flex; gap: 8px; }
.dict-search-field {
    flex: 1; min-width: 0;
    font: inherit; font-weight: 400;
    padding: 11px 14px;
    border: 1px solid #dbe3e6; border-radius: var(--radius);
    background: var(--w); color: var(--b);
}
.dict-search-field::placeholder { color: var(--grey-mid); }
.dict-search-submit {
    font: inherit; font-weight: 500;
    background: var(--c-Dictionary); color: var(--w);
    border: 1px solid transparent; border-radius: var(--radius);
    padding: 11px 20px; cursor: pointer;
}
.dict-search-submit:hover { background: var(--grey); }

.page-primary h2,
.page-primary h3,
.page-primary h4 { color: var(--c-Dictionary); }

.page-primary { color: var(--c-Dictionary-ink); font-weight: 400; }
.page-primary h3 { font-size: 19px; font-weight: 600; margin: 26px 0 10px; }
.page-primary h3:first-child { margin-top: 0; }
.page-primary p { margin: 0 0 1em; max-width: 68ch; line-height: 1.6; }
.page-primary p:last-child { margin-bottom: 0; }
/* el contenido trae color:#000000 en línea desde 2015 */
.page-primary span[style*="#000000"] { color: inherit !important; }

/* El índice A–Z de la portada es contenido: vive en la página 785 como un
   bloque de botones. El tema no lo esconde ni lo duplica; le da el mismo
   aspecto que a los chips de la banda del resto del sitio. */
.home .page-primary .wp-block-buttons {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin: 0 0 24px; padding: 0; list-style: none;
}
.home .page-primary .wp-block-button { margin: 0; }
.home .page-primary .wp-block-buttons:has(a[href*="/category/"]) .wp-block-button__link {
    min-width: 34px; height: 34px;
    display: grid; place-items: center;
    padding: 0 9px;
    border: 0; border-radius: var(--radius);
    background: var(--c-Dictionary-tint); color: var(--c-Dictionary);
    font-size: 14px; font-weight: 500; text-decoration: none;
}
.home .page-primary .wp-block-buttons:has(a[href*="/category/"]) .wp-block-button__link:hover {
    background: var(--c-Dictionary-light);
}
/* los demás bloques de botones de la página son llamadas a la acción de verdad */
.home .page-primary .wp-block-buttons:not(:has(a[href*="/category/"])) .wp-block-button__link {
    display: inline-block;
    background: var(--c-Dictionary); color: var(--w);
    border: 1px solid transparent; border-radius: var(--radius);
    padding: 11px 20px; font-size: 16px; font-weight: 500; text-decoration: none;
}
.home .page-primary .wp-block-buttons:not(:has(a[href*="/category/"])) .wp-block-button__link:hover {
    background: var(--grey);
}

/* ---------- 8. Índices de lemas ---------------------------------------- */

.dict-index {
    margin: 0; padding: 0; list-style: none;
    columns: 4 150px; column-gap: 26px;
}
.dict-index li { break-inside: avoid; margin: 0 0 3px; }
.dict-index a {
    display: block;
    padding: 6px 0 6px 12px;
    border-left: 2px solid var(--c-Dictionary-light);
    color: var(--c-Dictionary-ink); text-decoration: none;
    font-size: 15px; font-weight: 400;
}
.dict-index a:hover {
    border-left-color: var(--c-Dictionary);
    background: var(--c-Dictionary-tint);
    color: var(--c-Dictionary);
}

/* filtro en vivo del índice (az.js) */
.index-filter { margin: 0 0 16px; }
.index-filter-field {
    width: 100%; max-width: 340px;
    font: inherit; font-weight: 400; font-size: 15px;
    padding: 9px 13px;
    border: 1px solid #dbe3e6; border-radius: var(--radius);
    background: var(--test-bg); color: var(--b);
}
.index-filter-field::placeholder { color: var(--grey-mid); }
.index-filter-status {
    margin: 7px 0 0; min-height: 1.2em;
    font-size: 13px; color: var(--grey-mid); font-weight: 400;
}
.dict-index li[hidden] { display: none !important; }

/* ---------- 9. Entrada: estructura ------------------------------------- */

.entry-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 16px;
    align-items: start;
}

.entry-aside { display: grid; gap: 12px; }
.aside-box {
    background: var(--w); border-radius: var(--radius-card);
    box-shadow: var(--b-shadow); padding: 16px 18px;
}
.aside-title {
    margin: 0 0 10px;
    font-size: 11px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--grey-mid);
}
.aside-list { margin: 0; padding: 0; list-style: none; }
.aside-list a {
    display: block; padding: 5px 0;
    color: var(--c-Dictionary-ink); text-decoration: none; font-size: 15px;
}
.aside-list a:hover { color: var(--c-Dictionary); text-decoration: underline; }
.aside-more {
    display: inline-block; margin-top: 10px;
    font-size: 14px; font-weight: 500; color: var(--c-Dictionary); text-decoration: none;
}
.aside-more:hover { text-decoration: underline; }
.aside-search .dict-search { flex-direction: column; }

.entry-tags {
    margin-top: 26px; padding-top: 16px;
    border-top: 1px solid var(--grey-light);
    font-size: 14px; color: var(--grey-mid);
}
.entry-tags a { color: var(--c-Dictionary); }
.entry-tags-label { font-weight: 500; }

/* ---------- 10. Entrada: retroestilado del contenido de 2015 -----------
   Nada de esto reescribe la base de datos. Los estilos en línea que llevan
   las 380 entradas se leen como si fueran clases.                        */

.entry-body {
    color: var(--c-Dictionary-ink);
    font-weight: 400;
    font-size: 16.5px;
    line-height: 1.62;
}
.entry-body > :first-child { margin-top: 0; }
.entry-body p { margin: 0 0 14px; max-width: 66ch; }
.entry-body strong, .entry-body b { font-weight: 600; color: var(--b); }
.entry-body a { color: var(--c-Dictionary); }

/* marcador de acepción — lo pone te_dict_prepare_entry() */
.entry-body h2.sense {
    display: flex; align-items: center; gap: 10px;
    margin: 30px 0 12px; font-size: 0;
}
.entry-body h2.sense::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--c-Dictionary-light), transparent);
}
.entry-body h2.sense:first-child { margin-top: 0; }
.sense-num {
    flex: none;
    width: 26px; height: 26px; border-radius: var(--radius);
    display: grid; place-items: center;
    background: var(--c-Dictionary); color: var(--w);
    font-size: 13px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* los h2 y h3 que sí llevan texto */
.entry-body h2:not(.sense),
.entry-body h3 {
    font-size: 18px; font-weight: 600; color: var(--c-Dictionary);
    margin: 28px 0 10px;
}

/* el par ×/√ como una unidad */
.entry-body p:has(> span[style*="#ff0000"]),
.entry-body p:has(> span[style*="#FF0000"]) {
    display: grid; gap: 3px; margin: 0 0 16px; max-width: 66ch;
}
.entry-body p:has(> span[style*="#ff0000"]) br,
.entry-body p:has(> span[style*="#FF0000"]) br { display: none; }

/* error y corrección. El !important es necesario: compite contra el
   atributo style= de cada span, que tiene más peso que cualquier selector. */
.entry-body span[style*="#ff0000"],
.entry-body span[style*="#FF0000"] {
    display: block;
    color: var(--c-wrong) !important;
    background: var(--c-wrong-bg);
    border-left: 3px solid var(--c-wrong);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 7px 13px;
}
.entry-body span[style*="#008000"],
.entry-body span[style*="#339966"],
.entry-body span[style*="#008800"] {
    display: block;
    color: var(--c-right) !important;
    background: var(--c-right-bg);
    border-left: 3px solid var(--c-right);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 7px 13px;
}
/* el naranja suelto (50 apariciones, significado sin documentar): se deja */
.entry-body span[style*="#ff6600"] { font-weight: 500; }

/* remisiones «→ See LUNCH» — las marca el filtro */
.entry-body p.see-also {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 8px 0 0;
    background: var(--c-Dictionary-tint); color: var(--c-Dictionary);
    border-radius: var(--radius); padding: 8px 14px;
    font-size: 15px; font-weight: 500;
}
.entry-body p.see-also::before { content: "\2192"; font-weight: 400; }
.entry-body p.see-also a { text-decoration: none; font-weight: 600; }
.entry-body p.see-also a:hover { text-decoration: underline; }

/* tablas (5 entradas) e incrustados (2) */
.entry-body table {
    border-collapse: collapse; width: 100%;
    margin: 0 0 18px; font-size: 15.5px;
    display: block; overflow-x: auto;
}
.entry-body table td, .entry-body table th {
    border: 1px solid var(--c-Dictionary-light);
    padding: 12px 14px; vertical-align: top; text-align: left;
}
.entry-body table th { background: var(--c-Dictionary-tint); font-weight: 600; }
.entry-body iframe { max-width: 100%; border: 0; border-radius: var(--radius); }
.entry-body ul, .entry-body ol { margin: 0 0 16px; padding-left: 1.35em; max-width: 66ch; }
.entry-body li { margin-bottom: 5px; }
.entry-body blockquote {
    margin: 0 0 16px; padding: 2px 0 2px 16px;
    border-left: 3px solid var(--c-Dictionary-light); color: var(--grey);
}
.entry-body img { border-radius: var(--radius); }

/* botones de compartir (portados de inc.sharing-buttons.php del portal:
   mismos destinos, mismos iconos y el mismo gesto de enseñar la etiqueta al
   pasar por encima; el radio se alinea con el resto del tema) */
#sharing-buttons {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 30px 0 0; padding-top: 22px;
    border-top: 1px solid var(--grey-light);
}
.sharing-title {
    flex-basis: 100%; margin: 0 0 2px;
    font-size: 11px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--grey-mid);
}
.resp-sharing-button__link { text-decoration: none; color: var(--w); }
.resp-sharing-button {
    display: flex; align-items: center;
    border-radius: var(--radius); padding: 8px 11px;
    transition: background-color .15s ease-out;
}
.resp-sharing-button__icon { display: inline-flex; }
.resp-sharing-button__icon svg { display: block; width: 18px; height: 18px; fill: var(--w); }
.resp-sharing-button span {
    display: inline-block; color: var(--w);
    font-size: 0; font-weight: 500; opacity: 0;
    transition: opacity .25s ease-out, font-size .25s ease-out, padding .25s ease-out;
}
.resp-sharing-button__link:hover span,
.resp-sharing-button__link:focus-visible span { font-size: 13.5px; opacity: 1; padding-left: 8px; }

.resp-sharing-button--facebook { background-color: #3b5998; }
.resp-sharing-button--facebook:hover { background-color: #2d4373; }
.resp-sharing-button--twitter  { background-color: #111; }
.resp-sharing-button--twitter:hover { background-color: #000; }
.resp-sharing-button--linkedin { background-color: #0077b5; }
.resp-sharing-button--linkedin:hover { background-color: #046293; }
.resp-sharing-button--whatsapp { background-color: #25d366; }
.resp-sharing-button--whatsapp:hover { background-color: #1da851; }
.resp-sharing-button--email    { background-color: #777; }
.resp-sharing-button--email:hover { background-color: #5e5e5e; }

/* ---------- 11. Búsqueda y estados vacíos ------------------------------ */

.search-box { padding: 18px 20px; }

.search-results { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.search-hit {
    background: var(--w); border-radius: var(--radius-card);
    box-shadow: var(--b-shadow); padding: 16px 20px;
}
.search-hit-title {
    font-size: 19px; font-weight: 600; color: var(--c-Dictionary); text-decoration: none;
}
.search-hit-title:hover { text-decoration: underline; }
.search-hit-letter {
    display: inline-block; margin-left: 9px;
    background: var(--c-Dictionary-tint); color: var(--c-Dictionary);
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    padding: 2px 8px; border-radius: var(--radius); vertical-align: 2px;
}
.search-hit-excerpt {
    margin: 6px 0 0; font-size: 15px; color: var(--grey); max-width: 68ch; font-weight: 400;
}

.empty-state { text-align: center; padding: 34px 24px; }
.empty-state h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: var(--c-Dictionary); }
.empty-state p { margin: 0 auto 18px; max-width: 52ch; color: var(--grey); font-weight: 400; }
.empty-state .dict-search { max-width: 480px; margin: 0 auto; }

.pagination { display: flex; justify-content: center; margin: 8px 0 20px; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers {
    min-width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: var(--radius); text-decoration: none;
    background: var(--w); color: var(--c-Dictionary); box-shadow: var(--b-shadow);
    font-size: 14px; font-weight: 500; padding: 0 8px;
}
.pagination .page-numbers.current { background: var(--c-Dictionary); color: var(--w); }

/* ---------- 12. Pie ---------------------------------------------------- */

.site-main { flex: 1 0 auto; }

#footer {
    flex: none;
    background: var(--greyblue); color: var(--w);
    margin-top: 30px; padding: 28px 16px;
}
.footer-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px;
}
.footer-logo { line-height: 0; }
.footer-logo img { height: 22px; width: auto; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.footer-nav a { color: #cfd8e4; font-size: 14px; text-decoration: none; }
.footer-nav a:hover { color: var(--w); text-decoration: underline; }
.footer-legal {
    flex-basis: 100%; margin: 0;
    font-size: 13px; color: #9fb0c6;
}
.footer-legal a { color: #cfd8e4; }

/* ---------- 13. Responsive --------------------------------------------- */

@media (max-width: 900px) {
    .entry-layout { grid-template-columns: 1fr; }
    .entry-aside { order: 2; }
}

/* < 1000px: menú de pantalla completa con hamburguesa, igual que el portal.
   Allí cada sección despliega su submenú; aquí los ocho enlaces son planos,
   así que la lista va directa. */
@media (max-width: 999.98px) {
    #navbar-top {
        height: 58px; justify-content: flex-start;
        padding: 0 14px;
    }
    #logo-top { padding: 0; }
    #logo-top img { width: 150px; height: 25px; }

    #navbar-ul-r { margin-left: auto; display: flex; align-items: center; gap: 4px; }

    #portal-nav {
        position: fixed; inset: 58px 0 0 0;
        z-index: 9999998; pointer-events: none;
    }
    #navbar-ul {
        flex-direction: column; align-items: center; justify-content: flex-start;
        width: 100%; height: 100%;
        margin: 0; padding: 8vh 0 20vh;
        background: #313b49f7; overflow-y: auto;
        opacity: 0; visibility: hidden;
        transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    }
    #navbar-ul li { width: 100%; padding: 10px 0; text-align: center; }
    #navbar-ul li > a {
        display: inline-block;
        font-size: 24px; font-weight: 700;
        margin: 0; padding: 8px 16px;
    }
    #navbar-ul .is-current > a { box-shadow: inset 0 -3px 0 0 var(--c-Dictionary); }

    .hmenuON #portal-nav { pointer-events: auto; }
    .hmenuON #navbar-ul { opacity: 1; visibility: visible; }
    .hmenuON, .hmenuON body { overflow: hidden; }
    /* Dos cosas con el menú abierto:
       1. El bloqueo del scroll deja sin efecto el position:sticky de la barra
          —un sticky dentro de un contenedor que no scrollea no se pega— y
          desaparecía justo el botón para cerrar. Pasa a fija.
       2. La barra ocupa toda la pantalla. El portal hace lo mismo, y no es
          capricho: su fondo #313b49f7 es translúcido, así que hacen falta las
          dos capas —la de la barra y la de la lista— para que el contenido de
          debajo no se lea a través del menú. */
    .hmenuON #navbar {
        position: fixed; top: 0; left: 0; right: 0;
        height: 100vh; overflow: hidden;
    }
}

@media (min-width: 1000px) {
    #o-hmenu { display: none !important; }
}

@media (max-width: 700px) {
    .page-title { font-size: 17px; }
    .is-entry .page-title { font-size: 25px; }
    .dict-index { columns: 2 120px; }
    .dict-search { flex-direction: column; }
    .az-list { gap: 4px; padding: 9px; }
    .az-letter { min-width: 28px; height: 28px; font-size: 13px; }
    .card { padding: 18px 16px; }
}

/* ---------- 14. Impresión ---------------------------------------------- */

@media print {
    #navbar, #footer, .az-band, .entry-aside, .skip-link, .home-search,
    #sharing-buttons { display: none !important; }
    body { background: var(--w); }
    .card { box-shadow: none; padding: 0; }
    .page-title { background: none; color: var(--b); text-align: left; padding: 0; }
    .entry-body span[style*="#ff0000"] { background: none; }
    .entry-body span[style*="#008000"] { background: none; }
}