:root{
  --bg: #12161D;
  --panel: #1A2029;
  --panel-2: #1F2630;
  --card: #171D26;
  --line: #2A3140;
  --line-soft: #232A36;
  --text: #E9ECF1;
  --muted: #8892A0;
  --muted-2: #616B7A;
  --amber: #F0BD3B;
  --amber-dim: #6B5A28;
  --amber-text: #1A1400;
  --teal: #34ADA0;
  --teal-dim: #234943;
  --danger: #E5484D;
  --danger-dim: #5C2A2C;

  /* Status das portas */
  --st-livre: #2F80FF;
  --st-online: #2FBE73;
  --st-offline: #E5484D;
  --st-semid: #D9A521;
  --st-desativado: #6B7280;
  --st-defeito: #F2803A;
  --st-remanejar: #8C7CF0;

  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
}
*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; height: 100%; }
body{
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(240,189,59,0.06), transparent 40%),
    radial-gradient(circle at 88% 100%, rgba(52,173,160,0.07), transparent 42%);
  color: var(--text); font-family: var(--sans); font-size: 14px; min-height: 100vh;
}
button, input, select, textarea{ font: inherit; color: inherit; }
a{ color: var(--amber); }
::selection{ background: rgba(240,189,59,0.3); }
.mono{ font-family: var(--mono); }
.muted{ color: var(--muted); }
.hidden{ display: none !important; }
#app{ min-height: 100vh; }

/* ---------- Botões / campos ---------- */
.btn{
  font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer;
  transition: all .12s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.btn:hover{ border-color: var(--muted-2); }
.btn.primary{ background: var(--amber); border-color: var(--amber); color: var(--amber-text); }
.btn.primary:hover{ filter: brightness(1.08); }
.btn.ghost{ background: transparent; }
.btn.teal{ background: var(--teal); border-color: var(--teal); color: #06231F; }
.btn.danger-ghost{ color: var(--danger); border-color: var(--danger-dim); background: transparent; }
.btn.sm{ padding: 6px 10px; font-size: 12px; }
.btn.block{ width: 100%; }
.btn svg{ width: 14px; height: 14px; flex-shrink: 0; }
.btn:disabled{ opacity: .4; cursor: not-allowed; }
.icon-btn{ background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 7px; cursor: pointer; color: var(--muted); display: inline-flex; }
.icon-btn:hover{ color: var(--text); border-color: var(--line); }
.icon-btn svg{ width: 16px; height: 16px; }

.field{ margin-bottom: 14px; }
.field label{ display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; font-weight: 600; }
.input, .field input, .field select, .field textarea{
  width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  color: var(--text); font-size: 14px; outline: none; transition: border-color .15s;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--amber); }
.field .readonly{ font-family: var(--mono); font-size: 14px; font-weight: 700; padding: 6px 0; text-transform: uppercase; }
.field .help{ font-size: 12px; color: var(--muted); margin-top: 6px; }
.field .help.warn{ color: var(--amber); }

.eyebrow{
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); display: flex; align-items: center; gap: 8px;
}
.eyebrow .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--amber); }

.badge{
  font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.badge .k{ color: var(--muted-2); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; }
.badge .v{ color: var(--text); font-weight: 700; }
.pill{ font-family: var(--mono); font-size: 10px; letter-spacing: .04em; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; font-weight: 700; white-space: nowrap; }

.copyable{ cursor: pointer; transition: opacity .12s; }
.copyable:hover{ opacity: .68; }

/* ---------- Toast / modal / banner ---------- */
.toast{
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(10px);
  font-size: 13px; font-family: var(--mono); padding: 10px 16px; border-radius: 8px; max-width: 90vw;
  opacity: 0; pointer-events: none; transition: all .2s; z-index: 200;
  background: var(--teal-dim); border: 1px solid var(--teal); color: var(--teal);
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err{ background: var(--danger-dim); border-color: var(--danger); color: #FF8F8F; }

.modal-bg{ position: fixed; inset: 0; background: rgba(5,7,10,.66); backdrop-filter: blur(3px); z-index: 150; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal{ background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.modal.wide{ max-width: 720px; }
.modal-head{ padding: 18px 20px 0; display: flex; align-items: center; gap: 10px; }
.modal-head h3{ margin: 0; font-size: 16px; }
.modal-head .icon-btn{ margin-left: auto; }
.modal-body{ padding: 16px 20px; }
.modal-foot{ padding: 0 20px 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
pre.resumo{ white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0; max-height: 55vh; overflow: auto; }

.update-banner{
  position: fixed; top: 0; left: 0; right: 0; z-index: 180; text-align: center; padding: 8px; font-size: 13px;
  background: var(--amber); color: var(--amber-text); font-weight: 600;
}

/* ---------- Login ---------- */
.auth-wrap{ min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero{
  position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 20% 20%, rgba(240,189,59,.10), transparent 45%),
    radial-gradient(circle at 80% 90%, rgba(52,173,160,.12), transparent 45%);
}
.auth-hero h1{ font-family: var(--mono); font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 18px 0 14px; letter-spacing: -.02em; }
.auth-hero p{ color: var(--muted); max-width: 440px; line-height: 1.6; }
.hero-ports{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; max-width: 460px; }
.hero-ports span{ aspect-ratio: 1; border-radius: 8px; opacity: .9; animation: heroPulse 3.2s ease-in-out infinite; }
@keyframes heroPulse{ 0%,100%{ opacity: .9; } 50%{ opacity: .45; } }
.auth-side{ display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card{ width: 100%; max-width: 380px; }
.auth-card h2{ font-size: 22px; margin: 10px 0 6px; }
.auth-card .sub{ color: var(--muted); margin: 0 0 24px; font-size: 13.5px; }
.role-opts{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.role-opt{ border: 1.5px solid var(--line); border-radius: 9px; padding: 12px; cursor: pointer; text-align: center; background: var(--bg); transition: all .12s; }
.role-opt:hover{ border-color: var(--muted-2); }
.role-opt.active{ border-color: var(--amber); background: rgba(240,189,59,.08); color: var(--amber); }
.role-opt b{ display: block; font-size: 13px; }
.role-opt small{ color: var(--muted); font-size: 11px; }

/* ---------- Topbar ---------- */
.topbar{
  display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft);
  background: rgba(18,22,29,.94); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 40;
}
.brand{ display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.brand-mark{ width: 30px; height: 30px; border-radius: 8px; background: var(--amber); display: grid; place-items: center; color: var(--amber-text); }
.brand-mark svg{ width: 18px; height: 18px; }
.brand b{ font-family: var(--mono); font-size: 14px; letter-spacing: .02em; }
.brand small{ display: block; font-size: 10px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; }
.top-search{ flex: 1; max-width: 640px; margin: 0 auto; position: relative; }
.top-search > svg{ position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted-2); pointer-events: none; }
.top-search input{
  width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px 11px 38px;
  font-size: 14px; outline: none; transition: border-color .15s;
}
.top-search input:focus{ border-color: var(--amber); }
.top-search kbd{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.search-pop{
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5); max-height: 70vh; overflow-y: auto; padding: 6px; z-index: 60;
}
.sp-group{ font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding: 10px 10px 4px; }
.sp-item{ display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.sp-item:hover, .sp-item.kb{ background: var(--panel-2); }
.sp-item .ic{ width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--bg); color: var(--muted); flex-shrink: 0; }
.sp-item .ic svg{ width: 15px; height: 15px; }
.sp-item .t{ flex: 1; min-width: 0; }
.sp-item .t b{ display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-item .t small{ color: var(--muted); font-size: 12px; }
.sp-item .r{ font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.sp-empty{ padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
mark{ background: rgba(240,189,59,.25); color: inherit; border-radius: 2px; }

.user-chip{ display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border: 1px solid var(--line); border-radius: 99px; cursor: pointer; background: var(--panel); flex-shrink: 0; position: relative; }
.user-chip .av{ width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--teal-dim); color: var(--teal); }
.user-chip .nm{ font-size: 13px; font-weight: 600; line-height: 1.1; }
.user-chip .fn{ font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.menu{ position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-width: 190px; box-shadow: 0 20px 50px rgba(0,0,0,.45); z-index: 70; }
.menu button{ display: flex; width: 100%; gap: 8px; align-items: center; background: transparent; border: 0; padding: 9px 10px; border-radius: 7px; cursor: pointer; text-align: left; font-size: 13px; }
.menu button:hover{ background: var(--panel-2); }
.menu button svg{ width: 15px; height: 15px; color: var(--muted); }

/* ---------- Seletores do topo (Cidade / Transmissor) ---------- */
.pickers{ display: flex; gap: 8px; flex: 1; min-width: 0; }
.picker{ position: relative; min-width: 0; }
.pk-btn{
  display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 12px 6px 8px; cursor: pointer; text-align: left; min-width: 200px; max-width: 340px; transition: border-color .15s;
}
.pk-btn:hover{ border-color: var(--muted-2); }
.pk-ic{ width: 30px; height: 30px; border-radius: 8px; background: var(--bg); display: grid; place-items: center; color: var(--amber); flex-shrink: 0; }
.pk-ic svg{ width: 16px; height: 16px; }
.pk-t{ flex: 1; min-width: 0; }
.pk-t small{ display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.pk-t b{ display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-car{ color: var(--muted-2); font-size: 11px; }
.picker.vazio .pk-t b{ color: var(--amber); }
.picker.desab .pk-btn{ opacity: .5; }
.pk-pop{
  position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: 8px; z-index: 60;
}
.pk-pop .input{ padding: 9px 11px; font-size: 13px; margin-bottom: 6px; }
.pk-list{ max-height: 60vh; overflow-y: auto; }
.sp-item.on b{ color: var(--amber); }

/* ---------- Indicador de conexão em tempo real ---------- */
.live{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); flex-shrink: 0; }
.live i{ width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: livePulse 2s ease-in-out infinite; }
.live.off{ color: var(--danger); }
.live.off i{ background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.live.off span::after{ content: ' · reconectando'; }
@keyframes livePulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .4; } }

/* ---------- Registrar / editar caixa ---------- */
.side-row{ display: flex; gap: 8px; }
.side-row .side-search{ flex: 1; min-width: 0; }
.side-row .btn{ padding: 0 12px; }
.side-row .btn svg{ width: 15px; height: 15px; }
.tag-novo{ font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--teal); border: 1px solid var(--teal-dim); border-radius: 5px; padding: 1px 5px; }
.dt-title{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.dt-title h2{ margin: 0 !important; }
.dt-sub{ font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; }
.cap-seg{ margin-top: 0; }
.cap-seg button{ padding: 7px 6px; font-family: var(--mono); font-size: 12px; }

/* ---------- Remap: modo visualização (outro projetista editando) ---------- */
.ro-banner{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 22px; background: rgba(140,124,240,.12); border-bottom: 1px solid rgba(140,124,240,.35); color: #C9C0FF; font-size: 13px; }
.ro-banner svg{ width: 16px; height: 16px; flex-shrink: 0; }
.ro-banner .btn{ margin-left: auto; }
.somente-leitura .port, .somente-leitura .wait-card{ cursor: default; }
.somente-leitura .port:hover, .somente-leitura .wait-card:hover{ transform: none; filter: none; }
.tec-input{ width: 170px !important; }

/* ---------- Explorar: caixas na lateral + detalhe ---------- */
.explore{ display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 63px); }
.cto-side{ border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: rgba(255,255,255,0.012); }
.side-head{ padding: 14px 12px 10px; flex-shrink: 0; border-bottom: 1px solid var(--line-soft); }
.side-search{ position: relative; }
.side-search > svg{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted-2); pointer-events: none; }
.side-search input{ width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 36px 11px 38px; font-size: 14px; outline: none; transition: border-color .15s; }
.side-search input:focus{ border-color: var(--amber); }
.side-search kbd{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.side-ctx{ font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.7; }
.side-ctx:empty{ display: none; }
.side-ctx b{ color: var(--text); font-family: var(--mono); }
.side-group{ font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); padding: 14px 6px 6px; }
.col-list{ flex: 1; overflow-y: auto; padding: 8px 8px 16px; }
.col-empty{ padding: 30px 14px; text-align: center; color: var(--muted-2); font-size: 13px; line-height: 1.5; }
.item{ padding: 10px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; margin-bottom: 2px; transition: background .1s; }
.item:hover{ background: rgba(255,255,255,.03); }
.item.active{ background: rgba(240,189,59,.07); border-color: var(--amber-dim); }
.item .row1{ display: flex; align-items: center; gap: 8px; }
.item .name{ font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item.active .name{ color: var(--amber); }
.item .meta{ font-size: 11.5px; color: var(--muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.item .meta b{ color: var(--text); font-family: var(--mono); font-weight: 600; }
.txid{ font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.occ{ height: 4px; border-radius: 99px; background: var(--line-soft); margin-top: 7px; overflow: hidden; }
.occ i{ display: block; height: 100%; border-radius: 99px; background: var(--teal); }
.occ.full i{ background: var(--danger); }
.occ.high i{ background: var(--amber); }
.dot-draft{ width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); flex-shrink: 0; }
.seg{ display: flex; gap: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 2px; margin-top: 8px; }
.seg button{ flex: 1; background: transparent; border: 0; border-radius: 5px; padding: 4px 6px; font-size: 11px; color: var(--muted); cursor: pointer; }
.seg button.on{ background: var(--panel-2); color: var(--amber); }

.detail{ overflow-y: auto; min-width: 0; position: relative; }
.detail-empty{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--muted); }
.detail-empty .big{ width: 64px; height: 64px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; margin-bottom: 16px; color: var(--amber); }
.detail-empty .big svg{ width: 28px; height: 28px; }
.detail-empty h3{ color: var(--text); margin: 0 0 6px; }
.detail-empty p{ max-width: 360px; line-height: 1.6; margin: 0; font-size: 13.5px; }
.steps{ display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.steps span{ font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line); }

.dt{ padding: 22px 26px 110px; }
.dt-head h2{ font-family: var(--mono); font-size: clamp(22px, 2.4vw, 30px); margin: 6px 0 12px; letter-spacing: -.01em; }
.dt-badges{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pon-edit{ display: inline-flex; align-items: center; gap: 6px; }
.pon-edit input{ width: 90px; background: transparent; border: 0; border-bottom: 1px dashed var(--muted-2); padding: 0 2px; font-family: var(--mono); font-weight: 700; font-size: 12px; outline: none; color: var(--text); }
.pon-edit input:focus{ border-bottom-color: var(--amber); }
.dt-section{ margin-top: 24px; }
.dt-section h4{ font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.st-chips{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.st-chip{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); }
.st-chip i{ width: 8px; height: 8px; border-radius: 3px; }
.st-chip b{ font-family: var(--mono); }
.mini-ports{ display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.mini-port{ border-radius: 9px; padding: 8px 9px; color: #fff; min-height: 64px; display: flex; flex-direction: column; cursor: pointer; transition: transform .1s; min-width: 0; }
.mini-port:hover{ transform: translateY(-2px); }
.mini-port .n{ font-family: var(--mono); font-size: 10px; font-weight: 700; opacity: .9; }
.mini-port .i{ font-family: var(--mono); font-size: 14px; font-weight: 700; margin-top: auto; overflow: hidden; text-overflow: ellipsis; }
.mini-port .l{ font-size: 10px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-port.hl{ box-shadow: 0 0 0 3px #fff; }

table.tbl{ width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th{ text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td{ padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.tbl tr:hover td{ background: rgba(255,255,255,.015); }
.tbl tr.hl td{ background: rgba(240,189,59,.08); }
.tbl .mono{ font-size: 12.5px; }
.tbl-wrap{ border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; background: var(--card); }

.hist-item{ display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 9px; margin-bottom: 6px; align-items: center; background: var(--card); }
.hist-item .when{ font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.hist-item .who{ flex: 1; font-size: 13px; }
.hist-item .who small{ color: var(--muted); }

.cta-bar{ position: sticky; bottom: 0; margin: 0 -26px; padding: 14px 26px; background: linear-gradient(transparent, var(--bg) 30%); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cta-bar .btn{ padding: 13px 22px; font-size: 14px; }
.cta-bar .note{ font-size: 12.5px; color: var(--muted); }

.mobile-back{ display: none; }

/* ---------- Remap ---------- */
#remapWrap{ display: flex; flex-direction: column; height: 100vh; }
.rm-header{ padding: 14px 22px 12px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; background: rgba(18,22,29,.94); backdrop-filter: blur(10px); z-index: 30; }
.rm-top{ display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rm-title{ flex: 1; min-width: 260px; }
.rm-title .head-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.rm-title h1{ font-size: clamp(20px, 2.6vw, 27px); font-weight: 700; margin: 0; letter-spacing: -0.01em; font-family: var(--mono); }
.rm-actions{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.save-state{ font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.save-state.dirty{ color: var(--amber); }
.rm-toolbar{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.search-wrap{ position: relative; flex: 1 1 240px; min-width: 200px; max-width: 380px; }
.search-wrap svg{ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted-2); }
.search-wrap input{ width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px 9px 34px; font-family: var(--mono); font-size: 13px; outline: none; }
.search-wrap input:focus{ border-color: var(--amber); }
.stats{ display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); align-items: center; flex: 1; }
.stats b{ color: var(--text); font-family: var(--mono); }
.stats .legend{ display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.legend-item{ display: flex; align-items: center; gap: 5px; }
.legend-dot{ width: 9px; height: 9px; border-radius: 3px; }

.app-body{ flex: 1; min-height: 0; display: flex; position: relative; overflow: hidden; }
.espera-col{ flex: 0 0 230px; display: flex; flex-direction: column; border-right: 1px solid var(--line-soft); min-height: 0; background: rgba(255,255,255,0.012); }
.espera-head{ padding: 14px 14px 8px; }
.espera-head .ttl{ font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 8px; }
.espera-head .ttl .n{ margin-left: auto; color: var(--muted); }
.espera-head p{ font-size: 11.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
.espera-drop{ flex: 1; overflow-y: auto; margin: 6px 10px 12px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 8px; transition: all .15s; }
.espera-drop.can-drop{ border-color: var(--amber); background: rgba(240,189,59,.04); }
.espera-drop.drop-hover{ border-color: var(--amber); background: rgba(240,189,59,.12); }
.espera-empty{ font-size: 12px; color: var(--muted-2); text-align: center; padding: 22px 8px; line-height: 1.5; }
.espera-empty svg{ width: 26px; height: 26px; display: block; margin: 0 auto 8px; opacity: .6; }
.wait-card{
  border-radius: 10px; padding: 10px 11px; margin-bottom: 7px; cursor: grab; color: #fff; position: relative;
  border: 1px solid transparent; transition: transform .1s, box-shadow .1s;
}
.wait-card:hover{ transform: translateY(-1px); }
.wait-card.picked{ box-shadow: 0 0 0 3px #fff; }
.wait-card.dragging{ opacity: .35; }
.wait-card .wid{ font-family: var(--mono); font-weight: 700; font-size: 17px; }
.wait-card .wl{ font-size: 11.5px; font-weight: 600; text-transform: uppercase; opacity: .95; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-card .wst{ position: absolute; top: 9px; right: 10px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; opacity: .9; }
.wait-card .wfrom{ font-family: var(--mono); font-size: 10px; opacity: .8; margin-top: 2px; }

.main-col{ flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px 20px; overflow-y: auto; }
.move-hint{ background: rgba(240,189,59,.1); border: 1px solid var(--amber-dim); color: var(--amber); border-radius: 9px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.move-hint .btn{ margin-left: auto; }
.ports{ flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(118px, 1fr); gap: 14px; align-content: stretch; }
.ports.p16{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ports.many{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: minmax(118px, auto); }
.port{
  position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; cursor: pointer; transition: all .12s; display: flex; flex-direction: column; min-width: 0; color: #fff;
}
.port:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.port .prow{ display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; flex-wrap: wrap; gap: 4px 8px; }
.port .pn{ font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.port .pstatus-lbl{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.port .pid{ font-family: var(--mono); font-size: clamp(20px, 2.3vw, 32px); font-weight: 700; line-height: 1.15; margin-top: auto; width: fit-content; max-width: 100%; }
.port .pcliente{ font-size: clamp(11.5px, 1vw, 14px); margin-top: 4px; opacity: .95; font-weight: 600; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.port .pcontrato{ margin-top: 6px; align-self: flex-start; background: rgba(0,0,0,.28); }
.port .pv-flag{ position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; }
.port .pv-flag svg{ width: 12px; height: 12px; }
.port .prow + .pv-flag{ top: auto; bottom: 12px; }
.port.livre{ background: var(--st-livre); border-color: var(--st-livre); }
.port.online{ background: var(--st-online); border-color: var(--st-online); }
.port.offline{ background: var(--st-offline); border-color: var(--st-offline); }
.port.semid{ background: var(--st-semid); border-color: var(--st-semid); }
.port.desativado{ background: var(--st-desativado); border-color: var(--st-desativado); }
.port.defeito{ background: var(--st-defeito); border-color: var(--st-defeito); }
.port.remanejar{ background: var(--st-remanejar); border-color: var(--st-remanejar); }
.port .pn, .port .pstatus-lbl, .port .pid, .port .pcliente{ animation: blinkNeutral 2.6s ease-in-out infinite; }
@keyframes blinkNeutral{ 0%,100%{ opacity: 1; } 50%{ opacity: .62; } }
.port.dim{ opacity: .18; }
.port.selected{ box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 14px rgba(255,255,255,0.25); }
.port.target-eligible{ box-shadow: 0 0 0 2px #FFFFFF; animation: targetGlow 1.3s infinite; }
@keyframes targetGlow{ 0%,100%{ box-shadow: 0 0 0 2px #FFFFFF; } 50%{ box-shadow: 0 0 14px rgba(255,255,255,0.7), 0 0 0 2px #FFFFFF; } }
.port.target-blocked{ opacity: .2; }
.port[draggable="true"]{ cursor: grab; }
.port.dragging{ opacity: .35; cursor: grabbing; }
.port.drop-hover{ box-shadow: 0 0 0 3px #FFFFFF, 0 0 20px rgba(255,255,255,0.6); transform: scale(1.02); }
.st-livre{ background: var(--st-livre); } .st-online{ background: var(--st-online); } .st-offline{ background: var(--st-offline); }
.st-semid{ background: var(--st-semid); } .st-desativado{ background: var(--st-desativado); } .st-defeito{ background: var(--st-defeito); } .st-remanejar{ background: var(--st-remanejar); }

#cableLayer{ position: fixed; inset: 0; pointer-events: none; z-index: 25; width: 100%; height: 100%; }
#cableLayer path{ fill: none; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(240,189,59,0.5)); }

.tray{
  position: absolute; top: 0; right: 0; bottom: 0; width: 330px; max-width: 92vw;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -14px 0 40px rgba(0,0,0,0.45);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.3,1); z-index: 40; overflow-y: auto; pointer-events: none;
}
.tray.open{ transform: translateX(0); pointer-events: auto; }
.tray-inner{ padding: 20px; }
.tray-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tray-title{ font-family: var(--mono); font-weight: 700; font-size: 15px; text-transform: uppercase; }
.tray-title .accent{ color: var(--amber); }
.tray-close{ margin-left: auto; }
.tray-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.tray-actions .btn{ text-transform: uppercase; font-size: 12px; }
.tray-sep{ height: 1px; background: var(--line-soft); margin: 14px 0; }
.lookup{ font-size: 12px; border-radius: 8px; padding: 9px 11px; margin: -4px 0 14px; line-height: 1.45; }
.lookup.ok{ background: rgba(52,173,160,.08); border: 1px solid var(--teal-dim); color: #8FDCD3; }
.lookup.warn{ background: rgba(240,189,59,.08); border: 1px solid var(--amber-dim); color: var(--amber); }
.lookup-pick{ display: block; width: 100%; text-align: left; background: rgba(0,0,0,.2); border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; margin-top: 6px; cursor: pointer; font-family: var(--mono); font-size: 12px; }
.lookup-pick:hover{ border-color: var(--amber-dim); }

.confirm-box{ background: rgba(240,189,59,0.06); border: 1px solid var(--amber-dim); border-radius: 10px; padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.confirm-box .cb-port{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
.confirm-box .cb-name{ font-family: var(--mono); font-size: 13.5px; font-weight: 700; word-break: break-word; }
.confirm-box .cb-arrow{ font-family: var(--mono); font-size: 16px; color: var(--amber); }
.confirm-box .actions{ display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

.pill-toggle{ display: flex; gap: 6px; }
.pill-opt{ flex: 1; border: 1.5px solid var(--line); border-radius: 7px; padding: 8px 6px; text-align: center; cursor: pointer; background: var(--bg); font-size: 12.5px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.pill-opt.active{ border-color: var(--amber); background: rgba(240,189,59,0.08); color: var(--amber); }

.side-rail{ flex: 0 0 310px; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line-soft); background: rgba(255,255,255,0.012); }
.rail-tabs{ display: flex; flex-shrink: 0; border-bottom: 1px solid var(--line-soft); }
.rail-tab{ flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--mono); font-size: 11px; padding: 13px 6px 11px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-tab svg{ width: 15px; height: 15px; }
.rail-tab:hover{ color: var(--text); }
.rail-tab.active{ color: var(--amber); border-bottom-color: var(--amber); background: rgba(240,189,59,0.05); }
.rail-tab.warn:not(.active){ color: var(--danger); }
.rail-body{ flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.rail-panel{ display: none; }
.rail-panel.active{ display: block; }
.rail-panel h4{ margin: 0 0 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.offline-form{ display: flex; gap: 6px; margin-bottom: 12px; }
.offline-form input{ background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 12.5px; outline: none; min-width: 0; }
.offline-form input:focus{ border-color: var(--amber); }
.offline-form .oid{ width: 70px; }
.offline-form .ocli{ flex: 1; }
.offline-form button{ background: var(--amber); border: none; border-radius: 6px; padding: 0 12px; color: var(--amber-text); font-weight: 700; cursor: pointer; font-size: 16px; }
.offline-item{ font-size: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.offline-item b{ color: var(--text); }
.offline-item .oi-id{ font-family: var(--mono); color: var(--danger); font-weight: 700; flex-shrink: 0; }
.offline-item .oi-del{ margin-left: auto; background: transparent; border: none; color: var(--muted-2); cursor: pointer; font-size: 15px; }
.offline-item .oi-del:hover{ color: var(--danger); }
.side-empty{ font-size: 12px; color: var(--muted-2); padding: 6px 4px; line-height: 1.5; }
.resumo-filters{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; padding: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); border-radius: 8px; }
.resumo-filters label{ display: flex; align-items: center; gap: 7px; font-size: 11.5px; cursor: pointer; }
.resumo-filters input{ accent-color: var(--amber); }
.resumo-section-title{ font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 14px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.resumo-row{ padding: 8px; border-bottom: 1px solid var(--line-soft); }
.resumo-row .rr-top{ font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.resumo-row .rr-top b{ color: var(--text); }
.resumo-row .rr-name{ font-size: 13px; font-weight: 600; text-transform: uppercase; margin-top: 3px; word-break: break-word; }
.resumo-row .rr-flag{ color: var(--amber); font-size: 11px; }
.paste-textarea{ width: 100%; min-height: 130px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; font-family: var(--mono); font-size: 12.5px; outline: none; resize: vertical; margin-bottom: 12px; }
.preview-toolbar{ display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; flex-wrap: wrap; }
.preview-list{ border: 1px solid var(--line); border-radius: 9px; margin-bottom: 14px; max-height: 300px; overflow-y: auto; }
.preview-row{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.preview-row input{ accent-color: var(--amber); }
.preview-row .pv-id{ font-family: var(--mono); color: var(--danger); font-weight: 700; width: 56px; flex-shrink: 0; }
.preview-row.dup .pv-nome::after{ content: ' · já na lista'; font-size: 10px; color: var(--muted-2); font-family: var(--mono); }

/* ---------- Admin ---------- */
.admin{ max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.admin h2{ margin: 6px 0 18px; font-size: 22px; }
.tabs{ display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button{ background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.tabs button.on{ color: var(--amber); border-bottom-color: var(--amber); }
.admin-grid{ display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.panel-card{ background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.panel-card h3{ margin: 0 0 14px; font-size: 14px; }
.inline-input{ background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 13px; outline: none; width: 100%; }
.inline-input:focus{ border-color: var(--amber); }
.callout{ border: 1px solid var(--amber-dim); background: rgba(240,189,59,.06); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--amber); margin-bottom: 16px; line-height: 1.5; }
.tag-ok{ color: var(--teal); }
.tag-warn{ color: var(--amber); }
.switch{ position: relative; width: 34px; height: 19px; display: inline-block; vertical-align: middle; }
.switch input{ opacity: 0; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span{ position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: .15s; }
.switch span::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: .15s; }
.switch input:checked + span{ background: var(--amber); }
.switch input:checked + span::after{ transform: translateX(15px); }

/* ---------- Responsivo ---------- */
@media (max-width: 1280px){
  .explore{ grid-template-columns: 300px minmax(0, 1fr); }
  .side-rail{ flex-basis: 270px; }
  .espera-col{ flex-basis: 200px; }
}
@media (max-width: 1080px){
  .user-chip .nm, .user-chip .fn{ display: none; }
  .user-chip{ padding: 3px; }
  .brand b, .brand small{ display: none; }
  .admin-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .topbar{ flex-wrap: wrap; }
  .pickers{ order: 3; flex-basis: 100%; }
  .picker{ flex: 1; }
  .pk-btn{ min-width: 0; max-width: none; width: 100%; }
  .pk-ic{ display: none; }
  .brand{ margin-right: auto; }
  .explore{ grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 120px); }
  .explore[data-step="lista"] .detail{ display: none; }
  .explore[data-step="detail"] .cto-side{ display: none; }
  .cto-side{ border-right: 0; min-height: calc(100vh - 120px); }
  .mobile-back{ display: inline-flex; margin-bottom: 8px; }
  .side-search kbd{ display: none; }
  .side-row .btn span{ display: none; }
  .live span{ display: none; }
  .mini-ports{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .auth-wrap{ grid-template-columns: 1fr; }
  .auth-hero{ display: none; }
  #remapWrap{ height: auto; min-height: 100vh; }
  .app-body{ flex-direction: column; overflow: visible; }
  .rm-toolbar{ flex-direction: column; align-items: stretch; }
  .search-wrap{ max-width: none; flex-basis: auto; }
  .stats{ gap: 4px 14px; font-size: 12px; }
  .stats .legend{ display: none; }
  .rm-actions{ width: 100%; }
  .rm-actions .btn.primary{ margin-left: auto; }
  .espera-col{ flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .espera-head{ padding: 10px 16px 0; }
  .espera-head p{ display: none; }
  .espera-drop{ display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; margin: 8px 16px 12px; min-height: 76px; align-items: stretch; }
  .espera-empty{ padding: 10px; width: 100%; }
  .espera-empty svg{ display: none; }
  .wait-card{ flex: 0 0 150px; margin-bottom: 0; }
  .main-col{ padding: 14px 16px; overflow: visible; }
  .ports, .ports.p16{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(118px, auto); }
  .side-rail{ flex-basis: auto; border-left: 0; border-top: 1px solid var(--line-soft); }
  .rail-body{ max-height: 380px; }
  .stats .legend{ margin-left: 0; }
  .tray{ position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 84vh; border-left: 0; border-top: 1px solid var(--line); transform: translateY(100%); border-radius: 16px 16px 0 0; }
  .tray.open{ transform: translateY(0); }
  .rm-header{ padding: 12px 16px; }
  .topbar{ padding: 10px 16px; gap: 10px; }
  .dt{ padding: 16px 16px 110px; }
  .cta-bar{ margin: 0 -16px; padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } }