/**
 * LocalBrain - Estilos personalizados
 * Clases de color adicionales para badges de entidades
 */

/* Colores de fondo para badges */
.bg-purple {
    background-color: #6f42c1 !important;
}

.bg-blue {
    background-color: #3eadff !important;
}

.bg-teal {
    background-color: #20c997 !important;
}

.bg-indigo {
    background-color: #6610f2 !important;
}

.bg-pink {
    background-color: #d63384 !important;
}

.bg-orange {
    background-color: #fd7e14 !important;
}

/* Colores de texto correspondientes */
.text-purple {
    color: #6f42c1 !important;
}

.text-teal {
    color: #20c997 !important;
}

.text-indigo {
    color: #6610f2 !important;
}

.text-pink {
    color: #d63384 !important;
}

.text-orange {
    color: #fd7e14 !important;
}

.text-blue {
    color: #3eadff !important;
}

/* Botones con los colores personalizados */
.btn-purple {
    color: #fff;
    background-color: #6f42c1;
    border-color: #6f42c1;
}

.btn-blue {
    color: #fff;
    background-color: #3eadff;
    border-color: #3eadff;
}

.btn-teal {
    color: #fff;
    background-color: #20c997;
    border-color: #20c997;
}

.btn-indigo {
    color: #fff;
    background-color: #6610f2;
    border-color: #6610f2;
}

.btn-pink {
    color: #fff;
    background-color: #d63384;
    border-color: #d63384;
}

.btn-orange {
    color: #fff;
    background-color: #fd7e14;
    border-color: #fd7e14;
}

/* Botones outline con los colores personalizados */
.btn-outline-purple {
    color: #6f42c1;
    border-color: #6f42c1;
}

.btn-outline-purple:hover,
.btn-outline-purple.active {
    color: #fff;
    background-color: #6f42c1;
    border-color: #6f42c1;
}

.btn-outline-blue {
    color: #3eadff;
    border-color: #3eadff;
}

.btn-outline-blue:hover {
    color: #fff;
    background-color: #3eadff;
    border-color: #3eadff;
}

.btn-outline-teal {
    color: #20c997;
    border-color: #20c997;
}

.btn-outline-teal:hover {
    color: #fff;
    background-color: #20c997;
    border-color: #20c997;
}

.btn-outline-indigo {
    color: #6610f2;
    border-color: #6610f2;
}

.btn-outline-indigo:hover {
    color: #fff;
    background-color: #6610f2;
    border-color: #6610f2;
}

.btn-outline-pink {
    color: #d63384;
    border-color: #d63384;
}

.btn-outline-pink:hover {
    color: #fff;
    background-color: #d63384;
    border-color: #d63384;
}

.btn-outline-orange {
    color: #fd7e14;
    border-color: #fd7e14;
}

.btn-outline-orange:hover {
    color: #fff;
    background-color: #fd7e14;
    border-color: #fd7e14;
}

/* Fondos sutiles para badges */
.bg-purple-subtle {
    background-color: rgba(111, 66, 193, 0.1) !important;
}

.bg-blue-subtle {
    background-color: rgba(62, 173, 255, 0.1) !important;
}

.bg-teal-subtle {
    background-color: rgba(32, 201, 151, 0.1) !important;
}

.bg-indigo-subtle {
    background-color: rgba(102, 16, 242, 0.1) !important;
}

.bg-pink-subtle {
    background-color: rgba(214, 51, 132, 0.1) !important;
}

.bg-orange-subtle {
    background-color: rgba(253, 126, 20, 0.1) !important;
}

/* Clases text-bg para círculos y elementos con texto */
.text-bg-purple {
    color: #fff !important;
    background-color: #6f42c1 !important;
}

.text-bg-blue {
    color: #fff !important;
    background-color: #3eadff !important;
}

.text-bg-teal {
    color: #fff !important;
    background-color: #20c997 !important;
}

.text-bg-indigo {
    color: #fff !important;
    background-color: #6610f2 !important;
}

.text-bg-pink {
    color: #fff !important;
    background-color: #d63384 !important;
}

.text-bg-orange {
    color: #fff !important;
    background-color: #fd7e14 !important;
}

/* ============================================
   View Transition API - Animación Dark Mode
   ============================================ */

/* Animación suave para el cambio de tema */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.5s;
}

/* Efecto de fade cruzado */
::view-transition-old(root) {
    animation-name: fade-out;
}

::view-transition-new(root) {
    animation-name: fade-in;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Reducir movimiento para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.1s;
    }
}