/* =========================================
   1. ESTILOS GLOBALES Y BODY
   ========================================= */
body { 
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: linear-gradient(to bottom right, #e9f0ff, #f0f2f5) !important; 
    background-attachment: fixed !important; 
    color: #333333;
}

/* Contenedor para centrar contenido */
.container-narrow { 
    max-width: 980px; 
}

/* Títulos de sección generales */
.section-header { 
    color: #212529; 
    font-weight: 600; 
    border-bottom: 2px solid #0d6efd; /* Azul principal */
    padding-bottom: 8px;
    margin-bottom: 1rem;
}

/* Título de modales con iconos */
.modal-title .emoji-icon { 
    font-size: 1.25em; 
    margin-right: 0.5rem; 
    vertical-align: middle; 
}

/* =========================================
   2. NAVEGACIÓN (Top Bar)
   ========================================= */
.navbar-brand { 
    font-weight: 700; 
}

.top-bar {
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-title {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #212529;
    text-decoration: none;
}

.top-bar-title:hover {
    color: #0d6efd; /* Azul principal al pasar el mouse */
}

/* =========================================
   3. TARJETAS (Cards)
   ========================================= */
.card { 
    border: 0; 
}

.card-custom {
    border: none;
    border-radius: 12px;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* Header azul para tarjetas */
.card-header-custom, 
.card-header-blue {
    background-color: #0d6efd; /* Azul principal */
    color: white;
    padding: 1.5rem;
    border: none;
    text-align: center;
    border-bottom: 4px solid #ffc107; /* Detalle amarillo */
}

.card-header-icon {
    font-size: 2rem;
    color: #0d6efd; /* Azul principal */
    margin-right: 15px;
}

.card-title {
    color: #333333;
    font-weight: 600;
}

.card-title-filter { 
    color: #212529; 
    font-weight: 600; 
}

/* Sub-headers dentro de tarjetas (Listas/Stats) */
.list-header, 
.stats-sub-header {
    padding: 1rem 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
}

/* =========================================
   4. TABLAS
   ========================================= */
.table td, 
.table th { 
    vertical-align: middle; 
}

.table-custom thead th {
    background-color: #212529; /* Fondo oscuro cabecera */
    color: white;
    font-weight: 500;
    border: none;
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.table-custom tbody tr {
    background-color: #ffffff;
    transition: background-color 0.2s;
}

.table-custom tbody tr:nth-of-type(even) {
    background-color: #f8f9fa; /* Fondo gris claro filas alternas */
}

.table-custom tbody tr:hover {
    background-color: #eef2f7;
}

.table-custom td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* =========================================
   5. FORMULARIOS E INPUTS
   ========================================= */
#opciones-encuesta input { 
    transition: all 0.2s; 
}

/* Estilos de validación (borde rojo si es inválido) */
#opciones-encuesta input:not(:placeholder-shown):required:invalid,
#pregunta_encuesta:required:invalid { 
    border-color: #dc3545; 
}

/* =========================================
   6. BADGES Y ETIQUETAS
   ========================================= */
/* Badge gris para conteos totales */
.total-badge,
.registros-badge {
    background-color: #6c757d;
    color: white;
    padding: 0.35em 0.8em;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 0.9em;
}

/* Badge verde para respuestas */
.badge-respuesta-circular {
    background-color: #198754; /* Verde éxito */
    color: white;
    padding: 0.4em 1em;
    border-radius: 2rem;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(25, 135, 84, 0.2);
}

.fecha-texto, 
.alumno-ref {
    font-size: 0.85rem;
    color: #6c757d;
}

.icon-visto { 
    color: #198754; 
}

/* =========================================
   7. BARRAS DE PROGRESO
   ========================================= */
.progress {
    height: 35px;
    border-radius: 8px;
    background-color: #e9ecef;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden;
}

.progress-bar {
    font-weight: 600;
    line-height: 35px;
    text-align: right;
    padding-right: 15px;
    transition: width 1s ease-in-out;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Colores de barras (Degradados hardcodeados) */
.bar-color-0 { background: linear-gradient(90deg, #0d6efd, #0b5ed7); }
.bar-color-1 { background: linear-gradient(90deg, #198754, #157347); }
.bar-color-2 { background: linear-gradient(90deg, #0dcaf0, #0aa2c0); }
.bar-color-3 { background: linear-gradient(90deg, #ffc107, #ffca2c); color: #333; text-shadow: none; }
.bar-color-4 { background: linear-gradient(90deg, #dc3545, #bb2d3b); }

/* =========================================
   8. BOTONES
   ========================================= */
/* Botón Outline */
.btn-outline-custom {
    border: 1px solid #ced4da;
    color: #495057;
    background-color: #ffffff;
    transition: 0.3s;
}

.btn-outline-custom:hover {
    background-color: #e9ecef;
    color: #212529;
}

/* Botón "Volver" flotante o estilo pastilla */
.btn-back-custom {
    background-color: #6c757d;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 2rem;
    border: none;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-back-custom:hover {
    background-color: #5a6268;
    color: white;
    transform: translateY(-2px);
}

/* Botón Gris estilo Pill (ancho completo) */
.btn-gray-pill {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    color: #6c757d;
    padding: 0.6rem 1.5rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-gray-pill:hover {
    background-color: #e9ecef;
    color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Botón de Acción Principal */
.btn-primary-action {
    background-color: #0d6efd; /* Azul principal */
    color: white;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
    border: none;
}

.btn-primary-action:hover {
    background-color: #0b5ed7;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
}

/* Otros botones */
.btn-resultados {
    background-color: #0d6efd; /* Azul principal */
    border-color: #0d6efd;
    color: white;
}

.btn-action-group .btn {
    margin-right: 8px;
    margin-bottom: 5px;
}
        /* Navbar original mantenido */
        .navbar { background-color: #fff; } 
        
        .card-custom {
            border: none;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            transition: transform 0.2s;
        }
        .form-control, .form-select {
            border-radius: 8px;
            border: 1px solid #dee2e6;
            padding: 0.6rem 1rem;
        }
        .form-control:focus, .form-select:focus {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
        }
        .table-header-custom {
            background-color: #343a40;
            color: white;
        }
        .table-hover tbody tr:hover {
            background-color: #f8f9fa;
        }
        .progress-custom {
            height: 10px;
            border-radius: 5px;
            background-color: #e9ecef;
        }

        /* --- AGREGA ESTO PARA EL ENCABEZADO NEGRO Y NEGRITA --- */
        .navbar-brand {
            color: #000000 !important; /* Color Negro */
            font-weight: 800 !important; /* Negrita extra fuerte */
        }
        /* ----------------------------------------------------- */

        /* Estilos específicos para replicar tu imagen */
        .card-filters {
            border: none;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            background-color: white;
        }
        .filter-section-title {
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 10px;
            text-transform: uppercase;
        }
        .text-blue-custom { color: #0d6efd; }
        .text-green-custom { color: #198754; }
        
        .card-selector {
            border: none;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            background-color: white;
            border-left: 5px solid #0d6efd; /* El borde azul de tu imagen */
        }
        
        .form-control, .form-select {
            border-radius: 6px;
            border: 1px solid #dee2e6;
            font-size: 0.95rem;
        }
        
        /* Barra de progreso y tabla */
        .progress-custom { height: 15px; border-radius: 10px; background-color: #e9ecef; }
        .table-header-custom { background-color: #343a40; color: white; }
        .bg-missed { background-color: #fff5f5; } /* Rojo suave para los que faltan */