/* ============================================================
   ESTILOS COMUNES — Liga Cerritos
   Antes estos 7 bloques venían copiados y pegados, idénticos,
   dentro de cada HTML (21-23 archivos). Ahora viven acá, en un
   solo archivo que el navegador puede cachear entre páginas.
   NO duplicar estos estilos de vuelta en los HTML individuales.
============================================================ */

/* ===== Banner social del footer (Instagram/YouTube/correo) ===== */
.footer-social-banner{position:relative; width:100%; margin:0; padding:0; line-height:0; overflow:hidden; background:#111111;}
.footer-social-banner img{display:block; width:100%; height:auto;}
.footer-social-link{position:absolute; z-index:2; display:block; border-radius:4px; transition:background .16s ease, box-shadow .16s ease;}
.footer-social-link.instagram{left:86.2%; top:25%; width:13.3%; height:11%;}
.footer-social-link.youtube{left:86.2%; top:44%; width:13.3%; height:11%;}
.footer-social-link.email{left:86.2%; top:64%; width:13.3%; height:9%;}
.footer-social-link:hover{background:rgba(247,182,24,.10); box-shadow:0 0 0 1px rgba(247,182,24,.92), 0 0 12px rgba(247,182,24,.34);}
.footer-social-link:focus-visible{outline:3px solid #ffffff; outline-offset:3px;}

/* ===== Indica visualmente todos los elementos interactivos del sitio ===== */
a[href], button:not(:disabled), select:not(:disabled), summary, [role="button"]{cursor:pointer;}
a[href]:hover, button:not(:disabled):hover, select:not(:disabled):hover, summary:hover, [role="button"]:hover{filter:brightness(1.09);}
a[href]:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, [role="button"]:focus-visible{outline:3px solid #F7B618; outline-offset:3px;}

/* ===== Fondo común para todas las páginas ===== */
body{
  background-color:#f7f3e9 !important;
  background-image:url('fondo-liga-cerritos.png') !important;
  background-position:center center !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}

/* ===== Menú móvil: submenús se abren hacia arriba ===== */
@media (max-width:640px){
  .side-nav .nav-group{position:relative;}
  .side-nav .nav-flyout{top:auto !important; right:auto !important; bottom:calc(100% + 8px) !important; left:50% !important; transform:translateX(-50%); width:min(230px,calc(100vw - 16px)); min-width:0; max-height:calc(100vh - 92px); overflow-y:auto;}
}

/* ===== Navegación móvil: accesos principales, barra fija y submenús hacia arriba ===== */
@media (max-width:640px){
  .side-nav{
    justify-content:space-around !important;
    overflow:visible !important;
    padding:0 4px !important;
    gap:0 !important;
  }
  .side-nav > a[data-page="reglamento"],
  .side-nav > a[data-page="historia"]{display:none !important;}
  .side-nav > a,
  .side-nav > .nav-group{flex:1 1 0; min-width:0;}
  .side-nav > .nav-group{display:flex; justify-content:center; align-items:center;}
  .side-nav .nav-flyout{
    position:absolute !important;
    top:auto !important;
    right:auto !important;
    bottom:calc(100% + 8px) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:min(230px,calc(100vw - 16px)) !important;
    min-width:0 !important;
    max-height:calc(100vh - 92px);
    overflow-y:auto;
  }
}

/* ===== Fondo común de las tablas: mantiene visible la trama de la liga ===== */
body table { background: rgba(255,255,255,.58) !important; backdrop-filter: blur(1.5px); }
body table thead { background: rgba(255,255,255,.80) !important; }
body table tbody tr { background: rgba(255,255,255,.20) !important; }
body table tbody tr:nth-child(even) { background: rgba(255,255,255,.34) !important; }