/* Paleta general */
.ligas-panel,
.eventos-panel,
.betslip-panel{
  border-color:#111;
  box-shadow:0 8px 22px rgba(0,0,0,.42);
}
.ligas-panel{
  background:linear-gradient(180deg,#303030 0%,#232323 100%);
}
.eventos-panel{
  background:#090a15;
}
.betslip-panel{
  background:linear-gradient(180deg,#343434 0%,#272727 100%);
}
.panel-heading,
.eventos-toolbar,
.betslip-header{
  border-color:#111;
  background:linear-gradient(180deg,#3a3a3a 0%,#2d2d2d 100%);
}
.panel-kicker{color:#b2b2b2}
.panel-heading h2,
.eventos-toolbar h1{color:#f7f7f7}
.lista-ligas{
  background:#242424;
}
.liga-item{
  border-color:#171717;
  background:linear-gradient(180deg,#3a3a3a 0%,#303030 100%);
  color:#f3f3f3;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.liga-item strong{
  background:#202020;
  color:#cfcfcf;
  border:1px solid #111;
}
.liga-item:hover{
  border-color:#7f621c;
  background:linear-gradient(180deg,#464646 0%,#363636 100%);
}
.liga-item.activa{
  border-color:var(--yellow);
  background:linear-gradient(180deg,#242b78 0%,#151b5b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.liga-item.activa strong{
  border-color:#b17c00;
  background:var(--yellow);
  color:#17120a;
}
.event-count{
  border:1px solid #151515;
  background:#202020;
  color:#f0f0f0;
}
.mobile-ligas-btn{
  border-color:#5f4917;
  background:linear-gradient(180deg,#4a3a18,#302611);
  color:#f2c759;
}
.panel-close,
.betslip-close{
  background:#494949;
  color:#fff;
}

.eventos-columnas{
  border-color:#111;
  background:linear-gradient(180deg,#3a3a3a 0%,#2b2b2b 100%);
  color:#e5e5e5;
}
.eventos-lista{
  background:#090a15;
}
.liga-seccion-header{
  border-color:#151515;
  background:linear-gradient(180deg,#454545 0%,#303030 100%);
  color:var(--yellow);
}
.liga-seccion-header small{color:#ded0a6}
.evento{
  border-color:#0d1037;
  background:#151a54;
  box-shadow:0 1px 0 rgba(255,255,255,.025);
}
.evento-principal{
  background:linear-gradient(180deg,#1b2165 0%,#11164f 100%);
}
.evento-hora span{color:#d0d3e8}
.cuota{
  border-color:#5459ef;
  background:linear-gradient(180deg,#4344dc 0%,#222eaa 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.28);
}
.cuota span{color:#ffd644}
.cuota:hover{filter:brightness(1.1)}
.cuota.activa{
  border-color:#16c41d;
  background:linear-gradient(180deg,#13b51b 0%,#07880d 100%);
  color:#fff;
}
.cuota.activa span,
.cuota.activa strong{color:#fff}
.btn-mercados{
  border-color:#111;
  background:linear-gradient(180deg,#555 0%,#3b3b3b 100%);
  color:#f2c244;
}
.btn-mercados:hover{
  border-color:#8d6817;
  background:linear-gradient(180deg,#666 0%,#464646 100%);
}
.mercados-extra{
  border-top-color:#252d98;
  background:#0d1031;
}
.mercados-extra .mercado{
  border-color:#2d37a2;
  background:#151a54;
}
.titulo{color:var(--yellow)}

.betslip-header{
  background:linear-gradient(180deg,#3d3d3d 0%,#2c2c2c 100%);
}
.betslip-title,
.betslip-header h3{color:var(--yellow)}
.betslip-title-count{color:var(--yellow)}
.betslip-clear-all{
  border-color:#171717;
  background:linear-gradient(180deg,#555 0%,#3b3b3b 100%);
  color:#ededed;
}
.betslip-selecciones{
  background:linear-gradient(180deg,#262626 0%,#202020 100%);
  scrollbar-color:#727272 #171717;
}
.betslip-empty{
  border-color:#555;
  background:#1b1b1b;
  color:#c0c0c0;
}
.seleccion-evento{
  border-color:#2e3694;
  background:linear-gradient(180deg,#191f61 0%,#11164b 100%);
}
.seleccion-liga{color:#b9bdd8}
.info-apuesta .equipos{color:#fff}
.info-apuesta .mercado{color:#d7d9e7}
.cuota-betslip span{color:#c0c3d7}
.cuota-betslip strong{color:var(--yellow)}
.eliminar-apuesta{
  background:#4a4a4a;
  color:#fff;
}
.betslip-summary{
  border-top-color:#111;
  background:linear-gradient(180deg,#333 0%,#292929 100%);
}
.linea{border-bottom-color:#191919}
.linea span{color:#f0f0f0}
.linea strong{color:var(--yellow)}
.monto-label{color:#dedede}
.monto-display{
  border-color:#151515;
  background:#191919;
}
.monto-display span{color:#ececec}
.step-btn,
.monto-chip{
  border-color:#181818;
  background:linear-gradient(180deg,#5a5a5a 0%,#3d3d3d 100%);
  color:#fff;
}
.step-btn{color:#f0c64f}
.step-btn:hover,
.monto-chip:hover{filter:brightness(1.1)}
.monto-chip.activo{
  border-color:#6468f0;
  background:linear-gradient(180deg,#4344dc 0%,#222eaa 100%);
}
.monto-chip.limpiar{
  border-color:#821d19;
  background:linear-gradient(180deg,#d33a31 0%,#aa1712 100%);
}
.pago-potencial{
  border-color:#10b618;
  background:
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.18),transparent 30%),
    linear-gradient(135deg,#11ac18 0%,#078a0d 62%,#056909 100%);
  box-shadow:0 10px 24px rgba(4,121,10,.24),inset 0 1px 0 rgba(255,255,255,.27);
  color:#fff;
}
.pago-potencial span,
.pago-potencial strong,
.pago-potencial strong > span{
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.26);
}
.ticket-actions{background:#292929}
#descargar-ticket{
  background:linear-gradient(180deg,#11ad19 0%,#07870d 100%);
  color:#fff;
}
#imprimir-ticket{
  background:linear-gradient(180deg,#595959 0%,#3d3d3d 100%);
  color:#fff;
}
#toggle-betslip{
  background:linear-gradient(180deg,#11ad19 0%,#07870d 100%);
  color:#fff;
}

.betslip-selecciones::-webkit-scrollbar-track{
  background:#171717;
  box-shadow:inset 0 0 0 1px #303030;
}
.betslip-selecciones::-webkit-scrollbar-thumb{
  border-color:#171717;
  background:linear-gradient(180deg,#858585 0%,#5a5a5a 100%);
}
.betslip-selecciones::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#e7b634 0%,#b27e0c 100%);
}

.system-banner{
  border-bottom-color:#826315;
  background:#3b2d0e;
  color:#ffe3a0;
}
.toast{
  border-color:#555;
  background:#2d2d2d;
}
.toast-success{border-color:#16851b;background:#173719}
.toast-warning{border-color:#8f6b15;background:#3a2d10;color:#ffe2a0}
.toast-error{border-color:#9b302b;background:#3a1c1a;color:#ffc5c1}
.toast-info{border-color:#3c45ae;background:#171b54;color:#e3e4ff}

button:focus-visible,
input:focus-visible,
a:focus-visible{
  outline-color:rgba(231,167,21,.85);
}

@media (max-width:1180px){
  .header{
    grid-template-columns:120px minmax(170px,1fr) minmax(280px,1.15fr) minmax(215px,max-content);
    gap:8px;
    padding-left:10px;
    padding-right:10px;
  }
  .logo-img{width:122px}
  .ticket-check-form button{
    min-width:118px;
    padding:0 9px;
    font-size:11px;
  }
  #login-form{
    grid-template-columns:minmax(118px,145px) auto;
    gap:6px;
  }
  #login-form button{min-width:72px}
}

@media (max-width:860px){
  .header{
    grid-template-columns:minmax(150px,.72fr) minmax(280px,1.28fr);
    grid-template-areas:
      "logo login"
      "search checker";
    gap:8px 10px;
    min-height:122px;
    padding:8px 10px 10px;
  }
  .logo{grid-area:logo}
  .header-search{grid-area:search}
  .ticket-checker{grid-area:checker}
  .login-header{
    grid-area:login;
    width:100%;
  }
  .logo-img{width:132px}
  #login-form{
    width:min(100%,320px);
    margin-left:auto;
  }
  #logged-in:not([hidden]){
    width:100%;
    flex-wrap:nowrap;
  }
  .system-banner{top:122px}
  .toast-container{top:138px}
  .betslip-panel.activo{top:132px}
}

@media (max-width:640px){
  .header{
    position:relative;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "logo"
      "search"
      "checker"
      "login";
    gap:8px;
    min-height:0;
    padding:10px;
  }
  .logo{
    justify-content:center;
  }
  .logo-img{width:142px}
  .header-search,
  .ticket-checker,
  .login-header{
    width:100%;
  }
  .login-header{
    flex-wrap:wrap;
    justify-self:stretch;
  }
  .ticket-check-result{
    position:static;
    margin-top:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.38);
  }
  .ticket-check-result::before{display:none}
  #login-form{
    width:100%;
    grid-template-columns:minmax(0,1fr) auto;
    margin:0;
  }
  #logged-in:not([hidden]){
    flex-wrap:wrap;
    justify-content:stretch;
  }
  #logged-in span{width:100%;text-align:center}
  #logged-in .admin-link,
  #logged-in #logout-btn{flex:1}
  .login-message{
    position:static;
    width:100%;
    max-width:none;
    text-align:left;
  }
  .system-banner{
    position:relative;
    top:auto;
  }
  .toast-container{top:10px}
  .betslip-panel.activo{top:10px}
}

@media (max-width:390px){
  .ticket-check-form button{
    min-width:112px;
    padding:0 8px;
    font-size:10px;
  }
  #buscar-liga,
  #ticket-code{font-size:12px}
}