/* ========================================
   SOLUCIÓN PARA VISIBILIDAD DE ICONOS
   ======================================== */

/* Asegurar que los iconos sean visibles en ambos modos */
.material-symbols-outlined {
    /* Configuración base para todos los iconos */
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* ========================================
   ICONOS EN CÍRCULOS DE COLORES
   ======================================== */

/* Iconos en círculos naranjas - siempre visibles */
.bg-orange .material-symbols-outlined,
.bg-orange-500 .material-symbols-outlined,
.bg-orange-600 .material-symbols-outlined {
    color: #ffffff !important; /* Blanco para contraste */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Iconos en círculos de colores primarios - adaptativos */
.bg-primary .material-symbols-outlined,
.bg-secondary .material-symbols-outlined,
.bg-accent .material-symbols-outlined {
    color: var(--text) !important; /* Color adaptativo según el tema */
}

/* ========================================
   ICONOS DE NAVEGACIÓN Y CONTROLES
   ======================================== */

/* Iconos del header - siempre visibles */
header .material-symbols-outlined,
nav .material-symbols-outlined {
    color: var(--text) !important;
}

/* Iconos de botones - adaptativos */
.btn .material-symbols-outlined,
button .material-symbols-outlined {
    color: inherit !important;
}

/* ========================================
   ICONOS DE SERVICIOS
   ======================================== */

/* Iconos principales de servicios en círculos */
.service-icon .material-symbols-outlined,
.bg-orange .material-symbols-outlined {
    color: #ffffff !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* Iconos de check en listas de servicios */
.service-list .material-symbols-outlined,
li .material-symbols-outlined {
    color: var(--orange) !important; /* Naranja para destacar */
}

/* ========================================
   ICONOS DE REDES SOCIALES
   ======================================== */

/* Iconos de redes sociales - adaptativos */
.social-icon .material-symbols-outlined,
[class*="social"] .material-symbols-outlined {
    color: var(--text) !important;
    transition: color 0.3s ease;
}

.social-icon:hover .material-symbols-outlined,
[class*="social"]:hover .material-symbols-outlined {
    color: var(--orange) !important;
}

/* ========================================
   ICONOS DE INFORMACIÓN
   ======================================== */

/* Iconos de contacto e información */
.contact-icon .material-symbols-outlined,
.info-icon .material-symbols-outlined {
    color: var(--text) !important;
}

/* ========================================
   MODOS DE TEMA ESPECÍFICOS
   ======================================== */

/* Modo claro - asegurar contraste */
.light .material-symbols-outlined {
    color: var(--text-light) !important;
}

.light .bg-orange .material-symbols-outlined,
.light .bg-orange-500 .material-symbols-outlined {
    color: #ffffff !important;
}

/* Modo oscuro - mantener visibilidad */
.dark .material-symbols-outlined {
    color: var(--text-dark) !important;
}

.dark .bg-orange .material-symbols-outlined,
.dark .bg-orange-500 .material-symbols-outlined {
    color: #ffffff !important;
}

/* ========================================
   ESTADOS ESPECIALES
   ======================================== */

/* Iconos deshabilitados */
.material-symbols-outlined:disabled,
.material-symbols-outlined.disabled {
    opacity: 0.5;
    color: var(--text) !important;
}

/* Iconos con hover */
.material-symbols-outlined:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* ========================================
   RESPONSIVE Y ACCESIBILIDAD
   ======================================== */

/* Asegurar visibilidad en dispositivos móviles */
@media (max-width: 768px) {
    .material-symbols-outlined {
        font-size: 1.2em;
    }
    
    .bg-orange .material-symbols-outlined,
    .bg-orange-500 .material-symbols-outlined {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    }
}

/* Alto contraste para accesibilidad */
@media (prefers-contrast: high) {
    .material-symbols-outlined {
        filter: contrast(1.5);
    }
    
    .bg-orange .material-symbols-outlined,
    .bg-orange-500 .material-symbols-outlined {
        filter: contrast(1.5) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    }
}

/* ========================================
   UTILIDADES ADICIONALES
   ======================================== */

/* Clases de utilidad para iconos */
.icon-primary { color: var(--primary) !important; }
.icon-secondary { color: var(--secondary) !important; }
.icon-accent { color: var(--accent) !important; }
.icon-orange { color: var(--orange) !important; }
.icon-white { color: #ffffff !important; }
.icon-dark { color: var(--dark) !important; }

/* Iconos con fondo */
.icon-bg-orange {
    background-color: var(--orange);
    color: #ffffff !important;
    padding: 8px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   SOLUCIÓN ESPECÍFICA PARA EL PROBLEMA
   ======================================== */

/* Forzar visibilidad de iconos en modo claro */
.light .bg-orange .material-symbols-outlined,
.light .bg-orange-500 .material-symbols-outlined,
.light .bg-orange-600 .material-symbols-outlined {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Asegurar que los iconos de check sean visibles */
.light .text-orange .material-symbols-outlined,
.dark .text-orange .material-symbols-outlined {
    color: var(--orange) !important;
    filter: brightness(1.2);
}

/* Iconos en botones siempre visibles */
.light .bg-orange .material-symbols-outlined,
.dark .bg-orange .material-symbols-outlined {
    color: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}