.recta {
    font-family: 'Arial', sans-serif;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    padding: 20px;
    text-align: center;
    border-radius: 20px;
}


/* Contenedor Principal del Juego */
.juego-contenedor {
    max-width: 900px;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 3px 3px 5px #114985;
}

/* Contenedores de Números (Arrastrables y Recta) */
.drag-container, .number-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    min-height: 80px; /* Para que siempre haya espacio */
}

.numeros-arrastrables-contenedor {
    border: 2px dashed #ccc;
    padding: 10px;
    margin-bottom: 20px;
}

/* Estilo de los Números Arrastrables */
.draggable {
    background-color: #ffc107; /* Amarillo para destacar */
    color: #333;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%; /* Círculos */
    cursor: grab;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    touch-action: none; /* Mejor manejo táctil */
    user-select: none;
    transition: transform 0.2s;
}

.draggable:active {
    cursor: grabbing;
    transform: scale(1.1);
    z-index: 1000;
}

/* Estilo de la Recta Numérica (Línea) */
.number-line {
    background-color: #e9ecef; /* Fondo claro para la recta */
    border-top: 5px solid #000; /* La línea central */
    position: relative;
}

/* Estilo de las Zonas de Arrastre (Drop Zones) */
.dropzone {
    width: 50px;
    height: 50px;
    border: 2px solid transparent;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -25px; /* Para centrar la zona sobre la línea */
}

.dropzone:not(.full):hover {
    border-color: #28a745; /* Resaltar al pasar el ratón */
    background-color: rgba(40, 167, 69, 0.1);
}

/* Número dentro de la Zona (cuando está correcto) */
.dropzone.full .draggable {
    background-color: #28a745; /* Verde al acertar */
    color: white;
    box-shadow: none;
    cursor: default;
}

/* Estilos de Feedback */
.feedback-message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    min-height: 40px;
}

.feedback-success {
    background-color: #d4edda;
    color: #155724;
}

/* MEDIA QUERIES para Adaptabilidad Móvil */
@media (max-width: 600px) {
    .recta {
        padding: 10px;
    }

    .juego-contenedor {
        margin: 10px auto;
        padding: 10px;
    }

    /* Reducir el tamaño de los elementos en móvil */
    .draggable {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 0.9em;
    }

    .dropzone {
        width: 40px;
        height: 40px;
        top: -20px;
    }
}