/* ==========================================================================
   clm-a11y.css — Colegio Liceo Moderno (colegioliceomoderno.edu.co)
   --------------------------------------------------------------------------
   Hoja añadida en la auditoría de 2026-10. Se carga SIEMPRE la última en el
   <head> de cada página para poder corregir sin tocar las hojas originales
   (bootstrap.min.css, style.css, styles.css).

   Contiene tres bloques:
     1. Equivalencias visuales de la reestructuración de encabezados SEO
        (un solo H1 por página; los encabezados decorativos pasaron a <p class="hN">).
        Objetivo: que la página se vea EXACTAMENTE igual que antes.
     2. Utilidades de accesibilidad siempre activas (saltar al contenido,
        foco visible por teclado, honeypot anti-spam, reducción de movimiento).
     3. Panel de accesibilidad (botón flotante + modos que activa js/clm-a11y.js
        añadiendo clases a <html>). Usa la paleta institucional:
          verde CLM  #a8cf45   (color primario de Bootstrap en el sitio)
          azul CLM   #133853   (botones, barra de soporte)
          azul noche #091e3e   (--dark del template)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Equivalencias visuales de encabezados
   -------------------------------------------------------------------------- */

/* style.css asigna peso por etiqueta (h1,h2 = 800; h3,h4 = 700; h5,h6 = 600).
   Un <p class="h5"> no hereda esa regla: se replica aquí. Se excluyen los
   elementos que ya traen una clase fw-* propia (ella debe mandar, como antes). */
p.h1:not([class*="fw-"]), p.h2:not([class*="fw-"]), h2.h1:not([class*="fw-"]) { font-weight: 800 !important; }
p.h3:not([class*="fw-"]), p.h4:not([class*="fw-"]) { font-weight: 700 !important; }
p.h5:not([class*="fw-"]), p.h6:not([class*="fw-"]) { font-weight: 600 !important; }

/* styles.css pone "p { text-align: justify }". Un encabezado convertido a <p>
   debe alinearse como lo hacía el encabezado: heredando del contenedor. */
p.h1, p.h2, p.h3, p.h4, p.h5, p.h6 { text-align: inherit; }

/* Un H2/H3 promovido a H1 conserva su alineación original (styles.css centra
   todos los h1; este H1 antes no era h1 y no estaba centrado por esa regla). */
h1.clm-h1-promoted { text-align: inherit; }

/* Reglas de style.css que apuntaban a etiquetas concretas dentro del carrusel
   y de la marca del menú: se replican para las clases equivalentes. */
.navbar-light .navbar-brand .h1 { color: #fff; }
.sticky-top.navbar-light .navbar-brand .h1 { color: var(--primary); }
@media (max-width: 991.98px) {
  .navbar-light .navbar-brand .h1 { color: var(--primary); }
}
@media (max-width: 576px) {
  .carousel-caption .h5 { font-size: 14px; font-weight: 500 !important; }
  .carousel-caption .h1 { font-size: 30px; font-weight: 600 !important; }
}
/* styles.css: "h3:hover { color: #a8cf45 }" — se conserva en los h3 convertidos */
p.h3:hover { color: #a8cf45; }

/* --------------------------------------------------------------------------
   2. Utilidades de accesibilidad siempre activas
   -------------------------------------------------------------------------- */

/* Enlace "Saltar al contenido principal": invisible hasta que recibe foco con Tab */
.clm-skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100000;
  padding: 10px 18px;
  border-radius: 8px;
  background: #133853;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: top .15s ease;
}
.clm-skip:focus { top: 12px; outline: 3px solid #a8cf45; outline-offset: 2px; }
#contenido:focus { outline: none; }

/* Foco visible SOLO con teclado (:focus-visible): no altera el diseño con mouse/táctil */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #a8cf45 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #133853 !important;
}

/* Honeypot anti-spam de los formularios: fuera de pantalla (no display:none,
   algunos bots lo detectan) y fuera del orden de tabulación. */
.clm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Usuarios que piden menos movimiento en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .wow { visibility: visible !important; }
}

/* Las imágenes fluidas ahora declaran width/height (reserva de espacio, sin saltos
   de diseño). .w-100 no fija la altura en Bootstrap: se mantiene proporcional. */
img.w-100[width][height]:not([style]) { height: auto; }

/* Pantalla de carga (spinner) del template: cubría TODA la página hasta que
   terminaban de cargar jQuery y main.js, retrasando 1-3 s el primer contenido
   visible (FCP/LCP, métricas que Google usa para posicionar). Se desactiva: la
   página se muestra en cuanto llega el HTML. */
#spinner { display: none !important; }

/* Los iframes embebidos (formularios, videos) no deben desbordar en móvil */
iframe { max-width: 100%; }

/* --- Multidispositivo: causas reales de scroll horizontal en celulares ---
   a) Los correos largos (secretaria.academica@colegioliceomoderno.edu.co) no
      tienen dónde partirse y empujaban la página 48 px a la derecha.
   b) Las filas .row.g-5 usan un margen negativo de 1.5rem por lado, mayor que el
      relleno del .container en pantallas < 576 px: sobresalían 12 px. En móvil
      se usa el espaciado g-4 de Bootstrap (solo cambia el espacio horizontal).
   c) Red de seguridad: lo que aún sobresalga (animaciones de entrada de wow.js
      que arrancan fuera de pantalla) se recorta. "clip" no rompe el menú sticky. */
a[href^="mailto:"] { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
  /* d) Franja inferior del pie (fondo #061429): los 4 enlaces legales en una sola
        fila no caben en 390 px; se permite que bajen de línea. */
  .container-fluid[style*="061429"] .d-flex { flex-wrap: wrap; gap: 4px 12px; }
}
body { overflow-x: hidden; overflow-x: clip; }

/* --------------------------------------------------------------------------
   3. Panel de accesibilidad
   -------------------------------------------------------------------------- */
.clm-a11y-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1001;                 /* por encima del botón de WhatsApp (1000) */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #a8cf45;
  background: #133853;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  cursor: pointer;
  padding: 0;
}
.clm-a11y-btn svg { width: 30px; height: 30px; fill: currentColor; }
.clm-a11y-btn:hover { background: #091e3e; }

.clm-a11y-panel {
  position: fixed;
  left: 20px;
  bottom: 88px;
  z-index: 100001;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: #fff;
  color: #091e3e;
  border-radius: 14px;
  border-top: 6px solid #a8cf45;
  box-shadow: 0 12px 36px rgba(9, 30, 62, .35);
  font-family: Nunito, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
.clm-a11y-panel[hidden] { display: none; }
.clm-a11y-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: #133853; color: #fff;
}
.clm-a11y-head .clm-a11y-title { margin: 0; font-size: 18px; font-weight: 800; color: #fff; text-align: left; }
.clm-a11y-close {
  background: transparent; border: 2px solid #a8cf45; color: #fff; border-radius: 8px;
  width: 36px; height: 36px; font-size: 22px; line-height: 1; cursor: pointer;
}
.clm-a11y-body { padding: 14px 16px 16px; }
.clm-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.clm-a11y-row span { font-weight: 700; color: #091e3e; }
.clm-a11y-size { display: flex; gap: 6px; }
.clm-a11y-size button {
  min-width: 44px; height: 40px; border-radius: 8px; border: 2px solid #133853;
  background: #fff; color: #133853; font-weight: 800; cursor: pointer;
}
.clm-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clm-a11y-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 64px; padding: 8px 6px; border-radius: 10px;
  border: 2px solid #d8e6b7; background: #f4f9e8; color: #091e3e;
  font-size: 14px; font-weight: 700; text-align: center; cursor: pointer;
}
.clm-a11y-opt[aria-pressed="true"] { background: #133853; border-color: #a8cf45; color: #fff; }
.clm-a11y-opt .ico { font-size: 20px; line-height: 1; }
.clm-a11y-reset {
  width: 100%; margin-top: 12px; padding: 10px; border-radius: 10px; border: 0;
  background: #a8cf45; color: #091e3e; font-weight: 800; cursor: pointer;
}
.clm-a11y-note { margin: 10px 0 0; font-size: 12px; color: #3c5364; text-align: left; }

/* ---- Modos que activa el panel (clases en <html>) ---- */

/* Tamaño de texto: escala la tipografía base (Bootstrap usa rem) */
html.clm-fs-1 { font-size: 112.5%; }
html.clm-fs-2 { font-size: 125%; }
html.clm-fs-3 { font-size: 140%; }

/* Alto contraste: fondo blanco / texto azul noche; el verde institucional se
   oscurece porque #a8cf45 sobre blanco no alcanza el 4.5:1 de WCAG AA. */
html.clm-contrast body,
html.clm-contrast .bg-light,
html.clm-contrast .bg-white { background: #fff !important; color: #000 !important; }
html.clm-contrast p, html.clm-contrast li, html.clm-contrast span:not(.visually-hidden),
html.clm-contrast small, html.clm-contrast td, html.clm-contrast label { color: #000 !important; }
html.clm-contrast h1, html.clm-contrast h2, html.clm-contrast h3, html.clm-contrast h4,
html.clm-contrast h5, html.clm-contrast h6, html.clm-contrast .text-primary { color: #091e3e !important; }
html.clm-contrast a { color: #0b3d91 !important; text-decoration: underline !important; }
html.clm-contrast .btn-primary, html.clm-contrast .bg-primary {
  background-color: #133853 !important; border-color: #133853 !important; color: #fff !important;
}
html.clm-contrast .btn-primary *, html.clm-contrast .bg-primary * { color: #fff !important; }
html.clm-contrast .bg-dark, html.clm-contrast .bg-dark * { background-color: #000 !important; color: #fff !important; }
html.clm-contrast .bg-dark a { color: #ffe36e !important; }
/* (selector reforzado: style.css usa ".sticky-top.navbar-light .navbar-nav .nav-link" con !important)
   El menú tiene fondo distinto según página/estado (azul, blanco al hacer scroll,
   blanco en móvil): se fija un fondo propio a cada enlace para garantizar contraste. */
html.clm-contrast .navbar.navbar .navbar-nav .nav-link { color: #fff !important; background: #091e3e !important; padding-left: .5rem !important; padding-right: .5rem !important; border-radius: 6px; }
html.clm-contrast .dropdown-menu, html.clm-contrast .dropdown-item { background: #fff !important; color: #091e3e !important; }

/* Escala de grises */
html.clm-gray body > *:not(.clm-a11y-panel):not(.clm-a11y-btn) { filter: grayscale(100%); }

/* Subrayar enlaces */
html.clm-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.clm-links a:not(.btn) { font-weight: 700; }

/* Fuente legible: sin serifas amplia y mayor interlineado/espaciado */
html.clm-readable body, html.clm-readable p, html.clm-readable li, html.clm-readable a,
html.clm-readable span, html.clm-readable h1, html.clm-readable h2, html.clm-readable h3,
html.clm-readable h4, html.clm-readable h5, html.clm-readable h6, html.clm-readable button {
  font-family: Verdana, Tahoma, Arial, sans-serif !important;
  letter-spacing: .03em; word-spacing: .08em;
}
html.clm-readable p, html.clm-readable li { line-height: 1.8 !important; text-align: left !important; }

/* Detener animaciones (wow.js, carruseles CSS, transiciones) */
html.clm-noanim *, html.clm-noanim *::before, html.clm-noanim *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.clm-noanim .wow { visibility: visible !important; }

/* Cursor grande */
html.clm-cursor, html.clm-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 18-13 3 8 17-6 3-8-17-11 9z' fill='%23133853' stroke='%23a8cf45' stroke-width='2.5'/%3E%3C/svg%3E") 6 3, auto !important;
}

/* Guía de lectura (franja que sigue al puntero) */
.clm-guide {
  position: fixed; left: 0; right: 0; height: 44px; z-index: 99998; pointer-events: none;
  background: rgba(168, 207, 69, .18); border-top: 3px solid #133853; border-bottom: 3px solid #133853;
  display: none;
}
html.clm-guide-on .clm-guide { display: block; }

/* El panel no se ve afectado por sus propios modos */
html.clm-contrast .clm-a11y-panel, html.clm-contrast .clm-a11y-panel * { text-decoration: none !important; }
html.clm-contrast .clm-a11y-head, html.clm-contrast .clm-a11y-head * { color: #fff !important; background-color: #133853 !important; }
html.clm-contrast .clm-a11y-opt[aria-pressed="true"], html.clm-contrast .clm-a11y-opt[aria-pressed="true"] * { color: #fff !important; }

@media (max-width: 575.98px) {
  .clm-a11y-btn { left: 12px; bottom: 12px; width: 50px; height: 50px; }
  .clm-a11y-panel { left: 12px; bottom: 72px; }
}

@media print {
  .clm-a11y-btn, .clm-a11y-panel, .clm-guide, .whatsapp-container, .back-to-top { display: none !important; }
}

/* --------------------------------------------------------------------------
   3b. Encabezado unificado (2026-10-16)
   --------------------------------------------------------------------------
   Todas las páginas (salvo las de modalidades) usan ahora el encabezado de
   index.html (.navbar-clm). Sus estilos vivían solo en css/styles.css, que
   varias páginas (legales, equipo, registros...) NO cargan; agregar styles.css
   a esas páginas cambiaría su aspecto (justificado de párrafos, h1 centrados,
   bordes redondeados en imágenes). Por eso se copia aquí ÚNICAMENTE el bloque
   "NAVBAR - COLEGIO LICEO MODERNO" de styles.css (idéntico; en las páginas que
   sí cargan styles.css simplemente se repite sin efecto). */
/* =========================================================
   NAVBAR - COLEGIO LICEO MODERNO
   ========================================================= */

.navbar.navbar-clm {
    background-color: #133853;
    position: relative !important;
    width: 100%;
    min-height: 90px;
    z-index: 999;
    border-bottom: none;
}

/* Logo */

.navbar-clm .navbar-clm-brand {
    display: flex;
    align-items: center;
    margin-right: 35px;
}

.navbar-clm .navbar-clm-brand img {
    max-height: 100px !important;
    width: auto;
    transition: 0.5s;
}

/* Enlaces principales */

.navbar-clm .navbar-nav .nav-link {
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
}

.navbar-clm .navbar-nav .nav-link:hover,
.navbar-clm .navbar-nav .nav-link.active {
    color: #a8cf45 !important;
}

/* Línea inferior al pasar el cursor */

.navbar-clm .navbar-nav .nav-link::before {
    background: #a8cf45 !important;
}

/* Navbar cuando se activa sticky-top */

.sticky-top.navbar-light.navbar-clm {
    background-color: #133853 !important;
}

/* Botón del menú móvil */

.navbar-clm .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-clm .navbar-toggler .fa-bars {
    color: #ffffff !important;
}

/* Menú desplegable */

.navbar-clm .dropdown-menu {
    border: none;
}

.navbar-clm .dropdown-item {
    color: #133853;
}

.navbar-clm .dropdown-item:hover {
    color: #133853;
    background-color: #f5f5f5;
}

/* =========================================================
   VERSIÓN MÓVIL
   ========================================================= */

@media (max-width: 991.98px) {

    .navbar.navbar-clm {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        min-height: auto;
    }

    .navbar-clm .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .navbar-clm .navbar-nav .nav-link,
    .sticky-top.navbar-light.navbar-clm .navbar-nav .nav-link {
        color: #ffffff !important;
        padding: 10px 0;
        margin-left: 0;
    }

    .navbar-clm .navbar-clm-brand img {
        max-height: 62px !important;
        width: auto; 
    }

    .sticky-top.navbar-light.navbar-clm {
        position: relative;
        background-color: #133853 !important;
    }
}


/* =========================================================
   VERSIÓN ESCRITORIO
   ========================================================= */

@media (min-width: 992px) {

    .navbar.navbar-clm {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    }

    .sticky-top.navbar-light.navbar-clm {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #133853 !important;
    }

    .sticky-top.navbar-light.navbar-clm .navbar-clm-brand img {
        max-height: 72px !important;
    }
}

/* Menú al bajar la página: main.js añade .sticky-top a la barra y style.css
   pinta los enlaces con var(--dark) (azul noche) pensando en un fondo blanco,
   pero el fondo de .navbar-clm sigue siendo azul #133853 => texto ilegible.
   Se mantienen blancos (y verdes al pasar el cursor). Selector reforzado para
   superar ".sticky-top.navbar-light .navbar-nav .nav-link" (!important). */
.navbar.sticky-top.navbar-light.navbar-clm .navbar-nav .nav-link { color: #ffffff !important; }
.navbar.sticky-top.navbar-light.navbar-clm .navbar-nav .nav-link:hover,
.navbar.sticky-top.navbar-light.navbar-clm .navbar-nav .nav-link.active,
.navbar.sticky-top.navbar-light.navbar-clm .navbar-nav .nav-link.show { color: #a8cf45 !important; }
.navbar-clm .navbar-toggler .fa-bars { color: #ffffff !important; }

/* --------------------------------------------------------------------------
   4. Logo de la cabecera (index, distancia, historia, mision) — 2026-10-16
   --------------------------------------------------------------------------
   Antes: img/icons/FONDO OSCURO HOROZONTAL.png (lienzo cuadrado 2000x2000 con
   márgenes transparentes) limitado a 100 px de alto => el logo real medía ~30 px.
   Ahora: img/icons/logo-clm-horizontal.png recortado (proporción 2,8:1).
   El tamaño se adapta a la cabecera:
     - la ALTURA manda (llena la franja azul sin desbordarla),
     - el ANCHO queda limitado para no empujar el menú (max-width),
     - en tabletas y celulares se reduce y respeta el espacio del botón de menú. */
.navbar-clm .navbar-clm-brand {
  flex-shrink: 1;
  min-width: 0;
  margin-right: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.navbar-clm .navbar-clm-brand img {
  height: 80px !important;
  max-height: none !important;
  width: auto !important;
  max-width: 260px;
  object-fit: contain;
}
/* Escritorio estrecho (992-1199 px): menú y botones compiten por el ancho */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-clm .navbar-clm-brand { margin-right: 12px; }
  .navbar-clm .navbar-clm-brand img { height: 56px !important; max-width: 160px; }
  /* Se compacta el menú para que logo, enlaces y botones quepan en una sola fila */
  .navbar-clm .navbar-nav .nav-link { margin-left: 14px; font-size: 15px; white-space: nowrap; }
  .navbar-clm .btn.ms-3 { margin-left: .5rem !important; padding-left: .6rem !important; padding-right: .6rem !important; font-size: 15px; white-space: nowrap; }
}
/* Tableta y celular: el logo comparte la fila con el botón hamburguesa */
@media (max-width: 991.98px) {
  .navbar-clm .navbar-clm-brand { margin-right: 12px; padding-top: 0; padding-bottom: 0; }
  .navbar-clm .navbar-clm-brand img { height: 60px !important; max-width: calc(100vw - 140px); }
}
@media (max-width: 575.98px) {
  .navbar-clm .navbar-clm-brand img { height: 48px !important; max-width: calc(100vw - 120px); }
}
/* Barra fija al bajar (escritorio): logo un poco menor para una barra más delgada */
@media (min-width: 1200px) {
  .navbar.sticky-top.navbar-clm .navbar-clm-brand img { height: 64px !important; }
}

/* --------------------------------------------------------------------------
   5. Cabecera fija al bajar (escritorio) — 2026-10-16
   --------------------------------------------------------------------------
   Al hacer scroll, main.js convierte el menú .navbar-clm en barra fija, pero la
   barra superior (dirección / PBX / correo / redes) se comportaba distinto en
   cada página: en distancia.html se iba con el scroll y dejaba un hueco encima
   del menú; en otras el menú la tapaba. Ahora, en todas las páginas que usan
   .navbar-clm, la barra superior queda fija arriba y el menú justo debajo.
   La altura real de la barra superior la mide js/clm-a11y.js (--clm-topbar-h),
   porque varía 1-2 px según la página. Solo escritorio: en móvil esa barra
   está oculta (d-none) y el menú se comporta como antes. */
@media (min-width: 992px) {
  body:has(.navbar-clm) > .container-fluid.bg-dark.px-5.d-lg-block {
    position: sticky;
    top: 0;
    z-index: 1031;
  }
  .navbar.sticky-top.navbar-clm {
    top: var(--clm-topbar-h, 46px) !important;
  }
}