/* ==========================================
   TRIVIAS — card en Noticias + modal de juego
   Coherente con el estilo de .noticia-card / .modal-overlay de style.css
   ========================================== */

/* ── Card en la grilla de Noticias ── */
.trivia-card {
    cursor: pointer;
    border-color: #fc38b6 !important;
}
.trivia-card:hover {
    box-shadow: 6px 6px 0px #fc38b6 !important;
}
.trivia-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fc38b6, #772ce8) !important;
    position: relative;
    overflow: hidden;
}
.trivia-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.trivia-badge-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,.55);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .85rem;
}
.trivia-badge {
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 rgba(0,0,0,.25);
}

/* ── Modal de la trivia (reutiliza .modal-overlay / .modal-content) ── */
#modal-trivia .modal-content {
    max-width: 640px;
    width: 92%;
    padding: 0 !important;
    background: #fff;
    border: 3px solid #000 !important;
    border-radius: 8px;
    max-height: 88vh;
    overflow-y: auto;
}
.trivia-modal-topbar {
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}
.trivia-btn-compartir {
    background: transparent;
    border: 2px solid #772ce8;
    color: #772ce8;
    border-radius: 20px;
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: .75rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 6px 14px;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.trivia-btn-compartir:hover { background: #772ce8; color: #fff; }
.trivia-close-btn {
    font-size: 32px;
    font-weight: bold;
    color: #ff0080;
    cursor: pointer;
    line-height: 1;
    text-shadow: 2px 2px 0 #000;
}
#trivia-modal-cuerpo {
    padding: 24px 26px 30px;
}

.trivia-estado-pantalla {
    text-align: center;
    padding: 20px 4px;
}
.trivia-estado-pantalla h2 {
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #772ce8;
    margin-bottom: 10px;
}
.trivia-login-aviso {
    color: #555;
    margin: 14px 0;
}
.trivia-btn-login {
    background: #9147ff;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: 1px;
    padding: 12px 30px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background .2s, transform .1s;
}
.trivia-btn-login:hover { background: #772ce8; transform: scale(1.03); }

/* ── Formulario de preguntas ── */
.trivia-titulo {
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 6px;
}
.trivia-bajada {
    color: #555;
    margin: 0 0 14px;
}
.trivia-aviso-unica-vez {
    background: #fff4d6;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 18px;
}
.trivia-pregunta {
    border: 2px solid #000;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.trivia-pregunta-num {
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: .7rem;
    letter-spacing: 1px;
    color: #ff8c00;
    margin-bottom: 6px;
}
.trivia-pregunta-texto {
    font-weight: 700;
    margin-bottom: 10px;
}
.trivia-opciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.trivia-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid #ccc;
    border-radius: 6px;
    padding: 9px 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.trivia-opcion:hover { border-color: #772ce8; }
.trivia-opcion.seleccionada {
    border-color: #fc38b6;
    background: #fff0f8;
}
.trivia-opcion input[type="radio"] { accent-color: #fc38b6; width: 16px; height: 16px; flex-shrink: 0; }

.trivia-msg {
    min-height: 18px;
    font-size: .85rem;
    color: #ff0080;
    font-weight: 700;
    margin: 8px 0;
}

.trivia-btn-enviar {
    display: block;
    width: 100%;
    background: #fc38b6;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 1px;
    padding: 14px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background .2s, transform .1s;
    margin-top: 6px;
}
.trivia-btn-enviar:hover { background: #772ce8; transform: scale(1.01); }

.trivia-btn-secundario {
    display: inline-block;
    background: transparent;
    color: #772ce8;
    border: 2px solid #772ce8;
    border-radius: 30px;
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: .85rem;
    letter-spacing: 1px;
    padding: 10px 24px;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s;
    margin-top: 10px;
}
.trivia-btn-secundario:hover { background: #772ce8; color: #fff; }

/* ── Resultado + recompensas ── */
.trivia-resultado-msg {
    font-weight: 700;
    margin-bottom: 14px;
}
.trivia-elegir-aviso {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .5px;
    color: #555;
    margin-bottom: 10px;
}
.trivia-recompensas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.trivia-recompensa-opcion {
    border: 2px solid #000;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    text-align: center;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    background: #fff;
}
.trivia-recompensa-opcion:hover { transform: translateY(-3px); }
.trivia-recompensa-opcion.seleccionada {
    border-color: #fc38b6;
    box-shadow: 4px 4px 0px #fc38b6;
}
.trivia-recompensa-opcion img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 6px;
}
.trivia-recompensa-opcion span {
    display: block;
    font-weight: 700;
    font-size: .8rem;
}

.trivia-recompensa-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 10px auto 16px;
}
.trivia-recompensa-final img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    background: #f5f5f5;
    border: 2px solid #000;
    border-radius: 10px;
}
.trivia-recompensa-final span {
    font-family: 'Barlow', 'Arial Black', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

.trivia-aviso-reclamo {
    background: #ffe1e1;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: .85rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.trivia-reclamado-aviso {
    color: #1a8a3c;
    font-weight: 700;
    margin: 10px 0;
}

/* ── Imagen para Instagram ── */
.trivia-ig-generando {
    color: #555;
    text-align: center;
    margin-top: 14px;
}
#trivia-ig-preview {
    text-align: center;
    margin-top: 16px;
}
.trivia-ig-img {
    width: 100%;
    max-width: 340px;
    border: 3px solid #000;
    border-radius: 10px;
    margin-bottom: 12px;
}
.trivia-btn-descargar {
    background: #772ce8;
    color: #fff !important;
    border-color: #772ce8;
}
.trivia-btn-descargar:hover { background: #fc38b6; border-color: #fc38b6; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .trivia-recompensas-grid { grid-template-columns: repeat(2, 1fr); }
    #trivia-modal-cuerpo { padding: 18px 16px 24px; }
}