/*
   Selector de pronóstico 1/X/2 (con dobles/triples) y listado de apuestas,
   compartido entre mis_apuestas.php y admin_apuestas.php. Antes cada
   página tenía su propio <style> inline con gradiente morado #667eea de
   antes del rediseño — ahora usa la misma paleta verde/ámbar/rojo que
   .signo-badge (signo-styles.css), para que elegir un pronóstico se vea
   de la misma familia que el resultado ya pintado en el resto del sitio.
*/

.pronosticos-section {
    margin-top: 2rem;
}

.partidos-pronostico-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.partido-pronostico {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.85rem;
    padding: 1rem;
}

.partido-pronostico.pleno-15 {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.35);
}

.partido-header {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

.partido-numero {
    background: var(--text-primary);
    color: var(--card-bg);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    min-width: 34px;
    text-align: center;
    flex-shrink: 0;
}

.partido-equipos {
    flex: 1;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.partido-equipos .equipo {
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partido-equipos .vs {
    color: var(--text-secondary);
    font-size: 0.85em;
    flex-shrink: 0;
}

/* Estrella "cuenta para el Elige 8" en cada partido: oculta hasta que se
   activa el interruptor "Jugar Elige 8" (clase .e8-activo en el
   contenedor), ver mis_apuestas.js. */
.e8-badge {
    display: none;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1.5px solid var(--glass-border);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.15s ease;
}

.partidos-pronostico-container.e8-activo .e8-badge {
    display: flex;
}

.e8-badge:hover {
    border-color: #e6c200;
    color: #e6c200;
}

.e8-badge.e8-selected {
    background: linear-gradient(135deg, #ffd700, #e6c200);
    border-color: transparent;
    color: #3a2f00;
    box-shadow: 0 2px 8px rgba(230, 194, 0, 0.4);
}

.e8-badge:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pp-pleno-hint {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

.pronostico-opciones {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.btn-pronostico {
    background: var(--card-bg);
    border: 1.5px solid var(--glass-border);
    color: var(--text-primary);
    padding: 0.7rem 1.4rem;
    border-radius: 0.6rem;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 56px;
}

.btn-pronostico:hover {
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

/* Seleccionado: mismo azul/ámbar/violeta que .signo-badge para 1/X/2 (el
   valor llega tal cual en data-opcion), dorado para el Pleno 15. */
.btn-pronostico.selected {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.btn-pronostico[data-opcion="1"].selected {
    background: var(--signo-1);
}

.btn-pronostico[data-opcion="X"].selected {
    background: var(--signo-x);
}

.btn-pronostico[data-opcion="2"].selected {
    background: var(--signo-2);
}

.partido-pronostico.pleno-15 .btn-pronostico {
    padding: 0.5rem;
    font-size: 0.85rem;
    min-width: auto;
}

.partido-pronostico.pleno-15 .btn-pronostico.selected {
    background: linear-gradient(135deg, #ffd700, #e6c200);
    color: #3a2f00;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: center;
}

.help-text {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 1rem;
}

/* ---------- Tabla de apuestas (listado admin) ---------- */
.apuestas-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.apuestas-table th,
.apuestas-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

.apuestas-table th {
    background: rgba(0, 0, 0, 0.03);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.btn-icon {
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.btn-icon:hover {
    color: var(--color-primary-dark);
}

.btn-icon.btn-danger {
    color: #c1272d;
}

.btn-icon.btn-danger:hover {
    color: #a01f24;
}