/* Card Styles */
.card-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    padding: 2rem;
    border-radius: 1.25rem;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2),
                0 0 5px rgba(0, 255, 224, 0.1),
                0 0 5px rgba(197, 0, 245, 0.1);
}

.card-container::before {
    content: '';
    position: absolute;
    inset: -2px; /* ← Ajustado para coincidir con el border nativo de los botones */
    border-radius: inherit;
    padding: 2px; /* ← Aquí controlas el grosor del borde */
    background: linear-gradient(90deg,
            rgb(0, 255, 224),
            rgb(197, 0, 245));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.card-container:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3),
                0 0 10px rgba(0, 255, 224, 0.2),
                0 0 10px rgba(197, 0, 245, 0.2);
}

/* Hover específico para modo light */
.card-container:hover {
    background: rgba(255, 255, 255, 0.98); /* Mantener blanco en modo light */
}

/* Hover específico para modo dark */
.dark .card-container:hover {
    background: rgba(0, 0, 0, 0.95) !important; /* Forzar negro en modo dark */
}

.card-container:hover::before {
    opacity: 1;
    padding: 3px; /* ← Grosor del borde en hover (proporcional al normal) */
}

.border-glow {
    position: relative;
    border-radius: 16px;
    z-index: 0;
    overflow: hidden;
    border: 2px solid transparent;
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)) padding-box,
        linear-gradient(90deg, #00FFE0, #C500F5) border-box;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15),
                0 0 5px rgba(0, 255, 224, 0.1),
                0 0 5px rgba(197, 0, 245, 0.1);
}

/* Estados hover/focus para todas las cards */
.border-glow:hover,
.border-glow:focus {
    border-image: linear-gradient(90deg, #00FFE0, #C500F5) 1;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2),
                0 0 10px rgba(0, 255, 224, 0.2),
                0 0 10px rgba(197, 0, 245, 0.2);
}

/* Service Cards */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover,
.service-card:focus {
    transform: scale(1.05);
    box-shadow:
        0 0px 10px rgba(0, 0, 0, 0.15),
        0 0 10px rgba(0, 255, 224, 0.3),
        0 0 109px rgba(197, 0, 245, 0.2);
}

/* Animación de pulsación para bordes neón */
@keyframes pulse-border {
    0%, 100% {
        opacity: 0.8;
        box-shadow: 0 0 5px rgba(0, 255, 224, 0.1),
                  0 0 5px rgba(197, 0, 245, 0.1);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(0, 255, 224, 0.2),
                  0 0 10px rgba(197, 0, 245, 0.2);
    }
}

/* Aplicar animación a elementos con borde neón en modo oscuro */
.dark .card-container::before,
.dark .border-glow,
.dark .btn-agendar-navbar,
.dark .btn-agendar-section {
    animation: pulse-border 3s infinite;
}

/* Efectos hover para botones de agendar - consistentes con cards */
.dark .btn-agendar-navbar:hover,
.dark .btn-agendar-section:hover {
    background-color: rgba(0, 0, 0, 0.95) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3),
                0 0 10px rgba(0, 255, 224, 0.2),
                0 0 10px rgba(197, 0, 245, 0.2) !important;
    transform: scale(1.05); /* ← Cambiado para igualar con las cards */
}

/* Estilos para contenedores de iconos en cards */
.card-container .w-16.h-16 {
    background-color: rgba(0, 0, 0, 0.8) !important; /* Negro en modo claro */
}

.dark .card-container .w-16.h-16 {
    background-color: rgba(255, 255, 255, 0.15) !important; /* Blanco semi-transparente en modo oscuro */
}