/* === Caribe Stereo - estilo moderno tipo radio === */
:root{
  --bg1:#001f3f;
  --bg2:#00bfa6;
  --glass:rgba(255,255,255,0.08);
  --glassStroke:rgba(255,255,255,0.15);
  --text:#eaf6f5;
  --muted:#bcd9d6;
  --accent:#00ffc6;
  --accent2:#ff7a59;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  background-attachment: fixed;
}

.container{
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:24px;
  align-items:center;
  justify-content:center;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  user-select:none;
}
.brand .logo{
  font-size:2rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.brand h1{
  margin:0;
  font-weight:700;
  letter-spacing:.5px;
}
.brand p{
  margin:.1rem 0 0;
  color:var(--muted);
}

.glass{
  background:var(--glass);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border:1px solid var(--glassStroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.player-card{
  width:min(560px, 92vw);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.artwork-wrap{
  position:relative;
  width:100%;
  border-radius:18px;
  overflow:hidden;
}
.artwork{
  width:100%;
  display:block;
  aspect-ratio:1/1;
  object-fit:cover;
}
.viz{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:6px;
  align-items:flex-end;
  height:22px;
}
.viz span{
  width:4px;
  height:8px;
  border-radius:2px;
  background:var(--accent);
  animation: bounce 1s infinite ease-in-out;
  opacity:.85;
}
.viz span:nth-child(2){animation-delay:.1s}
.viz span:nth-child(3){animation-delay:.2s}
.viz span:nth-child(4){animation-delay:.3s}
.viz span:nth-child(5){animation-delay:.4s}
@keyframes bounce{
  0%,100%{height:8px}
  50%{height:22px}
}

.meta h2{margin:.3rem 0 0}
.meta .muted{color:var(--muted)}
.small{font-size:.9rem}
.tag{
  display:inline-block;
  margin-top:2px;
  padding:.2rem .55rem;
  border-radius:999px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.15);
  color:#e7fffb;
  font-size:.8rem;
}

.controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:6px;
}
.icon-btn{
  background:transparent;
  color:var(--text);
  border:none;
  cursor:pointer;
  transition: transform .2s ease;
}
.icon-btn i{
  font-size:2.2rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.icon-btn:hover{ transform: scale(1.06) }
.hidden{display:none}

.vol{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:10px;
}
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:130px;
  height:6px;
  background:rgba(255,255,255,.2);
  border-radius:999px;
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);
  border:2px solid rgba(0,0,0,.25);
}

.progress{
  width:100%;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
}
.elapsed{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}

.timer{
  display:flex;
  justify-content:flex-end;
  font-feature-settings:"tnum";
  font-variant-numeric: tabular-nums;
  color:var(--muted);
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background:var(--glass);
  border:1px solid var(--glassStroke);
  color:var(--text);
  padding:.6rem 1rem;
  border-radius:999px;
  text-decoration:none;
  transition: transform .15s ease, background .2s ease;
  box-shadow: var(--shadow);
}
.btn:hover{ transform: translateY(-1px); background:rgba(255,255,255,0.14) }
.btn.outline{ background:transparent }

.clock{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#e4fffb;
  margin-left:6px;
}

@media (max-width:420px){
  .brand h1{font-size:1.5rem}
}


/* === Real-time mini equalizer === */
.viz{ pointer-events:none }
.viz span{
  animation: none !important;
  height: 8px;
  transition: height 0.08s linear;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}


/* === Theme support (dark/light) and settings panel === */
:root.light{
  --bg1:#e7f7f5;
  --bg2:#cfeef0;
  --glass:rgba(255,255,255,0.65);
  --glassStroke:rgba(0,0,0,0.08);
  --text:#0b2b2f;
  --muted:#375c61;
  --accent:#00bfa6;
  --accent2:#00796b;
  --shadow:0 8px 22px rgba(0,0,0,.15);
}

.settings{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  padding:12px;
  width:min(560px, 92vw);
}
.settings .row{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}
.settings label{
  font-size:.9rem;
}
.settings select, .settings input[type="range"]{
  width:140px;
}
@media (max-width:560px){
  .settings{ grid-template-columns: 1fr; }
  .settings .row{ justify-content:space-between }
}

/* Colorize bars by frequency bucket via HSL hues */
.viz span{
  background: none;
}
.viz span[data-idx]{
  background: hsl(calc(180 + (var(--hueFactor, 0) * 1deg)), 90%, 60%);
}


/* === Ajuste para botones de acciones y panel debajo === */
.actions{
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.actions .btn{
  width:min(280px, 80vw);
  text-align:center;
}


/* EQ visibility & responsive tweaks */
.artwork-wrap{ position:relative }
.viz{ z-index:2; pointer-events:none; height:30px; bottom:12px }
.viz span{
  width:6px;
  background: linear-gradient(180deg, var(--accent), var(--accent2)); /* default visible */
  border-radius:3px;
}
@media (max-width:480px){
  .viz{ height:34px; bottom:10px }
  .viz span{ width:7px }
}


/* Player width adaptive */
.player-card{ width:min(640px, 94vw) }
@media (min-width:900px){
  .player-card{ width:min(720px, 70vw) }
}


/* Actions spacing tweak */
.actions{ gap:14px }

/* CORS warning banner */
.cors-warn{
  background: rgba(255, 193, 7, .15);
  border: 1px solid rgba(255, 193, 7, .35);
  color: #ffe9a6;
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: left;
  font-size: .9rem;
}
.hidden{ display:none !important }