:root{
  --bg: #16130F;
  --panel: #1E1912;
  --panel-2: #241E16;
  --border: #362D1E;
  --text: #F5EFE4;
  --muted: #A89C89;
  --accent: #F2A93B;
  --accent-soft: rgba(242,169,59,0.16);
  --accent-2: #4FD8C4;
  --danger: #E05F5F;
  --radius: 10px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(circle at 20% -10%, #221b12 0%, var(--bg) 45%) fixed;
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  padding-bottom: 110px; /* espacio para el reproductor fijo */
}

a{ color: inherit; text-decoration: none; }

/* ---------- Barra superior ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(20,17,12,0.85);
  backdrop-filter: blur(6px);
  position: sticky; top:0; z-index: 20;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  font-family: 'JetBrains Mono', monospace;
  font-weight:600;
  color: var(--bg);
  background: var(--accent);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.brand-name{ font-family:'Oswald', sans-serif; font-size: 20px; letter-spacing:0.5px; }
.brand-name em{ font-style: normal; color: var(--accent); }
.topnav{ display:flex; align-items:center; gap:22px; font-size:14px; color:var(--muted); }
.topnav a:hover{ color: var(--text); }
.btn-add{
  background: var(--accent); color:#1a1408; padding:9px 16px; border-radius: 999px;
  font-weight:600; letter-spacing:0.2px;
}
.btn-add:hover{ filter: brightness(1.08); color:#1a1408; }

.page{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.content{ padding-top: 36px; }

/* ---------- Hero / búsqueda ---------- */
.hero{ padding: 20px 0 30px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.hero-eyebrow{
  font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:3px;
  font-size:12px; color: var(--accent-2); margin:0 0 8px;
}
.hero-title{ font-family:'Oswald', sans-serif; font-size: 34px; margin: 0 0 20px; font-weight:600; }
.search-box{ display:flex; max-width: 460px; gap:0; }
.search-box input{
  flex:1; padding: 12px 14px; background: var(--panel); border:1px solid var(--border);
  border-right:none; border-radius: 8px 0 0 8px; color: var(--text); font-size:14px;
}
.search-box input:focus{ outline:none; border-color: var(--accent); }
.search-box button{
  padding: 0 20px; background: var(--panel-2); border:1px solid var(--border);
  color: var(--text); border-radius: 0 8px 8px 0; cursor:pointer; font-size:14px;
}
.search-box button:hover{ background: var(--accent-soft); color: var(--accent); }

/* ---------- Dial de frecuencias (elemento firma) ---------- */
.freq-dial{
  display:flex; overflow-x:auto; gap: 2px; padding: 18px 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 28px; position: relative;
}
.freq-dial::before{
  content:""; position:absolute; left:50%; top:6px; bottom:6px; width:2px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity:0.5;
}
.freq-tick{
  flex: 0 0 auto; background:none; border:none; border-left:1px solid var(--border);
  color: var(--muted); font-family:'JetBrains Mono', monospace; font-size:11px;
  padding: 6px 12px; cursor:pointer; white-space:nowrap;
}
.freq-tick:hover{ color: var(--accent); }
.freq-tick.active{ color: var(--accent); font-weight:600; }
.freq-num::before{ content:""; }

/* ---------- Grid de tarjetas ---------- */
.grid-radios{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:18px;
}
.card-radio{
  background: var(--panel); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition: border-color .15s, transform .15s;
}
.card-radio:hover{ border-color: var(--accent); transform: translateY(-2px); }
.card-radio.playing{ border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }
.card-art{ aspect-ratio: 16/8; background:var(--panel-2); display:flex; align-items:center; justify-content:center; }
.card-art img{ width:100%; height:100%; object-fit:cover; }
.card-art-fallback{
  font-family:'JetBrains Mono', monospace; font-size:22px; color: var(--accent);
  letter-spacing:1px;
}
.card-body{ padding: 14px 16px 6px; flex:1; }
.card-title{ font-family:'Oswald', sans-serif; font-size:18px; margin:0 0 6px; font-weight:600; }
.badge{
  display:inline-block; font-size:11px; color: var(--accent-2); border:1px solid var(--accent-2);
  padding:2px 8px; border-radius:999px; margin-bottom:8px;
}
.card-desc{ font-size:13px; color: var(--muted); line-height:1.5; margin:0; }
.card-actions{ display:flex; align-items:center; gap:8px; padding: 12px 16px 16px; }
.btn-play-card{
  flex:1; background: var(--accent-soft); color: var(--accent); border:1px solid var(--accent);
  padding: 9px 10px; border-radius: 8px; cursor:pointer; font-size:13px; font-weight:600;
}
.btn-play-card:hover{ background: var(--accent); color:#1a1408; }
.btn-icon{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:14px;
}
.btn-icon:hover{ color: var(--text); border-color: var(--muted); }
.btn-icon.btn-danger:hover{ color: var(--danger); border-color: var(--danger); }

/* ---------- Estado vacío ---------- */
.empty-state{
  text-align:center; padding: 70px 20px; color: var(--muted); border:1px dashed var(--border);
  border-radius: var(--radius);
}
.empty-state p{ margin-bottom:18px; font-size:15px; }

/* ---------- Alertas ---------- */
.alert{ padding: 12px 16px; border-radius:8px; font-size:14px; margin-bottom:20px; }
.alert-ok{ background: rgba(79,216,196,0.12); border:1px solid var(--accent-2); color: var(--accent-2); }
.alert-error{ background: rgba(224,95,95,0.12); border:1px solid var(--danger); color: var(--danger); }

/* ---------- Formularios ---------- */
.form-page .panel{
  max-width: 640px; margin: 0 auto; background: var(--panel); border:1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
}
.panel-title{ font-family:'Oswald', sans-serif; font-size:26px; margin:0 0 8px; }
.panel-sub{ color: var(--muted); font-size:14px; margin: 0 0 24px; }
.radio-form label{ display:block; margin-bottom:16px; font-size:13px; color: var(--muted); }
.radio-form label span{ display:block; margin-bottom:6px; }
.radio-form input, .radio-form textarea{
  width:100%; padding: 11px 12px; background: var(--panel-2); border:1px solid var(--border);
  border-radius:8px; color: var(--text); font-size:14px; font-family:'Inter',sans-serif;
}
.radio-form input:focus, .radio-form textarea:focus{ outline:none; border-color: var(--accent); }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.form-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top: 8px; }
.btn-primary{
  background: var(--accent); color:#1a1408; border:none; padding: 11px 22px; border-radius:8px;
  font-weight:600; cursor:pointer; font-size:14px;
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-ghost{
  padding: 11px 18px; border-radius:8px; border:1px solid var(--border); color: var(--muted); font-size:14px;
}
.btn-ghost:hover{ color: var(--text); }

/* ---------- Reproductor fijo (fachada estilo radio) ---------- */
.player{
  position: fixed; left:0; right:0; bottom:0; z-index: 30;
  display:flex; align-items:center; gap:18px;
  padding: 12px 26px;
  background: linear-gradient(180deg, #201a12, #14100b);
  border-top: 1px solid var(--border);
}
.player-face{
  width:52px; height:52px; border-radius:8px; background: var(--panel-2);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  position:relative; flex:0 0 auto;
}
.dial-light{
  position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
  background: #453a26;
}
.dial-light.on{ background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.eq{ display:flex; align-items:flex-end; gap:3px; height:22px; }
.eq span{ width:3px; background: var(--accent); height:4px; border-radius:2px; opacity:0.5; }
.eq.playing span{ animation: bounce 0.8s ease-in-out infinite; opacity:1; }
.eq.playing span:nth-child(1){ animation-delay: 0s; }
.eq.playing span:nth-child(2){ animation-delay: 0.15s; }
.eq.playing span:nth-child(3){ animation-delay: 0.3s; }
.eq.playing span:nth-child(4){ animation-delay: 0.1s; }
.eq.playing span:nth-child(5){ animation-delay: 0.25s; }
@keyframes bounce{
  0%, 100%{ height:4px; }
  50%{ height:20px; }
}
.player-info{ flex:1; min-width:0; }
.player-label{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:2px; color: var(--accent-2);
  margin:0 0 2px;
}
.player-title{
  font-family:'Oswald', sans-serif; font-size:16px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player-genre{ font-size:12px; color: var(--muted); margin:2px 0 0; }
.player-controls{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
.btn-play{
  width:44px; height:44px; border-radius:50%; background: var(--accent); border:none; color:#1a1408;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.btn-play:disabled{ background: var(--panel-2); color: var(--muted); cursor:not-allowed; }
.volume{ display:none; align-items:center; gap:8px; color: var(--muted); }
.volume input{ width:90px; accent-color: var(--accent); }

@media (min-width: 640px){
  .volume{ display:flex; }
}

/* ---------- Foot ---------- */
.foot{ text-align:center; color: var(--muted); font-size:12px; padding: 40px 0 20px; }

@media (max-width: 640px){
  .hero-title{ font-size:26px; }
  .grid-2{ grid-template-columns: 1fr; }
  .topbar{ padding: 14px 16px; }
  .player{ padding: 10px 14px; gap:12px; }
}