/* Cabecera compacta: búsqueda y acciones en la misma barra. */
.topbar{height:72px;gap:16px;padding:0 3%}
.brand{flex:none;gap:10px;white-space:nowrap}
.brand-mark{width:38px;height:38px;border-radius:11px;font-size:24px}
.brand strong{font-size:21px}
.topbar .search-box{flex:1;width:auto;min-width:180px;max-width:620px;height:42px;margin:0;padding:0 14px;border-radius:11px;box-shadow:none}
.topbar .search-box svg{width:19px}
.topbar .search-box input{font-size:14px}
.top-actions{flex:none}

/* Carpetas discretas, con el resto en un desplegable. */
.folder-bar{max-width:1600px;margin:0 auto;padding:8px 3% 10px;display:flex;align-items:center;gap:6px}
.folder-buttons{display:flex;gap:5px}
.folder-button{height:30px;padding:0 10px;border:1px solid #344e6d;border-radius:7px;background:#10243b;color:#b9cae0;font-size:11px;font-weight:650;white-space:nowrap}
.folder-button:hover,.folder-button.active{border-color:#32ccf3;background:#163b58;color:#fff}
.folder-button.active{box-shadow:inset 0 -2px #32ccf3}
.folder-bar select{height:30px;max-width:170px;padding:0 8px;border:1px solid #344e6d;border-radius:7px;background:#10243b;color:#b9cae0;font-size:11px;cursor:pointer}
.folder-bar select:hover,.folder-bar select:focus-visible{border-color:#32ccf3}

@media(max-width:700px){
  .results-panel{display:none}
  .has-song-search .results-panel{display:block}
  .topbar{height:auto;min-height:99px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:38px 42px;gap:5px 8px;padding:6px 11px 8px}
  .brand{grid-column:1;grid-row:1;gap:7px}
  .brand-mark{width:33px;height:33px;font-size:21px}
  .brand strong{font-size:17px}
  .top-actions{grid-column:2;grid-row:1;justify-content:flex-end;gap:4px}
  .top-list{padding:7px 1px}
  .live-action{height:32px}
  .live-play,.live-stop{width:32px}
  .live-return{min-width:66px}
  .topbar .search-box{grid-column:1/-1;grid-row:2;width:100%;max-width:none;min-width:0;height:42px;padding:0 12px}
  .folder-bar{padding:7px 11px 8px;overflow-x:auto;scrollbar-width:thin}
  .folder-buttons{flex:none}
  .folder-button,.folder-bar select{height:29px}
  .folder-button{padding:0 8px}
  .folder-bar select{flex:none;max-width:125px}
  .results-panel{order:1}
  .playlist-panel{order:2}
  .preview-panel{order:3}
}
@media(max-width:350px){.brand strong{display:none}.folder-button{padding:0 6px}}