/* ==========================================================
   SISTEMA_BASE - Estilos personalizados
   Paleta:
     Fondo:      #FFFFFF
     Texto:      #374151
     Primario:   #4338CA
     Secundario: #9CA3AF
     Acento:     #7C3AED
   Regla 60-30-10 / Bordes en lugar de sombras
   ========================================================== */

:root{
    --bg:        #FFFFFF;
    --text:      #374151;
    --primary:   #4338CA;
    --secondary: #9CA3AF;
    --accent:    #7C3AED;
    --border:    #E5E7EB;
    --light:     #F9FAFB;
    --sidebar-w: 260px;
}

*{ box-sizing:border-box; }

html, body{
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
    font-size: 14px;
}

a{ color: var(--primary); text-decoration:none; }
a:hover{ color: var(--accent); }

/* Bootstrap overrides */
.btn-primary{ background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus{ background: var(--accent); border-color: var(--accent); }
.btn-outline-primary{ color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover{ background: var(--primary); border-color: var(--primary); }
.text-primary{ color: var(--primary) !important; }
.bg-primary{ background-color: var(--primary) !important; }

.card, .table-responsive, .form-control, .form-select{
    box-shadow: none !important;
}
.card{ border:1px solid var(--border); border-radius: 8px; }
.form-control, .form-select{
    border:1px solid var(--border);
    border-radius: 6px;
}
.form-control:focus, .form-select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 .15rem rgba(67,56,202,.18);
}

/* ==================== LAYOUT ==================== */
.layout{ display:flex; min-height:100vh; }

.sidebar{
    width: var(--sidebar-w);
    background: #1f2030;
    color: #d1d5db;
    border-right: 1px solid var(--border);
    display:flex;
    flex-direction: column;
    position: fixed; top:0; bottom:0; left:0;
    transform: translateX(0);
    transition: transform .25s ease;
    z-index: 1040;
}
.sidebar-header{
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #2c2e44;
    display:flex; justify-content: space-between; align-items:center;
}
.brand{ color:#fff; font-weight:600; font-size: 1rem; }
.brand i{ color: var(--accent); margin-right:.4rem; }

.sidebar-nav{
    flex:1; overflow-y:auto;
    padding: .5rem 0;
}
.nav-link-main{
    display:flex; align-items:center; gap:.6rem;
    padding: .65rem 1.1rem;
    color: #cbd1de;
    border-left: 3px solid transparent;
    font-size: .92rem;
}
.nav-link-main:hover{
    color:#fff;
    background:#272844;
    border-left-color: var(--accent);
}
.nav-group{ }
.nav-group-toggle{
    width: 100%;
    background: transparent;
    border: none;
    text-align:left;
    color:#cbd1de;
    padding: .65rem 1.1rem;
    display:flex; align-items:center; gap:.6rem;
    font-size: .92rem;
    border-left: 3px solid transparent;
}
.nav-group-toggle:hover{
    color:#fff; background:#272844;
    border-left-color: var(--accent);
}
.nav-group-toggle .chev{ margin-left:auto; transition: transform .2s; font-size:.75rem; }
.nav-group-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.nav-group-items{
    background: #181927;
}
.nav-link-sub{
    display:flex; align-items:center; gap:.55rem;
    padding: .55rem 1.1rem .55rem 2.4rem;
    color:#a9b1c1; font-size:.88rem;
    border-left: 3px solid transparent;
}
.nav-link-sub:hover{
    background:#23253c; color:#fff;
    border-left-color: var(--primary);
}

.sidebar-footer{
    padding: .9rem 1.1rem;
    border-top: 1px solid #2c2e44;
}
.user-info{ display:flex; gap:.6rem; align-items:center; color:#fff; padding:.4rem; border-radius:6px; }
.user-info:hover{ background:#272844; color:#fff; }
.user-info img{ flex-shrink:0; }
.user-info i{ font-size:1.7rem; color: var(--accent); }
.user-info .u-name{ font-weight:600; font-size:.9rem; color:#fff; line-height:1.1; }
.user-info .u-rol{ font-size:.75rem; color: var(--secondary); }

.btn-close-sidebar{
    background: transparent; border:0; color:#fff; font-size:1.1rem;
}

/* ==================== MAIN ==================== */
.main-wrapper{
    flex:1;
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display:flex; flex-direction:column;
    background: var(--light);
}
.topbar{
    height: 60px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display:flex; align-items:center;
    padding: 0 1rem; gap:.8rem;
    position: sticky; top:0; z-index: 1020;
}
.btn-toggle-sidebar{
    background: transparent; border:1px solid var(--border);
    width:38px; height:38px; border-radius:6px;
    color: var(--text); font-size: 1.1rem;
    display:none;
}
.topbar-title{ font-weight: 600; color: var(--text); font-size: 1rem; }
.topbar-user{ margin-left:auto; gap:.5rem; align-items:center; color: var(--secondary); }
.topbar-user i{ color: var(--primary); font-size: 1.3rem; }

.content{
    flex:1;
    padding: 1.5rem;
}
.footer{
    border-top:1px solid var(--border);
    padding: .8rem 1.5rem;
    color: var(--secondary);
    background: #fff;
    text-align:center;
}

/* ==================== UTILIDADES ==================== */
.page-header{
    display:flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--border);
}
.page-header h1{
    font-size: 1.3rem; margin:0; color: var(--text); font-weight: 600;
}

.table thead th{
    background: var(--light);
    color: var(--text);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}
.table td, .table th{ vertical-align: middle; }

.badge-rol-admin{ background: var(--accent); }
.badge-rol-user{ background: var(--secondary); }

/* ==================== AUTH ==================== */
.auth-body{
    background: var(--light);
    min-height: 100vh;
    display:flex; align-items:center; justify-content:center;
    padding: 1.5rem;
}
.auth-container{
    width: 100%; max-width: 420px;
    background: #fff;
    border:1px solid var(--border);
    border-radius: 10px;
    padding: 2rem 1.8rem;
}
.auth-container h2{
    color: var(--primary); font-size:1.4rem; margin-bottom:.3rem; font-weight:700;
}
.auth-container .lead{
    font-size:.9rem; color: var(--secondary); margin-bottom:1.3rem;
}
.auth-brand{
    text-align:center; margin-bottom: 1.2rem;
}
.auth-brand i{ font-size:2.4rem; color: var(--accent); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991.98px){
    .sidebar{
        transform: translateX(-100%);
    }
    .sidebar.open{
        transform: translateX(0);
    }
    .main-wrapper{ margin-left:0; }
    .btn-toggle-sidebar{ display:inline-flex; align-items:center; justify-content:center; }
    .sidebar-overlay{
        position:fixed; inset:0; background: rgba(0,0,0,.45);
        z-index: 1030; display:none;
    }
    .sidebar-overlay.open{ display:block; }
}