/* =======================
   CUOTAS BLOQUEADAS CON CANDADO
======================= */
.cuota-bloqueada,
.cuota-bloqueada:hover{
  cursor:not-allowed;
  border-color:#414857;
  background:linear-gradient(180deg,#353b46,#242934);
  filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  opacity:1;
}
.cuota-bloqueada span{color:#bac2d0}
.cuota-bloqueada .cuota-lock-icon{
  color:#f1d56b;
  font-size:19px;
  line-height:1;
  filter:grayscale(.15);
}
body.sin-conexion .cuota[data-cuota-activa="1"]{
  opacity:.52;
  cursor:not-allowed;
  filter:grayscale(.25);
}

/* =======================
   TALÓN MÁS ESTABLE
======================= */
.betslip-header-actions{display:flex;align-items:center;gap:8px}
.betslip-close{
  display:none;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#303744;
  color:#fff;
  font-size:22px;
  line-height:1;
}
.betslip-panel{
  max-height:calc(100vh - 88px)!important;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
}
.betslip-selecciones{
  overflow-y:auto;
  max-height:38vh;
  scrollbar-width:thin;
}
.betslip-summary,.ticket-actions{flex:0 0 auto}
.ticket-actions button:disabled{opacity:.5;cursor:not-allowed}

/* Elipsis real para nombres largos de ligas */
.liga-item span{
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:100%;
}

button:focus-visible,
input:focus-visible,
a:focus-visible{
  outline:3px solid rgba(113,128,255,.72);
  outline-offset:2px;
}

/* =======================
   RESPONSIVE MEJORADO
======================= */
@media (max-width:900px){
  .betslip-panel{
    display:none!important;
  }
  .betslip-panel.activo{
    display:flex!important;
    flex-direction:column;
    overflow:hidden!important;
  }
  .betslip-panel.activo .betslip-selecciones{
    flex:1 1 auto;
    max-height:none;
    overflow-y:auto;
  }
  .betslip-close{display:inline-flex;align-items:center;justify-content:center}
}

@media (max-width:720px){
  .header{align-items:flex-start;flex-wrap:wrap}
  .login-header{width:100%;justify-content:stretch}
  #login-form{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto}
  #login-form input{width:100%}
  #logged-in:not([hidden]){width:100%;flex-wrap:wrap}
  #logged-in .admin-link,#logged-in #logout-btn{flex:1}
  .login-message{text-align:left}
  .system-banner{top:104px}
  .toast-container{top:116px;right:10px;width:calc(100vw - 20px)}
}

@media (max-width:520px){
  .app-layout{padding:8px}
  .eventos-columnas{display:none}
  .eventos-toolbar{align-items:flex-start;flex-wrap:wrap}
  .eventos-toolbar > div{min-width:0;flex:1}
  .event-count{margin-left:auto}
  .evento-principal{
    grid-template-columns:66px minmax(0,1fr) 42px!important;
    grid-template-areas:
      "hora partido mas"
      "cuotas cuotas cuotas";
    gap:8px!important;
    padding:10px!important;
  }
  .evento-hora{grid-area:hora;text-align:left}
  .col-partido{grid-area:partido}
  .resultado{
    grid-area:cuotas;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .btn-mercados{grid-area:mas;width:42px;min-height:48px}
  .cuota{min-height:48px}
  .col-partido .equipo{font-size:14px;white-space:normal;overflow-wrap:anywhere}
  .mercados-extra{grid-template-columns:1fr!important}
  .liga-seccion-header{align-items:flex-start}
  .pago-potencial strong,.pago-potencial strong > span{font-size:24px}
}

/* =======================
   TALÓN ESTABLE + CABECERA COMPACTA + SCROLL PERSONALIZADO
======================= */
.betslip-panel{
  padding-bottom:0;
  overflow:hidden!important;
  display:flex;
  flex-direction:column;
}

.betslip-header{
  flex:0 0 auto;
  min-height:58px;
  align-items:center;
  gap:10px;
  padding:11px 14px;
}

.betslip-title{
  min-width:0;
  margin:0;
  display:flex;
  align-items:baseline;
  gap:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ffbe2f;
  font-size:17px;
  line-height:1.2;
  font-weight:900;
}

.betslip-title-count{
  flex:0 0 auto;
  color:var(--lime);
  font-size:15px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.betslip-header-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.betslip-clear-all{
  width:36px;
  height:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #454e5d;
  border-radius:8px;
  background:linear-gradient(180deg,#343b47,#252b35);
  color:#dbe2ee;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,opacity .16s ease;
}

.betslip-clear-all svg{
  width:19px;
  height:19px;
  pointer-events:none;
}

.betslip-clear-all:not(:disabled):hover{
  border-color:#ff6262;
  background:linear-gradient(180deg,#d83b3b,#a82020);
  color:#fff;
  transform:translateY(-1px);
}

.betslip-clear-all:not(:disabled):active{
  transform:translateY(0);
}

.betslip-clear-all:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.betslip-selecciones{
  flex:1 1 auto;
  min-height:0;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#66748a #0f141c;
  padding:12px 8px 12px 14px;
  background:linear-gradient(180deg,rgba(13,17,24,.52),rgba(10,14,20,.18));
}

.betslip-selecciones::-webkit-scrollbar{
  width:10px;
}

.betslip-selecciones::-webkit-scrollbar-track{
  margin:8px 0;
  border-radius:999px;
  background:#0f141c;
  box-shadow:inset 0 0 0 1px #202837;
}

.betslip-selecciones::-webkit-scrollbar-thumb{
  min-height:44px;
  border:2px solid #0f141c;
  border-radius:999px;
  background:linear-gradient(180deg,#76859c,#4b576b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 4px rgba(0,0,0,.45);
}

.betslip-selecciones::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#91a0b8,#5b687e);
}

.betslip-selecciones::-webkit-scrollbar-corner{
  background:transparent;
}

.betslip-summary{
  flex:0 0 auto;
  padding:0 14px 14px;
  border-top:1px solid #262e3b;
  background:linear-gradient(180deg,#151a22 0%,#12171e 100%);
}

.ticket-actions{
  flex:0 0 auto;
  padding:0 14px 14px;
  background:#12171e;
}

@media (min-width:901px){
  .betslip-panel{
    height:calc(100vh - 88px)!important;
    height:calc(100dvh - 88px)!important;
    max-height:calc(100vh - 88px)!important;
    max-height:calc(100dvh - 88px)!important;
  }
}

@media (max-width:900px){
  .betslip-panel.activo{
    height:auto!important;
    max-height:none!important;
  }

  .betslip-title{
    font-size:16px;
  }

  .betslip-title-count{
    font-size:14px;
  }
}