/* /assets/css/style.css - Variables y Estilos Globales SELI */

:root {
    /* Paleta Semántica del Documento Maestro */
    --primary-dark: #0B2D53; /* Azul Marino Corporativo */
    --bg-light: #F4F7FA;     /* Fondo general */
    --text-main: #333333;
    --text-muted: #8899aa;
    
    --success: #28A745;      /* Metas cumplidas, firmas */
    --warning: #FFC107;      /* Alertas medias, vencimientos */
    --danger: #DC3545;       /* Riesgos legales, faltas */
    --white: #FFFFFF;
    --border: #E0E6ED;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Segoe UI', system-ui, sans-serif; 
}

body { 
    background-color: var(--bg-light); 
    color: var(--text-main); 
}

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

/* Menú Lateral (Sidebar) */
.sidebar { 
    width: 260px; 
    background-color: var(--primary-dark); 
    color: var(--white); 
    display: flex; 
    flex-direction: column; 
}
.sidebar-brand { 
    padding: 20px; 
    text-align: center; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
}
.sidebar-nav { padding: 20px 0; display: flex; flex-direction: column; }
.nav-item { 
    padding: 15px 30px; 
    color: #A0B2C6; 
    text-decoration: none; 
    font-weight: 500; 
    transition: all 0.3s ease; 
}
.nav-item:hover, .nav-item.active { 
    background-color: rgba(255,255,255,0.05); 
    color: var(--white); 
    border-left: 4px solid var(--success); 
}

/* Panel Principal y Topbar */
.main-wrapper { flex: 1; display: flex; flex-direction: column; }
.topbar { 
    background-color: var(--white); 
    height: 70px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 30px; 
    border-bottom: 1px solid var(--border); 
}
.topbar-search input { 
    padding: 10px 15px; 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    width: 350px; 
    outline: none; 
    background-color: var(--bg-light);
}
.topbar-user { display: flex; align-items: center; gap: 20px; }
.avatar { 
    background-color: var(--primary-dark); 
    color: var(--white); 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
}

/* Área de Contenido y Tarjetas (Card-based UI) */
.content-area { padding: 30px; overflow-y: auto; }
.card { 
    background: var(--white); 
    border-radius: 12px; 
    padding: 24px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
    margin-bottom: 24px; 
    border: 1px solid var(--border); 
}