/* ============================
   CONTENEDOR PRINCIPAL DEL MODAL
   ============================ */
.modal-vueltas {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 99999;
}

/* ============================
   CAPA OSCURA
   ============================ */
.modal-vueltas-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

/* ============================
   CONTENIDO DEL MODAL
   ============================ */
.modal-vueltas-contenido {
    position: relative;
    z-index: 1;
    width: 96%;
    height: 90dvh;
    margin: 5vh auto;
    background: #fff;
    padding: 30px 30px 25px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    box-sizing: border-box;
    max-width: 700px;
}

/* ============================
   AJUSTE DE ANCHO EN SOBREMESA
   ============================ */
@media (min-width: 1024px) {
    .modal-vueltas-contenido {
        max-width: 650px;
    }
}

/* ============================
   CABECERA DEL MODAL
   ============================ */
.modal-vueltas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.modal-vueltas-titulo {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* ============================
   BOTÓN CERRAR
   ============================ */
.modal-vueltas-cerrar {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #444;
}

/* ============================
   SEPARADOR
   ============================ */
.modal-vueltas-separador {
    border: none;
    border-top: 1px solid #eee;
    margin: 0 0 20px 0;
}

/* ============================
   CONTENEDOR DE TARJETA
   ============================ */
#modal-vueltas-tarjeta {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}

/* ============================
   TARJETA DENTRO DEL MODAL
   ============================ */
.flashcards-modal .flashcard-item {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ============================
   VOLTEO (MISMA LÓGICA QUE REPASO)
   ============================ */
.flashcards-modal .flashcard-front,
.flashcards-modal .flashcard-back {
    display: none;
}

.flashcards-modal .flashcard-item:not(.mostrando-respuesta) .flashcard-front {
    display: block;
}

.flashcards-modal .flashcard-item.mostrando-respuesta .flashcard-back {
    display: block;
}

/* ============================
   BOTONES DE VALORACIÓN
   ============================ */
.flashcards-modal .flashcard-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.flashcards-modal .flashcard-buttons button {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
}

.flashcards-modal .flashcard-buttons button[data-score="5"] {
    background: #4CAF50;
    color: white;
}

.flashcards-modal .flashcard-buttons button[data-score="3"] {
    background: #FFC107;
    color: #333;
}

.flashcards-modal .flashcard-buttons button[data-score="1"] {
    background: #F44336;
    color: white;
}

/* ============================================
   BOTÓN DE TRANSICIÓN ENTRE VUELTAS (modal)
   ============================================ */
.btn-aceptar-vueltas {
    display: inline-block;
    margin: 1.2em auto 0 auto;   /* ← centrado horizontal */
    padding: 0.6em 1.2em;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #0073aa;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
}

.btn-aceptar-vueltas:hover {
    background-color: #005f8d;
}

/* Asegura que el contenedor del mensaje permita centrar el botón */
#modal-vueltas-tarjeta {
    text-align: center;
}

/* ============================================
   OCULAR EL BLOGQUE DEL BOTÓN DE REFORZAR TARJETAS AL ABRIR EL MODAL
   ============================================ */

.oculto {
    display: none !important;
}


/* ============================================
   CONTADOR Y BARRA DE PROGRESO EN EL MODAL (RESTO USA APARIENCIA DEL CSS PRINCIPAL)
   ============================================ */

/* Ajustes específicos para el modal */
.modal-vueltas .flashcard-progreso {
  margin: 12px auto 6px auto; /* centrado y con aire */
}

.modal-vueltas .flashcard-contador {
  margin-bottom: 16px; /* un poco más de aire en el modal */
}