/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN BASE
   ========================================================================== */
:root {
    /* Colores Institucionales Entre Ríos */
    --er-verde: #28a745;        /* Verde principal */
    --er-verde-hover: #218838;  /* Verde hover */
    --er-azul: #ffffff;         /* Azul real (Corregido de #ffffff) */
    --er-info: #17a2b8;         /* Cyan para cronograma */
    --er-header-bg: #212529;    /* Fondo oscuro para contraste */
    
    --header-user: 60px;
    --header-admin: 110px;
}

html { 
    overflow-y: scroll; 
    scroll-behavior: smooth; 
}

body {
    background-color: #f4f7f9;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   2. ENCABEZADO Y NAVEGACIÓN
   ========================================================================== */
.er-header {
    border-bottom: 3px solid var(--er-verde);
    background-color: #ffffff !important; /* Mantenemos fondo blanco por legibilidad */
}

/* Links activos */
.active-custom {
    color: #fff !important;
    background-color: rgba(255,255,255,0.1);
    font-weight: 600;
}

@media (min-width: 992px) {
    .active-custom {
        border-bottom: 3px solid var(--er-verde) !important;
        background: none !important;
        color: var(--er-azul) !important;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--er-header-bg);
        margin: 0 -0.75rem;
        padding: 0 1rem 1rem 1rem;
        border-bottom: 4px solid var(--er-verde);
    }
    .nav-link {
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding: 0.75rem 0 !important;
    }
}

/* ==========================================================================
   3. UI COMPONENTS (CARDS, BOTONES, BADGES)
   ========================================================================== */
.card { 
    border: none; 
    border-radius: 10px; 
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); 
}

.card-hover, .transition-all { 
    transition: all .25s ease-in-out; 
}

.card-hover:hover, .transition-all:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

/* Bordes y estados temáticos */
.border-info { border-top: 5px solid var(--er-info) !important; }
.hover-primary:hover h3 { color: var(--er-verde); }
.hover-info:hover h3 { color: var(--er-info); }

/* Botones Primarios */
.btn-primary, .bg-primary {
    background-color: var(--er-verde) !important;
    border-color: var(--er-verde) !important;
}

.btn-primary:hover {
    background-color: var(--er-verde-hover) !important;
    border-color: var(--er-verde-hover) !important;
}

/* --- Estilos específicos para la Card de Cronograma (Cyan) --- */

/* Borde superior grueso */
.border-info { 
    border-top: 5px solid var(--er-info) !important; 
}

/* Color de icono y textos específicos */
.text-info { 
    color: var(--er-info) !important; 
}

/* Efecto hover: el título h3 cambia a cyan cuando pasas el mouse por la card */
.hover-info:hover h3 { 
    color: var(--er-info); 
    transition: color 0.3s ease;
}

/* Botón contorneado Cyan */
.btn-outline-info {
    color: var(--er-info) !important;
    border-color: var(--er-info) !important;
    background: transparent;
    transition: all 0.3s ease;
}

.btn-outline-info:hover {
    background-color: var(--er-info) !important;
    color: white !important;
}

/* Decoración */
.barra-titulo {
    background-color: var(--er-verde);
    width: 70px;
    height: 4px;
    border-radius: 4px;
}

.text-primary, .bi-calendar-check, .bi-funnel, .bi-eye-fill {
    color: var(--er-verde) !important;
}

/* Badges */
.badge-status {
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bg-primary-subtle {
    background-color: #e9f7ef !important;
    color: var(--er-verde) !important;
}

/* ==========================================================================
   4. FORMULARIOS (CARGAR-FORMULARIO)
   ========================================================================== */
#formDJ input[type="text"],
#formDJ textarea {
    text-transform: uppercase;
}

/* Select2 Validación */
.select2-selection.is-valid {
    border-color: #198754 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23198754' viewBox='0 0 16 16'%3e%3cpath d='M13.485 1.929a.75.75 0 0 1 .086 1.057l-7.25 8.5a.75.75 0 0 1-1.092.042L2.429 8.72a.75.75 0 1 1 1.06-1.06l2.2 2.2 6.72-7.884a.75.75 0 0 1 1.076-.047z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

.select2-selection.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='0 0 16 16'%3e%3cpath d='M7.938 2.016a.13.13 0 0 1 .125 0l6.857 3.94c.11.063.11.218 0 .281l-6.857 3.94a.13.13 0 0 1-.125 0L1.08 6.237a.162.162 0 0 1 0-.281l6.857-3.94z'/%3e%3cpath d='M7.002 11h2v2h-2zm0-6h2v5h-2z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1rem;
}

.select-bloqueado { pointer-events: none; background-color: #e9ecef; }
#paso1.disabled-section { opacity: 0.6; pointer-events: none; }
.alert-danger { background:#fff5f5; border-color:#f5c2c7; }

/* ==========================================================================
   5. TABLAS Y FILTROS
   ========================================================================== */
.table td { white-space: nowrap; }
.table td:nth-child(2), .table td:nth-child(5) { white-space: normal; }

.table tbody tr { transition: all 0.2s ease; }
.table tbody tr:hover {
    background-color: rgba(40, 167, 69, 0.02) !important;
}

/* Flecha de filtros */
.arrow-toggle { transition: transform 0.3s ease; }
[data-bs-toggle="collapse"]:not(.collapsed) .arrow-toggle {
    transform: rotate(180deg);
    color: var(--er-verde) !important; /* Cambiado a verde para que sea visible */
}

/* ==========================================================================
   6. PAGINACIÓN Y UTILIDADES
   ========================================================================== */
.page-link { color: var(--er-verde) !important; }
.page-item.active .page-link {
    background-color: var(--er-verde) !important;
    border-color: var(--er-verde) !important;
    color: white !important;
}
.page-link:hover { color: var(--er-verde-hover) !important; }

/* Botones Especiales */
.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: 50px;
    background: #f1f3f5;
    color: #495057;
    text-decoration: none;
    font-weight: 500;
    transition: .2s ease;
}
.btn-volver:hover { background: #e9ecef; color: #000; }

.btn-qr-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background-color: var(--er-verde);
    color: white;
}

.cronograma-inactivo {
    max-width: 520px;
    background: #fff5f5;
    border: 1px solid #f1b0b7;
    border-radius: 10px;
    padding: 18px 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

@media(max-width:576px) {
    .btn-volver { width: 100%; justify-content: center; }
}