/* Home / Inicio: portada deportiva de HFA. */

/* Columna publicitaria dedicada (P1/P2) a la derecha del contenido deportivo — layout real con
   CSS Grid, nunca posiciones absolutas respecto al viewport. minmax(0,1fr) en la primera columna
   por la misma razón que .home-standings-leaders más abajo: sin el minmax(0,...) el min-content
   de las tablas anidadas de Home fuerza overflow horizontal. align-items:start para que el rail
   no se estire a la altura total de .home-main cuando sólo tiene uno o dos slots cortos. */
.home-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,290px);gap:24px;align-items:start}
.home-layout.home-layout--no-rail{grid-template-columns:minmax(0,1fr)}
.home-ad-rail{display:flex;flex-direction:column;gap:20px}
.home-ad-slot .promo-card{max-width:100%}
/* Placeholder discreto, sólo visible para ADMIN cuando el slot no tiene publicidad manual activa
   (el público nunca ve un hueco reservado: homeAdSlotHTML() no renderiza nada en ese caso). */
.home-ad-slot-empty{display:flex;align-items:center;justify-content:center;min-height:64px;padding:14px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--panel-2);color:var(--muted);font-size:12px;text-align:center}

.home-block{margin-top:16px}
.home-block--secondary{opacity:.92}
.card.home-block{padding:16px 18px}

.home-hero{padding:20px 26px;background:linear-gradient(135deg,#091d32,#0b5598);color:#fff;border-radius:20px;box-shadow:0 18px 42px rgba(9,37,66,.18)}
.home-hero-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.home-hero-brand{display:flex;align-items:center;gap:16px;min-width:0}
.home-hero-logo{display:block;width:82px;height:72px;object-fit:contain;flex:0 0 auto}
.home-hero-brand h2{margin:0;min-width:0;font-size:28px;font-weight:850;letter-spacing:-.01em}
.home-hero-context{margin:4px 0 0;color:#cfe4fa;font-size:13px;max-width:560px}
.home-hero-season{font-size:13px;background:rgba(255,255,255,.14);padding:8px 12px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.home-hero-admin{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}

.home-empty-hero{margin-top:16px;text-align:center;padding:44px 24px}
.home-empty-hero h3{margin:0 0 8px;font-size:20px}
.home-empty-hero p{margin:0;color:var(--muted)}

.match-spotlight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.spotlight-card{padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;gap:10px}
.spotlight-card.empty{cursor:default;align-items:center;text-align:center}
.spotlight-eyebrow{display:block;color:var(--muted);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.spotlight-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.spotlight-team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:14px;font-weight:750;min-width:0}
.spotlight-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
button.spotlight-team{border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
button.spotlight-team:hover span{color:var(--accent)}
.spotlight-score{display:flex;align-items:center;justify-content:center;gap:8px;font-size:34px;font-weight:900;white-space:nowrap}
.spotlight-score span{color:var(--muted);font-size:14px;font-weight:700}
.spotlight-vs-block{display:flex;flex-direction:column;align-items:center;gap:3px}
.spotlight-vs-mark{font-size:inherit;font-weight:inherit;letter-spacing:.04em;color:var(--muted)}
.spotlight-vs-date{font-size:11px;font-weight:650;color:var(--muted);white-space:normal;text-align:center}
.spotlight-meta{color:var(--muted);font-size:12px}
.spotlight-card .btn{align-self:flex-start;pointer-events:none}

.cup-status-line{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px}

/* minmax(0,1fr), no 1fr a secas: un track 1fr respeta el ancho mínimo automático de su contenido
   (el min-content de sus descendientes), así que sin el minmax(0,...) el min-width:760px heredado
   de .table (pensado para tablas anchas de Estadísticas) empuja esta fila a ~800px de ancho fijo,
   overflow horizontal en toda Home independientemente del viewport. */
.home-standings-leaders{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}

/* La mini-clasificación de Home sólo tiene 5 columnas angostas (#, Equipo, Pts, PJ, DG): no necesita
   el min-width:760px de .table (pensado para las tablas anchas de Estadísticas/Base de datos). */
.mini-standings .table{min-width:0}
.mini-standings .table th,.mini-standings .table td{padding:7px 10px;font-size:12.5px}
.mini-standings .table th{background:transparent;color:var(--muted);font-size:10px}

.leaders-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.leader-column h4{margin:0 0 8px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:850}
.leader-row{display:flex;align-items:center;gap:9px;width:100%;padding:6px 4px;border:0;background:transparent;border-bottom:1px solid var(--line-soft);border-radius:8px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.leader-row:last-child{border-bottom:0}
.leader-row:hover{background:var(--panel-2)}
.leader-rank{flex:0 0 auto;width:16px;color:var(--muted);font-size:12px;font-weight:800}
.leader-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:13px}
.leader-row b{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-size:14px}

.featured-strip{display:flex;align-items:center;gap:10px;padding:8px 4px 14px;margin-bottom:12px;border-bottom:1px solid var(--line);cursor:pointer}
.featured-strip:hover{background:var(--panel-2)}
.featured-strip-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.featured-strip-info strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.featured-strip-team{display:block;align-self:flex-start;margin:0;color:var(--muted);font-size:12px}
button.featured-strip-team{border:0;background:transparent;padding:0;font:inherit;text-align:left;cursor:pointer}
button.featured-strip-team:hover{color:var(--accent)}
.featured-strip-rating{font-size:18px;flex:0 0 auto}

.awards-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.award-chip{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px}
.award-chip>span{font-size:18px;flex:0 0 auto}
.award-chip strong{display:block;font-size:13px}
.award-chip small{color:var(--muted)}

.competitions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.competition-tile{padding:14px;border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.competition-tile h4{margin:2px 0 0;font-size:15px}
.competition-tile p{margin:0;color:var(--muted);font-size:12px}
.competition-tile .btn{margin-top:6px}

.match-row{cursor:pointer}
.home-team-link{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.home-team-link:hover .team-identity-name{color:var(--accent)}

.home-challengers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.home-challengers>button{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:inherit;text-align:left}
.home-challengers>button:hover{border-color:#e1b83b;background:var(--gold-soft)}
.home-challengers>button>span{display:grid;justify-items:start;gap:3px;min-width:0}
.home-challengers strong{font-size:14px}
.home-challengers small{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}

.home-news{margin-top:16px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}

/* El rail P1/P2 le resta ~314px a .home-main, así que el bloque editorial de Inicio necesita
   apilarse antes que el mismo bloque en la página Noticias (que no convive con un rail). */
@media(max-width:1300px){
 .home-news .editorial-feature{grid-template-columns:1fr}
 .home-news .editorial-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .home-news .editorial-item{grid-template-columns:1fr}
 .home-news .editorial-item-cover{width:100%;height:100px}
}

@media(max-width:1000px){
 .leaders-grid{grid-template-columns:1fr}
 .competitions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-challengers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 /* Sin columna lateral fija en mobile: una sola columna, así el orden natural del DOM ya coloca
    P1/P2 después de todo el contenido principal (home-main primero, home-ad-rail después). */
 .home-layout{grid-template-columns:minmax(0,1fr);gap:16px}
 .home-ad-rail{gap:16px}
 .home-hero{padding:18px}
 .home-hero-top{flex-direction:column;align-items:flex-start;gap:14px}
 .home-hero-logo{width:64px;height:56px}
 .home-hero-brand h2{font-size:24px}
 .match-spotlight{grid-template-columns:1fr}
 .spotlight-score{font-size:28px}
 .home-standings-leaders{grid-template-columns:minmax(0,1fr)}
 .awards-strip{grid-template-columns:1fr}
 .competitions-grid{grid-template-columns:1fr}
 .home-challengers{grid-template-columns:1fr}
 .home-news{padding:16px}
 .home-news .editorial-list{grid-template-columns:1fr}
 .home-news .editorial-main-body{padding:16px}
 .home-news .editorial-main-body h3{font-size:22px}
}