:root{
  --bg:#0a1526; --panel:rgba(16,33,59,.92); --panel2:rgba(25,41,74,.94); --line:#2a416b;
  --ink:#eef3fb; --muted:#94a7c9; --accent:#1fb574; --accent2:#ffcf33;
  --red:#ff5a5a; --blue:#3d8bff; --orange:#ff8a3d; --danger:#ff6b6b; --inputbg:#0a1422;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.45;
  background:linear-gradient(rgba(7,13,28,.78),rgba(7,13,28,.88)),url('/bg.jpg') center center/cover fixed,var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.2rem;background:rgba(9,17,33,.88);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{font-weight:800;font-size:1.1rem;color:var(--ink);display:inline-flex;align-items:center;gap:.55rem}
.brand-logo{height:38px;width:38px;border-radius:9px;display:block;box-shadow:0 0 0 1px var(--line)}
.brand-text{display:inline-flex;flex-direction:column;line-height:1.05}
.tagline{font-size:.62rem;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-top:1px}
.topbar nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.who{color:var(--muted)}
.profile-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted)}
.profile-link:hover{text-decoration:none;color:var(--ink)}
.inline{display:inline}
button.link{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.95rem}
button.link:hover{color:var(--ink)}

.flagbar{height:4px;background:linear-gradient(90deg,
  var(--accent) 0 25%, var(--accent2) 25% 50%, var(--red) 50% 75%, var(--blue) 75% 100%)}

.container{max-width:780px;margin:0 auto;padding:1.4rem 1rem 3rem}
.foot{text-align:center;color:var(--muted);padding:1.5rem;font-size:.9rem}
.foot-brand{color:var(--accent2);font-weight:800;letter-spacing:.02em}
.disclaimer{display:block;margin-top:.35rem;font-size:.8rem;opacity:.85}

h1{font-size:1.5rem;margin:.2rem 0 .6rem}
h2{font-size:1.1rem;margin:1.6rem 0 .6rem;border-bottom:1px solid var(--line);padding-bottom:.3rem}
.muted{color:var(--muted)}
.count{background:var(--panel2);border-radius:999px;padding:.05rem .5rem;font-size:.8rem;color:var(--muted)}

.hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem}
.score-badge{text-align:center;display:flex;flex-direction:column;line-height:1}
.score-badge .big{font-size:2.2rem;font-weight:800;color:var(--accent2);font-variant-numeric:tabular-nums}

.ok{background:#10351f;border:1px solid #1f6a3a;color:#9ff0bd;padding:.5rem .8rem;border-radius:10px}
.error{background:#3a1818;border:1px solid #6a2a2a;color:#ffb3b3;padding:.5rem .8rem;border-radius:10px}

.rules{margin:1rem 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.4rem .9rem}
.rules summary{cursor:pointer;color:var(--muted)}
.rules ul{margin:.5rem 0}

.matches{display:flex;flex-direction:column;gap:.6rem}
.match{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem}
.match.finished{background:var(--panel2)}
.match.locked{opacity:.85}
.meta{color:var(--muted);font-size:.8rem;margin-bottom:.35rem}
.row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem}
.team{font-weight:600}
.t1{text-align:right}.t2{text-align:left}
.inputs{display:flex;align-items:center;gap:.3rem}
.inputs input{width:3rem;text-align:center;background:var(--inputbg);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:.4rem;font-size:1rem}
.inputs input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.vs{color:var(--muted)}
.locked-score{color:var(--muted);font-variant-numeric:tabular-nums}
.final{font-size:1.3rem;font-weight:800;color:var(--accent2);font-variant-numeric:tabular-nums}
.result-line{margin-top:.5rem;font-size:.9rem;color:var(--muted);text-align:center}
.pts{display:inline-block;margin-left:.4rem;padding:.05rem .5rem;border-radius:999px;font-weight:700}
.pts.win{background:#10351f;color:#9ff0bd}
.pts.zero{background:#2a2320;color:#caa}

.save-bar{position:sticky;bottom:0;padding:.8rem 0;margin-top:.6rem;
  background:linear-gradient(transparent,var(--bg) 60%)}
button.primary{background:var(--accent);color:#04140c;border:none;font-weight:700;
  padding:.6rem 1.1rem;border-radius:10px;cursor:pointer;font-size:1rem}
button.primary:hover{filter:brightness(1.1)}
button.small{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:.35rem .6rem;cursor:pointer}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;margin:1rem 0}
.card.auth{max-width:380px;margin:3rem auto}
.auth-logo{display:block;width:88px;height:88px;border-radius:18px;margin:0 auto .6rem;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.card.auth label{display:block;margin:.6rem 0;color:var(--muted)}
.card.auth input[type=text],.card.auth input[name=username],.card.auth input[name=password]{display:block;width:100%}
.card.auth input{margin-top:.25rem;background:var(--inputbg);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:.55rem;font-size:1rem;width:100%}
.card.auth input[type=file]{padding:.4rem;font-size:.9rem}
.card.auth button{margin-top:.8rem}

.profile-current{display:flex;align-items:center;gap:1rem;margin:1rem 0;
  padding:1rem;background:var(--panel2);border-radius:12px}
.profile-name{font-weight:700;font-size:1.1rem;margin:0}

.avatar{border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;
  box-shadow:0 0 0 2px var(--line)}
.avatar-initial{display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;line-height:1}

.board{width:100%;border-collapse:collapse;margin-top:.6rem}
.board th,.board td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line)}
.board th{color:var(--muted);font-weight:600;font-size:.85rem}
.player-cell{display:flex;align-items:center;gap:.5rem}
.board .pts-cell{font-weight:800;color:var(--accent2)}
.board tr.leader{background:rgba(255,207,51,.1)}
.result-form input{width:2.6rem;text-align:center;background:var(--inputbg);border:1px solid var(--line);
  color:var(--ink);border-radius:6px;padding:.3rem}
.admin-matches td{font-size:.9rem}

@media(max-width:520px){
  .team{font-size:.92rem}
  .topbar .brand{font-size:1rem}
  .who{display:none}
}

/* ---- Carrusel de partidos de hoy ---- */
.carousel-wrap{margin:1rem 0 1.4rem}
.carousel-head{display:flex;align-items:center;justify-content:space-between}
.carousel-head h2{border:none;margin:.2rem 0;display:flex;align-items:center;gap:.4rem}
.carousel-nav{display:flex;gap:.4rem}
.cbtn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:1.2rem;line-height:1}
.cbtn:hover{background:var(--accent);color:#04140c}
.carousel{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.2rem .1rem .8rem;scrollbar-width:thin}

/* Tarjeta del carrusel — layout horizontal equipo1 · marcador · equipo2 */
.ccard{flex:0 0 260px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:.75rem 1rem}
.cmeta{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.cteams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.4rem;margin:.1rem 0 .5rem}
.cteam{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center}
.cflag{width:36px;height:25px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px var(--line)}
.cname{font-size:.78rem;font-weight:700;line-height:1.2;word-break:break-word}
.cvs{color:var(--accent2);font-size:1.1rem;font-weight:800;text-align:center;white-space:nowrap}
.ctime{color:var(--muted);font-size:.75rem;margin-top:.1rem}
.cstatus{margin-top:.45rem;font-size:.68rem;font-weight:700;display:inline-block;
  padding:.12rem .55rem;border-radius:999px}
.s-open{background:#10351f;color:#9ff0bd}
.s-closed{background:#3a2f12;color:#ffd98a}
.s-done{background:#1c2a47;color:#bcd0f5}
.s-live{background:#3a1414;color:#ff9b9b;animation:livepulse 1.6s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ---- Banderas en partidos (lista) ---- */
.flag-mini{width:20px;height:14px;object-fit:cover;border-radius:2px;display:inline-block;vertical-align:middle;flex-shrink:0}
.team{display:flex;align-items:center;gap:.4rem}
.t1{flex-direction:row-reverse;text-align:right}
.t2{text-align:left}

/* ---- TecnoFact ---- */
.tecnofact-wrap{background:rgba(16,33,59,.7);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:10px;padding:.65rem 1rem;margin:1rem 0}
.tecnofact-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}
.tecnofact-icon{font-size:.85rem}
.tecnofact-label{font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tecnofact-counter{font-size:.65rem;color:var(--muted);margin-left:auto}
.tecnofact-body{font-size:.92rem;color:var(--ink);line-height:1.45;min-height:1.4rem;
  transition:opacity .4s ease;font-weight:500}
.tecnofact-body.fade{opacity:0}
.tecnofact-dots{display:flex;gap:.3rem;margin-top:.5rem;flex-wrap:wrap}
.tecnofact-dot{width:5px;height:5px;border-radius:50%;background:var(--line);
  cursor:pointer;transition:background .3s,transform .3s;flex-shrink:0;border:none;padding:0}
.tecnofact-dot.active{background:var(--accent);transform:scale(1.5)}

/* ---- Transmisión en vivo ---- */
.live-link{display:inline-flex;align-items:center;gap:.35rem}
.live-link.on{color:var(--red);font-weight:700}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(255,90,90,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,90,.6)}70%{box-shadow:0 0 0 8px rgba(255,90,90,0)}100%{box-shadow:0 0 0 0 rgba(255,90,90,0)}}
.video-wrap{position:relative;width:100%;padding-bottom:56.25%;background:#000;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:.6rem 0}
.video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.live-title{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem}
.live-empty{text-align:center;padding:2.5rem 1.2rem}
.live-empty-icon{font-size:3rem;margin-bottom:.4rem}
.live-empty h2{border:none;justify-content:center}
.live-form label{display:block;margin:.6rem 0;color:var(--muted)}
.live-form input{display:block;width:100%;margin-top:.25rem;background:var(--inputbg);
  border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:.55rem;font-size:.95rem}
.live-form button{margin-top:.6rem}