/* ============================================================
   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;}
/* Banner centrado a 1040px como máximo; a los lados se prolonga el negro del
   diseño con footer-liga-cerritos-v5-ancho.jpg (mismo banner al centro, bordes
   estirados), así no se nota el corte. Los links se ubican sobre la imagen centrada. 28-oct-2026 */
body .footer-social-banner{background:#020204 url('footer-liga-cerritos-v5-ancho.jpg') center/auto 100% no-repeat;}
body .footer-social-banner img{max-width:1040px; margin:0 auto;}
body .footer-social-banner .footer-social-link{left:calc(50% + .362 * min(100%, 1040px)); width:calc(.133 * min(100%, 1040px));}
.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;}

/* ===== Paleta de fondo (27-oct-2026, TEST): blanco + grises claros =====
   Antes era papel crema (#F3F0E8 / #f7f3e9) con bordes beige.
   Para ajustar el tono de todo el sitio basta con cambiar estas variables. */
:root{
  --lc-fondo:#F4F5F7;          /* fondo de página */
  --lc-fondo-img:url('fondo-liga-cerritos-gris.png'); /* marca de agua del escudo, versión gris */
  --lc-tarjeta:#FFFFFF;        /* tarjetas */
  --lc-zona:#F9FAFB;           /* zonas secundarias: cabeceras de tabla, inputs, cajitas */
  --lc-zona-2:#EEF0F3;         /* zonas un poco más marcadas: pestañas, pastillas grises */
  --lc-hover:#F3F4F6;          /* hover de filas y bloques claros */
  --lc-sep:#E5E7EB;            /* separadores internos (filas, líneas finas) */
  --lc-borde:#DFE3E8;          /* borde de tarjetas */
  --lc-borde-fuerte:#D1D5DB;   /* bordes de botones, chips, inputs */
  --lc-gris-medio:#BFC4CC;     /* detalles tenues (guiones del marcador, etc.) */
}

/* ===== Fondo común para todas las páginas ===== */
body{
  background-color:var(--lc-fondo) !important;
  background-image:var(--lc-fondo-img) !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; }

/* ============================================================
   REDISEÑO v1.1 (oct 2026) — componentes compartidos.
   Se activan solo en las páginas ya rediseñadas, que llevan
   <body class="v11">. Las demás siguen viéndose como antes,
   así se puede pasar página por página sin romper nada.
   Paleta: negro #111, ámbar #F7B618, ámbar texto #7A5800,
   papel #F3F0E8, tarjetas blancas con borde #E4DFD3.
   (27-oct-2026 TEST: el papel crema pasó a gris claro; ver variables --lc-* arriba.)
   Letras: Anton (títulos), Inter (texto), Space Mono (etiquetas).
   Desde el 27-oct-2026 (TEST) esos tres nombres los redefine letras-sitio.css:
   títulos = Archivo cursiva condensada, texto = Helvetica Neue / Arimo,
   etiquetas = Archivo expandida. Las var(--letra-…) caen al valor de antes
   si una página no carga letras-sitio.css (p. ej. index-letras.html).
============================================================ */
body.v11{
  /* Fondo gris muy claro con el escudo y la cordillera en marca de agua (antes papel crema) */
  background-color:var(--lc-fondo) !important;
  background-image:var(--lc-fondo-img) !important;
  background-position:center center !important;
  background-size:cover !important;
  background-attachment:fixed !important;
  color:#141414;
  font-family:var(--letra-texto,Inter,system-ui,-apple-system,'Segoe UI',sans-serif);
  font-size:15px;
  line-height:1.5;
  margin:0;
}
body.v11 table{background:transparent !important;backdrop-filter:none !important}
body.v11 table thead, body.v11 table tbody tr, body.v11 table tbody tr:nth-child(even){background:transparent !important}
.v11 a{color:#7A5800;text-decoration:none}
.v11 a:hover{color:#141414;filter:none}
.v11 h1,.v11 h2,.v11 h3{text-wrap:balance}
.lc-main{box-sizing:border-box;width:100%;max-width:1320px;margin:0 auto;padding:28px 40px 56px;display:flex;flex-direction:column;gap:24px}
.lc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.lc-head > div{display:flex;flex-direction:column;gap:8px;min-width:0}
.lc-head > div.lc-chips{flex-direction:row;gap:6px}
.lc-label{font:700 12px/1 'Space Mono',monospace;letter-spacing:var(--letra-etiqueta-tracking,.14em);text-transform:uppercase;color:#6B7280}
.lc-h1{margin:0;font:400 40px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:var(--letra-titulo-tracking,.01em);word-spacing:var(--letra-titulo-espacio,normal);color:#141414}
.lc-lead{margin:0;font:400 15px/1.5 Inter,sans-serif;color:#374151;max-width:68ch}
.lc-lead b{color:#141414;font-weight:700}
.lc-h2{margin:0;font:400 28px/1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:var(--letra-titulo-tracking,normal);word-spacing:var(--letra-titulo-espacio,normal);color:#141414}
.lc-h3{margin:0;font:700 15px/1.3 Inter,sans-serif}
.v11 .lc-link{font:700 12px/1.2 'Space Mono',monospace;color:#7A5800;white-space:nowrap}
.v11 .lc-link:hover{color:#141414}
.lc-card{background:var(--lc-tarjeta);border:1px solid var(--lc-borde);border-radius:16px;min-width:0}
.lc-pad{padding:18px 20px}
.lc-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px}
.lc-dark{background:#111;color:#F4F3EF;border-radius:20px;position:relative;overflow:hidden}
.v11 .lc-dark a{color:#F7B618}
.v11 .lc-dark a:hover{color:#fff}
.v11 .lc-dark a.lc-btn,.v11 .lc-dark a.lc-btn:hover{color:#111}
.lc-fila{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.lc-col7{flex:7 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.lc-col5{flex:5 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px}
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min,240px),1fr));gap:14px}
.lc-chips{display:flex;flex-wrap:wrap;gap:6px}
.v11 .lc-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--lc-borde-fuerte);font:600 13px/1 Inter,sans-serif;color:#374151;background:transparent;white-space:nowrap;cursor:pointer}
.v11 .lc-chip:hover{border-color:#141414;color:#141414}
.v11 .lc-chip.activo{background:#F7B618;border-color:#F7B618;color:#111}
.lc-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:var(--lc-zona-2);align-self:flex-start}
.v11 .lc-tab{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:0;border-radius:9px;background:transparent;font:600 13px/1 Inter,sans-serif;color:#4B5563;cursor:pointer}
.v11 .lc-tab:hover{color:#141414;background:var(--lc-sep)}
.v11 .lc-tab.activo,.v11 .lc-tab[aria-selected="true"]{background:#141414;color:#fff}
.v11 .lc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;background:#F7B618;color:#111;font:700 14px/1 Inter,sans-serif;border:0;cursor:pointer;text-decoration:none}
.v11 .lc-btn:hover{background:#FFC63A;color:#111}
.v11 .lc-btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--lc-borde-fuerte);color:#141414;font:600 14px/1 Inter,sans-serif;background:#fff;cursor:pointer;text-decoration:none}
.v11 .lc-btn2:hover{border-color:#141414;color:#141414}
.lc-esc{object-fit:contain;flex:none;display:block}
.lc-esc-vacio{display:inline-grid;place-items:center;border-radius:50%;background:var(--lc-sep);color:#374151;font-weight:700;font-family:Inter,sans-serif;flex:none;line-height:1}
.v11 .lc-eq{display:flex;align-items:center;gap:10px;min-width:0;color:#141414;font-weight:600}
.lc-eq span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-num{font-variant-numeric:tabular-nums}
.lc-small{font-size:13px;color:#4B5563}
.lc-vacio{margin:0;padding:18px 20px;font-size:14px;color:#6B7280}
.lc-tw{overflow-x:auto}
.lc-t{width:100%;border-collapse:collapse;font:500 14px/1.25 Inter,sans-serif}
.lc-t th{font:700 11px/1 'Space Mono',monospace;letter-spacing:var(--letra-etiqueta-tracking,.1em);text-transform:uppercase;color:#6B7280;text-align:right;padding:12px 8px;border-bottom:1px solid var(--lc-sep);white-space:nowrap;background:var(--lc-zona) !important}
.lc-t th:first-child,.lc-t td:first-child{padding-left:20px}
.lc-t th:last-child,.lc-t td:last-child{padding-right:20px}
.lc-t th.izq,.lc-t td.izq{text-align:left}
.lc-t td{padding:10px 8px;border-bottom:1px solid var(--lc-sep);text-align:right;font-variant-numeric:tabular-nums;color:#4B5563}
.lc-t td.fuerte{color:#141414;font-weight:700}
.lc-t td.pos{font:700 12px/1 'Space Mono',monospace;color:#6B7280;width:28px;text-align:left}
.lc-t tr:last-child td{border-bottom:0}
body.v11 .lc-t tbody tr:hover{background:var(--lc-hover) !important}
.lc-rank{display:flex;flex-direction:column}
.lc-rank > *{display:grid;grid-template-columns:24px 28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--lc-sep);color:#141414}
.lc-rank > *:first-child{border-top:0}
.lc-rank .p{font:700 12px/1 'Space Mono',monospace;color:#6B7280}
.lc-rank .q{display:flex;flex-direction:column;gap:2px;min-width:0}
.lc-rank .q b{font:600 14px/1.2 Inter,sans-serif;color:#141414;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-rank .q small{font:400 12px/1.2 Inter,sans-serif;color:#6B7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-rank .n{font:400 22px/1 Anton,Impact,sans-serif;font-variant-numeric:tabular-nums;color:#141414}
.lc-rank .n small{font:600 11px/1 Inter,sans-serif;color:#6B7280;margin-left:3px}
.lc-rank > .top .n{color:#7A5800}
.lc-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.lc-cifras > div{padding:16px 18px;border-left:1px solid var(--lc-sep);display:flex;flex-direction:column;gap:6px}
.lc-cifras > div:first-child{border-left:0}
.lc-cifras b{font:400 32px/1 Anton,Impact,sans-serif;font-variant-numeric:tabular-nums}
.lc-cifras span{font:700 11px/1.2 'Space Mono',monospace;letter-spacing:var(--letra-etiqueta-tracking,.1em);text-transform:uppercase;color:#6B7280}
.lc-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font:700 11px/1 Inter,sans-serif;white-space:nowrap;flex:none}
.lc-pill.am{background:#FDF0C8;color:#5A4100}
.lc-pill.ve{background:#DDF1E3;color:#1D5A35}
.lc-pill.ro{background:#FBE3E1;color:#7E2F2A}
.lc-pill.gr{background:var(--lc-zona-2);color:#374151}
.lc-pill.ne{background:#141414;color:#fff}
.lc-cargando{color:#9CA3AF;font-size:14px}
.lc-pie{margin-top:0;background:#111;color:#D1D5DB;text-align:center;padding:18px 16px;font:700 11px/1.4 'Space Mono',monospace;letter-spacing:var(--letra-etiqueta-tracking,.14em);text-transform:uppercase}
.lc-pie b{color:#F7B618;font-weight:700}
@media (prefers-reduced-motion: reduce){.v11 *{transition:none !important;animation:none !important}}
@media (max-width:700px){
  .lc-main{padding:18px 16px 32px;gap:18px}
  .lc-h1{font-size:30px}
  .lc-h2{font-size:22px}
  .lc-head{align-items:flex-start}
  .lc-card-h{padding:14px 14px 10px}
  .lc-pad{padding:14px}
  .lc-t th:first-child,.lc-t td:first-child{padding-left:14px}
  .lc-t th:last-child,.lc-t td:last-child{padding-right:14px}
  .lc-opc{display:none}
  .lc-chips.scroll{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .lc-tabs{align-self:stretch;overflow-x:auto;flex-wrap:nowrap}
  .v11 .lc-tab{flex:1 0 auto;justify-content:center}
  .lc-solo-esc{display:none !important}
  .lc-cifras{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lc-cifras > div{padding:12px;border-left:0;border-top:1px solid var(--lc-sep)}
  .lc-cifras > div:nth-child(-n+3){border-top:0}
  .lc-cifras b{font-size:26px}
}
@media (min-width:701px){ .lc-solo-cel{display:none !important} }

/* ===== Modo ventanita (?embed=1): la ficha se muestra dentro de un iframe
   (fichas-rapidas.js). Se esconde todo lo que no aplica ahí: menús, pie,
   chat y el link de volver. ===== */
html body.v11.embed-detalle,html.mu-cuerpo-angosto body.embed-detalle{padding:0 !important;margin:0 !important}
body.embed-detalle .side-nav,
body.embed-detalle #menu-movil-unificado,
body.embed-detalle #mnav-superior,
body.embed-detalle .footer-social-banner,
body.embed-detalle .lc-pie,
body.embed-detalle .ed-volver,
body.embed-detalle .jd-volver,
body.embed-detalle #panchibot-widget-root,
body.embed-detalle #liga-mensajes-toggle,
body.embed-detalle #liga-mensajes-panel,
body.embed-detalle .n8n-chat,
body.embed-detalle .chat-window-wrapper,
body.embed-detalle .search-btn-fixed{display:none !important}
body.embed-detalle .lc-main{padding:16px 16px 28px !important}