:root{--ink:#153d33;--lime:#d8f36a;--paper:#f5f6f2;--line:#d4dfd6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.4 system-ui,sans-serif}a{color:inherit}header,main{max-width:820px;margin:auto;padding:10px 16px}header{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{font-weight:900;font-size:19px;text-decoration:none}header>a:last-child{font-size:12px}main{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:10px 16px}.hero{grid-column:1/-1;background:var(--ink);color:white;padding:10px 14px;border-radius:10px;display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}.hero h1{font-size:24px;line-height:1.1;margin:0;letter-spacing:-.6px}.hero h1 span{color:var(--lime)}.hero p{margin:0;font-size:12px}.hero .small{width:100%;font-size:11px;color:#d5e2d5}#popout{margin-left:auto;background:var(--lime);color:var(--ink);padding:7px 10px;border-radius:7px;font-size:12px;font-weight:700;text-decoration:none}.tuner{grid-column:1/-1}h2{font-size:16px;margin:0 0 7px}.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:650}input,select,button{font:inherit}input,select{width:100%;min-width:0;min-height:36px;padding:7px;border:1px solid #90a494;border-radius:7px;background:white;color:var(--ink)}button{min-height:36px;padding:7px 10px;border:1px solid var(--ink);border-radius:7px;background:var(--ink);color:white;font-size:12px;font-weight:700;cursor:pointer}button:disabled{opacity:.55;cursor:default}.secondary{background:white;color:var(--ink)}.actions{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}.small{font-size:11px}.muted{color:#53695d}.tuner>p{margin:4px 0}#status{grid-column:1/-1;font-size:12px;margin:0;font-weight:600}.results{grid-column:1;grid-row:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:clamp(150px,36vh,340px);overflow:auto;align-content:start;overscroll-behavior:contain}.station{background:white;border:1px solid var(--line);border-radius:8px;padding:9px;min-width:0}.station h3{font-size:13px;margin:0 0 4px;overflow-wrap:anywhere}.station p{font-size:11px;color:#53695d;margin:4px 0;overflow-wrap:anywhere}.station p:nth-of-type(2){display:none}.station a{font-size:11px}.station button{font-size:11px;padding:5px 7px}.station .actions{margin:6px 0}.player{grid-column:2;grid-row:4;align-self:start;width:100%;max-width:260px;padding:10px;border:1px solid #bacbb3;border-radius:10px;background:#e3eddc;display:grid;grid-template-columns:1fr 1fr;gap:7px}.player>div{grid-column:1/-1;min-width:0}.eyebrow{font-size:10px;font-weight:750}.player h2{font-size:13px;margin:4px 0;overflow-wrap:anywhere}.player p{font-size:11px;margin:0}.player audio{grid-column:1/-1;width:100%}.player audio:not([controls]){display:none}.audio-controls{display:grid;grid-template-columns:1fr 40px;gap:7px}.audio-controls[hidden]{display:none}.volume-label{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center}.volume-label input{grid-column:1/-1;min-height:28px;padding:0;accent-color:var(--ink);cursor:pointer}.volume-label output{font-size:11px}#browse-with-radio{grid-column:1/-1}.radio-change,#radio-browser{display:none}footer{grid-column:1/-1;border-top:1px solid var(--line);padding-top:7px;color:#53695d;font-size:11px}footer p{margin:4px 0}:focus-visible{outline:3px solid #799300;outline-offset:3px}body.radio-browsing main{display:block;max-width:none;padding:0 10px 10px}body.radio-browsing main>.hero,body.radio-browsing .tuner,body.radio-browsing #status,body.radio-browsing #results,body.radio-browsing footer,body.radio-browsing #browse-with-radio{display:none}body.radio-browsing .player{margin:0 auto 8px}body.radio-browsing .radio-change{display:block}body.radio-browsing #radio-browser{display:block}#radio-browser iframe{width:100%;height:76vh;min-height:380px;border:1px solid var(--line);border-radius:8px;background:white}body.radio-browsing header{max-width:820px}@media(max-width:620px){header,main{padding:8px 10px}main{grid-template-columns:minmax(0,1fr);gap:8px}.hero{gap:5px 10px;padding:9px 11px}.hero h1{font-size:20px}.hero>p:not(.small){display:none}#popout{font-size:11px;padding:7px}.fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.player{grid-column:1;grid-row:4;justify-self:center}.results{grid-column:1;grid-row:5;max-height:25vh;min-height:0}.tuner>p{font-size:10px}.hero .small{font-size:10px}footer{font-size:10px}footer .small{font-size:10px}}
@media(max-width:620px){.results{grid-template-columns:1fr}.station{padding:8px}.player{padding:8px;gap:5px}.player button{min-height:32px;padding:6px 8px}.hero h1{font-size:19px}.tuner>p{display:none}}

/* Reproductor pequeño en la esquina izquierda, marca centrada. */
body>header{max-width:none;display:grid;grid-template-columns:180px minmax(0,1fr) 180px;gap:10px;padding:10px 16px;align-items:start;border-bottom:1px solid var(--line);background:var(--paper)}
body>header>.brand{justify-self:center;align-self:center;font-size:clamp(16px,3vw,27px);text-align:center;min-width:0}
body>header>a:last-child{justify-self:end;align-self:center;font-weight:700}
body>header>.player{grid-column:1;grid-row:1;width:180px;max-width:100%;margin:0;padding:7px;gap:4px;position:relative}
.player .eyebrow{font-size:9px}.player h2{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player p{font-size:10px;overflow-wrap:anywhere}.player button{min-height:32px;padding:5px;font-size:11px}.player .audio-controls{gap:4px;grid-template-columns:1fr 32px}.player #radio-choose{grid-column:1}.radio-more{grid-column:2;position:relative;font-size:10px;align-self:center}.radio-more summary{cursor:pointer;min-height:32px;display:flex;align-items:center;justify-content:center;border:1px solid #90a494;border-radius:6px}.radio-more[open]{grid-column:1/-1}.radio-more .volume-label{margin:6px 0}.radio-more #stop{width:100%}
main{grid-template-columns:1fr;max-width:960px}.results{grid-column:1;grid-row:auto;max-height:none;grid-template-columns:repeat(3,minmax(0,1fr))}.hero #browse-with-radio{display:none}
body.radio-browsing main{padding:0;max-width:none}body.radio-browsing header{max-width:none}body.radio-browsing #radio-browser{display:block}#radio-browser iframe{display:block;border:0;border-radius:0;min-height:70dvh;height:calc(100dvh - 160px);width:100%}
@media(max-width:620px){body>header{grid-template-columns:105px minmax(0,1fr) 54px;padding:8px;gap:6px}body>header>.player{width:105px;padding:5px}.player h2{font-size:10px}.player .eyebrow{font-size:8px}.player p{font-size:9px}.player .audio-controls{grid-template-columns:1fr 29px}.player button{font-size:10px;padding:4px;min-height:32px}body>header>.brand{font-size:17px;letter-spacing:-.6px}.player #radio-choose{grid-column:1/-1}.radio-more{grid-column:1/-1}.radio-more summary{min-height:25px}.results{grid-template-columns:1fr;max-height:none}.hero{align-items:flex-start}.hero h1{font-size:20px}#popout{margin-left:0}.hero .small{font-size:11px}.tuner>p{display:block}#radio-browser iframe{height:calc(100dvh - 210px)}}

body>header{grid-template-columns:130px minmax(0,1fr) 64px}.player{max-width:130px}body>header>.player{width:130px}@media(max-width:620px){body>header{grid-template-columns:105px minmax(0,1fr) 45px}body>header>.player{width:105px}}

/* Lista de emisoras desplazable dentro del sintonizador. */
html { overflow-y: auto; }
body { min-height: 100%; }
#results.results { max-height: clamp(180px, 48dvh, 440px); min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; padding-right: 4px; }