/* =========================================================
   GANASTE — RESPONSIVE1A
   Capa móvil final de la pizarra pública.
   Objetivos:
   - No modificar escritorio (>900px).
   - Reducir altura de cabecera en teléfono.
   - Inputs >=16px para evitar zoom automático en iPhone.
   - Partidos/cuotas cómodos para uso táctil.
   - Drawer de ligas con un solo scroll claro.
   - Talón como bottom sheet con safe-area.
   - Verificación de ticket como panel móvil independiente.
   ========================================================= */

@media screen and (max-width:900px){
  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    scrollbar-gutter:auto!important;
  }

  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));
    -webkit-text-size-adjust:100%;
  }

  button,
  input,
  a{
    -webkit-tap-highlight-color:transparent;
  }

  button{
    touch-action:manipulation;
  }

  /* ---------- CABECERA MÓVIL ---------- */
  .header{
    position:sticky!important;
    top:0!important;
    z-index:1800!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "search"
      "checker"
      "login"!important;
    align-items:stretch!important;
    gap:4px!important;
    width:100%!important;
    min-height:0!important;
    padding:5px 7px calc(5px + env(safe-area-inset-top,0px))!important;
    border-bottom:1px solid #141414!important;
    background:linear-gradient(180deg,#343434 0%,#292929 100%)!important;
    box-shadow:0 6px 18px rgba(0,0,0,.34)!important;
  }

  .header-search{
    grid-area:search!important;
  }

  .ticket-checker{
    grid-area:checker!important;
  }

  .login-header{
    grid-area:login!important;
    width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
    margin:0!important;
  }

  .header-search,
  .ticket-check-form{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }

  .header-field-icon{
    width:18px!important;
    height:18px!important;
    flex-basis:18px!important;
  }

  #buscar-liga,
  #ticket-code,
  #login-form input,
  #monto-apuesta,
  .points1-dialog input{
    font-size:16px!important;
  }

  #buscar-liga,
  #ticket-code{
    min-width:0!important;
    padding-right:8px!important;
  }

  .ticket-check-form button{
    min-width:118px!important;
    min-height:40px!important;
    padding:0 9px!important;
    font-size:10.5px!important;
    border-radius:0 8px 8px 0!important;
  }

  /* El login pasa a una sola fila para no ocupar media pantalla. */
  #login-form{
    width:100%!important;
    max-width:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr) 80px!important;
    gap:4px!important;
    align-items:stretch!important;
    margin:0!important;
  }

  #login-form #caja-ruc,
  #login-form #password{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    padding:0 9px!important;
    border-radius:8px!important;
  }

  #login-form button{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 7px!important;
    border-radius:8px!important;
    font-size:12px!important;
  }

  .fullscreen-toggle{
    display:none!important;
  }

  .login-message{
    min-height:0!important;
    margin:0!important;
    padding:0 2px!important;
    font-size:11px!important;
    line-height:1.25!important;
    text-align:left!important;
  }

  #logged-in:not([hidden]){
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    gap:6px!important;
    align-items:center!important;
  }

  #cashier-identity{
    grid-column:1 / -1!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }

  .cashier-balance,
  #mi-caja-btn,
  #logout-btn{
    min-height:42px!important;
    height:42px!important;
    border-radius:8px!important;
    padding:0 10px!important;
    font-size:12px!important;
  }

  body.terminal-session #logged-in:not([hidden]){
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  body.terminal-session #cashier-identity{
    grid-column:1 / -1!important;
  }

  /* El resultado no debe empujar todo el sitio hacia abajo. */
  .ticket-check-result{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:calc(8px + env(safe-area-inset-top,0px))!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    z-index:4200!important;
    width:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:14px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    border-radius:14px!important;
    box-shadow:0 20px 70px rgba(0,0,0,.72)!important;
  }

  .ticket-check-result::before{
    display:none!important;
  }

  .ticket-check-close{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }

  .ticket-check-selection-status{
    min-height:26px!important;
    font-size:10px!important;
  }

  /* ---------- CONTENIDO ---------- */
  .app-layout{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:6px 6px 8px!important;
  }

  .eventos-panel{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }

  .eventos-mobile-ligas{
    width:calc(100% - 12px)!important;
    min-height:40px!important;
    height:40px!important;
    margin:5px!important;
    padding:0 14px!important;
    justify-content:center!important;
    border-radius:9px!important;
    font-size:13px!important;
    letter-spacing:.01em!important;
  }

  .eventos-lista{
    min-height:0!important;
    padding:0 6px calc(82px + env(safe-area-inset-bottom,0px))!important;
    scroll-padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;
  }

  .liga-seccion-header{
    min-height:42px!important;
    margin:6px 0!important;
    padding:8px 10px!important;
    gap:8px!important;
    border-radius:8px!important;
    font-size:12px!important;
    line-height:1.2!important;
  }

  .liga-seccion-header small{
    font-size:10px!important;
    line-height:1.2!important;
  }

  /* ---------- DRAWER DE LIGAS ---------- */
  .ligas-panel{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    z-index:3000!important;
    display:flex!important;
    flex-direction:column!important;
    width:min(88vw,360px)!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    border-radius:0 14px 14px 0!important;
    box-shadow:18px 0 50px rgba(0,0,0,.48)!important;
  }

  .panel-heading-sin-titulo{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:52px!important;
    padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px!important;
  }

  .panel-heading-sin-titulo::before{
    content:"Ligas y torneos";
    display:block;
    padding-left:6px;
    color:#f7c51e;
    font-size:14px;
    font-weight:900;
    letter-spacing:.01em;
  }

  .panel-close{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    font-size:25px!important;
  }

  .lista-ligas{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
  }

  .ligas-fijo-superior{
    flex:0 0 auto!important;
    padding:8px!important;
  }

  .paises-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    padding:7px 8px calc(12px + env(safe-area-inset-bottom,0px))!important;
    gap:5px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }

  .paises-scroll::-webkit-scrollbar{
    width:0!important;
    height:0!important;
    display:none!important;
  }

  .principal-item,
  .pais-item,
  .liga-item,
  .volver-paises,
  .liga-todos-eventos{
    min-height:46px!important;
    border-radius:8px!important;
  }

  .pais-item{
    padding:8px 10px!important;
    font-size:12px!important;
  }

  .pais-bandera{
    width:28px!important;
    height:19px!important;
  }

  .overlay-ligas{
    z-index:2900!important;
    backdrop-filter:blur(2px);
  }

  /* ---------- TALÓN COMO BOTTOM SHEET ---------- */
  #toggle-betslip{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    z-index:2200!important;
    min-height:54px!important;
    height:54px!important;
    padding:0 18px!important;
    border-radius:12px!important;
    font-size:15px!important;
    letter-spacing:.01em!important;
    box-shadow:0 12px 30px rgba(0,0,0,.44)!important;
  }

  .betslip-panel{
    display:none!important;
  }

  .betslip-panel.activo{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    z-index:3600!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:min(90vh,760px)!important;
    height:min(90dvh,760px)!important;
    max-height:90vh!important;
    max-height:90dvh!important;
    margin:0!important;
    padding:0 0 env(safe-area-inset-bottom,0px)!important;
    overflow:hidden!important;
    border:1px solid #444!important;
    border-bottom:0!important;
    border-radius:18px 18px 0 0!important;
    background:#171717!important;
    box-shadow:0 -18px 60px rgba(0,0,0,.62)!important;
  }

  .betslip-header{
    flex:0 0 auto!important;
    min-height:58px!important;
    padding:10px 12px!important;
    border-radius:18px 18px 0 0!important;
  }

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

  .betslip-close,
  .betslip-clear-all{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }

  .betslip-panel.activo .betslip-selecciones{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:10px 12px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }

  .seleccion-evento{
    padding:11px 38px 11px 11px!important;
    border-radius:9px!important;
  }

  .betslip-summary{
    padding:0 12px 12px!important;
  }

  .monto-stepper{
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    gap:7px!important;
  }

  .step-btn,
  .monto-display{
    min-height:46px!important;
    height:46px!important;
  }

  .monto-chip{
    min-height:42px!important;
    height:42px!important;
  }

  .ticket-actions{
    padding:0 12px 12px!important;
  }

  .ticket-actions button{
    min-height:48px!important;
  }

  /* Mensajes del sistema no deben quedar debajo de la cabecera. */
  .system-banner{
    position:relative!important;
    top:auto!important;
  }

  .toast-container{
    top:calc(8px + env(safe-area-inset-top,0px))!important;
    right:8px!important;
    width:calc(100vw - 16px)!important;
  }
}

/* =========================================================
   TARJETA DE EVENTO PARA TELÉFONO / TABLET PEQUEÑA
   ========================================================= */
@media screen and (max-width:820px){
  .eventos-columnas{
    display:none!important;
  }

  .evento{
    margin:0 0 8px!important;
    border-radius:10px!important;
  }

  .evento-principal{
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) 44px!important;
    grid-template-areas:
      "hora partido mas"
      "cuotas cuotas cuotas"!important;
    gap:8px!important;
    padding:10px!important;
    align-items:center!important;
  }

  .evento-hora{
    grid-area:hora!important;
    text-align:center!important;
    align-self:start!important;
    padding-top:2px!important;
  }

  .evento-hora strong{
    font-size:14px!important;
    line-height:1.05!important;
  }

  .evento-hora span{
    margin-top:5px!important;
    font-size:10px!important;
    line-height:1.15!important;
  }

  .col-partido{
    grid-area:partido!important;
    min-width:0!important;
  }

  .col-partido .equipo{
    display:block!important;
    min-width:0!important;
    font-size:14px!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }

  .col-partido .equipo + .equipo{
    margin-top:5px!important;
  }

  .resultado{
    grid-area:cuotas!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    min-width:0!important;
  }

  .evento-principal .cuota{
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;
    padding:0 4px!important;
    border-radius:7px!important;
  }

  .evento-principal .cuota span{
    font-size:10px!important;
  }

  .evento-principal .cuota strong{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:0!important;
    font-size:16px!important;
    text-align:center!important;
    justify-content:center!important;
  }

  .btn-mercados{
    grid-area:mas!important;
    width:44px!important;
    min-width:44px!important;
    min-height:52px!important;
    height:52px!important;
    border-radius:7px!important;
    font-size:24px!important;
  }

  /* Mercados: título arriba, opciones debajo. */
  .mercados-extra--catalogo .mercado-expandido{
    grid-template-columns:1fr!important;
    gap:4px!important;
    padding:8px 8px 9px!important;
  }

  .mercados-extra--catalogo .mercado-expandido + .mercado-expandido{
    border-top:1px solid rgba(255,255,255,.10)!important;
  }

  .mercados-extra--catalogo .mercado-expandido__titulo{
    min-height:26px!important;
    padding:0 2px!important;
    font-size:13px!important;
    line-height:1.2!important;
  }

  .mercado-opciones{
    gap:6px!important;
  }

  /* Mercados de tres resultados siempre en una sola fila móvil. */
  .mercado-opciones--3{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .mercado-opciones--3 .cuota span{
    min-width:0!important;
    padding:0 4px!important;
    font-size:10.5px!important;
    white-space:nowrap!important;
  }

  .mercado-opciones--3 .cuota strong{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    padding:0 3px!important;
    font-size:15px!important;
  }

  .mercados-extra--catalogo .cuota{
    min-height:46px!important;
    height:46px!important;
    border-radius:7px!important;
  }

  .mercados-extra--catalogo .cuota span{
    padding:0 8px!important;
    font-size:12px!important;
  }

  .mercados-extra--catalogo .cuota strong{
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    font-size:16px!important;
  }
}

@media screen and (max-width:520px){
  .header{
    padding-left:6px!important;
    padding-right:6px!important;
    gap:4px!important;
  }

  .header-search,
  .ticket-check-form{
    height:39px!important;
    min-height:39px!important;
  }

  #login-form{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.78fr) 76px!important;
    gap:5px!important;
  }

  #login-form #caja-ruc,
  #login-form #password,
  #login-form button{
    height:39px!important;
    min-height:39px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #login-form button{
    font-size:11px!important;
  }

  .ticket-check-form button{
    min-width:110px!important;
    font-size:10px!important;
  }

  .eventos-mobile-ligas{
    width:calc(100% - 8px)!important;
    margin:4px!important;
  }

  .eventos-lista{
    padding:0 4px calc(80px + env(safe-area-inset-bottom,0px))!important;
    scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;
  }

  .liga-seccion-header{
    margin:5px 0!important;
  }

  .evento-principal{
    grid-template-columns:54px minmax(0,1fr) 42px!important;
    gap:7px!important;
    padding:9px!important;
  }

  .btn-mercados{
    width:42px!important;
    min-width:42px!important;
  }

  .resultado{
    gap:5px!important;
  }

  .evento-principal .cuota{
    min-height:50px!important;
    height:50px!important;
  }

  .col-partido .equipo{
    font-size:13.5px!important;
  }

  .mercados-extra--catalogo .cuota span{
    font-size:11px!important;
  }

  #toggle-betslip{
    left:6px!important;
    right:6px!important;
    bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;
  }

  .ticket-check-summary{
    grid-template-columns:1fr!important;
  }

  .ticket-check-summary-item.is-emphasis{
    grid-column:auto!important;
  }

  .ticket-check-selection-details{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .ticket-check-selection-details > div:first-child{
    grid-column:1 / -1!important;
  }
}

@media screen and (max-width:390px){
  #login-form{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.7fr) 72px!important;
  }

  #login-form input{
    font-size:16px!important;
  }

  #login-form button{
    padding-left:5px!important;
    padding-right:5px!important;
    font-size:10.5px!important;
  }

  .ticket-check-form button{
    min-width:102px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }

  .evento-principal{
    grid-template-columns:50px minmax(0,1fr) 40px!important;
    padding:8px!important;
  }

  .btn-mercados{
    width:40px!important;
    min-width:40px!important;
  }

  .evento-hora strong{
    font-size:13px!important;
  }

  .evento-hora span{
    font-size:9px!important;
  }
}


/* =========================================================
   RESPONSIVE1A FIX1 — compactación móvil y mercados
   ========================================================= */
@media screen and (max-width:520px){
  .mercado-opciones--3{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .mercado-opciones--3 .cuota{
    min-width:0!important;
  }

  .mercado-opciones--3 .cuota span{
    min-width:0!important;
    padding:0 4px!important;
    font-size:10.5px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .mercado-opciones--3 .cuota strong{
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    padding:0 3px!important;
    font-size:15px!important;
  }
}

@media screen and (max-width:390px){
  .mercado-opciones--3 .cuota span{
    font-size:9.5px!important;
    padding:0 2px!important;
  }

  .mercado-opciones--3 .cuota strong{
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    font-size:14px!important;
  }
}

/* =========================================================
   RESPONSIVE1A FIX2 — cabecera de partido móvil
   Separa hora/fecha, equipos, botón +/- y fila de cuotas.
   ========================================================= */
@media screen and (max-width:820px){
  .evento-principal{
    grid-template-columns:68px minmax(0,1fr) 42px!important;
    grid-template-areas:
      "hora partido mas"
      "cuotas cuotas cuotas"!important;
    column-gap:9px!important;
    row-gap:9px!important;
    padding:9px 10px 10px!important;
    align-items:stretch!important;
  }

  .evento-hora{
    grid-area:hora!important;
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:50px!important;
    padding:5px 4px!important;
    margin:0!important;
    border-radius:7px!important;
    background:rgba(6,12,55,.24)!important;
    border:1px solid rgba(255,255,255,.06)!important;
    text-align:center!important;
  }

  .evento-hora strong{
    display:block!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
  }

  .evento-hora span{
    display:block!important;
    margin:4px 0 0!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
    letter-spacing:-.08px!important;
    opacity:.92!important;
  }

  .col-partido{
    grid-area:partido!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:stretch!important;
    min-width:0!important;
    min-height:50px!important;
    padding:1px 0!important;
    text-align:left!important;
  }

  .col-partido .equipo{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.18!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .col-partido .equipo + .equipo{
    margin-top:4px!important;
  }

  .btn-mercados{
    grid-area:mas!important;
    align-self:center!important;
    width:42px!important;
    min-width:42px!important;
    height:50px!important;
    min-height:50px!important;
    margin:0!important;
  }

  .resultado{
    grid-area:cuotas!important;
    margin-top:0!important;
    padding-top:0!important;
    gap:6px!important;
    align-self:stretch!important;
  }

  .evento-principal .cuota{
    min-height:50px!important;
    height:50px!important;
  }
}

@media screen and (max-width:520px){
  .evento-principal{
    grid-template-columns:64px minmax(0,1fr) 40px!important;
    column-gap:7px!important;
    row-gap:8px!important;
    padding:8px 9px 9px!important;
  }

  .evento-hora{
    min-height:48px!important;
    padding:5px 3px!important;
  }

  .evento-hora strong{
    font-size:13.5px!important;
  }

  .evento-hora span{
    font-size:8.8px!important;
  }

  .col-partido{
    min-height:48px!important;
  }

  .col-partido .equipo{
    font-size:13.5px!important;
    line-height:1.17!important;
  }

  .btn-mercados{
    width:40px!important;
    min-width:40px!important;
    height:48px!important;
    min-height:48px!important;
  }

  .evento-principal .cuota{
    height:50px!important;
    min-height:50px!important;
  }
}

@media screen and (max-width:390px){
  .evento-principal{
    grid-template-columns:60px minmax(0,1fr) 38px!important;
    column-gap:6px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }

  .evento-hora span{
    font-size:8.3px!important;
    letter-spacing:-.16px!important;
  }

  .col-partido .equipo{
    font-size:13px!important;
  }

  .btn-mercados{
    width:38px!important;
    min-width:38px!important;
  }
}

/* =========================================================
   RESPONSIVE1A FIX3 — Talón móvil adaptativo
   - Altura según contenido, sin huecos artificiales.
   - Scroll solo en la lista cuando hay muchas selecciones.
   - Resumen y pago potencial más compactos.
   ========================================================= */
@media screen and (max-width:820px){
  .betslip-panel.activo{
    height:auto!important;
    min-height:0!important;
    max-height:calc(100vh - 10px)!important;
    max-height:calc(100dvh - 10px)!important;
  }

  .betslip-header{
    min-height:54px!important;
    padding:8px 10px!important;
  }

  .betslip-title{
    font-size:15.5px!important;
    line-height:1.15!important;
  }

  .betslip-close,
  .betslip-clear-all{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }

  .betslip-panel.activo .betslip-selecciones{
    flex:0 1 auto!important;
    min-height:0!important;
    max-height:min(46vh,430px)!important;
    max-height:min(46dvh,430px)!important;
    padding:9px 10px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }

  .betslip-panel.activo .betslip-empty{
    min-height:58px!important;
    margin:0!important;
    padding:14px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:13.5px!important;
    line-height:1.35!important;
  }

  .seleccion-evento{
    padding:9px 34px 9px 10px!important;
    border-radius:8px!important;
  }

  .seleccion-evento + .seleccion-evento{
    margin-top:7px!important;
  }

  .seleccion-liga{
    margin-bottom:2px!important;
    font-size:9.5px!important;
    line-height:1.15!important;
  }

  .info-apuesta .equipos{
    font-size:13.5px!important;
    line-height:1.16!important;
  }

  .info-apuesta .mercado{
    margin-top:3px!important;
    font-size:11.5px!important;
    line-height:1.2!important;
  }

  .cuota-betslip{
    margin-top:5px!important;
  }

  .cuota-betslip strong{
    font-size:16px!important;
  }

  .betslip-summary{
    flex:0 0 auto!important;
    padding:0 10px 10px!important;
  }

  .betslip-summary .linea{
    padding:8px 0 7px!important;
  }

  .betslip-summary .linea span{
    font-size:13px!important;
  }

  .betslip-summary .linea strong{
    font-size:18px!important;
  }

  .monto-label{
    margin-top:4px!important;
    margin-bottom:6px!important;
    font-size:12.5px!important;
  }

  .monto-control-wrap{
    gap:8px!important;
  }

  .monto-stepper{
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    gap:7px!important;
  }

  .step-btn,
  .monto-display{
    min-height:44px!important;
    height:44px!important;
  }

  .monto-display #monto-apuesta{
    font-size:18px!important;
  }

  .monto-atajos{
    gap:6px!important;
  }

  .monto-chip{
    min-height:40px!important;
    height:40px!important;
    font-size:14px!important;
  }

  .pago-potencial{
    min-height:64px!important;
    margin-top:10px!important;
    padding:10px 13px!important;
  }

  .pago-potencial span{
    font-size:10.5px!important;
  }

  .pago-potencial strong,
  .pago-potencial strong > span{
    font-size:24px!important;
  }

  .ticket-actions{
    flex:0 0 auto!important;
    padding:0 10px 10px!important;
  }
}

@media screen and (max-width:390px){
  .betslip-panel.activo .betslip-selecciones{
    max-height:min(43vh,360px)!important;
    max-height:min(43dvh,360px)!important;
  }

  .betslip-header{
    min-height:52px!important;
    padding:7px 9px!important;
  }

  .betslip-close,
  .betslip-clear-all{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
  }

  .betslip-summary{
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .monto-stepper{
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    gap:6px!important;
  }

  .monto-chip{
    min-height:38px!important;
    height:38px!important;
    font-size:13.5px!important;
  }

  .pago-potencial{
    min-height:60px!important;
    padding:9px 12px!important;
  }

  .pago-potencial strong,
  .pago-potencial strong > span{
    font-size:23px!important;
  }
}

/* =========================================================
   RESPONSIVE1A FIX4 — Talón vacío compacto
   - Con 0 selecciones muestra solo cabecera + mensaje vacío.
   - Oculta resumen, monto, atajos, pago potencial y papelera.
   - Al existir 1+ selecciones, FIX3 sigue funcionando intacto.
   ========================================================= */
@media screen and (max-width:820px){
  .betslip-panel.activo:has(.betslip-empty) .betslip-summary,
  .betslip-panel.activo:has(.betslip-empty) .ticket-actions{
    display:none!important;
  }

  .betslip-panel.activo:has(.betslip-empty) .betslip-selecciones{
    flex:0 0 auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:10px!important;
    overflow:visible!important;
  }

  .betslip-panel.activo:has(.betslip-empty) .betslip-empty{
    min-height:70px!important;
    margin:0!important;
    padding:16px 14px!important;
    border-radius:8px!important;
  }

  .betslip-panel.activo:has(.betslip-empty) .betslip-clear-all,
  .betslip-clear-all:disabled{
    display:none!important;
  }
}

@media screen and (max-width:390px){
  .betslip-panel.activo:has(.betslip-empty) .betslip-selecciones{
    max-height:none!important;
    padding:9px!important;
  }

  .betslip-panel.activo:has(.betslip-empty) .betslip-empty{
    min-height:66px!important;
    padding:14px 12px!important;
  }
}