/* ==========================================================================
   layout.css - Base de layout compartida del Virtual Classroom
   --------------------------------------------------------------------------
   Contiene UNICAMENTE las clases que se repetian identicas en las vistas:
   .container_C, .container_D, .container_courses, .mobile_lm, .mobile_cnt.

   Se carga desde view/header.php, ANTES del bloque <style> local de cada
   vista. Eso significa que cualquier vista puede seguir sobreescribiendo lo
   que necesite en su propio <style>: esta hoja es la base, no una camisa de
   fuerza. Cada vista conserva su autonomia.

   Breakpoints: los de Bootstrap 4 que ya usa el proyecto.
       < 576px    movil
       >= 768px   escritorio (donde recien aplican col-md-*)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Contenedores de pagina
   -------------------------------------------------------------------------- */

.container_C {
    min-height: 70%;
    position: relative;
    margin-top: 1vh;
    padding-top: 5vh;
    padding-bottom: 5vh;
    vertical-align: middle;
}

.container_D {
    min-height: 70%;
    position: relative;
    margin-top: 1vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    vertical-align: middle;
    overflow: hidden;
}

.container_courses {
    height: 95%;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Ocultar scrollbars manteniendo el scroll funcional */
.container_C,
.container_D,
.container_courses {
    -ms-overflow-style: none;   /* IE y Edge */
    scrollbar-width: none;      /* Firefox */
}

.container_C::-webkit-scrollbar,
.container_D::-webkit-scrollbar,
.container_courses::-webkit-scrollbar {
    display: none;              /* Safari y Chrome */
}


/* --------------------------------------------------------------------------
   Columnas menu / contenido
   --------------------------------------------------------------------------
   El markup del sistema es:
       <div class="col col-sm-12 col-md-3 mobile_lm">   menu lateral
       <div class="col col-sm-12 col-md-9 mobile_cnt">  contenido

   Problema que resuelve esta seccion:
   `col-md-*` recien aplica desde 768px. Por debajo de eso manda `.col`, que
   reparte ancho equitativo -> el menu y el contenido quedaban lado a lado al
   50/50 en telefono. Las vistas parcheaban eso con media queries a 375, 414,
   430 y 540px, que sumadas cubren 0-540px y dejan roto el tramo 541-767px
   (y desde 376px en las vistas que solo traen el query de 375).

   La regla de abajo cierra el rango completo hasta 767.98px de una sola vez.
   -------------------------------------------------------------------------- */

.mobile_lm,
.mobile_cnt {
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    width: 100%;
}

@media (max-width: 767.98px) {
    .mobile_lm,
    .mobile_cnt {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* El menu lateral deja de competir por altura con el contenido */
    .mobile_lm {
        margin-bottom: 1rem;
    }

    /* En telefono el padding vertical de 5vh come demasiada pantalla */
    .container_C {
        padding-top: 2vh;
        padding-bottom: 2vh;
    }
}


/* --------------------------------------------------------------------------
   Ajustes de contenido en pantalla chica
   -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    /* Las tablas ya van dentro de .table-responsive; esto evita que el
       contenido las estire y fuerce scroll horizontal en toda la pagina. */
    .table-responsive > table {
        width: 100% !important;
    }

    /* Los modales del sistema son todos modal-lg, incluso para formularios
       de dos campos. En telefono ocupan el ancho util con margen minimo. */
    .modal-dialog {
        margin: .5rem;
    }

    /* Nada debe forzar scroll horizontal de la pagina completa.
       Se limita a telefono a proposito: en escritorio no hace falta y el
       navbar usa position:fixed al hacer scroll (clase .sticky), asi que
       conviene no tocar el overflow del body ahi. */
    body {
        overflow-x: hidden;
    }
}


/* --------------------------------------------------------------------------
   Pie de pagina
   --------------------------------------------------------------------------
   El correo y la direccion web son cadenas largas sin espacios. Dentro de una
   columna angosta no rompen solas, y empujan el ancho del documento: medido en
   tablet vertical, la pagina entera media 812 px en una pantalla de 768 y
   aparecia scroll horizontal en TODAS las vistas, no solo en esta.

   Se aplica al pie y no solo al enlace porque cualquier dato de contacto largo
   (un telefono internacional, una direccion) cae en lo mismo.
   -------------------------------------------------------------------------- */

.footer,
.footer a,
.footer li,
.footer p {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Nada dentro del pie puede desbordar su columna */
.footer .row > [class*="col-"] { min-width: 0; }