/* Canal FM 0.12.8 — aplicativo instalável, Modo Carro e tela cheia */

.cfm-spectrum-canvas{cursor:pointer}
.cfm-mode-tools{position:absolute;z-index:16;top:6px;right:max(8px,calc((100vw - 1380px)/2));width:auto!important}
.cfm-mode-menu-toggle{
display:flex!important;align-items:center;justify-content:center;gap:7px;
width:auto!important;min-width:92px!important;max-width:none!important;
height:36px!important;min-height:36px!important;max-height:36px!important;
padding:0 12px!important;
border:1px solid rgba(99,237,240,.72)!important;border-radius:10px!important;
background:#12354d!important;color:#8ff7f4!important;
font-size:0!important;letter-spacing:1px;
box-shadow:0 0 0 1px rgba(24,210,216,.08),0 4px 14px rgba(0,0,0,.22)!important;
transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease!important
}
.cfm-mode-menu-toggle::before{content:"•••";font-size:14px!important;font-weight:900;line-height:1;letter-spacing:2px;color:#63edf0}
.cfm-mode-menu-toggle::after{content:"Opções";font-size:12px!important;font-weight:800;line-height:1;color:#fff;letter-spacing:0}
.cfm-mode-menu-toggle:hover,.cfm-mode-menu-toggle:focus-visible{
border-color:#63edf0!important;background:#17445e!important;
box-shadow:0 0 0 2px rgba(24,210,216,.12),0 6px 18px rgba(0,0,0,.28)!important
}
.cfm-mode-menu-open .cfm-mode-menu-toggle{border-color:#63edf0!important;background:#17445e!important}
@media(max-width:700px){
.cfm-mode-tools{top:8px;right:10px}
.cfm-mode-menu-toggle{
width:44px!important;min-width:44px!important;max-width:44px!important;
height:44px!important;min-height:44px!important;max-height:44px!important;
padding:0!important;border-radius:12px!important
}
.cfm-mode-menu-toggle::before{font-size:16px!important}
.cfm-mode-menu-toggle::after{display:none!important}
}
.cfm-player-modes{position:absolute;top:31px;right:0;display:none;min-width:190px;padding:8px;border:1px solid #285268;border-radius:14px;background:#071a2c;box-shadow:0 18px 46px rgba(0,0,0,.38)}
.cfm-mode-menu-open .cfm-player-modes{display:grid;gap:6px}
.cfm-player-modes button,.cfm-app-actions button{width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:42px!important;max-height:none!important;padding:10px 14px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:10px!important;background:#102d43!important;color:#fff!important;font:800 12px/1.2 inherit!important;text-align:left;white-space:nowrap}
.cfm-player-modes button:hover,.cfm-app-actions button:hover{border-color:#18d2d8!important;background:#15405a!important}
.cfm-player-modes .cfm-install-app,.cfm-app-actions .cfm-install-app{background:#b8f328!important;color:#061526!important}
.cfm-drive-note{display:none;margin:0;color:#aec0ca;font-size:11px}

.cfm-app-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:34px;margin-top:22px;padding:25px 28px;border:1px solid #1d475e;border-radius:20px;background:radial-gradient(circle at 85% 25%,rgba(20,215,220,.16),transparent 32%),linear-gradient(115deg,#06182b,#0a2b42);color:#fff;scroll-margin-top:230px}
.cfm-app-banner h3{margin:4px 0 5px;color:#fff;font-size:clamp(24px,3vw,38px)}
.cfm-app-banner p{max-width:760px;margin:0;color:#b7c8d1}
.cfm-app-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

.cfm-install-help{position:fixed;z-index:100002;left:50%;top:50%;width:min(520px,calc(100vw - 34px));padding:30px;transform:translate(-50%,-50%);border:1px solid #2c5367;border-radius:22px;background:#071a2d;color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.cfm-install-help>span{color:#21d5dc;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.cfm-install-help h2{margin:8px 0;font-size:30px;color:#fff}.cfm-install-help p{color:#bfd0d8;line-height:1.6}.cfm-install-help b{color:#b8f328}.cfm-install-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#fff;font-size:30px}.cfm-install-ok{border:0;border-radius:12px;background:#b8f328;color:#061526;padding:12px 22px;font-weight:900}.cfm-install-backdrop{position:fixed;z-index:100001;inset:0;background:rgba(1,8,15,.72);backdrop-filter:blur(4px)}
.cfm-install-open{overflow:hidden}

body.cfm-car-mode-active,body.cfm-fullscreen-active{overflow:hidden!important;background:#020a13!important}
body.cfm-car-mode-active #cfm-player,body.cfm-fullscreen-active #cfm-player,#cfm-player:fullscreen{position:fixed!important;z-index:100000!important;inset:0!important;top:0!important;right:0!important;bottom:0!important;left:0!important;transform:none!important;box-sizing:border-box!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;min-height:100vh!important;max-height:none!important;grid-template-columns:minmax(260px,.8fr) minmax(520px,1.7fr)!important;grid-template-rows:minmax(0,1fr) auto!important;gap:32px!important;padding:clamp(28px,4vw,68px)!important;border:0!important;background:radial-gradient(circle at 50% 25%,rgba(15,89,111,.35),transparent 42%),linear-gradient(145deg,#06182b,#020810 72%)!important}
body.cfm-car-mode-active #cfm-player .cfm-player-station,body.cfm-fullscreen-active #cfm-player .cfm-player-station,#cfm-player:fullscreen .cfm-player-station{align-self:center;display:grid!important;justify-items:start;gap:20px;min-width:0;width:100%}
body.cfm-car-mode-active #cfm-player .cfm-player-station>img,body.cfm-fullscreen-active #cfm-player .cfm-player-station>img,#cfm-player:fullscreen .cfm-player-station>img{width:clamp(120px,15vw,230px)!important;height:clamp(120px,15vw,230px)!important;border-radius:28px!important;box-shadow:0 18px 55px rgba(0,0,0,.4)}
body.cfm-car-mode-active #cfm-player .cfm-player-copy,body.cfm-fullscreen-active #cfm-player .cfm-player-copy,#cfm-player:fullscreen .cfm-player-copy{width:100%;min-width:0;max-width:100%!important}
body.cfm-car-mode-active #cfm-player .cfm-player-copy small,body.cfm-fullscreen-active #cfm-player .cfm-player-copy small,#cfm-player:fullscreen .cfm-player-copy small{color:#20d8df;font-size:13px!important}
body.cfm-car-mode-active #cfm-player .cfm-player-copy strong,body.cfm-fullscreen-active #cfm-player .cfm-player-copy strong,#cfm-player:fullscreen .cfm-player-copy strong{display:block;max-width:100%;font-size:clamp(28px,3.35vw,52px)!important;line-height:1.06;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
body.cfm-car-mode-active #cfm-player .cfm-player-location,body.cfm-fullscreen-active #cfm-player .cfm-player-location,#cfm-player:fullscreen .cfm-player-location{display:block!important;margin-top:10px;font-size:clamp(15px,1.7vw,23px)!important;color:#c8d5dc}
body.cfm-car-mode-active #cfm-player .cfm-player-status,body.cfm-fullscreen-active #cfm-player .cfm-player-status,#cfm-player:fullscreen .cfm-player-status{font-size:15px!important;color:#b8f328}
body.cfm-car-mode-active #cfm-player .cfm-vu,body.cfm-fullscreen-active #cfm-player .cfm-vu,#cfm-player:fullscreen .cfm-vu{align-self:center;display:grid!important;min-width:0;grid-template-columns:minmax(150px,.75fr) minmax(250px,1.5fr) minmax(150px,.75fr)!important;width:100%}
body.cfm-car-mode-active #cfm-player .cfm-meter canvas,body.cfm-car-mode-active #cfm-player .cfm-spectrum canvas,body.cfm-fullscreen-active #cfm-player .cfm-meter canvas,body.cfm-fullscreen-active #cfm-player .cfm-spectrum canvas,#cfm-player:fullscreen .cfm-meter canvas,#cfm-player:fullscreen .cfm-spectrum canvas{height:clamp(130px,19vh,250px)!important}
body.cfm-car-mode-active #cfm-player .cfm-player-controls,body.cfm-fullscreen-active #cfm-player .cfm-player-controls,#cfm-player:fullscreen .cfm-player-controls{grid-column:1/-1;justify-self:center;display:flex!important;justify-content:center!important;gap:clamp(14px,2vw,28px)!important;padding:18px 28px;border:1px solid rgba(99,237,240,.16);border-radius:28px;background:rgba(5,22,37,.78);backdrop-filter:blur(10px)}
body.cfm-car-mode-active #cfm-player .cfm-player-controls button,body.cfm-fullscreen-active #cfm-player .cfm-player-controls button,#cfm-player:fullscreen .cfm-player-controls button{display:grid!important;flex:0 0 clamp(68px,7vw,98px)!important;width:clamp(68px,7vw,98px)!important;min-width:68px!important;max-width:98px!important;height:clamp(68px,7vw,98px)!important;min-height:68px!important;max-height:98px!important;font-size:clamp(20px,2.5vw,34px)!important}
body.cfm-car-mode-active #cfm-player .cfm-player-controls .cfm-choose,body.cfm-fullscreen-active #cfm-player .cfm-player-controls .cfm-choose,#cfm-player:fullscreen .cfm-player-controls .cfm-choose{display:flex!important;align-items:center;justify-content:center;flex:0 0 auto!important;width:max-content!important;min-width:156px!important;max-width:none!important;padding:0 24px!important;font-size:17px!important;line-height:1.08!important;white-space:nowrap!important}
body.cfm-car-mode-active #cfm-player .cfm-player-controls label,body.cfm-fullscreen-active #cfm-player .cfm-player-controls label,#cfm-player:fullscreen .cfm-player-controls label{display:grid!important;align-content:center;min-width:210px}
body.cfm-car-mode-active #cfm-player .cfm-player-controls input,body.cfm-fullscreen-active #cfm-player .cfm-player-controls input,#cfm-player:fullscreen .cfm-player-controls input{width:210px;height:28px}
body.cfm-car-mode-active #cfm-player .cfm-drive-note{display:block;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap}
body.cfm-car-mode-active #cfm-player .cfm-mode-tools,body.cfm-fullscreen-active #cfm-player .cfm-mode-tools,#cfm-player:fullscreen .cfm-mode-tools{top:20px;right:20px}
body.cfm-car-mode-active #cfm-player .cfm-mode-menu-toggle,body.cfm-fullscreen-active #cfm-player .cfm-mode-menu-toggle,#cfm-player:fullscreen .cfm-mode-menu-toggle{display:none!important}
body.cfm-car-mode-active #cfm-player .cfm-player-modes,body.cfm-fullscreen-active #cfm-player .cfm-player-modes,#cfm-player:fullscreen .cfm-player-modes{position:static;display:flex!important;min-width:0;padding:0;border:0;background:transparent;box-shadow:none}
body.cfm-car-mode-active #cfm-player .cfm-player-modes button,body.cfm-fullscreen-active #cfm-player .cfm-player-modes button,#cfm-player:fullscreen .cfm-player-modes button{min-height:40px!important;padding:9px 13px!important}.cfm-app-installed .cfm-install-app{display:none!important}

@media(max-width:900px){.cfm-app-banner{grid-template-columns:1fr}.cfm-app-actions{justify-content:flex-start}.cfm-mode-tools{top:5px;right:6px}.cfm-player-modes{position:fixed;z-index:100005;top:calc(var(--cfm-header-height,76px) + 78px);right:10px}.cfm-mode-menu-open .cfm-player-modes{display:grid!important}.cfm-player-modes button{display:block!important}.cfm-app-banner{margin:18px 14px 0;padding:22px}.cfm-app-banner h3{font-size:27px}}
@media(max-width:700px){body.cfm-car-mode-active #cfm-player,body.cfm-fullscreen-active #cfm-player,#cfm-player:fullscreen{grid-template-columns:1fr!important;grid-template-rows:auto minmax(120px,1fr) auto!important;gap:12px!important;padding:18px 14px 34px!important}body.cfm-car-mode-active #cfm-player .cfm-player-station,body.cfm-fullscreen-active #cfm-player .cfm-player-station,#cfm-player:fullscreen .cfm-player-station{grid-template-columns:86px minmax(0,1fr);align-items:center;gap:13px}body.cfm-car-mode-active #cfm-player .cfm-player-station>img,body.cfm-fullscreen-active #cfm-player .cfm-player-station>img,#cfm-player:fullscreen .cfm-player-station>img{width:86px!important;height:86px!important;border-radius:19px!important}body.cfm-car-mode-active #cfm-player .cfm-player-copy strong,body.cfm-fullscreen-active #cfm-player .cfm-player-copy strong,#cfm-player:fullscreen .cfm-player-copy strong{font-size:25px!important}body.cfm-car-mode-active #cfm-player .cfm-vu,body.cfm-fullscreen-active #cfm-player .cfm-vu,#cfm-player:fullscreen .cfm-vu{grid-template-columns:1fr!important}body.cfm-car-mode-active #cfm-player .cfm-meter,body.cfm-fullscreen-active #cfm-player .cfm-meter,#cfm-player:fullscreen .cfm-meter{display:none}body.cfm-car-mode-active #cfm-player .cfm-spectrum canvas,body.cfm-fullscreen-active #cfm-player .cfm-spectrum canvas,#cfm-player:fullscreen .cfm-spectrum canvas{height:min(29vh,210px)!important}body.cfm-car-mode-active #cfm-player .cfm-player-controls,body.cfm-fullscreen-active #cfm-player .cfm-player-controls,#cfm-player:fullscreen .cfm-player-controls{gap:10px!important;width:100%;padding:12px!important}body.cfm-car-mode-active #cfm-player .cfm-player-controls button,body.cfm-fullscreen-active #cfm-player .cfm-player-controls button,#cfm-player:fullscreen .cfm-player-controls button{flex-basis:64px!important;width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important}body.cfm-car-mode-active #cfm-player .cfm-player-controls label,body.cfm-fullscreen-active #cfm-player .cfm-player-controls label,#cfm-player:fullscreen .cfm-player-controls label{display:none!important}body.cfm-car-mode-active #cfm-player .cfm-mode-tools,body.cfm-fullscreen-active #cfm-player .cfm-mode-tools,#cfm-player:fullscreen .cfm-mode-tools{top:10px;right:10px}body.cfm-car-mode-active #cfm-player .cfm-player-modes,body.cfm-fullscreen-active #cfm-player .cfm-player-modes,#cfm-player:fullscreen .cfm-player-modes{display:grid!important;gap:5px}body.cfm-car-mode-active #cfm-player .cfm-player-modes .cfm-install-app,body.cfm-fullscreen-active #cfm-player .cfm-player-modes .cfm-install-app,#cfm-player:fullscreen .cfm-player-modes .cfm-install-app{display:none!important}.cfm-drive-note{max-width:88%;overflow:hidden;text-overflow:ellipsis}.cfm-app-actions{display:grid}.cfm-app-actions button{text-align:center}}
@media(max-width:700px){body.cfm-car-mode-active #cfm-player .cfm-player-controls,body.cfm-fullscreen-active #cfm-player .cfm-player-controls,#cfm-player:fullscreen .cfm-player-controls{flex-wrap:wrap}body.cfm-car-mode-active #cfm-player .cfm-player-controls .cfm-choose,body.cfm-fullscreen-active #cfm-player .cfm-player-controls .cfm-choose,#cfm-player:fullscreen .cfm-player-controls .cfm-choose{flex:1 0 128px!important;width:auto!important;min-width:128px!important;padding:0 14px!important;font-size:14px!important}}
@supports(padding:max(0px)){@media(max-width:700px){body.cfm-car-mode-active #cfm-player,body.cfm-fullscreen-active #cfm-player,#cfm-player:fullscreen{padding-top:max(18px,env(safe-area-inset-top))!important;padding-right:max(14px,env(safe-area-inset-right))!important;padding-bottom:max(34px,env(safe-area-inset-bottom))!important;padding-left:max(14px,env(safe-area-inset-left))!important}}}

/* Tela cheia móvel: painel compacto, sem elementos fora da largura do iPhone. */
@media(max-width:700px){
body.cfm-car-mode-active #cfm-player,body.cfm-fullscreen-active #cfm-player,#cfm-player:fullscreen{grid-template-rows:auto auto auto!important;align-content:space-between!important;overflow:hidden!important}
body.cfm-car-mode-active #cfm-player .cfm-player-station,body.cfm-fullscreen-active #cfm-player .cfm-player-station,#cfm-player:fullscreen .cfm-player-station{margin-top:76px;align-self:start!important}
body.cfm-car-mode-active #cfm-player .cfm-player-copy strong,body.cfm-fullscreen-active #cfm-player .cfm-player-copy strong,#cfm-player:fullscreen .cfm-player-copy strong{font-size:22px!important;line-height:1.08!important}
body.cfm-car-mode-active #cfm-player .cfm-player-location,body.cfm-fullscreen-active #cfm-player .cfm-player-location,#cfm-player:fullscreen .cfm-player-location{margin-top:5px;font-size:14px!important;white-space:normal!important}
body.cfm-car-mode-active #cfm-player .cfm-vu,body.cfm-fullscreen-active #cfm-player .cfm-vu,#cfm-player:fullscreen .cfm-vu{align-self:center!important;width:100%!important;max-height:150px!important}
body.cfm-car-mode-active #cfm-player .cfm-spectrum,body.cfm-fullscreen-active #cfm-player .cfm-spectrum,#cfm-player:fullscreen .cfm-spectrum{height:140px!important;min-height:140px!important;max-height:140px!important;aspect-ratio:auto!important}
body.cfm-car-mode-active #cfm-player .cfm-spectrum canvas,body.cfm-fullscreen-active #cfm-player .cfm-spectrum canvas,#cfm-player:fullscreen .cfm-spectrum canvas{display:block!important;width:100%!important;height:140px!important;min-height:140px!important;max-height:140px!important}
body.cfm-car-mode-active #cfm-player .cfm-player-controls,body.cfm-fullscreen-active #cfm-player .cfm-player-controls,#cfm-player:fullscreen .cfm-player-controls{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:center!important;justify-items:center!important;align-self:end!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;gap:10px!important;padding:12px!important;border-radius:22px!important;overflow:hidden!important}
body.cfm-car-mode-active #cfm-player .cfm-player-controls button,body.cfm-fullscreen-active #cfm-player .cfm-player-controls button,#cfm-player:fullscreen .cfm-player-controls button{flex:none!important;width:clamp(56px,15vw,68px)!important;min-width:56px!important;max-width:68px!important;height:clamp(56px,15vw,68px)!important;min-height:56px!important;max-height:68px!important;justify-self:center!important}
body.cfm-car-mode-active #cfm-player .cfm-player-controls .cfm-choose,body.cfm-fullscreen-active #cfm-player .cfm-player-controls .cfm-choose,#cfm-player:fullscreen .cfm-player-controls .cfm-choose{grid-column:1/-1!important;width:100%!important;min-width:0!important;max-width:100%!important;height:52px!important;min-height:52px!important;max-height:52px!important;padding:0 14px!important;white-space:nowrap!important}
body.cfm-car-mode-active #cfm-player .cfm-player-modes .cfm-car-mode,body.cfm-fullscreen-active #cfm-player .cfm-player-modes .cfm-car-mode,#cfm-player:fullscreen .cfm-player-modes .cfm-car-mode{display:none!important}
}


/* 0.12.24 — textos nítidos no espectro mobile em Tela Cheia / Modo Carro.
   Somente as legendas saem do canvas escalado e viram texto DOM.
   Espectro, animação, áudio, dimensões e controles não mudam. */
@media(max-width:700px){
  body.cfm-car-mode-active #cfm-player .cfm-spectrum,
  body.cfm-fullscreen-active #cfm-player .cfm-spectrum,
  #cfm-player:fullscreen .cfm-spectrum{
    position:relative;
  }

  body.cfm-car-mode-active #cfm-player .cfm-spectrum small,
  body.cfm-fullscreen-active #cfm-player .cfm-spectrum small,
  #cfm-player:fullscreen .cfm-spectrum small{
    left:12px!important;
    top:10px!important;
    z-index:4!important;
    margin:0!important;
    color:rgba(255,255,255,.58)!important;
    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.11em!important;
    text-shadow:none!important;
    filter:none!important;
  }

  body.cfm-car-mode-active #cfm-player .cfm-spectrum::before,
  body.cfm-fullscreen-active #cfm-player .cfm-spectrum::before,
  #cfm-player:fullscreen .cfm-spectrum::before{
    content:attr(data-spectrum-label);
    position:absolute;
    z-index:4;
    left:12px;
    top:24px;
    color:rgba(255,255,255,.56);
    font:700 8px/1.15 Arial,sans-serif;
    letter-spacing:.02em;
    white-space:nowrap;
    pointer-events:none;
    text-shadow:none;
    filter:none;
  }

  body.cfm-car-mode-active #cfm-player .cfm-spectrum::after,
  body.cfm-fullscreen-active #cfm-player .cfm-spectrum::after,
  #cfm-player:fullscreen .cfm-spectrum::after{
    content:"CANALFM.COM.BR";
    position:absolute;
    z-index:4;
    right:12px;
    bottom:10px;
    color:rgba(255,255,255,.58);
    font:700 8px/1 Arial,sans-serif;
    letter-spacing:.04em;
    white-space:nowrap;
    pointer-events:none;
    text-shadow:none;
    filter:none;
  }
}


/* 0.12.37 — botão Opções compacto no desktop para não cobrir Volume */
@media(min-width:701px){
  .cfm-mode-tools{
    top:4px!important;
  }
  .cfm-mode-menu-toggle{
    min-width:82px!important;
    height:24px!important;
    min-height:24px!important;
    max-height:24px!important;
    padding:0 9px!important;
    border-radius:8px!important;
  }
  .cfm-mode-menu-toggle::before{
    font-size:12px!important;
  }
  .cfm-mode-menu-toggle::after{
    font-size:10px!important;
  }
}


/* 0.12.38 — refinamento final do botão Opções */
/* Desktop: mais alto e menor para liberar completamente o rótulo/slider de volume. */
@media(min-width:701px){
  .cfm-mode-tools{
    top:0!important;
  }
  .cfm-mode-menu-toggle{
    min-width:76px!important;
    height:22px!important;
    min-height:22px!important;
    max-height:22px!important;
    padding:0 8px!important;
    border-radius:7px!important;
  }
  .cfm-mode-menu-toggle::before{
    font-size:11px!important;
    letter-spacing:1.6px!important;
  }
  .cfm-mode-menu-toggle::after{
    font-size:9px!important;
  }
}

/* Mobile: visível, porém sem encostar no botão "Escolher rádio". */
@media(max-width:700px){
  .cfm-mode-tools{
    top:7px!important;
    right:14px!important;
  }
  .cfm-mode-menu-toggle{
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:0!important;
    border-radius:10px!important;
  }
  .cfm-mode-menu-toggle::before{
    font-size:13px!important;
    letter-spacing:1.8px!important;
  }
}


/* 0.12.39 — contador embutido no espectro + volume mais respirado */
.cfm-spectrum{
    position:relative!important;
}
.cfm-spectrum .cfm-tape-counter{
    position:absolute!important;
    z-index:6!important;
    top:8px!important;
    right:8px!important;
    min-width:0!important;
    width:auto!important;
    height:24px!important;
    min-height:24px!important;
    max-height:24px!important;
    margin:0!important;
    padding:0 8px!important;
    gap:5px!important;
    border-radius:6px!important;
    background:rgba(2,16,10,.92)!important;
    pointer-events:none!important;
}
.cfm-spectrum .cfm-tape-state{
    display:none!important;
}
.cfm-spectrum .cfm-tape-time{
    font-size:10px!important;
    letter-spacing:.05em!important;
}
.cfm-spectrum .cfm-tape-led{
    width:6px!important;
    height:6px!important;
    flex:0 0 6px!important;
}

/* Dá mais respiro ao bloco do volume depois que o contador sai dali. */
@media(min-width:701px){
    .cfm-volume-wrap,
    .cfm-volume-control,
    .cfm-volume{
        margin-top:8px!important;
    }
}

/* No mobile normal, mantém o contador dentro do espectro quando esse bloco estiver visível,
   mas reduz um pouco para não disputar espaço com os textos do espectro. */
@media(max-width:700px){
    .cfm-spectrum .cfm-tape-counter{
        top:7px!important;
        right:7px!important;
        height:22px!important;
        min-height:22px!important;
        max-height:22px!important;
        padding:0 7px!important;
    }
    .cfm-spectrum .cfm-tape-time{
        font-size:9px!important;
    }
}


/* 0.12.40 — microajuste cirúrgico do botão Opções (desktop)
   Apenas 4px para baixo. Nenhuma outra área do player é alterada. */
@media(min-width:701px){
  .cfm-mode-tools{
    top:4px!important;
  }
}


/* 0.12.42 — Modo Carro / Tela Cheia em celular horizontal
   Mantém o layout vertical atual intacto.
   Em landscape móvel, remove apenas os VUs analógicos para o espectro
   continuar sendo o visual principal sem herdar o layout desktop. */
@media (orientation:landscape) and (max-height:700px) and (pointer:coarse){
    body.cfm-car-mode-active #cfm-player .cfm-vu,
    body.cfm-fullscreen-active #cfm-player .cfm-vu,
    #cfm-player:fullscreen .cfm-vu{
        grid-template-columns:minmax(0,1fr)!important;
        width:min(52vw,720px)!important;
        max-width:720px!important;
        justify-self:center!important;
    }

    body.cfm-car-mode-active #cfm-player .cfm-vu .cfm-meter,
    body.cfm-fullscreen-active #cfm-player .cfm-vu .cfm-meter,
    #cfm-player:fullscreen .cfm-vu .cfm-meter{
        display:none!important;
    }

    body.cfm-car-mode-active #cfm-player .cfm-vu .cfm-spectrum,
    body.cfm-fullscreen-active #cfm-player .cfm-vu .cfm-spectrum,
    #cfm-player:fullscreen .cfm-vu .cfm-spectrum{
        display:block!important;
        width:100%!important;
        min-width:0!important;
        max-width:none!important;
    }

    body.cfm-car-mode-active #cfm-player .cfm-spectrum canvas,
    body.cfm-fullscreen-active #cfm-player .cfm-spectrum canvas,
    #cfm-player:fullscreen .cfm-spectrum canvas{
        width:100%!important;
        height:clamp(150px,34vh,230px)!important;
    }
}


/* 0.12.44 — volume oculto em Modo Carro/Tela Cheia no celular
   Mantém volume no player normal e no desktop. */
@media (pointer:coarse) and (max-width:1024px){
    body.cfm-car-mode-active #cfm-player .cfm-player-controls label,
    body.cfm-fullscreen-active #cfm-player .cfm-player-controls label,
    #cfm-player:fullscreen .cfm-player-controls label{
        display:none!important;
    }
}


/* 0.12.45 — contador totalmente visível no mobile horizontal
   Apenas reposiciona o visor dentro do espectro em Modo Carro/Tela Cheia. */
@media (orientation:landscape) and (max-height:700px) and (pointer:coarse){
    body.cfm-car-mode-active #cfm-player .cfm-spectrum .cfm-tape-counter,
    body.cfm-fullscreen-active #cfm-player .cfm-spectrum .cfm-tape-counter,
    #cfm-player:fullscreen .cfm-spectrum .cfm-tape-counter{
        top:10px!important;
        right:28px!important;
        max-width:calc(100% - 56px)!important;
    }
}


/* 0.12.46 — ajuste fino do contador no mobile horizontal
   Recuo adicional para o visor ficar totalmente confortável dentro do espectro. */
@media (orientation:landscape) and (max-height:700px) and (pointer:coarse){
    body.cfm-car-mode-active #cfm-player .cfm-spectrum .cfm-tape-counter,
    body.cfm-fullscreen-active #cfm-player .cfm-spectrum .cfm-tape-counter,
    #cfm-player:fullscreen .cfm-spectrum .cfm-tape-counter{
        right:44px!important;
    }
}


/* 0.12.47 — Compartilhar rádio no player */
#cfm-player .cfm-share{
    background:#112c42!important;
    color:#63edf0!important;
    border:1px solid #2a5b6c!important;
}
#cfm-player .cfm-share span{
    display:block;
    font-size:20px;
    line-height:1;
    transform:translateY(-1px);
}
#cfm-player .cfm-share:hover,
#cfm-player .cfm-share:focus-visible{
    background:#17445a!important;
    border-color:#63edf0!important;
}
#cfm-player .cfm-share.is-copied{
    color:#aaff00!important;
    border-color:rgba(170,255,0,.55)!important;
}
#cfm-player .cfm-share:disabled{
    opacity:.35;
    cursor:not-allowed;
}


/* 0.12.48 — Mobile vertical: 5 controles em uma única linha.
   Escopo intencionalmente restrito a portrait em Modo Carro/Tela Cheia.
   Desktop e landscape permanecem como na 0.12.47. */
@media (max-width:700px) and (orientation:portrait){
  #cfm-player.cfm-fs .cfm-controls,
  #cfm-player.cfm-car .cfm-controls{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    column-gap:8px!important;
    row-gap:14px!important;
    align-items:center!important;
  }

  #cfm-player.cfm-fs .cfm-choose,
  #cfm-player.cfm-car .cfm-choose{
    grid-column:1 / -1!important;
    width:100%!important;
  }

  #cfm-player.cfm-fs .cfm-fav,
  #cfm-player.cfm-fs .cfm-toggle,
  #cfm-player.cfm-fs .cfm-stop,
  #cfm-player.cfm-fs .cfm-reconnect,
  #cfm-player.cfm-fs .cfm-share,
  #cfm-player.cfm-car .cfm-fav,
  #cfm-player.cfm-car .cfm-toggle,
  #cfm-player.cfm-car .cfm-stop,
  #cfm-player.cfm-car .cfm-reconnect,
  #cfm-player.cfm-car .cfm-share{
    width:min(100%,72px)!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    min-width:0!important;
    justify-self:center!important;
    margin:0!important;
  }
}

/* iPhones/telas particularmente estreitas: reduz apenas o necessário. */
@media (max-width:390px) and (orientation:portrait){
  #cfm-player.cfm-fs .cfm-controls,
  #cfm-player.cfm-car .cfm-controls{
    column-gap:5px!important;
  }

  #cfm-player.cfm-fs .cfm-fav,
  #cfm-player.cfm-fs .cfm-toggle,
  #cfm-player.cfm-fs .cfm-stop,
  #cfm-player.cfm-fs .cfm-reconnect,
  #cfm-player.cfm-fs .cfm-share,
  #cfm-player.cfm-car .cfm-fav,
  #cfm-player.cfm-car .cfm-toggle,
  #cfm-player.cfm-car .cfm-stop,
  #cfm-player.cfm-car .cfm-reconnect,
  #cfm-player.cfm-car .cfm-share{
    width:min(100%,64px)!important;
  }
}


/* 0.12.49 — Mobile vertical: 5 controles em uma única linha
   Correção efetiva para Modo Carro/Tela Cheia.
   Desktop e horizontal permanecem inalterados. */
@media (max-width:700px) and (orientation:portrait){

  body.cfm-car-mode-active #cfm-player .cfm-player-controls,
  body.cfm-fullscreen-active #cfm-player .cfm-player-controls,
  #cfm-player:fullscreen .cfm-player-controls{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    column-gap:8px!important;
    row-gap:14px!important;
    width:100%!important;
    max-width:none!important;
    padding:18px 16px!important;
    align-items:center!important;
    justify-items:center!important;
  }

  body.cfm-car-mode-active #cfm-player .cfm-player-controls .cfm-choose,
  body.cfm-fullscreen-active #cfm-player .cfm-player-controls .cfm-choose,
  #cfm-player:fullscreen .cfm-player-controls .cfm-choose{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:74px!important;
    min-height:74px!important;
    margin:0 0 4px!important;
    padding:0 18px!important;
  }

  body.cfm-car-mode-active #cfm-player .cfm-player-controls button:not(.cfm-choose),
  body.cfm-fullscreen-active #cfm-player .cfm-player-controls button:not(.cfm-choose),
  #cfm-player:fullscreen .cfm-player-controls button:not(.cfm-choose){
    grid-column:auto!important;
    grid-row:auto!important;
    width:64px!important;
    min-width:64px!important;
    max-width:64px!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    margin:0!important;
    padding:0!important;
    justify-self:center!important;
  }

  /* Mantém o volume oculto nos modos mobile, como já aprovado. */
  body.cfm-car-mode-active #cfm-player .cfm-player-controls label,
  body.cfm-fullscreen-active #cfm-player .cfm-player-controls label,
  #cfm-player:fullscreen .cfm-player-controls label{
    display:none!important;
  }
}

/* Telas mais estreitas: reduz levemente sem quebrar a linha. */
@media (max-width:390px) and (orientation:portrait){
  body.cfm-car-mode-active #cfm-player .cfm-player-controls,
  body.cfm-fullscreen-active #cfm-player .cfm-player-controls,
  #cfm-player:fullscreen .cfm-player-controls{
    column-gap:5px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.cfm-car-mode-active #cfm-player .cfm-player-controls button:not(.cfm-choose),
  body.cfm-fullscreen-active #cfm-player .cfm-player-controls button:not(.cfm-choose),
  #cfm-player:fullscreen .cfm-player-controls button:not(.cfm-choose){
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
  }
}


/* 0.12.53 — Desktop/PWA: controles compactos para não invadir o VU direito.
   Mobile permanece inalterado. */
@media (min-width:901px){
  #cfm-player .cfm-player-controls{
    gap:10px!important;
  }

  #cfm-player .cfm-player-controls button:not(.cfm-choose){
    flex:0 0 58px!important;
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    padding:0!important;
  }

  #cfm-player .cfm-player-controls .cfm-share span{
    font-size:18px!important;
  }
}

/* Notebooks e PWA em larguras intermediárias: um pouco mais compacto. */
@media (min-width:901px) and (max-width:1500px){
  #cfm-player .cfm-player-controls{
    gap:8px!important;
  }

  #cfm-player .cfm-player-controls button:not(.cfm-choose){
    flex-basis:54px!important;
    width:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
  }
}


/* 0.12.54 — correção real do desktop/PWA
   A 0.12.53 elevou os botões acima do tamanho original de 48px.
   Aqui restauramos uma escala compacta e reservamos uma coluna própria
   para os controles, impedindo qualquer avanço sobre o VU direito.
   Mobile permanece intocado. */
@media (min-width:1251px){

  #cfm-player{
    grid-template-columns:
      minmax(255px,.78fr)
      minmax(540px,1.62fr)
      minmax(430px,.92fr)!important;
  }

  #cfm-player .cfm-player-controls{
    min-width:430px!important;
    width:100%!important;
    overflow:hidden!important;
    gap:7px!important;
    justify-content:flex-end!important;
  }

  #cfm-player .cfm-player-controls button:not(.cfm-choose){
    flex:0 0 48px!important;
    width:48px!important;
    min-width:48px!important;
    max-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    padding:0!important;
  }

  #cfm-player .cfm-player-controls .cfm-choose{
    flex:0 0 auto!important;
  }

  #cfm-player .cfm-player-controls label{
    margin-left:4px!important;
  }

  #cfm-player .cfm-player-controls input{
    width:120px!important;
  }
}

/* Notebook/PWA médio: usa os 42px que o player já empregava originalmente
   nessa faixa e mantém a área de controles contida. */
@media (min-width:901px) and (max-width:1250px){

  #cfm-player .cfm-player-controls{
    overflow:hidden!important;
    gap:6px!important;
  }

  #cfm-player .cfm-player-controls button:not(.cfm-choose){
    flex:0 0 42px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0!important;
  }
}


/* 0.12.55 — Estado inicial desktop/PWA:
   mantém "Escolher rádio" totalmente dentro da coluna de controles,
   sem avançar por trás do VU direito. Mobile permanece inalterado. */
@media (min-width:901px){

  #cfm-player.is-idle .cfm-player-controls{
    overflow:hidden!important;
    min-width:0!important;
    justify-content:flex-start!important;
  }

  #cfm-player.is-idle .cfm-player-controls .cfm-choose{
    position:relative!important;
    z-index:4!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:132px!important;
    max-width:150px!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    padding:0 14px!important;
    margin:0!important;
    white-space:nowrap!important;
  }

  /* Controles inativos ficam após o botão, ainda dentro da mesma coluna. */
  #cfm-player.is-idle .cfm-player-controls button:not(.cfm-choose){
    flex-shrink:0!important;
  }
}

/* Em PWA/notebooks mais estreitos, reduz mais um pouco o botão inicial. */
@media (min-width:901px) and (max-width:1250px){
  #cfm-player.is-idle .cfm-player-controls .cfm-choose{
    min-width:118px!important;
    max-width:126px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0 10px!important;
    font-size:13px!important;
  }
}