/* ============================================================
   Polla Mundial 2026 · Sinergía
   Tema oscuro "mundialero" con naranja corporativo del logo.
   Colores del logo: #e76711 / #ec6c07
   ============================================================ */
:root {
  --naranja:        #ec6c07;
  --naranja-2:      #e76711;
  --naranja-claro:  #ff8a3d;
  --fondo:          #0b1020;
  --fondo-2:        #11182e;
  --panel:          #161d33;
  --panel-2:        #1c2440;
  --borde:          #2a3457;
  --verde:          #2faa5a;
  --rojo:           #d83a42;
  --texto:          #e9ecf5;
  --texto-tenue:    #9aa6c7;
}

body {
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(236,108,7,.18), transparent 60%),
    linear-gradient(180deg, var(--fondo) 0%, var(--fondo-2) 100%);
  background-attachment: fixed;
  color: var(--texto);
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Navbar ---------- */
.navbar-polla {
  background: rgba(11,16,32,.92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--naranja);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.navbar-polla .nav-link { color: var(--texto-tenue); font-weight: 600; border-radius: .5rem; padding: .4rem .7rem; }
.navbar-polla .nav-link:hover { color: #fff; }
.navbar-polla .nav-link.active { color: #fff; background: rgba(236,108,7,.22); }
.brand-sep { color: var(--naranja); font-weight: 300; }
.brand-polla { letter-spacing: 2px; font-weight: 800; color: #fff; }
.brand-polla b { color: var(--naranja); }
.avatar-nav { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--naranja); }

.btn-naranja  { background: var(--naranja); border-color: var(--naranja); color:#fff; font-weight:700; }
.btn-naranja:hover { background: var(--naranja-2); border-color: var(--naranja-2); color:#fff; }
.btn-outline-naranja { color: var(--naranja-claro); border-color: var(--naranja); }
.btn-outline-naranja:hover { background: var(--naranja); color:#fff; }

/* ---------- Tarjetas / paneles ---------- */
.card-polla {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--borde);
  border-radius: 1rem;
  overflow: hidden;
}
.titulo-seccion {
  font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem;
}
.titulo-seccion .barra { width: 6px; height: 1.4em; border-radius: 6px; background: var(--naranja); display:inline-block; }

/* ---------- Tarjeta de partido (marcador) ---------- */
.match-card { position: relative; }
.match-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:.6rem 1rem; font-size:.8rem; color:var(--texto-tenue);
  border-bottom:1px solid var(--borde); background: rgba(0,0,0,.18);
}
.badge-vivo { background: var(--rojo); color:#fff; font-weight:700; animation: parpadeo 1.4s infinite; }
.badge-fin  { background:#3a4467; color:#fff; }
@keyframes parpadeo { 50% { opacity:.45; } }

.match-body { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; padding:1.1rem 1rem; }
.equipo { display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center; }
.equipo img { width:54px; height:auto; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.5); }
.equipo .nom { font-weight:700; font-size:.95rem; }
.marcador { font-size:2.4rem; font-weight:800; letter-spacing:2px; min-width:120px; text-align:center; }
.marcador .vs { font-size:1rem; color:var(--texto-tenue); font-weight:600; }
.match-foot { padding:.55rem 1rem; font-size:.8rem; color:var(--texto-tenue); border-top:1px solid var(--borde); display:flex; gap:1rem; flex-wrap:wrap; }
.match-foot i { color: var(--naranja-claro); }

/* ---------- Próximos partidos ---------- */
.proximo { display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-radius:.7rem; background:rgba(0,0,0,.15); border:1px solid var(--borde); }
.proximo img { width:30px; border-radius:3px; }
.proximo .tnom { font-weight:600; font-size:.85rem; }
.proximo .meta { font-size:.74rem; color:var(--texto-tenue); }

/* ---------- Inputs de apuesta ---------- */
.input-gol { width:58px; text-align:center; font-weight:800; font-size:1.2rem;
  background:var(--fondo-2); color:#fff; border:1px solid var(--borde); }
.input-gol:focus { border-color:var(--naranja); box-shadow:0 0 0 .2rem rgba(236,108,7,.25); background:var(--fondo-2); color:#fff; }
.cerrado-tag { font-size:.72rem; font-weight:700; color:var(--rojo); }
.abierto-tag { font-size:.72rem; font-weight:700; color:var(--verde); }
.fila-apuesta.cerrada { opacity:.6; }

/* ---------- Tablas ---------- */
.table-polla { --bs-table-bg: transparent; color:var(--texto); }
.table-polla thead th { color:var(--naranja-claro); text-transform:uppercase; font-size:.74rem; letter-spacing:.5px; border-color:var(--borde); }
.table-polla td, .table-polla th { border-color:var(--borde); vertical-align:middle; }
.rank-1 { color:#ffd54a; font-weight:800; }
.rank-2 { color:#cfd6e6; font-weight:800; }
.rank-3 { color:#e8a06a; font-weight:800; }
.rank-4 { color:#cbb27a; font-weight:800; }
.chip-pts { background:var(--naranja); color:#fff; border-radius:1rem; padding:.15rem .6rem; font-weight:800; }

/* ---------- Login ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.login-card { width:100%; max-width:400px; }
.login-card .logo { display:block; margin:0 auto 1.2rem; height:46px; }

/* ---------- Banderitas de grupo (afiche) ---------- */
.grupo-letra { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; background:var(--naranja); color:#fff; font-weight:800; }

/* ---------- Puntos por apuesta ---------- */
.pts-pill { font-weight:800; border-radius:.6rem; padding:.1rem .5rem; font-size:.8rem; }
.pts-5 { background:#1f7a3f; color:#fff; }
.pts-3 { background:#2f5fb0; color:#fff; }
.pts-2 { background:#7a5a1f; color:#fff; }
.pts-0 { background:#3a3a3a; color:#bbb; }

/* ---------- Responsive (TV → celular) ---------- */
@media (max-width: 576px) {
  .marcador { font-size:1.9rem; min-width:90px; }
  .equipo img { width:42px; }
}
@media (min-width: 1600px) {           /* TV / monitores grandes */
  .main-polla { max-width: 1500px; margin: 0 auto; }
  body { font-size: 1.05rem; }
}

/* ---------- Toast de guardado ---------- */
.toast-guardado {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--panel-2); color:#fff; border:1px solid var(--borde);
  padding:.6rem 1.1rem; border-radius:2rem; font-weight:700; font-size:.9rem;
  opacity:0; pointer-events:none; transition:.25s; z-index:1080; box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.toast-guardado.visible { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-guardado.ok  { border-color: var(--verde); }
.toast-guardado.err { border-color: var(--rojo); }
.form-apuesta.apuesta-error .input-gol { border-color: var(--rojo); }
.table-clasifica td { background: rgba(47,170,90,.10); }

/* ===== Fase final · penales, placeholders y secciones ===== */
.pts-1 { background:#2f5fb0; color:#fff; }
.fase-sec { display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.05rem;
  letter-spacing:.5px; text-transform:uppercase; color:var(--texto);
  margin:1.4rem 0 .6rem; }
.fase-bar { width:6px; height:1.2em; border-radius:6px; background:var(--naranja); display:inline-block; }
.logo-vacio { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:#0d1326; border:1px dashed var(--borde); color:var(--texto-tenue); font-size:.8rem; }
.lbl-tiempo, .lbl-penales { font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--texto-tenue); white-space:nowrap; }
.lbl-penales { color:var(--naranja-claro); }
.pen-row { display:flex; align-items:center; gap:.5rem; }
.input-pen { border-style:dashed; }
.avanza-msg:empty { display:none; }
.avanza-msg { font-size:.78rem; font-weight:700; color:var(--naranja-claro); }
.pts-pill.pts-1 { background:#2f5fb0; color:#fff; }
.marcador .pen-mini { font-size:.42em; font-weight:700; color:var(--texto-tenue); margin-top:.2rem; line-height:1; }

/* ===== Resumen para TV (una pantalla, sin scroll) ===== */
.rsm-body { height:100vh; overflow:hidden; padding:14px 20px 16px; }
.rsm-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
  border-bottom:2px solid var(--naranja); padding-bottom:10px; }
.rsm-title { font-weight:800; font-size:1.4rem; letter-spacing:.5px; }
.rsm-date { color:var(--naranja-claro); font-weight:700; }
.rsm-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:14px; height:calc(100vh - 78px); }
.rsm-card { background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:10px 14px; overflow:hidden; }
.rsm-h { font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--naranja-claro);
  border-bottom:1px solid var(--borde); padding-bottom:6px; margin-bottom:8px; font-size:.95rem; }
.rsm-side { display:grid; grid-template-rows:1fr 1fr 1fr; gap:14px; }
.rsm-rank-cols { column-count:2; column-gap:18px; }
.rsm-row { display:flex; align-items:center; gap:8px; padding:4px 2px; break-inside:avoid; }
.rsm-row img { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.rsm-row .pos { width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-weight:800; font-size:.8rem; background:#0d1326; color:var(--texto-tenue); }
.rsm-row .pos-1 { background:#e8b53b; color:#3a2a00; } .rsm-row .pos-2 { background:#aeb8cf; color:#23293a; }
.rsm-row .pos-3 { background:#c0712f; color:#fff; } .rsm-row .pos-4 { background:#ec6c07; color:#fff; }
.rsm-row .nm { flex:1; font-weight:600; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rsm-row .pt { font-weight:800; color:var(--naranja-claro); }
.rsm-match { display:flex; align-items:center; gap:8px; padding:5px 0; }
.rsm-match img { width:26px; height:18px; border-radius:2px; object-fit:cover; }
.rsm-match .t { flex:1; font-size:.92rem; font-weight:600; }
.rsm-match .t.r { text-align:right; }
.rsm-match .sc { min-width:54px; text-align:center; font-weight:800; background:#0d1326; border-radius:7px; padding:1px 8px; }
.rsm-match .sc.fin { color:var(--naranja-claro); }
.rsm-pen { text-align:center; font-size:.72rem; color:var(--texto-tenue); margin-top:-2px; margin-bottom:2px; }
.rsm-empty { color:var(--texto-tenue); font-size:.9rem; padding:6px 2px; }

/* ===== Admin · filas de fase final ===== */
.ko-fila { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:8px 10px; margin-bottom:6px;
  background:var(--panel); border:1px solid var(--borde); border-radius:10px; }
.ko-fila .ko-num { font-weight:800; color:var(--naranja-claro); min-width:34px; }
.ko-fila .ko-meta { font-size:.78rem; color:var(--texto-tenue); min-width:120px; }
.ko-fila .ko-team { width:190px; }
.ko-fila .ko-est { width:92px; }
.ko-fila .ko-lbl { font-size:.68rem; font-weight:700; text-transform:uppercase; color:var(--texto-tenue); margin-left:6px; }
.ko-fila .input-gol { width:46px; }

/* ===== Estado de guardado por partido (inline) ===== */
.guardado-fila { font-size:.78rem; font-weight:700; white-space:nowrap; opacity:0; transition:opacity .2s; }
.guardado-fila.visible { opacity:1; }
.guardado-fila.ok  { color:var(--verde); }
.guardado-fila.err { color:var(--rojo); }

/* ===== Podios · equipos eliminados (tachado + gris) ===== */
.eq-podio { display:inline-flex; align-items:center; }
.eq-eliminado { filter:grayscale(1); opacity:.5; text-decoration:line-through; }
.eq-eliminado img { filter:grayscale(1); }