:root{
  --bg:#0e1116;
  --panel:#161b22;
  --panel2:#1f2632;
  --line:#2a3444;
  --ink:#eef2f7;
  --muted:#9aa7b8;
  --accent:#ff5a3c;      /* naranja Jimbee */
  --accent2:#ffb020;
  --green:#1f8f4e;
  --green-line:#2fbf6b;
  --blue:#3d7dff;
  --danger:#e5484d;
  --ok:#22c55e;
  --radius:14px;
  --tap:56px;
  font-size:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;border:none;color:inherit;background:none}
input,select{font-family:inherit;font-size:1rem}
.hidden{display:none !important}

/* -------- Topbar -------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;
  padding:.55rem .8rem;background:var(--panel);border-bottom:1px solid var(--line);
}
.topbar .brand{font-weight:800;letter-spacing:.3px;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.topbar .brand .dot{width:12px;height:12px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.topbar .spacer{flex:1}
.tab{padding:.5rem .8rem;border-radius:10px;color:var(--muted);font-weight:600;font-size:.92rem}
.tab.active{background:var(--panel2);color:var(--ink)}
.iconbtn{padding:.5rem .7rem;border-radius:10px;background:var(--panel2);font-weight:600;font-size:.9rem}

main{max-width:820px;margin:0 auto;padding:.8rem;padding-bottom:4rem}

/* -------- Login -------- */
.login{max-width:360px;margin:16vh auto;padding:1.4rem;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);text-align:center}
.login h1{margin:.2rem 0 1rem;font-size:1.3rem}
.login input{width:100%;padding:.9rem;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);margin-bottom:.8rem;text-align:center;font-size:1.1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.85rem 1.1rem;border-radius:10px;background:var(--accent);color:#1a0d08;
  font-weight:800;font-size:1rem;min-height:var(--tap)}
.btn.wide{width:100%}
.btn.ghost{background:var(--panel2);color:var(--ink);font-weight:700}
.btn.blue{background:var(--blue);color:#fff}
.btn.sm{padding:.5rem .7rem;min-height:auto;font-size:.85rem;border-radius:8px}
.btn.danger{background:var(--danger);color:#fff}

/* -------- Scoreboard / reloj -------- */
.scoreboard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:.8rem;margin-bottom:.8rem}
.sb-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.sb-teams{font-weight:700;font-size:.95rem;color:var(--muted)}
.sb-score{font-size:2rem;font-weight:800;letter-spacing:1px}
.sb-score b{color:var(--accent)}
.clock{display:flex;align-items:center;gap:.8rem;justify-content:center;flex-wrap:wrap}
.clock .time{font-variant-numeric:tabular-nums;font-size:3rem;font-weight:800;line-height:1}
.clock .time.run{color:var(--green-line)}
.clock .periodo{font-size:.85rem;color:var(--muted);text-align:center}
.clock-controls{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem}
.fouls{display:flex;gap:.5rem;justify-content:center;margin-top:.5rem;font-size:.85rem;color:var(--muted)}
.fouls b{color:var(--ink)}
.fouls .warn{color:var(--danger);font-weight:800}

/* -------- Pista -------- */
.court-wrap{position:relative;width:100%;aspect-ratio:4/3;background:
  linear-gradient(180deg,#12331f,#0f2a19);border:2px solid var(--green-line);
  border-radius:var(--radius);margin-bottom:.8rem;overflow:hidden}
.court-lines{position:absolute;inset:0}
.slot{position:absolute;transform:translate(-50%,-50%);width:72px;height:72px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accent);color:#1a0d08;font-weight:800;
  border:3px solid #fff2;box-shadow:0 4px 10px #0006;text-align:center;line-height:1}
.slot.gk{background:var(--accent2)}
.slot .dor{font-size:1.4rem}
.slot .nm{font-size:.6rem;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.slot .mins{font-size:.58rem;opacity:.85;font-weight:700}
.slot.empty{background:#ffffff14;color:var(--muted);border:2px dashed #ffffff33;font-size:.75rem;font-weight:700}

/* -------- Bottom sheet -------- */
.sheet-back{position:fixed;inset:0;background:#000a;z-index:40;display:flex;align-items:flex-end}
.sheet{width:100%;max-width:820px;margin:0 auto;background:var(--panel);
  border-top-left-radius:20px;border-top-right-radius:20px;border:1px solid var(--line);
  padding:1rem;max-height:88vh;overflow:auto;animation:up .18s ease}
@keyframes up{from{transform:translateY(20px);opacity:.6}to{transform:none;opacity:1}}
.sheet h3{margin:.1rem 0 .8rem;display:flex;align-items:center;gap:.5rem}
.sheet h3 .badge{background:var(--accent);color:#1a0d08;border-radius:8px;padding:.15rem .5rem;font-size:.9rem}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.stat-grid.two{grid-template-columns:repeat(2,1fr)}
.stat-btn{padding:.9rem .3rem;border-radius:12px;background:var(--panel2);
  border:1px solid var(--line);font-weight:700;font-size:.92rem;min-height:var(--tap);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;text-align:center}
.stat-btn .em{font-size:1.3rem}
.stat-btn.gol{background:#22381f;border-color:#356b2b}
.stat-btn.neg{background:#3a2020;border-color:#6b3030}
.sheet-section{margin-top:1rem}
.sheet-section h4{margin:.2rem 0 .5rem;color:var(--muted);font-size:.82rem;font-weight:700}

/* -------- Listas -------- */
.list{display:flex;flex-direction:column;gap:.5rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:.75rem .85rem;display:flex;align-items:center;gap:.7rem}
.card .num{width:34px;height:34px;border-radius:8px;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.card .num.gk{background:var(--accent2);color:#1a0d08}
.card .grow{flex:1;min-width:0}
.card .grow .t{font-weight:700}
.card .grow .s{font-size:.8rem;color:var(--muted)}
.pick-list .card{cursor:pointer}
.pick-list .card:active{background:var(--panel2)}

/* -------- Tabla stats -------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.85rem;white-space:nowrap}
th,td{padding:.5rem .55rem;border-bottom:1px solid var(--line);text-align:center}
th{background:var(--panel2);color:var(--muted);position:sticky;top:0;font-weight:700}
td.name,th.name{text-align:left;position:sticky;left:0;background:var(--panel);z-index:1}
th.name{background:var(--panel2)}
tr:last-child td{border-bottom:none}
td b{color:var(--accent)}

/* -------- Timeline -------- */
.timeline{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}
.ev{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;font-size:.88rem}
.ev .min{font-variant-numeric:tabular-nums;font-weight:800;color:var(--accent2);width:46px}
.ev .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ev .del{color:var(--muted);padding:.3rem .5rem;border-radius:8px;font-weight:800}

.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.field{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:120px}
.field label{font-size:.78rem;color:var(--muted);font-weight:700}
.field input,.field select{padding:.7rem;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:.4rem 0 .7rem}
.section-title h2{font-size:1.1rem;margin:0}
.empty-note{color:var(--muted);text-align:center;padding:2rem 1rem;border:1px dashed var(--line);border-radius:12px}
.toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);background:var(--ink);
  color:#111;padding:.6rem 1rem;border-radius:20px;font-weight:800;z-index:60;box-shadow:0 6px 20px #0008;
  animation:pop .2s ease}
@keyframes pop{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* ===================== v2: fútbol sala, fotos, escudos ===================== */

/* Avatares y escudos */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--panel2) center/cover no-repeat;flex-shrink:0;border:2px solid var(--line)}
.avatar.big{width:88px;height:88px;border-radius:50%;border:3px solid var(--line)}
.crest{width:34px;height:34px;background:center/contain no-repeat;flex-shrink:0}
.crest.big{width:80px;height:80px;background:var(--panel2) center/contain no-repeat;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.7rem;border:1px dashed var(--line)}
.crest.ph{background:#ffffff10;border-radius:8px}

/* Chips de posiciones */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.55rem .9rem;border-radius:20px;background:var(--panel2);border:1px solid var(--line);
  font-weight:700;font-size:.9rem;color:var(--muted)}
.chip.on{background:var(--accent);color:#1a0d08;border-color:var(--accent)}
.tag-ok{background:#22381f;color:var(--green-line);border:1px solid #356b2b;border-radius:8px;
  padding:.2rem .5rem;font-size:.72rem;font-weight:800;flex-shrink:0}

/* Marcador con escudos */
.sb-top{align-items:center}
.team{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex:1;min-width:0}
.team .crest{width:44px;height:44px}
.team span{font-size:.82rem;font-weight:700;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.time.over{color:var(--danger)}

/* Pista vertical de fútbol sala */
.court-wrap{aspect-ratio:3/4;background:linear-gradient(180deg,#14361f,#0f2a19)}

/* Slots con rol fijo */
.slot{width:66px;height:66px}
.slot .role{font-size:.8rem;font-weight:800}
.slot .add{font-size:.55rem;font-weight:700;opacity:.8}
.slot.hasface{background:transparent;border:none;box-shadow:none;padding:0}
.slot-face{width:52px;height:52px;border-radius:50%;background:var(--panel2) center/cover no-repeat;
  border:3px solid #fff;box-shadow:0 4px 10px #0007}
.slot.gk .slot-face{border-color:var(--accent2)}
.dor-badge{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#1a0d08;font-size:.7rem;
  font-weight:800;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.slot.gk .dor-badge{background:var(--accent2)}
.slot.hasface .nm{margin-top:2px}

/* Botones de eventos del rival / tiempos muertos */
.opp-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:.9rem}
.opp{padding:.8rem .4rem;border-radius:12px;background:var(--panel2);border:1px solid var(--line);
  font-weight:800;font-size:.92rem;min-height:52px}
.opp.gol{background:#3a2020;border-color:#6b3030}
.opp.neg{background:#2a2333;border-color:#463a5c}

/* Tarjetas de partido (calendario) */
.match-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;cursor:pointer}
.mc-head{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted);margin-bottom:.5rem}
.statechip{font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:20px}
.statechip.pendiente{background:#2a2f3a;color:var(--muted)}
.statechip.en_juego{background:#22381f;color:var(--green-line)}
.statechip.finalizado{background:#33262a;color:var(--accent2)}
.mc-body{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.mc-body .mt{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1;min-width:0;font-weight:700;font-size:.86rem;text-align:center}
.mc-body .mt .crest{width:40px;height:40px}
.mc-score{font-size:1.5rem;font-weight:800;letter-spacing:1px;flex-shrink:0}
.mc-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}

.field select{min-height:44px}

/* ===================== v3: banquillo y jugadas ===================== */
.bench{margin-bottom:.9rem}
.bench h4{margin:.2rem 0 .5rem;color:var(--muted);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.bench-list{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.3rem}
.bench-card{display:flex;align-items:center;gap:.5rem;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:.4rem .55rem;flex-shrink:0;min-width:118px;cursor:pointer}
.bench-card:active{background:var(--panel2)}
.bench-card .avatar,.bench-card .num{width:34px;height:34px;font-size:.9rem}
.bench-card .t{font-weight:700;font-size:.85rem;line-height:1.1}
.bench-card .mins-b{font-size:.78rem;color:var(--accent2);font-weight:800;font-variant-numeric:tabular-nums}

.jugadas-btn{background:var(--blue);color:#fff;margin-bottom:1rem}
.jugada-row{display:flex;align-items:center;gap:.5rem;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:.55rem .7rem}
.jugada-row .t{font-weight:700}
.jugada-row .s{font-size:.78rem;color:var(--muted)}
.jugada-row .btn.sm{min-width:56px}