:root {
  /* tema SAGITARIO (padrão): cinzas neutros, como o console do DECEA */
  --bg: #3c4146;
  --panel: #2e3236;
  --panel2: #383d42;
  --line: #565d63;
  --text: #e4e8eb;
  --dim: #9aa4ab;
  --accent: #ffffff;
  --atc: #9cd3f0;
  --pilot: #ffd75e;
  --warn: #ff5c5c;
  --btn: #474d53;
  --btn-on: #5d666e;
}
body.theme-classico {
  --bg: #0b1410;
  --panel: #101c17;
  --panel2: #0d1813;
  --line: #1f3a2e;
  --text: #b8e6c9;
  --dim: #5f8a72;
  --accent: #39d98a;
  --atc: #6fd3ff;
  --pilot: #ffd75e;
  --warn: #ff5c5c;
  --btn: #0d1813;
  --btn-on: #0d1813;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.35 "Consolas", "DejaVu Sans Mono", monospace; }
#app { display: flex; height: 100vh; }
#scope-wrap { position: relative; flex: 1; min-width: 0; }
#scope { display: block; width: 100%; height: 100%; cursor: crosshair; }
#topbar { position: absolute; top: 0; left: 0; right: 0; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
#topbar label { color: var(--dim); }
#pos-label { color: var(--accent); font-weight: bold; }
#clock { margin-left: auto; color: var(--accent); }
#cursor-info { position: absolute; left: 10px; bottom: 8px; color: var(--dim); pointer-events: none; }
select, input, button { font: inherit; color: var(--text); background: var(--btn); border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.toggle.on { color: var(--accent); border-color: var(--accent); background: var(--btn-on); }
#side { width: 380px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); }
#side section { padding: 8px 10px; border-bottom: 1px solid var(--line); }
#side h2 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
#traffic-panel { max-height: 30vh; overflow: auto; }
#traffic-table { width: 100%; border-collapse: collapse; }
#traffic-table th { text-align: left; color: var(--dim); font-weight: normal; }
#traffic-table td, #traffic-table th { padding: 2px 4px; }
#traffic-table tr.sel td { background: var(--btn-on); color: #fff; }
#traffic-table tbody tr { cursor: pointer; }
#traffic-table tr.emerg td { color: var(--warn); }
#sel-title { color: #fff !important; font-size: 15px !important; }
#sel-info { color: var(--dim); margin-bottom: 8px; }
.cmd-grid { display: grid; grid-template-columns: 56px 90px 1fr; gap: 5px 6px; align-items: center; }
.cmd-grid input { width: 100%; }
.btns { display: flex; gap: 4px; }
.btns button { flex: 1; padding: 3px 2px; }
#free-form { display: flex; gap: 6px; margin-top: 8px; }
#free-form input { flex: 1; }
#log-panel { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
#log { flex: 1; overflow: auto; }
.log-row { padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.log-row .t { color: var(--dim); }
.log-row.atc { color: var(--atc); }
.log-row.pilot { color: var(--pilot); }
.log-row.system { color: var(--dim); font-style: italic; }
.hidden { display: none !important; }
.overlay { position: fixed; inset: 0; background: rgba(20, 22, 24, .92); display: flex; align-items: center; justify-content: center; padding: 16px; }
#login-form { width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
#login-form h1 { margin: 0; color: var(--accent); font-size: 18px; }
#login-form p { margin: 0 0 4px; color: var(--dim); }
#login-form label { display: flex; flex-direction: column; gap: 3px; color: var(--dim); }
#login-form button { padding: 8px; color: var(--accent); border-color: var(--accent); }
#login-error { color: var(--warn); min-height: 1em; }
@media (max-width: 800px) {
  #app { flex-direction: column; }
  #scope-wrap { height: 55vh; flex: none; }
  #side { width: 100%; flex: 1; overflow: auto; }
}

#login-form { width: 420px; }
#st-select { width: 100%; }
#btn-ptt { min-width: 70px; font-weight: bold; }
#btn-ptt.tx { background: #6b1d1d; border-color: var(--warn); color: #fff; }
#radio-status { color: var(--dim); }
#radio-status.rx { color: var(--pilot); }
#traffic-table tr.offfreq td { color: var(--dim); }
[hidden] { display: none !important; }

#metar-bar { flex-basis: 100%; display: flex; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); font-size: 14px; }
.metar-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.metar-chip { padding: 0 6px; color: var(--dim); }
.metar-chip.on { color: var(--accent); border-color: var(--accent); font-weight: bold; }
.metar-del { padding: 0 4px; border: none; background: none; color: var(--dim); }
.metar-del:hover { color: var(--warn); }
.metar-raw { color: #e8f6ee; letter-spacing: .02em; }
.metar-raw.fresh { color: var(--pilot); }
.metar-raw .qnh { color: var(--pilot); }
.metar-raw .wind { color: var(--atc); }
.metar-raw .wx { color: var(--warn); }
#metar-bar .dim { color: var(--dim); }
#metar-bar .old { color: var(--warn); }
#metar-add { display: flex; gap: 4px; }
#metar-new { width: 70px; padding: 0 6px; text-transform: uppercase; }
#metar-refresh { padding: 0 6px; }

/* Logo: coloque o arquivo server/public/logo.png (fundo transparente). Sem ele, aparece o nome em texto. */
#brand-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 12px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#brand-box label { color: var(--accent); font-weight: bold; }
#brand { display: flex; align-items: center; gap: 6px; }
#brand-logo { height: 40px; width: auto; display: block; }
#brand-logo + #brand-text { display: none; }
#brand-text { font-weight: bold; font-size: 15px; letter-spacing: .03em; color: #fff; }

#scope:focus { outline: none; }
#ptt-global { color: var(--warn); font-size: 12px; }
#ptt-global.ok { color: var(--accent); }
.diag { margin: 4px 0; padding: 3px 6px; border-left: 3px solid; }
.diag.bad { color: var(--warn); border-color: var(--warn); }
.diag.ok { color: var(--accent); border-color: var(--accent); }

/* SAGITARIO: barras e painéis com cara de console (títulos em faixa, cantos retos) */
#side h2 { background: var(--panel2); margin: -8px -10px 6px; padding: 4px 10px; border-bottom: 1px solid var(--line); }
body:not(.theme-classico) select, body:not(.theme-classico) input, body:not(.theme-classico) button { border-radius: 0; }
body:not(.theme-classico) #login-form { border-radius: 0; }
body:not(.theme-classico) #btn-ptt.tx { background: #8a2a2a; }

/* ---------- SAGITARIO: strips, alertas e menus da etiqueta ---------- */
#traffic-panel { max-height: 38vh; }
#strips { display: flex; flex-direction: column; gap: 3px; }
.strip { border: 1px solid var(--line); border-left: 6px solid #6b737a; background: var(--panel2); padding: 2px 6px; cursor: pointer; user-select: none; }
.strip > div { display: flex; gap: 10px; flex-wrap: wrap; }
.strip .s1 b { color: #fff; min-width: 90px; }
.strip .s2, .strip .s3 { color: var(--dim); }
.strip .cfl { color: var(--text); }
.strip.st-mine { border-left-color: #ffffff; }
.strip.st-in { border-left-color: #ffa640; animation: blinkStrip 1s steps(2) infinite; }
.strip.st-out { border-left-color: #ffa640; }
.strip.st-other { border-left-color: #a8c3d6; opacity: .8; }
.strip.st-free { border-left-color: #6b737a; }
.strip.st-in .own, .strip.st-out .own { color: #ffa640; }
.strip.sel { outline: 1px solid #fff; background: var(--btn-on); }
.strip.alert { border-color: var(--warn); }
.strip .tag, #alert-list b { color: var(--warn); font-weight: bold; }
@keyframes blinkStrip { 50% { background: #5a4630; } }
#alert-panel.active h2 { background: #7a2626; color: #fff; }
#alert-list { max-height: 14vh; overflow: auto; }
.alert-row { cursor: pointer; padding: 1px 0; }
.alert-row .dim, #alert-list .dim, #strips .dim { color: var(--dim); }
.popmenu { position: fixed; z-index: 50; min-width: 200px; max-width: 340px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.popmenu .pm-title { padding: 4px 8px; background: var(--panel2); color: #fff; font-weight: bold; border-bottom: 1px solid var(--line); }
.popmenu > button { text-align: left; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 5px 8px; }
.popmenu > button:hover:not(:disabled) { background: var(--btn-on); }
.popmenu > button:disabled { color: var(--dim); cursor: default; }
.popmenu .pm-main { color: #fff; font-weight: bold; }
.popmenu .pm-input { display: flex; padding: 4px; border-bottom: 1px solid var(--line); }
.popmenu .pm-input input { flex: 1; text-transform: uppercase; }
.popmenu .pm-list { max-height: 240px; overflow: auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.popmenu .pm-list button { border: none; border-radius: 0; background: none; padding: 3px 4px; }
.popmenu .pm-list button:hover { background: var(--btn-on); }
.popmenu .pm-list button.cur { outline: 1px solid #fff; color: #fff; }

/* IA supervisionada */
#btn-ia.on { background: #1d4a6b; border-color: var(--accent); color: #fff; font-weight: bold; }
#btn-ia.pausa { background: #6b5a1d; }
.log-row .ia-tag { display: inline-block; padding: 0 4px; margin-right: 4px; border: 1px solid currentColor; border-radius: 3px; font-size: 10px; font-style: normal; }
.log-row .ia-av { margin-left: 6px; white-space: nowrap; }
.log-row .ia-av button { padding: 0 6px; margin-left: 2px; font-size: 11px; line-height: 16px; cursor: pointer; }
.log-row .ia-av .ok { color: #5fd38d; border-color: #5fd38d; }
.log-row .ia-av .bad { color: #ff7a6b; border-color: #ff7a6b; }
.log-row .ia-av .done { color: var(--dim); font-size: 11px; }
#ia-corr-form, .corr-form { width: 460px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
#ia-corr-form h1, .corr-form h1 { margin: 0; color: var(--accent); font-size: 18px; }
#ia-corr-form p, .corr-form p { margin: 0; color: var(--dim); }
#ia-corr-form label, .corr-form label { display: flex; flex-direction: column; gap: 3px; color: var(--dim); }
#ia-corr-form textarea, #ia-corr-form input, .corr-form textarea, .corr-form select { font: inherit; text-transform: none; color: inherit; background: var(--bg, #1a1d20); border: 1px solid var(--line); padding: 6px; }
#ia-corr-form .row, .corr-form .row { display: flex; gap: 8px; }
#ia-corr-form .row button, .corr-form .row button { flex: 1; padding: 8px; }
#ia-corr-form .row button[type=submit], .corr-form .row button[type=submit] { color: var(--accent); border-color: var(--accent); }
#ia-corr-err { color: var(--warn); min-height: 1em; }

.corr-form .err { color: var(--warn); min-height: 1em; }
.log-row .voz-tag { display: inline-block; padding: 0 4px; margin-right: 4px; border: 1px dashed currentColor; border-radius: 3px; font-size: 10px; font-style: normal; }