@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}
}