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

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    background: #0b1020;
    color: #e5e7eb;
}

/* =================================================
   NAVBAR (MAIN / LINKED / BLOCKED)
================================================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 22px;
    background: #0e162f;
    border-bottom: 1px solid #1f2a4a;
}

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

.navbar-brand img {
    height: 90px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
}

.brand-subtitle {
    font-size: 11px;
    color: #9aa4c7;
    letter-spacing: 1px;
}

.navbar-nav {
    display: flex;
    gap: 18px;
    list-style: none;
    margin-left: auto;   /* ?? ESTA ES LA CLAVE */
}

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

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

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




/* ===============================
   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: 0.5px;
}

/* Badge activos */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.4);
    color: #22c55e;
    font-size: 13px;
    font-weight: 700;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
}






/* =================================================
   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;
    margin-top: 4px;
    color: #9aa4c7;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* =================================================
   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;
    vertical-align: middle;
}

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

/* ===============================
   STATUS COLORS (PRO)
================================ */

/* TX - TRANSMITIENDO (ROJO) */
.status-tx {
    background: rgba(239,68,68,0.12);
}

.status-tx td {
    color: #ef4444;
    font-weight: 800;
}

/* Animación ON AIR */
.status-tx td:first-child,
.status-tx td:nth-child(2) {
    animation: tx-pulse 1.2s infinite;
}

@keyframes tx-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}

/* TC - CONECTADO (AZUL SUAVE) */
.status-tc td {
    color: #60a5fa;
}

/* WD - WARNING */
.status-wd td {
    color: #facc15;
}

/* TO - TIMEOUT */
.status-to td {
    color: #ef4444;
}

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

/* =================================================
   APRS ICON
================================================= */
.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: 0.75;
}

/* =================================================
   MOBILE
================================================= */
@media (max-width: 768px) {

    .navbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .navbar-nav {
        gap: 10px;
    }

    .stats {
        padding: 14px;
    }

    table {
        width: calc(100% - 20px);
        margin: 0 10px 20px;
    }

    td {
        font-size: 13px;
    }
}


/* ===============================
   RADIO COLUMN (PRO)
================================ */
.radio-block {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

/* SVG */
.radio-svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

/* LABEL + MODEL */
.radio-label {
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    opacity: .85;
}

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

/* ===============================
   RADIO TYPES COLORS
================================ */

/* Handheld */
.radio-handheld {
    color: #22c55e;
}

/* Mobile */
.radio-mobile {
    color: #3b82f6;
}

/* Base */
.radio-base {
    color: #facc15;
}

/* App */
.radio-app {
    color: #ec4899;
}

/* Bridge */
.radio-bridge {
    color: #a855f7;
}

/* Gateway */
.radio-gateway {
    color: #22d3ee;
}

/* Unknown */
.radio-unknown {
    color: #9aa4c7;
}



/* =================================================
   MOBILE VIEW — TABLE TO CARDS (PRO)
================================================= */
@media (max-width: 768px) {

    table,
    thead,
    tbody,
    th,
    tr,
    td {
        display: block;
        width: 100%;
    }

    thead {
        display: none; /* ocultamos cabecera */
    }

    table {
        margin: 0;
        background: transparent;
        border: none;
    }

    tbody tr {
        background: #0e162f;
        border: 1px solid #1f2a4a;
        border-radius: 14px;
        margin: 12px 10px;
        padding: 12px;
        box-shadow: 0 0 0 1px rgba(255,255,255,0.03);
    }

    tbody tr:hover {
        background: #121c3a;
    }

    td {
        border: none;
        padding: 6px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
    }

    td::before {
        content: attr(data-label);
        font-size: 11px;
        color: #9aa4c7;
        text-transform: uppercase;
        letter-spacing: .8px;
        font-weight: 600;
    }

    /* Callsign destacado */
    td.callsign-cell {
        font-size: 15px;
        font-weight: 800;
        color: #22d3ee;
        justify-content: flex-start;
        gap: 8px;
    }

    td.callsign-cell::before {
        display: none;
    }

    /* Radio block más compacto */
    .radio-block {
        padding: 0;
        gap: 6px;
    }

    .radio-label {
        font-size: 10px;
    }

    .radio-model {
        font-size: 10px;
    }

    /* APRS centrado */
    td:last-child {
        justify-content: flex-end;
    }
}

/* =================================================
   FOOTER PRO
================================================= */
footer {
    margin-top: 40px;
    padding: 20px 18px;
    background: #0e162f;
    border-top: 1px solid #1f2a4a;
    text-align: center;
    font-size: 13px;
    color: #9aa4c7;
}

footer p {
    margin: 6px 0;
}

.tx-indicator {
    margin-top: 8px;
    font-weight: 700;
    color: #9aa4c7;
}

.tx-indicator.active {
    color: #22c55e;
    text-shadow: 0 0 6px rgba(34,197,94,.4);
}

/* Botones footer */
.footer-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.btn-footer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #16224d;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: .2s;
}

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

.btn-footer:hover {
    background: #1e3a8a;
}

/* Firma */
.footer-dev {
    margin-top: 12px;
    font-size: 11px;
    color: #7f89b6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.footer-svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
}

.footer-brand {
    font-weight: 700;
    color: #22d3ee;
}
/* =================================================
   LAYOUT FIX — FOOTER SIEMPRE ABAJO
================================================= */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

table {
    flex: 1;
}

footer {
    margin-top: auto;
}

/* ===============================
   ON AIR INDICATOR (BIG)
================================ */
.on-air {
    margin: 10px 20px 20px;
    padding: 16px 24px;
    border-radius: 14px;
    background: rgba(239,68,68,0.15);
    border: 2px solid #ef4444;
    color: #ef4444;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    animation: onAirPulse 1.2s infinite;
}

/* Punto animado */
.on-air-dot {
    width: 16px;
    height: 16px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(239,68,68,0.8);
}

/* Animación */
@keyframes onAirPulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.6; }
    100% { opacity: 1; }
}
.on-air {
    margin: 1rem auto;
    padding: 0.75rem 1.5rem;
    max-width: 420px;
    background: #b00020;
    color: #fff;
    font-family: 'Oxanium', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 0 18px rgba(255,0,0,.55);
    animation: pulse 1.5s infinite;
}

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

.on-air-calls {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.95;
    letter-spacing: 0.04em;
}

@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); }
}


.sysop-login, .sysop-add {
    max-width: 420px;
    margin: auto;
}

.sysop-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.sysop-table th, .sysop-table td {
    padding: 8px;
    border-bottom: 1px solid #444;
}

.btn-block   { background:#c0392b; color:#fff; }
.btn-unblock { background:#27ae60; color:#fff; }

input, select, button {
    padding: 6px;
    margin: 4px;
}


/* =================================================
   BOOTSTRAP TABLE HARD OVERRIDE (FIX REAL)
================================================= */

/* Celdas (bootstrap pinta AQUÍ) */
.table > :not(caption) > * > * {
    background-color: #0e162f !important;
    color: #e5e7eb !important;
    border-color: #1f2a4a !important;
}

/* Cabecera */
.table > thead > tr > th {
    background-color: #101b3a !important;
    color: #9aa4c7 !important;
    border-color: #1f2a4a !important;
}

/* Hover */
.table > tbody > tr:hover > * {
    background-color: #16224d !important;
}

/* Quitar zebra y estados bootstrap */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #0e162f !important;
}

/* Table dark anula */
.table-dark {
    --bs-table-bg: transparent !important;
    --bs-table-color: inherit !important;
    --bs-table-border-color: #1f2a4a !important;
}




/* =================================================
   BRAND EA C4FM — SOFT PRO COLORS
================================================= */

.brand-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    gap: 4px;
}

/* EA — AZUL SUAVE */
.brand-ea {
    color: #60a5fa; /* blue-400 */
}

/* C4FM — CIAN SUAVE */
.brand-c4fm {
    color: #67e8f9; /* cyan-300 */
}

/* SPAIN — VIOLETA SUAVE */
.brand-spain {
    color: #c4b5fd; /* violet-300 */
}

/* SUBTÍTULO NEUTRO */
.brand-subtitle {
    font-size: 11px;
    color: #9aa4c7;
    letter-spacing: 0.8px;
    opacity: 0.9;
}






/* ===============================
   BRAND REFLECTOR INFO (PRO)
================================ */

.brand-reflector {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    margin-bottom: 2px;
    color: #9aa4c7;
}

.ref-id {
    color: #22d3ee;           /* cian suave */
    margin-right: 6px;
}

.ref-name {
    color: #a855f7;           /* violeta suave */
}

/* Ajuste vertical general */
.brand-text {
    line-height: 1.15;
}

/* =================================================
   SIDE LOGO (RIGHT) — ALIGNED WITH NAVBAR
================================================= */
.side-logo {
    position: sticky;
    top: 14px;          /* misma altura que navbar */
    margin-left: auto;
    z-index: 50;
    opacity: 0.85;
    display: flex;
    align-items: center;
    height: 90px;
}

.side-logo img {
    max-height: 110px;    /* igual que logo principal */
    width: auto;
    filter: drop-shadow(0 0 10px rgba(0,0,0,.5));
}

/* ocultar en movil */
@media (max-width: 768px) {
    .side-logo {
        display: none;
    }
}