/* Sistema visual premium HFA: sidebar, topbar, cards/badges/tabs, promos internas y portada dashboard.
   Se carga después de los estilos base para refinarlos sin reescribirlos. */

/* Última línea de defensa, no el arreglo: la causa estructural real (grid .home-standings-leaders
   con columnas 1fr sin minmax(0,...) heredando el min-width:760px de .table por la mini-clasificación
   de Home) ya está corregida en css/home.css. Esto sólo evita que un caso futuro similar produzca
   scroll de página en vez de quedar contenido/clippeado. */
html,body{overflow-x:hidden}

/* === Sidebar === */
.sidebar{background:linear-gradient(180deg,var(--navy) 0%,#0d2238 100%);padding:22px 14px 16px;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.06)}
.brand{padding:4px 10px 22px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.09)}
.brandmark{background:rgba(255,255,255,.07);border-radius:12px;padding:5px}
.brand h1{font-size:14px;font-weight:800;letter-spacing:.005em;line-height:1.32;color:#f2f6fb}
.nav{gap:3px}
.nav button{padding:10px 12px;border-radius:11px;font-size:13px;font-weight:650;letter-spacing:.003em;gap:11px;transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.nav .ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;font-size:13px;background:rgba(255,255,255,.05);transition:background .15s ease,color .15s ease}
.nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.nav button:hover .ico{background:rgba(255,255,255,.12)}
.nav button.active{background:linear-gradient(90deg,rgba(11,107,203,.28),rgba(11,107,203,.05));color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.nav button.active .ico{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(11,107,203,.45)}
.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding:16px 10px 2px;color:#8098b3;font-size:11px}

/* === Topbar === */
.topbar{box-shadow:0 1px 0 var(--line),0 10px 22px -20px rgba(15,31,50,.5)}
.top-title h2{font-size:19px;font-weight:800;letter-spacing:-.01em}
.top-actions .badge{font-weight:750}
#quickMatchBtn.btn.primary{box-shadow:0 8px 18px rgba(11,107,203,.28)}
.page-back{border-radius:10px}

/* === Cards, botones, badges: pulido global === */
.card{border-radius:var(--radius-lg);transition:box-shadow .18s ease,transform .18s ease}
.btn{border-radius:11px;font-weight:700;transition:box-shadow .15s ease,transform .15s ease,border-color .15s ease}
.btn.primary{box-shadow:0 6px 16px rgba(11,107,203,.22)}
.btn.primary:hover{box-shadow:0 10px 22px rgba(11,107,203,.3);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.badge{font-weight:800;letter-spacing:.02em}
.table th{letter-spacing:.05em}
.tab{border-radius:9px 9px 0 0}
.pagehead h2{font-weight:800;letter-spacing:-.01em}

/* Elevación en tarjetas clicables (la fila/tarjeta entera navega). */
.spotlight-card:hover,.featured-strip:hover,.promo-card:hover,.news-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.news-card{transition:box-shadow .18s ease,transform .18s ease}

/* === Publicidad interna (P1/P2, sólo en la columna derecha de Inicio) ===
   .promo-card ya no aparece en Partidos/Competiciones/Noticias: única superficie es
   .home-ad-rail (ver css/home.css .home-layout/.home-main/.home-ad-rail/.home-ad-slot). */
.promo-card{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;padding:22px;border-radius:var(--radius-lg);color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--navy),#0b5598);background-size:cover;background-position:center;box-shadow:var(--shadow-md);isolation:isolate}
.promo-card.static{cursor:default}
.promo-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,29,50,.08) 15%,rgba(6,17,30,.92) 100%);z-index:0}
.promo-card.no-image{background:linear-gradient(135deg,var(--navy),#0b5598)}
.promo-card>*{position:relative;z-index:1}
/* Imagen real de una publicidad manual (js/modules/promotions.js): capa absoluta detrás del
   degradé de legibilidad, así que NO contribuye al ancho mínimo automático del grid item que la
   contiene (a diferencia de un <img> normal, que sí lo haría). object-fit:contain (no cover): la
   pieza publicitaria completa se ve siempre, sin recortar logos/textos importantes; el degradé de
   fondo de .promo-card (arriba) rellena cualquier margen que deje el letterboxing. */
.promo-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1}
.promo-ad-tag{display:inline-flex;align-self:flex-start;align-items:center;margin-bottom:auto;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);color:#fff;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.promo-kicker{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#f3cf6a}
.promo-card h3{margin:8px 0 5px;font-size:21px;line-height:1.2}
.promo-card p{margin:0 0 14px;max-width:48ch;color:rgba(255,255,255,.82);font-size:13px;line-height:1.5}
.promo-card .btn{align-self:flex-start;pointer-events:none;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(4px)}
.promo-card.secondary{min-height:190px}
/* Formatos de publicidad manual: aspect-ratio fijo en vez de min-height, para no deformar la
   imagen (object-fit:contain ya evita el estiramiento/recorte; esto evita huecos desproporcionados). */
.promo-card.format-horizontal{min-height:0;aspect-ratio:21/8}
.promo-card.format-vertical{min-height:0;aspect-ratio:3/4;max-width:100%;margin:0}
.promo-card.format-square{min-height:0;aspect-ratio:1/1;max-width:100%;margin:0}
/* Variante "sólo imagen": la pieza ya trae todo el texto dentro de la imagen (ver el checkbox
   "La imagen ya incluye todo el texto" del formulario ADMIN). Se oculta el overlay de texto y el
   degradé de legibilidad; se conserva únicamente la etiqueta "Publicidad · HFA" (transparencia). */
.promo-card.image-only{padding:0}
.promo-card.image-only:before{background:transparent}
.promo-card.image-only .promo-ad-tag{margin:10px 0 0 10px}

/* === Portada / dashboard === */
.home-hero{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.home-quick-stats .metric .value{font-size:28px}
.home-block .section-title,.home-news .section-title{margin-bottom:12px}

@media(max-width:760px){
 .sidebar{padding:18px 14px 14px}
 .promo-card{min-height:160px;padding:18px}
 .promo-card h3{font-size:18px}
 /* El título y las acciones del topbar son items flex sin min-width:0 ni wrap, así que su ancho
    intrínseco combinado empuja overflow horizontal de toda la página en pantallas angostas. */
 .topbar{flex-wrap:wrap;height:auto;min-height:76px;padding-top:10px;padding-bottom:10px;row-gap:8px}
 .topbar>div:first-child{min-width:0}
 .top-title{min-width:0}
 .top-title h2{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
 .top-title p{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .top-actions{flex-wrap:wrap;justify-content:flex-end;min-width:0}
 .top-actions .cloud-user{max-width:130px}
}