/* BASE */

.banner-inner {
  position: relative;
  height: 100%;
}
.album-card.album-momo {
  background-image: url("fondos/momo.jpg"); background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.album-card.album-luzbelito {
  background-image: url("fondos/luzbelito.jpg");
   background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.album-card.album-tesoro {
  background-image: url("fondos/tesoro.jpg"); background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.album-card.album-oktubre {
  background-image: url("fondos/oktubre.jpg"); background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#mp3-box {
  position: absolute;
  width: 200px;
  z-index:112;
  bottom:15px;
  font-size:12Px;
}
#archive-player{
  width:50px;
}
.spin{
 width:60%;

}
.parlante2{
  position:absolute;
  margin-top: 310px;
 max-width:200px;
 margin-left:30px;
   pointer-events: none;

}
.luz {
  color:red;
  position:absolute;
  font-size:27px;
  bottom:46px;
  opacity: 0.8;
}.luz.on {color:lightgreen;
  opacity: 1;
  text-shadow:
    0 0 4px #00ff88,
    0 0 8px #00ff88,
    0 0 14px rgba(0,255,136,0.9);
}
#fake-ui {
  inset: 0;
  color: white;
  font-family: monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  margin-left:38px;
}
.ipod-ui-bg {
  position: absolute;
  width: 50%;
  bottom:-22px;
  left:-21px;
  object-fit: contain; /* o cover */
  pointer-events: none;
}
.mp3-ui-bg {
  position: absolute;
  width: 50%;
  right:2px;
  bottom:-13px;
  object-fit: contain; /* o cover */
  pointer-events: none;
}
/* caja blanca */
.now-playing-box {
  position: absolute;
  right: 193px;
  bottom: 39px;
  width: 11%;
 white-space: nowrap;  /* NO saltos de línea */
  overflow: hidden;     /* oculta lo que sobra */
  text-overflow: ellipsis;
  padding: 6px;

  font-size: 9px;
  line-height: 1.2;
}


/* textos */

.np-title {
  color:lightblue;
  font-weight: bold;
  animation: scroll-text 12s linear infinite;
   animation-delay: 2.5s;
}@keyframes scroll-text {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.np-artist {
  color:lightblue;
  font-size: 7px;
  opacity: 0.8; animation: scroll-text 12s linear infinite;
   animation-delay: 2.5s;
}

.sticker-fijo {
  position: fixed;   /* Se queda quieto en la pantalla */
  bottom: 2px;      /* Distancia desde abajo */
  right: 2px;       /* Distancia desde la derecha */
  width: 20%;      /* Ajusta el tamaño a tu gusto */
  height: auto;
  filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.7));
  z-index: 9999;     /* Asegura que esté por encima de TODO */
  pointer-events: none; /* Opcional: permite hacer click a lo que hay debajo */
}
.sticker-mosca {
  position: fixed;   /* Se queda quieto en la pantalla */
  top: 2px;      /* Distancia desde abajo */
left: max(10px, calc(50% - 680px + 110px));   /* Distancia desde la derecha */
  width: 10%;      /* Ajusta el tamaño a tu gusto */
  height: auto;
  z-index: 9999;     /* Asegura que esté por encima de TODO */
  pointer-events: none; /* Opcional: permite hacer click a lo que hay debajo */
  filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.2));
}
.sticker-momo {
  position: fixed;   /* Se queda quieto en la pantalla */
  top: 2px;      /* Distancia desde abajo */
left: max(10px, calc(50% + 480px - 110px));   /* Distancia desde la derecha */
  width: 10%;      /* Ajusta el tamaño a tu gusto */
  height: auto;
  z-index: 9999;     /* Asegura que esté por encima de TODO */
  pointer-events: none; /* Opcional: permite hacer click a lo que hay debajo */
  filter: drop-shadow(4px 4px 1px rgba(0,0,0,0.5));
}
@keyframes wobble {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(5deg); }
  30%  { transform: rotate(-5deg); }
  45%  { transform: rotate(1.5deg); }
  60%  { transform: rotate(-1.5deg); }
  75%  { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}

.sticker-momo {
  transform-origin: center;
}

@keyframes fly-wobble {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(1px, -1px) rotate(2deg); }
  40%  { transform: translate(-1px, 1px) rotate(-2deg); }
  60%  { transform: translate(1px, 1px) rotate(1deg); }
  80%  { transform: translate(-1px, -1px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.sticker-mosca {
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}
body {
    margin: 0;
  color: white;
  background: black;
  font-family: sans-serif;
}
.bg-img {
  position: fixed;
  top: 50%;
  left: 50%;

  height: 100vh;
  width: auto;

  transform: translate(-50%, -50%);

  pointer-events: none;
  user-select: none;

  z-index: -1;
}

/* CONTENEDOR 4:3 */
.wrapper {
  width: 960px;
  margin: 0 auto;
}

/* HEADER */

.bn-gb {
 width:100%;
}
.left {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* que ocupen todo el ancho de la columna */
  padding: 20px;

}

.left-btn {
  background-color: #333;
  color: #eee;
  border: none;
  padding: 12px;
  margin-bottom: 1px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.left-btn:hover {
  background-color: #555;
}


/* LAYOUT PRINCIPAL */
.layout {
  display: flex;
}

/* COLUMNAS */
.left {
  width: 100px;
  padding: 10px;
}

.center {
  width: 680px;
  padding: 3px;
}

.right {
  width: 120px;
  padding: 10px;
}

/* FOOTER */
.footer {
  padding: 10px;
}

/* ====== PAGINA DE MUSICA ====== */

/* MENU INTERNO */
.menu {
  padding: 15px;
  margin-bottom: 15px;
}

/* BLOQUE SUPERIOR */
.top {

  display: flex;
  align-items: stretch;
  margin-bottom: 15px;
}

/* ALBUMES / TOP */
.albumes-top {

  padding: 0px;
  background-size: cover;
  background-image: url("fondos/vitrina.jpg");
 width: 365px;
 height:340px;
}
.top-canciones img {
  width:110%;
}

.top-canciones {
  padding: 1px;
   background-size: cover;
  background-image: url("fondos/playlist.jpg");
  width: 40%;
 margin-left:30px;
  height: 300px;      /* alto fijo */
  overflow-y: auto;   /* scroll vertical interno */
  overflow-x: hidden;
   display: flex;

    flex-direction: column;
}

.playlist .track:nth-child(even) {
  background-color: black; /* azul */
}
.playlist .track:hover {
  background-color: blue;
  color: white;
}

.mini-rect {
 
 height: 35px;
  width: 100%;
   position: relative;
     background-size: contain;
  background-repeat: no-repeat;
   background-image: url("fondos/playlist2.jpg");
  box-sizing: border-box;
}

.playlist {
  flex: 1;
  overflow-y: auto;
}

/* ALBUM INDIVIDUAL */

/* GRID DE ALBUMES */
.grid-albumes {
  display: grid;
  grid-template-columns: repeat(5, 60px);
  grid-auto-rows: 54px;
  row-gap: 20px;   /* ← separación ARRIBA / ABAJO */
  column-gap: 10px; /* ← costados (podés dejarlo chico) */
}


/* PLAYLIST */
.playlist {
  display: flex;
  flex-direction: column;
  padding: 2px 5px;
}



/* FILA DE CANCION */
.track {
  display: flex;
  align-items: center;
  padding: 1px 0px;
            /* CLAVE */
            color: #12d925;
  box-sizing: border-box;
}

/* cover */
.cover {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.cover img {
  width: 100%;
  height: 100%;
  margin-left:7px;
  object-fit: cover;
  display: block;
}

/* bloque texto */
.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;              /* CLAVE */
  flex-grow: 1;              /* CLAVE */
}

/* nombre cancion */
.title {
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  
  text-overflow: ellipsis;
}

/* banda abajo */
.artist {
  font-size: 8px;
  opacity: 0.7;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.number {
  font-size: 8px;
  opacity: 0.7;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* play + tiempo */
.player {
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}




/* PORTADA */
.cover {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}

/* INFO CANCION */

.album-btn img {
  width: 99%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}
.album-btn.luzbelito {
background-size: cover;  border: none;
  background-image: url("discos/luzbelito.jpg");
}

/* hover */
.album-btn.luzbelito:hover {
  background-size: cover;  border: none;
  background-image: url("discos/cd/cdluzbelito.jpg");
}

.album-btn.gulp {
  background-size: cover;  border: none;
  background-image: url("discos/gulp.jpg");
}
.album-btn.gulp:hover {
  background-size: cover; 
  background-image: url("discos/cd/cdgulp.jpg");
}

.album-btn.oktubre {
  background-size: cover;  border: none;
  background-image: url("discos/oktubr.jpg");
}
.album-btn.oktubre:hover {
  background-size: cover; 
  background-image: url("discos/cd/cdoktubre.jpg");
}

.album-btn.baion {
  background-size: cover;  border: none;
  background-image: url("discos/baion.jpg");
}
.album-btn.baion:hover {
  background-size: cover; 
  background-image: url("discos/cd/cdbaion.jpg");
}

.album-btn.bang {
  background-size: cover;  border: none;
  background-image: url("discos/bang.jpg");
}
.album-btn.bang:hover {
  background-size: cover; 
  background-image: url("discos/cd/cdbang.jpg");
}

.album-btn.mosca {
  background-size: cover;  border: none;
  background-image: url("discos/mosca.jpg");
}
.album-btn.mosca:hover {
  background-size: cover; 
  background-image: url("discos/cd/cdmosca.jpg");
}

.album-btn.lobo {
  background-size: cover;  border: none;
  background-image: url("discos/lobo.jpg");
}
.album-btn.lobo:hover {
  background-size: cover;
  background-image: url("discos/cd/cdlobo.jpg");
}

.album-btn.cordero {
  background-size: cover;  border: none;
  background-image: url("discos/cordero.jpg");
}
.album-btn.cordero:hover {
  background-size: cover;  
  background-image: url("discos/cd/cdcordero.jpg");
}

.album-btn.bondi {
  background-size: cover;  border: none;
  background-image: url("discos/bondi.jpg");
}
.album-btn.bondi:hover {
  background-size: cover;  
  background-image: url("discos/cd/cdbondi.jpg");
}

.album-btn.momo {
  background-size: cover;  border: none;
  background-image: url("discos/momo.jpg");
}
.album-btn.momo:hover {
  background-size: cover;  
  background-image: url("discos/cd/cdmomo.jpg");
}
.album-btn.tesoro {
  background-size: cover;  border: none;
  background-image: url("discos/tesoro.jpg");
}
.album-btn.tesoro:hover {
  background-size: cover; 
  background-image: url("discos/cd/cdtesoro.jpg");
}

.album-btn.porco {
  background-size: cover;  border: none;
  background-image: url("discos/porco.jpg");
}
.album-btn.porco:hover {
  background-size: cover; 
  background-image: url("discos/cd/cdporco.jpg");
}

.album-btn.perfume {
  background-size: cover;  border: none;
  background-image: url("discos/perfume.jpg");
}
.album-btn.perfume:hover {
  background-size: cover;  
  background-image: url("discos/cd/cdperfume.jpg");
}

.album-btn.pajaros {
  background-size: cover;  border: none;
  background-image: url("discos/pajaros.jpg");
}
.album-btn.pajaros:hover {
  background-size: cover;
  background-image: url("discos/cd/cdpajaros.jpg");
}

.album-btn.ruisenor {
  background-size: cover;  border: none;
  background-image: url("discos/ruisenor.jpg");
}
.album-btn.ruisenor:hover {
  background-size: cover;
  background-image: url("discos/cd/cdruisenor.jpg");
}

.album-btn {  border: none;
  width: 65px;
  height: 65px;
  padding: 0;
  margin: 12px;
  display: block;
  overflow: hidden;
}

.album-btn.tesoro,
.album-btn.porco,
.album-btn.perfume,
.album-btn.pajaros,
.album-btn.ruisenor {
  height: 100px;
}

.grid-albumes .album-btn:nth-last-child(1),
.grid-albumes .album-btn:nth-last-child(2)
 {
  margin-top: 47px;
}

.cover img {
 max-height: 100%;
  width: auto;
  display: block;
}
.lista-albumes {
  display: flex;
  flex-direction: column; /* uno debajo del otro */
  gap: 15px;
  padding: 10px 52px;
}

/* recuadro gris con borde */
.album-card {
    position: relative;
  box-shadow: 0 0 8px rgba(200,200,200,0.5);border: 1px solid rgba(255,255,255,0.45);
border-radius: 8px;
box-shadow:
  inset 0 0 0 1px rgba(255,255,255,0.15),
  0 2px 8px rgba(0,0,0,0.25);
  border-radius: 6px;
  background: rgba(0,0,0,0.35);
  padding: 10px; padding-bottom: 45px;
}

/* layout horizontal del contenido del álbum */
.album-inner {
  display: flex;            /* portada izquierda, info derecha */
  flex-direction: row;
  align-items: flex-start;
}

/* portada */
.album-inner .portada {
   height: 150px;       /* altura fija */
  width: auto;         /* ancho automático según proporción */
  object-fit: cover;   /* recorta si hace falta, opcional */
  margin-right: 15px;  
  flex-shrink: 0;      
  border-radius: 4px;
}

/* contenedor de título + descripción */
.album-inner .info {
  flex: 1;
}

/* título */
.album-inner .info h2 {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #fff;
}
.portada-box {
  width: 150px;
  height: 150px;
  overflow: hidden;   /* corta lo que sobresalga */
  flex-shrink: 0;     /* no se achica */
  margin-right: 15px;
  display: flex;
  align-items: center; /* centra verticalmente la imagen */
  justify-content: center; /* opcional, centra horizontal */
  
}
/* texto largo */
.album-inner .info p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #ccc;
}

.album-next {
  position: absolute;
  bottom: 10px;          /* separación desde el borde inferior */
  right: 10px;           /* separación desde el borde derecho */
  padding: 8px 12px;
  background-color: #555;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
.album-next:hover {
  background-color: #777;
}