/* ===== Porra Betis · Sevilla — tema "app deportiva" oscuro sobre Tabler ===== */
:root,[data-bs-theme=dark]{
  --app-bg:#080b10;
  --surface:#10151c;
  --surface-2:#161d26;
  --surface-3:#1d2631;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --txt:#eef2f6;
  --muted:#8b97a5;
  --accent:#00e57a;
  --accent-dim:rgba(0,229,122,.14);
  --red:#ff4d5e;
  --gold:#ffc24b;
  --num:"Barlow Condensed","Inter",sans-serif;

  --tblr-font-sans-serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --tblr-body-bg:var(--app-bg);
  --tblr-body-color:var(--txt);
  --tblr-bg-surface:var(--surface);
  --tblr-bg-surface-secondary:var(--surface-2);
  --tblr-bg-surface-tertiary:var(--surface-3);
  --tblr-bg-forms:#0c1117;
  --tblr-border-color:var(--line);
  --tblr-border-color-translucent:var(--line);
  --tblr-secondary:var(--muted);
  --tblr-secondary-color:var(--muted);
  --tblr-primary:var(--accent);
  --tblr-primary-rgb:0,229,122;
  --tblr-primary-fg:#03130a;
  --tblr-primary-text:var(--accent);
  --tblr-link-color:var(--accent);
  --tblr-link-color-rgb:0,229,122;
  --tblr-link-hover-color:#5dffad;
  --tblr-border-radius:10px;
  --tblr-border-radius-lg:16px;
  --tblr-card-border-radius:18px;
}
body{
  background:
    radial-gradient(900px 500px at 0% -10%, rgba(0,229,122,.10), transparent 60%),
    radial-gradient(900px 500px at 100% -10%, rgba(255,77,94,.08), transparent 60%),
    var(--app-bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
}

/* ---------- Navegación ---------- */
.app-nav{background:rgba(8,11,16,.72)!important;backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);--tblr-navbar-active-border-color:var(--accent);z-index:1030}
.app-nav .nav-link{color:var(--muted);font-weight:600}
.app-nav .nav-item.active .nav-link,.app-nav .nav-link:hover{color:var(--txt)}
.app-nav .nav-item.active .nav-link-icon{color:var(--accent)}
.brand{display:flex;align-items:center;gap:.35rem;font-size:1rem;text-decoration:none!important}
.brand .crest{width:28px;height:28px}
.brand span{margin-left:.4rem;color:var(--txt);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;font-size:.95rem}
.brand b{font-weight:800;color:var(--muted)}

/* ---------- Tipografía ---------- */
.page-pretitle,.subheader{color:var(--accent)!important;font-weight:700;letter-spacing:.1em;font-size:.7rem}
.page-title{font-weight:900;font-size:1.75rem;letter-spacing:-.025em}
.card-title{font-weight:800;letter-spacing:-.01em}
.card-subtitle{color:var(--muted)}
.money,.num{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- Tarjetas ---------- */
.card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 40%),var(--surface);
  border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.card-header{border-bottom-color:var(--line)}
.card-footer{background:rgba(0,0,0,.18);border-top-color:var(--line)}
.card-link:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card-link{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.list-group-item{background:transparent;border-color:var(--line)}
.list-group-item-action:hover{background:rgba(255,255,255,.03)}

/* Tarjeta protagonista (jornada actual) */
.hero-card{position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#00954c,var(--accent) 45%,var(--red) 55%,#b8101c)}
.hero-card::after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-220px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,229,122,.12),transparent);pointer-events:none}

/* ---------- Botones ---------- */
.btn{font-weight:700;border-radius:12px}
.btn-primary{--tblr-btn-bg:var(--accent);--tblr-btn-border-color:var(--accent);--tblr-btn-hover-bg:#2bff96;--tblr-btn-hover-border-color:#2bff96;
  --tblr-btn-color:#03130a;--tblr-btn-hover-color:#03130a;--tblr-btn-active-bg:#00c86a;--tblr-btn-active-color:#03130a;
  box-shadow:0 8px 24px rgba(0,229,122,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{box-shadow:0 10px 30px rgba(0,229,122,.42),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:not(.btn-primary):not(.btn-success):not([class*=btn-outline]):not([class*=btn-ghost]){--tblr-btn-bg:var(--surface-2);--tblr-btn-border-color:var(--line-2);--tblr-btn-color:var(--txt);
  --tblr-btn-hover-bg:var(--surface-3);--tblr-btn-hover-border-color:rgba(255,255,255,.2);--tblr-btn-hover-color:#fff}
.btn-lg{padding:.85rem 1.4rem;font-size:1rem}

/* ---------- Estados ---------- */
.status{text-transform:uppercase;font-size:.68rem;font-weight:800;letter-spacing:.08em;height:1.6rem}
.status-green{--tblr-status-color:var(--accent)}
.status-red{--tblr-status-color:var(--red)}
.status-yellow{--tblr-status-color:var(--gold)}
.badge{font-weight:700}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:6px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(255,77,94,.6);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,77,94,0)}100%{box-shadow:0 0 0 0 rgba(255,77,94,0)}}

/* ---------- Escudos ---------- */
.crest{width:40px;height:40px;object-fit:contain;flex:0 0 auto;display:inline-block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.crest--txt{display:inline-grid;place-items:center;border-radius:50%;font-size:.7rem;font-weight:800;color:var(--muted);
  background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-2);filter:none}
.crest-sm .crest{width:22px;height:22px;filter:none}

/* ---------- Partido ---------- */
.match{display:grid;grid-template-columns:1fr minmax(6.5rem,auto) 1fr;align-items:center;gap:.75rem;
  padding:1.25rem 1rem;border-radius:16px;background:linear-gradient(180deg,var(--surface-2),rgba(22,29,38,.55));border:1px solid var(--line)}
.match + .match{margin-top:.75rem}
.match__team{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;min-width:0}
.match__team .crest{width:58px;height:58px}
.match__name{font-weight:800;font-size:.95rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match__mid{text-align:center}
.match__time,.match__score{font-family:var(--num);font-weight:800;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.match__score i{font-style:normal;color:var(--muted);margin:0 .3rem;font-weight:600}
.match__score.is-live{color:var(--red)}
.match__tag{margin-top:.3rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.match__tag.is-live{color:var(--red)}
.match__comp{display:inline-block;margin-top:.45rem;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:.15rem .55rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
@media (max-width:575.98px){
  .match{padding:1rem .5rem;gap:.35rem}
  .match__team .crest{width:46px;height:46px}
  .match__name{font-size:.82rem}
  .match__time,.match__score{font-size:2.1rem}
}

/* ---------- Cuenta atrás (casillas) y bote ---------- */
.cd-label{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cd-tiles{display:flex;gap:.5rem;margin-top:.4rem}
.cdt{min-width:4rem;padding:.55rem .4rem .45rem;border-radius:12px;text-align:center;background:#0a0f15;border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cdt b{display:block;font-family:var(--num);font-weight:800;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums}
.cdt span{display:block;margin-top:.2rem;font-size:.58rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:575.98px){.cdt{min-width:0;flex:1}.cdt b{font-size:1.7rem}}
.countdown{font-family:var(--num);font-size:2.2rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}

.pot-card{background:
    radial-gradient(120% 90% at 100% 0%,rgba(0,229,122,.22),transparent 55%),
    radial-gradient(120% 90% at 0% 100%,rgba(255,77,94,.14),transparent 55%),var(--surface);
  border-color:rgba(0,229,122,.22)}
.pot-value{font-family:var(--num);font-size:5.5rem;font-weight:800;line-height:.9;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 20%,#9dffcc);-webkit-background-clip:text;background-clip:text;color:transparent}
.pot-value small{font-size:.5em;margin-left:.15em}
.wallet-value{font-family:var(--num);font-size:2.8rem;font-weight:800;line-height:1}

/* ---------- Elegir marcador ---------- */
.pick-inputs{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:1.25rem 0}
.pick-inputs .crest{width:44px;height:44px}
.pick-inputs .form-control{width:4.75rem;height:4.25rem;text-align:center;font-family:var(--num);font-size:2.4rem;font-weight:800;padding:0;
  background:#0a0f15;border:1px solid var(--line-2);border-radius:14px}
.pick-inputs .form-control:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim)}
.pick-inputs .dash{font-family:var(--num);font-size:2rem;color:var(--muted)}
.sgrid{display:grid;grid-template-columns:1.5rem repeat(6,1fr);gap:.35rem;max-width:27rem;margin:0 auto}
.sgrid__h{font-size:.68rem;color:var(--muted);display:grid;place-items:center;font-weight:800}
.sgrid button{font-family:var(--num);font-size:1rem;font-weight:700;padding:.4rem 0;border-radius:10px;cursor:pointer;
  background:var(--surface-2);color:var(--txt);border:1px solid var(--line);font-variant-numeric:tabular-nums;transition:all .12s}
.sgrid button:hover{border-color:var(--accent);color:#fff}
.sgrid button.is-on{background:var(--accent);border-color:var(--accent);color:#03130a;box-shadow:0 6px 18px rgba(0,229,122,.35)}
.sgrid button:disabled{background:transparent;color:rgba(255,255,255,.22);border-style:dashed;cursor:not-allowed;text-decoration:line-through}
.sgrid__cap{text-align:center;font-size:.72rem;color:var(--muted);margin-top:.6rem}

/* ---------- Tablas / porras ---------- */
.table{--tblr-table-bg:transparent;--tblr-table-border-color:var(--line)}
.table thead th,.card-table thead th{color:var(--muted);font-size:.66rem;letter-spacing:.09em;font-weight:800;background:transparent}
.pick-cell{font-family:var(--num);font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.pick-cell.ok{background:rgba(0,229,122,.14);color:var(--accent)}
.pick-cell.ko{color:rgba(255,255,255,.35)}
tr.is-winner td{background:rgba(255,194,75,.08)}

/* ---------- Jugadores ---------- */
.player-card{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.25rem .75rem 1rem;text-align:center;
  text-decoration:none!important;color:inherit;height:100%}
.player-card .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--line-2)}
.player-card.is-in .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent),0 0 22px rgba(0,229,122,.35)}
.player-card__name{font-weight:700}
.player-card .tag-in{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.card-link-add{border-style:dashed!important;color:var(--muted);background:transparent!important;box-shadow:none}

/* ---------- Formularios ---------- */
.form-control,.form-select{background-color:#0c1117;border-color:var(--line-2);border-radius:12px}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim)}
.form-selectgroup-label{background:var(--surface-2);border-color:var(--line-2);color:var(--txt);font-family:var(--num);font-size:1.1rem;font-weight:700;border-radius:12px}
.form-selectgroup-input:checked+.form-selectgroup-label{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.concept{font-family:var(--tblr-font-monospace);font-weight:700;padding:.2rem .55rem;border-radius:8px;color:var(--accent);
  background:var(--accent-dim);border:1px dashed rgba(0,229,122,.45)}

/* ---------- Avisos ---------- */
.alert{border-radius:14px;border-width:1px}

/* ---------- Admin ---------- */
details.card > summary{list-style:none;cursor:pointer}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary .chev{transition:transform .2s}
details.card[open] > summary .chev{transform:rotate(180deg)}
.input-goal{width:4rem!important;text-align:center}
.card-sm .h1{font-family:var(--num);font-size:2.2rem;font-weight:800}

.footer{border-top:1px solid var(--line)}