/* Fuente de banderas: Windows no trae glifos de banderas emoji (muestra "ES",
   "DE"...). Esta fuente (Twemoji) las pinta bien. El unicode-range la limita a
   los códigos de bandera, así que no afecta al resto del texto. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0a0b0d;
  --panel: #17191c;
  --panel2: #1d2024;
  --metal-hi: #3a4046;
  --metal-lo: #0d0f12;
  --blue: #2aa8ff;
  --blue-dim: #1c6fae;
  --cyan: #7fe0ff;
  --text: #c9d2da;
  --text-dim: #6b7681;
  --edge: rgba(255,255,255,.07);
  --led-off: #1c1717;
  --red: #ff3b30;
  --green: #34d058;
  --amber: #ffcf3f;
  /* brushed-metal texture layer reused everywhere */
  --brush: repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 1px, rgba(0,0,0,.02) 1px 2px, transparent 2px 4px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(90% 70% at 50% -10%, rgba(42,120,180,.14), transparent 60%),
    radial-gradient(120% 120% at 50% 0%, #15181c 0%, #0a0b0d 60%, #050607 100%);
  color: var(--text);
  font-family: "Twemoji Country Flags", "Segoe UI", "Arial", sans-serif;
  user-select: none;
  overflow: hidden;
}

/* Outer device chassis */
.rig {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 10px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 18px 18px, #5b616a 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 18px) 18px, #5b616a 0 2px, transparent 3px),
    radial-gradient(circle at 18px calc(100% - 18px), #5b616a 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #5b616a 0 2px, transparent 3px),
    var(--brush),
    linear-gradient(180deg, #2b3036 0%, #1a1d22 10%, #0e1013 100%);
  box-shadow: inset 0 0 0 1px #000, inset 0 2px 3px rgba(255,255,255,.06), inset 0 -60px 120px rgba(0,0,0,.5);
}

/* Reusable brushed-metal surface */
.metal {
  background: var(--brush), linear-gradient(180deg, var(--metal-hi) 0%, var(--panel) 6%, var(--panel2) 55%, var(--metal-lo) 100%);
  border: 1px solid #000; border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--edge), 0 4px 14px rgba(0,0,0,.55);
}

/* ---------- Titlebar ---------- */
.titlebar {
  -webkit-app-region: drag;
  display: flex; align-items: center; gap: 16px;
  padding: 11px 18px;
  background: var(--brush), linear-gradient(180deg, #333940, #171a1e 60%, #0f1114);
  border: 1px solid #000; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -12px 24px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.5);
}
.brand {
  font-size: 27px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(180deg, #ffffff, #a9cfe8 55%, #6aa8d6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 10px rgba(42,168,255,.25));
}
.brand .ver { -webkit-text-fill-color: var(--blue); color: var(--blue); font-size: 15px; font-weight: 700; letter-spacing: 1px; filter: drop-shadow(0 0 6px rgba(42,168,255,.6)); }
.grille {
  flex: 1; height: 16px; margin: 0 8px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #34393f 0 2px, #101317 2px 3px, transparent 3px 8px);
  box-shadow: inset 0 0 8px rgba(0,0,0,.8); opacity: .6;
}
.winbtns { -webkit-app-region: no-drag; display: flex; gap: 7px; }
.winbtns button {
  width: 36px; height: 28px; border: 1px solid #000; border-radius: 7px;
  background: linear-gradient(180deg, #3f454c, #191c20); color: #d7dee5; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--edge), 0 2px 4px rgba(0,0,0,.5);
}
.winbtns button:hover { background: linear-gradient(180deg, #50575f, #23272c); color: #fff; }
.winbtns button.close:hover { background: linear-gradient(180deg, #ff6058, #b3271f); color: #fff; box-shadow: 0 0 12px rgba(255,59,48,.5); }

/* ---------- Panel grid ---------- */
.panel { flex: 1; display: grid; grid-template-columns: 210px 1fr 210px; gap: 10px; min-height: 0; }
.col { display: flex; flex-direction: column; }
.col.left, .col.right {
  padding: 16px 12px; align-items: center; gap: 13px;
  background: var(--brush), linear-gradient(180deg, var(--metal-hi), var(--panel2) 40%, var(--metal-lo));
  border: 1px solid #000; border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--edge), inset 0 -40px 70px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.55);
}
.col.center { gap: 10px; min-height: 0; }

/* ---------- LEDs ---------- */
.leds { display: grid; grid-template-columns: auto auto auto auto auto auto; gap: 5px 6px; align-items: center; margin-bottom: 4px; }
.leds label { font-size: 11px; color: var(--text-dim); font-weight: 700; letter-spacing: .5px; }
.led {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3030, var(--led-off) 70%);
  box-shadow: inset 0 0 3px #000, inset 0 1px 1px rgba(255,255,255,.12);
}
.led.on.led-tx  { background: radial-gradient(circle at 35% 30%, #ffb0ab, var(--red) 60%);   box-shadow: 0 0 10px var(--red),   inset 0 1px 2px rgba(255,255,255,.5); animation: ledpulse 1.6s infinite; }
.led.on.led-rx  { background: radial-gradient(circle at 35% 30%, #b6ffc7, var(--green) 60%); box-shadow: 0 0 10px var(--green), inset 0 1px 2px rgba(255,255,255,.5); }
.led.on.led-sql { background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--amber) 60%); box-shadow: 0 0 10px var(--amber), inset 0 1px 2px rgba(255,255,255,.5); }
@keyframes ledpulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }

/* ---------- Knobs ---------- */
.knobwrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.knob {
  --value: 0;
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, #565c64 0%, #2b2f35 38%, #17191d 62%, #0a0b0d 100%);
  border: 2px solid #04050a;
  box-shadow:
    0 0 0 3px #0c0f13,
    0 0 0 4px #2a2f36,
    0 0 0 6px #0c0f13,
    0 0 14px 6px rgba(42,168,255,.30),
    0 8px 16px rgba(0,0,0,.65),
    inset 0 3px 6px rgba(255,255,255,.16),
    inset 0 -8px 14px rgba(0,0,0,.6);
  cursor: ns-resize; transition: box-shadow .2s;
}
.knob:hover { box-shadow: 0 0 0 3px #0c0f13, 0 0 0 4px #2a2f36, 0 0 0 6px #0c0f13, 0 0 20px 8px rgba(42,168,255,.5), 0 8px 16px rgba(0,0,0,.65), inset 0 3px 6px rgba(255,255,255,.18), inset 0 -8px 14px rgba(0,0,0,.6); }
/* glass sheen */
.knob::before {
  content: ""; position: absolute; left: 16%; top: 10%; width: 68%; height: 42%; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none;
}
.knob::after {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 5px; height: 28px; margin-left: -2.5px; border-radius: 3px;
  background: linear-gradient(#f2fbff, #2aa8ff);
  box-shadow: 0 0 10px var(--blue), 0 0 4px #fff;
  transform-origin: 50% 39px;
  transform: rotate(calc(-135deg + var(--value) * 270deg));
}
.knob-scale { display: flex; justify-content: space-between; width: 100px; font-size: 10px; color: var(--text-dim); }
.knob-label { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: var(--blue); text-shadow: 0 0 8px rgba(42,168,255,.4); }
.knob-label.top { margin-bottom: 2px; }
.section-label { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--blue); margin-top: 6px; text-shadow: 0 0 8px rgba(42,168,255,.35); }

/* ---------- Soft buttons ---------- */
.softbtn {
  width: 100%; padding: 10px 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  color: var(--text); background: linear-gradient(180deg, #313640, #14171b);
  border: 1px solid #000; border-radius: 9px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--edge), 0 3px 6px rgba(0,0,0,.5); transition: .15s;
}
.softbtn:hover { color: #fff; border-color: var(--blue-dim); box-shadow: inset 0 1px 0 var(--edge), 0 0 12px rgba(42,168,255,.25); }
.softbtn:active { background: linear-gradient(180deg, #14171b, #22262b); }
.softbtn.active { color: #04121c; background: linear-gradient(180deg, #55b8ff, #1c7fc4); border-color: var(--blue); box-shadow: 0 0 14px rgba(42,168,255,.5); }
.softbtn.on { color: #04121c; background: linear-gradient(180deg, #43e08a, #1f9d55); border-color: #2fb85f; box-shadow: 0 0 14px rgba(53,211,106,.55); font-weight: 800; }

/* ---------- Spectrum scope ---------- */
.scope {
  position: relative; flex: 1; min-height: 0;
  border: 1px solid #000; border-radius: 12px; overflow: hidden;
  background: #02060a;
  box-shadow: inset 0 0 34px rgba(0,0,0,.92), inset 0 0 70px rgba(0,70,130,.10), 0 0 0 1px rgba(42,168,255,.12), 0 0 22px rgba(42,168,255,.10);
}
.scope canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
/* glass reflection over the LCD */
.scope::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.25) 100%);
}
.scope-overlay {
  position: absolute; inset: 0; padding: 10px 16px;
  display: flex; flex-direction: column; pointer-events: none;
  color: var(--cyan); text-shadow: 0 0 6px rgba(0,0,0,.9), 0 0 10px rgba(42,168,255,.4);
}
.ov-top { display: flex; gap: 16px; align-items: center; font-size: 14px; font-weight: 700; }
.lcd-band { color: var(--blue); cursor: pointer; pointer-events: auto; }
.lcd-band::after { content: '\25BE'; font-size: .6em; opacity: .6; margin-left: 5px; vertical-align: middle; }
.lcd-band:hover { text-shadow: 0 0 10px rgba(42,168,255,.8); }
/* Selector de banda emergente */
.band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 4px; }
.band-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 4px; background: linear-gradient(180deg, #22262c, #14171b); border: 1px solid #05060a; border-radius: 12px; color: var(--text); cursor: pointer; }
.band-item:hover { border-color: var(--blue); }
.band-item .band-name { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.band-item .band-sub { font-size: 10px; color: #6b7681; display: flex; align-items: center; gap: 5px; letter-spacing: .5px; }
.band-item.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, 0 0 14px rgba(42,168,255,.25); }
.band-item.active .band-name { color: var(--blue); text-shadow: 0 0 8px rgba(42,168,255,.5); }
.band-free { background: #17632e; color: #b8ffcf; border-radius: 5px; padding: 1px 4px; font-weight: 800; font-size: 9px; letter-spacing: .5px; }
.band-test { grid-column: 1 / -1; background: linear-gradient(180deg, #123a2a, #0c221a); border-color: #1f7a4d; }
.band-test .band-name { font-size: 16px; color: #7df3b0; }
.band-test .band-sub { color: #6fbf92; }
.band-test.active { border-color: #2ee88a; box-shadow: 0 0 0 1px #2ee88a inset, 0 0 14px rgba(46,232,138,.28); }
.lcd-mode { color: #9be8ff; }
.lcd-chan { color: #04140a; background: var(--green); font-weight: 800; padding: 1px 8px; border-radius: 4px; font-size: 13px; letter-spacing: 1px; box-shadow: 0 0 10px rgba(52,208,88,.6); }
.lcd-chan[hidden] { display: none; }
.lcd-sub { color: #b8ffcf; background: #123a2a; border: 1px solid #1f7a4d; font-weight: 800; padding: 1px 7px; border-radius: 4px; font-size: 12px; letter-spacing: 1px; cursor: pointer; pointer-events: auto; }
.lcd-sub[hidden] { display: none; }
.lcd-sub:hover { background: #17632e; }
.lcd-enc { font-size: 15px; cursor: pointer; pointer-events: auto; opacity: .55; filter: grayscale(1); }
.lcd-enc.on { opacity: 1; filter: none; text-shadow: 0 0 10px rgba(255,208,63,.9); }
.lcd-enc[hidden] { display: none; }
.ov-rb { pointer-events: auto; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 1px 8px; border-radius: 4px; background: rgba(0,0,0,.35); border: 1px solid #3a4552; color: #9aa6b4; white-space: nowrap; }
.ov-rb.on { background: #123a2a; border-color: #1f7a4d; color: #b8ffcf; box-shadow: 0 0 10px rgba(31,122,77,.35); }
.ov-rb[hidden] { display: none; }
/* Modal de cifrado de voz */
.enc-modal { max-width: 380px; border-color: #1f7a4d; box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 44px rgba(46,232,138,.10); }
.enc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.enc-badge { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 28%, #1e7a4e, #0c2c1e); border: 1px solid #2ee88a; box-shadow: 0 0 20px rgba(46,232,138,.4), inset 0 1px 0 rgba(255,255,255,.18); }
.enc-head-txt h2 { margin: 0; font-size: 19px; color: #eafff3; letter-spacing: .3px; }
.enc-sub { font-size: 12px; color: #8fd6b0; display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.enc-tag { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #04140a; background: var(--green); padding: 1px 6px; border-radius: 4px; }
.enc-note { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0 0 16px; }
.enc-note b { color: #b8ffcf; }
.enc-field { display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, #0b1712, #091a12); border: 1px solid #1f7a4d; border-radius: 12px; padding: 0 12px; transition: border-color .15s, box-shadow .15s; }
.enc-field:focus-within { border-color: #2ee88a; box-shadow: 0 0 0 1px #2ee88a inset, 0 0 18px rgba(46,232,138,.28); }
.enc-key-ico { font-size: 17px; opacity: .9; }
.enc-field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #eafff3; font: 700 15px/1 "Consolas", "Courier New", monospace; letter-spacing: 1.5px; padding: 14px 0; }
.enc-field input::placeholder { color: #567a67; font-family: "Segoe UI", system-ui, sans-serif; letter-spacing: 0; font-weight: 400; }
.enc-hint { font-size: 11px; color: #6b8a78; margin: 7px 2px 0; }
.enc-actions { margin-top: 18px; }
.enc-modal .enc-save { color: #04140a; font-weight: 800; background: linear-gradient(180deg, #4ff0a0, #17a45f); border-color: #2ee88a; }
.enc-modal .enc-save:hover { color: #04140a; background: linear-gradient(180deg, #6bf5b4, #1cb96c); box-shadow: 0 0 16px rgba(46,232,138,.55); }
.ov-pwr { pointer-events: auto; cursor: ns-resize; color: var(--amber); padding: 1px 8px; border: 1px solid rgba(255,207,63,.4); border-radius: 4px; background: rgba(0,0,0,.35); font-size: 12px; }
.ov-pwr:hover { border-color: var(--amber); box-shadow: 0 0 10px rgba(255,207,63,.45); }
.lcd-online { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.lcd-online b { color: var(--green); }
.ov-freq {
  font-family: "Consolas", monospace; font-weight: 700;
  font-size: clamp(30px, 5vw, 58px); letter-spacing: 3px;
  color: #eafaff; text-shadow: 0 0 18px rgba(42,168,255,.85), 0 0 40px rgba(42,168,255,.35), 0 2px 6px #000;
  margin: 2px 0; text-align: center;
}
.ov-status { font-size: 13px; letter-spacing: 2px; color: var(--amber); text-align: center; text-shadow: 0 0 8px rgba(255,207,63,.4); }
.ov-talker { font-size: 18px; font-weight: 800; color: var(--red); min-height: 22px; text-align: center; text-shadow: 0 0 8px rgba(255,59,48,.7), 0 0 4px #000; line-height: 1.15; }
.ov-talker .tk-call { display: block; font-size: 18px; font-weight: 800; }
/* La fuente de banderas primero para que Windows pinte el emoji de bandera. */
.ov-talker .tk-flag { font-family: "Twemoji Country Flags", "Segoe UI", sans-serif; font-size: 17px; vertical-align: middle; }
.ov-talker .tk-name { display: block; font-size: 12px; font-weight: 600; color: #bfe8c9; text-shadow: 0 0 4px #000; margin-top: 1px; }
.ov-users { margin-top: auto; font-size: 12px; color: #8fb0c4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Center lower ---------- */
.center-lower {
  display: grid; grid-template-columns: 1.3fr auto auto auto 1.3fr; gap: 10px; align-items: center;
  padding: 12px; border-radius: 12px;
  background: var(--brush), linear-gradient(180deg, var(--metal-hi), var(--panel2) 40%, var(--metal-lo));
  border: 1px solid #000; box-shadow: inset 0 1px 0 var(--edge), inset 0 -30px 50px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.5);
}
.meters { display: flex; flex-direction: column; gap: 8px; }
.meter-title { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--blue); text-align: center; text-shadow: 0 0 6px rgba(42,168,255,.35); }
.meter-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-dim); }
.bar {
  height: 15px; border-radius: 5px; background: linear-gradient(180deg, #05080b, #0c1116);
  border: 1px solid #000; overflow: hidden; position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.04);
}
.bar::before {
  content: ""; position: absolute; inset: 0; width: var(--fill, 0%);
  background: linear-gradient(90deg, #1e7d3a 0%, #34d058 55%, #ffcf3f 78%, #ff3b30 100%);
  box-shadow: 0 0 8px rgba(52,208,88,.4); transition: width .08s linear;
}
/* glossy top highlight + segment lines on meters */
.bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.35) 6px 7px),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%);
}
.bar.bar-blue::before { background: linear-gradient(90deg, #135f96, #2aa8ff); box-shadow: 0 0 8px rgba(42,168,255,.4); }

.steppers { display: flex; flex-direction: column; gap: 8px; }
.stepbtn {
  padding: 12px 10px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  color: var(--text); background: linear-gradient(180deg, #313640, #14171b);
  border: 1px solid #000; border-radius: 9px; cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--edge), 0 3px 6px rgba(0,0,0,.5); transition: .15s;
}
.stepbtn:hover { color: #fff; border-color: var(--blue-dim); box-shadow: inset 0 1px 0 var(--edge), 0 0 12px rgba(42,168,255,.25); }
.stepbtn:active { color: var(--blue); box-shadow: inset 0 0 10px rgba(42,168,255,.45); }

.dialwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.maindial {
  --value: 0;
  position: relative; width: 140px; height: 140px; cursor: grab;
  filter: drop-shadow(0 7px 11px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(42,168,255,.22));
}
.maindial:active { cursor: grabbing; }
/* dos capas apiladas: el BORDE exterior queda fijo y solo gira el DISCO interior */
.maindial .dial-outer, .maindial .dial-inner {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; -webkit-user-select: none; user-select: none; object-fit: contain;
}
.maindial .dial-inner {                 /* disco interior con la aguja: gira con --value */
  /* -225.8° = corrección para que en arranque (--value 0.5, centro de banda) la aguja mire ARRIBA */
  transform: rotate(calc(var(--value, 0) * 360deg - 225.8deg));
  transform-origin: 50% 50%;
  transition: transform .06s linear;
}
.dial-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--blue); text-shadow: 0 0 6px rgba(42,168,255,.35); }
.pwrbar { display: flex; align-items: center; gap: 4px; }
.pwrbtn {
  width: 26px; height: 24px; font-size: 11px; color: var(--text);
  background: linear-gradient(180deg, #313640, #14171b); border: 1px solid #000; border-radius: 7px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--edge);
}
.pwrbtn:hover { color: var(--blue); border-color: var(--blue-dim); }
.pwrbtn:active { box-shadow: inset 0 0 8px rgba(42,168,255,.4); }
.pwrval { min-width: 54px; text-align: center; font-size: 13px; font-weight: 800; color: var(--amber); font-family: "Consolas", monospace; text-shadow: 0 0 6px rgba(255,207,63,.4); }

/* ---------- Bottom bar ---------- */
.bottombar {
  display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr repeat(5, 1fr); gap: 7px; padding: 12px;
  background: var(--brush), linear-gradient(180deg, #2a2f35, #121417);
  border: 1px solid #000; border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--edge), inset 0 -14px 26px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.5);
}
.botbtn {
  padding: 14px 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text); background: linear-gradient(180deg, #313640, #14171b);
  border: 1px solid #000; border-radius: 10px; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--edge), 0 3px 7px rgba(0,0,0,.5); transition: .15s;
}
.botbtn:hover { color: #fff; border-color: var(--blue-dim); box-shadow: inset 0 1px 0 var(--edge), 0 0 14px rgba(42,168,255,.3); }
.botbtn:active { transform: translateY(1px); }
.botbtn.active { color: #04121c; background: linear-gradient(180deg, #55b8ff, #1c7fc4); border-color: var(--blue); box-shadow: 0 0 16px rgba(42,168,255,.5); }
.botbtn.ptt {
  font-size: 23px; font-weight: 900; letter-spacing: 4px; color: var(--cyan);
  background: radial-gradient(120% 140% at 50% 0%, #17517a, #0a2233 70%);
  border: 2px solid var(--blue-dim);
  box-shadow: 0 0 18px rgba(42,168,255,.35), inset 0 2px 0 rgba(255,255,255,.1), inset 0 -10px 24px rgba(0,0,0,.5);
  text-shadow: 0 0 14px rgba(42,168,255,.6);
}
.botbtn.ptt:hover { box-shadow: 0 0 26px rgba(42,168,255,.55), inset 0 2px 0 rgba(255,255,255,.12); }
.botbtn.ptt.tx {
  color: #fff; border-color: #ff8a82;
  background: radial-gradient(120% 140% at 50% 0%, #ff6a60, #b3271f 70%);
  box-shadow: 0 0 40px rgba(255,59,48,.75), inset 0 2px 0 rgba(255,255,255,.2);
  animation: pttpulse 1s infinite;
}
@keyframes pttpulse { 0%,100% { box-shadow: 0 0 40px rgba(255,59,48,.7), inset 0 2px 0 rgba(255,255,255,.2); } 50% { box-shadow: 0 0 60px rgba(255,59,48,.98), inset 0 2px 0 rgba(255,255,255,.25); } }
.ptt-cell { position: relative; display: flex; }
.ptt-cell .botbtn.ptt { flex: 1; }
.ptt-mode-btn {
  position: absolute; top: 4px; right: 5px; z-index: 3;
  font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 6px; cursor: pointer;
  color: var(--cyan); background: rgba(4,14,22,.72); border: 1px solid var(--blue-dim);
  box-shadow: 0 0 8px rgba(42,168,255,.25);
}
.ptt-mode-btn:hover { color: #fff; border-color: var(--blue); }
.ptt-mode-btn.fixed { color: #04121c; background: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px rgba(255,207,63,.5); }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; overflow-y: auto; }
.modal-back[hidden] { display: none; }
.modal {
  width: 380px; padding: 22px; border-radius: 14px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--brush), linear-gradient(180deg, #262a30, #14171b);
  border: 1px solid #000; box-shadow: 0 20px 60px rgba(0,0,0,.75), inset 0 1px 0 var(--edge);
}
.modal h2 { font-size: 18px; margin-bottom: 16px; color: var(--blue); letter-spacing: 1px; text-shadow: 0 0 10px rgba(42,168,255,.3); }
.modal label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.modal input { display: block; width: 100%; margin-top: 6px; padding: 10px; background: #0a0c0f; border: 1px solid #000; border-radius: 8px; color: #eafaff; font-family: "Consolas", monospace; font-size: 14px; box-shadow: inset 0 2px 4px rgba(0,0,0,.7); }
.modal input:focus { outline: 1px solid var(--blue); box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 0 10px rgba(42,168,255,.3); }
.modal select { display: block; width: 100%; margin-top: 6px; padding: 10px; background: #0a0c0f; border: 1px solid #000; border-radius: 8px; color: #eafaff; font-size: 13px; }
.modal select:focus { outline: 1px solid var(--blue); }
.modal-actions { display: flex; gap: 10px; margin: 12px -22px -22px; padding: 12px 22px; position: sticky; bottom: -22px; background: linear-gradient(180deg, rgba(23,26,30,.6), #171a1e 40%); border-top: 1px solid #000; border-radius: 0 0 14px 14px; }

/* ---------- Interface (link) dialog ---------- */
.iface-modal { width: 460px; }
.iface-note { font-size: 12px; color: var(--text-dim); line-height: 1.45; margin-bottom: 10px; }
.iface-note b { color: var(--blue); }
.iface-grid { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
.iface-modal h2 { margin-bottom: 8px; }
.iface-row { display: flex; gap: 8px; align-items: center; }
.iface-row select { flex: 1; }
.softbtn.small { width: auto; padding: 8px 12px; }
.modal fieldset { border: 1px solid #000; border-radius: 10px; padding: 10px 12px; background: rgba(0,0,0,.25); margin: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.modal legend { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--blue); padding: 0 6px; }
.chk, .rad { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); margin: 4px 14px 4px 0; cursor: pointer; }
.chk input, .rad input { width: 16px; height: 16px; accent-color: var(--blue); }
.iface-level { position: relative; height: 14px; border-radius: 6px; background: #05090d; border: 1px solid #000; overflow: hidden; margin: 4px 0 12px; box-shadow: inset 0 1px 3px rgba(0,0,0,.8); }
.iface-level i { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, #1e7d3a, #34d058 60%, #ffcf3f 85%, #ff3b30); transition: width .06s linear; }
.iface-thr { position: absolute; top: -2px; bottom: -2px; left: 30%; width: 2px; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.iface-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.ledsm { width: 10px; height: 10px; border-radius: 50%; background: var(--led-off); box-shadow: inset 0 0 3px #000; display: inline-block; }
.ledsm.tx.on { background: var(--red); box-shadow: 0 0 8px var(--red); }
.ledsm.rx.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
#ifStat { color: var(--amber); font-weight: 700; }

/* ---------- Cluster dialog ---------- */
.cluster-modal { width: 640px; max-width: 92vw; }
.cl-hint { font-size: 11px; font-weight: 500; color: var(--text-dim); }
.cl-count { font-size: 13px; color: var(--text-dim); margin: 4px 0 10px; }
.cl-count b { color: var(--green); }
.cl-table { border: 1px solid #000; border-radius: 10px; background: #0a0c0f; overflow: hidden; margin-bottom: 14px; box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.cl-head, .cl-row { display: grid; grid-template-columns: 1.3fr .8fr 1.2fr .8fr .9fr; align-items: center; gap: 8px; padding: 9px 14px; }
.cl-head { font-size: 11px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; border-bottom: 1px solid #23262b; }
#clRows { max-height: 340px; overflow-y: auto; }
.cl-row { border-bottom: 1px solid #17191c; cursor: pointer; transition: background .12s; }
.cl-row:hover { background: rgba(42,168,255,.09); }
.cl-row.tx { background: rgba(255,59,48,.09); }
.cl-row .call { font-weight: 800; color: #eafaff; }
.cl-row .cl-flag { margin-right: 6px; font-family: "Twemoji Country Flags", "Segoe UI", sans-serif; vertical-align: middle; }
.cl-row .fr { font-family: "Consolas", monospace; color: #9fc6e2; }
.cl-row .bd { color: var(--blue); font-weight: 700; }
.cl-badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.cl-badge.tx { background: rgba(255,59,48,.2); color: #ff7a72; box-shadow: 0 0 8px rgba(255,59,48,.3); }
.cl-badge.rx { background: rgba(52,208,88,.16); color: #6fe08c; }
.cl-badge.me { background: rgba(42,168,255,.18); color: #7fd0ff; }
.cl-empty { text-align: center; color: var(--text-dim); padding: 28px; }

/* ===== Auto-updater (botón de titlebar + ventana) ===== */
.updbtn {
  -webkit-app-region: no-drag; position: relative; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; margin-right: 8px; cursor: pointer; color: var(--text-dim);
  background: linear-gradient(180deg, #2b2f34, #191c20); border: 1px solid #000; border-radius: 7px;
  box-shadow: inset 0 1px 0 var(--edge);
}
.updbtn:hover { color: var(--blue); border-color: var(--blue-dim); box-shadow: inset 0 1px 0 var(--edge), 0 0 12px rgba(42,168,255,.35); }
.updbtn:active { background: linear-gradient(180deg, #14171b, #22262b); }
.upd-dot {
  position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: #38e08a; border: 1px solid #0a0b0d; box-shadow: 0 0 8px rgba(56,224,138,.9);
  animation: updpulse 1.4s ease-in-out infinite;
}
.upd-dot[hidden] { display: none; }
@keyframes updpulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }

.update-modal { max-width: 430px; text-align: center; }
.update-modal .upd-icon { font-size: 46px; line-height: 1; margin: 4px 0 12px; filter: drop-shadow(0 0 12px rgba(42,168,255,.35)); }
.update-modal .upd-status { font-size: 15px; color: #eafaff; font-weight: 700; letter-spacing: .3px; margin-bottom: 6px; }
.update-modal .upd-sub { font-size: 12px; color: var(--text-dim); min-height: 16px; margin-bottom: 14px; font-family: "Consolas", monospace; }
.update-modal .upd-bar {
  height: 16px; margin: 6px 0 12px; background: #0a0c0f; border: 1px solid #000; border-radius: 9px;
  overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
}
.update-modal .upd-bar[hidden] { display: none; }
.update-modal .upd-bar > i {
  display: block; height: 100%; width: 0%; border-radius: 9px;
  background: linear-gradient(180deg, #55b8ff, #1c7fc4);
  box-shadow: 0 0 14px rgba(42,168,255,.6); transition: width .25s ease;
}

/* ===== Créditos ===== */
.infobtn { font-size: 15px; font-weight: 800; font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.credits-modal { max-width: 440px; text-align: center; }
.credits-modal .id-logo { width: 150px; height: 150px; object-fit: contain; margin: 2px auto 14px; display: block; filter: drop-shadow(0 0 16px rgba(42,168,255,.4)); border-radius: 18px; }
.credits-modal h2 { text-align: center; margin-bottom: 14px; }
.credits-text { font-size: 13.5px; color: #dfe9f0; line-height: 1.6; margin: 0 0 14px; text-align: left; }
.credits-text b { color: var(--blue); }
.credits-copy { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin: 14px 0 2px; text-align: center; border-top: 1px solid #000; padding-top: 12px; }
.credits-support { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; text-align: left; }
.wa-btn {
  display: inline-block; text-decoration: none; margin: 0 auto 4px; padding: 11px 20px; border-radius: 10px;
  font-weight: 800; letter-spacing: .4px; color: #04121c;
  background: linear-gradient(180deg, #4ce07a, #1faa54); border: 1px solid #128a3f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px rgba(37,211,102,.4);
}
.wa-btn:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 18px rgba(37,211,102,.6); }

/* ===== Gate de indicativo (obligatorio al conectar) ===== */
.callsign-modal { max-width: 400px; text-align: center; }
.callsign-modal h2 { text-align: center; }
.callsign-modal .cs-note { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 14px; }
.callsign-modal .cs-note b { color: var(--blue); }
.callsign-modal #csInput {
  display: block; width: 100%; margin: 0 0 6px; padding: 14px; text-align: center;
  font-family: "Consolas", monospace; font-size: 22px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: #eafaff; background: #0a0c0f; border: 1px solid #000; border-radius: 10px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7);
}
.callsign-modal #csInput:focus { outline: 1px solid var(--blue); box-shadow: inset 0 2px 5px rgba(0,0,0,.7), 0 0 12px rgba(42,168,255,.35); }
.callsign-modal .cs-error { color: #ff7a72; font-size: 12px; margin: 2px 0 8px; }
.callsign-modal .cs-error[hidden] { display: none; }

/* ===== Autenticación (login / registro / recuperación) ===== */
.auth-modal { max-width: 400px; position: relative; }
.auth-modal h2 { text-align: center; }
.auth-close { position: absolute; top: 8px; right: 10px; z-index: 2; background: none; border: none; color: #9fb4c4; font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.auth-close:hover { color: #fff; background: rgba(255,255,255,.08); }
/* En autenticación el pie del botón NO es pegajoso: así los enlaces de abajo
   quedan sobre el fondo del modal y se leen bien (antes "Crear cuenta" caía
   sobre la barra oscura y no se veía). */
.auth-modal .modal-actions { position: static; margin: 14px 0 0; padding: 0; background: none; border-top: none; border-radius: 0; }
.auth-lbl { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
/* La fuente de banderas va PRIMERO para que Windows pinte los emoji de bandera. */
#regCountry, #regCountry option { font-family: "Twemoji Country Flags", "Segoe UI", system-ui, Arial, sans-serif; }
.auth-err { color: #ff7a72; font-size: 12px; margin: 2px 0 8px; }
.auth-err[hidden] { display: none; }
.auth-ok { color: #7dffa0; font-size: 12px; margin: 2px 0 8px; line-height: 1.4; }
.auth-ok[hidden] { display: none; }
.auth-links { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; text-align: center; }
.auth-links a { color: #6cc4ff; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.auth-links a:hover { color: #a9dcff; text-decoration: underline; }
.auth-links a.danger { color: #ff7a72; }
.acct-card { background: #0a0c0f; border: 1px solid #000; border-radius: 10px; padding: 12px; margin-bottom: 14px; text-align: center; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.acct-call { font-size: 20px; font-weight: 800; color: #7fe0ff; letter-spacing: 1px; }
.acct-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.acct-email { font-size: 12px; color: #8fa6b6; margin-top: 4px; font-family: "Consolas", monospace; }
.acct-section-title { font-size: 11px; letter-spacing: 1px; color: var(--blue); margin: 4px 0 8px; font-weight: 700; }

/* ===== S-meter analógico de aguja ===== */
.smeter { display: flex; align-items: center; width: 100%; }
.smeter .sm-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.smeter .sm-needle {
  transform: rotate(calc(-54deg + var(--sm, 0) * 108deg));
  transform-origin: 150px 126px;
  transform-box: view-box;
  transition: transform .14s cubic-bezier(.2,.75,.35,1);
}

/* ===== Versión WEB (navegador): ocultar los controles que solo aplican en la
   app de escritorio Electron (barra de ventana, auto-updater, interfaz serie,
   salir). El resto de la UI funciona igual en el navegador. ===== */
.web .winbtns,
.web #btnUpdate,
.web #btnRemote,
.web #btnExit { display: none !important; }

/* ===== Perfil de usuario (Ajustes + modal de perfil) ===== */
#settingsModal .modal { max-height: 88vh; overflow-y: auto; }
.modal input[type="file"] { display: none; }   /* se dispara con "Cambiar foto" */
.set-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 2px 0 14px; }
#settingsModal .chk { display: flex; margin: 10px 0; }
.softbtn:disabled { opacity: .5; cursor: default; }

/* Avatar (foto de perfil) */
.avatar-wrap { width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg,#12202c,#0a0f14); border: 2px solid #274056; display: flex; align-items: center; justify-content: center; }
.avatar-wrap.lg { width: 92px; height: 92px; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-img[hidden] { display: none; }   /* el atributo hidden debe ganar a display:block */
.avatar-ph { font-size: 26px; font-weight: 800; color: var(--blue); letter-spacing: 1px; }
.avatar-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.softbtn.small { padding: 6px 12px; font-size: 12px; height: auto; width: auto; }

/* Modal de perfil */
.profile-modal { width: 420px; max-width: 92vw; text-align: center; }
.prof-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.prof-call { font-size: 22px; font-weight: 800; color: #7fe0ff; letter-spacing: 1px; margin-top: 4px; }
.prof-name { font-size: 14px; color: var(--text); margin-top: 3px; }
.prof-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.prof-badge { font-size: 11px; font-weight: 800; padding: 4px 11px; border-radius: 20px; }
.prof-badge.lic { background: rgba(52,208,88,.16); color: #6fe08c; }
.prof-badge.free { background: rgba(255,207,63,.16); color: #ffcf3f; }
.prof-rows { text-align: left; background: #0a0c0f; border: 1px solid #000; border-radius: 10px; padding: 4px 14px; margin-bottom: 14px; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); }
.prof-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #15181c; font-size: 14px; }
.prof-row:last-child { border-bottom: none; }
.prof-row .lbl { color: var(--text-dim); }
.prof-row .val { color: #eafaff; text-align: right; word-break: break-word; }
.prof-empty { color: var(--text-dim); font-size: 13px; padding: 12px 0; text-align: center; }

/* Cluster: indicativo (perfil) y frecuencia (ir) clicables por separado */
.cl-row .cl-prof { cursor: pointer; }
.cl-row .cl-prof:hover { color: var(--blue); text-decoration: underline; }
.cl-row .cl-goto { cursor: pointer; }
.cl-row .cl-goto:hover { color: #fff; text-decoration: underline; }
/* ---------- Mensajería privada ---------- */
.updbtn { position: relative; }
.inbox-badge { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #ff3b30; color: #fff; font-size: 9px; font-weight: 800; line-height: 15px; text-align: center; }
.inbox-badge[hidden] { display: none; }
.prof-msg-btn { width: 100%; height: 42px; margin-bottom: 12px; background: linear-gradient(180deg, #34d571, #1faf57) !important; color: #04121c !important; font-weight: 800; }
.prof-msg-btn[hidden] { display: none; }
.softbtn.small { padding: 6px 12px; font-size: 12px; height: auto; width: auto; }
.msg-modal { width: 460px; max-width: 92vw; }
.msg-modal .msg-to { font-size: 13px; color: var(--cyan); margin-bottom: 10px; font-weight: 700; }
.msg-modal textarea { width: 100%; margin-top: 4px; padding: 10px; background: #0a0c0f; border: 1px solid #000; border-radius: 8px; color: #eafaff; font-size: 14px; resize: vertical; min-height: 80px; font-family: inherit; box-shadow: inset 0 2px 4px rgba(0,0,0,.7); }
.msg-modal textarea:focus { outline: 1px solid var(--blue); }
.msg-tools { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.emoji-panel { display: flex; flex-wrap: wrap; max-height: 180px; overflow-y: auto; background: #0a0c0f; border: 1px solid #000; border-radius: 8px; padding: 6px; margin-bottom: 10px; }
.emoji-panel[hidden] { display: none; }
.emoji-panel .emoji { width: 10%; background: none; border: none; font-size: 20px; padding: 4px 0; cursor: pointer; border-radius: 6px; text-align: center; }
.emoji-panel .emoji:hover { background: rgba(42,168,255,.2); }
.inbox-modal { width: 480px; max-width: 92vw; }
.inbox-list { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.inbox-item { background: #0a0c0f; border: 1px solid #000; border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.inbox-item.unread { border-color: var(--blue); }
.inbox-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 13px; }
.inbox-from { font-weight: 800; color: #eafaff; }
.inbox-when { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.inbox-text { color: var(--text); font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; }
.inbox-acts { display: flex; gap: 8px; justify-content: flex-end; }
.softbtn.red { background: linear-gradient(180deg, #ff6a60, #b3271f) !important; color: #fff !important; }

/* Botón "PARAR DE HABLAR" (break-in 11m) */
.ov-break { pointer-events: auto; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 2px 10px; border-radius: 4px; white-space: nowrap; color: #ffd27f; background: rgba(120,60,0,.45); border: 1px solid rgba(255,160,40,.55); }
.ov-break:hover { background: rgba(160,80,0,.6); color: #ffe6bf; }
.ov-break.cooldown { opacity: .5; cursor: default; }
/* En 11m el botón PARAR DE HABLAR se muestra como RESET (mismo estilo morado que RESET-TIME). */
.ov-break.as-reset { color: #cbb6ff; background: rgba(70,40,120,.4); border-color: rgba(150,110,240,.5); }
.ov-break.as-reset:hover { background: rgba(95,55,160,.55); color: #e6d9ff; }

/* Botón "QSY" (11m) */
.ov-qsy { pointer-events: auto; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 2px 10px; border-radius: 4px; white-space: nowrap; color: #a9ffcf; background: rgba(0,90,50,.4); border: 1px solid rgba(60,220,140,.5); }
.ov-qsy:hover { background: rgba(0,120,70,.55); color: #d6ffe9; }
.ov-block { pointer-events: auto; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 2px 10px; border-radius: 4px; white-space: nowrap; color: #ffc9c9; background: rgba(120,0,0,.45); border: 1px solid rgba(255,80,80,.55); }
.ov-block:hover { background: rgba(170,0,0,.6); color: #fff; }
.ov-block.on { color: #fff; background: rgba(210,0,0,.85); border-color: #ff6a6a; box-shadow: 0 0 10px rgba(255,60,60,.75); animation: blockPulse 1.6s ease-in-out infinite; }
@keyframes blockPulse { 0%,100% { box-shadow: 0 0 8px rgba(255,60,60,.6); } 50% { box-shadow: 0 0 16px rgba(255,60,60,.95); } }

/* Botón "RESET-TIME" (11m) */
.ov-reset { pointer-events: auto; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 2px 10px; border-radius: 4px; white-space: nowrap; color: #cbb6ff; background: rgba(70,40,120,.4); border: 1px solid rgba(150,110,240,.5); }
.ov-reset:hover { background: rgba(95,55,160,.55); color: #e6d9ff; }

/* Cuenta atrás QSY (discreta) */
.ov-qsycount { align-self:center; margin-top:2px; font-family:"Consolas",monospace; font-weight:800; font-size:12px; letter-spacing:1px; color:#9fe6c0; padding:1px 9px; border-radius:10px; background:rgba(0,70,45,.35); border:1px solid rgba(60,210,150,.35); }

/* Botón "RETURN" (11m) */
.ov-return { pointer-events: auto; cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 2px 10px; border-radius: 4px; white-space: nowrap; color: #ffd0a0; background: rgba(120,70,20,.4); border: 1px solid rgba(240,160,70,.5); }
.ov-return:hover { background: rgba(160,95,30,.55); color: #ffe6cf; }

/* Flechas ±1 kHz del QSY HF (junto al botón QSY del LCD) */
.ov-qsystep { pointer-events: auto; cursor: pointer; padding: 1px 6px; font-size: 12px; font-weight: 800; }
.ov-qsystep:hover { text-shadow: 0 0 8px rgba(52,208,88,.9); }

/* ===== LLAMADOR DE CQ / VOICE TX (estilo IC-7610) ===== */
.voice-modal { width: min(680px, 94vw); }
.voice-modal .v-hint { font-size: 12.5px; color: var(--text-dim); margin: -4px 0 14px; line-height: 1.4; }
.v-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.v-macro { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 92px;
  border-radius: 10px; padding: 8px 8px 6px; cursor: pointer; user-select: none;
  background: linear-gradient(180deg, #1b2735, #10161f); border: 1px solid rgba(90,150,220,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.45); transition: transform .08s, border-color .15s, box-shadow .15s; }
.v-macro:hover { transform: translateY(-2px); border-color: rgba(90,180,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 14px rgba(42,168,255,.25); }
.v-macro .v-tag { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--blue); }
.v-macro .v-name { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 15px; font-weight: 700; color: #eaf4ff; padding: 4px 2px; line-height: 1.15; word-break: break-word; }
.v-macro .v-st { font-size: 10px; text-align: center; color: var(--text-dim); }
.v-macro.empty { border-style: dashed; opacity: .78; }
.v-macro.empty .v-name { color: var(--text-dim); font-weight: 600; }
.v-macro.selected { border-color: var(--blue); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 16px rgba(42,168,255,.45); }
.v-macro.selected .v-tag { color: #fff; }
.v-macro.selected .v-name::after { content:' ◄'; color: var(--blue); font-size: 12px; }
.v-macro.recording { border-color: #ff3b57; box-shadow: 0 0 16px rgba(255,60,90,.5); animation: vpulse 1s infinite; }
.v-macro.recording .v-st { color: #ff8090; }
.v-macro.playing { border-color: #2aff8a; box-shadow: 0 0 16px rgba(42,255,138,.45); }
.v-macro.playing .v-st { color: #7dffb0; }
.v-macro.repeating { border-color: #ffcf3b; box-shadow: 0 0 16px rgba(255,200,60,.45); }
.v-macro.repeating .v-st { color: #ffdf7d; }
@keyframes vpulse { 0%,100%{ box-shadow: 0 0 8px rgba(255,60,90,.35);} 50%{ box-shadow: 0 0 20px rgba(255,60,90,.7);} }
.v-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
  border-top: 1px solid rgba(90,150,220,.18); padding-top: 12px; }
.v-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v-lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--text-dim); }
.v-sep { flex: 1; }
.v-slider { flex: 0 0 150px; accent-color: var(--blue); }
.v-val { font-size: 13px; font-weight: 700; color: var(--cyan); min-width: 28px; }
.v-select { background: #10161f; color: var(--text); border: 1px solid rgba(90,150,220,.35); border-radius: 8px; padding: 5px 8px; font-size: 13px; }
.v-mode.active { color: #fff; border-color: var(--blue); box-shadow: 0 0 12px rgba(42,168,255,.5); background: linear-gradient(180deg, #1e6fb0, #14507f); }
#vRecBtn.active { border-color: #ff3b57; box-shadow: 0 0 12px rgba(255,60,90,.5); background: linear-gradient(180deg, #b03040, #7f2028); }
#vRepBtn.active { border-color: #ffcf3b; box-shadow: 0 0 12px rgba(255,200,60,.5); background: linear-gradient(180deg, #b08a20, #7f6414); color:#fff; }
.v-recstat { font-size: 12px; font-weight: 700; color: #ff8090; }
.v-repstat { font-size: 12px; font-weight: 700; color: #ffdf7d; margin-left: auto; }
.v-stop:not(:disabled) { border-color: #ff3b57; color: #ff9aa8; box-shadow: 0 0 10px rgba(255,60,90,.35); }
.v-stop:disabled { opacity: .4; cursor: default; }
.v-name-edit { background:#0a1017; color:#eaf4ff; border:1px solid var(--blue); border-radius:6px;
  text-align:center; font-size:14px; font-weight:700; padding:3px 4px; width:100%; box-sizing:border-box; outline:none; }
@media(max-width:520px){ .v-macros{ grid-template-columns: repeat(2,1fr); } }

/* ============================ QSL (logbook + tarjetas) ============================ */
.qsl-modal { max-width: 560px; width: 96vw; }
.qsl-tabs { display: flex; gap: 6px; margin: 4px 0 10px; flex-wrap: wrap; }
.qsl-tab {
  flex: 1 1 auto; min-width: 92px; padding: 9px 6px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, #22262c, #14171b); color: var(--dim);
  white-space: nowrap; transition: color .12s, border-color .12s, background .12s;
}
.qsl-tab.active { color: #fff; border-color: var(--blue-dim); background: linear-gradient(180deg, #204a68, #12222e); box-shadow: 0 0 0 1px rgba(42,168,255,.25) inset; }
.qsl-list { max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.qsl-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
.qsl-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qsl-call { font-size: 17px; font-weight: 800; color: var(--cyan); letter-spacing: .5px; }
.qsl-when { font-size: 11px; color: var(--dim); }
.qsl-meta { margin-top: 4px; font-size: 12.5px; color: var(--text); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.qsl-meta b { color: var(--blue); font-weight: 700; }
.qsl-tag { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .4px; }
.qsl-tag.ok { background: rgba(64,200,120,.16); color: #57d98a; border: 1px solid rgba(64,200,120,.35); }
.qsl-tag.wait { background: rgba(255,180,60,.14); color: #ffc352; border: 1px solid rgba(255,180,60,.32); }
.qsl-tag.mail { background: rgba(42,168,255,.14); color: var(--cyan); border: 1px solid rgba(42,168,255,.32); }
.qsl-acts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.qsl-btn {
  flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  border: 1px solid var(--line); border-radius: 9px; color: var(--text);
  background: linear-gradient(180deg, #2a3a4a, #16202a);
}
.qsl-btn:hover { color: #fff; border-color: var(--blue-dim); box-shadow: 0 0 10px rgba(42,168,255,.22); }
.qsl-empty { color: var(--dim); text-align: center; padding: 26px 10px; font-size: 14px; }

/* Tarjeta (componer/ver) */
.qslc-modal { max-width: 620px; width: 96vw; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.qslc-pickbtn {
  flex: 1 1 100%; min-height: 46px; margin-top: 2px; padding: 10px 12px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 800; letter-spacing: .2px; color: var(--cyan);
  border: 1px dashed rgba(42,168,255,.55); border-radius: 10px;
  background: linear-gradient(180deg, #16242f, #0e1a24);
}
.qslc-pickbtn:hover { color: #fff; border-style: solid; }
.qslc-preview { width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 6px 22px rgba(0,0,0,.5); }
.qslc-preview canvas { display: block; width: 100%; height: auto; }
.qslc-form { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.qslc-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dim); font-weight: 600; }
.qslc-lbl input {
  height: 38px; padding: 0 10px; font-size: 15px; color: var(--text); font-family: inherit;
  background: #0d0f12; border: 1px solid var(--line); border-radius: 9px;
}
.qslc-lbl input:focus { outline: none; border-color: var(--blue-dim); }
.qslc-row { display: flex; gap: 8px; }
.qslc-row .qslc-lbl { flex: 1; }
.qslc-bglabel { font-size: 12px; color: var(--dim); font-weight: 600; margin-top: 2px; }
.qslc-bgs { display: flex; flex-wrap: wrap; gap: 7px; max-height: 168px; overflow-y: auto; padding: 2px 2px 4px; }
.qslc-bg {
  flex: 0 0 auto; width: 72px; height: 46px; border-radius: 8px; cursor: pointer;
  background-size: cover; background-position: center; border: 2px solid transparent; opacity: .72;
  transition: opacity .12s, border-color .12s;
}
.qslc-bg:hover { opacity: 1; }
.qslc-bg.sel { border-color: var(--blue); opacity: 1; box-shadow: 0 0 0 1px rgba(42,168,255,.4); }
.qslc-up {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 20px; font-weight: 800; color: var(--cyan); opacity: 1;
  background: linear-gradient(180deg, #1c3446, #0e1a24); border-color: rgba(42,168,255,.45);
}
.qslc-up span { font-size: 9px; font-weight: 700; letter-spacing: .2px; }
/* Modo "solo ver": oculta el formulario y el botón enviar */
.qslc-modal.view .qslc-form, .qslc-modal.view #qslcSend { display: none; }

/* ============================ Usuarios muteados (moderadores) ============================ */
.mutes-modal { max-width: 480px; width: 96vw; }
.mutes-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mute-item { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.mute-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mute-call { font-size: 16px; font-weight: 800; color: #ffcf6b; letter-spacing: .4px; }
.mute-meta { margin-top: 5px; font-size: 12px; color: var(--dim, #6b7681); }
.mute-meta b { color: var(--cyan); font-weight: 700; }
.mute-reason { margin-top: 3px; font-size: 13px; color: var(--text); }
.mute-noreason { color: var(--dim, #6b7681); }
.mute-item .mini { padding: 7px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, #2a3a4a, #16202a); }
.mute-item .mini.green { border-color: rgba(64,200,120,.4); color: #eafff2; background: linear-gradient(180deg, #1f8a4c, #14603a); }
.mute-item .mini.green:hover { filter: brightness(1.12); }

.updbtn[hidden] { display: none; }   /* el botón 🛡️ (muteados) SOLO se ve a moderadores */

/* ================= MEMORIAS DE FRECUENCIA ================= */
.mem-modal { max-width: 470px; }
.mem-intro { font-size: 12px; color: #8fa6b6; line-height: 1.5; margin: -8px 0 14px; }
.mem-save-btn { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid #2f7fbf; border-radius: 10px;
  background: linear-gradient(180deg,#4fb6ff,#1c7fc4); color: #04121c; font-weight: 800; font-size: 14px;
  letter-spacing: .5px; cursor: pointer; }
.mem-save-btn:hover { filter: brightness(1.08); }
.mem-list { max-height: 44vh; overflow-y: auto; margin-bottom: 14px; }
.mem-item { display: flex; gap: 8px; margin-bottom: 8px; }
.mem-go { flex: 1; text-align: left; padding: 9px 12px; border: 1px solid #24303c; border-radius: 9px;
  background: #10161d; color: #dfe7f2; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.mem-go:hover { background: #16202a; border-color: #2f6d99; }
.mem-name { font-size: 13px; font-weight: 700; color: #eafaff; }
.mem-freq { font-size: 15px; font-weight: 800; color: #4fb6ff; letter-spacing: .5px; }
.mem-sub { font-size: 11px; color: #8fa6b6; }
.mem-del { flex: 0 0 44px; border: 1px solid #5a2420; border-radius: 9px; background: #1c1113; color: #ff8b82;
  font-size: 16px; cursor: pointer; }
.mem-del:hover { background: #2a1618; }
.mem-empty { text-align: center; color: #8fa6b6; font-size: 13px; line-height: 1.6; padding: 22px 10px; }

/* Boton de guardar cuando el servidor todavia no tiene las memorias. */
.mem-save-btn.apagado { opacity: .35; filter: grayscale(1); cursor: default; }