@charset "utf-8";
:root{
  --bg:#090a15;
  --bg-2:#060711;
  --header:#303030;
  --panel:#343434;
  --panel-2:#4e4e4e;
  --panel-3:#151515;
  --line:#111111;
  --line-soft:#292929;
  --text:#f5f6f7;
  --muted:#b9bbc0;
  --yellow:#e7a715;
  --green:#07910d;
  --lime:#e7a715;
  --blue-1:#3e3fd7;
  --blue-2:#222ea4;
  --blue-3:#191e53;
  --blue-4:#11164f;
  --danger:#c52b25;
  --shadow:0 9px 24px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#090c14 0%, #060812 100%);
  min-height:100vh;
}
button,input{font:inherit}
button{cursor:pointer}

/* HEADER */
.header{
  position:sticky;
  top:0;
  z-index:1100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:58px;
  padding:10px 16px;
  background:linear-gradient(180deg,#15171c,#0f1117);
  border-bottom:2px solid #2435d7;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.logo-img{
  width:148px;
  height:auto;
  display:block;
  filter:brightness(0) invert(1);
}
.login-header{display:flex;align-items:center;gap:10px}
#login-form{display:flex;gap:8px;align-items:center}
#login-form input{
  width:190px;
  height:40px;
  border-radius:4px;
  border:1px solid #364150;
  background:#2b3039;
  color:var(--text);
  padding:0 12px;
  outline:none;
}
#login-form input::placeholder{color:#b0b8c7}
#login-form button,
#logout-btn{
  min-width:72px;
  height:40px;
  border:0;
  border-radius:4px;
  font-weight:800;
}
#login-form button{background:var(--green);color:#08140f}
#logout-btn{background:#393f49;color:#fff}
#logged-in{display:none;align-items:center;gap:10px}
#logged-in span{font-weight:700;color:var(--green)}

/* LAYOUT */
.app-layout{
  max-width:1760px;
  margin:0 auto;
  display:grid;
  grid-template-columns:220px minmax(760px,1fr) 320px;
  gap:12px;
  padding:14px;
  align-items:start;
}
.ligas-panel,.eventos-panel,.betslip-panel{
  background:linear-gradient(180deg,var(--panel),#12161d);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
}
.ligas-panel,.betslip-panel{
  position:sticky;
  top:74px;
  max-height:calc(100vh - 88px);
  overflow:auto;
}

/* SIDEBAR LIGAS */
.panel-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}
.panel-kicker{
  display:block;
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#8ea1bf;
  margin-bottom:4px;
  font-weight:700;
}
.panel-heading h2,
.panel-heading h3,
.eventos-toolbar h1{margin:0}
.panel-heading h2{font-size:18px;font-weight:900;text-transform:uppercase;color:#fff}
.panel-close{display:none}
.liga-search-wrap{padding:12px;border-bottom:1px solid var(--line-soft)}
#buscar-liga{
  width:100%;
  height:38px;
  border-radius:4px;
  border:1px solid #3452b4;
  background:#111521;
  color:var(--text);
  padding:0 12px;
}
.lista-ligas{display:flex;flex-direction:column;gap:8px;padding:12px}
.liga-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 12px;
  border-radius:6px;
  border:1px solid #2b3240;
  background:linear-gradient(180deg,#232832,#171b23);
  color:#eef2ff;
  font-weight:700;
  text-align:left;
}
.liga-item span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liga-item strong{
  flex:0 0 auto;
  min-width:34px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#293245;
  color:#d5e0ff;
  font-size:12px;
}
.liga-item:hover{border-color:#4655ef;background:linear-gradient(180deg,#2d3340,#1b2029)}
.liga-item.activa{
  border-color:#5666ff;
  background:linear-gradient(180deg,#364df5,#2837d3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.liga-item.activa strong{background:var(--lime);color:#0c1306}

/* EVENTOS PANEL */
.eventos-panel{overflow:hidden;min-width:0}
.eventos-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#1a1e26,#151920);
}
.eventos-toolbar h1{font-size:18px;font-weight:900;color:#fff}
.event-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:84px;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  background:#232834;
  color:#e9efff;
  font-weight:800;
  font-size:13px;
}
.mobile-ligas-btn{display:none}
.eventos-columnas{
  display:grid;
  grid-template-columns:82px minmax(280px,1fr) repeat(3,88px) 50px;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  background:linear-gradient(180deg,#202124,#17181b);
  border-bottom:1px solid var(--line);
  color:#d0d7e6;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.eventos-columnas span:nth-child(1),
.eventos-columnas span:nth-child(2){text-align:left}
.eventos-columnas span:nth-child(n+3){text-align:center}
.eventos-lista{padding:12px;background:#12151c}
.liga-seccion-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  margin:0 0 8px;
  border:1px solid #655128;
  border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#444039,#272521);
  color:var(--yellow);
  font-weight:900;
}
.liga-seccion-header small{color:#ffe7a0;font-size:12px;font-weight:700}
.evento{
  margin:0 0 8px;
  border:1px solid #2c39b4;
  border-radius:6px;
  overflow:hidden;
  background:#111742;
}
.evento-principal{
  display:grid;
  grid-template-columns:82px minmax(280px,1fr) repeat(3,88px) 50px;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  background:linear-gradient(180deg,var(--blue-3),var(--blue-4));
}
.evento-hora{
  text-align:left;
  font-weight:700;
  color:#fff;
}
.evento-hora strong{display:block;font-size:15px;line-height:1;color:#fff}
.evento-hora span{display:block;font-size:12px;line-height:1.15;color:#d8defa;margin-top:5px}
.col-partido{min-width:0}
.col-partido .equipo{
  font-size:17px;
  font-weight:800;
  line-height:1.12;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.col-partido .equipo + .equipo{margin-top:4px}
.resultado{
  display:contents;
}
.cuota{
  min-height:52px;
  border-radius:4px;
  border:1px solid #6274ff;
  background:linear-gradient(180deg,var(--blue-1),var(--blue-2));
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.cuota span{
  font-size:11px;
  font-weight:700;
  color:#ffe264;
}
.cuota strong{
  font-size:16px;
  line-height:1;
  font-weight:900;
  letter-spacing:.2px;
}
.cuota:hover{filter:brightness(1.08)}
.cuota.activa{
  background:linear-gradient(180deg,#39ec7f,#24b760);
  border-color:#48ff8c;
  color:#08160c;
}
.cuota.activa span,
.cuota.activa strong{color:#07140a}
.btn-mercados{
  width:50px;
  min-height:52px;
  border-radius:4px;
  border:1px solid #5260d9;
  background:linear-gradient(180deg,#2f365f,#242944);
  color:#fff;
  font-size:26px;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn-mercados:hover{background:linear-gradient(180deg,#394271,#2b3152)}
.mercados-extra{
  display:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:12px 14px 14px;
  background:#12161f;
  border-top:1px solid #2a3380;
}
.evento.activo .mercados-extra{display:grid}
.mercado{
  border:1px solid #293040;
  background:#171b24;
  border-radius:6px;
  padding:10px;
}
.titulo{
  margin-bottom:8px;
  color:var(--yellow);
  font-size:13px;
  font-weight:800;
}
.opciones-2,.opciones-3{display:grid;gap:8px}
.opciones-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opciones-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* BETSLIP */
.betslip-panel{padding-bottom:14px}
.betslip-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#1c1f26,#14181e);
}
.betslip-header h3{font-size:18px;font-weight:900;color:var(--yellow)}
.selection-count{
  min-width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--lime);
  color:#111;
  font-weight:900;
}
.betslip-selecciones{padding:12px 14px}
.betslip-empty{
  padding:18px 14px;
  border:1px dashed #45506a;
  border-radius:8px;
  color:#aeb9cf;
  text-align:center;
  background:#121621;
}
.seleccion-evento{
  position:relative;
  padding:12px 38px 12px 12px;
  border:1px solid #31384b;
  border-radius:8px;
  background:linear-gradient(180deg,#171c27,#10151e);
}
.seleccion-evento + .seleccion-evento{margin-top:10px}
.seleccion-liga{
  color:#a9b7d1;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:800;
  margin-bottom:3px;
}
.info-apuesta .equipos{font-size:15px;font-weight:800;color:#fff;line-height:1.2}
.info-apuesta .mercado{margin-top:4px;color:#d7def1;font-size:13px}
.cuota-betslip{margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.cuota-betslip span{color:#a9b7d1;font-size:12px;font-weight:700}
.cuota-betslip strong{font-size:18px;color:var(--yellow)}
.eliminar-apuesta{
  position:absolute;
  top:8px;right:8px;
  width:24px;height:24px;border-radius:50%;
  border:0;background:#2b3240;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.eliminar-apuesta:hover{background:var(--danger)}
.betslip-summary{padding:0 14px}
.linea{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;color:#fff;font-weight:700}
.linea strong{font-size:18px;color:var(--lime)}
.monto-label{display:block;margin-top:6px;margin-bottom:8px;color:#d0d7e8;font-size:13px;font-weight:700}
.monto-control{
  display:flex;align-items:center;gap:8px;
  height:44px;border:1px solid #3a4760;border-radius:8px;
  background:#101520;padding:0 12px;color:#fff;
}
.monto-control span{color:#d8e1f3;font-weight:800}
#monto-apuesta{width:100%;border:0;background:transparent;color:#fff;outline:none;font-size:18px;font-weight:800}
.pago-potencial{
  margin-top:14px;
  padding:14px 12px;
  border-radius:8px;
  background:linear-gradient(180deg,#1dbc5e,#18a651);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.pago-potencial span{text-transform:uppercase;font-size:12px;font-weight:900;color:#effff4}
.pago-potencial strong{font-size:20px;color:#fff;white-space:nowrap}
.ticket-actions{display:grid;gap:10px;padding:14px 14px 0}
.ticket-actions button{
  width:100%;min-height:42px;border:0;border-radius:8px;font-weight:900;
}
#descargar-ticket{background:var(--lime);color:#07120c}
#imprimir-ticket{background:#353d4a;color:#fff}


/* MOBILE ELEMENTS */
#toggle-betslip{display:none}
.overlay-ligas{display:none}

/* RESPONSIVE */
@media (max-width: 1440px){
  .app-layout{grid-template-columns:210px minmax(660px,1fr) 300px;gap:10px;padding:12px}
  .evento-principal,.eventos-columnas{grid-template-columns:74px minmax(230px,1fr) repeat(3,80px) 46px;gap:8px}
}

@media (max-width: 1180px){
  .app-layout{grid-template-columns:minmax(0,1fr) 310px;}
  .ligas-panel{
    position:fixed;left:0;top:0;bottom:0;z-index:1500;width:min(310px,84vw);max-height:none;
    transform:translateX(-105%);transition:transform .25s ease;border-radius:0;
  }
  .panel-close{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:0;background:#2b3240;color:#fff;font-size:22px}
  body.ligas-abiertas .ligas-panel{transform:translateX(0)}
  .overlay-ligas{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:1400}
  body.ligas-abiertas .overlay-ligas{opacity:1;pointer-events:auto}
  .mobile-ligas-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:6px;border:1px solid #3844bb;background:#20296f;color:#fff;font-weight:800}
}

@media (max-width: 900px){
  .app-layout{display:block;padding:10px}
  .eventos-panel,.betslip-panel{margin-bottom:12px}
  .betslip-panel{position:static;max-height:none}
  #toggle-betslip{
    position:fixed;left:12px;right:12px;bottom:12px;z-index:1200;display:flex;justify-content:center;align-items:center;gap:8px;
    min-height:48px;border:0;border-radius:999px;background:var(--lime);color:#08110c;font-weight:900;box-shadow:0 10px 30px rgba(0,0,0,.35)
  }
  .betslip-panel{display:none}
  .betslip-panel.activo{display:block;position:fixed;left:10px;right:10px;bottom:68px;top:72px;z-index:1250;overflow:auto}
}

@media (max-width: 720px){
  .header{padding:10px 12px;gap:10px}
  .logo-img{width:126px}
  #login-form input{width:140px}
  .eventos-toolbar{padding:12px}
  .eventos-toolbar h1{font-size:17px}
  .eventos-columnas,.evento-principal{
    grid-template-columns:60px minmax(120px,1fr) repeat(3,56px) 40px;
    gap:5px;
  }
  .eventos-columnas{padding:8px 10px;font-size:9px}
  .evento-principal{padding:8px 10px}
  .evento-hora strong{font-size:13px}
  .evento-hora span{font-size:10px}
  .col-partido .equipo{font-size:14px}
  .cuota{min-height:44px}
  .cuota span{font-size:9px}
  .cuota strong{font-size:13px}
  .btn-mercados{min-height:44px;font-size:22px}
  .mercados-extra{grid-template-columns:1fr; padding:10px}
}

/* =======================
   AJUSTES FINALES LIGAS + TALÓN
======================= */
.app-layout{grid-template-columns:240px minmax(720px,1fr) 340px}

.ligas-panel .panel-heading h2{font-size:20px; line-height:1.1}
.lista-ligas{gap:10px}
.liga-item{
  min-height:54px;
  align-items:center;
  padding:10px 12px;
}
.liga-item span{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.15;
  max-height:2.3em;
  font-size:14px;
}
.liga-item strong{
  min-width:38px;
  height:26px;
  font-size:13px;
  margin-left:auto;
}

.betslip-header{
  background:linear-gradient(180deg,#24211d,#17181d);
}
.betslip-header h3{color:#ffbe2f;font-size:17px}
.selection-count{
  width:38px;height:38px;font-size:18px;
  background:var(--lime); color:#111;
}
.betslip-board{
  padding:10px 14px 0;
}
.betslip-board-field{
  position:relative;
  height:168px;
  border:1px solid #323641;
  border-radius:8px;
  background:linear-gradient(180deg,#0d1016,#07090d);
  overflow:hidden;
}
.betslip-board-field::before,
.betslip-board-field::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border:2px solid rgba(255,255,255,.28);
}
.betslip-board-field::before{
  inset:16px 34px;
  clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);
  border-radius:2px;
}
.betslip-board-field::after{
  width:76px;height:76px;top:46px;border-radius:50%;
}
.betslip-board-field:before{box-shadow:0 0 0 999px rgba(0,0,0,0)}
.betslip-board-field .x{display:none}
.betslip-selecciones{padding-top:10px}
.betslip-empty{font-size:14px; line-height:1.45}
.betslip-summary{padding:0 14px}
.linea{padding:10px 0 8px;border-bottom:1px solid #232938}
.linea:last-of-type{border-bottom:0}
.linea span{font-size:14px;color:#eef2ff}
.linea strong{font-size:17px}
.linea-apuestas strong{color:#fff}
.monto-control-wrap{display:grid; gap:10px}
.monto-control{height:46px}
.monto-atajos{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
}
.monto-chip{
  min-height:40px;
  border-radius:5px;
  border:1px solid #373d49;
  background:linear-gradient(180deg,#4c5059,#2f333a);
  color:#fff;
  font-weight:800;
  font-size:15px;
}
.monto-chip:hover{filter:brightness(1.08)}
.monto-chip.activo{background:linear-gradient(180deg,#5968ff,#3342e3); border-color:#7381ff}
.monto-chip.limpiar{background:linear-gradient(180deg,#ec3325,#b50000)}
.pago-potencial{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.08);
}
.ticket-actions{padding-top:12px}
.ticket-actions button{font-size:16px}
#descargar-ticket{background:var(--lime)}
#imprimir-ticket{background:#1cb65c;color:#fff}

@media (max-width: 1440px){
  .app-layout{grid-template-columns:224px minmax(620px,1fr) 320px}
}

@media (max-width: 1180px){
  .app-layout{grid-template-columns:minmax(0,1fr) 320px}
}

@media (max-width: 720px){
  .monto-atajos{grid-template-columns:repeat(3,1fr)}
  .ligas-panel .panel-heading h2{font-size:18px}
}


/* OVERRIDES: talón sin campo y monto +/- */
.betslip-selecciones{padding-top:14px}
.betslip-board{display:none !important}
.monto-control-wrap{display:grid;gap:10px}
.monto-stepper{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 56px;
  gap:8px;
  align-items:stretch;
}
.step-btn{
  min-height:46px;
  border-radius:6px;
  border:1px solid #3b4250;
  background:linear-gradient(180deg,#474d58,#2d3138);
  color:#31e47a;
  font-size:24px;
  font-weight:900;
}
.step-btn:hover{filter:brightness(1.08)}
.monto-display{
  display:flex;
  align-items:center;
  gap:8px;
  height:46px;
  border:1px solid #3a4760;
  border-radius:8px;
  background:#101520;
  padding:0 12px;
  color:#fff;
}
.monto-display span{color:#d8e1f3;font-weight:800}
.monto-display #monto-apuesta{width:100%;border:0;background:transparent;color:#fff;outline:none;font-size:18px;font-weight:800}
.monto-atajos{grid-template-columns:repeat(6,1fr)}
.monto-chip{min-height:40px}
.monto-chip.limpiar{background:linear-gradient(180deg,#ec3325,#b50000)}
@media (max-width: 720px){
  .monto-stepper{grid-template-columns:48px minmax(0,1fr) 48px}
  .monto-atajos{grid-template-columns:repeat(6,1fr);gap:6px}
  .monto-chip{font-size:14px;padding:0}
}


/* OVERRIDES: input monto sin flechas y talón sin scroll interno */
#monto-apuesta::-webkit-outer-spin-button,
#monto-apuesta::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#monto-apuesta[type=number]{
  -moz-appearance: textfield;
  appearance: textfield;
}

.betslip-panel{
  max-height:none !important;
  overflow:visible !important;
}

/* Selecciones más compactas para soportar varias apuestas sin barra interna */
.seleccion-evento{
  padding:10px 34px 10px 10px;
}
.seleccion-evento + .seleccion-evento{margin-top:8px}
.seleccion-liga{
  font-size:10px;
  margin-bottom:2px;
}
.info-apuesta .equipos{
  font-size:14px;
  line-height:1.15;
}
.info-apuesta .mercado{
  margin-top:3px;
  font-size:12px;
}
.cuota-betslip{
  margin-top:6px;
}
.cuota-betslip strong{
  font-size:16px;
}

.monto-atajos{grid-template-columns:repeat(5,1fr)}

@media (max-width: 720px){
  .monto-atajos{grid-template-columns:repeat(5,1fr)}
}


/* AJUSTES FINALES DEL MONTO */
.monto-display{
  justify-content:center;
}
.monto-display > span{
  flex:0 0 auto;
}
.monto-display #monto-apuesta{
  flex:0 1 auto;
  width:92px;
  text-align:center;
  padding:0;
}
.linea-apuestas{
  display:none !important;
}

/* AJUSTE: columna de ligas más ancha y nombres en una sola línea */
.app-layout{
  grid-template-columns:290px minmax(700px,1fr) 340px;
}
.liga-item{
  min-height:48px;
  padding:8px 12px;
}
.liga-item span{
  display:block;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  max-height:none;
  font-size:14px;
  line-height:1.2;
}

@media (max-width: 1440px){
  .app-layout{grid-template-columns:270px minmax(600px,1fr) 320px}
}

@media (max-width: 1180px){
  .app-layout{grid-template-columns:minmax(0,1fr) 320px}
}


/* =======================
   PAGO POTENCIAL DESTACADO
======================= */
.pago-potencial{
  position:relative;
  overflow:hidden;
  min-height:78px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid #d7ff35;
  border-radius:10px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.22), transparent 30%),
    linear-gradient(135deg,#bfff00 0%,#8fd900 55%,#5cae00 100%);
  box-shadow:
    0 10px 24px rgba(143,217,0,.22),
    inset 0 1px 0 rgba(255,255,255,.45);
  color:#071008;
}

.pago-potencial::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.18) 50%,transparent 54% 100%);
  pointer-events:none;
}

.pago-potencial span{
  position:relative;
  z-index:1;
  display:block;
  font-size:11px;
  line-height:1;
  letter-spacing:1px;
  color:#183200;
  font-weight:900;
  text-transform:uppercase;
}

.pago-potencial strong{
  position:relative;
  z-index:1;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:4px;
  margin-left:auto;
  color:#071008;
  font-size:30px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.7px;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  white-space:nowrap;
}

.pago-potencial strong > span{
  display:inline;
  color:#071008;
  font-size:30px;
  letter-spacing:-.7px;
}

@media (max-width:720px){
  .pago-potencial{
    min-height:72px;
    padding:13px 14px;
  }

  .pago-potencial strong,
  .pago-potencial strong > span{
    font-size:27px;
  }
}

/* =======================
   DIMENSIONES ESTABLES ENTRE LIGAS
======================= */
html{
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

.app-layout{
  align-items: stretch;
}

.ligas-panel,
.eventos-panel,
.betslip-panel{
  align-self: stretch;
}

.eventos-panel{
  min-height: calc(100vh - 92px);
}

.eventos-lista{
  min-height: calc(100vh - 205px);
}

@media (max-width:1180px){
  .eventos-panel{
    min-height: calc(100vh - 86px);
  }

  .eventos-lista{
    min-height: calc(100vh - 198px);
  }
}

@media (max-width:900px){
  html{
    scrollbar-gutter: auto;
    overflow-y: auto;
  }

  .eventos-panel,
  .eventos-lista{
    min-height: auto;
  }
}

/* =======================
   PANEL DE LIGAS FIJO + BÚSQUEDA NATIVA
======================= */
.ligas-panel{
  position:sticky !important;
  top:74px !important;
  max-height:none !important;
  overflow:visible !important;
  align-self:start;
}

.liga-search-wrap{
  position:relative;
  overflow:visible;
}

#buscar-liga{
  cursor:text;
  user-select:text;
}

#buscar-liga:focus{
  outline:2px solid rgba(86,102,255,.55);
  outline-offset:1px;
  border-color:#7180ff;
}

@media(max-width:1180px){
  .ligas-panel{
    position:fixed !important;
    top:0 !important;
    max-height:100vh !important;
    overflow-y:auto !important;
  }
}

/* =======================
   ENCABEZADOS CENTRADOS Y ALINEADOS CON EVENTOS
======================= */
.eventos-columnas{
  margin-left:12px;
  margin-right:12px;
  width:calc(100% - 24px);
}

.eventos-columnas span{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center !important;
  min-width:0;
}

.evento-hora{
  text-align:center;
}

@media(max-width:720px){
  .eventos-columnas{
    margin-left:0;
    margin-right:0;
    width:100%;
  }
}

/* =======================
   MEJORAS 2026: SESIÓN, ESTADOS Y ACCESIBILIDAD
======================= */
[hidden]{display:none !important}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.login-header{position:relative;flex-wrap:wrap;justify-content:flex-end}
#login-form[hidden]{display:none!important}
#logged-in:not([hidden]){display:flex!important}
.admin-link{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid #3d4860;
  border-radius:4px;
  background:#202735;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}
.login-message{
  flex-basis:100%;
  min-height:14px;
  text-align:right;
  color:#ff9292;
  font-size:11px;
  font-weight:700;
}
.system-banner{
  position:sticky;
  top:60px;
  z-index:1050;
  padding:10px 16px;
  border-bottom:1px solid #8b6a21;
  background:#3a2c0f;
  color:#ffe8a6;
  text-align:center;
  font-size:13px;
  font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.toast-container{
  position:fixed;
  top:78px;
  right:16px;
  z-index:2200;
  display:grid;
  gap:10px;
  width:min(390px,calc(100vw - 32px));
  pointer-events:none;
}
.toast{
  opacity:0;
  transform:translateY(-8px);
  padding:13px 14px;
  border:1px solid #3a465a;
  border-radius:9px;
  background:#171d27;
  color:#fff;
  box-shadow:0 14px 36px rgba(0,0,0,.4);
  font-size:13px;
  line-height:1.45;
  font-weight:750;
  transition:opacity .2s ease,transform .2s ease;
}
.toast.visible{opacity:1;transform:translateY(0)}
.toast-success{border-color:#277d4b;background:#10271b}
.toast-warning{border-color:#806728;background:#2c2513;color:#ffe9a9}
.toast-error{border-color:#8d3333;background:#2b1518;color:#ffc5c5}
.toast-info{border-color:#3d4fa4;background:#171d3a;color:#d9dfff}

/* =======================
   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;
  }
}

/* =======================
   TEMA GRIS + AZUL + DORADO + VERDE 2026
   Paleta inspirada en la referencia visual proporcionada.
======================= */
body{
  background:
    radial-gradient(circle at 50% -20%,rgba(34,46,164,.18),transparent 38%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}

/* Cabecera: logo + búsqueda + consulta de ticket + acceso */
.header{
  display:grid;
  grid-template-columns:minmax(135px,160px) minmax(220px,1fr) minmax(340px,430px) minmax(250px,max-content);
  align-items:center;
  justify-content:stretch;
  gap:12px;
  min-height:74px;
  padding:8px 14px;
  background:linear-gradient(180deg,#373737 0%,#2d2d2d 100%);
  border-bottom:2px solid #111;
  box-shadow:0 7px 18px rgba(0,0,0,.38);
}

.logo{
  min-width:0;
  display:flex;
  align-items:center;
  text-decoration:none;
}
.logo-img{
  width:150px;
  max-width:100%;
  height:auto;
  filter:brightness(0) invert(1);
  opacity:.98;
}

.header-search,
.ticket-check-form{
  min-width:0;
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:11px;
  border:1px solid #111;
  border-radius:5px;
  background:linear-gradient(180deg,#202020 0%,#181818 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.03);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.header-search:focus-within,
.ticket-check-form:focus-within{
  border-color:var(--yellow);
  box-shadow:0 0 0 2px rgba(231,167,21,.18),inset 0 1px 0 rgba(255,255,255,.05);
}
.header-field-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:#a7a7a7;
}
#buscar-liga,
#ticket-code{
  min-width:0;
  width:100%;
  height:100%;
  padding:0 9px 0 0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  color:#f5f5f5;
  font-size:13px;
  font-weight:650;
  cursor:text;
  user-select:text;
}
#buscar-liga::placeholder,
#ticket-code::placeholder{
  color:#9b9b9b;
  opacity:1;
}
#buscar-liga:focus,
#ticket-code:focus{
  border-color:transparent;
  outline:0;
  box-shadow:none;
}

.ticket-checker{
  position:relative;
  min-width:0;
}
.ticket-check-form{
  width:100%;
}
.ticket-check-form button{
  align-self:stretch;
  flex:0 0 auto;
  min-width:132px;
  padding:0 13px;
  border:0;
  border-left:1px solid #111;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#f0b624 0%,#d59400 100%);
  color:#16120a;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
}
.ticket-check-form button:hover:not(:disabled){
  filter:brightness(1.07);
}
.ticket-check-form button:disabled{
  cursor:wait;
  opacity:.72;
}

.ticket-check-result{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  z-index:2600;
  padding:12px 13px;
  border:1px solid #555;
  border-radius:7px;
  background:linear-gradient(180deg,#2f2f2f 0%,#232323 100%);
  color:#f5f5f5;
  box-shadow:0 16px 34px rgba(0,0,0,.52);
}
.ticket-check-result::before{
  content:"";
  position:absolute;
  top:-6px;
  left:28px;
  width:10px;
  height:10px;
  border-top:1px solid currentColor;
  border-left:1px solid currentColor;
  background:#2f2f2f;
  transform:rotate(45deg);
  opacity:.8;
}
.ticket-check-result-heading{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.ticket-check-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:0 9px;
  border-radius:4px;
  background:#555;
  color:#fff;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.ticket-check-code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dedede;
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ticket-check-message{
  margin:8px 0 0;
  color:#d6d6d6;
  font-size:12px;
  line-height:1.4;
  font-weight:650;
}
.ticket-check-result.status-pendiente{
  border-color:#a77a16;
  color:var(--yellow);
}
.ticket-check-result.status-pendiente .ticket-check-badge{
  background:var(--yellow);
  color:#18130a;
}
.ticket-check-result.status-ganado{
  border-color:#118a18;
  color:#20bc29;
}
.ticket-check-result.status-ganado .ticket-check-badge{
  background:#07910d;
  color:#fff;
}
.ticket-check-result.status-perdido,
.ticket-check-result.status-error{
  border-color:#9a2b27;
  color:#d84a43;
}
.ticket-check-result.status-perdido .ticket-check-badge,
.ticket-check-result.status-error .ticket-check-badge{
  background:#b92520;
  color:#fff;
}
.ticket-check-result.status-loading{
  border-color:#585858;
  color:#bcbcbc;
}

.login-header{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:8px;
}
#login-form{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(130px,180px) auto;
  align-items:center;
  gap:8px;
}
#login-form input{
  width:100%;
  height:42px;
  padding:0 11px;
  border:1px solid #111;
  border-radius:5px;
  outline:0;
  background:linear-gradient(180deg,#202020 0%,#181818 100%);
  color:#f5f5f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#login-form input:focus{
  border-color:var(--yellow);
  box-shadow:0 0 0 2px rgba(231,167,21,.18);
}
#login-form input::placeholder{color:#9b9b9b}
#login-form button,
#logout-btn{
  height:42px;
  border-radius:5px;
}
#login-form button{
  min-width:78px;
  background:linear-gradient(180deg,#10ad18 0%,#07850c 100%);
  color:#fff;
  border:1px solid #056d09;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 7px rgba(0,0,0,.3);
}
#login-form button:hover:not(:disabled){filter:brightness(1.08)}
#logged-in:not([hidden]){
  min-width:0;
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
#logged-in span{color:#22c82b}
.admin-link{
  height:42px;
  min-height:42px;
  border-color:#6d5318;
  background:linear-gradient(180deg,#4a3b1b,#302813);
  color:#f7d16b;
}
#logout-btn{
  border:1px solid #151515;
  background:linear-gradient(180deg,#505050,#383838);
  color:#fff;
}
.login-message{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  width:max-content;
  max-width:340px;
  min-height:0;
  color:#ff9b96;
  text-align:right;
  font-size:10px;
  line-height:1.25;
  pointer-events:none;
}

/* 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}
}


/* =======================
   AJUSTE 2026-07-23: CABECERA SIN LOGO, ANCHO COMPLETO Y CONSULTA DETALLADA
======================= */

/* Cabecera: buscador + verificador + ingreso, sin espacio reservado para logotipo. */
.header{
  grid-template-columns:minmax(260px,1fr) minmax(420px,1.25fr) minmax(248px,max-content);
  grid-template-areas:"search checker login";
  gap:10px;
  min-height:66px;
  padding:8px clamp(10px,1vw,18px);
}
.header-search{grid-area:search}
.ticket-checker{grid-area:checker}
.login-header{grid-area:login}
.logo{display:none!important}

/* El contenido utiliza todo el ancho disponible del navegador. */
.app-layout{
  width:100%;
  max-width:none;
  margin:0;
  grid-template-columns:clamp(230px,16vw,290px) minmax(0,1fr) clamp(310px,19vw,360px);
  gap:10px;
  padding:12px clamp(8px,1vw,18px);
}

/* Se eliminó el módulo superior de eventos. Las columnas quedan como inicio del panel. */
.eventos-toolbar{display:none!important}
.eventos-columnas{
  width:100%!important;
  margin:0!important;
  border-radius:9px 9px 0 0;
}
.eventos-lista{
  min-height:calc(100vh - 120px);
  padding:10px 12px 14px;
}
.eventos-mobile-ligas{display:none}

/* Posición coherente con la nueva altura de la cabecera. */
.system-banner{top:66px}
@media (min-width:921px){
  .ligas-panel,
  .betslip-panel{top:78px!important}
  .betslip-panel{
    height:calc(100vh - 90px)!important;
    height:calc(100dvh - 90px)!important;
    max-height:calc(100vh - 90px)!important;
    max-height:calc(100dvh - 90px)!important;
  }
}

/* Resultado público detallado del ticket. */
.ticket-check-result{
  max-height:min(680px,calc(100vh - 88px));
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:#7a7a7a #171717;
  padding:13px;
}
.ticket-check-result::-webkit-scrollbar{width:10px}
.ticket-check-result::-webkit-scrollbar-track{
  margin:7px 0;
  border-radius:999px;
  background:#171717;
  box-shadow:inset 0 0 0 1px #333;
}
.ticket-check-result::-webkit-scrollbar-thumb{
  min-height:46px;
  border:2px solid #171717;
  border-radius:999px;
  background:linear-gradient(180deg,#8a8a8a 0%,#565656 100%);
}
.ticket-check-result::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#e7b634 0%,#a9750a 100%);
}
.ticket-check-message{
  margin-top:9px;
  padding-bottom:11px;
  border-bottom:1px solid #4a4a4a;
}
.ticket-check-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:11px;
}
.ticket-check-summary-item{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:9px 10px;
  border:1px solid #4b4b4b;
  border-radius:6px;
  background:linear-gradient(180deg,#292929 0%,#202020 100%);
}
.ticket-check-summary-item span{
  color:#aaa;
  font-size:10px;
  line-height:1.1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.45px;
}
.ticket-check-summary-item strong{
  min-width:0;
  color:#fff;
  font-size:13px;
  line-height:1.2;
  font-weight:900;
  overflow-wrap:anywhere;
}
.ticket-check-summary-item.is-emphasis{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-color:#0b7810;
  background:linear-gradient(180deg,#128c18 0%,#086d0d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.ticket-check-summary-item.is-emphasis span,
.ticket-check-summary-item.is-emphasis strong{color:#fff}
.ticket-check-summary-item.is-emphasis strong{font-size:17px;white-space:nowrap}

.ticket-check-selection-section{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid #4a4a4a;
}
.ticket-check-selection-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.ticket-check-selection-section-heading strong{
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.ticket-check-selection-section-heading span{
  color:#b8b8b8;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.ticket-check-selections{display:grid;gap:8px}
.ticket-check-selection{
  min-width:0;
  padding:10px;
  border:1px solid #424242;
  border-left-width:4px;
  border-radius:7px;
  background:linear-gradient(180deg,#242424 0%,#1b1b1b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.ticket-check-selection.status-pendiente{border-left-color:var(--yellow)}
.ticket-check-selection.status-ganado{border-left-color:#16a51d}
.ticket-check-selection.status-perdido{border-left-color:#c8322b}
.ticket-check-selection-heading{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.ticket-check-selection-identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:7px;
}
.ticket-check-selection-number{
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  background:#444;
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.ticket-check-selection-league{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#b8b8b8;
  font-size:10px;
  line-height:1.15;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.ticket-check-selection-status{
  flex:0 0 auto;
  min-height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  border-radius:4px;
  background:#555;
  color:#fff;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.ticket-check-selection.status-pendiente .ticket-check-selection-status{
  background:var(--yellow);
  color:#1c1609;
}
.ticket-check-selection.status-ganado .ticket-check-selection-status{background:#0b8b11}
.ticket-check-selection.status-perdido .ticket-check-selection-status{background:#b92520}
.ticket-check-selection-match{
  display:block;
  margin-top:8px;
  color:#fff;
  font-size:13px;
  line-height:1.25;
  font-weight:900;
  overflow-wrap:anywhere;
}
.ticket-check-selection-meta{
  margin-top:4px;
  color:#aaa;
  font-size:10px;
  line-height:1.25;
  font-weight:700;
}
.ticket-check-selection-details{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(58px,.45fr);
  gap:6px;
  margin-top:9px;
}
.ticket-check-selection-details > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:7px 8px;
  border:1px solid #3b3b3b;
  border-radius:5px;
  background:#181818;
}
.ticket-check-selection-details span{
  color:#929292;
  font-size:9px;
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.ticket-check-selection-details strong{
  color:#f4f4f4;
  font-size:11px;
  line-height:1.2;
  font-weight:850;
  overflow-wrap:anywhere;
}
.ticket-check-selection-details > div:last-child strong{
  color:var(--yellow);
  font-size:13px;
}
.ticket-check-selection-empty{
  margin:0;
  padding:12px;
  border:1px dashed #555;
  border-radius:6px;
  color:#bbb;
  font-size:11px;
  line-height:1.4;
  text-align:center;
}

@media (max-width:1440px){
  .app-layout{
    grid-template-columns:clamp(220px,18vw,270px) minmax(0,1fr) clamp(300px,22vw,330px);
    gap:9px;
    padding:10px;
  }
}

@media (max-width:1180px){
  .header{
    grid-template-columns:minmax(210px,.9fr) minmax(350px,1.2fr) minmax(215px,max-content);
    grid-template-areas:"search checker login";
    gap:8px;
    min-height:66px;
  }
  .app-layout{grid-template-columns:minmax(0,1fr) clamp(300px,29vw,330px)}
  .eventos-mobile-ligas{
    width:calc(100% - 16px);
    min-height:40px;
    margin:8px 8px 0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
  }
  .eventos-columnas{border-radius:0}
  .eventos-lista{min-height:calc(100vh - 166px)}
}

@media (max-width:920px){
  .header{
    grid-template-columns:minmax(0,.9fr) minmax(330px,1.1fr);
    grid-template-areas:
      "search checker"
      "login login";
    gap:8px 10px;
    min-height:112px;
    padding:8px 10px;
  }
  .login-header{
    width:auto;
    justify-self:end;
  }
  #login-form{width:min(100%,330px)}
  .system-banner{top:112px}
  .toast-container{top:128px}
}

@media (min-width:901px) and (max-width:920px){
  .ligas-panel,
  .betslip-panel{top:124px!important}
  .betslip-panel{
    height:calc(100vh - 136px)!important;
    height:calc(100dvh - 136px)!important;
    max-height:calc(100vh - 136px)!important;
    max-height:calc(100dvh - 136px)!important;
  }
}

@media (max-width:900px){
  .app-layout{display:block;width:100%;padding:8px}
  .eventos-lista{min-height:auto}
  .betslip-panel.activo{top:122px}
}

@media (max-width:680px){
  .header{
    position:relative;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "search"
      "checker"
      "login";
    gap:8px;
    min-height:0;
    padding:9px;
  }
  .header-search,
  .ticket-checker,
  .login-header{width:100%}
  .login-header{
    justify-self:stretch;
    flex-wrap:wrap;
  }
  #login-form{
    width:100%;
    grid-template-columns:minmax(0,1fr) auto;
    margin:0;
  }
  .ticket-check-result{
    position:static;
    max-height:min(620px,calc(100vh - 90px));
    margin-top:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.38);
  }
  .ticket-check-result::before{display:none}
  .ticket-check-selection-details{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr) minmax(54px,.42fr);
  }
  .system-banner{position:relative;top:auto}
  .toast-container{top:10px}
  .betslip-panel.activo{top:10px}
}

@media (max-width:430px){
  .ticket-check-summary{grid-template-columns:1fr}
  .ticket-check-summary-item.is-emphasis{grid-column:auto}
  .ticket-check-selection-details{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ticket-check-selection-details > div:first-child{grid-column:1 / -1}
  .ticket-check-selection-details > div:last-child strong{font-size:12px}
}

/* Ajustes finales del verificador detallado. */
.ticket-check-close{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #555;
  border-radius:50%;
  background:#222;
  color:#ddd;
  font-size:19px;
  line-height:1;
  font-weight:700;
}
.ticket-check-close:hover{
  border-color:#a93631;
  background:#a92823;
  color:#fff;
}
.ticket-check-selection-section{flex:1 1 auto}

/* El acceso a ligas en pantallas reducidas queda como botón compacto,
   no como reemplazo del módulo eliminado. */
@media (max-width:1180px){
  .eventos-mobile-ligas{
    width:auto!important;
    min-height:36px!important;
    margin:8px 8px 0!important;
    padding:0 13px!important;
    border-radius:6px!important;
  }
}