/* =====================================================================
   mobile.css — Correcciones responsive (< 992px) para la app clínica.
   ---------------------------------------------------------------------
   Debe cargarse DESPUES de argon.css, style.css y tema.css: varias reglas
   revierten overrides `!important` de tema.css que solo son correctos en
   escritorio.

   Bloques:
     1. Menú principal colapsado (era texto blanco sobre panel blanco)
     2. Header superior (nombre del centro + desbordamiento horizontal)
     3. Contenido: paddings y scroll horizontal
     4. DataTables en pantallas pequeñas
   ===================================================================== */


/* ═══ 1. Menú principal colapsado ══════════════════════════════════════
   Argon convierte el nav en un panel BLANCO flotante bajo 992px, pero
   tema.css fuerza `color: var(--tema-nav-text)` (blanco) en todos los
   .nav-link sin distinguir breakpoint => menú invisible. Aquí se
   restaura el texto oscuro y se deja blanco solo dentro de la píldora
   activa, que sí conserva el fondo del tema.
   ------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .navbar-horizontal .navbar-nav .nav-link,
    .navbar-horizontal .nav-link.text-white,
    .navbar-horizontal .navbar-nav .nav-link i,
    .navbar-horizontal .nav-link .nav-link-text,
    .navbar-horizontal .nav-link .nav-link-inner--text {
        color: #172b4d !important;
    }

    /* Ítem activo: fondo del tema (lo pone tema.css) + texto blanco. */
    .navbar-horizontal .navbar-nav .nav-link.active,
    .navbar-horizontal .navbar-nav .nav-link.active i,
    .navbar-horizontal .navbar-nav .nav-link.active .nav-link-text,
    .navbar-horizontal .navbar-nav .nav-link.active .nav-link-inner--text {
        color: #ffffff !important;
    }
    .navbar-horizontal .navbar-nav .nav-link.active {
        padding: .625rem .75rem;
    }

    /* Separadores para que la lista larga se lea como lista y no como bloque. */
    .navbar-horizontal .navbar-nav > .nav-item + .nav-item {
        border-top: 1px solid rgba(0, 0, 0, .06);
    }
    .navbar-horizontal .navbar-nav .nav-link i {
        width: 1.35rem;
        margin-right: .35rem;
        text-align: center;
    }

    /* Submenús: sangrado y tipografía menor para distinguir nivel. */
    .navbar-horizontal .navbar-nav .dropdown-menu {
        padding-left: 1.5rem;
        border: 0;
    }
    .navbar-horizontal .navbar-nav .dropdown-item {
        font-size: .8125rem;
        white-space: normal;
    }

    /* El panel puede tener 20+ ítems: que no se salga de la pantalla. */
    .navbar-horizontal .navbar-collapse.show,
    .navbar-horizontal .navbar-collapse.collapsing {
        max-height: calc(100vh - 1.4rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ═══ 2. Header superior ═══════════════════════════════════════════════
   El header usa `navbar-expand` (nunca colapsa), así que brand + accesos
   + selector de sucursal + avatar compiten por el ancho. Antes el nombre
   del centro envolvía en 5 líneas y el resto se desbordaba fuera del
   viewport, generando scroll horizontal en toda la app.

   Solución: fila sin wrap donde el ÚNICO elemento elástico es la marca,
   truncada con elipsis; los iconos mantienen su tamaño.
   ------------------------------------------------------------------- */
.navbar-top .navbar-collapse {
    flex-wrap: nowrap;
    min-width: 0;
}
.navbar-top .navbar-nav {
    flex-wrap: nowrap;
    min-width: 0;
}
.navbar-top .navbar-nav > li {
    flex: 0 0 auto;
}
/* Primer <li> del primer <ul> = marca: es el que absorbe la compresión. */
.navbar-top .navbar-nav:first-child > li:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.navbar-top .navbar-brand1 {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* El <li> del avatar traía `margin-top:-15px` inline para compensar las
   dos líneas (nombre + input) que solo existen en >=lg. */
.header-user-dropdown {
    margin-top: 0;
}
@media (min-width: 992px) {
    .header-user-dropdown {
        margin-top: -15px;
    }
}

@media (max-width: 991.98px) {
    .navbar-top .container-fluid {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    /* Argon usa 16px laterales; con 6 accesos eso solo dejaba ~70px al nombre. */
    .navbar-top .navbar-nav .nav-link {
        padding-right: .4rem;
        padding-left: .4rem;
    }
    /* El contador de notificaciones se monta sobre la campana. */
    .navbar-top .nav-link .badge.TotalNotificaciones {
        position: absolute;
        top: 2px;
        right: -2px;
        min-width: 16px;
        padding: 2px 4px;
        font-size: 9px;
        line-height: 1;
    }
    .navbar-top .nav-item.dropdown > .nav-link {
        position: relative;
    }
    /* Con una sola sucursal el selector repite el nombre del centro. */
    .sucursal-switch--unica {
        display: none !important;
    }
    .navbar-top .navbar-brand1 {
        font-size: .8125rem;
        font-weight: 600;
        line-height: 1.2;
    }
    .navbar-top .navbar-nav:first-child > li:first-child {
        min-width: 7rem;
    }
    /* Cuando la empresa usa logo en vez de texto. */
    .navbar-top .navbar-brand1 .navbar-brand-img {
        max-width: 100%;
        max-height: 2rem;
    }
    /* Selector de sucursal compacto (en móvil ocupaba ~90px de texto). */
    .sucursal-select {
        max-width: 92px;
        padding-right: 0;
        padding-left: 0;
        font-size: .75rem;
    }
    .sucursal-wrapper {
        padding: .1rem .35rem;
    }
    .sucursal-wrapper .input-group-text {
        padding: 0 .3rem;
    }
    .navbar-top form.h-100 {
        margin-right: .25rem !important;
        margin-left: .25rem !important;
    }
    .navbar-top .avatar.avatar-sm {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 575.98px) {
    /* "Facturar" queda como icono; la etiqueta no cabe junto al resto. */
    .navbar-top .nav-link .sidenav-normal {
        display: none;
    }
    .navbar-top .navbar-brand1 {
        font-size: .75rem;
    }
    .sucursal-select {
        max-width: 68px;
    }
}


/* ═══ 3. Contenido ═════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .container-fluid {
        padding-right: .75rem;
        padding-left: .75rem;
    }
    .card-body {
        padding: 1rem;
    }
    .card-header {
        padding: .75rem 1rem;
    }
    /* Botón de acción del card-header: dejaba de flotar y pisaba el título. */
    .card-header .float-right {
        float: none !important;
        display: block;
        margin-top: .5rem;
    }
    .card-header .float-right > .btn {
        margin-top: 0 !important;
    }
    .breadcrumb {
        padding: .5rem .75rem;
        font-size: .8125rem;
    }
    /* Barra de acciones inferior pegajosa: a ancho completo. */
    .btn-bottom-toolbar {
        padding: 10px;
    }
    .btn-posicion {
        width: 100%;
        float: none !important;
        text-align: left;
    }
}


/* ═══ 4. DataTables ════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .dataTables_wrapper {
        overflow-x: auto;
    }
    /* DataTables monta los botones como .btn-group: en flex los estira
       (`flex: 1 1 auto`) y se salen de la tarjeta. Aqui vuelven a ser
       pildoras sueltas que envuelven. */
    .dt-buttons.btn-group,
    .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        margin-bottom: .5rem;
    }
    .dt-buttons > .btn,
    .dt-buttons > .btn-group,
    .dt-buttons > .btn-group > .btn {
        flex: 0 0 auto;
    }
    .dt-buttons .btn {
        margin: 0 !important;
        padding: .35rem .6rem;
        font-size: .75rem;
        border-radius: .25rem !important;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        width: 100%;
        text-align: left;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }
    .dataTables_wrapper .dataTables_paginate {
        padding-top: .5rem;
        text-align: center;
    }
    .dataTables_wrapper .dataTables_info {
        text-align: center;
    }
    /* style.css fija 400px; en un teléfono son 400px de vacío. */
    .dataTables_scrollBody {
        min-height: 180px;
    }
}