/* ==========================================
   ENLACE "¿OLVIDASTE TU CONTRASEÑA?"
   ========================================== */

/* Modo Claro (Por defecto) */
.text-primary {
    color: #846044 !important;
    transition: color 0.3s ease !important;
}

    /* Efecto al pasar el mouse en modo claro */
    .text-primary:hover, .text-primary:focus {
        color: #6b4e36 !important; /* Un tono café más oscuro al hacer hover */
        text-decoration: underline !important; /* Subrayado sutil al apuntarlo */
    }

/* Modo Oscuro (data-bs-theme="dark") */
[data-bs-theme="dark"] .text-primary {
    color: #DFCCB1 !important; /* En fondo oscuro usamos el Beige Claro para que resalte y sea legible */
}

    /* Efecto al pasar el mouse en modo oscuro */
    [data-bs-theme="dark"] .text-primary:hover,
    [data-bs-theme="dark"] .text-primary:focus {
        color: #C4A071 !important; /* Cambia al tono Arena Dorado al hacer hover */
    }
/* ==========================================
   1. TRANSICIONES GLOBALES SUTILES
   ========================================== */
body, .card, .form-control, .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Sombra suave exclusiva para el logotipo corporativo */
.drop-shadow {
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
}

/* Alineación base para los iconos de Bootstrap */
.bi {
    vertical-align: -0.125em;
    fill: currentColor;
}

/* Asegurar el z-index del botón flotante */
.bd-mode-toggle {
    z-index: 1500;
}

    .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
    }

    .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
    }


/* ==========================================
   2. MODO CLARO (ESTILOS POR DEFECTO)
   ========================================== */

/* Título con degradado Terracota a Arena */
h1.text-gradient {
    background: linear-gradient(45deg, #846044, #C4A071) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

/* Botón Principal Terracota */
.btn.btn-primary {
    background-color: #846044 !important;
    border-color: #846044 !important;
    color: #ffffff !important;
}

    /* Efectos Hover / Focus en Modo Claro */
    .btn.btn-primary:hover,
    .btn.btn-primary:focus,
    .btn.btn-primary:active {
        background-color: #6b4e36 !important;
        border-color: #6b4e36 !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 0.25rem rgba(132, 96, 68, 0.25) !important;
    }


/* ==========================================
   3. MODO OSCURO (data-bs-theme="dark")
   ========================================== */
[data-bs-theme="dark"] {
    --bs-body-bg-rgb: 18, 18, 18;
    /* Estructura de la tarjeta flotante */
    .card

{
    background-color: #1e1e1e;
    border: 1px solid #2d2d2d !important;
}

/* Inputs estilizados para no cansar la vista */
.form-control {
    background-color: #252525;
    border-color: #3d3d3d;
    color: #f8f9fa;
}

    .form-control:focus {
        background-color: #2d2d2d;
        border-color: #846044; /* El foco del input ahora combina con tu terracota */
    }

/* Degradado del título adaptado para fondo oscuro */
h1.text-gradient {
    background: linear-gradient(45deg, #a17756, #DFCCB1) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Botón en Modo Oscuro */
.btn.btn-primary {
    background-color: #846044 !important;
    border-color: #846044 !important;
}

    .btn.btn-primary:hover {
        background-color: #9c7351 !important;
        border-color: #9c7351 !important;
    }
}

/* ==========================================
   EFECTO DE APARICIÓN (ANIMACIÓN FADE-IN)
   ========================================== */

/* 1. Definimos la animación */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Empieza 20px más abajo */
    }

    to {
        opacity: 1;
        transform: translateY(0); /* Llega a su posición original */
    }
}

/* 2. Aplicamos la animación a la tarjeta del Login */
.form-signin .card {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    /* 0.6s = Duración de la animación.
       cubic-bezier = Hace que el movimiento empiece rápido y desacelere suavemente al final (efecto premium).
       forwards = Mantiene el estado final para que no desaparezca.
    */
}

/* Retraso sutil para los elementos internos de la tarjeta */
.form-signin .card-body form > * {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Cada bloque va apareciendo un instante después del anterior */
.form-signin form .text-center {
    animation-delay: 0.15s;
}
/* Logo y Título */
.form-signin form .form-floating:nth-of-type(1) {
    animation-delay: 0.35s;
}
/* Input Email */
.form-signin form .form-floating:nth-of-type(2) {
    animation-delay: 0.45s;
}
/* Input Password */
.form-signin form .d-flex {
    animation-delay: 0.55s;
}
/* Recuérdame / Olvidé contraseña */
.form-signin form .btn {
    animation-delay: 1.00s;
}
/* Botón Iniciar Sesión */

/* Estilo formal y elegante para el título de la Agenda */
.titulo-elegante {
    font-family: 'Playball', 'Georgia', cursive;
    font-weight: 700; /* Hace la letra más gruesa */
    letter-spacing: 0.5px; /* Espaciado sutil entre letras elegantes */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra suave para que resalte más en el fondo oscuro */
}

/* --- MODO CLARO (Por defecto) --- */
.bg-indomables {
    background-color: #f8f9fa !important; /* Un gris claro o blanco */
}

    .bg-indomables .nav-link,
    .bg-indomables .titulo-elegante {
        color: #212529 !important; /* Letras oscuras */
    }

/* --- 🚀 MODO OSCURO AUTOMÁTICO --- */
[data-bs-theme="dark"] .bg-indomables {
    background-color: #846044 !important; /* Tu color café elegante */
}

    [data-bs-theme="dark"] .bg-indomables .nav-link,
    [data-bs-theme="dark"] .bg-indomables .titulo-elegante {
        color: #ffffff !important; /* Forzamos letras blancas en modo café */
    }

    [data-bs-theme="dark"] .bg-indomables .navbar-toggler-icon {
        filter: invert(1); /* Hace que el icono del menú móvil cambie a blanco */
    }

.bg-indomables {
    /* vacía o sin background-color fijo */
}

/* ==========================================
   ESTILOS INTERACTIVOS PARA LA BARRA LATERAL
   ========================================== */
.edge-link {
    transition: all 0.25s ease-in-out;
    border-left: 4px solid transparent; /* Efecto de borde secreto */
}

    /* 🚀 EFECTO HOVER EN NEGRO ELEGANTE */
    .edge-link:hover {
        background-color: rgba(0, 0, 0, 0.4) !important; /* Fondo negro con 40% de opacidad */
        color: #ffffff !important; /* Forzamos letras blancas para una lectura perfecta sobre el negro */
        border-left: 4px solid #000000; /* Revela una línea negra sólida a la izquierda */
        padding-left: 1.75rem !important; /* Sutil desplazamiento dinámico */
    }


/* ==========================================
   ESTILOS INTERACTIVOS PARA CALENDARIO
   ========================================== */
/* Customización de botones de FullCalendar */
/* Soporte para animación de colapso horizontal fluido */
#panelFiltros.collapsing {
    display: block;
    width: 0;
    transition: width 0.3s ease;
    overflow: hidden;
}

/* Evita que el botón flotante tape elementos del diseño en pantallas pequeñas */
@media (max-width: 768px) {
    #btnToggleFiltros {
        display: none !important; /* En móviles se prefiere dejar fijo */
    }
}