/* ==========================================
   CRITICAL VIEWPORT AND IMAGE FIXES
   This file ensures nothing breaks the viewport
   =========================================== */

/* Force viewport constraints on everything */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Critical: Prevent any element from causing horizontal scroll */
* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Exception for elements that need full width */
html,
body,
.row,
[class*="col-"] {
    max-width: 100vw !important;
}
dialog#enrollModal,
dialog#enrollModal:modal {
    max-width: none !important;
}

/* Force all images to be responsive (mobile only for aggressive sizing) */
@media screen and (max-width: 768px) {
    img,
    picture,
    video,
    canvas,
    svg {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block;
    }

    /* Tailwind and custom image classes */
    .w-full img,
    .hero-image,
    .split-image,
    .gallery-item,
    [class*="image"] {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Container safety (mobile only; desktop uses normal layout widths) */
@media screen and (max-width: 768px) {
    .container,
    .container-fluid,
    [class*="container"],
    main,
    section,
    div {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Prevent main layout containers from causing horizontal overflow */
body > main [class*="grid"],
body > main > .container > [class*="grid"] {
    max-width: 100%;
}
/* Ojo (06/08/2026): esta regla es para los CONTENEDORES del horario, no para las
   tarjetas de dentro. Las tarjetas de profe llevan "flex" en sus clases, así que
   caían aquí, se quedaban con overflow auto y Chrome (con barras clásicas) les
   pintaba una barrita de scroll: se veía como dos flechitas ▲▼ al lado del nombre.
   Se excluyen las tarjetas y el hueco "+" del calendario. */
#scheduleScrollContainer,
#scheduleScrollContainer [class*="grid"],
#scheduleScrollContainer [class*="flex"] {
    overflow-x: auto !important;
}
#scheduleScrollContainer .book-slot,
#scheduleScrollContainer .book-slot [class*="flex"],
#scheduleScrollContainer .request-slot,
#scheduleScrollContainer .request-slot [class*="flex"],
#scheduleScrollContainer .request-gap {
    overflow: hidden !important;
}

/* Tailwind width classes safety */
.w-screen {
    max-width: 100vw !important;
}

.max-w-full {
    max-width: 100% !important;
}

/* Removed: global margin clamping (breaks desktop layouts) */

/* Safe margins for containers */
.container,
[class*="container"],
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Responsive images on all devices */
@media screen and (max-width: 1920px) {
    img, picture, video {
        max-width: 100%;
    }
}

/* Mobile specific */
@media screen and (max-width: 768px) {
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Tablet specific */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    img {
        max-width: 100% !important;
    }
}

/* Prevent absolute positioned elements from causing overflow */
[class*="absolute"] {
    max-width: 100%;
}

/* Fixed positioning safety */
[class*="fixed"] {
    max-width: 100vw;
}

/* BARRITAS DE SCROLL A LA VISTA (Guille, 14/08/2026: "en el ticket sale una
   barrita de scroll a la derecha del nivel del idioma", en intercambios y en
   clases).

   De dónde salen: las reglas de arriba fuerzan `overflow-x: auto` en cualquier
   contenedor con "flex"/"grid" en el nombre de la clase para que nada se salga
   de la pantalla. El WebView de Android pinta barras CLÁSICAS (no flotantes),
   así que cada uno de esos contenedores enseña su barrita gris pegada al texto.
   Ya pasó el 06/08 con las tarjetas de profe y se tapó caso por caso; el diseño
   nuevo de las tarjetas trae clases distintas y ha vuelto.

   Aquí se corta de raíz: en el MÓVIL la barra no se pinta (se navega con el
   dedo). El scroll sigue funcionando igual, solo desaparece el dibujo. En el
   ordenador no se toca nada: allí la barra es la única forma de saber que algo
   se puede desplazar. */
@media (max-width: 767.98px) {
    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    *::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }
}