/* Evitar scroll horizontal en toda la página */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

div#app-web {
  background: url('/imagenes/app/background-style-chilena.webp');
  background-position:top center;
  background-size:cover;
  background-color: rgba(154, 168, 176, 0.8); /* Capa blanca con 40% de transparencia */
  background-blend-mode: overlay; /* Mezcla el color de fondo con la imagen */
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Evitar scroll horizontal */
  min-height: 100vh;
}

tr.primero-clasificacion {
  /* font-size:1.4rem; */
  padding:20px 0px;
  background-color:rgb(163, 214, 122)!important;
}

tr.primero-clasificacion td span{
  font-size:1.4rem;
}

.video-responsive {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 0px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#table-clasificacion tr:hover {
  cursor: pointer;
}

.navbar {
  padding-top: 0rem;
  padding-bottom: 0rem;
  background-color: #000 !important; /* Forzar color negro */
}

#navbarSupportedContent {
  height: 100%;
  min-height: 60px;
}
.navbar-dark ul.navbar-nav {
  padding:0;
  margin:0;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.781);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgb(255, 255, 255);
  background-color: rgba(184, 195, 211, 0.2);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #e3e6c4; /* Color del enlace activo */
  background-color: rgba(184, 195, 211, 0.2);
}

/* Asegurar que los contenedores no se desborden
.container {
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
} */

div#app-web .container.equipos {
  padding-top:60px;
}

.resumen-lined {
  padding:25px;
  border: 2px solid #dbdbdb;
}

.resumen-lined.no-lines {
  padding:0px;
  border: 0px;
}

.del-v-margins {
  padding-left:0px;
  padding-right:0px;
}

span.count-players {
  color:rgb(52, 52, 52);
  background-color: beige;
  padding:6px 4px;
}

@media (max-width: 767px) {
  /* Evitar desbordamiento horizontal en móvil */
  html, body {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  div#app-web {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
  }

  /* Ajustes para el logo en pantallas pequeñas */
  .navbar-brand img.logo {
    height: 30px; /* Altura cuando el menú está cerrado */
    transition: height 0.3s ease; /* Transición suave */
  }

  /* Logo más grande cuando el menú está desplegado */
  .fullscreen-menu.show .navbar-nav .nav-item.cabecera img.logo {
    height: 120px; /* Altura cuando el menú está abierto */
  }

  /* Logo en la barra superior (siempre pequeño) */
  .navbar:not(.fullscreen-menu) .navbar-brand img.logo {
    height: 30px;
  }
  
  .navbar-brand .app-name {
    font-size: 14px; /* Tamaño cuando el menú está cerrado */
    transition: font-size 0.3s ease; /* Transición suave */
  }

  /* Texto más grande cuando el menú está desplegado */
  .fullscreen-menu.show .navbar-nav .nav-item.cabecera .app-name {
    font-size: 18px; /* Tamaño cuando el menú está abierto */
  }
  
  .navbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    min-height: 56px;
    width: 100%;
    max-width: 100%;
  }

  .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .fullscreen-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.95); /* Fondo oscuro */
      color: white;
      z-index: 9999;
      display: none; /* Oculto por defecto */
      flex-direction: column;
      justify-content: center; /* Centrar verticalmente */
      align-items: center; /* Centrar horizontalmente */
      padding-top: 0;
  }

  .fullscreen-menu.show {
      display: flex; /* Mostrar el menú */
  }

  .close-menu {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 30px;
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      z-index: 10001; /* Asegurar que esté por encima de otros elementos */
  }

  .navbar-toggler {
      right: 20px;
      position: absolute;
      top: 10px;
  }

  /* Mostrar el ícono de hamburguesa normalmente */
  .navbar-toggler-icon {
      display: block; /* Asegúrate de que esté visible por defecto */
  }

  /* Ocultar el ícono de hamburguesa solo cuando el menú esté abierto */
  .fullscreen-menu.show .navbar-toggler-icon {
      display: none;
  }

  .navbar-nav {
      list-style: none;
      text-align: center;
      padding: 0;
      margin: 0;
      width: 100%;
  }

  .navbar-nav .nav-item {
      margin: 0px 0; /* Espaciado entre los enlaces */
  }  
  
  .navbar-nav .nav-item.cabecera {
      margin-bottom: 60px; /* Espaciado entre los enlaces */
  }  
  
  .navbar-nav .nav-item.pie {
      margin-top: 40px; /* Espaciado entre los enlaces */
  }  
  
  .navbar-nav .nav-item.pie a {
      color:dimgrey;
  }

  .navbar-nav .nav-link {
      font-size: 24px;
      color: white;
      text-decoration: none;
      transition: color 0.3s ease;
  }

  .navbar-nav .nav-link:hover {
      color: lightgray;
  }

  /* Ocultar barra de navegación en la parte superior cuando el menú esté abierto */
  .fullscreen-menu.show .navbar-toggler {
      display: none; /* Oculta el botón de hamburguesa cuando el menú está abierto */
  }
}

/* Estilos para desktop (opcional) */
@media (min-width: 768px) {
    .fullscreen-menu {
        display: block; /* Mantiene el comportamiento original en desktop */
        position: relative;
        height: auto;
        background-color: transparent;
        color: inherit;
        flex-direction: row;
        justify-content: flex-start;
    }

    .close-menu {
        display: none; /* No mostrar el botón de cerrar en desktop */
    }
}