/* ─────────────────────────────────────────────────────────────────────────
   "Hoy en el Mundial" — componentes compartidos por el landing (sección
   post-kickoff que reemplaza al countdown) y /calendario (todas las fechas).
   Clases namespaced `phoy-*`. Diseño Figma (Section / Countdown): cards de 2
   columnas, status verde/rojo/navy, barra lime/gris/pink con %, meta-info en
   tooltip on hover. Depende de tokens.css (brand vars + fuentes FWC) y de que
   la página cargue la fuente DM Mono.
   ───────────────────────────────────────────────────────────────────────── */
.prode-hoy[hidden] { display: none; }
.prode-hoy { display: flex; flex-direction: column; gap: 48px; padding: 8px clamp(16px, 5vw, 64px) 24px; max-width: 1376px; margin: 0 auto; }
/* margin-bottom (no gap del padre): los grupos se renderizan dentro de
   [data-hoy-root], así que el gap de .prode-hoy no los separa. */
.prode-hoy .phoy-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 72px; }
.prode-hoy .phoy-group:last-child { margin-bottom: 0; }

/* Botón "Ver todas las fechas": wrapper que centra el CTA global del sitio
   (.prode-cta con su efecto slanted-reveal). */
.prode-hoy .phoy-all { display: flex; justify-content: center; margin-top: 8px; }
.prode-hoy .phoy-group__title { margin: 0; font-family: 'FWC2026 Ultra Cond', 'FWC2026', sans-serif; font-weight: 500; font-size: clamp(34px, 6vw, 48px); line-height: 1.2; text-transform: uppercase; color: var(--text-muted, rgba(7,20,54,.6)); }
.prode-hoy .phoy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .prode-hoy .phoy-grid { grid-template-columns: 1fr; } }

.prode-hoy .phoy-card { display: flex; flex-direction: column; border: 3px solid var(--brand-navy, #071436); overflow: hidden; background: #fff; }
.prode-hoy .phoy-status { display: flex; align-items: center; gap: 8px; padding: 3px 8px; min-height: 26px; border-bottom: 3px solid var(--brand-navy, #071436); font-family: 'DM Mono', monospace; font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.prode-hoy .phoy-card--done .phoy-status { background: #5cc971; color: #d0fed0; }
.prode-hoy .phoy-card--live .phoy-status { background: var(--brand-red, #f21b1b); color: var(--brand-off-white, #f8f9fa); }
.prode-hoy .phoy-card--next .phoy-status { background: #fff; color: var(--brand-navy, #071436); }
.prode-hoy .phoy-status .soft { color: var(--text-muted, rgba(7, 20, 54, 0.6)); }
.prode-hoy .phoy-status .spacer { margin-left: auto; opacity: .85; }
.prode-hoy .phoy-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: 0 0 auto; animation: phoy-pulse 1.2s infinite; }
@keyframes phoy-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

.prode-hoy .phoy-head { display: flex; align-items: center; justify-content: center; gap: 16px; border-bottom: 3px solid var(--brand-navy, #071436); }
.prode-hoy .phoy-flag { display: block; width: 55px; height: 34px; border: 1px solid var(--brand-navy, #071436); overflow: hidden; flex: 0 0 auto; }
.prode-hoy .phoy-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Equipo clickeable (bandera + código): botón con tooltip que revela el nombre
   completo al hover/tap/click. Mismo patrón que .prode-section__flag del app. */
.prode-hoy .phoy-team { position: relative; display: inline-flex; align-items: center; gap: 16px; padding: 0; margin: 0; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; }
.prode-hoy .phoy-team-tip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 6px 10px; background: var(--brand-navy, #071436); color: var(--brand-off-white, #f8f9fa); font-family: var(--font-family-body, "Inter", system-ui, sans-serif); font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: 0; text-transform: none; white-space: nowrap; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 20; }
.prode-hoy .phoy-team:hover .phoy-team-tip,
.prode-hoy .phoy-team:focus .phoy-team-tip,
.prode-hoy .phoy-team:focus-visible .phoy-team-tip { opacity: 1; pointer-events: auto; }
.prode-hoy .phoy-code { font-family: 'FWC2026 Ultra Cond', 'FWC2026', sans-serif; font-weight: 500; font-size: 44px; line-height: 1; text-transform: uppercase; color: var(--brand-navy, #071436); }
.prode-hoy .phoy-score { display: flex; align-items: stretch; }
.prode-hoy .phoy-num { width: 64px; display: flex; align-items: center; justify-content: center; padding: 18px 0; font-family: 'FWC2026 Expanded', 'FWC2026', sans-serif; font-weight: 900; font-size: 30px; color: var(--brand-navy, #071436); border-left: 3px solid var(--brand-navy, #071436); border-right: 3px solid var(--brand-navy, #071436); }
.prode-hoy .phoy-num--muted { color: var(--text-muted, rgba(7,20,54,.6)); }
.prode-hoy .phoy-vs { background: var(--brand-navy, #071436); color: var(--brand-off-white, #f8f9fa); display: flex; align-items: center; justify-content: center; padding: 0 10px; font-family: 'FWC2026 Ultra Cond', 'FWC2026', sans-serif; font-weight: 500; font-size: 26px; text-transform: uppercase; }

.prode-hoy .phoy-stat { margin-top: auto; position: relative; }
.prode-hoy .phoy-stat-label { display: flex; align-items: center; gap: 16px; padding: 3px 8px; min-height: 26px; border-bottom: 3px solid var(--brand-navy, #071436); font-family: 'DM Mono', monospace; font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-off-white, #f8f9fa); }
.prode-hoy .phoy-card--done .phoy-stat-label { background: #5cc971; }
.prode-hoy .phoy-card--live .phoy-stat-label,
.prode-hoy .phoy-card--next .phoy-stat-label { background: #fff; color: var(--brand-navy, #071436); }
.prode-hoy .phoy-stat-label .spacer { margin-left: auto; }

.prode-hoy .phoy-chart { display: flex; height: 42px; cursor: help; }
.prode-hoy .phoy-seg { flex: var(--g, 1) 1 0; min-width: fit-content; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-family: 'FWC2026 Ultra Cond', 'FWC2026', sans-serif; font-weight: 500; font-size: 26px; }
.prode-hoy .phoy-seg--lime { background: var(--brand-lime, #cfff00); color: var(--brand-navy, #071436); }
.prode-hoy .phoy-seg--gray { background: #e4e9e9; color: var(--brand-navy, #071436); border-left: 3px solid var(--brand-navy, #071436); border-right: 3px solid var(--brand-navy, #071436); }
.prode-hoy .phoy-seg--pink { background: var(--brand-pink, #f72575); color: var(--brand-off-white, #f8f9fa); }

/* Tooltip alineado al estándar del sitio (.prode-gstanding-inline__tooltip):
   bg navy + texto off-white en fuente body, 13px/400, esquinas 4px, shadow
   suave. Sin accent lime ni shadow dura. */
.prode-hoy .phoy-tip { position: absolute; bottom: calc(100% + 10px); left: 8px; right: 8px; background: var(--brand-navy, #071436); color: var(--brand-off-white, #f8f9fa); font-family: var(--font-family-body, "Inter", system-ui, sans-serif); font-weight: 400; font-size: 13px; line-height: 1.4; text-align: left; padding: 10px 12px; border-radius: 4px; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity .15s ease, transform .15s ease; z-index: 6; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.prode-hoy .phoy-tip b { font-weight: 700; }
.prode-hoy .phoy-stat:hover .phoy-tip { opacity: 1; visibility: visible; transform: translateY(0); }

.prode-hoy .phoy-card--empty { background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(7,20,54,.10) 5px, rgba(7,20,54,.10) 8px); }