/*
 * ceij-base.css — capa base del sistema CEIJ.
 *
 * Sustituye a ceij-typo-legacy.css, que imponía tipografía global con 206
 * !important desde la base de datos y anulaba los controles de SP Page Builder.
 *
 * Todo va bajo .ceij, que index.php pone en el <body>. No es cosmético: en este
 * sitio el WebAssetManager pinta sus hojas ANTES que template.css, así que el
 * CSS propio queda el primero de la cascada y pierde por orden. Con .ceij cada
 * regla vale 0-1-1 y gana a los selectores de elemento de template.css y
 * Bootstrap (0-0-1) sin importar el orden, mientras sigue perdiendo contra
 * #sppb-addon-x (1-0-1), que es lo que queremos: dentro de sus secciones manda
 * el Page Builder.
 *
 * Por eso aquí no hay ni un !important.
 */

/* ---------------------------------------------------------------------
   Cuerpo y tipografía
   --------------------------------------------------------------------- */

.ceij {
    font-family: var(--ceij-f-texto);
    font-size: var(--ceij-fs-400);
    line-height: var(--ceij-lh-normal);
    color: var(--ceij-c-texto);
    background-color: var(--ceij-c-superficie);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ceij h1, .ceij h2, .ceij h3, .ceij h4, .ceij h5, .ceij h6 {
    font-family: var(--ceij-f-titulo);
    color: var(--ceij-c-titulo);
    line-height: var(--ceij-lh-apretado);
    font-weight: var(--ceij-fw-fuerte);
    margin-block: 0 var(--ceij-e-3);
    text-wrap: balance;
}

.ceij h1 { font-size: var(--ceij-fs-900); }
.ceij h2 { font-size: var(--ceij-fs-800); }
.ceij h3 { font-size: var(--ceij-fs-700); }
.ceij h4 { font-size: var(--ceij-fs-600); }
.ceij h5 { font-size: var(--ceij-fs-500); }
.ceij h6 { font-size: var(--ceij-fs-400); }

.ceij p { margin-block: 0 var(--ceij-e-4); }
.ceij p:last-child { margin-bottom: 0; }

/* Medida de lectura: por encima de ~75 caracteres el ojo pierde el renglón. */
.ceij .ceij-medida { max-width: 68ch; }

.ceij small,
.ceij .ceij-meta {
    font-size: var(--ceij-fs-meta);
    color: var(--ceij-c-texto-suave);
}

.ceij strong, .ceij b { font-weight: var(--ceij-fw-fuerte); }

/* ---------------------------------------------------------------------
   Enlaces
   --------------------------------------------------------------------- */

.ceij a {
    color: var(--ceij-c-marca);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.ceij a:hover { color: var(--ceij-c-marca-oscuro); }

/* ---------------------------------------------------------------------
   Foco — WCAG 2.4.7 y 2.4.11
   El Figma define 151 componentes con :hover y ninguno con :focus. Si el foco
   no se resuelve aquí, como comportamiento por defecto del sistema, no aparece
   en ninguna pantalla. Se usa :focus-visible para no molestar al ratón.
   --------------------------------------------------------------------- */

.ceij :focus-visible {
    outline: var(--ceij-foco-grosor) solid var(--ceij-c-foco);
    outline-offset: var(--ceij-foco-sep);
    border-radius: var(--ceij-r-chico);
}

/* Sobre fondo de marca el azul del foco no se vería: se invierte. */
.ceij .ceij-sobre-marca :focus-visible {
    outline-color: var(--ceij-c-texto-inverso);
}

/* Enlace para saltar al contenido — WCAG 2.4.1 */
.ceij .ceij-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: var(--ceij-e-3) var(--ceij-e-4);
    background: var(--ceij-c-marca);
    color: var(--ceij-c-texto-inverso);
    border-radius: 0 0 var(--ceij-r-medio) 0;
}
.ceij .ceij-saltar:focus { left: 0; }

/* ---------------------------------------------------------------------
   Objetivos táctiles — WCAG 2.5.8
   --------------------------------------------------------------------- */

.ceij a[class*="btn"],
.ceij button,
.ceij [role="button"],
.ceij input[type="submit"],
.ceij input[type="button"] {
    min-height: var(--ceij-tactil-min);
    min-width: var(--ceij-tactil-min);
}

/* Un icono pequeño puede verse pequeño, pero su zona activa no. */
.ceij .ceij-icono-boton {
    display: inline-grid;
    place-items: center;
    min-height: var(--ceij-tactil-min);
    min-width: var(--ceij-tactil-min);
}

/* ---------------------------------------------------------------------
   Imágenes y multimedia
   --------------------------------------------------------------------- */

.ceij img,
.ceij svg,
.ceij video { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------------
   Movimiento — WCAG 2.3.3
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ceij *,
    .ceij *::before,
    .ceij *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
        scroll-behavior: auto;
    }
}

/* ---------------------------------------------------------------------
   Utilidad: contenido solo para lectores de pantalla
   --------------------------------------------------------------------- */

.ceij .ceij-solo-lector {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}