/* =========================================
   LAYOUT DE ESCRITORIO SIN SCROLL GLOBAL
   Scroll interno en países, eventos y talón
========================================= */

@media (min-width:901px){

  /* El navegador ya no desplaza toda la página */

  html{
    width:100%;
    height:100%;

    overflow:hidden !important;
    scrollbar-gutter:auto !important;
  }


  body{
    width:100%;
    height:100vh;
    height:100dvh;

    min-height:0 !important;

    display:flex;
    flex-direction:column;

    overflow:hidden !important;
  }


  /* Cabecera y avisos siempre visibles */

  .header,
  .system-banner{
    flex:0 0 auto;
  }


  /* El layout ocupa exactamente el espacio restante */

  .app-layout{
    flex:1 1 auto;

    width:100%;
    height:auto !important;

    min-height:0 !important;

    align-items:stretch !important;

    overflow:hidden !important;
  }


  /* Los tres paneles permanecen fijos dentro del viewport */

  .ligas-panel,
  .eventos-panel,
  .betslip-panel{
    position:relative !important;
    top:auto !important;

    align-self:stretch !important;

    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    overflow:hidden !important;
  }


  /* =====================
     PANEL IZQUIERDO
  ===================== */

  .lista-ligas{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    overflow:hidden !important;
  }


  /* Solo los países se desplazan internamente */

  .paises-scroll{
    flex:1 1 auto;

    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain;
  }


  /* =====================
     PANEL CENTRAL
  ===================== */

  .eventos-panel{
    display:flex !important;
    flex-direction:column !important;
  }


  /* El carrusel permanece arriba */

  .principales-bar{
    flex:0 0 auto;
  }


  /* Solo los eventos tienen desplazamiento vertical */

  .eventos-lista{
    flex:1 1 auto;

    width:100%;
    height:auto !important;

    min-height:0 !important;
    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:contain;

    scrollbar-gutter:stable;
  }


  /* =====================
     TALÓN DERECHO
  ===================== */

  .betslip-panel{
    display:flex !important;
    flex-direction:column !important;
  }


  /* Solo las selecciones se desplazan si son muchas */

  .betslip-selecciones{
    flex:1 1 auto;

    min-height:0 !important;
    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

}

  /* =====================
     SCROLL CENTRAL — GANASTE
     Solo afecta el listado de eventos.
  ===================== */

  .eventos-lista{
    scrollbar-width:thin;
    scrollbar-color:#667085 #11161f;
  }

  .eventos-lista::-webkit-scrollbar{
    width:10px;
  }

  .eventos-lista::-webkit-scrollbar-track{
    background:#11161f;
    border-left:1px solid #202733;
  }

  .eventos-lista::-webkit-scrollbar-thumb{
    background:#667085;
    border:2px solid #11161f;
    border-radius:999px;
  }

  .eventos-lista::-webkit-scrollbar-thumb:hover{
    background:#8791a1;
  }