/* ======================================================================
   BILLARES AYALA — estilos del tema (mismo lenguaje visual que liga-billar.html)
   ====================================================================== */
:root {
  --marca: #1a237e; --marca-oscura: #0d1450;
  --tapete: #146356; --tapete-oscuro: #0d4a3f;
  --gold: #c9a227; --gold-soft: #b3860f; --gold-pale: #f0d789;
  --rojo: #e53935;
  --fondo: #f3f4f8; --cream: #ffffff; --cream-dim: #667085; --borde: #e5e8f0;
  --texto: #24293b; --hover-suave: #eef0f7; --campo: #fbfbfd;
  --radius: 12px; --shadow: 0 4px 16px rgba(20,30,60,0.08);
}
html.modo-oscuro {
  --fondo: #0f1117; --cream: #1a1d27; --cream-dim: #9aa3bb; --borde: #252b40;
  --texto: #dde2f0; --hover-suave: #1f2336; --campo: #1a1d27;
  --marca: #7b8fff; --gold-soft: #d4a820; --shadow: 0 4px 16px rgba(0,0,0,0.35);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; font-family: 'Inter', system-ui, sans-serif; line-height: 1.6;
  background: var(--fondo); color: var(--texto); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--marca); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--gold-pale); color: #2a2205; }
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; line-height: 1.25; color: var(--marca); }
.screen-reader-text, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: var(--gold); color: #2a2205; padding: 8px 14px; border-radius: 8px; }

.ba-shell { max-width: 1120px; margin: 0 auto; padding: 32px 20px 60px; }

/* ---------- Cabecera ---------- */
.ba-header {
  /* SIN overflow:hidden: si no, los desplegables del menu se cortan. El halo dorado va como capa de fondo. */
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; z-index: 50;
  padding: 18px 26px; margin-bottom: 22px; border-radius: var(--radius);
  background:
    radial-gradient(circle at calc(100% - 60px) 0, rgba(201,162,39,0.28) 0, rgba(201,162,39,0) 140px),
    linear-gradient(120deg, var(--marca) 0%, var(--marca-oscura) 55%, var(--tapete-oscuro) 100%);
  box-shadow: 0 6px 20px rgba(13,20,80,0.22);
}
html.modo-oscuro .ba-header {
  background:
    radial-gradient(circle at calc(100% - 60px) 0, rgba(201,162,39,0.28) 0, rgba(201,162,39,0) 140px),
    linear-gradient(120deg, #1a237e 0%, #0d1450 55%, #0d4a3f 100%);
}
.ba-header > * { position: relative; z-index: 1; }
.ba-menu .sub-menu, .ba-menu .children { z-index: 100; }
.ba-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.ba-brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.ba-title { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: 0.02em; }
.ba-title a { color: #fff; }
.ba-subtitle { margin: 2px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-pale); }

.ba-menu, .ba-menu ul { list-style: none; margin: 0; padding: 0; }
.ba-menu { display: flex; gap: 4px; flex-wrap: wrap; }
.ba-menu li { position: relative; }
.ba-menu a {
  display: block; padding: 9px 14px; border-radius: 8px; color: #fff; font-family: 'Poppins', sans-serif;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; transition: background .18s, color .18s;
}
.ba-menu a:hover { background: rgba(255,255,255,0.14); color: var(--gold-pale); }
.ba-menu .current-menu-item > a, .ba-menu .current_page_item > a, .ba-menu .current-menu-ancestor > a {
  background: rgba(255,255,255,0.12); color: var(--gold-pale); box-shadow: inset 0 -3px 0 var(--gold);
}
/* Desplegables: se abren al pasar el raton (sin clic), con animacion suave y un pequeno retardo al cerrar
   para que no se cierren si el cursor se desvia un instante. */
.ba-menu .sub-menu, .ba-menu .children {
  position: absolute; left: 0; top: 100%; min-width: 210px; z-index: 20; padding: 6px; margin-top: 6px;
  background: var(--cream); border: 1px solid var(--borde); border-radius: var(--radius); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .25s;
}
/* Puente invisible sobre el hueco entre el elemento y su desplegable: el hover no se pierde al bajar el raton */
.ba-menu .sub-menu::before, .ba-menu .children::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.ba-menu li:hover > .sub-menu, .ba-menu li:focus-within > .sub-menu, .ba-menu li:hover > .children, .ba-menu li:focus-within > .children {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Tercer nivel (p. ej. Liga 25/26 > Primera Pro > Clasificacion): se abre al lado */
.ba-menu .sub-menu .sub-menu { left: 100%; top: -7px; margin: 0 0 0 6px; transform: translateX(-6px); }
.ba-menu .sub-menu .sub-menu::before { left: -10px; right: auto; top: 0; bottom: 0; width: 10px; height: auto; }
.ba-menu > li:nth-last-child(-n+2) .sub-menu .sub-menu { left: auto; right: 100%; margin: 0 6px 0 0; transform: translateX(6px); }
.ba-menu > li:nth-last-child(-n+2) .sub-menu .sub-menu::before { left: auto; right: -10px; }
.ba-menu .menu-item-has-children > a::after { content: " ▾"; font-size: 10px; opacity: .8; }
.ba-menu .sub-menu .menu-item-has-children > a::after { content: " ▸"; float: right; }
.ba-menu .sub-menu a, .ba-menu .children a { color: var(--texto); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13.5px; }
.ba-menu .sub-menu a:hover, .ba-menu .children a:hover { background: var(--hover-suave); color: var(--marca); }

.ba-actions { display: flex; align-items: center; gap: 10px; }
.ba-cta {
  background: var(--gold); color: #2a2205; padding: 9px 20px; border-radius: 8px; font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: background .15s, transform .1s;
}
.ba-cta:hover { background: #e6b800; color: #2a2205; transform: translateY(-1px); }
.ba-btn-icon {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.12);
  color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .18s, transform .18s;
}
.ba-btn-icon:hover { background: rgba(255,255,255,0.25); transform: scale(1.08); }
.ba-burger { display: none; }

/* ---------- Portada ---------- */
.ba-hero {
  position: relative; overflow: hidden; margin-bottom: 26px; padding: 44px 32px; border-radius: var(--radius);
  background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #146356 100%); color: #fff; box-shadow: 0 6px 20px rgba(13,20,80,0.22);
}
.ba-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 85% 30%, rgba(201,162,39,0.28) 0%, transparent 60%);
}
.ba-hero > div { position: relative; max-width: 620px; }
.ba-hero h1 { margin: 0 0 10px; color: #fff; font-size: 34px; }
.ba-hero p { margin: 0 0 22px; font-size: 16px; color: rgba(255,255,255,0.85); }
.ba-hero-btn, .ba-btn, .comment-form .submit, .wp-block-button__link {
  display: inline-block; padding: 11px 22px; background: var(--gold); color: #2a2205; border: 0; border-radius: 10px; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: background .15s, transform .12s;
}
.ba-hero-btn:hover, .ba-btn:hover, .comment-form .submit:hover, .wp-block-button__link:hover { background: #e6b800; color: #2a2205; transform: translateY(-1px); }
.ba-btn, .comment-form .submit { background: var(--marca); color: #fff; box-shadow: 0 3px 10px rgba(26,35,126,0.18); }
.ba-btn:hover, .comment-form .submit:hover { background: var(--marca-oscura); color: #fff; }
html.modo-oscuro .ba-btn, html.modo-oscuro .comment-form .submit { background: #4a5bd6; }

/* ---------- Layout ---------- */
.ba-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ba-layout:not(:has(.ba-sidebar)) { grid-template-columns: minmax(0, 1fr); }
.ba-page-title { margin: 0 0 16px; font-size: 26px; display: inline-block; padding-bottom: 8px; border-bottom: 3px solid var(--gold); }
.ba-section-title { margin: 0 0 16px; font-size: 16px; }
.ba-card, .ba-card-post, .widget {
  background: var(--cream); border: 1px solid var(--borde); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ba-card { padding: 22px 26px; margin-bottom: 20px; }

/* ---------- Tarjetas de noticias ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 24px; }
.ba-card-post { overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.ba-card-post:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20,30,60,0.14); }
.ba-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.ba-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.ba-card-body p { margin: 0 0 12px; font-size: 14px; color: var(--cream-dim); }
.ba-card-title { margin: 0 0 8px; font-size: 16px; }
.ba-card-title a { color: var(--marca); }
.ba-meta { margin: 0 0 6px; font-size: 11.5px; color: var(--cream-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.ba-meta a { color: var(--gold-soft); font-weight: 600; }
.ba-more { margin-top: auto; font-size: 13px; font-weight: 600; }

/* ---------- Entrada / pagina ---------- */
.ba-featured img { width: 100%; border-radius: var(--radius); margin-bottom: 18px; }
.ba-prose { font-size: 16px; }
.ba-prose h2, .ba-prose h3 { margin-top: 1.6em; }
.ba-prose blockquote { margin: 1.4em 0; padding: 14px 20px; border-left: 4px solid var(--gold); background: var(--hover-suave); border-radius: 0 var(--radius) var(--radius) 0; color: var(--cream-dim); }
.ba-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ba-prose th { background: var(--marca); color: #fff; text-align: left; font-family: 'Poppins', sans-serif; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; }
html.modo-oscuro .ba-prose th { background: #252b40; }
.ba-prose td { padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.ba-prose tr:hover td { background: var(--hover-suave); }
.ba-prose img { border-radius: var(--radius); }
.ba-tags a { display: inline-block; margin: 0 4px 4px 0; padding: 3px 12px; background: var(--hover-suave); border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; }

/* ---------- Sidebar y widgets ---------- */
.ba-sidebar { position: sticky; top: 16px; }
.widget { padding: 16px 18px; margin-bottom: 18px; }
.widget-title { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.widget ul li:last-child { border-bottom: 0; }
/* El widget Top 3 ya trae su propia tarjeta: sin tarjeta doble */
.widget_custom_html:has(.lb-mini-clasificacion), .widget_block:has(.lb-mini-clasificacion) { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* ---------- Formularios ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], textarea, select {
  width: 100%; padding: 10px 12px; background: var(--campo); border: 1px solid #d3d7e3; border-radius: 8px; color: var(--texto); font: inherit; font-size: 14px;
}
html.modo-oscuro input, html.modo-oscuro textarea, html.modo-oscuro select { border-color: var(--borde); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 2px rgba(26,35,126,0.15); }
.ba-search { display: flex; gap: 8px; margin: 14px 0; }
.ba-search input { flex: 1; }
label { display: block; margin-bottom: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cream-dim); }

/* ---------- Paginacion, comentarios ---------- */
.pagination .nav-links, .post-navigation .nav-links, .comments-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 8px 0 24px; }
.page-numbers, .post-navigation a { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--borde); background: var(--cream); font-weight: 600; font-size: 13px; }
.page-numbers.current, .page-numbers:hover { background: var(--marca); color: #fff; border-color: var(--marca); }
.post-navigation .nav-links { justify-content: space-between; }
.ba-comment-list { list-style: none; padding: 0; }
.ba-comment-list .comment-body { padding: 14px 0; border-bottom: 1px solid var(--borde); }
.ba-comment-list .children { list-style: none; padding-left: 22px; }
.ba-404 { text-align: center; }

/* ---------- Pie ---------- */
.ba-footer { margin-top: 34px; padding: 24px 20px; text-align: center; background: var(--marca-oscura); color: rgba(255,255,255,0.75); border-top: 3px solid var(--gold); border-radius: var(--radius); }
html.modo-oscuro .ba-footer { background: #10132b; }
.ba-footer a { color: var(--gold-pale); }
.ba-footer-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; text-align: left; margin-bottom: 18px; }
.ba-footer .widget { background: transparent; border: 0; box-shadow: none; padding: 0; }
.ba-footer .widget-title { color: #fff; border-color: rgba(255,255,255,0.15); }
.ba-footer .widget ul li { border-color: rgba(255,255,255,0.12); }
.ba-footer-menu { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 0 0 12px; padding: 0; font-size: 13px; }
.ba-copy { margin: 0; font-size: 12px; }

/* ---------- Barra inferior movil (como la app) ---------- */
.ba-bottom-nav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; height: 60px;
  padding-bottom: env(safe-area-inset-bottom); background: var(--cream); border-top: 1px solid var(--borde); box-shadow: 0 -2px 16px rgba(20,30,60,0.10);
}
.ba-bottom-menu { list-style: none; margin: 0; padding: 0 4px; display: flex; height: 100%; }
.ba-bottom-menu li { flex: 1; display: flex; }
.ba-bottom-menu a {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 2px;
  font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream-dim);
}
.ba-bottom-menu .current-menu-item a, .ba-bottom-menu a:hover { color: var(--marca); box-shadow: inset 0 3px 0 var(--gold); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ba-layout { grid-template-columns: minmax(0, 1fr); }
  .ba-sidebar { position: static; }
}
@media (max-width: 768px) {
  .ba-shell { padding: 12px 12px 80px; }
  .ba-header { padding: 14px 16px; gap: 12px; }
  .ba-title { font-size: 16px; }
  .ba-subtitle { font-size: 10px; }
  .ba-burger { display: flex; }
  .ba-cta { padding: 7px 14px; font-size: 12px; }
  .ba-actions { gap: 8px; }
  .ba-btn-icon { width: 34px; height: 34px; font-size: 16px; }
  .ba-brand { min-width: 0; gap: 8px; }
  .ba-brand img { width: 36px; height: 36px; }
  .ba-nav { display: none; order: 5; flex-basis: 100%; }
  .ba-nav.abierto { display: block; animation: baFade .2s ease; }
  .ba-menu { flex-direction: column; }
  .ba-menu .sub-menu, .ba-menu .children { position: static; opacity: 1; visibility: visible; transform: none !important; box-shadow: none; background: rgba(255,255,255,0.08); border: 0; margin: 0 0 0 12px; }
  .ba-menu .sub-menu a, .ba-menu .children a { color: #fff; }
  .ba-hero { padding: 30px 20px; }
  .ba-hero h1 { font-size: 26px; }
  .ba-card { padding: 16px 16px; }
  .ba-page-title { font-size: 21px; }
  .ba-bottom-nav { display: block; }
  .ba-btn, .ba-hero-btn { min-height: 46px; }
}
/* Boton flotante de modo claro/oscuro heredado (inyectado por un fragmento/plugin antiguo): ya existe el de la cabecera */
#ba-theme-toggle, #ba-theme-toggle * { display: none !important; }

/* Portada en movil: solo las 2 ultimas noticias (y enlace a todas) para que no sea tan larga */
.ba-ver-todas { display: none; text-align: center; margin: 0 0 20px; }
@media (max-width: 768px) {
  .home .ba-grid .ba-card-post:nth-child(n+3) { display: none; }
  .home .ba-ver-todas { display: block; }
}
@media (max-width: 400px) {
  .ba-subtitle { display: none; }
  .ba-title { font-size: 15px; }
}
@keyframes baFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }