/* LAST UPDATE 20/01 9:52 */
    
    /* Importamos fuente del CDN de Google para optimizar renderizado */
    @import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,700;1,400&display=swap");
    
    /* CORRECCIÓN 
     * para que el modal de filtros se muestre correctamente encima de todo lo demás
     ---------------------------------------------------------------------------------- */
    #popupWindow {
        z-index: 18 !important;
    }

    /* Para esconder y mostrar el carrusel
     * - Lo ocultamos cuando se muestran resultados
     * - IMPORTANTE mantener ambas clases
    ---------------------------------------------------------- */
    .is-hidden, .is-hidden-force  {
        display: none !important;
    }
    
    /* Contenedor del título de sección y el formulario 
    ---------------------------------------------------------- */
    section.searchForm--wrapper {
      all: revert;
      margin-bottom: 0;
      background: var(--Bases-Darker-Gray, #2d2d2d);
      width: 100vw;
      max-width: 100vw;
    }
    
    .searchForm--container {
      width: 100%;
      max-width: 1280px;
      /*padding: 16px 32px;*/
      padding: 16px 0px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .section--title {
      color: var(--Bases-Light-Gray, #ececec);
      font-family: Inter;
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 28px;
    }

    .section--filter-search {
      display: flex;
      gap: 42px;
    }
    
    /* Formulario de búsqueda
    ---------------------------------------------------------- */
    .search-form {
      display: flex;
    }
    .search-form .hidden-label {
      display: none;
    }
    .search-form form {
      position: relative;
      display: flex;
      flex-direction: row-reverse;
      gap: 8px;
    }
    .search-form input,
    .search-form button {
      all: unset;
      box-sizing: border-box;
      font: inherit;
      color: inherit;
      background: none;
      border: none;
      outline: none;
      padding: 0;
      margin: 0;
      appearance: none;
    }
    .search-form input[type="search"] {
      display: flex;
      padding: 4px 0 4px 4px;
      background: transparent;
      align-items: center;
      flex: 1 0 0;
      border-bottom: 0.8px solid var(--Bases-Medium-Gray, #c7c7c7);
      width: 337px;
      height: 32px;
      color: var(--Bases-Medium-Gray, #c7c7c7);
      /* Body 2/Regular */
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
    }
    
    .search-form button {
      width: 20px;
      height: 32px;
      padding: 0;
      background-color: transparent !important;
    }
    
    .search-form button.search-btn {
      width: 20px;
      height: 20px;
      margin-top: 6px;
      background: url('/img/bplay-v25/icons/buscador-off.svg') center/contain no-repeat;
      border: none;
      cursor: pointer;
    }
    
    /* Cuando el input tiene texto */
    .search-form input:not(:placeholder-shown) ~ .search-btn {
      background-image: url('/img/bplay-v25/icons/buscador-on.svg') !important;
    }

    /* Ocultamos la X por defecto de cancelar busqueda para poder mostrar la custom */
    input[type="search"]::-webkit-search-cancel-button {
      -webkit-appearance: none;
      appearance: none;
    }

    .search-form button.clear-btn {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #2D2D2D !important;
      border: none;
      color: #999;
      width: 32px;
      padding-left: 8px;
      cursor: pointer;
      display: none; /* la ocultamos por defecto */
    }
    
    .search-form input:not(:placeholder-shown) + button.clear-btn {
      display: block; /* la mostramos cuando el usuario ha escrito algo */
    }
    
    /* Botones de filtrado
    ---------------------------------------------------------- */
    .filter-buttons--wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    button.filters-button {
      background-color: transparent !important;
      color: var(--Principales-Verde-Bplay, #04f77c);
      display: flex;
      align-items: center;
      font-family: Inter;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 16px;
      height: 32px;
    }
    
    
    /* Resultados de búsqueda
    ---------------------------------------------------------- */
    .search-wrapper {
      position: relative;
      display: inline-block;
    }
    
    section.search--results {
      position: fixed;
      background: var(--Bases-Darker-Gray, #2D2D2D);
      opacity: 1;
      width: 100vw;
      max-width: 100vw;
      left: 0;
      right: 0;
      z-index: 12;
      overflow: hidden;
      display: none;
      padding: 0;
    }
    
    .search--results.is-visible {
      display: block;
      animation: stickyFadeIn 120ms ease-out;
      overflow-y: auto !important;
      max-height: calc(100vh - 160px); /* DESKTOP, el calculo depende de las barras visibles en el header. TODO refinar responsive o segun la altura detectada para fijar el sticky */
      padding-bottom: 20px;
    }
    
    .search-results--wrapper {
        width: 100%;
        max-width: 1280px;
        /*padding: 0 32px 12px;*/
        padding: 0 0 12px;
        margin: 0 auto;
    }
    
    p#result-count {
        color: var(--Bases-Light-Gray, #ECECEC);
        /* Body 3/Regular */
        font-family: Inter;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px; /* 133.333% */
        margin-bottom: 8px;
    }
    
    #game-lobby--all {
      position: relative;
      margin-top: 20px;
    }
    
    .gameLobby--grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 160px));
      gap: 16px;
      justify-content: center;
    }
    
    .encontrado {
      color: var(--Principales-Verde-Bplay, #04f77c);
    }
    .no-encontrado {
      color: var(--Semanticos-Error---Light, #f8394e);
    }
    
    /* MEDIA QUERIES
    ---------------------------------------------------------- */
    @media (max-width: 1280px) {
        .search--results.is-visible {
          max-height: calc(100vh - 124px); /* ajustar segun barras visibles en header */
      }
      .searchForm--container {
          padding: 16px 32px;
      }
      .search-results--wrapper {
          padding: 0 32px 12px;
      }
    }
    @media (max-width: 768px) {
      .searchForm--container {
        max-width: 768px;
        padding-top: 44px; /* Es correcto -> en tablet tiene mucho padding extra cuando se muestra el carrusel */
      }
      .search-results--wrapper {
          max-width: 768px;
          padding: 0 32px 12px;
      }
      .search--results.is-visible {
          max-height: calc(100vh - 160px); /* ajustar segun barras visibles en header */
      }
      .gameLobby--grid {
        grid-template-columns: repeat(5, minmax(0, 120px));
        gap: 24px;
      }
      #game-lobby--all .bp3-lobbyGames--list {
        column-gap: 24px;
        row-gap: 28px;
      }
      .extra-padding {
          padding-bottom: 76px;
      }
    }
    
    @media (max-width: 768px) and (min-resolution: 2dppx) {
      .extra-padding {
        padding-bottom: 152px; /* más padding en móviles con alta densidad */
      }
    }

    @media (max-width: 620px) {
      .searchForm--container {
        position: relative;
        display: block;
        max-width: 620px;
        padding: 16px;
      }
      .section--title {
        position: absolute;
        top: 16px;
        left: 16px;
      }
      .section--filter-search {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
      }
    
      .search-form {
        display: block;
        order: 2;
        width: 100%;
      }
    
      .filter-buttons--wrapper {
        order: 1;
        align-self: flex-end;
      }
      
      .search-results--wrapper {
          max-width: 620px;
      }
      .search--results.is-visible {
          max-height: calc(100dvh - 160px); /* ajustar segun barras visibles en header */
      }
    }
    
    @media (max-width: 480px) {
      .gameLobby--grid {
        grid-template-columns: repeat(3, minmax(0, 100px));
        gap: auto;
      }
      #game-lobby--all .bp3-lobbyGames--list {
            grid-template-columns: repeat(3, minmax(0, 33%));
            gap: auto;
            column-gap: 12px;
            row-gap: 12px;
      }
      .search-results--wrapper {
          padding: 0 16px 12px;
      }
    }
    
    /* Animaciones
    ------------------------ */
    @keyframes stickyFadeIn {
      from {
        filter: brightness(0.98);
      }
      to {
        filter: brightness(1);
      }
    }