/* =====================================================================
   Marcadores en vivo + generador de resultados
   Usa los tokens de tema definidos en style.css
   ===================================================================== */

/* ---------- Selector segmentado (sencillos/dobles) ---------- */
.seg-control{display:flex;background:var(--surface-2);border-radius:999px;padding:4px;gap:4px}
.seg{flex:1;text-align:center;padding:11px 8px;border-radius:999px;cursor:pointer;
    font-weight:600;color:var(--muted);transition:.15s;font-size:.94rem}
.seg input{display:none}
.seg.active{background:var(--accent);color:var(--on-accent)}

/* ---------- Inputs de equipos ---------- */
.teams-inputs{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;margin:6px 0}
.team-col{display:flex;flex-direction:column;gap:10px}
.team-col h4{margin:0 0 2px;color:var(--accent-ink);font-size:.78rem;
    letter-spacing:.14em;text-transform:uppercase}
.team-col input{font:inherit;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;
    width:100%;background:var(--surface-2);color:var(--text)}
.team-col input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.vs-divider{font-family:var(--font-head);font-weight:800;color:var(--muted);font-size:1.15rem;text-align:center}

.status-dot{width:11px;height:11px;border-radius:50%;display:inline-block;background:var(--muted)}
.status-dot.live{background:#E5484D;box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:pulse 1.6s infinite}
.status-dot.done{background:var(--muted)}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)}
    70%{box-shadow:0 0 0 9px rgba(229,72,77,0)}
    100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}
}

/* ---------- Lista de marcadores ---------- */
.sbm-group{margin-bottom:30px}
.sbm-group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;
    padding-bottom:8px;border-bottom:2px solid var(--border)}
.sbm-group-head h2{margin:0;font-size:1.15rem}
.sbm-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:23px;
    padding:0 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);
    font-size:.82rem;font-weight:700}
.sbm-group-empty{padding:6px 2px}
.sbm-list{display:grid;grid-template-columns:1fr;gap:16px}
.sbm-act .sbm-status{color:var(--live)}
.sbm-fin .sbm-status{color:var(--muted)}
.sbm{display:block;border-radius:15px;overflow:hidden;background:var(--surface);border:1px solid var(--border);
    box-shadow:var(--shadow);transition:.2s;color:var(--text)}
.sbm:hover{transform:translateY(-3px);box-shadow:var(--shadow-h);text-decoration:none;
    border-color:var(--accent-line)}
.sbm-head{background:var(--surface-3);color:var(--text);display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:8px;padding:10px 15px;font-weight:600;font-size:.88rem}
.sbm-head .sbm-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbm-venue{color:var(--muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbm-head .sbm-status{text-align:right;white-space:nowrap;font-size:.74rem;
    letter-spacing:.1em;text-transform:uppercase}
.sbm-body{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:4px 12px;padding:13px 15px}
.sbm-dot{width:12px;height:12px;border-radius:50%;background:transparent}
.sbm-dot.on{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sbm-names{font-weight:700;color:var(--heading);font-size:1.02rem;line-height:1.2;
    display:flex;flex-direction:column;padding:6px 0;min-width:0}
.sbm-names span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbm-setrow{display:flex;gap:7px;justify-content:flex-end}
.setsq{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-head);font-weight:800;font-size:1.25rem;flex-shrink:0}
.setsq.win{background:var(--accent);color:var(--on-accent)}
.setsq.lose,.setsq.tie{background:var(--surface-3);color:var(--text)}
.setsq.empty{background:var(--surface-2);color:var(--muted)}
.sbm-foot{padding:8px 15px 12px;font-size:.8rem;color:var(--muted);
    border-top:1px solid var(--border);display:flex;gap:6px 12px;flex-wrap:wrap}

/* ---------- Marcador en vivo ----------
   El tablero es oscuro en los dos temas: es un marcador de cancha.
   Cada lado tiene su tono y el botón de punto usa el mismo, para ver de
   un vistazo a qué jugador suma cada botón. */
.scoreboard{
    max-width:740px;margin:0 auto;
    --board-1:#151E29;
    --board-2:#0A0F16;
    --side1:#1B2531;   /* lado 1: oscuro */
    --side1-h:#25313F;
    --side2:#37485E;   /* lado 2: notoriamente más claro */
    --side2-h:#43566E;
}
.sb-head{text-align:center;margin-bottom:16px}
.sb-title{margin:0 0 6px;font-size:1.3rem}
.sb-status{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--text);
    letter-spacing:.1em;font-size:.85rem;text-transform:uppercase}
.sb-board{background:linear-gradient(140deg,var(--board-1),var(--board-2));border-radius:18px;
    padding:8px;box-shadow:var(--shadow-h);overflow:hidden;border:1px solid var(--border)}
.sb-row{display:grid;grid-template-columns:22px 1fr auto 70px;align-items:center;gap:8px;
    padding:16px 12px;color:#fff;transition:.2s;border-radius:13px}
#sb-row-1{background:var(--side1)}
#sb-row-2{background:var(--side2)}
/* El líder y el ganador se marcan con un borde interior, no cambiando el
   tono, para que cada lado conserve su color. */
.sb-row.leading{box-shadow:inset 0 0 0 2px rgba(214,255,61,.4)}
.sb-row.winner{box-shadow:inset 0 0 0 3px var(--accent)}
.sb-row+.sb-row{margin-top:8px}
.sb-serve{font-size:1.05rem;line-height:1;text-align:center;width:1.4em;color:var(--accent)}
.sb-team{font-size:1.08rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-sets{display:flex;gap:6px}
.setcell{min-width:30px;height:38px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.08);border-radius:8px;font-family:var(--font-head);
    font-size:1.18rem;font-weight:700;color:#D5DEE8}
.setcell.current{background:rgba(214,255,61,.22);color:#fff}
.sb-points{min-width:70px;text-align:center;font-family:var(--font-head);font-size:1.8rem;
    font-weight:800;color:var(--accent);background:rgba(0,0,0,.28);border-radius:11px;padding:5px 0}
.sb-winner{margin:16px auto 0;text-align:center;font-size:1.2rem;font-weight:800;
    color:var(--accent-ink);background:var(--accent-soft);border:2px solid var(--accent);
    border-radius:14px;padding:15px}
.sb-public-note{margin-top:16px}

/* Controles del que puntúa */
.sb-controls{margin-top:20px}
.sb-controls.disabled{opacity:.5;pointer-events:none}
.sb-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.btn-score{background:var(--accent);color:#fff;border:none;padding:20px 12px;border-radius:14px;
    font-family:var(--font-head);font-size:1.02rem;font-weight:700;cursor:pointer;
    display:flex;flex-direction:column;gap:4px;transition:.15s;min-height:78px;
    align-items:center;justify-content:center;text-align:center}
.btn-score span{font-size:.86rem;font-weight:500;opacity:.92;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Cada botón toma el tono de la fila de su jugador */
.btn-score.side1{background:var(--side1)}
.btn-score.side1:hover{background:var(--side1-h)}
.btn-score.side2{background:var(--side2)}
.btn-score.side2:hover{background:var(--side2-h)}
.btn-score:hover{transform:translateY(-2px)}
.btn-score:active{transform:scale(.98)}

.sb-finish{margin-top:14px;text-align:center}
.sb-finish .btn{width:100%;max-width:340px}
.sb-finish-winner{max-width:340px;margin:0 auto 10px;padding:8px 14px 10px;text-align:left;
    border:1px solid var(--border);border-radius:12px}
.sb-finish-winner legend{padding:0 6px;font-size:.85rem;color:var(--muted)}
.sb-finish-winner label{display:flex;align-items:center;gap:8px;padding:5px 0;font-weight:600;cursor:pointer}
.sb-finish-winner input{width:18px;height:18px;accent-color:var(--accent)}

.sb-control-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sb-control-row .btn{padding:10px 18px}
.btn-outline:disabled{opacity:.4;cursor:not-allowed}
.sb-panel{margin-top:16px}
.sb-panel summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:.9rem;
    padding:8px 0;list-style:none}
.sb-panel summary::-webkit-details-marker{display:none}
.sb-panel summary::before{content:'\2699  '}
.sb-panel[open] summary{color:var(--accent-ink)}
.sb-panel-body{margin-top:12px;padding:16px;background:var(--surface);border:1px solid var(--border);
    border-radius:13px}
.sb-format-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.sb-format-form select{padding:11px 14px;border:1.5px solid var(--border);border-radius:10px;font:inherit;
    background:var(--surface-2);color:var(--text)}
.sb-share{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.sb-owner-tag{font-size:.85rem;color:var(--muted);text-align:center;margin-top:10px}

/* Voz del marcador */
.sb-voice{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:16px}
.sb-voice select{padding:9px 12px;border:1.5px solid var(--border);border-radius:10px;font:inherit;
    background:var(--surface-2);color:var(--text);min-height:38px}
.sb-voice select:focus{outline:none;border-color:var(--accent)}
.sb-voice button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent-ink)}
.sb-voice-info{width:100%;text-align:center;margin:0}

/* ---------- Generador de resultados ---------- */
.results-layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.results-form{padding:22px 20px}
.results-source{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:11px;
    padding:11px 14px;margin-bottom:16px;font-size:.9rem}
.results-source a{font-weight:600}
.sets-inputs{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.set-row{display:grid;grid-template-columns:62px 1fr 18px 1fr;align-items:center;gap:9px}
.set-label{font-weight:700;color:var(--text);font-size:.88rem}
.set-row input{text-align:center;font-weight:700;padding:11px;width:100%}
.set-sep{text-align:center;font-weight:800;color:var(--muted)}
.sets-actions{display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.results-preview{display:flex;flex-direction:column;gap:14px}
#result-canvas{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-h);
    background:var(--board-2,#0A0F16)}
.preview-actions{display:flex;gap:10px;flex-wrap:wrap}
.preview-actions .btn{flex:1;min-width:140px}

@media(min-width:600px){
    .sbm-list{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
    .teams-inputs{grid-template-columns:1fr auto 1fr;gap:16px}
    .sb-row{grid-template-columns:28px 1fr auto 92px;padding:20px 16px}
    .sb-team{font-size:1.3rem}
    .sb-points{font-size:2.2rem;min-width:92px}
    .setcell{min-width:36px;height:44px;font-size:1.4rem}
    .setsq{width:48px;height:48px;font-size:1.5rem}
    .sbm-head{grid-template-columns:1fr auto auto;font-size:.94rem}
}
@media(min-width:861px){
    .results-layout{grid-template-columns:1fr 1fr;gap:30px}
    .results-preview{position:sticky;top:88px}
    .results-form{padding:26px}
    .sb-title{font-size:1.6rem}
}