/* =====================================================================
   ICC México — Mejoras 2026 (subdominio 2026.iccmex.mx)
   Capa aditiva de UX/UI: móvil, navegación, accesibilidad, rendimiento.
   Se carga DESPUÉS de style.css/custom.css para poder ajustar sin
   reescribir el tema original. No toca producción.
   ===================================================================== */

/* ---------- 0. Base segura / anti-overflow horizontal ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* El header original fija width:1280px inline en .container; en móvil
   eso desbordaba. Neutralizamos solo en pantallas chicas. */
@media (max-width: 1199px){
  #header .container[style]{ width: 100% !important; }
  .container[style*="1280"]{ width: 100% !important; }
}

/* ---------- 1. Imágenes: evitar saltos de layout ---------- */
img{ font-style: italic; } /* alt legible si la imagen falla */

/* Carrusel principal: encuadre estable, sin reflow brusco */
#carouselExampleIndicators .item img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ---------- 2. Áreas táctiles y tipografía en móvil ---------- */
@media (max-width: 1199px){
  #mainnav .menu > li > a,
  #mainnav-mobi .menu > li > a{
    padding: 14px 18px;
    font-size: 16px;
    line-height: 1.3;
  }
  #mainnav-mobi .submenu li a{
    padding: 12px 22px;
    line-height: 1.35;
  }
  /* Botón hamburguesa más grande y con área de toque cómoda */
  .btn-menu{
    padding: 10px;
    margin-top: 6px;
  }
  /* Botones y enlaces tipo botón: altura mínima táctil */
  .btn, .flat-button, button, input[type="submit"]{
    min-height: 44px;
  }
}

/* ---------- 3. Menú móvil: submenús desplegables legibles ---------- */
#mainnav-mobi{
  background: #0b3d67;
}
#mainnav-mobi .submenu{
  background: rgba(255,255,255,.04);
}
#mainnav-mobi .btn-submenu{
  position: absolute;
  right: 0; top: 0;
  width: 56px; height: 48px;
  cursor: pointer;
}
#mainnav-mobi .btn-submenu::after{
  content: "\f107"; /* fa-angle-down */
  font-family: "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  color: #fff;
  position: absolute; right: 20px; top: 14px;
  transition: transform .25s ease;
}
#mainnav-mobi .btn-submenu.active::after{ transform: rotate(180deg); }
#mainnav-mobi li{ position: relative; }

/* ---------- 4. Foco visible (accesibilidad / teclado) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible{
  outline: 3px solid #ffb300;
  outline-offset: 2px;
}

/* Enlace "saltar al contenido" para lectores de pantalla / teclado */
.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 10000;
  background: #0b3d67; color: #fff; padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip-link:focus{ left: 0; }

/* ---------- 5. Formularios más claros ---------- */
.form-control, input[type="text"], input[type="email"], input[type="tel"],
textarea, select{
  font-size: 16px; /* evita el zoom automático de iOS al enfocar */
}
.invalid-message, .is-invalid + .invalid-message{ display: block; }

/* ---------- 6. Botón "volver arriba" ---------- */
#backToTop{
  position: fixed; right: 16px; bottom: 16px; z-index: 9998;
  width: 46px; height: 46px; border-radius: 50%;
  background: #0b3d67; color: #fff; border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  font-size: 20px; line-height: 46px; text-align: center; cursor: pointer;
}
#backToTop.show{ opacity: .9; visibility: visible; }
#backToTop:hover{ opacity: 1; }
@media (max-width: 480px){
  /* Evita chocar con las redes sociales flotantes */
  #backToTop{ bottom: 70px; }
}

/* ---------- 7. Contenido enriquecido del admin (contenedores .post) ----------
   No podemos tocar el HTML que el editor guarda con estilos inline, pero sí
   damos un piso responsive: imágenes y tablas nunca desbordan el móvil. */
.flat-fluid-content .post img,
.post img{ max-width: 100% !important; height: auto !important; }
.flat-fluid-content .post table,
.post table{ display: block; width: 100% !important; overflow-x: auto; }
.flat-fluid-content .post iframe,
.post iframe{ max-width: 100%; }
@media (max-width: 768px){
  .flat-fluid-content .post{ overflow-wrap: break-word; word-wrap: break-word; }
}

/* ---------- 8. Rendimiento percibido: transición de imágenes lazy ---------- */
img.lazyload-2026{ opacity: 0; transition: opacity .4s ease; }
img.lazyload-2026.loaded{ opacity: 1; }

/* ---------- 9. Redes sociales flotantes en móvil (más compactas) ---------- */
@media (max-width: 768px){
  .sticky-container{ z-index: 9997; }
  .sticky-container .sticky li{ width: 44px; }
}

/* =====================================================================
   PASS 2 — Navegación y pulido
   ===================================================================== */

/* ---------- 10. Submenús de escritorio: legibilidad y jerarquía ---------- */
@media (min-width: 1200px){
  #mainnav .submenu{
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    border-radius: 0 0 6px 6px;
  }
  #mainnav .submenu li a{
    transition: background .15s ease, padding-left .15s ease;
  }
  #mainnav .submenu li a:hover{
    background: rgba(11,61,103,.08);
    padding-left: 24px;
  }
  /* Submenús de tercer nivel (comisiones) alineados a la izquierda para lectura */
  #mainnav .submenu li ul li a{ text-align: left !important; }
}

/* ---------- 11. Menú superior (header-top): separación y foco ---------- */
.menu-top .menu > li > a{ transition: color .15s ease; }
.menu-top .menu > li > a:hover{ color: #ffb300; }

/* ---------- 12. Encabezado sticky más compacto al hacer scroll ---------- */
.header.downscrolled,
.header-sticky .header.affix{
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ---------- 13. Tarjetas de eventos/sesiones/noticias: consistencia ---------- */
.flat-row .item,
.flat-blog .post,
.blog-item{
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 992px){
  .flat-blog .post:hover,
  .blog-item:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
  }
}

/* ---------- 14. Botones principales: contraste y estado ---------- */
.flat-button.btn-default,
.btn-info{
  transition: filter .15s ease, transform .05s ease;
}
.flat-button.btn-default:hover,
.btn-info:hover{ filter: brightness(1.06); }
.flat-button.btn-default:active,
.btn-info:active{ transform: translateY(1px); }

/* ---------- 15. Indicadores del carrusel: más visibles/táctiles ---------- */
#carouselExampleIndicators .carousel-indicators li{
  width: 12px; height: 12px; border-radius: 50%;
  margin: 0 5px;
}
#carouselExampleIndicators .carousel-control{
  width: 8%;
}
@media (max-width: 768px){
  #carouselExampleIndicators .carousel-control .glyphicon{
    font-size: 22px;
  }
}

/* ---------- 16. Footer: aire y enlaces legibles en móvil ---------- */
@media (max-width: 768px){
  footer, .footer{ text-align: center; }
  footer .col-md-3, footer .col-md-4, footer [class*="col-"]{
    margin-bottom: 22px;
  }
}

/* ---------- 17. Reduce motion: respeta preferencia del usuario ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}