/* ==================================================
   CSS COMPLETO PARA TEMA OSCURO - CRECIMIENTO DEL SER
   ================================================== */

/* ======== VARIABLES TEMA OSCURO ======== */
.dark-mode {
    /* Colores principales - verde/turquesa */
    --primary-light: #8fcfb0;    /* Verde claro, más brillante para mejor visibilidad */
    --primary: #5eac8a;          /* Verde medio, mantenido del original */
    --primary-dark: #489876;     /* Verde oscuro, mantenido del original */
    
    /* Colores secundarios y de acento - más claros para contraste */
    --secondary: #c5e1d2;        /* Verde muy claro para contraste */
    --secondary-light: #d8eee3;  /* Verde más claro aún */
    --accent: #d8e6d3;           /* Tono acento más claro y saturado */

    /* Colores de fondo - más oscuros, pero distinguibles entre sí */
    --background-darkest: #142825; /* Color más oscuro para fondos principales */
    --background-dark: #1a322e;    /* Fondo oscuro para elementos contenedores */
    --background-medium: #234238;  /* Fondo medio para tarjetas y elementos secundarios */
    --background-light: #2d514a;   /* Fondo más claro para elementos destacados */
    
    /* IMPORTANTE: Corregir confusión en nomenclatura */
    --light: #f0f7f4;              /* 'light' ahora realmente significa "claro" */
    --dark: #142825;               /* 'dark' ahora realmente significa "oscuro" */

    /* Colores de texto con buen contraste */
    --text-light: #ffffff;         /* Texto claro principal (blanco) */
    --text-medium: #e0ebe6;        /* Texto claro secundario (ligero tinte verde) */
    --text-muted: #9fbdb5;         /* Texto atenuado pero legible (suficiente contraste) */
    --text-dark: #142825;          /* Texto oscuro para fondos claros */

    /* Estados con colores distinguibles */
    --success: #5ebb8d;         /* Verde más brillante para mejor visibilidad */
    --warning: #f2d19a;         /* Amarillo más claro y saturado */
    --danger: #e77e63;          /* Rojo más claro y saturado */

    /* Escala de grises redefinida con suficiente contraste */
    --gray-100: #2d514a;        /* Más claro que el fondo principal */
    --gray-200: #386a61;        /* Suficiente contraste para elementos divisores */
    --gray-300: #457a70;        /* Para bordes y elementos secundarios */
    --gray-400: #598d83;        /* Para elementos de formulario */
    --gray-500: #7aa59c;        /* Para textos secundarios legibles */
    --gray-600: #9fbdb5;        /* Para textos atenuados pero con buen contraste */

    /* Efectos de vidrio - ajustados para mejor visibilidad */
    --glass-bg: rgba(30, 53, 48, 0.85);           /* Más opaco para mejor legibilidad */
    --glass-bg-dark: rgba(20, 40, 37, 0.85);      /* Más opaco para mejor legibilidad */
    --glass-border: rgba(200, 230, 220, 0.2);     /* Más visible */
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35); /* Sombra más pronunciada */

    /* Sombras más visibles */
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    /* Variables específicas para el chatbot */
    --chatbot-primary: var(--primary);
    --chatbot-primary-light: var(--primary-light);
    --chatbot-primary-dark: var(--primary-dark);
    --chatbot-gradient: linear-gradient(135deg, var(--primary), var(--primary-dark));

    /* Mantener estos valores */
    --transition: all 0.3s ease;
    --border-radius-sm: 8px;
    --border-radius: 16px;
    --border-radius-lg: 24px;
    --section-padding: 100px 0;
}

/* ======== ESTILOS GENERALES ======== */
.dark-mode body {
    background-color: var(--dark);
    color: var(--text-light);
}

/* Asegurarnos que los encabezados sean visibles */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
    color: var(--text-light);
}

/* Asegurarnos que los párrafos sean visibles */
.dark-mode p {
    color: var(--text-medium);
}

/* ======== ESTILOS DE TEXTO PARA SECCIONES ESPECÍFICAS ======== */
/* Descripciones de secciones */
.section-description {
    color: var(--gray-600);
    max-width: 700px;
    margin: 0 auto;
}

.dark-mode .section-description {
    color: var(--text-medium);
}

/* SECCIÓN HERO */
.hero-description {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: var(--dark);
}

.dark-mode .hero-description {
    color: var(--text-medium);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* SECCIÓN NOSOTROS */
.about-description {
    color: var(--gray-600);
}

.dark-mode .about-description {
    color: var(--text-medium);
}

/* SECCIÓN TALLERES */
.workshop-text {
    color: var(--gray-600);
    margin-bottom: 25px;
}

.dark-mode .workshop-text {
    color: var(--text-medium);
}

/* SECCIÓN ACTIVIDADES */
.activity-description {
    color: var(--gray-600);
}

.dark-mode .activity-description {
    color: var(--text-medium);
}

/* Lista de actividades - elementos */
.info-text {
    color: var(--gray-600);
}

.dark-mode .info-text {
    color: var(--text-medium);
}

/* SECCIÓN VIAJES */
.trips-description, 
.trip-description {
    color: var(--gray-600);
}

.dark-mode .trips-description, 
.dark-mode .trip-description {
    color: var(--text-medium);
}

/* SECCIÓN FORMACIONES */
.training-description {
    color: var(--gray-600);
    margin-bottom: 20px;
}

.dark-mode .training-description {
    color: var(--text-medium);
}

.detail-text {
    color: var(--gray-600);
}

.dark-mode .detail-text {
    color: var(--text-medium);
}

/* FOOTER */
.footer-description, 
.footer-newsletter-description {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.dark-mode .footer-description, 
.dark-mode .footer-newsletter-description {
    color: var(--text-medium);
}

/* ======== 1. MENÚ PRINCIPAL Y HEADER ======== */
.dark-mode header {
    background: var(--glass-bg-dark);
}

.dark-mode .logo-text {
    color: var(--text-light);
}

.dark-mode nav a {
    color: var(--text-light);
}

.dark-mode .mobile-toggle {
    color: var(--text-light);
}

.dark-mode .theme-toggle {
    color: var(--text-light);
}

/* ======== 2. SECCIÓN HERO ======== */
.dark-mode .hero-bg {
    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-light) 100%);
}

.dark-mode .hero h1 {
    color: var(--text-light);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    font-weight: 800; /* Más bold para mejor contraste */
}

.dark-mode .hero p {
    color: var(--text-medium);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    font-weight: 500; /* Medio para mejor legibilidad */
}

/* Ajustes al contenido del hero para mejorar legibilidad */
.dark-mode .hero-content {
    position: relative;
    z-index: 1; /* Asegura que esté por encima del overlay */
}

/* Overlay para mejorar el contraste */
.dark-mode .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 0;
    pointer-events: none;
}

/* ======== 3. SECCIÓN DE CITAS Y AGENDA ======== */
.dark-mode .appointment-form {
    background-color: var(--background-dark);
}

.dark-mode .form-header h3 {
    color: var(--text-light);
}

.dark-mode .form-header p {
    color: var(--text-medium);
}

/* Arreglo importante: etiquetas en las áreas terapéuticas */
.dark-mode .therapy-tag {
    background-color: var(--primary-dark);
    color: var(--text-light);
    font-weight: 500;
}

/* Corrección para textos en áreas terapéuticas */
.dark-mode .area-terapeuta .terapeuta-info p {
    color: var(--text-medium);
}

/* Área de selección */
.dark-mode .area-select-header {
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary) 100%);
}

.dark-mode .area-select-header h5 {
    color: var(--background-dark); /* Color oscuro para el texto */
    font-weight: 600; /* Más grueso para mejor legibilidad */
}

.dark-mode .area-select-icon {
    background-color: var(--dark);
    /* color: var(--background-dark); Iconos también oscuros */
}

.dark-mode .area-select-item {
    background-color: var(--dark);
}

.dark-mode .area-select-item.selected {
    background-color: var(--secondary-light);
    border-color: var(--primary);
}

/* Modo oscuro - estado seleccionado */
.dark-mode .area-select-item.selected .area-select-header {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}

/* ======== CALENDARIO Y SELECCIÓN DE HORA ======== */
/* Navegación del calendario */
.btn-cal-nav {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    border-radius: 50%;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.8;
    position: relative;
    z-index: 2;
}

.dark-mode .btn-cal-nav {
    color: var(--text-light);
}

.btn-cal-nav:hover {
    background-color: var(--primary-light);
    color: var(--primary-dark);
    opacity: 1;
}

.dark-mode .btn-cal-nav:hover {
    background-color: var(--primary);
    color: var(--text-light);
}

.dark-mode .calendar-nav {
    background-color: var(--background-light);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.dark-mode .current-date {
    color: var(--text-light);
}

.dark-mode #today-btn {
    background-color: var(--gray-300); /* Ajustado para mejor contraste */
    color: var(--primary-light);
}

.dark-mode .booking-summary {
    background-color: var(--glass-bg-dark);
}

.dark-mode .booking-tab.active {
    background-color: var(--primary);
}

.dark-mode .booking-tabs {
    background-color: var(--background-medium);
}

.dark-mode .booking-tab {
    color: var(--text-medium);
}

.dark-mode .calendar-weekdays {
    color: var(--text-medium);
}

.dark-mode .calendar-day {
    color: var(--text-light);
}

.dark-mode .calendar-day.disabled {
    color: var(--gray-500);
    background-color: var(--background-medium);
}

.dark-mode .selected-date-info {
    background-color: var(--background-medium);
    color: var(--text-light);
}

/* Tabla de horarios */
.dark-mode .time-slot-item {
    background-color: var(--background-medium);
    border-color: var(--primary);
    color: var(--text-light);
}

.dark-mode .time-slot-item.selected {
    background-color: var(--primary);
}

.dark-mode .time-slot-item.unavailable {
    background-color: var(--background-darkest);
    border-color: var(--gray-500);
    color: var(--gray-500);
}

.dark-mode .legend-text {
    color: var(--text-medium);
}

/* Resumen de reserva */
.dark-mode .summary-label {
    color: var(--text-medium);
}

.dark-mode .summary-value {
    color: var(--primary-light);
}

/* ======== 4. SECCIÓN DE SERVICIOS Y TERAPIAS ======== */
.dark-mode .services {
    background-color: var(--gray-600);
}

.dark-mode .service-card {
    background-color: var(--background-dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .service-content h3 {
    color: var(--text-light);
}

.dark-mode .service-content p {
    color: var(--text-medium);
}

.dark-mode .service-select-item {
    background-color: var(--glass-bg-dark);
}

/* ======== 5. SECCIÓN SOBRE NOSOTROS ======== */
.dark-mode .about-text p {
    color: var(--text-medium);
}

.dark-mode .feature-text h4 {
    color: var(--text-light);
}

.dark-mode .feature-text p {
    color: var(--text-medium);
}

.dark-mode h6 {
    color: var(--text-light);
}

/* ======== 6. SECCIÓN DE TALLERES ======== */
.dark-mode .workshops-grid {
    color: var(--text-medium);
}

/* Corrección crítica: workshop cards con colores invertidos */
.dark-mode .workshop-card {
    background-color: var(--background-dark);
    color: var(--text-light); /* Asegura que el texto tenga contraste */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .workshop-card h3 {
    color: var(--text-light); /* Asegura contraste en los títulos */
}

.dark-mode .workshop-card p {
    color: var(--text-light); /* Asegura mejor legibilidad en el texto */
}

.dark-mode .workshop-card .btn {
    background-color: var(--primary-dark);
    color: var(--text-light);
    border: none;
}

.dark-mode .workshop-card .btn:hover {
    background-color: var(--primary);
}

/* Actividades - uno de los principales problemas */
.dark-mode .activities-container {
    background-color: var(--background-dark);
    color: var(--text-light);
    border: none; /* Elimina cualquier borde blanco que esté afectando */
}

.dark-mode .activities-title {
    color: var(--text-light);
}

.dark-mode .activities-tabs {
    background-color: var(--background-dark);
}

.dark-mode .activity-tab {
    color: var(--text-medium);
}

.dark-mode .activity-tab.active {
    background-color: var(--primary);
    color: var(--text-light);
}

/* CRÍTICO - Corregir listas de información en actividades */
.dark-mode .activity-info li {
    color: var(--text-medium);
}

.dark-mode .activity-item {
    /* background-color: var(--background-light); */
    color: var(--text-light);
}

.dark-mode .activity-item .activity-info li {
    color: var(--text-light);
}

.dark-mode .activity-info li i {
    color: var(--primary-light);
}

.dark-mode .activity-subtitle {
    color: var(--text-muted);
}

.dark-mode .activity-date {
    color: var(--text-light);
}

/* Viajes */
.dark-mode .trip-card {
    background-color: var(--background-dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .trip-content h4 {
    color: var(--text-light);
}

.dark-mode .trip-content p {
    color: var(--text-medium);
}

/* Formaciones */
.dark-mode .training-card {
    background-color: var(--background-dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .training-card h4 {
    color: var(--text-light);
}

.dark-mode .training-card p {
    color: var(--text-medium);
}

.dark-mode .training-detail {
    color: var(--text-medium);
}

.dark-mode .training-details {
    /* background-color: var(--background-light); */
    color: var(--text-light);
}

/* ======== 7. SECCIÓN DE FORMULARIOS ======== */
.dark-mode label {
    color: var(--text-light);
}

.dark-mode .form-control {
    background-color: var(--background-medium);
    border-color: var(--gray-300);
    color: var(--text-light);
}

.dark-mode .form-control::placeholder {
    color: var(--text-muted);
}

.dark-mode .form-check-label {
    color: var(--text-medium);
}

.dark-mode .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(104, 176, 160, 0.3);
}

/* ======== 8. SECCIÓN DE CONTACTO ======== */
.dark-mode .contact {
    background-color: var(--gray-600);
}

.dark-mode .contact-text h4 {
    color: var(--text-light);
}

.dark-mode .contact-text p {
    color: var(--text-light);}

/* ======== 9. INFO CARDS ======== */
.dark-mode .info-card {
    background-color: var(--background-dark);
}

.dark-mode .info-header h3 {
    color: var(--text-light);
}

.dark-mode .info-header p {
    color: var(--text-medium);
}

.dark-mode .info-content h4 {
    color: var(--text-light);
}

.dark-mode .info-content p {
    color: var(--text-medium);
}

/* ======== 10. FOOTER ======== */
.dark-mode footer {
    background-color: var(--background-darkest);
    color: var(--text-light);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .footer-container {
    /* background-color: var(--background-light); */
    color: var(--text-light);
}

.dark-mode .footer-about p {
    color: var(--text-medium);
}

.dark-mode .footer-heading {
    color: var(--text-light);
}

.dark-mode .footer-contact-icon {
    color: var(--primary-light); /* Destacar iconos */
}

.dark-mode .footer-contact-text {
    color: var(--text-medium);
}

.dark-mode .footer-links a {
    color: var(--text-medium);
    opacity: 0.9;
}

.dark-mode .footer-links a:hover {
    color: var(--primary-light);
    opacity: 1;
}

.dark-mode .footer-newsletter {
    background-color: transparent; /* Asegura que no hereden otro color de fondo */
}

.dark-mode .newsletter-btn {
    background-color: var(--primary);
}

.dark-mode .newsletter-form input {
    background-color: var(--gray-300);
    color: var(--text-light);
}

.dark-mode .newsletter-form input::placeholder {
    color: var(--gray-500);
}

.dark-mode .newsletter-input {
    background-color: var(--background-medium);
    color: var(--text-light);
    border: 1px solid var(--gray-400);
}

.dark-mode .newsletter-input::placeholder {
    color: var(--text-muted);
}

/* Logo del desarrollador */
.dark-mode .intellia-link {
    opacity: 0.9;
}

.dark-mode .intellia-link:hover {
    opacity: 1;
}

/* ======== 11. BOTONES Y ELEMENTOS INTERACTIVOS ======== */
.dark-mode .btn {
    background-color: var(--primary);
    color: var(--text-light);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.dark-mode .btn:hover {
    background-color: var(--primary-dark);
    color: var(--text-light);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.dark-mode .btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--text-light);
}

.dark-mode .btn-outline:hover {
    background-color: var(--primary);
    color: var(--background-dark); /* Texto oscuro para mejor contraste */
}

/* Enlaces WhatsApp */
.dark-mode .whatsapp-link {
    background-color: #128C7E;
}

.dark-mode .whatsapp-link:hover {
    background-color: #075E54;
}

/* ======== 12. DROPDOWN DE USUARIO ======== */
.dark-mode .user-dropdown {
    background-color: var(--background-light); /* Usar una variable de color existente */
    color: var(--text-light);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
}

.dark-mode .dropdown-item {
    color: var(--text-light);
}

.dark-mode .dropdown-item:hover {
    background-color: var(--background-medium);
}

.dark-mode .dropdown-item.logout {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .user-menu-toggle {
    color: var(--light);
    border-color: var(--accent);
}

/* ======== 13. CHATBOT ======== */
.dark-mode .chatbot-container {
    background-color: #1E1E2F;
    border-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .chatbot-body {
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.dark-mode .chat-bubble {
    background-color: #2D2D44;
    color: #E5E7EB;
}

.dark-mode .chat-avatar {
    background-color: #2D2D44;
}

.dark-mode .chat-avatar i {
    color: #818CF8;
}

.dark-mode .chat-option {
    background-color: #2D2D44;
    border-color: #3F3F5F;
    color: #E5E7EB;
}

.dark-mode .chat-option:hover {
    background-color: var(--chatbot-primary);
    border-color: var(--chatbot-primary);
    color: var(--text-light);
}

.dark-mode .chatbot-footer {
    background-color: rgba(46, 46, 65, 0.8);
    border-top-color: #3F3F5F;
}

.dark-mode .chat-input {
    background-color: #2D2D44;
    border-color: #3F3F5F;
    color: #E5E7EB;
}

.dark-mode .chat-input:focus {
    border-color: var(--chatbot-primary-light);
}

/* Versión específica para chat-avatar cuando hemos agregado clases nuevas */
.dark-mode .chat-avatar {
    background-color: var(--primary);
}

.dark-mode .chat-avatar i {
    color: var(--text-light);
}

/* ======== AJUSTES ADICIONALES Y CORRECIONES ======== */
/* Estos estilos corrigen elementos específicos que pueden tener problemas de contraste */

/* Etiquetas de terapia combinadas con nuevas definiciones */
.dark-mode .therapy-tag {
    background-color: var(--primary-dark);
    color: var(--text-light);
    font-weight: 500;
}

/* Aseguramos que todos los fondos de sección tienen colores correctos */
.dark-mode .hero,
.dark-mode .appointment,
.dark-mode .services,
.dark-mode .about,
.dark-mode .workshops,
.dark-mode .contact {
    background-color: var(--dark);
}

/* Aseguramos que todos los textos de elementos interactivos tengan contraste */
.dark-mode button,
.dark-mode .btn,
.dark-mode a.btn,
.dark-mode .form-control,
.dark-mode .dropdown-item {
    color: var(--text-light);
}

/* Garantizamos que los iconos de características tengan suficiente contraste */
.dark-mode .feature-icon,
.dark-mode .info-icon,
.dark-mode .contact-icon {
    background-color: var(--primary-light);
    color: var(--background-dark);
}

/* Configuración de fondos alternados */
.dark-mode .hero {
    background-color: var(--dark);
}

.dark-mode .appointment {
    background-color: var(--background-dark);
}

.dark-mode .services {
    background-color: var(--dark);
}

.dark-mode .about {
    background-color: var(--background-dark);
}

.dark-mode .workshops {
    background-color: var(--dark);
}

.dark-mode .contact {
    background-color: var(--background-dark);
}

.dark-mode footer {
    background-color: var(--background-darkest);
}

/* Ajustes para elementos dentro de las secciones */
/* Estos ajustes aseguran que elementos dentro de las secciones tengan el contraste adecuado */

/* Sección de citas */
.dark-mode .appointment .appointment-form {
    background-color: var(--background-medium);
}

.dark-mode .appointment .info-card {
    background-color: var(--background-medium);
}

/* Sección de servicios */
.dark-mode .services .service-card {
    background-color: var(--background-dark);
}

/* Sección de nosotros - imágenes y decoración */
.dark-mode .about .team-decoration {
    border-color: var(--primary);
    background-color: rgba(96, 155, 127, 0.2);
}

/* Tarjetas en sección de talleres */
.dark-mode .workshops .workshop-card {
    background-color: var(--background-medium);
}

.dark-mode .workshops .activities-container {
    background-color: var(--background-medium);
}

.dark-mode .contact .contact-form {
    background-color: var(--background-medium);
}

/* Asegurar que los encabezados de sección tengan contraste adecuado en todas las secciones */
.dark-mode .section-header h2 {
    color: var(--text-light);
}

.dark-mode .section-header p {
    color: var(--text-medium);
}

.dark-mode .area-select-item.selected .terapeuta-info h6 {
    color: var(--text-dark);
}

.dark-mode .area-select-item.selected .terapeuta-info p {
    color: var(--background-dark);
}

/* También ajustamos el color de las etiquetas (therapy-tag) cuando están dentro de un elemento seleccionado */
.dark-mode .area-select-item.selected .therapy-tag {
    background-color: var(--primary);
    color: var(--text-light);
}

/* Aseguramos que los íconos en el encabezado seleccionado tengan el color correcto */
.dark-mode .area-select-item.selected .area-select-icon {
    background-color: var(--text-light);
    color: var(--primary);
}

/* Añadimos una transición suave para todos los elementos que cambian de color */
.dark-mode .area-select-item * {
    transition: color 0.3s ease, background-color 0.3s ease;
}

.dark-mode .therapy-area-card {
    background-color: var(--background-dark);
}

.dark-mode .therapy-area-header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--background-darkest) 100%);
}

.dark-mode .therapy-area-title h3 {
    color: var(--text-light);
}

.dark-mode .therapist-info h4,
.dark-mode .therapist-info p {
    color: var(--text-light);
}

.dark-mode .therapy-area-description {
    color: var(--text-medium);
}

.dark-mode .therapy-feature-image {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.dark-mode .therapy-image-badge {
    background: linear-gradient(135deg, var(--primary) 0%, var(--background-darkest) 100%);
}

.dark-mode .therapy-item {
    background-color: var(--background-medium);
    border-left-color: var(--primary);
}

.dark-mode .therapy-item:hover {
    background-color: var(--primary-dark);
}

.dark-mode .therapy-item-content h4 {
    color: var(--text-light);
}

.dark-mode .therapy-item-content p {
    color: var(--text-medium);
}

.dark-mode .therapy-item:hover .therapy-item-content h4,
.dark-mode .therapy-item:hover .therapy-item-content p {
    color: var(--text-light);
}

.dark-mode .therapy-item-icon {
    background-color: var(--primary);
    color: var(--text-light);
}

.dark-mode .therapy-item:hover .therapy-item-icon {
    background-color: var(--text-light);
    color: var(--primary-dark);
}

.dark-mode .therapy-cta p {
    color: var(--text-medium);
}

.dark-mode {
    --primary-rgb: 94, 172, 138;
}

/* Mejorar la visibilidad en modo oscuro si aplica */
.dark-mode .user-dropdown {
    background-color: var(--background-light);
    border-color: var(--background-darkest);
}

.dark-mode .user-dropdown::before {
    border-bottom-color: var(--background-light);
}