/*
============================================================
AUTOR:          Juan Leonardo Diaz
EMPRESA:        EXTASSIS NETwork
SITIO WEB:      https://extassisnetwork.com/
DESCRIPCIÓN:    e-Bar Player diseño
============================================================
*/

html, body{
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-layout="bar"]{
  overflow: hidden !important;
}


body[data-layout="bar"] .app{
  background: transparent !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  position: static !important;
}


body[data-layout="bar"] .bg{ display:none !important; }
body[data-layout="bar"] .app::before,
body[data-layout="bar"] .app::after,
body[data-layout="bar"] body::before,
body[data-layout="bar"] body::after{
  content:none !important;
  display:none !important;
}

/* Oculta lo que no quiero */
body[data-layout="bar"] .header,
body[data-layout="bar"] #mobile-menu,
body[data-layout="bar"] .mobile-menu,
body[data-layout="bar"] .footer,
body[data-layout="bar"] .footer-copyright,
body[data-layout="bar"] .player-social,
body[data-layout="bar"] .footer-app,
body[data-layout="bar"] .footer-tv,
body[data-layout="bar"] .offcanvas,
body[data-layout="bar"] .modal,
body[data-layout="bar"] .modal-overlay{
  display:none !important;
}

/* =========================
   e-PLAYER fijo al footer (NO fullscreen)
   ========================= */
body[data-layout="bar"] .player{
  position: fixed !important;
  inset: auto !important;                 /* mata inset:0 */
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;

  width: min(90vw, 1600px) !important;
  padding: 0 !important;                  /* mata padding grande */
  margin: 0 !important;

  height: auto !important;
  overflow: visible !important;
  z-index: 99999 !important;
}

/* =========================
   Variables del layout BAR
   ========================= */
body[data-layout="bar"] .player-wrapper{
  position: relative !important;

  --bar-h: 100px;        /* barra más baja */
  --radius: 26px;

  --art: 180px;         /* cover */
  --gap: 18px;

  width: 100% !important;
  height: var(--art) !important;          /* alto total (cover sobresale arriba) */
  overflow: visible !important;
  z-index: 99999 !important;
}

/* Cápsula (solo abajo) */
body[data-layout="bar"] .player-wrapper::before{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: 0;
  height: var(--bar-h);
  border-radius: var(--radius);
  background: rgba(255,255,255,.10);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}



/* =========================
   Visualizer SOLO dentro del player (fixed igual que el fondo)
   ========================= */
body[data-layout="bar"] .visualizer-filter{
  display:block !important;
  position:absolute !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

body[data-layout="bar"] .visualizer{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: var(--bar-h) !important;

  clip-path: inset(0 round var(--radius)) !important;
  z-index: 4 !important;                   /* delante del fondo y glass */
}

/* Canvas max 85% */
body[data-layout="bar"] #visualizerCanvas{
  width: 100% !important;
  height: 90% !important;
  position: absolute !important;
  left:0; right:0;
  bottom: 0 !important;
}

/* =========================
   CONTENIDO dentro de la cápsula
   (anulamos flex/column del HTML base)
   ========================= */
body[data-layout="bar"] .player-cover{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  height: var(--bar-h) !important;

  display: block !important;              /* no flex column */
  padding: 0 !important;
  margin: 0 !important;

  z-index: 99995 !important;
}

/*  Cover a la izquierda, bottom alineado con player, sobresale hacia arriba */
body[data-layout="bar"] .player-artwork{
  position: absolute !important;
  left: var(--gap) !important;
  bottom: 0 !important;

  width: var(--art) !important;
  height: var(--art) !important;

  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-xl) !important;
  background: rgba(255,255,255,.10) !important;

  z-index: 99996 !important;
}

/* Programa al lado del cover */
body[data-layout="bar"] .player-program{
  position: absolute !important;
  left: calc(var(--gap) + var(--art) + 10px) !important;
  top: 10px !important;                   /* dentro de la cápsula */
  z-index: 99997 !important;

  background: none !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Títulos al lado del cover (uno debajo del otro) */
body[data-layout="bar"] .player-cover-title{
  position: absolute !important;
  left: calc(var(--gap) + var(--art) + 18px) !important;
  top: 20px !important;                   /* debajo del program */
  z-index: 99997 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  text-align: left !important;
  max-width: 60% !important;
}

body[data-layout="bar"] .song-artist,
body[data-layout="bar"] .song-name{
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.55) !important;
}
body[data-layout="bar"] .song-artist{ font-size: clamp(12px, 1.1vw, 15px) !important; }
body[data-layout="bar"] .song-name{ font-size: clamp(14px, 1.6vw, 24px) !important; }

/* CONTROLES */
body[data-layout="bar"] .player-controller{
  position: absolute !important;
  right: 20px !important;        /* ? a 20px del borde */
  top: 40% !important;           /* ? centrado vertical real */
  transform: translateY(-50%) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;

  z-index: 99998 !important;
}

/* Dropdown volumen visible */
body[data-layout="bar"] .player-button-volume{ position: relative !important; }
body[data-layout="bar"] #player-volume{
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
}

/* Logo */
body[data-layout="bar"] .bar-logo{
  height: 40px !important;
  width: auto !important;
  filter: drop-shadow(0 2px 100px rgba(0,0,0,.35)) !important;
}

/* ===== Mobile: ocultar logo + play al final ===== */
@media (max-width: 768px){

  /* Oculta logo en móvil */
  body[data-layout="bar"] .bar-logo{
    display: none !important;
  }

  /* Play al final (derecha) */
  body[data-layout="bar"] .player-controller{
    justify-content: flex-end !important;
    gap: 14px !important; /* un poco menos para móvil */
  }

  /* Asegura que el botón play quede de último aunque el HTML cambie */
  body[data-layout="bar"] .player-button-play{
    order: 99 !important;
  }

  /* Volumen primero */
  body[data-layout="bar"] .player-button-volume{
    order: 1 !important;
  }
}
@media (max-width: 768px){
  body[data-layout="bar"] .bar-credit{
    display: none !important;
  }
}

/* Apaga imagen */
body[data-layout="bar"] .player-cover-image{
  display:none !important;
}

/* Fondo PLANO */
body[data-layout="bar"] .player-wrapper::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height: var(--bar-h);
  border-radius: var(--radius);
  z-index: 2;
  pointer-events:none;

  /* Plano (sin degradado) */
  background: color-mix(in srgb, var(--accent, #5ad) 75%, transparent) !important;

  opacity: 1 !important;
}

html, body{
  background: transparent !important;
}

body[data-layout="bar"] .app{
  background: transparent !important;
}
body[data-layout="bar"] .app::before,
body[data-layout="bar"] .app::after{
  content: none !important;
  display: none !important;
}

body[data-layout="bar"] .bar-credit{
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.1;
  text-transform: none; 
  opacity: .95;
  max-width: 100%;
}

body[data-layout="bar"] .bar-credit a{
  color: color-mix(in srgb, var(--accent, #5ad) 80%, white) !important;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

body[data-layout="bar"] .bar-credit a:hover{
  text-decoration: underline;
}