/* Estilos base (heredados de tu tema, pero reforzados) */
.quiz-contexto-app {
    max-width: 800px;
    margin: 40px auto;

    .fa-paw {
        color: var(--color-morado-oscuro);
    }
}

#btn-comenzar,
.btn-grande-accion {
    background-image: linear-gradient(
        60deg, var(--color-teal) 0%,
        var(--color-principal-claro) 20%,
        var(--color-amarillo) 50%, var(--color-miel) 60%,
        var(--color-frambuesa) 85%, var(--color-morado) 100%) !important;
}

.tarjeta-maestra {
    background: white;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

/* --- Configuración --- */
.config-seccion { margin-bottom: 30px; }
.config-seccion label { display: block; font-weight: bold; margin-bottom: 10px; color: #555; }

.opciones-pildora { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-pildora {
    background: #f4f4f4; border: 2px solid transparent; padding: 10px 20px;
    border-radius: 50px; cursor: pointer; font-weight: 600; color: #666;
    transition: 0.3s;
}
.btn-pildora.active {
    background: white;
    border-color: var(--color-accent, var(--color-principal));
    color: var(--color-accent, var(--color-principal-hover));
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-grande-accion {
    width: 100%; padding: 18px; font-size: 1.2rem; border-radius: 15px;
    background: var(--color-azul-mas-oscuro); color: white; border: none; cursor: pointer;
    font-weight: bold; transition: transform 0.2s;
}
.btn-grande-accion:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* --- Juego --- */
.barra-progreso-container { margin-bottom: 30px; }
.info-progreso { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.9rem; color: #888; }
.barra-track { height: 10px; background: #eee; border-radius: 10px; overflow: hidden; }
.barra-fill {
    height: 100%; width: 0%;
    background-image: linear-gradient(60deg, var(--color-teal) 0%, var(--color-principal-claro) 15%, var(--color-amarillo) 50%, var(--color-miel) 60%, var(--color-frambuesa) 85%, var(--color-morado) 100%);
    background-size: 720px 100%;
    background-repeat: no-repeat;
    transition: width 0.5s ease;
}

.frase-estilo {
    font-size: 1.6rem; line-height: 1.5; color: #333; margin-bottom: 20px;
    text-align: center; font-weight: 500;
}
.hueco-activo {
    padding: 0 10px; font-weight: bold; display: inline-block; min-width: 50px; text-align: center;
    color: transparent;
    border-bottom: 2px solid var(--color-morado-oscuro);
    height: 1.2em;
}

/* --- Pistas Robot --- */
.btn-pista-toggle {
    background: none; border: 1px solid #ddd; padding: 5px 15px; border-radius: 20px;
    color: #777; cursor: pointer; font-size: 0.85rem;
}
.btn-pista-toggle:hover { background: #f9f9f9; color: var(--color-morado-oscuro); }

.caja-pistas-robot {
    display: none; background: var(--color-morado-claro); padding: 15px; border-radius: 15px;
    border-left: 4px solid var(--color-morado); margin-top: 15px; font-size: 0.95rem; text-align: left;
}
.pista-item { margin-bottom: 8px; }
.pista-palabra { font-weight: bold; color: var(--color-morado-oscuro); }

/* --- Opciones Grid --- */
.grid-opciones {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 30px;
}
@media(max-width: 600px) { .grid-opciones { grid-template-columns: 1fr; } }

.btn-opcion {
    padding: 20px; background: white; border: 2px solid #eee; border-radius: 15px;
    font-size: 1.1rem; cursor: pointer; transition: 0.2s; color: #444; font-weight: 500;
}
.btn-opcion:hover { border-color: var(--color-verde-medio); background: var(--color-verde-sutil); }

.btn-opcion.correcto {     background: var(--color-principal-clarito);
border-color: var(--color-principal-claro); color: #155724; }
.btn-opcion.incorrecto {
    background: var(--color-rosa-claro);
    border-color: var(--color-rosa);
    color: #721c24; opacity: 0.6;
}

/* --- Feedback --- */
.feedback-area {
    margin-top: 25px; padding: 20px; background: #fffdf0; border-radius: 15px;
    border: 2px solid var(--color-amarillo); animation: fadeIn 0.3s;
}
.btn-siguiente {
    margin-top: 4px;
    background-image: linear-gradient(70deg, var(--color-teal) 0%, var(--color-amarillo) 100%);
    color: white; border: none;
    padding: 10px 25px; border-radius: 50px; cursor: pointer; font-weight: bold; float: right;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.resultado-icono { font-size: 4rem; margin-bottom: 10px; }

.verbo-link {
    color: #444; /* Color oscuro discreto */
    text-decoration: none;
    border-bottom: 2px dotted #ccc; /* Subrayado sutil */
    transition: all 0.2s;
    font-weight: bold;
}

.verbo-link:hover {
    color: var(--color-principal); /* Se pone verde al pasar el mouse */
    /* border-bottom-color: var(--color-principal); */
    background: var(--color-verde-sutil); /* Fondo muy suave */
    text-decoration: none;
    /* border-radius: 4px; */
    /* padding: 0 4px; */
    /* margin: 0 -4px; Compensar el padding */
}