/* =================================================
   RESET
================================================= */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
    background:#0b1020;
    color:#e5e7eb;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* =================================================
   NAVBAR
================================================= */
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 24px;
    background:#0e162f;
    border-bottom:1px solid #1f2a4a;
}

.navbar-brand{
    display:flex;
    align-items:center;
    gap:20px;
    text-decoration:none;
    color:#e5e7eb;
}

.navbar-brand img{
    height:85px;
    width:auto;
}

/* BRAND TEXT */
.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

/* RED C4FM SPAIN */
.brand-title{
    display:flex;
    gap:6px;
    font-size:17px;
    font-weight:800;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.brand-ea{color:#60a5fa;}
.brand-c4fm{color:#67e8f9;}
.brand-spain{color:#c4b5fd;}

/* REFLECTOR ID + NAME */
.brand-reflector{
    display:flex;
    align-items:center;
    gap:12px; /* separación REAL */
    font-size:12px;
    font-weight:600;
    margin-top:2px;
}

.ref-id{
    color:#22d3ee;
}

.ref-name{
    color:#a855f7;
}

/* SUBTITLE */
.brand-subtitle{
    font-size:11px;
    color:#9aa4c7;
    margin-top:2px;
    letter-spacing:.8px;
}

/* RIGHT LOGO */
.side-logo img{
    height:85px;
    width:auto;
    opacity:.85;
    filter:drop-shadow(0 0 10px rgba(0,0,0,.5));
}

@media(max-width:768px){
    .side-logo{display:none;}
}

/* =================================================
   SUB NAV
================================================= */
.sub-navbar{
    background:#0e162f;
    border-bottom:1px solid #1f2a4a;
}

.navbar-nav{
    display:flex;
    gap:18px;
    list-style:none;
    padding:10px 24px;
}

.nav-link{
    text-decoration:none;
    color:#9aa4c7;
    font-size:13px;
    font-weight:600;
    padding:6px 12px;
    border-radius:6px;
    transition:.2s;
}

.nav-link:hover{
    background:#16224d;
    color:#fff;
}

.nav-link.active{
    background:#1e3a8a;
    color:#fff;
}

/* =================================================
   ON AIR
================================================= */
.on-air{
    margin:20px auto;
    padding:14px 22px;
    max-width:460px;
    background:#b00020;
    color:#fff;
    border-radius:12px;
    text-align:center;
    font-size:20px;
    font-weight:800;
    letter-spacing:2px;
    box-shadow:0 0 18px rgba(255,0,0,.6);
    animation:pulse 1.5s infinite;
}

.on-air-dot{
    display:inline-block;
    width:12px;
    height:12px;
    background:#ff3b3b;
    border-radius:50%;
    margin-right:8px;
}

.on-air-calls{
    margin-top:6px;
    font-size:14px;
    font-weight:500;
}

@keyframes pulse{
    0%{box-shadow:0 0 8px rgba(255,0,0,.4);}
    50%{box-shadow:0 0 22px rgba(255,0,0,.9);}
    100%{box-shadow:0 0 8px rgba(255,0,0,.4);}
}

/* =================================================
   STATS
================================================= */
.stats{
    display:flex;
    gap:16px;
    padding:20px;
    flex-wrap:wrap;
}

.stat{
    background:#0e162f;
    border:1px solid #1f2a4a;
    border-radius:12px;
    padding:14px 22px;
    min-width:160px;
}

.stat .num{
    font-size:26px;
    font-weight:800;
}

.stat .lbl{
    font-size:12px;
    color:#9aa4c7;
    margin-top:4px;
    text-transform:uppercase;
}

/* =================================================
   TABLE
================================================= */
table{
    width:calc(100% - 40px);
    margin:0 20px 30px;
    border-collapse:collapse;
    background:#0e162f;
    border:1px solid #1f2a4a;
    border-radius:12px;
    overflow:hidden;
}

thead{background:#101b3a;}

th{
    padding:12px 10px;
    font-size:11px;
    color:#9aa4c7;
    text-transform:uppercase;
    letter-spacing:1px;
    text-align:left;
}

td{
    padding:10px;
    border-top:1px solid #1f2a4a;
    font-size:14px;
}

tbody tr:hover{
    background:#16224d;
}

/* STATUS */
.status-tx td{color:#ef4444;font-weight:800;}
.status-tc td{color:#60a5fa;}
.status-wd td{color:#facc15;}
.status-to td{color:#ef4444;}

/* FLAGS */
td img{
    width:22px;
    height:16px;
    margin-right:6px;
    border-radius:3px;
}

/* =================================================
   APRS CORRECTO
================================================= */
.aprs-svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
}

.aprs-on{
    color:#22c55e;
    filter:drop-shadow(0 0 6px rgba(34,197,94,.6));
}

.aprs-off{
    color:#ef4444;
    opacity:.75;
}

/* =================================================
   RADIO
================================================= */
.radio-block{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
}

.radio-svg{
    width:18px;
    height:18px;
}

.radio-label{
    font-weight:700;
    font-size:11px;
    text-transform:uppercase;
}

.radio-model{
    font-size:11px;
    color:#9aa4c7;
}

.radio-handheld{color:#22c55e;}
.radio-mobile{color:#3b82f6;}
.radio-base{color:#facc15;}
.radio-app{color:#ec4899;}
.radio-bridge{color:#a855f7;}
.radio-gateway{color:#22d3ee;}
.radio-unknown{color:#9aa4c7;}


/* =========================
   FOOTER PRO FINAL
========================= */

.footer-pro{
    margin-top:50px;
    padding:30px 20px;
    border-top:1px solid #1f2a4a;   /* igual que navbar */
    text-align:center;
    background:#0e162f;             /* MISMO COLOR QUE NAVBAR */
    font-size:.9rem;
}

.footer-info{
    margin-bottom:18px;
}

.footer-line{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 18px;
    margin-bottom:10px;
}

.footer-label{
    opacity:.6;
    font-weight:500;
}

.footer-value{
    font-weight:600;
}

.footer-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:20px 0;
}

.btn-footer{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:12px;
    font-size:.85rem;
    text-decoration:none;
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid rgba(255,255,255,.1);
    transition:.25s ease;
}

.btn-footer svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

.btn-footer:hover{
    background:rgba(255,255,255,.18);
    transform:translateY(-2px);
}

.footer-branding{
    margin-top:18px;
    font-size:.85rem;
    opacity:.7;
}

.footer-brand{
    font-weight:600;
    color:#22d3ee;
}

.footer-sep{
    margin:0 6px;
    opacity:.5;
}




/* =========================
   FOOTER BUTTON COLORS PRO
========================= */

.btn-footer{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:12px;
    font-size:.85rem;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    transition:.25s ease;
}

/* WEB */
.btn-footer.web{
    background:linear-gradient(135deg,#0ea5e9,#22d3ee);
}

.btn-footer.web:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(34,211,238,.4);
}

/* CONTACTO */
.btn-footer.contact{
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
}

.btn-footer.contact:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(251,191,36,.4);
}

/* TELEGRAM */
.btn-footer.telegram{
    background:linear-gradient(135deg,#3b82f6,#1d4ed8);
}

.btn-footer.telegram:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(59,130,246,.4);
}






/* DGID FIX */
.dgid-id{
    font-weight:700;
    color:#22d3ee;
    margin-right:6px;   /* separación REAL */
}

.dgid-name{
    color:#a855f7;
}




/* ===============================
   PAGE HEADER (TÍTULO + BADGE)
================================ */
.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 22px 10px;
    gap:12px;
}

.page-title{
    font-size:22px;
    font-weight:800;
    letter-spacing:.5px;
}

/* Badge tipo globito */
.live-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(34,197,94,.12);
    border:1px solid rgba(34,197,94,.45);
    color:#22c55e;
    font-size:14px;
    font-weight:700;
}

.live-dot{
    width:10px;
    height:10px;
    background:#22c55e;
    border-radius:50%;
    box-shadow:0 0 8px rgba(34,197,94,.7);
}




/* ===============================
   PING BADGE
================================ */
.ping-badge{
    padding:4px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
}

.ping-ok{
    background:rgba(34,197,94,.15);
    color:#22c55e;
}

.ping-warn{
    background:rgba(250,204,21,.15);
    color:#facc15;
}

.ping-bad{
    background:rgba(239,68,68,.15);
    color:#ef4444;
}

/* ===============================
   STATUS BADGE
================================ */
.status-badge{
    padding:4px 10px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
}

.status-badge.status-tx{
    background:rgba(239,68,68,.15);
    color:#ef4444;
}

.status-badge.status-tc{
    background:rgba(96,165,250,.15);
    color:#60a5fa;
}







/* =================================================
   SYSOP DASHBOARD PRO
================================================= */

.sysop-container{
    max-width:1200px;
    margin:30px auto;
    padding:0 20px;
}

/* CARDS RESUMEN */
.sysop-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin-bottom:30px;
}

.sysop-card{
    background:#0e162f;
    border:1px solid #1f2a4a;
    border-radius:14px;
    padding:20px;
    text-align:center;
    transition:.3s;
}

.sysop-card:hover{
    transform:translateY(-4px);
    background:#121c3a;
}

.sysop-card h3{
    font-size:14px;
    color:#9aa4c7;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.sysop-card .value{
    font-size:28px;
    font-weight:800;
}

/* ZONAS */
.sysop-section{
    background:#0e162f;
    border:1px solid #1f2a4a;
    border-radius:14px;
    padding:20px;
    margin-bottom:30px;
}

.sysop-section h2{
    font-size:18px;
    margin-bottom:15px;
}

/* TEXTAREA */
.sysop-textarea{
    width:100%;
    height:260px;
    background:#0b1020;
    color:#e5e7eb;
    border:1px solid #1f2a4a;
    border-radius:10px;
    padding:12px;
    font-family:monospace;
    font-size:13px;
}

/* TABLAS SYSOP */
.sysop-table{
    width:100%;
    border-collapse:collapse;
}

.sysop-table th{
    font-size:11px;
    text-transform:uppercase;
    color:#9aa4c7;
    padding:10px;
    border-bottom:1px solid #1f2a4a;
    text-align:left;
}

.sysop-table td{
    padding:10px;
    border-bottom:1px solid #1f2a4a;
}

.sysop-table tr:hover{
    background:#16224d;
}

/* BOTONES */
.btn-danger{
    background:#7f1d1d;
    border:1px solid #ef4444;
}

.btn-danger:hover{
    background:#b91c1c;
}

.btn-success{
    background:#064e3b;
    border:1px solid #10b981;
}

.btn-success:hover{
    background:#065f46;
}


.row-tx-live td{
    animation: txblink 1s infinite;
}

.row-tx-live td{
    background: rgba(255,0,0,0.28) !important;
}

@keyframes txblink{
    0%{background: rgba(255,0,0,0.15);}
    50%{background: rgba(255,0,0,0.45);}
    100%{background: rgba(255,0,0,0.15);}
}


@keyframes pulse{
    0%{opacity:.3}
    50%{opacity:1}
    100%{opacity:.3}
}







.realtime-tx{
    background: rgba(255,0,0,0.18) !important;
    box-shadow: inset 4px 0 0 #ff2a2a;
    transition: background .25s linear;
}



.idle-indicator{
    margin:8px auto;
    width:max-content;
    padding:6px 14px;
    border-radius:12px;
    font-weight:600;
    font-size:13px;
    background:#1e3a5f;
    color:#bcdcff;
    opacity:.9;
    transition:opacity .4s ease;
}


.longtx-warning{
    margin:6px auto;
    width:max-content;
    padding:6px 14px;
    border-radius:10px;
    font-weight:700;
    font-size:13px;
    background:#5c1b1b;
    color:#ffb3b3;
    animation: longtxblink 1s infinite;
}

@keyframes longtxblink{
    0%{opacity:1}
    50%{opacity:.4}
    100%{opacity:1}
}



/* ===== S-METER ===== */
.smeter{
    width:240px;
    height:10px;
    margin:6px auto;
    background:#111;
    border-radius:6px;
    overflow:hidden;
    box-shadow: inset 0 0 6px rgba(0,0,0,.8);
}

.smeter-bar{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,#2ecc71,#f1c40f,#e67e22,#e74c3c);
    transition:width .18s linear;
}


.last-heard{
    position:fixed;
    right:14px;
    bottom:14px;
    width:160px;
    background:rgba(20,20,20,.85);
    border-radius:10px;
    padding:10px;
    font-size:13px;
    box-shadow:0 0 10px rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
}

.lh-title{
    font-weight:700;
    margin-bottom:6px;
    color:#9fd3ff;
    text-align:center;
}

.lh-item{
    display:flex;
    justify-content:space-between;
    font-family:monospace;
    padding:2px 0;
}






.turn-change{
    position:fixed;
    left:50%;
    top:110px;
    transform:translateX(-50%);
    background:rgba(40,40,40,.9);
    padding:8px 18px;
    border-radius:12px;
    font-weight:700;
    color:#ffd27f;
    box-shadow:0 0 10px rgba(0,0,0,.5);
    backdrop-filter:blur(6px);
    animation:turnfade .25s ease;
}

@keyframes turnfade{
    from{opacity:0; transform:translate(-50%,-8px);}
    to{opacity:1; transform:translate(-50%,0);}
}


.call-filter{
    width:100%;
    text-align:center;
    margin:10px 0;
}

#call-search{
    width:220px;
    padding:6px 10px;
    border-radius:8px;
    border:1px solid #444;
    background:#111;
    color:#eee;
    outline:none;
}

#call-search:focus{
    border-color:#5fa8ff;
    box-shadow:0 0 6px rgba(95,168,255,.5);
}