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

/*
 * Fondo global #app-web: imagen + velo oscuro (alineado con tema guest / guest-shared-cards.css).
 * Ajuste fino: modificar --lss-app-overlay-top / --lss-app-overlay-bottom.
 */
:root {
  --lss-app-bg-image: url('/imagenes/app/estadio-with-logo-background.jpg');
  --lss-app-overlay-top: rgba(10, 12, 18, 0.78);
  --lss-app-overlay-bottom: rgba(14, 16, 24, 0.9);
}

@media (max-width: 767.98px) {
  :root {
    --lss-app-overlay-top: rgba(8, 10, 14, 0.86);
    --lss-app-overlay-bottom: rgba(18, 20, 28, 0.94);
  }
}

div#app-web {
  background-image:
    linear-gradient(180deg, var(--lss-app-overlay-top), var(--lss-app-overlay-bottom)),
    var(--lss-app-bg-image);
  background-position: top center, top center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-color: #0d0f14;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Evitar scroll horizontal */
  min-height: 100vh;
}

/* Home guest con pocas secciones: asegura altura mínima para que el footer sea alcanzable al hacer scroll */
@media (max-width: 767.98px) {
  body {
    min-height: 200vh;
  }
  div#app-web {
    min-height: 200vh;
  }
}

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);
}

/* Desktop: ítem activo del menú superior — más simple (sin caja gris), solo acento inferior */
@media (min-width: 768px) {
  .navbar-dark .navbar-nav .nav-link.active {
    color: rgba(255, 255, 255, 0.95);
    background-color: transparent;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: inset 0 -1px 0 #de1118;
    border-radius: 0;
  }

  .navbar-dark .navbar-nav .nav-link.active:hover,
  .navbar-dark .navbar-nav .nav-link.active:focus {
    color: #ffffff;
    background-color: transparent;
    box-shadow: inset 0 -1px 0 #de1118;
  }
}

/* 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;
}

/* Logo app (navbar): escritorio; móvil más alto en bloque @media siguiente */
div.top-menu .navbar-brand img.logo {
  width: auto;
  height: 40px;
  object-fit: contain;
  max-height: none;
}

/* Marca «LIGASIERRASUR»: LIGA rojo y más grueso, SIERRASUR blanco más ligero (sin espacio entre ambas) */
div.top-menu .navbar-brand .app-name.lss-brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  /* Más cerca del escudo (styles.css legacy metía ~30px en span.app-name) */
  margin-left: clamp(0.2rem, 1.2vw, 0.45rem);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(0.78rem, 1.65vw, 0.98rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

div.top-menu .navbar-brand .lss-brand-wordmark__liga {
  color: #de1118;
  font-weight: 800;
}

div.top-menu .navbar-brand .lss-brand-wordmark__sierrasur {
  color: #ffffff;
  font-weight: 500;
  opacity: 0.95;
}

@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;
    /* Mismo sistema de capas que escritorio; opacidades del velo vía :root en este breakpoint */
  }

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

  /* Logo en barra cerrada: un poco más pequeño para equilibrar con la marca */
  .navbar-brand img.logo {
    height: 36px;
    transition: height 0.3s ease;
  }

  .fullscreen-menu.show .navbar-nav .nav-item.cabecera img.logo {
    height: 120px;
  }

  .navbar:not(.fullscreen-menu) .navbar-brand img.logo {
    height: 36px;
  }

  /* Barra compacta: marca pegada al escudo; texto más grande que en escritorio */
  div.top-menu .navbar-brand .app-name.lss-brand-wordmark {
    margin-left: 0.18rem;
    font-size: clamp(0.95rem, 4.5vw, 1.15rem);
  }
  
  .navbar-brand .app-name {
    font-size: 14px; /* fallback genérico; wordmark usa regla más específica arriba */
    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: 60px;
    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%;
      min-height: 100vh;
      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: flex-start; /* Desde arriba: evita que los enlaces queden fuera de vista */
      align-items: center;
      padding: 3.5rem 1rem 2rem;
      box-sizing: border-box;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
  }

  .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 */
    }
}

/* ============================================
   FOOTER FIJO
   ============================================ */

footer.footer-fixed {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    padding: 15px 0 !important;
    z-index: 1000 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
}

footer.footer-fixed .footer-content {
    min-height: 0;
    padding: 0 12px;
}

footer.footer-fixed .footer-left {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    margin-bottom: 0 !important;
}

footer.footer-fixed .footer-title {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-right: 8px !important;
}

footer.footer-fixed .footer-separator {
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 8px !important;
    font-weight: 300 !important;
}

footer.footer-fixed .footer-copyright {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

footer.footer-fixed .footer-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    gap: 15px;
}

footer.footer-fixed .footer-link {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: color 0.3s ease, opacity 0.3s ease;
}

footer.footer-fixed .footer-link:hover {
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1;
    text-decoration: none !important;
}

footer.footer-fixed .footer-link:focus {
    color: rgba(255, 255, 255, 1) !important;
    text-decoration: none !important;
    outline: none;
}

/* Asegurar que el contenido principal no quede oculto detrás del footer */
div#app-web {
    padding-bottom: 70px !important;
}

/*
 * Navbar fija (.fixed-top): styles.css aportaba ~60px y apenas dejaba aire bajo la barra.
 * Más específico que `main` para ganar la cascada y sumar margen + safe-area (notch).
 */
div#app-web > main {
    padding-top: calc(env(safe-area-inset-top, 0px) + 60px + 1.25rem);
    padding-bottom: 20px;
    min-height: calc(100vh - 200px);
}

/*
 * Con migas de pan: sin el margen extra bajo el navbar — la franja de migas lo sustituye
 * y queda visualmente unida a la barra (más oscura que el cuerpo de la página).
 */
div#app-web > main:has(.lss-guest-breadcrumb):not(:has(.lss-page-home-guest)) {
    padding-top: calc(env(safe-area-inset-top, 0px) + 60px + var(--lss-guest-breadcrumb-height, 2.35rem));
}

@media (min-width: 768px) {
    div#app-web > main {
        padding-top: calc(env(safe-area-inset-top, 0px) + 64px + 1.35rem);
    }

    div#app-web > main:has(.lss-guest-breadcrumb):not(:has(.lss-page-home-guest)) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 64px + var(--lss-guest-breadcrumb-height, 2.55rem));
    }
}

/* Migas de pan: franja oscura (entre navbar #000 y el gris del contenido) */
.lss-guest-breadcrumb {
    --lss-guest-breadcrumb-height: 2.35rem;
    width: 100%;
    margin: 0 0 1.35rem;
    padding: 0.5rem 0 0.6rem;
    position: fixed;
    left: 0;
    right: 0;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    margin-top: -1px;
    z-index: 1019;
    background: linear-gradient(180deg, #050505 0%, #0c0c0e 55%, #0e0e12 100%);
    border-bottom: 0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
    .lss-guest-breadcrumb {
        --lss-guest-breadcrumb-height: 2.55rem;
        margin-bottom: 1.65rem;
        padding: 0.55rem 0 0.65rem;
        /* top: calc(env(safe-area-inset-top, 0px) + 64px); */
    }
}

/* Sin línea divisoria entre navbar y migas */
.navbar.fixed-top,
.top-menu .navbar.fixed-top {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Anular sombra utilitaria Bootstrap (.shadow-sm) del navbar superior */
nav.navbar.fixed-top.navbar-dark.bg-black.shadow-sm {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

nav.navbar.fixed-top.navbar-dark.bg-black.shadow-sm::after {
    content: none !important;
    display: none !important;
}

.lss-guest-breadcrumb .container {
    max-width: 1140px;
}

.lss-guest-breadcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: rgba(230, 230, 230, 0.72);
}

.lss-guest-breadcrumb__list a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
}

.lss-guest-breadcrumb__list a:hover,
.lss-guest-breadcrumb__list a:focus {
    color: #de1118;
    text-decoration: underline;
}

.lss-guest-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.32);
    font-weight: 400;
    user-select: none;
    padding: 0 0.05rem;
}

.lss-guest-breadcrumb__item span[aria-current="page"] {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/*
 * Carrusel «banners por página»: el hero debe pegarse a las migas (sin franja vacía).
 */
div#app-web > main:has(.lss-pagina-banner-slot) .lss-guest-breadcrumb {
    margin-bottom: 0;
}

/*
 * Home guest: el banner hero en móvil usa height: calc(100vh - 60px) (guest-shared-cards.css).
 * El padding extra del main sumaba ~1.25rem encima y desbordaba el viewport (franja + altura incoherente).
 */
div#app-web > main:has(.lss-page-home-guest) {
    padding-top: calc(env(safe-area-inset-top, 0px) + 60px);
}

@media (min-width: 768px) {
    div#app-web > main:has(.lss-page-home-guest) {
        padding-top: calc(env(safe-area-inset-top, 0px) + 64px);
    }
}

/* Responsive para móviles */
@media (max-width: 767px) {
    footer.footer-fixed {
        bottom: 0 !important;
        padding-top: 4px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    footer.footer-fixed .footer-content {
        text-align: center !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    
    footer.footer-fixed .footer-left {
        justify-content: center !important;
        margin-bottom: 3px !important;
        width: 100% !important;
        line-height: 1.15 !important;
    }
    
    footer.footer-fixed .footer-separator {
        display: none !important;
    }
    
    footer.footer-fixed .footer-right {
        justify-content: center !important;
        width: 100% !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        line-height: 1.15 !important;
    }
    
    footer.footer-fixed .footer-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    
    footer.footer-fixed .footer-title {
        font-size: 0.7rem !important;
    }
    
    footer.footer-fixed .footer-copyright {
        font-size: 0.65rem !important;
    }
    
    footer.footer-fixed .footer-link {
        font-size: 0.65rem !important;
    }
    
    div#app-web {
        /* Pie más bajo: menos hueco reservado bajo el contenido */
        padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Ajustes para tablets */
@media (min-width: 768px) and (max-width: 991px) {
    footer.footer-fixed .footer-title {
        font-size: 0.85rem !important;
    }
    
    footer.footer-fixed .footer-link {
        font-size: 0.8rem !important;
    }
}