*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:'Segoe UI','Ubuntu',Arial,sans-serif;background:linear-gradient(135deg,#0f1b2d,#1b2b45);color:#fff}.page{display:grid;grid-template-columns:minmax(260px,37%) 1fr;height:calc(100 * min(var(--vh,1vh),1vh));gap:14px;padding:14px;max-width:1600px;max-height:720px;margin:0 auto}.card{background:rgba(255,255,255,0.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.12);border-radius:18px}.left-col{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}.logo-box{flex:1;min-height:120px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer}.logo-box img{width:100%;height:100%;object-fit:contain;padding:14px}.logo-placeholder{text-align:center;opacity:0.35;font-size:1.3rem;letter-spacing:3px;font-weight:600}.cover-url-form{display:none;position:absolute;bottom:46px;left:12px;right:12px;gap:6px;z-index:5}.cover-url-form.open{display:flex}.cover-url-form input[type=text]{flex:1;background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.25);border-radius:8px;padding:6px 8px;color:#fff;font-size:0.75rem;outline:none}.cover-url-form button{background:#7c5cff;border:none;color:#fff;border-radius:8px;padding:0 10px;font-size:0.75rem;cursor:pointer}.btn{background:rgba(255,255,255,0.15);border:none;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s,transform 0.1s}.btn:hover{background:rgba(255,255,255,0.28)}.btn:active{transform:scale(0.94)}.btn-play{width:46px;height:46px;font-size:18px;background:linear-gradient(135deg,#7c5cff,#5aa3ff)}.btn-small{width:34px;height:34px;font-size:13px}input[type=range]{-webkit-appearance:none;flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,0.2);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#7c5cff;cursor:pointer}.btn-add-small{width:42px;height:42px;font-size:16px;background:rgba(124,92,255,0.3)}.btn-add-small:hover{background:rgba(124,92,255,0.5)}.add-station-form{display:none;flex-direction:column;gap:6px;padding:10px}.add-station-form.open{display:flex}.add-station-form input[type=text]{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:8px;padding:6px 8px;color:#fff;font-size:0.75rem;outline:none}.add-station-form input[type=text]::placeholder{color:rgba(255,255,255,0.4)}.form-btn-row{display:flex;gap:6px}.form-btn-row button{flex:1;border:none;color:#fff;padding:7px;border-radius:8px;cursor:pointer;font-size:0.7rem}#btnAddStation{background:#7c5cff}#btnAddStation:hover{background:#6a4ce0}#btnRemoveStation{background:rgba(255,92,138,0.18);color:#ff5c8a}#btnRemoveStation:hover{background:rgba(255,92,138,0.3)}.icon-action-btn{display:flex!important;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff;border-radius:10px;width:46px;padding:8px 0;height:44px;font-size:1.1rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 0.2s;flex:0 0 auto}.icon-action-btn:hover{background:rgba(255,255,255,0.16)}.icon-action-btn:active{transform:scale(0.98)}.playlist-io-row{display:flex;align-items:center;gap:8px;flex:0 0 auto}.playlist-io-row button{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:#fff;padding:8px 4px;border-radius:10px;cursor:pointer;font-size:0.68rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 0.2s}.playlist-io-row button:hover{background:rgba(255,255,255,0.16)}.playlist-io-row .io-row-playback-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}.station-select-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:12px;padding:12px 14px;color:#fff;font-size:0.95rem;font-weight:600;outline:none;cursor:pointer;transition:background 0.2s}.station-select-btn:hover{background:rgba(255,255,255,0.14)}.station-select-icon{font-size:1.1rem}.station-picker-search-row{margin-bottom:16px}.station-picker-size-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:0.82rem;opacity:0.85}.station-picker-size-row label{flex-shrink:0;white-space:nowrap}.station-picker-size-row input[type=range]{flex:1}.station-picker-size-row span{flex-shrink:0;width:44px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.station-picker-search-row input[type=text]{width:100%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:10px 12px;color:#fff;font-size:0.9rem;outline:none}.station-picker-search-row input[type=text]::placeholder{color:rgba(255,255,255,0.4)}.station-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min-width,150px),1fr));gap:16px;max-height:calc(86vh - 170px);overflow-y:auto;padding:4px}.station-tile{position:relative;background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.12);border-radius:14px;cursor:pointer;overflow:hidden;transition:transform 0.15s,border-color 0.15s,background 0.15s;display:flex;flex-direction:column}.station-tile:hover{background:rgba(255,255,255,0.12);transform:translateY(-2px)}.station-tile.active{border-color:#7c5cff;background:rgba(124,92,255,0.18)}.station-tile-logo{width:100%;aspect-ratio:1/1;background:rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;overflow:hidden}.station-tile-logo img{width:100%;height:100%;object-fit:contain;padding:10px}.station-tile-logo .station-tile-placeholder{font-size:0.85rem;font-weight:700;text-align:center;padding:10px;opacity:0.6;letter-spacing:1px}.station-tile-name{text-align:center;font-size:0.82rem;font-weight:600;padding:8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.station-tile-actions{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity 0.15s}.station-tile:hover .station-tile-actions{opacity:1}.station-tile-actions button{background:rgba(0,0,0,0.55);border:none;color:#fff;border-radius:6px;width:26px;height:26px;font-size:0.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.station-tile-actions button:hover{background:rgba(0,0,0,0.8)}.station-tile-actions .btn-delete-tile:hover{background:rgba(255,92,138,0.7)}.vu-meter-box{width:100%;height:56px;padding:8px;display:flex;flex-direction:row;gap:8px;align-items:center;flex:0 0 auto}.vu-meter-label{display:none}.vu-channels{flex:1;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:stretch;min-width:0;min-height:32px;overflow:visible}.vu-channel{display:flex;flex-direction:row;gap:3px;align-items:stretch;flex:1 1 14px;min-width:0;min-height:14px;overflow:visible}.vu-bars{display:flex;flex-direction:row;gap:2px;flex:1 1 auto;min-width:0;min-height:12px;height:14px;max-height:none;align-items:stretch;overflow:visible}.vu-bar{flex:1;min-width:0;background:#91ff00;border-radius:1px;transition:background-color 0.05s}.vu-bar.mid{background:#f1c40f}.vu-bar.high{background:#ff0000}.vu-scale{font-size:0.52rem;opacity:0.6;text-align:center;margin-left:4px;font-weight:600;width:20px;min-width:20px}.vu-db-scale{display:flex;flex-direction:row;align-items:center;height:10px;flex:0 0 10px;min-width:0;position:relative;margin:0}.vu-db-scale-inner{position:relative;flex:1;height:100%;min-width:0}.vu-db-tick{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:0;transform:translateX(-50%)}.vu-db-tick-line{display:none}.vu-db-tick-label{font-size:0.58rem;opacity:1;white-space:nowrap;font-weight:700;font-family:'Segoe UI','Ubuntu',Arial,sans-serif;letter-spacing:0px;margin-top:0;color:#ffffff;text-shadow:0 0 4px rgba(0,0,0,0.9),0 1px 2px rgba(0,0,0,1)}.vu-scale-placeholder{width:20px;min-width:20px}.right-col{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}.station-name-box{padding:6px 16px;text-align:center;font-size:clamp(0.95rem,2.5vw,2.2rem);font-weight:700;letter-spacing:0.5px;flex:0 0 auto;height:auto;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;line-height:1.3}.id3-info-box{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px 20px;gap:4px;min-height:0;overflow:visible}.id3-title{font-size:clamp(0.9rem,1.8vw,1.3rem);font-weight:700;line-height:1.2}.id3-artist{font-size:clamp(0.85rem,1.6vw,1.15rem);opacity:0.75}.id3-marquee-box{overflow:hidden;width:100%;position:relative}.id3-marquee-track{display:block;text-align:center}.id3-marquee-seg{white-space:nowrap}.status-msg{font-size:0.65rem;opacity:0.55;min-height:12px}.visualizer-container{display:flex;gap:8px;flex:1 1 0;min-height:0}.visualizer-box{flex:1;min-height:0;padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}#visualizerCanvas{flex:1;width:100%;min-height:0;border-radius:12px;display:block;background:#000}.visualizer-status{font-size:0.72rem;opacity:0.5;text-align:center;min-height:14px;flex:0 0 auto}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);z-index:1000;align-items:center;justify-content:center}.modal-overlay.open{display:flex}.modal-content{background:rgba(15,27,45,0.95);border:1px solid rgba(255,255,255,0.15);border-radius:16px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}.settings-modal-content{max-width:900px;width:94%}.station-picker-content{max-width:900px;width:94%;max-height:86vh}.modal-title{font-size:1.4rem;font-weight:700;margin-bottom:20px;color:#fff}.settings-group{margin-bottom:20px}.settings-group label{display:block;font-size:0.9rem;margin-bottom:8px;opacity:0.9}.settings-group input[type=color],.settings-group input[type=text],.settings-group select{width:100%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:10px;color:#fff;font-size:0.9rem}.settings-group select{cursor:pointer}.settings-group input[type=range]{width:100%}.settings-group input[type=color]{height:40px;cursor:pointer}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-row .settings-group{margin-bottom:0}.modal-buttons{display:flex;gap:12px;margin-top:24px}.modal-buttons button{flex:1;padding:12px;border:none;border-radius:8px;cursor:pointer;font-size:0.9rem;font-weight:600}#btnApplySettings{background:#7c5cff;color:#fff}#btnApplySettings:hover{background:#6a4ce0}#btnCloseSettings{background:rgba(255,255,255,0.1);color:#fff}#btnCloseSettings:hover{background:rgba(255,255,255,0.2)}#btnResetSettings{background:rgba(255,92,138,0.2);color:#ff5c8a}#btnResetSettings:hover{background:rgba(255,92,138,0.3)}.radio-search-bar{display:flex;gap:8px;margin-bottom:16px}.radio-search-bar input[type=text]{flex:1;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:10px 12px;color:#fff;font-size:0.9rem;outline:none}.radio-search-bar input[type=text]::placeholder{color:rgba(255,255,255,0.4)}.radio-search-bar button{background:#7c5cff;border:none;color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:0.85rem;font-weight:600;white-space:nowrap}.radio-search-bar button:hover{background:#6a4ce0}.radio-search-status{font-size:0.8rem;opacity:0.6;text-align:center;margin-bottom:10px;min-height:16px}.radio-search-results{display:flex;flex-direction:column;gap:8px}.radio-result-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 12px}.radio-result-info{min-width:0;flex:1}.radio-result-name{font-size:0.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.radio-result-meta{font-size:0.75rem;opacity:0.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.radio-result-add{flex-shrink:0;background:#2ecc71;border:none;color:#06210f;padding:8px 14px;border-radius:8px;cursor:pointer;font-size:0.8rem;font-weight:700}.radio-result-add:hover{background:#27ae60}.radio-result-add:disabled{background:rgba(255,255,255,0.15);color:rgba(255,255,255,0.5);cursor:default}.settings-section-title{font-size:1rem;font-weight:700;margin:24px 0 12px 0;padding-top:16px;border-top:1px solid rgba(255,255,255,0.15);opacity:0.9}.settings-section-title:first-of-type{margin-top:0;padding-top:0;border-top:none}.settings-hint{font-size:0.75rem;opacity:0.55;margin-top:-4px;margin-bottom:10px}.settings-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.settings-row-3 .settings-group{margin-bottom:0}.color-with-hex{display:flex;align-items:center;gap:6px}.hex-input{width:78px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.2);border-radius:6px;padding:4px 6px;color:#fff;font-size:0.72rem;font-family:'Roboto Mono','Consolas',monospace;text-transform:lowercase;outline:none}.hex-input:focus{border-color:rgba(255,255,255,0.5)}.slider-lock-wrap{display:flex;align-items:center;gap:10px}.slider-lock-wrap input[type=range]{flex:1;min-width:0}.slider-lock-wrap input[type=range]:disabled{opacity:0.4;cursor:not-allowed}.slider-lock-label{display:flex;align-items:center;gap:4px;flex-shrink:0;font-size:0.85rem;cursor:pointer;user-select:none;opacity:0.85;white-space:nowrap}.slider-lock-label input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:#7c5cff}.settings-inline{display:flex;gap:8px}.settings-inline input[type=text]{flex:1}.settings-inline input[type=number]{width:70px;flex:none;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:10px 8px;color:#fff;font-size:0.85rem;outline:none;text-align:center}.settings-inline button{flex-shrink:0;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:8px;padding:0 12px;font-size:0.8rem;cursor:pointer;white-space:nowrap}.settings-inline button:hover{background:rgba(255,255,255,0.2)}.profile-row{display:flex;gap:8px;align-items:center}.profile-row select{flex:1.3}.profile-row input[type=text]{flex:1}.profile-row button{flex-shrink:0;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:8px;padding:10px 12px;font-size:0.78rem;cursor:pointer;white-space:nowrap}.profile-row button:hover{background:rgba(255,255,255,0.2)}#btnDeleteVisProfile{background:rgba(255,92,138,0.18);color:#ff5c8a;border-color:rgba(255,92,138,0.4)}#btnDeleteVisProfile:hover{background:rgba(255,92,138,0.3)}@media (max-width:480px){.page{padding:12px;gap:12px}.playlist-io-row{flex-wrap:wrap;row-gap:8px}.playlist-io-row .io-row-playback-controls{margin-left:auto}.settings-row,.settings-row-3{grid-template-columns:1fr}.profile-row{flex-wrap:wrap}.profile-row select,.profile-row input[type=text]{flex:1 1 100%}.modal-content{padding:18px;width:94%;max-height:85vh}.settings-inline input[type=number]{width:60px}input[type=range]{height:8px}input[type=range]::-webkit-slider-thumb{width:20px;height:20px}}#logoFile,#playlistFileInput,#profileFileInput{display:none}.volume-control{display:none!important;align-items:center;gap:8px;flex:1;min-width:0}.volume-icon{font-size:1rem;flex-shrink:0;opacity:0.8;cursor:pointer;user-select:none;transition:opacity 0.2s}.volume-icon:hover{opacity:1}#volumeSlider{flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,0.2);outline:none;-webkit-appearance:none;cursor:pointer}#volumeSlider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#7c5cff;cursor:pointer;transition:transform 0.1s}#volumeSlider::-webkit-slider-thumb:hover{transform:scale(1.2)}#volumeVal{font-size:0.68rem;opacity:0.65;min-width:28px;text-align:right;flex-shrink:0}

/* ══ DESKTOP ══ */
html.device-desktop body{height:100vh;overflow:hidden}
html.device-desktop .page{grid-template-columns:minmax(300px,36%) 1fr;width:100%!important;height:100vh!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:18px;gap:18px}
html.device-desktop .left-col{min-height:0}
html.device-desktop .logo-box{flex:1;min-height:0}
html.device-desktop .id3-info-box{flex:0 0 clamp(160px,22vh,220px);overflow:hidden}
html.device-desktop .visualizer-container{flex:1 1 0;min-height:80px}
html.device-desktop .vu-meter-box{height:clamp(52px,7vh,72px)}
html.device-desktop .station-name-box{font-size:clamp(1.1rem,2.5vw,2.2rem)}
html.device-desktop .right-col{min-height:0}
html.device-desktop .volume-control{display:flex!important}

/* ══ MÓVIL PORTRAIT ══
   Arquitectura: página con scroll vertical libre.
   - left-col y right-col tienen altura definida por su contenido.
   - id3-info-box crece con el texto (flex:0 0 auto, overflow:visible).
   - visualizer-container tiene altura fija; no hay competencia flex.
   - El texto de metadatos usa white-space:normal para fluir en varias líneas.
*/
html.device-mobile body{
  height:auto;
  min-height:100dvh;
  overflow-y:auto;
}
html.device-mobile .page{
  display:flex;
  flex-direction:column;
  width:100%;
  height:auto;
  min-height:100dvh;
  max-height:none;
  max-width:none;
  margin:0;
  padding:10px;
  gap:10px;
}
html.device-mobile .left-col{
  flex:0 0 auto;
  gap:8px;
}
html.device-mobile .logo-box{
  flex:0 0 clamp(140px,38vw,220px);
  min-height:0;
}
html.device-mobile .right-col{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}
html.device-mobile .station-name-box{
  flex:0 0 auto;
  font-size:clamp(1rem,5vw,2rem);
  white-space:nowrap;
  overflow:hidden;
}
/* id3: tamaño natural, nunca recortado.
   overflow:visible en el box, white-space:normal en el texto → el box
   crece con el contenido y el visualizador queda DEBAJO sin competir. */
html.device-mobile .id3-info-box{
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:10px 16px;
  overflow:visible !important;
}
/* Forzar que los spans generados por setupId3Marquee permitan wrap */
html.device-mobile .id3-info-box .id3-marquee-seg,
html.device-mobile .id3-info-box .id3-marquee-track{
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:break-word !important;
  display:block !important;
  width:100% !important;
}
html.device-mobile .id3-title{
  font-size:clamp(1rem,5vw,1.6rem);
  white-space:normal;
  word-break:break-word;
  overflow:visible;
}
html.device-mobile .id3-artist{
  font-size:clamp(0.85rem,4vw,1.2rem);
  white-space:normal;
  word-break:break-word;
  overflow:visible;
}
/* visualizador: altura fija. La página hace scroll si hace falta. */
html.device-mobile .visualizer-container{
  flex:0 0 auto !important;
  height:clamp(160px,35vw,260px) !important;
  min-height:0;
  overflow:hidden;
}
html.device-mobile .visualizer-box{
  flex:1;
  min-height:0;
  overflow:hidden;
}
html.device-mobile #visualizerCanvas{
  width:100%;
  height:100%;
}
html.device-mobile .vu-meter-box{height:52px;flex:0 0 52px}
html.device-mobile .btn-play{width:52px;height:52px;font-size:20px}
html.device-mobile .btn-small{width:40px;height:40px;font-size:15px}
html.device-mobile .icon-action-btn{width:52px}
html.device-mobile .playlist-io-row{flex-wrap:wrap;row-gap:8px}

/* ══ MÓVIL LANDSCAPE altura media (521–800px) ══ */
@media (orientation:landscape) and (min-height:521px) and (max-height:800px){
  html.device-mobile body{height:100svh;overflow:hidden}
  html.device-mobile .page{display:grid;grid-template-columns:minmax(220px,35%) 1fr;height:100svh;max-height:none;padding:8px;gap:8px;overflow:hidden;flex-direction:unset;min-height:unset}
  html.device-mobile .left-col{min-height:0;gap:6px;flex:unset}
  html.device-mobile .logo-box{flex:1;min-height:0;min-width:0}
  html.device-mobile .logo-box img{padding:8px}
  html.device-mobile .add-station-form{display:none!important}
  html.device-mobile .card.vu-meter-box{height:44px;padding:4px 8px}
  html.device-mobile .right-col{flex:unset;min-height:0;gap:6px;display:flex;flex-direction:column;overflow:hidden}
  html.device-mobile .station-name-box{padding:4px 10px;font-size:clamp(0.9rem,2.5vw,1.5rem)}
  html.device-mobile .id3-info-box{flex:0 0 auto!important;height:auto!important;min-height:0!important;padding:6px 10px;gap:3px;overflow:visible!important}
  html.device-mobile .id3-title{font-size:clamp(0.85rem,2vw,1.1rem);white-space:nowrap;word-break:normal}
  html.device-mobile .id3-artist{font-size:clamp(0.75rem,1.7vw,0.95rem);white-space:nowrap;word-break:normal}
  html.device-mobile .visualizer-container{flex:1 1 0!important;height:auto!important;min-height:50px;gap:6px;overflow:hidden}
  html.device-mobile .visualizer-box{padding:6px;overflow:hidden}
  html.device-mobile .playlist-io-row{gap:6px}
  html.device-mobile #btnOpenPlaylistQuick,html.device-mobile #btnAjustes{width:42px;height:42px}
  html.device-mobile .btn-play{width:44px;height:44px}
  html.device-mobile .btn-small{width:34px;height:34px}
}

/* ══ MÓVIL LANDSCAPE altura pequeña (≤520px) ══ */
@media (orientation:landscape) and (max-height:520px){
  html.device-mobile body{height:100svh;overflow:hidden}
  html.device-mobile .page{display:grid;grid-template-columns:minmax(200px,34%) 1fr;height:100svh;max-height:none;padding:6px;gap:6px;overflow:hidden;flex-direction:unset;min-height:unset}
  html.device-mobile .left-col{min-height:0;gap:5px;flex:unset}
  html.device-mobile .logo-box{flex:1;min-height:0;min-width:0}
  html.device-mobile .logo-box img{padding:6px}
  html.device-mobile .add-station-form{display:none!important}
  html.device-mobile .card.vu-meter-box{height:36px;padding:4px 8px}
  html.device-mobile .right-col{flex:unset;min-height:0;gap:5px;display:flex;flex-direction:column;overflow:hidden}
  html.device-mobile .station-name-box{padding:3px 10px;font-size:clamp(0.85rem,2.5vw,1.3rem)}
  html.device-mobile .id3-info-box{flex:0 0 auto!important;height:auto!important;min-height:0!important;padding:4px 10px;gap:2px;overflow:visible!important}
  html.device-mobile .id3-title{font-size:clamp(0.8rem,2vw,1rem);white-space:nowrap;word-break:normal}
  html.device-mobile .id3-artist{font-size:clamp(0.7rem,1.6vw,0.85rem);white-space:nowrap;word-break:normal}
  html.device-mobile .status-msg{display:none}
  html.device-mobile .visualizer-container{flex:1 1 0!important;height:auto!important;min-height:40px;gap:5px;overflow:hidden}
  html.device-mobile .visualizer-box{padding:5px;overflow:hidden}
  html.device-mobile .right-col{gap:5px}
  html.device-mobile .playlist-io-row{gap:5px}
  html.device-mobile #btnOpenPlaylistQuick,html.device-mobile #btnAjustes{width:38px;height:38px}
  html.device-mobile .btn-play{width:42px;height:42px}
  html.device-mobile .btn-small{width:32px;height:32px}
}

#btnOpenPlaylistQuick,#btnAjustes{background:linear-gradient(135deg,#7c5cff,#5aa3ff);border:none;border-radius:50%;width:46px;height:46px;padding:0;display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;transition:transform 0.1s}
#btnOpenPlaylistQuick:active,#btnAjustes:active{transform:scale(0.94)}
html.device-mobile #btnOpenPlaylistQuick,html.device-mobile #btnAjustes{width:52px;height:52px}

/* ══ TABLET ══ */
html.device-tablet body{height:100dvh;overflow:hidden}
html.device-tablet .page{display:grid;grid-template-columns:minmax(300px,34%) 1fr;width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:clamp(10px,1.2vh,18px);gap:clamp(10px,1.2vh,18px);overflow:hidden}
html.device-tablet .left-col{display:flex;flex-direction:column;gap:clamp(6px,0.9vh,12px);min-height:0;overflow:hidden}
html.device-tablet .logo-box{flex:1;min-height:0;overflow:hidden}
html.device-tablet .logo-box img{padding:clamp(8px,1.2vh,16px)}
html.device-tablet .add-station-form{display:none!important}
html.device-tablet .vu-meter-box{height:clamp(44px,6dvh,72px);flex:0 0 auto}
html.device-tablet .playlist-io-row{gap:8px}
html.device-tablet #btnOpenPlaylistQuick,html.device-tablet #btnAjustes{width:clamp(44px,5.5dvh,56px);height:clamp(44px,5.5dvh,56px)}
html.device-tablet .btn-play{width:clamp(46px,5.8dvh,58px);height:clamp(46px,5.8dvh,58px);font-size:clamp(17px,2.2dvh,22px)}
html.device-tablet .btn-small{width:clamp(34px,4.2dvh,44px);height:clamp(34px,4.2dvh,44px);font-size:clamp(13px,1.8dvh,17px)}
html.device-tablet .right-col{display:flex;flex-direction:column;gap:clamp(6px,0.9vh,12px);min-height:0;overflow:hidden}
html.device-tablet .station-name-box{font-size:clamp(1.1rem,3.2dvh,3rem);padding:clamp(4px,0.8dvh,12px) 16px;flex:0 0 auto}
html.device-tablet .id3-info-box{flex:0 0 clamp(120px,16dvh,200px);padding:clamp(6px,1dvh,14px) 16px;overflow:hidden}
html.device-tablet .id3-title{font-size:clamp(1rem,2.4dvh,1.7rem)}
html.device-tablet .id3-artist{font-size:clamp(0.85rem,2dvh,1.35rem)}
html.device-tablet .visualizer-container{flex:1;min-height:80px;gap:8px;overflow:hidden}
html.device-tablet .visualizer-box{padding:clamp(6px,1dvh,12px);overflow:hidden}
@media (orientation:portrait){
  html.device-tablet body{height:auto;overflow:auto}
  html.device-tablet .page{grid-template-columns:1fr;height:auto!important;min-height:100dvh;overflow:visible}
  html.device-tablet .logo-box{flex:0 0 clamp(200px,42vw,400px)}
  html.device-tablet .add-station-form{display:flex!important}
  html.device-tablet .id3-info-box{flex:0 0 clamp(130px,18vw,170px)}
  html.device-tablet .visualizer-container{flex:0 0 clamp(200px,28vw,280px)}
  html.device-tablet .station-name-box{font-size:clamp(1.2rem,3.5vw,2.8rem)}
  html.device-tablet .id3-title{font-size:clamp(1rem,2.8vw,1.6rem)}
  html.device-tablet .id3-artist{font-size:clamp(0.85rem,2.2vw,1.3rem)}
  html.device-tablet .vu-meter-box{height:clamp(48px,7vw,68px)}
  html.device-tablet #btnOpenPlaylistQuick,html.device-tablet #btnAjustes{width:52px;height:52px}
  html.device-tablet .btn-play{width:52px;height:52px;font-size:20px}
  html.device-tablet .btn-small{width:40px;height:40px;font-size:15px}
}

/* --- URL de respaldo (fallback) en formulario de emisora --- */
.url-with-fallback-row{display:flex;gap:6px;align-items:center;}
.url-with-fallback-row input{flex:1;}
#btnToggleUrl2{flex:0 0 auto;width:34px;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,0.25);background:rgba(124,92,255,0.25);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;line-height:1;}
#btnToggleUrl2.active{background:rgba(124,92,255,0.6);}
#newStationUrl2{margin-top:6px;}