/* Estilos base */
body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 20px; margin: 0; }
h1 { color: #2c3e50; border-bottom: 2px solid #2c3e50; padding-bottom: 10px; }

/* Caja de Explicación Azul Corporativa */
.ejercicio { background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.explicacion { 
    background-color: #ebf8ff; 
    padding: 10px 15px; 
    border-left: 4px solid #3182ce; 
    margin-bottom: 20px; 
    border-radius: 0 4px 4px 0; 
    color: #2b6cb0; 
}

/* Tabla y celdas */
table { border-collapse: collapse; margin-bottom: 20px; }
td { border: 1px solid #cbd5e0; padding: 10px; width: 200px; background-color: #edf2f7; transition: background-color 0.3s; }
.celda-hover { background-color: #cbd5e0 !important; }

/* Controles */
.bloque-control { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.contenedor-controles { display: flex; flex-direction: column; gap: 10px; }
.fila-control { display: flex; align-items: center; gap: 10px; }
.fila-control label { width: 60px; font-weight: bold; color: #2c3e50; }
.fila-control input[type="text"] { flex: 1; padding: 8px; border: 1px solid #cbd5e0; border-radius: 4px; }

/* Botones */
.btn-interactivo { padding: 8px 15px; background-color: #3182ce; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-interactivo:hover { background-color: #2b6cb0; }
.btn-color-simulado { 
    display: inline-block; 
    padding: 8px 15px; 
    background-color: #3182ce; 
    color: white; 
    cursor: pointer; 
    border-radius: 4px; 
    border: 2px solid #2b6cb0;
    transition: 0.3s;
}
.btn-color-simulado:hover { filter: brightness(1.1); }

.celda-seleccionada {
    outline: 3px solid #3182ce; /* Borde azul para marcarla */
    outline-offset: -3px;
    font-weight: bold;
}

#textoSelector, #fondoSelector{
    display: none;
}