:root{
    --bg:#05070c;
    --panel:#101520;
    --panel2:#141b2a;
    --text:#f5f7fb;
    --muted:#b6c2d8;
    --border:#263149;
    --brand:#00ff88;
    --brand2:#00b7ff;
    --danger:#ff657a;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Arial,Helvetica,sans-serif;
    font-size:16px;
    overflow-x:hidden;
}

.site-bg{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        radial-gradient(circle at 16% 14%,rgba(0,255,136,.20),transparent 30%),
        radial-gradient(circle at 80% 8%,rgba(0,183,255,.14),transparent 28%),
        linear-gradient(180deg,#05070c,#030407 70%);
}

.topbar{
    position:sticky;
    top:0;
    z-index:900;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:18px 6vw;
    background:rgba(5,7,12,.94);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
}

.brand,
.brand-with-logo{
    display:flex;
    align-items:center;
    gap:16px;
    color:var(--brand);
    font-size:25px;
    font-weight:950;
    text-decoration:none;
    min-width:0;
}

.brand-mark{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    color:#00130b;
    font-size:16px;
}

.site-logo{
    width:64px;
    height:64px;
    object-fit:contain;
    display:block;
    border-radius:14px;
    background:rgba(255,255,255,.03);
    padding:4px;
    box-shadow:0 0 22px rgba(0,255,136,.18);
}

.brand-text{
    display:inline-block;
    font-size:clamp(28px,3vw,48px);
    font-weight:1000;
    line-height:1;
    letter-spacing:-.5px;
    color:var(--brand);
    text-shadow:0 0 18px rgba(17,245,160,.20);
    white-space:nowrap;
}

.nav{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.nav a{
    color:#e8edf7;
    text-decoration:none;
    font-weight:900;
    padding:10px 14px;
    border-radius:999px;
    font-size:18px;
}

.nav a:hover{
    background:#141b2a;
    color:var(--brand);
}

main{
    width:min(1480px,100%);
    margin:auto;
}

.hero{
    width:100%;
    min-height:720px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
    gap:70px;
    align-items:center;
    padding:90px 6vw 70px;
    background:
        radial-gradient(circle at 12% 20%, rgba(0,255,136,.18), transparent 32%),
        radial-gradient(circle at 85% 35%, rgba(0,179,255,.12), transparent 30%),
        #05070b;
}

.hero-content{
    min-width:0;
}

.hero-logo{
    max-width:210px;
    width:100%;
    height:auto;
    display:block;
    margin-bottom:34px;
    filter:drop-shadow(0 0 24px rgba(0,255,136,.18));
}

.live-pill,
.badge,
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    border:1px solid rgba(0,255,136,.42);
    background:rgba(0,255,136,.09);
    color:var(--brand);
    border-radius:999px;
    padding:10px 16px;
    font-weight:900;
}

.live-pill span{
    width:9px;
    height:9px;
    background:var(--brand);
    border-radius:50%;
    box-shadow:0 0 0 0 rgba(0,255,136,.7);
    animation:pulse 1.3s infinite;
}

@keyframes pulse{
    70%{
        box-shadow:0 0 0 12px rgba(0,255,136,0);
    }
}

.hero h1{
    font-size:clamp(52px,7vw,112px);
    line-height:.95;
    margin:28px 0 22px;
    letter-spacing:-.06em;
    max-width:820px;
    font-weight:1000;
    color:#f8fafc;
}

.hero p{
    font-size:clamp(20px,2vw,30px);
    color:var(--muted);
    margin:0 0 30px;
    max-width:650px;
    line-height:1.35;
}

.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:56px;
    padding:14px 24px;
    border-radius:16px;
    text-decoration:none;
    font-weight:950;
    border:1px solid transparent;
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    color:#00130b;
    font-size:18px;
}

.btn.primary{
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    color:#00130b;
}

.btn.ghost,
.btn-outline{
    border-color:#2f3a56;
    color:#fff;
    background:rgba(255,255,255,.04);
}

.player-card{
    width:100%;
    max-width:720px;
    justify-self:end;
    background:linear-gradient(180deg,rgba(20,27,42,.98),rgba(12,15,24,.98));
    border:1px solid var(--border);
    border-radius:30px;
    padding:34px;
    box-shadow:0 22px 80px rgba(0,0,0,.42);
}

.player-top{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:22px;
    align-items:center;
}

.cover{
    width:140px;
    height:140px;
    border-radius:24px;
    overflow:hidden;
    background:#06080e;
    border:1px solid #2d3750;
}

.cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cover-fallback{
    height:100%;
    display:grid;
    place-items:center;
    font-size:58px;
    color:var(--brand);
    background:radial-gradient(circle,rgba(0,255,136,.2),#080b11);
}

.player-info h2{
    font-size:clamp(32px,3vw,46px);
    margin:20px 0 10px;
    color:#fff;
}

.player-info p{
    margin:0;
    color:var(--muted);
    line-height:1.45;
}

.radio-player{
    width:100%;
    display:block;
    margin:24px 0 15px;
}

.stream-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    color:var(--muted);
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:15px;
}

.stream-row a{
    color:var(--brand);
    font-weight:900;
    text-decoration:none;
}

.stream-alert,
.empty-state{
    background:#241b08;
    border:1px solid #8f6500;
    color:#ffd98a;
    padding:16px;
    border-radius:18px;
    line-height:1.45;
}

.quick-strip{
    margin:0 6vw 40px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.quick-strip a{
    background:rgba(16,21,32,.78);
    border:1px solid var(--border);
    border-radius:20px;
    padding:18px;
    color:#fff;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.quick-strip b{
    font-size:18px;
}

.quick-strip span{
    color:var(--muted);
    font-size:14px;
}

.section{
    padding:52px 6vw;
}

.section-head{
    margin-bottom:24px;
}

.section-head h2,
.section h2{
    font-size:clamp(34px,4vw,58px);
    letter-spacing:-.04em;
    margin:12px 0 8px;
}

.section-head p{
    color:var(--muted);
    font-size:18px;
    margin:0;
}

.inline-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
}

.featured-news{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:30px;
    background:rgba(16,21,32,.84);
}

.featured-media{
    min-height:380px;
    background:#06080e;
    display:flex;
    align-items:center;
    justify-content:center;
}

.featured-media img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.featured-body{
    padding:34px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.featured-body h3{
    font-size:clamp(30px,3.5vw,52px);
    line-height:1.02;
    margin:20px 0 14px;
}

.featured-body p{
    color:var(--muted);
    font-size:19px;
    line-height:1.55;
}

.news-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:18px;
    margin-top:18px;
}

.mini-news{
    display:grid;
    grid-template-columns:118px 1fr;
    gap:15px;
    align-items:center;
    background:rgba(16,21,32,.72);
    border:1px solid var(--border);
    border-radius:22px;
    padding:12px;
}

.mini-news img{
    width:118px;
    height:94px;
    object-fit:cover;
    border-radius:16px;
    background:#06080e;
}

.mini-news h3{
    margin:0 0 6px;
    font-size:19px;
}

.mini-news p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.35;
}

.schedule-list{
    display:grid;
    gap:12px;
}

.schedule-item{
    display:grid;
    grid-template-columns:130px 1fr 145px;
    gap:18px;
    align-items:center;
    background:rgba(16,21,32,.72);
    border:1px solid var(--border);
    border-radius:20px;
    padding:16px 18px;
}

.day{
    font-weight:950;
    color:var(--brand);
}

.program-main h3{
    margin:0 0 4px;
    font-size:21px;
}

.program-main p{
    margin:0;
    color:var(--muted);
}

.time{
    justify-self:end;
    font-weight:950;
    background:#0b0f18;
    border:1px solid #2d3750;
    border-radius:999px;
    padding:9px 12px;
    color:#fff;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:18px;
}

.photo-card{
    position:relative;
    min-height:310px;
    border-radius:26px;
    overflow:hidden;
    background:#101520;
    border:1px solid var(--border);
}

.photo-card img{
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    object-fit:cover;
}

.photo-card:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.82));
}

.photo-card div{
    position:absolute;
    z-index:2;
    left:18px;
    right:18px;
    bottom:18px;
}

.photo-card h3{
    margin:0 0 6px;
    font-size:22px;
}

.photo-card p{
    margin:0;
    color:#d6deef;
}

.footer{
    text-align:center;
    padding:34px;
    color:var(--muted);
    border-top:1px solid rgba(255,255,255,.08);
}

.hidden{
    display:none!important;
}

/* =========================
   CHAT FINAL ORDENADO
   ========================= */

#chatWidget,
#chatWidget *{
    box-sizing:border-box!important;
}

#chatWidget.radio-live-chat{
    position:fixed!important;
    right:18px!important;
    bottom:18px!important;
    left:auto!important;
    top:auto!important;
    width:360px!important;
    max-width:calc(100vw - 36px)!important;
    z-index:999999!important;
    font-family:Arial,Helvetica,sans-serif!important;
}

#chatWidget .radio-chat-launcher{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    margin-left:auto!important;
    width:auto!important;
    min-height:54px!important;
    padding:14px 18px!important;
    border:0!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,#00ff88,#00b3ff)!important;
    color:#00130a!important;
    font-weight:900!important;
    cursor:pointer!important;
    box-shadow:0 18px 45px rgba(0,0,0,.45)!important;
}

#chatWidget.is-open .radio-chat-launcher{
    display:none!important;
}

#chatWidget .radio-chat-dot{
    width:13px!important;
    height:13px!important;
    min-width:13px!important;
    border-radius:50%!important;
    background:#16ff72!important;
    display:inline-block!important;
    animation:radioChatPulse 1.2s infinite!important;
}

@keyframes radioChatPulse{
    0%{transform:scale(1);box-shadow:0 0 0 0 rgba(22,255,114,.75)}
    70%{transform:scale(1.15);box-shadow:0 0 0 12px rgba(22,255,114,0)}
    100%{transform:scale(1);box-shadow:0 0 0 0 rgba(22,255,114,0)}
}

#chatWidget .radio-chat-launch-title{
    font-size:17px!important;
    font-weight:900!important;
    color:#00130a!important;
    line-height:1!important;
}

#chatWidget .radio-chat-launch-sub{
    font-size:12px!important;
    font-weight:800!important;
    color:#00130a!important;
    opacity:.75!important;
    max-width:120px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    line-height:1!important;
}

#chatWidget .radio-chat-window{
    display:none!important;
    width:100%!important;
    height:auto!important;
    max-height:calc(100vh - 80px)!important;
    overflow:hidden!important;
    flex-direction:column!important;
    background:#0f121b!important;
    border:1px solid #2b3349!important;
    border-radius:22px!important;
    box-shadow:0 20px 70px rgba(0,0,0,.55)!important;
    color:#fff!important;
}

#chatWidget.is-open .radio-chat-window{
    display:flex!important;
}

#chatWidget .radio-chat-head{
    flex:0 0 auto!important;
    width:100%!important;
    min-height:72px!important;
    padding:14px 16px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    background:linear-gradient(135deg,#00ff88,#00b3ff)!important;
    color:#00130a!important;
}

#chatWidget .radio-chat-head strong{
    display:block!important;
    margin:0!important;
    color:#00130a!important;
    font-size:21px!important;
    line-height:1.1!important;
    font-weight:900!important;
}

#chatWidget .radio-chat-head small{
    display:block!important;
    margin-top:5px!important;
    color:#00130a!important;
    font-size:13px!important;
    line-height:1.1!important;
    font-weight:800!important;
    opacity:.82!important;
}

#chatWidget .radio-chat-close{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    border:0!important;
    border-radius:50%!important;
    background:rgba(0,0,0,.15)!important;
    color:#00130a!important;
    font-size:30px!important;
    line-height:40px!important;
    text-align:center!important;
    font-weight:900!important;
    cursor:pointer!important;
}

#chatWidget .radio-nick-panel{
    width:100%!important;
    padding:18px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    background:#0f121b!important;
}

#chatWidget .radio-nick-panel.hidden,
#chatWidget #nickPanel.hidden{
    display:none!important;
    padding:0!important;
    margin:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    visibility:hidden!important;
}

#chatWidget .radio-nick-panel h3{
    margin:0!important;
    color:#fff!important;
    font-size:22px!important;
    line-height:1.2!important;
}

#chatWidget .radio-nick-panel p{
    margin:0!important;
    color:#cbd5e1!important;
    font-size:15px!important;
    line-height:1.4!important;
}

#chatWidget .radio-nick-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
    margin:0!important;
}

#chatWidget .radio-chat-room{
    width:100%!important;
    min-width:0!important;
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    background:#0f121b!important;
}

#chatWidget .radio-chat-room.hidden,
#chatWidget #chatRoom.hidden{
    display:none!important;
}

#chatWidget .radio-chat-userbar{
    width:100%!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding:10px 12px!important;
    background:#171d2c!important;
    border-bottom:1px solid #2b3349!important;
    color:#fff!important;
}

#chatWidget .radio-chat-userbar span{
    min-width:0!important;
    max-width:210px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    font-size:14px!important;
}

#chatWidget .radio-chat-userbar button{
    flex:0 0 auto!important;
    width:auto!important;
    padding:7px 10px!important;
    border-radius:12px!important;
    border:1px solid #3b4564!important;
    background:#242c42!important;
    color:#fff!important;
    font-size:12px!important;
    cursor:pointer!important;
}

#chatWidget .radio-chat-box{
    width:100%!important;
    flex:1 1 auto!important;
    height:260px!important;
    min-height:170px!important;
    max-height:260px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:12px!important;
    background:#0b0e15!important;
}

#chatWidget .radio-chat-empty{
    color:#aeb3c2!important;
    text-align:center!important;
    border:1px dashed #343c55!important;
    border-radius:16px!important;
    padding:24px!important;
    margin-top:20px!important;
}

#chatWidget .radio-msg{
    width:auto!important;
    max-width:88%!important;
    margin:8px 0!important;
    padding:10px 12px!important;
    border-radius:16px!important;
    background:#1a2031!important;
    border:1px solid #293044!important;
    color:#fff!important;
    word-break:break-word!important;
}

#chatWidget .radio-msg-name{
    font-weight:900!important;
    color:#fff!important;
    margin-bottom:4px!important;
    line-height:1.2!important;
}

#chatWidget .radio-msg-text{
    line-height:1.35!important;
    color:#eef2ff!important;
}

#chatWidget .radio-msg small{
    display:block!important;
    margin-top:6px!important;
    color:#9fa6b8!important;
    font-size:11px!important;
}

#chatWidget .radio-reply{
    margin-left:auto!important;
    background:#07331f!important;
    border-color:#00a864!important;
}

#chatWidget .radio-reply .radio-msg-name{
    color:#65ffae!important;
}

#chatWidget .radio-emoji-bar,
#chatWidget .radio-emoji-row{
    width:100%!important;
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:6px!important;
    padding:8px 10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    background:#111827!important;
    border-top:1px solid #2b3349!important;
    border-bottom:1px solid #2b3349!important;
}

#chatWidget .radio-emoji-btn,
#chatWidget .radio-emoji-row button{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    padding:0!important;
    border:1px solid #33405e!important;
    border-radius:9px!important;
    background:#1b2436!important;
    color:#fff!important;
    font-size:17px!important;
    line-height:28px!important;
    cursor:pointer!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

#chatWidget .radio-emoji-btn:hover,
#chatWidget .radio-emoji-row button:hover{
    background:#202943!important;
    border-color:#00ff88!important;
}

#chatWidget .radio-chat-form{
    width:100%!important;
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    padding:12px!important;
    margin:0!important;
    background:#0f121b!important;
}

#chatWidget .radio-chat-input,
#chatWidget .radio-chat-textarea{
    width:100%!important;
    display:block!important;
    padding:13px 14px!important;
    background:#0b0e15!important;
    color:#fff!important;
    border:1px solid #333b55!important;
    border-radius:14px!important;
    font-size:16px!important;
    line-height:1.3!important;
    outline:none!important;
    box-shadow:none!important;
}

#chatWidget .radio-chat-input:focus,
#chatWidget .radio-chat-textarea:focus{
    border-color:#00ff88!important;
    box-shadow:0 0 0 3px rgba(0,255,136,.14)!important;
}

#chatWidget .radio-chat-textarea{
    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;
    resize:none!important;
}

#chatWidget .radio-chat-primary{
    width:100%!important;
    min-height:48px!important;
    padding:12px 16px!important;
    border:0!important;
    border-radius:15px!important;
    background:linear-gradient(135deg,#00ff88,#00b3ff)!important;
    color:#00130a!important;
    font-size:16px!important;
    font-weight:900!important;
    cursor:pointer!important;
}

.login-body{
    min-height:100vh;
    display:grid;
    place-items:center;
}

.login-card{
    width:380px;
    max-width:92vw;
    background:#11131a;
    border:1px solid #2b3349;
    padding:28px;
    border-radius:24px;
    display:grid;
    gap:12px;
}

.login-card input{
    padding:13px;
    border-radius:12px;
    border:1px solid #333b55;
    background:#080a10;
    color:#fff;
}

.ok{
    background:#083d25;
    color:#8affbf;
    padding:10px;
    border-radius:12px;
}

.err{
    background:#3d0815;
    color:#ffb0bd;
    padding:10px;
    border-radius:12px;
}

.admin-layout{
    display:grid;
    grid-template-columns:250px 1fr;
    min-height:100vh;
}

.sidebar{
    background:#0c0f17;
    border-right:1px solid #242a3b;
    padding:24px;
    position:sticky;
    top:0;
    height:100vh;
}

.sidebar a{
    display:block;
    padding:12px 10px;
    border-radius:12px;
    text-decoration:none;
    color:#dce0ea;
}

.sidebar a:hover{
    background:#1b2030;
}

.main{
    padding:28px;
}

.table{
    width:100%;
    border-collapse:collapse;
    background:#11131a;
    border-radius:16px;
    overflow:hidden;
}

.table th,
.table td{
    padding:11px;
    border-bottom:1px solid #242a3b;
    text-align:left;
}

.actions a{
    margin-right:8px;
}

.admin-form input,
.admin-form textarea,
.admin-form select{
    width:100%;
    padding:12px;
    background:#0b0e15;
    color:#fff;
    border:1px solid #333b55;
    border-radius:12px;
}

.admin-form button{
    padding:12px;
    border:0;
    border-radius:12px;
    background:var(--brand);
    font-weight:800;
    cursor:pointer;
}

@media(max-width:1100px){
    .hero{
        grid-template-columns:1fr;
        gap:44px;
        padding-top:60px;
        min-height:auto;
    }

    .player-card{
        justify-self:start;
        max-width:100%;
    }

    .quick-strip{
        grid-template-columns:repeat(2,1fr);
    }

    .featured-news{
        grid-template-columns:1fr;
    }

    .featured-media{
        min-height:280px;
    }

    .schedule-item{
        grid-template-columns:1fr;
    }

    .time{
        justify-self:start;
    }

    .inline-head{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:700px){
    .topbar{
        align-items:flex-start;
        flex-direction:column;
        padding:14px 18px;
    }

    .brand-text{
        font-size:24px;
        white-space:normal;
    }

    .site-logo{
        width:48px;
        height:48px;
    }

    .nav{
        width:100%;
        overflow:auto;
        flex-wrap:nowrap;
        gap:4px;
        padding-bottom:4px;
    }

    .nav a{
        font-size:15px;
        white-space:nowrap;
        padding:9px 11px;
    }

    .hero,
    .section{
        padding-left:18px;
        padding-right:18px;
    }

    .hero{
        padding-top:45px;
        padding-bottom:50px;
    }

    .hero h1{
        font-size:48px;
        letter-spacing:-2px;
    }

    .hero p{
        font-size:20px;
    }

    .hero-logo{
        max-width:130px;
    }

    .quick-strip{
        margin-left:18px;
        margin-right:18px;
        grid-template-columns:1fr;
    }

    .player-card{
        padding:20px;
        border-radius:24px;
    }

    .player-top{
        grid-template-columns:1fr;
    }

    .cover{
        width:100%;
        height:190px;
    }

    .featured-body{
        padding:22px;
    }

    .mini-news{
        grid-template-columns:1fr;
    }

    .mini-news img{
        width:100%;
        height:180px;
    }

    #chatWidget.radio-live-chat{
        left:10px!important;
        right:10px!important;
        bottom:10px!important;
        width:auto!important;
        max-width:none!important;
    }

    #chatWidget .radio-chat-window{
        max-height:calc(100vh - 80px)!important;
    }

    #chatWidget .radio-chat-box{
        height:220px!important;
        max-height:220px!important;
    }

    #chatWidget .radio-chat-launcher{
        width:100%!important;
    }

    .admin-layout{
        grid-template-columns:1fr;
    }

    .sidebar{
        height:auto;
        position:relative;
    }
}

@media(max-height:700px){
    #chatWidget .radio-chat-box{
        height:160px!important;
        max-height:160px!important;
    }

    #chatWidget .radio-chat-textarea{
        height:58px!important;
        min-height:58px!important;
        max-height:58px!important;
    }
}


/* =====================================================
   FIX LOGO GRANDE Y CENTRADO - 2026-09-03
   ===================================================== */
.hero-content{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
}

.hero-logo{
    max-width:360px !important;
    width:100% !important;
    height:auto !important;
    display:block !important;
    margin:0 auto 34px auto !important;
    filter:drop-shadow(0 0 28px rgba(0,255,136,.28)) !important;
}

.hero-actions{
    justify-content:center !important;
}

.hero h1,
.hero-copy h1{
    margin-left:auto !important;
    margin-right:auto !important;
}

.hero p,
.hero-subtitle{
    margin-left:auto !important;
    margin-right:auto !important;
}

.site-logo{
    width:76px !important;
    height:76px !important;
    object-fit:contain !important;
}

@media(max-width:700px){
    .hero-logo{
        max-width:240px !important;
        margin-bottom:26px !important;
    }

    .site-logo{
        width:54px !important;
        height:54px !important;
    }

    .hero-content{
        align-items:center !important;
        text-align:center !important;
    }
}

/* =====================================================
   FIX FINAL LOGO GRANDE Y CENTRADO - 2026-09-03
   Mantiene el index completo, solo fuerza el logo principal
   ===================================================== */
.hero-content{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
}

.hero-logo{
    max-width:360px !important;
    width:100% !important;
    height:auto !important;
    display:block !important;
    margin:0 auto 34px auto !important;
    filter:drop-shadow(0 0 30px rgba(0,255,136,.32)) !important;
}

.hero-actions{
    justify-content:center !important;
}

.hero h1,
.hero-copy h1,
.hero p,
.hero-subtitle{
    margin-left:auto !important;
    margin-right:auto !important;
}

.site-logo{
    width:76px !important;
    height:76px !important;
    object-fit:contain !important;
}

@media(max-width:700px){
    .hero-logo{
        max-width:240px !important;
        margin-bottom:26px !important;
    }

    .site-logo{
        width:54px !important;
        height:54px !important;
    }

    .hero-content{
        align-items:center !important;
        text-align:center !important;
    }
}

/* =====================================================
   V12 - REPRODUCTOR PEQUEÑO EN MENÚ + LOGO A LA IZQUIERDA
   ===================================================== */
.topbar{
    min-height:96px!important;
    padding:14px 6vw!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:24px!important;
}

.topbar-right{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:18px!important;
    min-width:0!important;
    flex:1 1 auto!important;
}

.brand-with-logo{
    flex:0 0 auto!important;
}

.site-logo{
    width:72px!important;
    height:72px!important;
    object-fit:contain!important;
}

.brand-text{
    font-size:clamp(28px,3vw,46px)!important;
}

.header-player{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    background:rgba(16,21,32,.92)!important;
    border:1px solid rgba(0,255,136,.35)!important;
    border-radius:999px!important;
    padding:8px 10px 8px 14px!important;
    box-shadow:0 0 26px rgba(0,255,136,.10)!important;
    max-width:360px!important;
    min-width:280px!important;
}

.header-live-dot{
    width:10px!important;
    height:10px!important;
    min-width:10px!important;
    border-radius:50%!important;
    background:#00ff88!important;
    box-shadow:0 0 0 0 rgba(0,255,136,.75)!important;
    animation:pulse 1.3s infinite!important;
}

.header-player-title{
    color:#00ff88!important;
    font-weight:950!important;
    font-size:14px!important;
    white-space:nowrap!important;
}

.header-audio{
    width:210px!important;
    height:34px!important;
    display:block!important;
    filter:drop-shadow(0 0 8px rgba(0,0,0,.25))!important;
}

.hero{
    grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr)!important;
    gap:54px!important;
    align-items:center!important;
}

.hero-side-layout{
    display:grid!important;
    grid-template-columns:minmax(230px,360px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:36px!important;
    text-align:left!important;
}

.hero-logo-side{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
}

.hero-text-side{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    text-align:left!important;
}

.hero-logo{
    max-width:340px!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    display:block!important;
    filter:drop-shadow(0 0 30px rgba(0,255,136,.26))!important;
}

.hero h1,
.hero-copy h1{
    font-size:clamp(46px,5.8vw,92px)!important;
    max-width:760px!important;
    margin:26px 0 22px!important;
    text-align:left!important;
}

.hero p,
.hero-subtitle{
    max-width:620px!important;
    margin:0 0 30px!important;
    text-align:left!important;
}

.hero-actions{
    justify-content:flex-start!important;
}

.hero-info-card{
    max-width:560px!important;
}

.hero-info-card h2{
    font-size:clamp(28px,2.5vw,40px)!important;
}

/* Limpieza: si ya no hay reproductor grande dentro del hero, evita espacios raros */
.hero-info-card .radio-player{
    display:none!important;
}

@media(max-width:1260px){
    .topbar{
        align-items:flex-start!important;
        flex-wrap:wrap!important;
    }

    .topbar-right{
        width:100%!important;
        justify-content:space-between!important;
        flex-wrap:wrap!important;
    }

    .header-player{
        order:2!important;
        max-width:420px!important;
    }

    .nav{
        order:1!important;
    }
}

@media(max-width:1100px){
    .hero{
        grid-template-columns:1fr!important;
    }

    .hero-side-layout{
        grid-template-columns:minmax(180px,300px) minmax(0,1fr)!important;
    }

    .hero-info-card{
        max-width:100%!important;
    }
}

@media(max-width:760px){
    .topbar{
        padding:14px 18px!important;
    }

    .topbar-right{
        flex-direction:column!important;
        align-items:stretch!important;
        gap:12px!important;
    }

    .header-player{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
    }

    .header-audio{
        width:100%!important;
        min-width:0!important;
    }

    .nav{
        width:100%!important;
        overflow-x:auto!important;
        flex-wrap:nowrap!important;
    }

    .brand-text{
        font-size:25px!important;
    }

    .site-logo{
        width:58px!important;
        height:58px!important;
    }

    .hero-side-layout{
        grid-template-columns:1fr!important;
        text-align:center!important;
        gap:22px!important;
    }

    .hero-text-side{
        align-items:center!important;
        text-align:center!important;
    }

    .hero-logo{
        max-width:260px!important;
        margin:0 auto!important;
    }

    .hero h1,
    .hero-copy h1,
    .hero p,
    .hero-subtitle{
        text-align:center!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    .hero-actions{
        justify-content:center!important;
    }
}


/* =====================================================
   AJUSTE SOLICITADO V13 - PLAYER ARRIBA + HERO LADO A LADO
   ===================================================== */
.topbar-v13{
    display:grid!important;
    grid-template-columns:auto minmax(300px,460px) auto!important;
    align-items:center!important;
    gap:24px!important;
}

.header-player-highlight{
    justify-self:center!important;
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    padding:10px 14px!important;
    border-radius:18px!important;
    border:1px solid rgba(0,255,136,.34)!important;
    background:linear-gradient(135deg,rgba(15,22,34,.95),rgba(24,32,50,.98))!important;
    box-shadow:0 12px 36px rgba(0,0,0,.28),0 0 18px rgba(0,255,136,.10)!important;
}

.header-player-badge{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px 12px!important;
    border-radius:999px!important;
    background:rgba(0,255,136,.09)!important;
    border:1px solid rgba(0,255,136,.28)!important;
    flex:0 0 auto!important;
}

.header-audio{
    width:250px!important;
    height:42px!important;
}

.nav-top{
    justify-self:end!important;
}

.hero-focus{
    display:block!important;
    min-height:auto!important;
    padding-top:70px!important;
    padding-bottom:50px!important;
}

.hero-only-layout{
    display:grid!important;
    grid-template-columns:minmax(260px,420px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:48px!important;
    max-width:1280px!important;
    margin:0 auto!important;
}

.hero-logo{
    max-width:380px!important;
    margin:0 auto!important;
}

.hero-text-main{
    align-items:flex-start!important;
    text-align:left!important;
}

.hero-text-main h1{
    margin-top:18px!important;
    margin-bottom:20px!important;
    font-size:clamp(54px,6vw,108px)!important;
    max-width:780px!important;
}

.hero-text-main p{
    max-width:640px!important;
}

.hero-mini-help{
    margin:18px 0 0!important;
    color:#cbd7ff!important;
    font-size:17px!important;
    line-height:1.45!important;
}

.hero-mini-help a{
    color:#00ff88!important;
    font-weight:900!important;
    text-decoration:none!important;
}

@media(max-width:1240px){
    .topbar-v13{
        grid-template-columns:1fr!important;
        justify-items:start!important;
    }

    .header-player-highlight{
        justify-self:start!important;
    }

    .nav-top{
        justify-self:start!important;
    }
}

@media(max-width:760px){
    .header-player-highlight{
        width:100%!important;
        max-width:none!important;
        flex-direction:column!important;
        align-items:stretch!important;
        gap:10px!important;
    }

    .header-player-badge{
        width:max-content!important;
    }

    .header-audio{
        width:100%!important;
        height:40px!important;
    }

    .hero-only-layout{
        grid-template-columns:1fr!important;
        gap:24px!important;
    }

    .hero-text-main{
        align-items:center!important;
        text-align:center!important;
    }

    .hero-text-main h1,
    .hero-text-main p{
        text-align:center!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    .hero-actions{
        justify-content:center!important;
    }

    .hero-logo{
        max-width:260px!important;
    }
}


/* ==================================================
   Crédito oficial del proyecto
   ================================================== */
.jberges-credit,
.sidebar .jberges-credit{
    margin-top:22px;
    padding:12px 14px;
    border-top:1px solid rgba(255,255,255,.10);
    color:#00ff88;
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
    text-align:center;
}
.public-jberges-credit{
    width:100%;
    padding:18px 12px;
    text-align:center;
    color:#00ff88;
    background:#05070d;
    border-top:1px solid rgba(255,255,255,.10);
    font-weight:900;
}


/* =====================================================
   FIX RESPONSIVE 100% - VISTA COMO 75%
   Ajuste creado y diseñado por @jberges
   ===================================================== */
@media (min-width: 981px){
    body{
        overflow-x:hidden !important;
    }

    main{
        width:100% !important;
        max-width:none !important;
    }

    .topbar,
    .topbar-v13{
        min-height:76px !important;
        padding:10px clamp(24px, 4vw, 72px) !important;
        display:grid !important;
        grid-template-columns:minmax(280px, 1fr) minmax(255px, 330px) minmax(430px, auto) !important;
        align-items:center !important;
        gap:18px !important;
        overflow:hidden !important;
    }

    .brand-with-logo{
        min-width:0 !important;
        gap:12px !important;
        overflow:hidden !important;
    }

    .site-logo{
        width:56px !important;
        height:56px !important;
        min-width:56px !important;
        border-radius:13px !important;
    }

    .brand-text{
        font-size:clamp(24px, 2.15vw, 36px) !important;
        line-height:1 !important;
        max-width:100% !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .header-player,
    .header-player-highlight{
        width:100% !important;
        min-width:0 !important;
        max-width:330px !important;
        padding:7px 9px !important;
        gap:9px !important;
        justify-self:center !important;
        border-radius:18px !important;
    }

    .header-player-badge{
        padding:7px 10px !important;
        gap:7px !important;
        flex:0 0 auto !important;
    }

    .header-live-dot{
        width:9px !important;
        height:9px !important;
        min-width:9px !important;
    }

    .header-player-title{
        font-size:13px !important;
    }

    .header-audio{
        width:190px !important;
        height:34px !important;
        min-width:0 !important;
    }

    .nav,
    .nav-top{
        justify-self:end !important;
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:6px !important;
        min-width:0 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
    }

    .nav a{
        font-size:15px !important;
        padding:8px 9px !important;
        line-height:1 !important;
        white-space:nowrap !important;
    }

    .hero,
    .hero-focus{
        min-height:620px !important;
        padding:54px clamp(24px, 5vw, 90px) 42px !important;
    }

    .hero-only-layout{
        width:100% !important;
        max-width:1180px !important;
        grid-template-columns:minmax(260px, 360px) minmax(0, 1fr) !important;
        gap:46px !important;
    }

    .hero-logo{
        max-width:300px !important;
        width:100% !important;
    }

    .hero-text-main h1,
    .hero h1,
    .hero-copy h1{
        font-size:clamp(52px, 5vw, 84px) !important;
        line-height:.98 !important;
        max-width:690px !important;
        margin:18px 0 18px !important;
        letter-spacing:-.045em !important;
    }

    .hero-text-main p,
    .hero-subtitle,
    .hero p{
        font-size:clamp(22px, 2vw, 30px) !important;
        line-height:1.25 !important;
        max-width:620px !important;
        margin-bottom:22px !important;
    }

    .hero-actions .btn,
    .btn{
        min-height:48px !important;
        padding:13px 24px !important;
        font-size:16px !important;
    }

    .hero-mini-help{
        font-size:15px !important;
        margin-top:8px !important;
    }

    #chatWidget.radio-live-chat,
    .radio-live-chat{
        width:340px !important;
        right:18px !important;
        bottom:18px !important;
        max-width:calc(100vw - 36px) !important;
    }

    .radio-chat-window{
        max-height:560px !important;
    }

    .radio-chat-head{
        padding:13px 14px !important;
    }

    .radio-chat-box{
        max-height:220px !important;
    }

    .radio-chat-launcher{
        min-height:50px !important;
        padding:12px 16px !important;
    }

    .radio-chat-launch-title{
        font-size:16px !important;
    }
}

@media (min-width: 981px) and (max-width: 1320px){
    .topbar,
    .topbar-v13{
        grid-template-columns:1fr !important;
        justify-items:start !important;
        align-items:start !important;
        overflow:visible !important;
    }

    .header-player,
    .header-player-highlight{
        justify-self:start !important;
    }

    .nav,
    .nav-top{
        justify-self:start !important;
        overflow-x:auto !important;
        max-width:100% !important;
    }

    .hero-only-layout{
        max-width:980px !important;
        grid-template-columns:minmax(210px, 300px) minmax(0, 1fr) !important;
        gap:34px !important;
    }

    .hero-logo{
        max-width:260px !important;
    }

    .hero-text-main h1,
    .hero h1,
    .hero-copy h1{
        font-size:clamp(44px, 6vw, 72px) !important;
    }
}

@media (max-width: 980px){
    .topbar,
    .topbar-v13{
        padding:14px 18px !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .brand-text{
        font-size:clamp(22px, 8vw, 32px) !important;
        white-space:normal !important;
    }

    .header-player,
    .header-player-highlight{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
    }

    .nav,
    .nav-top{
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        flex-wrap:nowrap !important;
        justify-content:flex-start !important;
    }

    .hero,
    .hero-focus{
        padding-top:44px !important;
        min-height:auto !important;
    }
}

/* =========================================================
   FIX FINAL VISTA 100% + PANEL RADIO - @jberges
   Corrige pantalla descuadrada en zoom normal.
   ========================================================= */
body{
    overflow-x:hidden !important;
}

.topbar.topbar-v13,
.topbar{
    min-height:82px !important;
    padding:12px clamp(28px, 5vw, 96px) !important;
    display:grid !important;
    grid-template-columns:minmax(280px, 1fr) minmax(245px, 320px) minmax(440px, auto) !important;
    align-items:center !important;
    gap:22px !important;
    overflow:visible !important;
}

.brand-with-logo,
.brand{
    min-width:0 !important;
    gap:12px !important;
}

.site-logo{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    padding:4px !important;
}

.brand-text{
    font-size:clamp(24px, 2.35vw, 38px) !important;
    line-height:1 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.header-player.header-player-highlight,
.header-player{
    width:100% !important;
    max-width:320px !important;
    min-width:0 !important;
    padding:7px 9px !important;
    gap:8px !important;
    justify-self:center !important;
}

.header-player-badge{
    padding:7px 9px !important;
    gap:7px !important;
    flex:0 0 auto !important;
}

.header-player-title{
    font-size:13px !important;
}

.header-audio{
    width:180px !important;
    height:34px !important;
    min-width:0 !important;
}

.nav.nav-top,
.nav{
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    white-space:nowrap !important;
    min-width:0 !important;
    overflow:visible !important;
}

.nav a{
    font-size:16px !important;
    line-height:1 !important;
    padding:9px 10px !important;
    white-space:nowrap !important;
}

.hero.hero-focus,
.hero{
    min-height:610px !important;
    padding:46px clamp(28px, 6vw, 110px) 42px !important;
}

.hero-only-layout,
.hero-side-layout{
    width:100% !important;
    max-width:1160px !important;
    margin:auto !important;
    display:grid !important;
    grid-template-columns:minmax(230px, 340px) minmax(0, 1fr) !important;
    align-items:center !important;
    gap:48px !important;
}

.hero-logo{
    max-width:300px !important;
    width:100% !important;
    height:auto !important;
}

.hero-text-main h1,
.hero h1,
.hero-copy h1{
    font-size:clamp(50px, 5vw, 82px) !important;
    line-height:.98 !important;
    max-width:700px !important;
    margin:18px 0 18px !important;
    letter-spacing:-.045em !important;
}

.hero-text-main p,
.hero-subtitle,
.hero p{
    font-size:clamp(20px, 1.85vw, 28px) !important;
    line-height:1.25 !important;
    max-width:620px !important;
    margin-bottom:20px !important;
}

.hero-actions .btn,
.btn{
    min-height:48px !important;
    padding:13px 24px !important;
    font-size:16px !important;
}

#chatWidget.radio-live-chat,
.radio-live-chat{
    width:330px !important;
    right:18px !important;
    bottom:18px !important;
    max-width:calc(100vw - 36px) !important;
}

.radio-chat-window{
    max-height:540px !important;
}

.radio-chat-box{
    max-height:205px !important;
}

.admin-layout{
    min-height:100vh !important;
}

.sidebar{
    width:280px !important;
    min-width:280px !important;
}

.main{
    padding:32px !important;
    min-width:0 !important;
}

.jberges-credit{
    color:#00ff88 !important;
    font-weight:950 !important;
    text-align:center !important;
    margin-top:28px !important;
    padding-top:18px !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
}

@media (max-width: 1420px){
    .topbar.topbar-v13,
    .topbar{
        grid-template-columns:minmax(240px, 1fr) minmax(235px, 300px) minmax(380px, auto) !important;
        gap:16px !important;
        padding-left:34px !important;
        padding-right:34px !important;
    }

    .brand-text{
        font-size:clamp(22px, 2.2vw, 34px) !important;
    }

    .nav a{
        font-size:15px !important;
        padding:8px 8px !important;
    }

    .hero-only-layout,
    .hero-side-layout{
        max-width:1040px !important;
        grid-template-columns:minmax(210px, 310px) minmax(0, 1fr) !important;
        gap:38px !important;
    }

    .hero-text-main h1,
    .hero h1,
    .hero-copy h1{
        font-size:clamp(46px, 5.6vw, 72px) !important;
    }

    .hero-logo{
        max-width:270px !important;
    }
}

@media (max-width: 1160px){
    .topbar.topbar-v13,
    .topbar{
        grid-template-columns:1fr !important;
        justify-items:start !important;
        align-items:start !important;
        overflow:visible !important;
        gap:12px !important;
    }

    .header-player.header-player-highlight,
    .header-player{
        justify-self:start !important;
        max-width:360px !important;
    }

    .nav.nav-top,
    .nav{
        justify-self:start !important;
        max-width:100% !important;
        overflow-x:auto !important;
        flex-wrap:nowrap !important;
        padding-bottom:4px !important;
    }
}

@media (max-width: 980px){
    .topbar.topbar-v13,
    .topbar{
        padding:14px 18px !important;
    }

    .brand-text{
        font-size:clamp(22px, 8vw, 32px) !important;
        white-space:normal !important;
    }

    .header-player.header-player-highlight,
    .header-player{
        width:100% !important;
        max-width:none !important;
    }

    .header-audio{
        width:100% !important;
    }

    .hero.hero-focus,
    .hero{
        padding:42px 18px 36px !important;
        min-height:auto !important;
    }

    .hero-only-layout,
    .hero-side-layout{
        grid-template-columns:1fr !important;
        text-align:center !important;
        gap:20px !important;
    }

    .hero-logo{
        margin:auto !important;
        max-width:240px !important;
    }

    .hero-actions{
        justify-content:center !important;
    }

    .sidebar{
        width:100% !important;
        min-width:0 !important;
    }

    .main{
        padding:18px !important;
    }
}


/* =========================
   FIX ADMIN VISTA 100% - @jberges
   ========================= */
.admin-layout{
    grid-template-columns:240px minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}
.main{
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    padding:24px !important;
}
.sidebar{
    width:240px !important;
    min-width:240px !important;
    padding:22px 18px !important;
}
.sidebar a{
    font-size:15px !important;
    padding:10px 9px !important;
}
@media(max-width:860px){
    .admin-layout{grid-template-columns:1fr !important;}
    .sidebar{position:relative !important;width:100% !important;min-width:0 !important;height:auto !important;}
    .main{padding:18px !important;}
}