/* ── LU1QA Radio Club San Luis — Tema WebSDR ── */
/* Refactor 2026-04-26: solo reglas efectivas. JS (vumeter.js) maneja: hide Settings, filter modos, background, header stats. */

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
    --lu-bg:      #0F1C0F;
    --lu-panel:   #18261a;
    --lu-border:  #2a3a2a;
    --lu-orange:  #FF5C1A;
    --lu-yellow:  #FFD200;
    --lu-blue:    #1A7AFF;
    --lu-text:    #d8ecd8;
    --lu-mono:    'Share Tech Mono', monospace;
    --lu-sans:    'DM Sans', sans-serif;
    --lu-head:    'Bricolage Grotesque', sans-serif;
}

/* ============================================================
   2. OCULTAMIENTOS BASE (header original, paneles innecesarios)
   ============================================================ */
#openwebrx-bookmarks-container,
.openwebrx-bandplan-container,
#openwebrx-chat-inputs,
#openwebrx-messages,
.openwebrx-message-panel:not(#openwebrx-panel-packet-message),
.openwebrx-meta-panel,
#openwebrx-panel-digimodes {
    display: none !important;
}

/* Sección Ajustes: 3 checkboxes (frame, wheel-swap, bandplan) visibles.
   Ocultamos solo los dropdowns de temas que no aplican al setup LU1QA. */
.openwebrx-panel-line:has(#openwebrx-themes-listbox),
.openwebrx-panel-line:has(#openwebrx-wf-themes-listbox) {
    display: none !important;
}

/* ============================================================
   3. FONDO GLOBAL
   ============================================================ */
body, html {
    background-color: var(--lu-bg) !important;
    background-image: url("/static/gfx/LaSerrana.png") !important;
    background-size: cover !important;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    font-family: var(--lu-sans) !important;
    color: var(--lu-text) !important;
    margin: 0;
}
#webrx-page-container {
    background-color: transparent !important;
    background-image: none !important;
}

/* ============================================================
   4. HEADER CUSTOM LU1QA
   ============================================================ */
#lu1qa-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 18px;
    background: #111d11;
    border-bottom: 3px solid var(--lu-orange);
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
#lu1qa-header img {
    height: 60px;
    width: 60px;
    object-fit: contain;
    flex-shrink: 0;
}
#lu1qa-header .lu-title { display: flex; flex-direction: column; gap: 2px; }
#lu1qa-header .lu-callsign {
    font-family: var(--lu-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--lu-yellow);
    line-height: 1;
    letter-spacing: 3px;
}
#lu1qa-header .lu-name {
    font-family: var(--lu-sans);
    font-size: 0.78rem;
    color: var(--lu-text);
    opacity: 0.75;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
#lu1qa-header .lu-info {
    margin-left: auto;
    text-align: right;
    font-family: var(--lu-mono);
    font-size: 0.78rem;
    color: var(--lu-orange);
    line-height: 1.6;
}

/* ============================================================
   5. PANELES (estilo, frecuencia, botones, barras)
   ============================================================ */
.openwebrx-panel {
    background: var(--lu-panel) !important;
    border: 1px solid var(--lu-border) !important;
    color: var(--lu-text) !important;
    font-family: var(--lu-sans) !important;
    border-radius: 6px !important;
}
.openwebrx-panel label,
.openwebrx-panel span { color: var(--lu-text) !important; }

.openwebrx-panel select,
.openwebrx-panel input[type="text"],
.openwebrx-panel input[type="number"] {
    background: #0a150a !important;
    color: var(--lu-text) !important;
    border: 1px solid var(--lu-border) !important;
    font-family: var(--lu-mono) !important;
}

.webrx-actual-freq {
    font-family: var(--lu-mono) !important;
    color: var(--lu-yellow) !important;
    font-size: 1.1rem !important;
}

.openwebrx-button,
.openwebrx-demodulator-button {
    background: #1e2e1e !important;
    color: var(--lu-text) !important;
    border: 1px solid var(--lu-border) !important;
}
.openwebrx-button.highlighted,
.openwebrx-demodulator-button.highlighted {
    background: var(--lu-orange) !important;
    color: #fff !important;
    border-color: var(--lu-orange) !important;
}

.openwebrx-progressbar {
    background: #1e2e1e !important;
    border: 1px solid var(--lu-border) !important;
    color: var(--lu-text) !important;
}
.openwebrx-progressbar-bar { background: var(--lu-orange) !important; }

#openwebrx-panel-packet-message {
    border-color: var(--lu-blue) !important;
}

/* ============================================================
   6. MENSAJE RECEPTOR NO DISPONIBLE
   ============================================================ */
.webrx-rx-unavailable {
    background: var(--lu-panel) !important;
    color: var(--lu-text) !important;
    border: 2px solid var(--lu-orange) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    font-family: var(--lu-mono) !important;
}

/* ============================================================
   6.b. SECCIONES COLAPSABLES (UI.toggleSection)
   ============================================================ */
.openwebrx-section.closed { display: none !important; }
.openwebrx-section-divider { cursor: pointer; }

/* ============================================================
   6.c. TUNE PRECISE — chevrons progresivos
   Plugin tune_precise muestra 6 botones: 3 hacia menos, 3 hacia mas.
   Paso fino al medio, grande en extremos. Color resalta extremos.
   ============================================================ */
#id-step-freq {
    justify-content: center !important;
    gap: 8px !important;
}
.tune-precise-step {
    cursor: pointer;
    border: 1px solid var(--lu-border);
    background: var(--lu-panel);
    color: var(--lu-text);
    border-radius: 3px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.tune-precise-step svg,
.tune-precise-step > svg,
.tune-precise-step * {
    display: none !important;
}
.tune-precise-step::after { font-family: var(--lu-mono); display: inline !important; }
.tune-precise-step:nth-child(1)::after { content: "◀◀◀"; font-size: 1.1rem; color: var(--lu-orange); letter-spacing: -2px; }
.tune-precise-step:nth-child(2)::after { content: "◀◀";  font-size: 1rem;   color: var(--lu-yellow); letter-spacing: -2px; }
.tune-precise-step:nth-child(3)::after { content: "◀";   font-size: 0.9rem; color: var(--lu-text); }
.tune-precise-step:nth-child(4)::after { content: "▶";   font-size: 0.9rem; color: var(--lu-text); }
.tune-precise-step:nth-child(5)::after { content: "▶▶";  font-size: 1rem;   color: var(--lu-yellow); letter-spacing: -2px; }
.tune-precise-step:nth-child(6)::after { content: "▶▶▶"; font-size: 1.1rem; color: var(--lu-orange); letter-spacing: -2px; }
.tune-precise-step:hover { background: var(--lu-border); }

/* ============================================================
   7. MODOS PERMITIDOS — solo nfm, am, lsb, cw, usbd (DATA)
   ============================================================ */
.openwebrx-demodulator-button:not([data-modulation="lsb"], [data-modulation="nfm"], [data-modulation="am"], [data-modulation="cw"]) {
    display: none !important;
}
/* DATA (usbd) ahora se accede via select Digital → setea usbd automaticamente */
.openwebrx-demodulator-button[data-modulation="usbd"] { display: none !important; }
.openwebrx-button-dig,
.openwebrx-button-hdr,
#openwebrx-digimode-select-channel {
    display: none !important;
}

/* Select Digital — reemplaza al boton DIG, lista filtrada de decoders 40m */
.openwebrx-secondary-demod-listbox {
    display: inline-block !important;
    width: 100% !important;
    background: var(--lu-panel) !important;
    color: var(--lu-yellow) !important;
    border: 1px solid var(--lu-border) !important;
    font-family: var(--lu-mono) !important;
    font-size: 0.75rem !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    letter-spacing: 1px !important;
}
.openwebrx-secondary-demod-listbox:hover {
    border-color: var(--lu-orange) !important;
}