.con-navbar {
  padding-top: 70px;
}

/* Definición de variables por defecto (Light Mode - Estilo 2010) */
:root {
    --fb-gradient: linear-gradient(45deg, #3b5998, #8b9dc3);
    --fb-text: #ffffff;
    --fb-bg-container: #f0f2f5; /* El gris claro clásico de fondo */
}

/* Ajustes para Dark Mode (Automático según el sistema) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Un azul más profundo y menos brillante para no lastimar la vista */
        --fb-gradient: linear-gradient(45deg, #243c64, #4e69a2);
        --fb-text: #e4e6eb;
        --fb-bg-container: #18191a; 
    }
}


@media (min-width: 992px) {
    .calendar-day.btn-dia-calendario:hover {
        background-color: var(--bs-light);
        cursor: cell; /* Cambia el cursor a una cruz de selección */
    }
}

/* La clase que puedes usar en tus elementos */
.fb-retro-style {
    background: var(--fb-gradient);
    color: var(--fb-text);
    padding: 20px;
    border-radius: 8px;
    font-family: Helvetica, Arial, sans-serif; /* La fuente de esa época */
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Un toque sutil de profundidad */
    transition: background 0.3s ease; /* Transición suave al cambiar de modo */
}

.custom-range::-webkit-slider-thumb {
    background: #0d6efd; /* Color primario de Bootstrap */
}
.custom-range::-moz-range-thumb {
    background: #0d6efd;
}
.custom-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* El texto del usuario */
.typing-text {
    font-weight: 500;
    animation: fadeInTyping 0.4s ease-out;
}

/* Los puntos animados */
.typing-dots span {
    animation: dots-blink 1.4s infinite both;
    font-size: 1.4rem;
    line-height: 0;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dots-blink {
    0% { opacity: 0.2; }
    20% { opacity: 1; }
    100% { opacity: 0.2; }
}

@keyframes fadeInTyping {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}




/*

/* Animación de entrada suave */
.animate-msg {
    animation: fadeInUp 0.3s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilo de burbuja con puntas asimétricas (Moderno) */
.rounded-bottom-end-0 {
    border-bottom-right-radius: 4px !important;
}

.rounded-bottom-start-0 {
    border-bottom-left-radius: 4px !important;
}

/* Efecto de profundidad para los mensajes del otro */
.bg-white.border {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

*/

.badge-notif {
    width: 10px;
    height: 10px;
    background-color: #ff3b30; /* Rojo vibrante */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 5px rgba(255, 59, 48, 0.5);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}








.btn-close-sm {
  transform: scale(.7);
}


/* Oculta el botón de abrir cuando el chat está visible */
#chatFlotante.show ~ div button {
    display: none;
}

/* Scrollbar adaptativa y fina */
.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-primary-bg-subtle) transparent;
}

/* Chrome/Safari */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
}
[data-bs-theme="dark"] .overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2);
}
 

 

@keyframes highlight-update {
    0% { transform: scale(1); color: #0d6efd; }
    50% { transform: scale(1.3); color: #0d6efd; font-weight: bold; }
    100% { transform: scale(1); color: inherit; }
}

.stat-updated {
    animation: highlight-update 0.2s ease-out;
}

/* Si el link tiene la clase activa (ponla desde PHP), desactiva el clic */
/*.nav-link.active {
  pointer-events: none;
  cursor: default;
  opacity: 0.7;
}
*/

.img-perfil-ajustada {
    object-fit: cover;
    object-position: center;
}

.custom-card-action {
  transition: all 0.2s ease-in-out;
  border-radius: 15px;
  /* Usamos las variables de Bootstrap para el fondo y el borde */
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}

.custom-card-action:hover {
  transform: translateY(-5px);
  /* Ajustamos la sombra para que sea visible pero sutil en modo oscuro */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-primary-border-subtle);
}

/* Ajuste opcional para que el texto siempre sea legible */
.custom-card-action .fw-bold {
  color: var(--bs-heading-color);
}

[data-bs-theme="dark"] .custom-card-action:hover {
  border-color: var(--bs-warning); /* Brilla el borde con el color primario en Dark Mode */
}

/* Animación de temblor */
@keyframes shake-modal {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-8px); }
}

.modal-shake {
  animation: shake-modal 0.4s ease-in-out;
}

  .icon-wrapper i {
    transition: transform 0.3s ease;
    display: inline-block;
  }

  .custom-card-action:hover .icon-wrapper i {
    transform: scale(1.15) rotate(5deg);
  }

/* 1. RESET: Mantenemos la opacidad base */
.toast.fade {
    transition: none !important;
    opacity: 1 !important;
}

/* 2. ENTRADA */
.toast.show {
    display: block !important;
    animation: toast-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 3. SALIDA: El truco está en forzar la visibilidad aunque pierda .show */
.toast.hiding {
    display: block !important;
    opacity: 1 !important; 
    /* Aseguramos que el navegador no lo oculte por su cuenta */
    visibility: visible !important;
    animation: toast-out 0.3s ease-in forwards !important;
}

/* --- ANIMACIONES --- */
@keyframes toast-in {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
    from { 
        transform: translateX(0); 
        opacity: 1; 
    }
    to { 
        transform: translateX(120%); 
        opacity: 0; 
        visibility: hidden;
    }
}

/* Bloqueo visual del formulario */
.form-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Spinner dentro del botón */
.spinner-border-sm {
    margin-right: 8px;
    vertical-align: middle;
}

/* Opcional: El cursor de espera en toda la página */
body.waiting {
    cursor: wait !important;
}

/* Altura del mapa */
.dashboard-map-container {
    height: 550px;
    width: 100%;
}

/* Efecto Hover para las tarjetas */
.card-hover-transition {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover-transition:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* Ajuste de colores para modo oscuro/claro automático */
.bg-primary-subtle {
    /* Bootstrap ya maneja esto, pero aseguramos contraste */
    opacity: 0.9;
}

/* Adaptación de Popups de Leaflet a Bootstrap 5 Dark/Light */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow);
}

.custom-popup .leaflet-popup-content {
    margin: 12px; /* Espaciado más limpio */
}

/* Ajuste del botón de cerrar */
.leaflet-container a.leaflet-popup-close-button {
    color: var(--bs-secondary) !important;
    padding: 8px 8px 0 0;
}


        .boton-git { background: #24292e; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px; }
        .consola { background: #f6f8fa; border: 1px solid #ddd; padding: 10px; margin-top: 10px; }


/* Adaptación de la regla a temas Dark/Light */
.leaflet-ruler {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4) !important;
}

.leaflet-ruler i {
    color: var(--bs-primary) !important; /* El icono de la regla */
}

/* El texto flotante que aparece mientras mides */
.result-tooltip {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 11px;
}

/* Fila de notificación */
.notification-row {
    transition: all 0.2s ease;
    border-radius: 12px !important;
}

.notification-row:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
}

/* Punto de no leído */
.unread-dot {
    width: 8px;
    height: 8px;
    background-color: #0d6efd;
    border-radius: 50%;
    position: absolute;
    left: 8px;
}

/* Badge pequeño sobre el avatar para el tipo de notificación */
.notification-type-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* Botón "Ir" minimalista */
.btn-action-go {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 1px solid #eee;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.btn-action-go:hover {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
    transform: scale(1.1);
}