/* ============================================
   ESCOLA - ESTILOS BASE COMPARTIDOS
   Estilos globales usados en toda la aplicación
   ============================================ */

/* ===== VARIABLES CSS GLOBALES ===== */
:root {
    --primary-color: #2C3E50;
    --success-color: #18BC9C;
    --info-color: #3498DB;
    --warning-color: #F39C12;
    --danger-color: #E74C3C;
    --purple-color: #9B59B6;
}

/* ===== ESTRUCTURA BASE ===== */
body {
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Evitar que el hover de cards cree un stacking context que tape los modales de Bootstrap.
   mi-cuenta-base.css usa transition:all + transform:translateY en hover, lo que hace que el
   navegador compute matrix(1,0,0,1,0,0) incluso en reposo, creando un nuevo stacking context
   que deja al backdrop (z-index:1050 en body) por encima del modal (z-index:1055 dentro del card). */
.card,
.card:hover {
    transform: none !important;
}

.container-fluid {
    flex: 1;
}

/* ===== BARRA DE NAVEGACIÓN BASE ===== */
.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

/* ===== TARJETAS BASE ===== */
.card {
    border-radius: 0.5rem;
}

.card-header {
    font-weight: 600;
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

/* Tarjetas de módulo */
.module-card {
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.module-card:hover {
    transform: translateY(-5px);
}

.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.module-icon {
    transition: transform 0.3s ease;
}

.module-card:hover .module-icon {
    transform: scale(1.1);
}

/* Tarjetas de estadísticas con bordes de color */
.card.border-left-primary {
    border-left: 4px solid var(--primary-color);
}

.card.border-left-success {
    border-left: 4px solid var(--success-color);
}

.card.border-left-warning {
    border-left: 4px solid var(--warning-color);
}

.card.border-left-info {
    border-left: 4px solid var(--info-color);
}

.stats-icon {
    opacity: 0.75;
}

/* ===== INSIGNIAS BASE ===== */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* ===== GRUPOS DE LISTAS ===== */
.list-group-item {
    border-left: none;
    border-right: none;
    transition: background-color 0.2s ease;
}

.list-group-item:first-child {
    border-top: none;
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

/* ===== PIE DE PÁGINA ===== */
footer {
    margin-top: auto;
    border-top: 1px solid #dee2e6;
}

/* ===== COLORES PERSONALIZADOS ===== */
.text-purple {
    color: var(--purple-color) !important;
}

.bg-purple {
    background-color: var(--purple-color) !important;
}

/* ===== AJUSTES RESPONSIVOS BASE ===== */
@media (max-width: 768px) {
    .display-5 {
        font-size: 2rem;
    }
    
    .module-card .card-body {
        padding: 2rem 1rem !important;
    }
}