/*
 * NetControl - capa responsive del tema
 * -------------------------------------
 * SB Admin 2 esta pensado para monitores grandes: el menu queda como una
 * barra de iconos que igual come ancho, las filas con .col nunca se apilan
 * y los formularios se aprietan hasta ser inservibles en una tablet.
 *
 * Este archivo se carga DESPUES de sb-admin-2.css y de bootstrap-dark.
 * La seccion 1 son arreglos de base que valen para cualquier tamano (no
 * cambian nada de como se ve hoy, solo evitan desbordes). De la 2 en
 * adelante todo vive dentro de media queries por debajo de 1200px, asi que
 * la vista en monitor grande queda exactamente igual.
 *
 * Orden de las secciones:
 *   1. Base (cualquier tamano)
 *   2. Rejilla que se acomoda sola (< 1200px)
 *   3. Menu lateral como cajon (< 768px)
 *   4. Barra superior (< 768px)
 *   5. Contenido, tarjetas y tipografia (< 768px)
 *   6. Tablas (< 768px)
 *   7. Formularios y controles (< 768px)
 *   8. Botones y barras de acciones (< 768px)
 *   9. Modales (< 768px)
 *  10. Mapas y paneles (< 768px)
 *  11. Complementos: select2, daterangepicker, sweetalert (< 768px)
 *  12. Celular angosto (< 576px)
 */

/* =========================================================================
   1. Base - que nada obligue a la pagina a crecer a lo ancho
   ========================================================================= */

/* #wrapper es flex; sin min-width:0 una tabla ancha estira toda la pagina
   y aparece scroll horizontal en el body en vez de dentro de la tabla. */
#wrapper #content-wrapper,
#wrapper #content-wrapper #content {
    min-width: 0;
}

/* Scroll con inercia en iOS/Android para todo lo que se desliza. */
.table-responsive,
.modal-body,
.sidebar {
    -webkit-overflow-scrolling: touch;
}

/* Imagenes del contenido que no revienten el ancho.
   Los mosaicos de Leaflet llevan medidas propias, se excluyen aparte. */
.card-body img,
.modal-body img {
    max-width: 100%;
}

.leaflet-container img,
.leaflet-container canvas {
    max-width: none;
}

/* Textos largos sin espacios (correos, MAC, URLs) que no rompan la caja. */
.card-body,
.modal-body,
.table td,
.table th {
    overflow-wrap: break-word;
}

/* =========================================================================
   2. Rejilla que se acomoda sola  (todo lo que no es escritorio)
   -------------------------------------------------------------------------
   La idea: en vez de inventar un breakpoint por pantalla, se le da a cada
   columna un ancho minimo. Como .row ya trae flex-wrap, las columnas se
   reparten mientras quepan y bajan solas cuando no. Una fila de 3 campos se
   ve en 3 en una tablet horizontal, en 2 en una vertical y en 1 en celular,
   sin tocar ni un blade.
   ========================================================================= */

@media (min-width: 576px) and (max-width: 1199.98px) {

    /* Quedan fuera dos casos: .no-gutters (las tarjetas de indicadores, donde
       el texto y el icono tienen que seguir lado a lado) y .nc-fila-compacta,
       la salida manual para cuando una fila deba mantenerse en linea si o si. */
    .row:not(.no-gutters):not(.nc-fila-compacta) > .col {
        flex: 1 1 200px;
    }

    /* min() para que una columna dentro de un panel angosto (por ejemplo el
       detalle del mapa) no se salga: nunca pide mas de lo que hay. */
    .row:not(.no-gutters):not(.nc-fila-compacta) > [class*="col-md-"],
    .row:not(.no-gutters):not(.nc-fila-compacta) > [class*="col-lg-"],
    .row:not(.no-gutters):not(.nc-fila-compacta) > [class*="col-xl-"] {
        min-width: min(200px, 100%);
    }

    /* Las columnas de ancho automatico (botones sueltos) no se tocan. El
       selector repite los :not() para pesar mas que la regla de arriba, que
       las alcanza por el [class*="col-md-"]. */
    .row:not(.no-gutters):not(.nc-fila-compacta) > .col-md-auto,
    .row:not(.no-gutters):not(.nc-fila-compacta) > .col-lg-auto,
    .row:not(.no-gutters):not(.nc-fila-compacta) > .col-xl-auto {
        min-width: 0;
    }
}

/* En celular todo lo que sea .col se apila. */
@media (max-width: 575.98px) {

    .row:not(.no-gutters):not(.nc-fila-compacta) > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =========================================================================
   3. Menu lateral como cajon deslizante  (< 768px)
   -------------------------------------------------------------------------
   De fabrica el menu se queda como una barra de iconos de 6.5rem que le
   quita 104px de ancho a un celular de 360px. Aqui pasa a ser un cajon que
   se monta encima del contenido, con fondo oscuro detras, y se abre con el
   mismo boton de hamburguesa de siempre.
   ========================================================================= */

@media (max-width: 767.98px) {

    /* .toggled va incluido: sb-admin-2.js lo pone solo en pantallas chicas
       y dejaria el cajon en width:0. */
    .sidebar,
    .sidebar.toggled {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 15rem !important;
        max-width: 82vw;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 1036;
        transform: translateX(-100%);
        transition: transform 0.25s ease-in-out;
        will-change: transform;
    }

    body.nc-nav-abierto .sidebar,
    body.nc-nav-abierto .sidebar.toggled {
        transform: translateX(0);
    }

    /* Con el tema claro la barra trae .bg-gradient-primary; con el oscuro no
       trae ninguna clase de fondo y en el escritorio se ve el color del body
       por detras. Como cajon queda flotando sobre el contenido, asi que ahi
       si necesita fondo propio: el mismo #191d21 del body oscuro. */
    .sidebar:not([class*="bg-"]) {
        background-color: #191d21;
    }

    /* Fondo que se pone detras del cajon. */
    .nc-nav-fondo {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease-in-out, visibility 0.25s;
    }

    body.nc-nav-abierto .nc-nav-fondo {
        opacity: 1;
        visibility: visible;
    }

    /* Con el menu abierto no se scrollea el contenido de atras. */
    body.nc-nav-abierto {
        overflow: hidden;
    }

    /* El contenido ya no cede espacio al menu. */
    #wrapper #content-wrapper {
        width: 100%;
        /* overflow-x:hidden (del tema base) convierte a #content-wrapper en
           contenedor de scroll y eso anula el position:sticky de la barra
           superior. "clip" recorta igual pero sin crear ese contenedor. */
        overflow-x: clip;
    }

    @supports not (overflow-x: clip) {
        #wrapper #content-wrapper {
            overflow-x: hidden;
        }
    }

    /* Dentro del cajon el menu se ve completo, no en modo icono. */
    .sidebar .nav-item .nav-link {
        width: auto;
        text-align: left;
        padding: 0.8rem 1rem;
        display: flex;
        align-items: center;
    }

    .sidebar .nav-item .nav-link span {
        display: inline;
        font-size: 0.9rem;
    }

    .sidebar .nav-item .nav-link i {
        width: 1.4rem;
        margin-right: 0.6rem;
        text-align: center;
    }

    /* La flecha del submenu solo existe de 768px hacia arriba en el tema
       base; aqui se dibuja igual, alineada a la derecha del renglon. */
    .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        width: 1rem;
        margin-left: auto;
        text-align: center;
        border: 0;
    }

    .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
        content: '\f105';
    }

    .sidebar .sidebar-brand {
        padding: 1.25rem 1rem;
    }

    .sidebar .sidebar-brand .sidebar-brand-text {
        display: inline;
    }

    .sidebar .sidebar-brand .sidebar-brand-icon img {
        width: 40px;
    }

    .sidebar .sidebar-heading {
        text-align: left;
        font-size: 0.7rem;
    }

    /* Los submenus vuelven a ser acordeon en linea; de fabrica salen como
       globos flotantes al costado de la barra de iconos. */
    .sidebar .nav-item .collapse {
        position: static;
        left: auto;
        top: auto;
        animation: none;
    }

    .sidebar .nav-item .collapsing {
        display: block;
        transition: height 0.3s ease;
    }

    .sidebar .nav-item .collapse .collapse-inner,
    .sidebar .nav-item .collapsing .collapse-inner {
        min-width: 0;
        margin: 0 0 0.5rem 0;
        box-shadow: none;
    }

    .sidebar .nav-item .collapse .collapse-inner .collapse-item,
    .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
        padding: 0.6rem 1.5rem;
        white-space: normal;
    }

    /* Boton de cerrar que agrega responsive.js dentro del cajon. */
    .nc-nav-cerrar {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 2;
        border: 0;
        background: transparent;
        color: inherit;
        opacity: 0.75;
        font-size: 1.35rem;
        line-height: 1;
        padding: 0.4rem 0.6rem;
        cursor: pointer;
    }

    .nc-nav-cerrar:hover,
    .nc-nav-cerrar:focus {
        opacity: 1;
    }

    .sidebar-dark .nc-nav-cerrar {
        color: #fff;
    }

    .sidebar-light .nc-nav-cerrar {
        color: #6e707e;
    }

    .nc-nav-cerrar-item {
        list-style: none;
    }
}

/* Fuera del modo cajon el boton de cerrar no debe verse. */
@media (min-width: 768px) {
    .nc-nav-cerrar,
    .nc-nav-cerrar-item {
        display: none;
    }
}

/* =========================================================================
   4. Barra superior  (< 768px)
   ========================================================================= */

@media (max-width: 767.98px) {

    /* Queda pegada arriba para tener siempre a mano la hamburguesa. */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        margin-bottom: 1rem !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* La barra no trae clase de fondo (se le quito por el tema oscuro).
       Mientras estaba quieta daba igual, pero pegada arriba se le vera el
       contenido pasando por detras, asi que se le pone fondo por tema. */
    #content .topbar {
        background-color: #fff;
    }

    #content.dark-mode .topbar {
        background-color: #000;
    }

    .topbar h1 {
        font-size: 1.05rem;
        line-height: 1.2;
        margin-top: 0 !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .topbar #sidebarToggleTop {
        margin-right: 0.5rem !important;
    }

    .topbar .navbar-nav {
        flex-shrink: 0;
    }

    /* El menu del usuario se sale de la pantalla si no se le pone tope. */
    .topbar .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }
}

/* =========================================================================
   5. Contenido, tarjetas y tipografia  (< 768px)
   ========================================================================= */

@media (max-width: 767.98px) {

    .container-fluid {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
    }

    /* El encabezado de tarjeta trae titulo + acciones en una sola linea. */
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Solo los encabezados grandes. .h5 y .h6 se usan en las tarjetas para
       cifras y titulos, achicarlos ahi no ayuda. */
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.2rem; }
    h4, .h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }

    .breadcrumb {
        flex-wrap: wrap;
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    /* El boton de volver arriba no debe taparle un boton al usuario. */
    .scroll-to-top {
        right: 0.75rem;
        bottom: 0.75rem;
        width: 2.25rem;
        height: 2.25rem;
        line-height: 2.1rem;
    }
}

/* =========================================================================
   6. Tablas  (< 768px)
   -------------------------------------------------------------------------
   Se mantiene el desplazamiento horizontal (una tabla de 9 columnas no cabe
   en un celular de ninguna forma), pero se aprieta la celda y se marca el
   borde para que se note que hay mas contenido hacia el lado.
   ========================================================================= */

@media (max-width: 767.98px) {

    .table td,
    .table th {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }

    .table-responsive {
        overflow-x: auto;
    }

    /* Aviso de "desliza" que agrega responsive.js sobre las tablas anchas. */
    .nc-tabla-aviso {
        font-size: 0.75rem;
        margin-bottom: 0.35rem;
        opacity: 0.7;
    }

    /* Los filtros de la segunda fila del encabezado necesitan aire. */
    .table thead .input-group,
    .table thead .form-control,
    .table thead select {
        min-width: 8rem;
        font-size: 0.8rem;
    }

    /* Los botones de accion de una fila se quedan en linea: la tabla ya se
       desliza, partirlos en dos renglones solo estira la fila. */
    .table td .btn-group,
    .table th .btn-group {
        flex-wrap: nowrap;
    }

    .table .btn-sm,
    .table .btn {
        padding: 0.3rem 0.5rem;
    }
}

/* =========================================================================
   7. Formularios y controles  (< 768px)
   ========================================================================= */

@media (max-width: 767.98px) {

    /* 16px evita que Safari de iOS haga zoom al enfocar un campo. */
    .form-control,
    .custom-select,
    select,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    input[type="email"] {
        font-size: 16px;
    }

    .form-group {
        margin-bottom: 0.85rem;
    }

    label {
        margin-bottom: 0.25rem;
        font-size: 0.875rem;
    }

    /* form-inline en pantalla chica deja de ser en linea. */
    .form-inline .form-control,
    .form-inline .custom-select {
        width: 100%;
    }

    .custom-control-label {
        font-size: 0.875rem;
    }
}

/* =========================================================================
   8. Botones y barras de acciones  (< 768px)
   ========================================================================= */

@media (max-width: 767.98px) {

    /* .pull-right es de Bootstrap 3 y no existe en el 4: son los bloques de
       "Nuevo" / "Importar Excel" arriba de las tablas. En pantalla chica se
       vuelven botones de ancho completo, uno debajo del otro. */
    .pull-right {
        display: block;
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }

    .pull-right > .btn,
    .pull-right > a,
    .pull-right > label.btn {
        display: block;
        width: 100%;
    }

    .pull-right > a > .btn {
        width: 100%;
    }

    /* Grupos de botones que no caben en una linea. */
    .btn-group:not(.nc-sin-envolver) {
        flex-wrap: wrap;
    }

    /* Area minima comoda para el dedo. */
    .btn:not(.btn-sm):not(.close) {
        min-height: 40px;
    }

    /* Barra de herramientas de las tablas livewire. */
    .d-md-flex.justify-content-between > .d-md-flex {
        width: 100%;
    }
}

/* =========================================================================
   9. Modales  (< 768px)
   ========================================================================= */

@media (max-width: 767.98px) {

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: none;
        margin: 0.5rem;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 1rem);
    }

    .modal-dialog-scrollable {
        max-height: calc(100% - 1rem);
    }

    .modal-header {
        position: relative;
        flex-wrap: wrap;
        padding: 0.75rem 2.75rem 0.75rem 1rem;
    }

    /* Varios modales meten una .row con col-5 / col en el encabezado. */
    .modal-header > .row {
        width: 100% !important;
        margin-left: 0;
        margin-right: 0;
    }

    .modal-header > .row > [class*="col"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0.5rem;
    }

    .modal-header > .row > [class*="col"] .btn {
        width: 100%;
    }

    .modal-header .close {
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        margin: 0;
        padding: 0.25rem 0.5rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-footer > .btn {
        flex: 1 1 auto;
        margin: 0;
    }
}

/* =========================================================================
   10. Mapas y paneles  (< 768px)
   -------------------------------------------------------------------------
   Las pantallas de mapa fijan #map en 480-640px con un <style> dentro de
   @yield('css'), que se carga despues de este archivo: por eso el
   !important.
   ========================================================================= */

@media (max-width: 767.98px) {

    #map {
        height: 60vh !important;
        min-height: 300px;
    }

    #panelContenido {
        max-height: 45vh !important;
    }

    /* Los controles de Leaflet mas grandes para el dedo. */
    .leaflet-touch .leaflet-bar a {
        width: 34px;
        height: 34px;
        line-height: 34px;
    }

    .leaflet-popup-content {
        margin: 0.75rem;
        font-size: 0.8125rem;
    }
}

/* =========================================================================
   11. Complementos  (< 768px)
   ========================================================================= */

@media (max-width: 767.98px) {

    /* select2 calcula un ancho fijo al inicializarse y lo deja corto.
       Se apunta solo al contenedor del campo: el del desplegable cuelga del
       body o del modal, y ahi no hay que tocar el ancho o se descuadra. */
    .form-group > .select2-container,
    .input-group > .select2-container,
    [class*="col"] > .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    .select2-dropdown {
        max-width: calc(100vw - 1.5rem);
    }

    /* daterangepicker saca dos calendarios lado a lado. */
    .daterangepicker {
        max-width: calc(100vw - 1rem);
        overflow-x: auto;
    }

    .daterangepicker .drp-calendar {
        max-width: none;
    }

    .daterangepicker.show-calendar .drp-buttons {
        white-space: normal;
    }

    /* SweetAlert2 */
    .swal2-popup {
        width: calc(100vw - 2rem);
        font-size: 0.9rem;
    }

    /* Calendario evo */
    .evo-calendar {
        max-width: 100%;
    }
}

/* =========================================================================
   12. Celular angosto  (< 576px)
   ========================================================================= */

@media (max-width: 575.98px) {

    .container-fluid {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .card-body {
        padding: 0.85rem;
    }

    .card {
        margin-bottom: 1rem !important;
    }

    .topbar h1 {
        font-size: 0.95rem;
    }

    .table td,
    .table th {
        font-size: 0.78rem;
        padding: 0.4rem;
    }

    /* Paginacion de las tablas livewire. */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }

    /* Los formularios cierran con <div class="row"><div class="col"> y el
       boton de guardar adentro: a lo ancho es mas facil de tocar. */
    .row > .col > input.btn[type="submit"],
    .row > .col > button.btn[type="submit"] {
        width: 100%;
    }
}