/*
   Seguimiento en vivo de apuestas ("Mis Apuestas" / apuestas públicas).
   Prefijo .sg- para no chocar con las clases .q- de la tabla de jornada
   (quiniela_table.css) ni con los estilos propios de mis_apuestas.php.
   Misma paleta que el resto del rediseño: verde/ámbar/rojo para acierto/
   empate/fallo, rosa #ff2e7e para "en directo", dorado para el Pleno 15.
*/

/* ---------- Interruptor "Hacer pública" ---------- */
.sg-privacy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.85rem;
    padding: 0.85rem 1rem;
    margin: 1rem 0;
}

.sg-privacy-copy {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sg-privacy-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(230, 154, 6, 0.12);
    color: #e69a06;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.sg-privacy-title {
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.sg-privacy-sub {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 1px;
}

.sg-switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.sg-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sg-switch-track {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    transition: background 0.15s;
    cursor: pointer;
}

.sg-switch-track::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sg-switch input:checked+.sg-switch-track {
    background: #1f9d55;
}

.sg-switch input:checked+.sg-switch-track::before {
    transform: translateX(18px);
}

/* ---------- Selector de apuestas (chips) ---------- */
.sg-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0.75rem 0;
}

.sg-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 1.5px solid var(--glass-border);
    border-radius: 999px;
    padding: 7px 8px 7px 12px;
    cursor: pointer;
}

.sg-chip.active {
    border-color: var(--chip-bg);
    background: var(--chip-bg);
    color: var(--chip-text);
}

.sg-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sg-chip-score {
    font-size: 0.68rem;
    font-weight: 900;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 2px 7px;
}

.sg-chip.active .sg-chip-score {
    background: rgba(128, 128, 128, 0.3);
    color: inherit;
}

/* ---------- Tarjeta de apuesta ---------- */
.sg-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.sg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 8px;
    flex-wrap: wrap;
}

.sg-owner {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sg-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #b8860b;
    color: #fff;
    font-weight: 900;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sg-name {
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.sg-meta {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-top: 1px;
}

.sg-meta-line {
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-top: 2px;
}

.sg-meta-line strong {
    color: var(--text-primary);
    font-weight: 900;
}

.sg-e8-line {
    color: #8a6d00;
}

.sg-public-badge {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 2px 8px;
    flex-shrink: 0;
}

.sg-e8-badge {
    color: #8a6d00;
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(230, 194, 0, 0.4);
}

.sg-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
}

.sg-score .num {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text-primary);
}

.sg-score .of {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ---------- Fila de 15 puntos ---------- */
.sg-dots {
    display: flex;
    gap: 5px;
    padding: 4px 14px 13px;
    cursor: pointer;
}

.sg-dot-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
}

.sg-dot {
    width: 100%;
    max-width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
    box-sizing: border-box;
}

.sg-dot.pleno {
    border-radius: 6px;
}

.sg-dot.hit {
    background: #1f9d55;
}

.sg-dot.miss {
    background: #c1272d;
}

.sg-dot.aplazado {
    background: rgba(0, 0, 0, 0.06);
    border: 1.5px dashed rgba(0, 0, 0, 0.2);
}

/* En directo: el color de fondo indica el resultado provisional (o gris si
   ni siquiera hay marcador aún), el anillo rosa avisa de que puede cambiar. */
.sg-dot.live {
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3.5px #ff2e7e;
}

.sg-dot.live::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px dashed #ff2e7e;
    animation: sg-spin 6s linear infinite;
}

@keyframes sg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Reparto acabados / en juego (una sola línea) ---------- */
.sg-breakdown {
    padding: 0 14px 8px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.sg-breakdown strong {
    color: var(--text-primary);
    font-weight: 900;
}

.sg-e8-star-slot {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
}

.sg-e8-star {
    color: #e6c200;
    font-size: 0.6rem;
}

.sg-e8-row {
    background: rgba(255, 215, 0, 0.06);
}

/* ---------- Desglose de combinaciones (apuestas múltiples) ----------
   Puramente informativo: cuántas de las N combinaciones posibles llevan
   cada número de aciertos ahora mismo. Sin barras de color: no es un
   acierto/fallo, es solo cuánto dinero apostado sigue teniendo opciones. */
.sg-combo {
    padding: 0 14px 10px;
}

.sg-combo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.72rem;
}

.sg-combo-label {
    font-weight: 700;
    color: var(--text-primary);
}

.sg-combo-count {
    font-weight: 800;
    color: var(--text-secondary);
}

/* ---------- Detalle desplegable partido a partido ---------- */
.sg-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.22s ease, opacity 0.18s ease;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid transparent;
}

.sg-card.sg-open .sg-detail {
    max-height: 900px;
    opacity: 1;
    border-top-color: var(--glass-border);
}

.sg-detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.78rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.sg-detail-row:last-child {
    border-bottom: none;
}

.sg-detail-pos {
    width: 18px;
    font-weight: 800;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.sg-detail-teams {
    flex: 1;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-detail-info {
    font-size: 0.68rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Envuelve los chips .q-scorechip/.q-finaltag/.q-minute (definidos en
   quiniela_table.css) para que el marcador en directo/final del detalle
   de una apuesta se vea igual que en la tabla de la jornada en la home. */
.sg-detail-result {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sg-pick {
    font-weight: 900;
    font-size: 0.7rem;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.sg-pick.hit {
    background: #1f9d55;
}

.sg-pick.miss {
    background: #c1272d;
}

.sg-pick.pending {
    background: transparent;
    border: 1.5px dashed var(--glass-border);
    color: var(--text-secondary);
}

.sg-expand-hint {
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0 0 8px;
}

.sg-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Las tarjetas empiezan abiertas (sg-open por defecto): la flecha apunta
   hacia arriba lista para "cerrar", y se voltea al contraer. */
.sg-card.sg-open .sg-chevron {
    transform: rotate(180deg);
}

.sg-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ---------- Toggle "Con partidos en juego" / "Solo acabados" ---------- */
.sg-mode-toggle {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
    padding: 3px;
    margin: 0.5rem 0 1rem;
    width: fit-content;
}

.sg-mode-btn {
    font: inherit;
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
}

.sg-mode-btn.active {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Selector de peña dentro de la tarjeta de una apuesta propia: mover la
   apuesta a una peña sin abrir el formulario de edición. Se queda discreto
   (mismo lenguaje que los badges de al lado) para no competir con el
   contenido de la tarjeta, que es lo que se viene a mirar. */
.sg-pena-select {
    font-size: 0.7rem;
    max-width: 130px;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--bg-input, transparent);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.sg-pena-select:disabled {
    opacity: 0.5;
    cursor: progress;
}

@media (max-width: 480px) {
    .sg-pena-select {
        max-width: 96px;
    }
}