/* ==========================================
   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;
}