/* ════════════════════════════════════════════════════════════════
   foco-hoy.css · Panel "Foco del día" premium compacto
   Se monta arriba de #view-calendario. Namespace fh-* / #foco-hoy-panel
   ════════════════════════════════════════════════════════════════ */

#foco-hoy-panel{
  background:#0c0c0e;
  color:#fff;
  border-radius:14px;
  padding:16px 20px 15px;
  margin:0 0 16px 0;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(12,12,14,.14), 0 1px 0 rgba(255,255,255,.04) inset;
  font-family:'Instrument Sans', system-ui, -apple-system, sans-serif;
}
#foco-hoy-panel .fh-accent-line{
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#e8ff47,#b8cc2a);
}

#foco-hoy-panel .fh-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:14px; padding-left:6px;
}
#foco-hoy-panel .fh-eyebrow{
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:#e8ff47; margin-bottom:4px;
}
#foco-hoy-panel .fh-day{
  font-family:'Syne', sans-serif; font-weight:800; font-size:23px;
  line-height:1; letter-spacing:-.015em;
}
#foco-hoy-panel .fh-date{
  font-family:'DM Mono', monospace; font-size:12px;
  color:rgba(255,255,255,.45); margin-left:9px;
}
#foco-hoy-panel .fh-count{
  font-family:'DM Mono', monospace; font-size:11px;
  color:rgba(255,255,255,.4); white-space:nowrap; padding-bottom:2px;
}

#foco-hoy-panel .fh-artists{
  display:flex; gap:9px; overflow-x:auto; padding:2px 6px 5px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
}
#foco-hoy-panel .fh-artists::-webkit-scrollbar{ height:5px; }
#foco-hoy-panel .fh-artists::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:4px; }

#foco-hoy-panel .fh-artist{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:7px 14px 7px 7px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
#foco-hoy-panel .fh-artist:hover{
  background:rgba(232,255,71,.09); border-color:rgba(232,255,71,.38);
  transform:translateY(-1px);
}
#foco-hoy-panel .fh-avwrap{ position:relative; width:38px; height:38px; flex:0 0 auto; }
#foco-hoy-panel .fh-av{
  position:absolute; inset:0; width:100%; height:100%;
  border-radius:50%; object-fit:cover; background:#1c1c20;
}
#foco-hoy-panel .fh-av-i{
  position:absolute; inset:0; align-items:center; justify-content:center;
  border-radius:50%; background:linear-gradient(135deg,#e8ff47,#c9dd33);
  color:#0c0c0e; font-family:'Syne',sans-serif; font-weight:800; font-size:14px;
}
#foco-hoy-panel .fh-meta{ display:flex; flex-direction:column; min-width:0; gap:1px; }
#foco-hoy-panel .fh-name{
  font-family:'Syne', sans-serif; font-weight:700; font-size:13px;
  line-height:1.15; white-space:nowrap; color:#fff;
}
#foco-hoy-panel .fh-time{
  font-family:'DM Mono', monospace; font-size:10px; color:#e8ff47; letter-spacing:.02em;
}
#foco-hoy-panel .fh-sub{ font-size:11px; color:rgba(255,255,255,.42); white-space:nowrap; }

#foco-hoy-panel .fh-divider{ height:1px; background:rgba(255,255,255,.08); margin:13px 6px 11px; }
#foco-hoy-panel .fh-gen{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding-left:6px; }
#foco-hoy-panel .fh-gen-label{
  font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
#foco-hoy-panel .fh-gen-items{ display:flex; gap:7px; flex-wrap:wrap; }
#foco-hoy-panel .fh-chip{
  font-size:11px; color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:7px; padding:3px 10px; white-space:nowrap;
}
#foco-hoy-panel .fh-empty{ font-size:13px; color:rgba(255,255,255,.5); padding:6px; }

@media (max-width:640px){
  #foco-hoy-panel{ padding:14px 16px; }
  #foco-hoy-panel .fh-day{ font-size:19px; }
  #foco-hoy-panel .fh-gen{ gap:8px; }
}