.form-control:focus {
    box-shadow: 0 0 0 0.2rem #0d6efd40;
    border-color: #0d6efd;
    transition: box-shadow 0.3s, border-color 0.3s;
}

/* Fondo y borde para las respuestas */
.card {
background-color: #ffffff; /* Fondo blanco */
border: 1px solid #e0e0e0; /* Borde gris claro */
border-radius: 8px; /* Bordes redondeados */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra ligera */
margin-bottom: 15px; /* Separación entre tarjetas */
}

/* Fondo y estilo para la pregunta */
.card-body {
background-color: #f1f8ff; /* Fondo azul claro */
border-bottom: 2px solid #007bff; /* Borde inferior azul */
padding: 15px; /* Espaciado interno */
}

/* Estilo para el texto de la pregunta */
.card-body p.card-text {
font-size: 1.3rem; /* Tamaño de fuente más grande */
font-weight: bold; /* Negrita */
color: #333; /* Color oscuro */
}

/* Fondo y borde para las respuestas */
.respuestas {
background-color: #f8f9fa; /* Fondo gris claro */
border: 1px solid #dee2e6; /* Borde gris */
border-radius: 5px; /* Bordes redondeados */
padding: 10px; /* Espaciado interno */
margin-top: 10px; /* Separación con la pregunta */
}

/* Estilo para cada respuesta */
.respuestas .list-group-item {
border: none; /* Sin bordes entre respuestas */
padding: 8px 10px; /* Espaciado interno */
}

/* Resaltar la respuesta correcta */
.respuestas .list-group-item .badge {
font-size: 0.8rem; /* Tamaño más pequeño */
margin-left: 5px; /* Separación con el texto */
}

/* Encabezado para las respuestas */
.respuestas-header {
font-size: 1rem; /* Tamaño de fuente */
font-weight: bold; /* Negrita */
color: #007bff; /* Azul */
margin-bottom: 10px; /* Separación con las respuestas */
}

.justificacion {
display: block; /* Cambiar de none a block */
margin-top: 10px;
font-size: 0.9rem;
color: #555;
}

.list-group-item.correcta {
background-color: #d4edda; /* Verde claro */
border: 1px solid #c3e6cb; /* Borde verde */
color: #155724; /* Texto verde oscuro */
}

/* Fondo para respuestas correctas (verde más claro) */
.list-group-item.correcta {
background-color: #eafaf1; /* Verde muy claro */
border: 1px solid #c3e6cb; /* Borde verde */
color: #155724; /* Texto verde oscuro */
}

/* Fondo para respuestas incorrectas (rojo más claro) */
.list-group-item.incorrecta {
background-color: #fdecea; /* Rojo muy claro */
border: 1px solid #f5c6cb; /* Borde rojo */
color: #721c24; /* Texto rojo oscuro */
}

/* Botón para abrir la justificación (verde) */
.btn-justificacion {
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
font-size: 0.9rem;
color: #fff;
background-color: #28a745; /* Verde */
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
}

.btn-justificacion:hover {
background-color: #218838; /* Verde más oscuro */
}
.paginacion {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px; /* Espacio entre la paginación y los resultados */
}

.paginacion .pagina {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ccc;
background-color: #f8f9fa; /* Color de fondo similar al de Bootstrap */
color: #007bff; /* Color de texto */
cursor: pointer;
border-radius: 5px; /* Bordes redondeados */
transition: background-color 0.3s ease;
}

.paginacion .pagina:hover {
background-color: #007bff; /* Fondo azul al pasar el ratón */
color: #fff; /* Texto blanco */
}

.paginacion .pagina.activa {
background-color: #007bff; /* Fondo azul para la página activa */
color: #fff; /* Texto blanco */
font-weight: bold;
border-color: #007bff;
}

/* Fondo verde claro para preguntas respondidas */
.respondida {
    background-color: #e6ffe6; /* Verde claro */
    border-left: 5px solid #28a745; /* Línea verde en el borde izquierdo */
}

/* Badge para el texto "Respondida" */
.badge {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
}

.bg-success {
    background-color: #28a745 !important; /* Verde */
    color: #fff !important;
}

.bg-danger {
    background-color: #dc3545 !important; /* Rojo */
    color: #fff !important;
}

#showAllAnsweredButton {
    background-color: #fff; /* Fondo blanco */
    border: 2px solid #aaa; /* Borde gris */
    color: #333; /* Texto gris oscuro */
    border-radius: 20px; /* Bordes redondeados */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 1rem; /* Tamaño de fuente */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}

#showAllAnsweredButton:hover {
    background-color: #f0f0f0; /* Fondo gris claro al pasar el mouse */
    color: #000; /* Texto negro al pasar el mouse */
}