/* ============================================================
   EbenezerISP — Design System
   Versión: 1.0
   Descripción: Estilos globales, componentes y responsive
   ============================================================ */

/* ── 1. Variables CSS (Design Tokens) ───────────────────────── */
:root {
    /* Colores primarios */
    --color-primary:        #1a237e;
    --color-primary-dark:   #0d1557;
    --color-primary-light:  #283593;
    --color-primary-hover:  #3949ab;

    /* Colores de acento */
    --color-accent:         #2979ff;
    --color-accent-light:   #e8eeff;

    /* Colores de estado */
    --color-success:        #2e7d32;
    --color-success-bg:     #e8f5e9;
    --color-danger:         #c62828;
    --color-danger-bg:      #fce4ec;
    --color-warning:        #e65100;
    --color-warning-bg:     #fff3e0;
    --color-info:           #01579b;
    --color-info-bg:        #e1f5fe;

    /* Neutrales */
    --color-bg:             #f4f6fb;
    --color-bg-card:        #ffffff;
    --color-text-primary:   #1a1a2e;
    --color-text-secondary: #6b7280;
    --color-text-muted:     #9ca3af;
    --color-border:         #e5e7eb;
    --color-border-light:   #f3f4f6;

    /* Sidebar */
    --sidebar-width:        240px;
    --sidebar-bg:           #1a237e;
    --sidebar-link:         #c5cae9;
    --sidebar-link-hover:   #ffffff;
    --sidebar-link-active:  #ffffff;
    --sidebar-hover-bg:     #283593;
    --sidebar-active-bg:    #3949ab;

    /* Tipografía */
    --font-family:          'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-size-base:       0.9375rem;
    --font-size-sm:         0.875rem;
    --font-size-xs:         0.8125rem;
    --font-size-lg:         1.125rem;
    --font-size-xl:         1.25rem;

    /* Espaciado */
    --spacing-xs:           0.25rem;
    --spacing-sm:           0.5rem;
    --spacing-md:           1rem;
    --spacing-lg:           1.5rem;
    --spacing-xl:           2rem;

    /* Bordes */
    --border-radius-sm:     6px;
    --border-radius-md:     10px;
    --border-radius-lg:     14px;
    --border-radius-xl:     20px;
    --border-radius-pill:   50px;

    /* Sombras */
    --shadow-sm:            0 1px 3px rgba(0,0,0,.08);
    --shadow-md:            0 2px 12px rgba(0,0,0,.08);
    --shadow-lg:            0 8px 24px rgba(0,0,0,.12);
    --shadow-xl:            0 16px 40px rgba(0,0,0,.16);

    /* Transiciones */
    --transition-fast:      0.15s ease;
    --transition-base:      0.25s ease;
    --transition-slow:      0.4s ease;

    /* Layout */
    --content-padding:      1.5rem;
    --topbar-height:        60px;
}

/* ── 2. Reset y Base ─────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family:      var(--font-family);
    font-size:        var(--font-size-base);
    background-color: var(--color-bg);
    color:            var(--color-text-primary);
    line-height:      1.6;
    min-height:       100vh;
    overflow-x:       hidden;
}

/* ── 3. Layout Principal ─────────────────────────────────────── */
.app-wrapper {
    display:    flex;
    min-height: 100vh;
}

/* ── 4. Sidebar ──────────────────────────────────────────────── */
.sidebar {
    width:            var(--sidebar-width);
    min-width:        var(--sidebar-width);
    min-height:       100vh;
    background:       var(--sidebar-bg);
    display:          flex;
    flex-direction:   column;
    position:         sticky;
    top:              0;
    height:           100vh;
    overflow-y:       auto;
    transition:       width var(--transition-base),
                      transform var(--transition-base);
    z-index:          100;
    scrollbar-width:  thin;
    scrollbar-color:  var(--color-primary-light) transparent;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--color-primary-light);
    border-radius: var(--border-radius-pill);
}

/* Brand */
.sidebar-brand {
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          #ffffff;
    font-weight:    700;
    font-size:      var(--font-size-lg);
    padding:        var(--spacing-lg) var(--spacing-md);
    border-bottom:  1px solid rgba(255,255,255,.08);
    text-decoration: none;
    letter-spacing: 0.3px;
}

.sidebar-brand i {
    font-size: 1.8rem;
    color: #7986cb;
}

.sidebar-brand:hover {
    color: #ffffff;
    opacity: 0.85;
}

/* Secciones del menú — ahora son un acordeón desplegable */
.sidebar-section {
    padding: var(--spacing-xs) var(--spacing-sm) 0;
}

.sidebar-section-title {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    width:          100%;
    appearance:      none;
    -webkit-appearance: none;
    background:     transparent;
    border:         none;
    outline:        none;
    font-family:    inherit;
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    text-align:     left;
    color:          rgba(255,255,255,.55);
    padding:        0.55rem var(--spacing-sm);
    margin-bottom:  var(--spacing-xs);
    cursor:         pointer;
    border-radius:  var(--border-radius-sm);
    transition:     all var(--transition-fast);
}

.sidebar-section-title:hover {
    background: var(--sidebar-hover-bg);
    color:      rgba(255,255,255,.85);
}

.sidebar-section-title .chevron {
    font-size:  0.65rem;
    transition: transform var(--transition-fast);
}

.sidebar-section-title.collapsed .chevron {
    transform: rotate(-90deg);
}

/* Links del menú */
.sidebar-nav {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    padding:        0 var(--spacing-sm);
}

.sidebar-link {
    display:         flex;
    align-items:     center;
    gap:             var(--spacing-sm);
    color:           var(--sidebar-link);
    text-decoration: none;
    padding:         0.55rem var(--spacing-sm);
    border-radius:   var(--border-radius-sm);
    font-size:       var(--font-size-sm);
    font-weight:     400;
    transition:      all var(--transition-fast);
    white-space:     nowrap;
    overflow:        hidden;
}

.sidebar-link i {
    font-size:  1.1rem;
    min-width:  1.1rem;
    text-align: center;
    opacity:    0.8;
    transition: opacity var(--transition-fast);
}

.sidebar-link:hover {
    background: var(--sidebar-hover-bg);
    color:      var(--sidebar-link-hover);
}

.sidebar-link:hover i {
    opacity: 1;
}

.sidebar-link.active {
    background:  var(--sidebar-active-bg);
    color:       var(--sidebar-link-active);
    font-weight: 500;
}

.sidebar-link.active i {
    opacity: 1;
}

/* Footer del sidebar */
.sidebar-footer {
    margin-top:    auto;
    padding:       var(--spacing-md);
    border-top:    1px solid rgba(255,255,255,.08);
    font-size:     var(--font-size-xs);
    color:         rgba(255,255,255,.3);
    text-align:    center;
}

/* ── 5. Topbar móvil ─────────────────────────────────────────── */
.topbar {
    display:          none;
    align-items:      center;
    justify-content:  space-between;
    background:       var(--sidebar-bg);
    color:            #fff;
    padding:          0 var(--spacing-md);
    height:           var(--topbar-height);
    position:         sticky;
    top:              0;
    z-index:          200;
    box-shadow:       var(--shadow-md);
}

.topbar-brand {
    font-weight: 700;
    font-size:   var(--font-size-base);
    color:       #fff;
}

.topbar-toggle {
    background:  transparent;
    border:      none;
    color:       #fff;
    font-size:   1.4rem;
    cursor:      pointer;
    padding:     var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition:  background var(--transition-fast);
}

.topbar-toggle:hover {
    background: rgba(255,255,255,.1);
}

/* Overlay para móvil */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    z-index:    99;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    display: block;
}

/* ── 6. Contenido Principal ──────────────────────────────────── */
.main-content {
    flex:       1;
    padding:    var(--content-padding);
    min-width:  0;
    overflow-x: hidden;
}

/* ── 7. Page Header ──────────────────────────────────────────── */
.page-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--spacing-md);
    margin-bottom:   var(--spacing-lg);
}

.page-title {
    font-size:   var(--font-size-xl);
    font-weight: 700;
    color:       var(--color-text-primary);
    margin:      0;
}

.page-subtitle {
    font-size: var(--font-size-sm);
    color:     var(--color-text-secondary);
    margin:    0;
}

/* ── 8. Cards ────────────────────────────────────────────────── */
.card {
    background:    var(--color-bg-card);
    border:        1px solid var(--color-border-light);
    border-radius: var(--border-radius-lg);
    box-shadow:    var(--shadow-md);
    transition:    box-shadow var(--transition-fast);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card-header-custom {
    padding:       var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    font-weight:   600;
    font-size:     var(--font-size-base);
}

/* ── 9. Tablas ───────────────────────────────────────────────── */
.table {
    font-size: var(--font-size-sm);
    margin:    0;
}

.table thead th {
    background:    var(--color-primary);
    color:         #ffffff;
    font-weight:   600;
    font-size:     var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border:        none;
    padding:       0.75rem 1rem;
    white-space:   nowrap;
}

.table thead th:first-child {
    border-radius: var(--border-radius-sm) 0 0 0;
}

.table thead th:last-child {
    border-radius: 0 var(--border-radius-sm) 0 0;
}

.table tbody tr {
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--color-border-light);
}

.table tbody tr:last-child {
    border-bottom: none;
}

.table tbody tr:hover {
    background: #f8faff;
}

.table tbody td {
    padding:        0.75rem 1rem;
    vertical-align: middle;
    color:          var(--color-text-primary);
}

.table-empty {
    padding:    3rem 1rem;
    text-align: center;
    color:      var(--color-text-muted);
}

.table-empty i {
    font-size:     2.5rem;
    display:       block;
    margin-bottom: var(--spacing-sm);
    opacity:       0.4;
}

/* ── 10. Formularios ─────────────────────────────────────────── */
.form-label {
    font-size:     var(--font-size-sm);
    font-weight:   600;
    color:         var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.form-control,
.form-select {
    font-size:     var(--font-size-sm);
    border:        1.5px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    padding:       0.5rem 0.75rem;
    color:         var(--color-text-primary);
    transition:    border-color var(--transition-fast),
                   box-shadow var(--transition-fast);
    background:    #ffffff;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px rgba(41,121,255,.12);
    outline:      none;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--color-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(198,40,40,.12);
}

.form-control.bg-light {
    background: var(--color-border-light) !important;
    color:      var(--color-text-secondary);
}

.invalid-feedback {
    font-size: var(--font-size-xs);
    color:     var(--color-danger);
}

/* ── 11. Botones ─────────────────────────────────────────────── */
.btn {
    font-size:     var(--font-size-sm);
    font-weight:   500;
    border-radius: var(--border-radius-sm);
    padding:       0.45rem 1rem;
    transition:    all var(--transition-fast);
    display:       inline-flex;
    align-items:   center;
    gap:           var(--spacing-xs);
}

.btn-primary {
    background: var(--color-primary);
    border:     1px solid var(--color-primary);
    color:      #fff;
}

.btn-primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-warning {
    background: #f59e0b;
    border:     1px solid #f59e0b;
    color:      #fff;
}

.btn-warning:hover {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-warning {
    border: 1.5px solid #f59e0b;
    color:  #f59e0b;
}

.btn-outline-warning:hover {
    background:   #f59e0b;
    border-color: #f59e0b;
    color:        #fff;
}

.btn-outline-danger {
    border: 1.5px solid var(--color-danger);
    color:  var(--color-danger);
}

.btn-outline-danger:hover {
    background:   var(--color-danger);
    border-color: var(--color-danger);
    color:        #fff;
}

.btn-outline-secondary {
    border: 1.5px solid var(--color-border);
    color:  var(--color-text-secondary);
}

.btn-outline-secondary:hover {
    background:   var(--color-border);
    border-color: var(--color-border);
    color:        var(--color-text-primary);
}

.btn-outline-primary {
    border: 1.5px solid var(--color-primary);
    color:  var(--color-primary);
}

.btn-outline-primary:hover {
    background:   var(--color-primary);
    border-color: var(--color-primary);
    color:        #fff;
}

.btn-sm {
    padding:   0.3rem 0.65rem;
    font-size: var(--font-size-xs);
}

/* ── 12. Badges ──────────────────────────────────────────────── */
.badge-activo,
.badge-inactivo,
.badge-suspendido,
.badge-retirado {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px 12px;
    border-radius: var(--border-radius-pill);
    font-size:     var(--font-size-xs);
    font-weight:   500;
    white-space:   nowrap;
}

.badge-activo {
    background: var(--color-success-bg);
    color:      var(--color-success);
}

.badge-inactivo {
    background: var(--color-danger-bg);
    color:      var(--color-danger);
}

.badge-suspendido {
    background: var(--color-warning-bg);
    color:      var(--color-warning);
}

.badge-retirado {
    background: #f3f4f6;
    color:      #6b7280;
}

/* ── 13. Alertas Flash ───────────────────────────────────────── */
.alert {
    border:        none;
    border-radius: var(--border-radius-md);
    font-size:     var(--font-size-sm);
    padding:       0.875rem 1.25rem;
    display:       flex;
    align-items:   center;
    gap:           var(--spacing-sm);
    box-shadow:    var(--shadow-sm);
}

.alert-success {
    background: var(--color-success-bg);
    color:      var(--color-success);
}

.alert-danger {
    background: var(--color-danger-bg);
    color:      var(--color-danger);
}

/* ── 14. Utilidades ──────────────────────────────────────────── */
.text-primary-custom { color: var(--color-primary) !important; }
.text-muted-custom   { color: var(--color-text-muted) !important; }
.fw-600              { font-weight: 600 !important; }
.fw-700              { font-weight: 700 !important; }

code {
    background:    var(--color-accent-light);
    color:         var(--color-accent);
    padding:       2px 8px;
    border-radius: var(--border-radius-sm);
    font-size:     var(--font-size-xs);
    font-weight:   500;
}

/* ── Dashboard ───────────────────────────────────────────────── */
.dashboard-card {
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast);
    cursor: pointer;
}

.dashboard-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.dashboard-icon {
    width:           52px;
    height:          52px;
    min-width:       52px;
    border-radius:   var(--border-radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.5rem;
}

.dashboard-label {
    font-size:  var(--font-size-xs);
    color:      var(--color-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-value {
    font-size:   1.75rem;
    font-weight: 700;
    color:       var(--color-text-primary);
    line-height: 1.1;
}

.dashboard-sub {
    font-size: var(--font-size-xs);
    margin-top: 2px;
}

.aviso-persistente {
    border-radius: var(--border-radius-md, 0.5rem);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm, 0.9rem);
}

.aviso-persistente.aviso-warning {
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
}

.aviso-persistente.aviso-danger {
    background-color: #f8d7da;
    border: 1px solid #f1aeb5;
    color: #842029;
}



/* ── 15. Responsive ──────────────────────────────────────────── */

/* Tablet landscape y desktop pequeño: 992px - 1199px */
@media (max-width: 1199px) {
    :root {
        --sidebar-width:    210px;
        --content-padding:  1.25rem;
    }
}

/* Tablet portrait: 768px - 991px */
@media (max-width: 991px) {
    :root {
        --sidebar-width:    190px;
        --content-padding:  1rem;
    }

    .table thead th,
    .table tbody td {
        padding: 0.6rem 0.75rem;
    }
}

/* Mobile landscape y tablet pequeña: 576px - 767px */
@media (max-width: 767px) {
    .topbar {
        display: flex;
    }

    .app-wrapper {
        flex-direction: column;
    }

    .sidebar {
        position:   fixed;
        top:        0;
        left:       0;
        height:     100vh;
        transform:  translateX(-100%);
        z-index:    150;
        box-shadow: var(--shadow-xl);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        padding:    var(--spacing-md);
        margin-top: 0;
    }

    .page-header {
        flex-direction: column;
        align-items:    stretch;
    }

    .page-header .btn {
        width:           100%;
        justify-content: center;
    }

    .table {
        font-size: var(--font-size-xs);
    }

    .table thead th,
    .table tbody td {
        padding: 0.5rem 0.6rem;
    }

    .btn {
        font-size: var(--font-size-xs);
        padding:   0.4rem 0.75rem;
    }
}

/* Mobile portrait: hasta 575px */
@media (max-width: 575px) {
    :root {
        --content-padding: 0.75rem;
    }

    .page-title {
        font-size: var(--font-size-lg);
    }

    .card {
        border-radius: var(--border-radius-md);
    }

    .table thead th {
        font-size: 0.7rem;
    }

    .btn-sm {
        padding:   0.25rem 0.5rem;
        font-size: 0.7rem;
    }

    .badge-activo,
    .badge-inactivo,
    .badge-suspendido,
    .badge-retirado {
        font-size: 0.7rem;
        padding:   3px 8px;
    }
}

/* Mobile muy pequeño: hasta 360px */
@media (max-width: 360px) {
    :root {
        --content-padding: 0.5rem;
    }

    .sidebar-brand img {
        height: 28px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   MAPAS (Leaflet) — prioridad de apilamiento
   ─────────────────────────────────────────────────────────────
   Leaflet asigna a sus propias capas valores de z-index entre 400
   y 1000 por defecto. El menú lateral usa 150 y su fondo oscuro
   99 — bastante más bajos — así que en móvil el mapa quedaba
   ENCIMA del menú: se abría correctamente, pero no se veía ni se
   podía usar, tapado por el mapa.

   Se bajan las capas de Leaflet por debajo del menú. El mapa se
   sigue viendo y usando igual (dentro de su tarjeta, donde nada
   más compite con él), pero ya no tapa la navegación.

   Vale para TODOS los mapas del sistema — el de mora, el de calor
   de cajas NAP, el selector de ubicación al crear un servicio, y
   cualquiera que se agregue después.
*/
.leaflet-pane,
.leaflet-top,
.leaflet-bottom,
.leaflet-control {
    z-index: 90 !important;
}

/* El popup que sale al hacer clic en un marcador sí debe quedar
   sobre el resto del mapa — pero siempre por debajo del menú. */
.leaflet-popup {
    z-index: 95 !important;
}