/* ============================================================
   Vista Winamp — skin base del Winamp 2.x reinterpretada en CSS.
   Unidad --u = 1 px del skin original (275 px de ancho por ventana);
   en escritorio --u = 2px (el "double size" de siempre), en móvil se
   ajusta para que la ventana entre en el ancho de pantalla.
   ============================================================ */

@font-face { font-family: "Silkscreen"; font-weight: 400; src: url("/fonts/silkscreen-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Silkscreen"; font-weight: 700; src: url("/fonts/silkscreen-700.woff2") format("woff2"); font-display: swap; }

:root {
  --u: 2px;
  --ancho: calc(var(--u) * 275);
  --cuerpo: #2b2b2b;
  --cuerpo-2: #1c1c1c;
  --luz: #5c5c5c;
  --sombra: #0a0a0a;
  --lcd: #00e000;
  --lcd-apagado: #0a2410;
  --verde: #00e000;
  --amarillo: #ffd700;
  --rojo: #ff3030;
  --gris: #6a6a6a;
  --azul-sel: #0000c6;
  --tb-1: #3c4a5c;
  --tb-2: #1f2834;
}
@media (max-width: 600px) { :root { --u: calc((100vw - 16px) / 275); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #008080; }
body {
  background: #008080;
  color: #c0c0c0;
  font-family: "Silkscreen", "Courier New", monospace;
  font-size: calc(var(--u) * 6);
  line-height: 1;
  min-height: 100vh;
  padding: calc(var(--u) * 6) 8px calc(var(--u) * 12);
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}
button, a { font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
button { background: none; border: 0; }
:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }

.escritorio {
  display: grid;
  grid-template-columns: var(--ancho);
  gap: calc(var(--u) * 2);
  justify-content: center;
}
/* Siempre en una columna (pedido de Maxi 03/10): las cuatro ventanas
   acopladas una debajo de la otra, como el Winamp de siempre. */

/* --- ventana --- */
.win {
  position: relative;
  width: var(--ancho);
  background: linear-gradient(135deg, #343434 0, var(--cuerpo) 40%, var(--cuerpo-2) 100%);
  box-shadow:
    inset calc(var(--u) * 1) calc(var(--u) * 1) 0 var(--luz),
    inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--sombra),
    0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.win.main { height: calc(var(--u) * 116); }
.win.eq { height: calc(var(--u) * 116); }
.win.sombra { height: calc(var(--u) * 14) !important; }
.win.sombra > :not(.titlebar) { display: none; }

.titlebar {
  position: absolute;
  left: 0; top: 0; right: 0;
  height: calc(var(--u) * 14);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding: 0 calc(var(--u) * 3);
  background: linear-gradient(#55657a, #2a3545);
  border-bottom: calc(var(--u) * 1) solid var(--sombra);
}
.tb-lines { flex: 1; height: calc(var(--u) * 8); background: repeating-linear-gradient(#8a9ab0 0 var(--u), transparent var(--u) calc(var(--u) * 2)); opacity: 0.7; }
.tb-txt { font-size: calc(var(--u) * 6); font-weight: 700; color: #e8eef5; letter-spacing: calc(var(--u) * 0.5); text-shadow: var(--u) var(--u) 0 #000; white-space: nowrap; }
.tb-btns { display: flex; gap: calc(var(--u) * 1); }
.tb-btns i, .tb-btns a { display: block; width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: #3a3a3a; box-shadow: inset var(--u) var(--u) 0 var(--luz), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--sombra); position: relative; }
.tb-btns i:nth-child(1)::after { content: ""; position: absolute; left: calc(var(--u) * 2); bottom: calc(var(--u) * 2); width: calc(var(--u) * 5); height: var(--u); background: #c0c0c0; }
.tb-btns i:nth-child(2)::after, .tb-sombra::after { content: ""; position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2); width: calc(var(--u) * 5); height: calc(var(--u) * 2); border: var(--u) solid #c0c0c0; border-width: var(--u) 0; }
.tb-sombra { cursor: pointer; }
.tb-cerrar::before, .tb-cerrar::after { content: ""; position: absolute; left: calc(var(--u) * 1.5); top: calc(var(--u) * 4); width: calc(var(--u) * 6); height: var(--u); background: #c0c0c0; transform: rotate(45deg); }
.tb-cerrar::after { transform: rotate(-45deg); }

/* --- principal --- */
.clutter { position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * 22); width: calc(var(--u) * 8); display: grid; gap: calc(var(--u) * 1); }
.clutter i { font-style: normal; font-size: calc(var(--u) * 5); color: #8a8a8a; text-align: center; height: calc(var(--u) * 7); line-height: calc(var(--u) * 7); background: #1a1a1a; box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #444; }

.estado-ico { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 28); width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.estado-ico.play::after { content: ""; position: absolute; left: var(--u); top: 0; border-left: calc(var(--u) * 7) solid var(--lcd); border-top: calc(var(--u) * 4.5) solid transparent; border-bottom: calc(var(--u) * 4.5) solid transparent; }
.estado-ico.pause::after { content: ""; position: absolute; left: var(--u); top: 0; width: calc(var(--u) * 6); height: calc(var(--u) * 9); border-left: calc(var(--u) * 2) solid var(--lcd); border-right: calc(var(--u) * 2) solid var(--lcd); }
.estado-ico.stop::after { content: ""; position: absolute; left: var(--u); top: var(--u); width: calc(var(--u) * 7); height: calc(var(--u) * 7); background: var(--lcd); }

.lcd-kn { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 24); width: calc(var(--u) * 56); height: calc(var(--u) * 16); display: flex; gap: calc(var(--u) * 3); align-items: center; }
.lcd-kn svg { height: calc(var(--u) * 15); width: auto; display: block; }
.seg { fill: var(--lcd-apagado); }
.seg.on { fill: var(--lcd); }
.lcd-unidad { position: absolute; left: calc(var(--u) * 86); top: calc(var(--u) * 33); font-size: calc(var(--u) * 5); color: var(--lcd); }

.marquee { position: absolute; left: calc(var(--u) * 111); top: calc(var(--u) * 26); width: calc(var(--u) * 153); height: calc(var(--u) * 8); overflow: hidden; color: var(--lcd); font-size: calc(var(--u) * 6); white-space: nowrap; }
.marquee span { display: inline-block; padding-left: 100%; animation: desplazar var(--marquee-dur, 18s) linear infinite; animation-delay: -4s; }
@keyframes desplazar { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee span { animation: none; padding-left: 0; } }

.mini-disp { position: absolute; top: calc(var(--u) * 40); display: flex; flex-direction: column; gap: calc(var(--u) * 1); color: var(--lcd); font-size: calc(var(--u) * 5); }
#disp-racha { left: calc(var(--u) * 108); }
#disp-dir { left: calc(var(--u) * 142); }
#disp-agua { left: calc(var(--u) * 176); }
.mini-disp b { font-weight: 400; font-size: calc(var(--u) * 7); }
.mini-disp small { font-size: calc(var(--u) * 4); color: #7aa07a; }

.lamparas { position: absolute; left: calc(var(--u) * 208); top: calc(var(--u) * 41); display: flex; gap: calc(var(--u) * 3); }
.lamp { font-size: calc(var(--u) * 5); color: #2c3d2c; }
.lamp.on { color: var(--lcd); text-shadow: 0 0 calc(var(--u) * 2) var(--lcd); }
#lamp-amarillo.on { color: var(--amarillo); text-shadow: 0 0 calc(var(--u) * 2) var(--amarillo); }
#lamp-rojo.on { color: var(--rojo); text-shadow: 0 0 calc(var(--u) * 2) var(--rojo); }

.analizador { position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 43); width: calc(var(--u) * 76); height: calc(var(--u) * 16); background: #000; display: flex; align-items: flex-end; gap: var(--u); padding: 0 var(--u); box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #333; }
.analizador i { flex: 1; min-width: 0; height: calc(var(--kn, 0) * 100%); min-height: var(--u); position: relative; background: repeating-linear-gradient(to top, var(--c) 0 var(--u), #000 var(--u) calc(var(--u) * 2)); --c: var(--gris); }
.analizador i.verde { --c: var(--verde); }
.analizador i.amarillo { --c: var(--amarillo); }
.analizador i.rojo { --c: var(--rojo); }
.analizador i::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--u) * -2); height: var(--u); background: #c0c0c0; }
.analizador i.ahora { outline: var(--u) solid #fff; outline-offset: 0; }

.pos { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 72); width: calc(var(--u) * 248); height: calc(var(--u) * 10); }
.pos-track { position: absolute; left: 0; right: 0; top: calc(var(--u) * 4); height: calc(var(--u) * 2); background: #000; box-shadow: 0 var(--u) 0 var(--luz); }
.pos-thumb, .sl-thumb { position: absolute; top: 0; width: calc(var(--u) * 29); height: calc(var(--u) * 10); background: linear-gradient(#5a5a5a, #3a3a3a); box-shadow: inset var(--u) var(--u) 0 var(--luz), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--sombra); }
.pos-thumb::after, .sl-thumb::after { content: ""; position: absolute; left: 50%; top: calc(var(--u) * 2); width: calc(var(--u) * 2); height: calc(var(--u) * 6); margin-left: calc(var(--u) * -1); background: #8a8a8a; }
.sl-thumb { width: calc(var(--u) * 14); height: calc(var(--u) * 11); }

.slider { position: absolute; top: calc(var(--u) * 57); height: calc(var(--u) * 13); }
.slider small { position: absolute; left: 0; top: calc(var(--u) * 12); font-size: calc(var(--u) * 4); color: #8a8a8a; }
.vol { left: calc(var(--u) * 107); width: calc(var(--u) * 68); }
.bal { left: calc(var(--u) * 177); width: calc(var(--u) * 38); }
.vol-track, .bal-track { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1); height: calc(var(--u) * 9); background: #000; box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #444; }
/* La pista del volumen va de verde a rojo como en el skin base: con el
   viento mapeado encima, el color dice solo la fuerza. */
.vol-track::before { content: ""; position: absolute; left: var(--u); top: var(--u); bottom: var(--u); width: var(--fill, 0%); background: linear-gradient(90deg, #00c000, #e0e000 60%, #ff3030); }
.bal-track::before { content: ""; position: absolute; top: var(--u); bottom: var(--u); left: 50%; width: var(--fill, 0%); background: linear-gradient(90deg, #00c000, #ff3030); }

.btn-tgl { position: absolute; height: calc(var(--u) * 12); padding: 0 calc(var(--u) * 3); font-size: calc(var(--u) * 5); color: #9a9a9a; background: #2f2f2f; box-shadow: inset var(--u) var(--u) 0 var(--luz), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--sombra); }
.btn-tgl.activo { color: var(--lcd); text-shadow: 0 0 calc(var(--u) * 2) var(--lcd); box-shadow: inset var(--u) var(--u) 0 var(--sombra), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--luz); }
#tgl-eq { left: calc(var(--u) * 219); top: calc(var(--u) * 58); width: calc(var(--u) * 22); }
#tgl-pl { left: calc(var(--u) * 242); top: calc(var(--u) * 58); width: calc(var(--u) * 22); }
.transporte { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 88); display: flex; gap: 0; }
.transporte button, .transporte a { width: calc(var(--u) * 23); height: calc(var(--u) * 18); background: linear-gradient(#444, #2a2a2a); box-shadow: inset var(--u) var(--u) 0 var(--luz), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--sombra); display: flex; align-items: center; justify-content: center; }
.transporte button:active { box-shadow: inset var(--u) var(--u) 0 var(--sombra), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--luz); }
.transporte .eject { width: calc(var(--u) * 22); height: calc(var(--u) * 16); margin-left: calc(var(--u) * 5); align-self: flex-start; margin-top: var(--u); }
.transporte i { display: block; }
.ic-play { border-left: calc(var(--u) * 7) solid #d0d0d0; border-top: calc(var(--u) * 4) solid transparent; border-bottom: calc(var(--u) * 4) solid transparent; }
.ic-pause { width: calc(var(--u) * 7); height: calc(var(--u) * 8); border-left: calc(var(--u) * 2.5) solid #d0d0d0; border-right: calc(var(--u) * 2.5) solid #d0d0d0; }
.ic-stop { width: calc(var(--u) * 7); height: calc(var(--u) * 7); background: #d0d0d0; }
.ic-prev, .ic-next { width: calc(var(--u) * 9); height: calc(var(--u) * 8); position: relative; }
.ic-prev::before { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--u) * 2); height: 100%; background: #d0d0d0; }
.ic-prev::after { content: ""; position: absolute; right: 0; top: 0; border-right: calc(var(--u) * 6) solid #d0d0d0; border-top: calc(var(--u) * 4) solid transparent; border-bottom: calc(var(--u) * 4) solid transparent; }
.ic-next::before { content: ""; position: absolute; right: 0; top: 0; width: calc(var(--u) * 2); height: 100%; background: #d0d0d0; }
.ic-next::after { content: ""; position: absolute; left: 0; top: 0; border-left: calc(var(--u) * 6) solid #d0d0d0; border-top: calc(var(--u) * 4) solid transparent; border-bottom: calc(var(--u) * 4) solid transparent; }
.ic-eject { width: calc(var(--u) * 9); height: calc(var(--u) * 8); position: relative; }
.ic-eject::before { content: ""; position: absolute; left: 0; top: 0; border-bottom: calc(var(--u) * 5) solid #d0d0d0; border-left: calc(var(--u) * 4.5) solid transparent; border-right: calc(var(--u) * 4.5) solid transparent; }
.ic-eject::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 2); background: #d0d0d0; }
.shuffle { left: calc(var(--u) * 164); top: calc(var(--u) * 89); width: calc(var(--u) * 46); height: calc(var(--u) * 15); }
.repeat { left: calc(var(--u) * 211); top: calc(var(--u) * 89); width: calc(var(--u) * 28); height: calc(var(--u) * 15); }

/* --- ecualizador --- */
.eq-cab { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 18); right: calc(var(--u) * 14); display: flex; gap: calc(var(--u) * 2); align-items: center; }
.eq-cab .btn-tgl { position: static; }
.eq-presets { margin-left: auto; font-size: calc(var(--u) * 5); color: var(--lcd); padding: calc(var(--u) * 2) calc(var(--u) * 3); background: #000; box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #444; }
.eq-graf { position: absolute; left: calc(var(--u) * 86); top: calc(var(--u) * 17); width: calc(var(--u) * 113); height: calc(var(--u) * 19); background: #000; box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #444; }
.eq-graf svg { width: 100%; height: 100%; display: block; }
.eq-graf .linea { fill: none; stroke: var(--lcd); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.eq-graf .guia { stroke: #2a4a2a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.eq-preamp { position: absolute; left: calc(var(--u) * 21); top: calc(var(--u) * 38); }
.eq-bandas { position: absolute; left: calc(var(--u) * 78); top: calc(var(--u) * 38); display: flex; gap: calc(var(--u) * 4); }
.eq-banda { width: calc(var(--u) * 14); display: grid; justify-items: center; gap: calc(var(--u) * 2); }
.eq-track { position: relative; display: block; width: calc(var(--u) * 14); height: calc(var(--u) * 63); background: #000; box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #444; }
.eq-track i { position: absolute; left: calc(var(--u) * 5); right: calc(var(--u) * 5); bottom: var(--u); height: calc(var(--kn, 0) * 100%); background: linear-gradient(to top, #00c000, #e0e000 60%, #ff3030); }
.eq-track i.verde { background: var(--verde); }
.eq-track i.amarillo { background: var(--amarillo); }
.eq-track i.rojo { background: var(--rojo); }
.eq-track i.gris { background: var(--gris); }
.eq-track b { position: absolute; left: var(--u); right: var(--u); height: calc(var(--u) * 11); bottom: calc(var(--kn, 0) * 100% - var(--u) * 5); background: linear-gradient(#5a5a5a, #3a3a3a); box-shadow: inset var(--u) var(--u) 0 var(--luz), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--sombra); }
.eq-track b::after { content: ""; position: absolute; left: calc(var(--u) * 2); right: calc(var(--u) * 2); top: 50%; height: var(--u); background: #8a8a8a; }
.eq-banda small { font-size: calc(var(--u) * 4); color: #9a9a9a; white-space: nowrap; }
.eq-banda small b { color: var(--lcd); font-weight: 400; }

/* --- playlist --- */
.pl { padding-top: calc(var(--u) * 16); padding-bottom: calc(var(--u) * 22); min-height: calc(var(--u) * 116); }
.pl-lista { list-style: none; margin: 0 calc(var(--u) * 12) 0 calc(var(--u) * 12); background: #000; box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #444; padding: calc(var(--u) * 2); min-height: calc(var(--u) * 70); }
.pl-lista li { display: flex; justify-content: space-between; gap: calc(var(--u) * 4); padding: calc(var(--u) * 1.5) calc(var(--u) * 2); color: var(--lcd); font-size: calc(var(--u) * 6); cursor: pointer; white-space: nowrap; }
.pl-lista li span:first-child { overflow: hidden; text-overflow: ellipsis; }
.pl-lista li.actual { background: var(--azul-sel); color: #fff; }
.pl-lista li:hover:not(.actual) { color: #fff; }
.pl-lista li .pl-nivel { color: #7aa07a; }
.pl-lista li.actual .pl-nivel { color: #cfd8ff; }
.pl-pie { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 4); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }
.pl-btns { display: flex; gap: var(--u); }
.pl-btns i { font-style: normal; font-size: calc(var(--u) * 4); color: #9a9a9a; padding: calc(var(--u) * 2) calc(var(--u) * 2); background: #2f2f2f; box-shadow: inset var(--u) var(--u) 0 var(--luz), inset calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--sombra); }
.pl-tiempo { font-size: calc(var(--u) * 5); color: var(--lcd); padding: calc(var(--u) * 2) calc(var(--u) * 3); background: #000; box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #444; white-space: nowrap; }

/* --- video --- */
.video { padding: calc(var(--u) * 16) calc(var(--u) * 10) calc(var(--u) * 20); }
.video-caja { position: relative; background: #000; aspect-ratio: 16 / 9; box-shadow: inset var(--u) var(--u) 0 #000, inset calc(var(--u) * -1) calc(var(--u) * -1) 0 #444; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video-caja img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
.video-msg { color: var(--lcd); font-size: calc(var(--u) * 6); text-align: center; padding: calc(var(--u) * 4); }
.video-pie { position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 10); bottom: calc(var(--u) * 4); display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 5); color: var(--lcd); }

.pie-win { text-align: center; margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 5); color: #d8f0f0; }
.pie-win a { color: #fff; text-decoration: underline; }