/* =====================================================================
   CACAO OPEN — Marcadores en vivo + generador de resultados
   Usa las variables de marca definidas en style.css
   ===================================================================== */

/* ---------- Selector segmentado (sencillos/dobles) ---------- */
.seg-control{display:flex;background:var(--soft-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(--brand);color:#fff;box-shadow:var(--shadow)}

/* ---------- 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-d);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%}
.team-col input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(169,96,58,.16)}
.vs-divider{font-family:var(--font-head);font-weight:800;color:var(--soft);font-size:1.15rem;text-align:center}

.status-dot{width:11px;height:11px;border-radius:50%;display:inline-block;background:#B9A897}
.status-dot.live{background:#D6452F;box-shadow:0 0 0 0 rgba(214,69,47,.6);animation:pulse 1.6s infinite}
.status-dot.done{background:#9C8A78}
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(214,69,47,.6)}
    70%{box-shadow:0 0 0 9px rgba(214,69,47,0)}
    100%{box-shadow:0 0 0 0 rgba(214,69,47,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(--brand);color:#fff;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:#F2C79B}
.sbm-fin  .sbm-status{color:#D9C6B5}
.sbm{display:block;border-radius:15px;overflow:hidden;background:var(--card);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}
.sbm-head{background:var(--brand);color:#fff;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-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 rgba(169,96,58,.2)}
.sbm-names{font-weight:700;color:var(--brand);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;color:#fff;flex-shrink:0}
.setsq.win{background:var(--accent)}
.setsq.lose,.setsq.tie{background:var(--brand)}
.setsq.empty{background:var(--soft-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 ---------- */
/* Cada lado tiene su propio tono, y el botón de punto usa el mismo, para que
   se vea de un vistazo a qué jugador suma cada botón. */
.scoreboard{
    max-width:740px;margin:0 auto;
    --side1:#42200F;   /* lado 1: marrón oscuro */
    --side1-h:#572C15;
    --side2:#8B4A28;   /* lado 2: notoriamente más claro */
    --side2-h:#A25A31;
}
.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(--brand);
    letter-spacing:.1em;font-size:.85rem;text-transform:uppercase}
.sb-board{background:linear-gradient(140deg,var(--brand),var(--brand-2));border-radius:18px;
    padding:8px;box-shadow:var(--shadow-h);overflow:hidden}
.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(232,190,150,.45)}
.sb-row.winner{box-shadow:inset 0 0 0 3px var(--accent-l)}
.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-l)}
.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,.09);border-radius:8px;font-family:var(--font-head);
    font-size:1.18rem;font-weight:700;color:#E7D3BF}
.setcell.current{background:rgba(208,138,86,.3);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-l);background:rgba(0,0,0,.2);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-d);
    background:var(--soft-2);border:2px solid var(--accent-l);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)}

/* Finalizar el partido a mano */
.sb-finish{margin-top:14px;text-align:center}
.sb-finish .btn{width:100%;max-width:340px}
.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:'⚙ '}
.sb-panel[open] summary{color:var(--accent-d)}
.sb-panel-body{margin-top:12px;padding:16px;background:var(--card);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}
.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}

/* ---------- Generador de resultados ---------- */
.results-layout{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.results-form{padding:22px 20px}
.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(--brand);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(--brand)}
.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}
}