/* ================================================================
   Sara Gestión — Responsive UI
   Este archivo complementa sara-admin.css.
   No modificar sara-admin.css para cambios responsivos.
   Breakpoints: ≤991px (tablet/móvil), ≤575px (móvil puro)
   ================================================================ */

/* ── Botón hamburguesa ─────────────────────────────────────────── */
.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 1.2rem;
    line-height: 1;
    padding: .3rem .55rem;
    cursor: pointer;
    border-radius: .375rem;
    margin-right: .75rem;
    flex-shrink: 0;
    transition: background .15s;
}
.sidebar-toggle:hover {
    background: #f3f4f6;
}
.sidebar-toggle i {
    pointer-events: none;
}

/* ── Overlay (fondo oscuro al abrir sidebar en móvil) ──────────── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    cursor: pointer;
}
body.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}

/* ── Tablet y móvil (≤991px) ────────────────────────────────────── */
@media (max-width: 991px) {

    /* Mostrar botón hamburguesa */
    .sidebar-toggle {
        display: inline-flex;
    }

    /* Sidebar como drawer deslizable */
    .platform-admin .admin-sidebar,
    .company-admin .admin-sidebar {
        width: 268px;
        transform: translateX(-280px);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s;
        z-index: 200;
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.sidebar-open .admin-sidebar {
        transform: translateX(0);
        box-shadow: 6px 0 30px rgba(0, 0, 0, .3);
    }

    /* Quitar offset de margen — el contenido ocupa todo el ancho */
    .platform-admin .admin-main,
    .company-admin .admin-main {
        margin-left: 0 !important;
    }

    /* Topbar: garantizar que el botón quede alineado */
    .admin-topbar {
        display: flex;
        align-items: center;
    }

    /* El título del topbar toma el espacio disponible */
    .admin-topbar > .fw-semibold,
    .admin-topbar > span.fw-semibold {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
}

/* ── Móvil puro (≤575px) ───────────────────────────────────────── */
@media (max-width: 575px) {

    /* Reducir padding del área de contenido */
    .admin-main {
        padding: .875rem;
    }

    .admin-topbar {
        padding: .6rem .875rem;
        margin: -.875rem -.875rem 1rem;
    }

    /* Ocultar nombre de usuario en topbar */
    .admin-topbar .text-xs {
        display: none;
    }

    /* Alerta de email test: apilar en móvil */
    .alert.d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
    }
    .alert.d-flex.align-items-center.gap-2 .ms-auto {
        margin-left: 0 !important;
    }

    /* ─ Grilla de stat-cards: 2 por fila ─ */
    .row.g-3 > [class*="col-md-3"],
    .row.g-3 > [class*="col-lg-3"],
    .row.g-3 > [class*="col-md-4"],
    .row.g-4 > [class*="col-md-3"],
    .row.g-4 > [class*="col-lg-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* ─ Cards de importar y secciones: 1 por fila ─ */
    .row.g-4 > [class*="col-md-6"],
    .row.g-3 > [class*="col-md-6"],
    .row.g-3 > [class*="col-md-8"],
    .row.g-3 > [class*="col-md-12"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* ─ Tabs: scroll horizontal si hay muchas pestañas ─ */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 0;
    }
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }
    .nav-tabs + .tab-content {
        border-top: 1px solid #dee2e6;
    }

    /* ─ Tablas: scroll horizontal ─ */
    .card-body > .table-responsive,
    .card > .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ─ Toolbar de botones (encabezados de sección) ─ */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .75rem;
    }

    /* ─ Filtros en línea: stack vertical ─ */
    .d-flex.gap-2.flex-wrap.align-items-end,
    .d-flex.gap-2.align-items-end {
        flex-direction: column;
        align-items: stretch !important;
    }
    .d-flex.gap-2.flex-wrap.align-items-end > *,
    .d-flex.gap-2.align-items-end > * {
        width: 100%;
    }

    /* ─ Botones de acciones: tamaño más compacto ─ */
    .btn-sm {
        font-size: .78rem;
        padding: .25rem .5rem;
    }

    /* ─ Modales: ocupar ancho completo en pantalla chica ─ */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100vw - 1rem);
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 1rem);
    }

    /* ─ Paginación más compacta ─ */
    .pagination .page-link {
        padding: .3rem .5rem;
        font-size: .8rem;
    }

    /* ─ Imagen de logo en sidebar del panel empresa ─ */
    .logo-img {
        max-width: 120px;
        margin: 10px 12px;
    }

    /* ─ Contenedor de métricas en el portal del cliente ─ */
    .row.g-3.mb-4 {
        margin-bottom: .75rem !important;
    }

    /* ─ Formularios de importar: steps y alertas ─ */
    .alert {
        font-size: .84rem;
    }

    /* ─ Card de preview de importación ─ */
    .table th, .table td {
        font-size: .8rem;
        padding: .35rem .5rem;
    }
}

/* ── Muy pequeño (≤400px) ──────────────────────────────────────── */
@media (max-width: 400px) {

    /* Stat-cards: 1 por fila en pantallas muy pequeñas */
    .row.g-3 > [class*="col-md-3"],
    .row.g-3 > [class*="col-lg-3"],
    .row.g-3 > [class*="col-md-4"],
    .row.g-4 > [class*="col-md-3"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .admin-main {
        padding: .625rem;
    }

    .admin-topbar {
        padding: .5rem .625rem;
        margin: -.625rem -.625rem .75rem;
    }
}