/* Each station chooses one presentation; all use the same player and content. */
.layout-preview-banner{max-width:1380px;margin:0 auto 20px;padding:12px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;border:1px dashed currentColor;border-radius:8px;color:var(--accent);font-size:12px}
.layout-preview-banner span{color:var(--muted);flex:1}.layout-preview-banner a{text-decoration:underline;text-underline-offset:3px}

/* Magazine: a light editorial front page with a wide broadcast masthead. */
body[data-layout=magazine]{--ink:#16263e;--muted:#576980;--accent:#215bc4;--surface:#fff;--line:#d7dfe9;background:#f2f4f8;color:var(--ink)}
[data-layout=magazine] .site-header{border-bottom:3px solid #172f55;min-height:92px}
[data-layout=magazine] .brand{color:#162b4b}
[data-layout=magazine] .site-header nav{color:#52647c}
[data-layout=magazine] .site-header nav a.selected,[data-layout=magazine] .site-header nav a:hover{color:#173b7f}
[data-layout=magazine] .site-header nav a.selected:after{background:#215bc4}
[data-layout=magazine] .live-pill{background:#e8eefb;border-color:#c2d2ed;color:#234e94}
[data-layout=magazine] .live-pill i{background:#215bc4}
[data-layout=magazine] .header-actions time{background:#e4eaf3;color:#375377}
[data-layout=magazine] .login-link{border-color:#b7c8e2!important;color:#28549c}
[data-layout=magazine] .home-grid{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);grid-template-areas:"hero hero" "news schedule" "news messages";gap:22px}
[data-layout=magazine] .home-grid.no-news{grid-template-areas:"hero hero" "schedule messages"}
[data-layout=magazine] .panel{border-radius:8px}
[data-layout=magazine] .hero{background:#fff;border:1px solid #c6d3e6;border-left:5px solid #215bc4;padding:25px 32px}
[data-layout=magazine] .hero-inner{grid-template-columns:minmax(0,1fr);padding-top:0}
[data-layout=magazine] .hero-copy h2{font:700 clamp(34px,4vw,58px)/1.06 Georgia,serif;letter-spacing:-1.5px;max-width:850px;color:#193553}
[data-layout=magazine] .hero-copy>p,[data-layout=magazine] .now-track span{color:#526780}
[data-layout=magazine] .hero .panel-heading h1,[data-layout=magazine] .eyebrow{color:#215bc4}
[data-layout=magazine] .hero .panel-heading .subtle,[data-layout=magazine] .now-track small{color:#596e88}
[data-layout=magazine] .now-track strong{color:#203855}
[data-layout=magazine] .gradient-button{background:#215bc4;border-color:#215bc4;color:#fff}
[data-layout=magazine] .gradient-button:hover{background:#194895}
[data-layout=magazine] .panel-heading a{color:#215bc4}
[data-layout=magazine] .panel-heading h2{font-size:20px;font-weight:750}
[data-layout=magazine] .schedule-item{background:#f3f6fb;border-color:#dce4ef}
[data-layout=magazine] .schedule-item small{color:#536b8a}
[data-layout=magazine] .schedule-item.current{background:#e8f0ff;border-color:#9ab7e8}
[data-layout=magazine] .schedule-item .badge{background:#e3eaf6;color:#385a92}
[data-layout=magazine] .schedule-item .badge.now{background:#215bc4;color:white}
[data-layout=magazine] .news-panel{padding:24px}
[data-layout=magazine] .news-card{border-color:#d8e1ee;background:white;color:#203855}
[data-layout=magazine] .news-card>img{height:180px;opacity:1}
[data-layout=magazine] .news-card:after{display:none}
[data-layout=magazine] .news-content{position:relative;padding:15px;bottom:auto}
[data-layout=magazine] .news-content h3{font-size:18px;line-height:1.3;letter-spacing:-.35px}
[data-layout=magazine] .news-content p{color:#576980}
[data-layout=magazine] .message{background:#f2f5fa}
[data-layout=magazine] .message strong{color:#24508e}
[data-layout=magazine] .message p{color:#293e59}
[data-layout=magazine] .message small{color:#596e88}
[data-layout=magazine] .message .avatar{background:#dae6fa;color:#254e8b}
[data-layout=magazine] .message-compose{background:#f3f6fb;border-color:#cdd9ea;color:#526780}
[data-layout=magazine] .message-compose b{background:#215bc4;color:white}
[data-layout=magazine] .tiny-pill{background:#e8f0ff;border-color:#c9d9f3;color:#365f9b}
[data-layout=magazine] .empty{color:#5a6e88}
[data-layout=magazine] .site-footer .brand{color:#243b61}
[data-layout=magazine] #favorite[aria-pressed=true]{color:#c72b68}
[data-layout=magazine] .page-heading p,[data-layout=magazine] .interaction-grid p,[data-layout=magazine] .team-card p{color:#576980}
[data-layout=magazine] .day-tabs button{background:#fff;border-color:#cbd8eb;color:#526780}
[data-layout=magazine] .day-tabs button.selected{background:#215bc4;color:#fff}
[data-layout=magazine] .whatsapp{color:#156a54}
[data-layout=magazine] dialog{background:#fff;border-color:#bccce2}
[data-layout=magazine] dialog label{color:#526780}
[data-layout=magazine] dialog input,[data-layout=magazine] dialog textarea{background:#f4f7fc;border-color:#c9d7e9;color:#16263e}
[data-layout=magazine] .form-note,[data-layout=magazine] #article-body{color:#576980}
[data-layout=magazine] #request-result{color:#17644c}
[data-layout=magazine] button:focus-visible,[data-layout=magazine] a:focus-visible,[data-layout=magazine] input:focus-visible,[data-layout=magazine] textarea:focus-visible{outline-color:#215bc4}

/* Essencial: the broadcast is central, followed by a horizontal schedule. */
body[data-layout=essencial]{--ink:#eff7f6;--muted:#a7b8b8;--accent:#89d6cf;--surface:#172123;--line:#304142;background:#101719}
[data-layout=essencial] .site-header,[data-layout=essencial] .site-main,[data-layout=essencial] .site-footer{max-width:1060px}
[data-layout=essencial] .site-header nav a.selected:after{background:#89d6cf}
[data-layout=essencial] .live-pill{background:#203537;border-color:#3b5a5c;color:#a6e4de}
[data-layout=essencial] .header-actions time{background:#243537;color:#a6ceca}
[data-layout=essencial] .home-grid,[data-layout=essencial] .home-grid.no-news{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "schedule" "messages" "news";gap:20px}
[data-layout=essencial] .home-grid.no-news{grid-template-areas:"hero" "schedule" "messages"}
[data-layout=essencial] .hero{padding:22px 35px;background:#172123;border-color:#3c5455;border-radius:18px;text-align:center}
[data-layout=essencial] .hero .panel-heading{justify-content:center}
[data-layout=essencial] .hero .panel-heading .subtle{display:none}
[data-layout=essencial] .hero .panel-heading h1{color:#a2bfbf;font-size:10px}
[data-layout=essencial] .hero-inner{display:flex;flex-direction:column-reverse;padding:4px 0 0;gap:17px}
[data-layout=essencial] .eyebrow{color:#8dc8c2}
[data-layout=essencial] .hero-copy{width:100%}
[data-layout=essencial] .hero-copy h2{max-width:100%;font:600 clamp(28px,3vw,40px)/1.15 "Segoe UI",sans-serif;letter-spacing:-1px;margin:8px 0}
[data-layout=essencial] .hero-copy>p{max-width:none;color:#a7b8b8}
[data-layout=essencial] .now-track{justify-content:center;margin:18px 0}
[data-layout=essencial] .now-track div{text-align:left}
[data-layout=essencial] .now-track strong{color:#eff7f6}
[data-layout=essencial] .now-track small,[data-layout=essencial] .now-track span{color:#9cbab7}
[data-layout=essencial] .gradient-button{background:#294b49;border-color:#456e6b;color:#c4efe9}
[data-layout=essencial] .gradient-button:hover{background:#355c58}
[data-layout=essencial] .panel-heading a{color:#89d6cf}
[data-layout=essencial] #home-schedule{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
[data-layout=essencial] #home-schedule .schedule-item{margin:0;align-items:flex-start;flex-wrap:wrap;padding:15px 15px 15px 23px}
[data-layout=essencial] #home-schedule .schedule-item .badge{margin-top:5px}
[data-layout=essencial] .schedule-item{background:#1c2c2e;border-color:#344b4d}
[data-layout=essencial] .schedule-item.current{background:#23403e;border-color:#649d96}
[data-layout=essencial] .schedule-item .badge{background:#2e4545;color:#a8d3ce}
[data-layout=essencial] .schedule-item .badge.now{background:#89d6cf;color:#183230}
[data-layout=essencial] .message{background:#203032}
[data-layout=essencial] .message strong{color:#bce5df}
[data-layout=essencial] .message .avatar{background:#355653}
[data-layout=essencial] .message-compose{background:#203032;border-color:#3c5555;color:#b0c5c3}
[data-layout=essencial] .message-compose b{background:#89d6cf;color:#183230}
[data-layout=essencial] .tiny-pill{background:#263f3c;border-color:#42625d;color:#b1d8d0}
[data-layout=essencial] .news-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
[data-layout=essencial] .news-content h3{font-size:13px}
[data-layout=essencial] .day-tabs button{background:#203032;border-color:#3c5555}
[data-layout=essencial] .day-tabs button.selected{background:#365e58}
[data-layout=essencial] dialog{background:#172123;border-color:#4c7470}
[data-layout=essencial] dialog input,[data-layout=essencial] dialog textarea{background:#101b1d;border-color:#3c5555}

/* Vibrante: music-led, vivid broadcast card and a news wall alongside it. */
body[data-layout=vibrante]{--ink:#faf5ff;--muted:#bcaacf;--accent:#e39aff;--surface:#201633;--line:#423154;background:#150e28;background-image:radial-gradient(ellipse at 0 -20%,#65277166,transparent 55%)}
[data-layout=vibrante] .site-header{border-color:#463255}
[data-layout=vibrante] .site-header nav a.selected:after{background:#ef9dff}
[data-layout=vibrante] .live-pill{background:#3b2143;border-color:#794976;color:#ffc2ee}
[data-layout=vibrante] .live-pill i{background:#ff7eac}
[data-layout=vibrante] .header-actions time{background:#332243;color:#e2c0ee}
[data-layout=vibrante] .home-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"hero news" "schedule messages";gap:22px}
[data-layout=vibrante] .home-grid.no-news{grid-template-areas:"hero hero" "schedule messages"}
[data-layout=vibrante] .hero{align-self:stretch;background:linear-gradient(130deg,#702c9a,#4a227f 55%,#25214f);border-color:#a85fce;border-radius:20px;padding:28px}
[data-layout=vibrante] .hero .panel-heading h1{color:#f4cbff}
[data-layout=vibrante] .hero .panel-heading .subtle{color:#cda8e4}
[data-layout=vibrante] .hero-inner{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:23px}
[data-layout=vibrante] .hero-copy h2{font:850 clamp(34px,3.9vw,56px)/1.04 "Segoe UI",sans-serif;letter-spacing:-2px;max-width:700px}
[data-layout=vibrante] .hero-copy .eyebrow{color:#ffcf9b}
[data-layout=vibrante] .hero-copy>p{color:#e3c9f1}
[data-layout=vibrante] .now-track{margin:28px 0 23px}
[data-layout=vibrante] .now-track img{width:64px;height:64px;border-radius:10px}
[data-layout=vibrante] .now-track small{color:#ddbaee}
[data-layout=vibrante] .now-track span{color:#e1c7f2}
[data-layout=vibrante] .gradient-button{background:#ffbd84;border-color:#ffcf9e;color:#3d2046;border-radius:8px}
[data-layout=vibrante] .gradient-button:hover{background:#ffd3a6}
[data-layout=vibrante] .news-panel{background:transparent;padding:0;border:0}
[data-layout=vibrante] .news-panel .panel-heading{margin:0 0 12px}
[data-layout=vibrante] #home-news .news-card>img{height:210px}
[data-layout=vibrante] .news-card{border-color:#624275;border-radius:12px;background:#352343}
[data-layout=vibrante] .news-content h3{font-size:16px}
[data-layout=vibrante] .panel-heading a{color:#eab0ff}
[data-layout=vibrante] .schedule-item{background:#2b203f;border-color:#4b365e}
[data-layout=vibrante] .schedule-item.current{background:#432951;border-color:#a164b9}
[data-layout=vibrante] .schedule-item .badge{background:#45305b;color:#dfb5f3}
[data-layout=vibrante] .schedule-item .badge.now{background:#ffbd84;color:#3d2046}
[data-layout=vibrante] .message{background:#2e2140}
[data-layout=vibrante] .message .avatar{background:#754590}
[data-layout=vibrante] .message strong{color:#efc9ff}
[data-layout=vibrante] .message-compose{background:#332444;border-color:#644477;color:#d9c0eb}
[data-layout=vibrante] .message-compose b{background:#ffbd84;color:#3d2046}
[data-layout=vibrante] .tiny-pill{background:#3f2a4e;border-color:#634078;color:#e0b5ef}
[data-layout=vibrante] .day-tabs button{background:#2e2140;border-color:#624477}
[data-layout=vibrante] .day-tabs button.selected{background:#754590}
[data-layout=vibrante] dialog{background:#211631;border-color:#805299}
[data-layout=vibrante] dialog input,[data-layout=vibrante] dialog textarea{background:#180f26;border-color:#624477}

@media(max-width:1050px){
  [data-layout=magazine] .home-grid{grid-template-columns:minmax(0,1.45fr) minmax(270px,1fr)}
  [data-layout=magazine] .hero-inner{grid-template-columns:minmax(0,1fr)}
  [data-layout=vibrante] .hero-inner{grid-template-columns:minmax(0,1fr)}
  [data-layout=vibrante] #home-news .news-card>img{height:235px}
}
@media(max-width:760px){
  .layout-preview-banner{margin:0 16px 16px;gap:8px;padding:12px}.layout-preview-banner span{flex-basis:100%;order:3}
  [data-layout=magazine] .home-grid,[data-layout=magazine] .home-grid.no-news,[data-layout=vibrante] .home-grid,[data-layout=vibrante] .home-grid.no-news{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "schedule" "news" "messages";gap:18px}
  [data-layout=magazine] .home-grid.no-news,[data-layout=vibrante] .home-grid.no-news{grid-template-areas:"hero" "schedule" "messages"}
  [data-layout=magazine] .hero{padding:22px}
  [data-layout=magazine] .hero-inner{grid-template-columns:minmax(0,1fr);gap:12px}
  [data-layout=magazine] .hero-copy h2{font-size:35px}
  [data-layout=magazine] .hero-copy>p{max-width:none}
  [data-layout=magazine] .news-panel{padding:20px}
  [data-layout=magazine] .news-card>img{height:135px}
  [data-layout=magazine] .news-content{padding:12px}
  [data-layout=magazine] .news-content h3{font-size:15px}
  [data-layout=essencial] .hero{padding:22px 20px}
  [data-layout=essencial] .hero-copy h2{font-size:30px;padding:0;max-width:100%}
  [data-layout=essencial] #home-schedule{grid-template-columns:1fr}
  [data-layout=essencial] #home-schedule .schedule-item{align-items:center;flex-wrap:nowrap}
  [data-layout=essencial] .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-layout=vibrante] .hero{padding:24px}
  [data-layout=vibrante] .hero-copy h2{font-size:42px;max-width:none;padding:0;letter-spacing:-1.5px}
  [data-layout=vibrante] .hero-inner{padding-top:8px}
  [data-layout=vibrante] .hero-copy>p{max-width:none}
  [data-layout=vibrante] .now-track{margin:22px 0}
  [data-layout=vibrante] #home-news .news-card>img{height:180px}
  [data-layout=vibrante] .news-content h3{font-size:14px}
}
