/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

/*
    Methodology Used   : Mobile First
    Breakpoints        : Bootstrap 4.5
    Small (sm)         : 576px  = 36em
    Medium (md)        : 768px  = 48em
    Large (lg)         : 992px  = 62em
    Extra Large (xl)   : 1200px = 75em

    Extra extra large  : 1400px = 87.50em (Available as of Bootstrap 5)
*/

/* Breakpoint Small */
@media screen and (min-width: 36em) {

    /*** Inicio Modales ***/

    .modal-dialog { /* Override a media querie Bootstrap */
        max-width: none;
        margin-top: .5rem;
        margin-bottom: .5rem;
    }

    /*** Fin Modales ***/

}

/* Breakpoint Medium */
@media screen and (min-width: 48em) {

    /*** Inicio Login ***/
    div.bodyLogin {
        background-color: #008AD8;
    }

    .login {
        max-width: 511px;
        background-color: #ffffff;
        border: 1px solid #f5f5f5;
        padding: 45px; /* Override clase Bootstrap (px-md-0) */
        border-radius: 6px;
    }

    .login__rrss__item {
        width: calc(50% - 10px);
    }
    /*** Fin Login ***/

    /*** Inicio "Barra de navegación" ***/
    .navbar-custom {
        padding-right: 10px;
        padding-left: 10px;
        height: 64px;
    }
    
    .navbar-collapse.usermenu {
        display: none !important; /* Override a selector ".navbar-collapse" (de Bootstrap) en la media querie 768px  */
    }
    /*** Fin "Barra de navegación" ***/

    /*** Inicio Dashboard ***/
    .dashboard,
    .view {
        margin-right: 10px;
        margin-left: 10px;
    }
    /*** Fin Dashboard ***/

    /*** Inicio contenedor "Content" ***/
    .content {
        padding-top: 64px; /* Altura del "header" (Escritorio) */
    }
    
    /*** Inicio Room (Nueva vista) ***/
    /* .room__grid {
        margin-top: 100px;  Requerimiento
    } */
    /*** Fin Room (Nueva vista) ***/

    /*** Inicio Inspection (Nueva vista) ***/
    .inspection__table .inspection__table__radiobuttons .radiobutton__text {
        margin-left: 10px;
    }

    .inspection__cards {
        margin-top: 05px;
    }
    /*** Inicio Inspection (Nueva vista) ***/
    
    /*** Inicio Project Code (Nueva vista) ***/
    .defaultproject__table {
        width: 80%;
    }
    /*** Fin Project Code (Nueva vista) ***/
    
    /*** Inicio Templates (Nueva vista) ***/
    .templates__grid__item span:first-child {
        padding-left: 7px; /* Númeor mágico */
    }
    /*** Fin Templates (Nueva vista) ***/

    /*** Inicio Staffing Scenarios (Detail) ***/
    .discharges__item {
        display: flex;
    }

    .discharges__center {
        margin-right: 30px;
       margin-left: 30px;
    }

    .discharges__item .formdynamic__item > strong {
        /* background-color: teal; */
        position: absolute;
        top: -25px;
        left: 0;
    }
    /*** Fin Staffing Scenarios (Detail) ***/

    /*** Inicio Reports ***/
    .report__header__day {
        flex: 1 0 150px;
    }
    /*** Fin Reports ***/
    
    /* Inicio sidebar */
   

    .sidenav { /* Materialize */
        position: fixed;
        top: 64px; /* Altura del Header a partir de vista tableta */
        overflow-y: visible;
        z-index: 20;
        height: 100vh;
    }

    .view__section__left {
        padding-top: 12px !important; /* Override a clase Bootstrap ".no-gutters" */
        padding-right: 30px !important; /* Override a clase Bootstrap ".no-gutters" */
    }

    .view__section__right {
        padding-left: 30px !important; /* Override a clase Bootstrap ".no-gutters" */
        border-top: none;
        border-left: 1px solid #cdced1;
    }

    .collapsible { /* Materialize */
        transform: translateX(0) !important; /* Necesario para sobreescribir el estilo en línea asignado por el script */
        width: 70px;
    }

    .sidenav-overlay { /* Materialize */
        display: none !important; /* Necesario para sobreescribir el estilo en línea asignado por el script */
        opacity: 0 !important; /* Necesario para sobreescribir el estilo en línea asignado por el script */
    }

    .sidebar ul li.active > a, /* Aplica al elemento activo */
    a[aria-expanded="true"] {
        background: #1a79c2;
    }

    .itemSide .textItemS {
        flex-direction: column;
        align-content: center;
        justify-content: center;
        font-size: .6rem;
        width: 70px;
        /* height: calc(100vh/11); */
        height: 46px;
        min-height: 46px;
        max-height: 70px;
        /* height: 60px; Este tamaño responsive para cuando estan todos los iconos */
    }

    .sidenav .collapsible-header { /* Materialize */
        /* height: 63.35px; */
        height: 46px;
    }

    .itemSide.active:nth-child(8) .menuDiv { /* Módulo "Days Off" */
        width: 215px;
    }
        
    
    .itemSide.active:nth-child(10) .menuDiv { /* Módulo Utilities */
        width: 200px;
    }



    .itemSide.active .menuDiv { 
        transform: translateX(70px);
    }
    
    .menuDiv {
        transform: translateX(-145%); /* Número mágico */
        width: 170px;
        z-index: 20;
        margin-top: -47px; /* Número mágico */
    }

    .menuDiv h2.titleMD { /* Selector original (archivo navbar/styles.css) ".menuDiv .titleMD" */
        margin: 0;
        padding: 24px 16px 35px 16px;
    }

    .sidebar .menuDiv .itemMdA { /* Selector original .menuDiv .itemMdA */
        padding-right: 5px;
        padding-bottom: 5px;
    }

        /* .itemSide.active:nth-child(8) .menuDiv span:nth-child(5) .itemMdA,
    .itemSide.active:nth-child(8) .menuDiv span:nth-child(6) .itemMdA {
        margin-left: 32px;
    } */
    
    /* .itemSide.active:nth-child(8) .menuDiv span:nth-child(4) .itemMdA {
        color: #002860;
        font-size: 1.28rem;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 10px;
        border-bottom: none;
    } */
    /* Fin sidebar */

    /* Inicio view (Vista de los módulos) */
    .view {
        flex-grow: 1;
    }

    .view .modal__buttons {
        margin-top: 30px;
    }

    .assignments .modal__buttons {
        /* background-color: pink; */
        margin-top: 0; /* Override al estilo definido en el selector original (línea 239) */
    }

    /*** Inicio Assignments ***/
    .assignments .table,
    .assignments__statics {
        margin-top: -13.5px; /* Número mágico */
    }
    
    .assignments .formdynamic__item:nth-child(10) {
        width: calc(100% / 6); /* Por alguna extraña razón se le debe asignar el ancho. Debería ocupar el col definido sin importar el contenido que éste albergue. Verificar con más calma. */
    }

    .assignments .duties thead .modal__buttons__item,
    .assignments .duties .modal__buttons__item,
    .duties .modal__buttons__item, /* Selector que aplica en la vista room (Advanced search / Mass edit rooms) */
    .room__grid .modal__buttons__item,
    .navigation .navigation__item,
    .modal__buttons__item.button--2 { /* Este selector se sustituirá por la clse .button--2 */
        width: auto;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        padding-right: 15px;
        padding-left: 15px;
    }
    /*** Fin Assignments ***/

    .duties .modal__buttons__item:hover { /* Selector que aplica en la vista room (Advanced search / Mass edit rooms) */
        text-decoration: none;
    }

    /* .navigation .navigation__item {
        height: 35px;
        line-height: 35px;
        font-size: 16px;
    } */

    .view .modal__buttons__item {
        margin-top: 0;
        margin-left: 10px;
    }

    /* .view .modal__buttons__item.cancel {
        display: inline-block;
        margin-left: 0;
    } */

    .view .modal__buttons__item.cancel {
        /** @devjavargas */
        border: 1px solid #008AD8;
        display: inline-block;
        background-color: #ffffff;
        color: #008AD8;
        font-weight: 600;
        text-align: center;
        width: 75px; /* Utilizado actualmente */
        border-radius: 4px;
        margin-top: 10px;
        height: 30px;
        line-height: 27px;
        font-size: 12px;
        /**--------------------- */
    }


    .bar_container {
        margin-top: 10px;
        margin-bottom: 10px; /*Número mágico */
    }
    /* Fin view (Vista de los módulos) */
    
    /* Inicio detail (Detalle de los módulos) */
    .detail__content {
        padding-top: 20px;
        padding-bottom: 60px; /* Número mágico */
    }

    .detail__content + .modal__buttons {
        margin-top: 0;
    }

    .detail__content + .modal__buttons > .modal__buttons__item.cancel {
        margin-right: 50px;
    }

    .detail__content__notes {
        max-height: 300px;
        overflow-y: auto;
    }

    .detail__content__formdynamic .formdynamic__item:nth-child(2),
    .detail__content__formdynamic .formdynamic__item.col-md-4:nth-child(3) { /* Aplica al requerimiento del story #132 solicitado en el sprint #3. */
        margin-top: 0;
    }

    .detail__content__formdynamic .formdynamic__item[class*="col-md-4"] { /* Para evitar líneas unidas en la vista 1280px. De acuerdo al comentario ubicado en la línea 306 de el actual archivo. */
        max-width: calc(calc(100% / 3) - 20px);
    }
    /* Fin detail (Detalle de los módulos) */

    /* Inicio íconos */
    .iconSideO {
        width: 25px;
        height: 25px;
        margin: 0 auto 2px;
    }
    /* Fin íconos */

    /*** Fin contenedor "Content" ***/

    /*** Inicio "Contador" ***/
    .counter {
        margin-top: 0;
        position: fixed;
        right: 25px;
        bottom: 25px;
    }
    /*** Fin "Contador" ***/

    /*** Inicio Clases Fix" ***/

    .fix-align__modal {
        margin-right: -68px;
    }

    /* .fix-space__button .modal__buttons { Aparentemente no es necesario, debido a la refactorización
        margin-top: 0;
    } */

    /*** Fin Clases Fix" ***/

    /*** Inicio Modales ***/

    .modal-sm-dhk {
        max-width:600px;
    }
    .modal-sm-dhk .linea-form {
        max-width: 450px;
    }
    
    .modal { /* Bootstrap */
        width: 100%; /* Materialize. Se utiliza el mismo selector */
        margin: 0; /* Override a media querie */
        top: 0;
    }
    
    .modal .close {  /* Bootstrap */
        box-shadow: 0 0 15px rgba(0,0,0,0.16);
    }

    .modal-dialog { /* Bootstrap */
        margin-top: 64px;
    }

    .modal-header .close { /* Bootstrap */
        margin: -1rem -1rem -1rem auto;
    }

    .modal .modal-content { /* Bootstrap */
        padding: 29px 51px 37px;
    }

    /* Inicio Waitingmodal */
    .waitingmodal {
        top: 0;
        left: 0;
    }
    /* Fin Waitingmodal */

    /* Inicio FormDynamic */
    .formdynamic__item__field {
        display: block;
    }

    .formdynamic__item__field input,
    .formdynamic__item__field select {
        max-width: 270px;
    }

    .formdynamic__item[class*="col-md-6"] {
        flex-basis: calc(50% - 40px);
    }

    .formdynamic__item[class*="col-md-6"]:nth-child(even):last-child,
    .formdynamic__item[class*="col-md-6"]:nth-child(5):last-child {
        position: relative;
        right: -40px;
    }

    /* Inicio Fix Class */
    .fix-class .formdynamic__item[class*="col-md-6"]:last-child {
        right: 0;
    }
    /* Fin Fix Class */

    .formdynamic__item[class*="col-md-4"]:nth-child(2) {
        margin-right: auto;
        margin-left: auto;
    }

    .modal-lg-dhk .formdynamic__item[class*="col-md-4"] {
        flex-basis: calc(calc(100% / 3) - calc(80px / 3));
    }

    .formdynamic__item[class*="col-md-6"] .formdynamic__item__field input,
    .formdynamic__item[class*="col-md-6"] .formdynamic__item__field select,
    .formdynamic__item[class*="col-md-12"] .formdynamic__item__field input,
    .formdynamic__item[class*="col-md-12"] .formdynamic__item__field select {
        width: 100%;
        max-width: 100%;
    }
    
    .modal-md-dhk .linea-form {
        max-width: 555px;
    }
    /* Fin FormDynamic */

    /*** Fin Modales ***/

    /*** Inicio overrides Vuetify ***/
    .v-data-table > .v-data-table__wrapper > table > tbody > tr > td {
        padding-right: 16px !important; /* Para poder aplicar el override */
        padding-left: 16px !important; /* Para poder aplicar el override */
        height: 48px !important; /* Restaurando valor por defecto */
    }

    .v-data-table__mobile-row {
        align-items: center !important; /* Restaurando valor por defecto */
    }

    /* .v-data-table__mobile-row__cell {
        text-align: right;
    } */
    /*** Fin overrides Vuetify ***/

}

/* Breakpoint Large */
@media screen and (min-width: 62em) {

    /*** Inicio Dashboard ***/
    .dashboard__summary {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .collection a.listColectionItem { /* Selector Materialize */
        margin-right: 15px;
    }

    .verticalLine {
        border-left: 1px solid #cdced1;
    }
    /*** Fin Dashboard ***/

}

/* MEDIA QUERY DESKTOP (MINOR MEDIA QUERIE) */
@media (min-width: 1024px) {
    .dashboard,
    .view {
        padding: 22px 34px;
        width: 100vw;
        min-height: 100vh;
    }
    
    .modal { /* Bootstrap */
        transform: translateX(0);
        left: 0;
    }

    .modal-dialog-dhk { /* Validar ¿Por qué se utiliza? */
        width: 100%;
    }

}

@media screen and (min-width: 1280px) {
    /* Inicio sidebar */
    .itemSide .textItemS {
        height: 57px; /* Número mágico. necesario por la barra de marcadores. */
        min-height: 57px; /* Número mágico. necesario por la barra de marcadores. */
    }

    .sidenav .collapsible-header { /* Materialize */
        height: 57px; /* Número mágico. necesario por la barra de marcadores. */
    }

    .menuDiv {
        margin-top: -58px; /* Número mágico */
    }
    /* Fin sidebar */
}

/* Breakpoint Extra Large */
@media screen and (min-width: 75em) {

    /*** Inicio Modales ***/

    .modal-dialog { /* Bootstrap */
        margin-left: 71px;
    }

    /*** Fin Modales ***/
    
}

/* Extra extra large   : 1400px = 87.50em (Available as of Bootstrap 5) */
@media screen and (min-width: 87.50em) {

    /*** Inicio Staffing Scenarios (Detail) ***/
    .discharges__right .discharges__item > label {
        width: 275px;
    }
    /*** Fin Staffing Scenarios (Detail) ***/

    /* Inicio detail (Detalle de los módulos) */
    .detail__content__formdynamic .formdynamic__item[class*="col-md-4"] { /* Para evitar líneas unidas en la vista 1280px. De acuerdo al comentario ubicado en la línea 306 de el actual archivo. */
        max-width: calc(calc(100% / 3) - 50px);
    }
    /* Fin detail (Detalle de los módulos) */

        /* Inicio sidebar */
    .itemSide .textItemS {
        height: 63.35px;
        min-height: 60px;
    }

    .sidenav .collapsible-header { /* Materialize */
        height: 63.35px;
    }
    
    .menuDiv {
        margin-top: -64px; /* Número mágico */
    }

    .itemSide.active:nth-child(11) .menuDiv { /* Módulo "Options" */
        /* margin-top: -421.033px; Altura del submenú */
    }
    /* Fin sidebar */


}