/* Corrección de colores para tema claro/oscuro */

/* Asegurar que todos los elementos tengan el color de texto correcto */
.card, .card-bg, .card-hover,
.diagrama-card, .puerta-card, .contador-card, .mux-card, .circuito-card,
.panel-lateral, .canvas-container, .osciloscopio, .calculadora,
.mapa-area, .resultado, .pasos, .estado-display {
    color: var(--text-primary) !important;
}

/* Asegurar que los textos dentro de las tarjetas sean visibles */
.diagrama-card *, .puerta-card *, .contador-card *, .mux-card *, .circuito-card *,
.panel-lateral *, .canvas-container *, .osciloscopio *, .calculadora *,
.mapa-area *, .resultado *, .pasos *, .estado-display * {
    color: inherit;
}

/* Excepciones para elementos que deben mantener colores específicos */
.diagrama-card h4, .puerta-card h4, .contador-card h4, .mux-card h4, .circuito-card h4 {
    color: var(--accent-primary) !important;
}

.diagrama-card p, .puerta-card p, .contador-card p, .mux-card p, .circuito-card p {
    color: var(--text-secondary) !important;
}

/* Asegurar que los botones mantengan sus colores */
.btn {
    color: white !important;
}

/* Asegurar que las tablas sean legibles */
.tabla-verdad, .tabla-estados {
    color: var(--text-primary) !important;
}

.tabla-verdad th, .tabla-estados th {
    color: white !important;
}

.tabla-verdad td, .tabla-estados td {
    color: var(--text-primary) !important;
}

/* Asegurar que los formularios sean legibles */
input, select, textarea {
    color: var(--text-primary) !important;
    background: var(--card-hover) !important;
    border: 1px solid var(--border-color) !important;
}

/* Corrección específica para desplegables */
select {
    color: var(--text-primary) !important;
    background: var(--card-hover) !important;
    border: 1px solid var(--border-color) !important;
}

select option {
    color: var(--text-primary) !important;
    background: var(--card-bg) !important;
}

/* Asegurar que los displays sean legibles */
.display, .estado-valor, .expresion-simplificada {
    color: var(--text-primary) !important;
}

/* Asegurar que los pasos sean legibles */
.paso {
    color: var(--text-primary) !important;
}

/* Asegurar que los controles sean legibles */
.control-grupo label {
    color: var(--text-secondary) !important;
}

/* Asegurar que los breadcrumbs sean legibles */
.breadcrumb {
    color: var(--text-secondary) !important;
}

.breadcrumb a {
    color: var(--accent-primary) !important;
}

/* Asegurar que los headers sean legibles */
.header h1 {
    color: var(--accent-primary) !important;
}

.header .subtitle {
    color: var(--text-secondary) !important;
}

/* Asegurar que los iconos de tema sean visibles */
.theme-toggle {
    color: var(--text-primary) !important;
}

/* Asegurar que los info-badge sean legibles */
.info-badge {
    color: white !important;
}

/* Asegurar que los footers sean legibles */
.footer {
    color: var(--text-secondary) !important;
}

/* Corrección específica para mapa de Karnaugh */
.mapa-karnaugh {
    background: var(--bg-tertiary) !important;
    border: 2px solid var(--border-color) !important;
}

.celda {
    color: var(--text-primary) !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.celda:hover {
    background: var(--accent-primary) !important;
    color: white !important;
}

.celda.seleccionada {
    background: var(--accent-warning) !important;
    color: white !important;
}

.celda.grupo {
    background: var(--accent-secondary) !important;
    color: white !important;
}

/* Corrección para controles del mapa de Karnaugh */
.control-grupo input, .control-grupo select {
    color: var(--text-primary) !important;
    background: var(--card-hover) !important;
    border: 1px solid var(--border-color) !important;
}

.control-grupo input:focus, .control-grupo select:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
}

/* Corrección específica para selects del mapa de Karnaugh */
#num-variables, #modo {
    background: var(--card-hover) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

#num-variables option, #modo option {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Estilos más agresivos para forzar colores */
#num-variables, #modo {
    background-color: var(--card-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

#num-variables option, #modo option {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Forzar estilos en el dropdown abierto */
#num-variables:focus, #modo:focus {
    background-color: var(--card-hover) !important;
    color: var(--text-primary) !important;
}

/* Estilos para opciones específicas */
#num-variables option:hover, #modo option:hover {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

#num-variables option:checked, #modo option:checked {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

/* Forzar estilos en todos los selects */
select {
    background: var(--card-hover) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

select option {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Corrección adicional para navegadores que no respetan option styles */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 30px;
}

/* Flecha para tema oscuro */
body:not([data-theme="light"]) select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Flecha para tema claro */
body[data-theme="light"] select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Colores específicos para tema oscuro */
body:not([data-theme="light"]) #num-variables,
body:not([data-theme="light"]) #modo {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body:not([data-theme="light"]) #num-variables option,
body:not([data-theme="light"]) #modo option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Colores específicos para tema claro */
body[data-theme="light"] #num-variables,
body[data-theme="light"] #modo {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

body[data-theme="light"] #num-variables option,
body[data-theme="light"] #modo option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}