/* ============================================================
   iFix Telecom — Integração CRM · sistema visual
   Portado do mockup D-Portal14c (snapshot 2026-06-09 17:44)
   ============================================================ */

/* ---------- Plus Jakarta Sans (variable, woff2 local) ---------- */
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#0e0e18;
  --purple:#7B2D8E;
  --purple-deep:#5d2270;
  --red:#E42527;
  --grad:linear-gradient(135deg,#7B2D8E 0%,#E42527 100%);
  --grad-bar:linear-gradient(90deg,#7B2D8E,#E42527);

  --ink:#16181f;
  --ink-soft:#3b4252;
  --muted:#6b7280;
  --faint:#9ca3af;
  --line:#e8eaed;
  --line-soft:#f1f2f4;

  --card:#ffffff;
  --radius:18px;

  --shadow-card:0 30px 70px -20px rgba(8,6,20,.55), 0 8px 24px -12px rgba(8,6,20,.4);
  --ease:cubic-bezier(.4,.14,.2,1);

  --font:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{ margin:0; min-height:100%; }
body{ background:var(--bg); }

/* ---------- Palco (fundo escuro com brilho da marca) ---------- */
.stage{
  font-family:var(--font);
  background:
    radial-gradient(ellipse 60% 50% at 18% 30%, rgba(123,45,142,.20) 0%, transparent 58%),
    radial-gradient(ellipse 55% 50% at 85% 70%, rgba(228,37,39,.14) 0%, transparent 55%),
    var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.stage.full{ min-height:100vh; padding:40px 20px; }
.stage.block{ padding:44px 28px; border-radius:16px; }

/* ---------- Card ---------- */
.card{
  position:relative; overflow:hidden;
  width:100%; max-width:540px;
  background:var(--card);
  border-radius:var(--radius);
  padding:42px 38px 34px;
  text-align:center;
  box-shadow:var(--shadow-card);
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-bar);
}

/* ---------- Logo ---------- */
.brand{ display:flex; justify-content:center; margin-bottom:22px; }
.brand img{ height:52px; width:auto; object-fit:contain; }

/* ---------- Tipografia ---------- */
.card h1{
  color:var(--ink); font-size:22px; font-weight:800;
  letter-spacing:-.02em; line-height:1.2; margin-bottom:7px;
}
.subtitle{
  color:var(--muted); font-size:14px; line-height:1.55;
  max-width:40ch; margin:0 auto 26px;
}
.section-title{
  color:var(--ink-soft); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  margin-bottom:13px; text-align:left;
}

/* ---------- Botão principal ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%;
  background:var(--grad); color:#fff;
  padding:14px 28px; border:none; border-radius:12px;
  font-family:var(--font); font-weight:700; font-size:15px; letter-spacing:.01em;
  cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 10px 22px -8px rgba(123,45,142,.55);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  text-decoration:none;
}
.btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(123,45,142,.6); }
.btn:active:not(:disabled){ transform:translateY(0); }
.btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn.ghost{
  background:#fff; color:var(--purple);
  border:1.5px solid var(--line); box-shadow:none;
}
.btn.ghost:hover:not(:disabled){ border-color:var(--purple); transform:translateY(-2px); box-shadow:0 8px 18px -10px rgba(123,45,142,.4); }

/* ---------- Tela de decisão de location (260616-mgq / D3) ----------
   A seção "NOVA location" (location_choice.html) é um <form> irmão da seção
   "JÁ CADASTRADA". A primeira ganha ritmo vertical do container `.users`
   (padding/margin próprios); a segunda tinha só um `.section-title` + um
   `.btn.ghost` solto, ficando "fora do esquadro". `.choice-section-nova` dá à
   seção NOVA o mesmo respiro vertical e um separador sutil entre as duas
   formas — coerente com `.manage-footer` (margin-top:18px) e `.cta-row`
   (margin-top:24px) das outras telas. Escopo restrito: NÃO toca em
   `.btn`/`.btn.ghost` globais (usados em outras telas). */
.choice-section-nova{
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line-soft);
}
.choice-section-nova .section-title{ margin-bottom:13px; }

/* ---------- Form ---------- */
.field{ margin-bottom:22px; text-align:left; }
.field label{
  display:block; color:var(--ink-soft); font-size:13px; font-weight:700; margin-bottom:9px;
}
.input{
  width:100%; padding:14px 16px;
  border:1.6px solid var(--line); border-radius:12px;
  font-family:var(--font); font-size:16px; color:var(--ink);
  text-align:center; letter-spacing:.04em;
  outline:none; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  background:#fff;
}
.input::placeholder{ color:var(--faint); letter-spacing:0; }
.input:focus{ border-color:var(--purple); box-shadow:0 0 0 4px rgba(123,45,142,.12); }
.input.err{ border-color:var(--red); box-shadow:0 0 0 4px rgba(228,37,39,.10); }
.hint{ color:var(--faint); font-size:12px; margin-top:8px; text-align:left; }
.hint.error{ color:var(--red); font-weight:600; }

/* ---------- Caixa de empresa identificada ---------- */
.client{
  background:#f0fbf4; border:1px solid #c7ebd5; border-radius:13px;
  padding:14px 16px; margin-bottom:22px; text-align:left;
}
.client .check{ color:#0f9d58; font-weight:700; font-size:12px; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.client .check svg{ width:14px; height:14px; }
.infobox .t svg{ width:15px; height:15px; }
.client .name{ color:#0c2a18; font-weight:700; font-size:15px; }
.client .doc{ color:#3f7a59; font-size:12.5px; margin-top:1px; letter-spacing:.02em; }

/* ---------- Grade de CRMs ---------- */
.crm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:24px; }
.crm{
  position:relative; border:1.6px solid var(--line); border-radius:14px;
  padding:14px 8px 11px; text-align:center; background:#fff;
  cursor:default; transition:all .22s var(--ease);
  font-family:var(--font);
}
.crm .mono{
  width:38px; height:38px; margin:0 auto 8px;
  border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:14px; letter-spacing:-.02em;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.3);
}
.crm .mono.small{ font-size:9px; }
/* Logo de marca no card. Maioria oficial é wordmark (largo) — exceto ClickUp (ícone
   quadrado). Caixa de altura fixa ~38px, largura fluida limitada ao card; object-fit
   contain preserva aspect-ratio sem distorcer. */
.crm-logo{
  display:block; height:38px; width:auto; max-width:100%;
  margin:0 auto 8px; object-fit:contain;
}
.crm .nm{ font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.02em; }
.crm.active{ cursor:pointer; }
.crm.active:hover{ transform:translateY(-3px); border-color:#d9b8e4; box-shadow:0 12px 22px -12px rgba(123,45,142,.5); }
.crm.active.sel{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(123,45,142,.18); background:#fdfaff; }
.crm.active.sel .nm{ color:var(--purple); }
.crm.soon{ opacity:.5; filter:grayscale(.7); }
.tag{
  position:absolute; top:-7px; right:-6px;
  font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 7px; border-radius:9px; color:#fff;
}
.tag.on{ background:var(--grad); }
.tag.off{ background:#9aa1ad; }

/* ---------- Ramais ---------- */
.ramais{
  background:#f8f8fa; border:1px solid var(--line-soft); border-radius:14px;
  padding:15px 15px 16px; margin-bottom:24px; text-align:left;
}
.ramal{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; background:#fff; border:1px solid var(--line);
  border-radius:10px; margin-bottom:7px;
  animation:ramalIn .35s var(--ease) both;
}
.ramal:last-child{ margin-bottom:0; }
.ramal .left{ display:flex; align-items:center; gap:11px; }
.ramal .ic{
  width:34px; height:34px; border-radius:9px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:12px;
}
.ramal .num{ font-weight:700; color:var(--ink); font-size:13.5px; }
.ramal .org{ font-size:11px; color:var(--faint); margin-top:1px; }
.status{ font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:7px; display:inline-flex; align-items:center; gap:5px; }
.status.pending{ background:#fef3c7; color:#92571a; }
.status.connected{ background:#d8f5e3; color:#0a6b3b; }
.status.available{ background:#f1f2f4; color:#6b7280; }
.ramal-pick .status{ flex-shrink:0; margin-left:auto; margin-right:10px; }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

@keyframes ramalIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.ramais-empty{
  color:var(--faint); font-size:13px; text-align:center;
  padding:20px 16px; margin-bottom:24px;
  border:1.4px dashed #dcdfe4; border-radius:13px; background:#fafafb;
}

/* ---------- Caixa "sem ramais" / aviso ---------- */
.notice{
  display:flex; gap:13px; text-align:left;
  background:#fffaf0; border:1.5px solid #f4d79a; border-radius:13px;
  padding:16px 16px; margin-bottom:24px;
}
.notice .ic{ font-size:22px; line-height:1; }
.notice .t{ color:#8a5a12; font-weight:700; font-size:14px; margin-bottom:4px; }
.notice .d{ color:#9a6a25; font-size:12.5px; line-height:1.5; }
.notice .d b{ color:#7a5210; }

/* Aviso C3→C2 (extension do user GHL não corresponde a nenhum ramal) */
.alerta{
  text-align:left;
  background:#fffaf0; border:1.5px solid #f4d79a; border-radius:13px;
  padding:14px 16px; margin-bottom:22px;
  color:#8a5a12; font-size:13px; font-weight:600; line-height:1.5;
}

/* ---------- Caixa de info (erro encontrado) ---------- */
.infobox{
  background:#eef4ff; border:1px solid #c9dcff; border-radius:13px;
  padding:15px 16px; margin-bottom:22px; text-align:left;
}
.infobox .t{ color:#2056c7; font-weight:700; font-size:13px; display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.infobox .d{ color:#3a5a93; font-size:13px; line-height:1.5; }
.infobox.bad{ background:#fdecec; border-color:#f6c9c9; }
.infobox.bad .t{ color:var(--red); }
.infobox.bad .d{ color:#a23b3b; }

/* ---------- Ícone de estado (sucesso / erro) ---------- */
.state-ic{
  width:74px; height:74px; border-radius:50%; margin:2px auto 18px;
  display:flex; align-items:center; justify-content:center;
}
.state-ic svg{ width:38px; height:38px; }
.state-ic.ok{ background:#e3f7ec; color:#0f9d58; box-shadow:0 0 0 8px rgba(15,157,88,.08); }
.state-ic.bad{ background:#fdecec; color:var(--red); box-shadow:0 0 0 8px rgba(228,37,39,.07); }
.state-ic.warn{ background:#fff5e0; color:#dd9000; box-shadow:0 0 0 8px rgba(221,144,0,.08); }
.pop{ animation:pop .5s var(--ease) both; }
@keyframes pop{ 0%{ transform:scale(.55); } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); } }

.hl{ color:var(--purple); font-weight:800; }
.hl-red{ color:var(--red); font-weight:800; }

/* ---------- Nota de segurança + rodapé ---------- */
.secure{
  margin-top:20px; display:flex; align-items:center; justify-content:center; gap:7px;
  color:var(--faint); font-size:11.5px;
}
.secure svg{ width:13px; height:13px; }
.footer{
  margin-top:22px; color:rgba(255,255,255,.5); font-size:11.5px; letter-spacing:.02em;
  text-align:center; font-family:var(--font);
}
.footer.dark{ color:var(--faint); }

/* ---------- Spinner ---------- */
.spin{
  width:16px; height:16px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; display:inline-block;
  animation:spin .7s linear infinite;
}
.spin.dark{ width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--purple); }
/* BUGFIX 14-10 E2E: display:inline-block acima sobrescreve o estilo UA de
   [hidden] — spinner aparecia ANTES do clique (confirm_ramal/form). Regra
   explícita garante hidden até o JS ativar o loading state. */
.spin[hidden]{ display:none !important; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.loading-inline{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:14px; margin-top:6px; }

/* ============================================================
   Telas novas (subfluxo GHL) — mesmo design system
   ============================================================ */

/* ---------- Lista de usuários GHL (cards selecionáveis) ---------- */
.users{
  background:#f8f8fa; border:1px solid var(--line-soft); border-radius:14px;
  padding:15px 15px 16px; margin-bottom:24px; text-align:left;
}
.user-card{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:11px 12px; background:#fff; border:1.6px solid var(--line);
  border-radius:10px; margin-bottom:7px;
  font-family:var(--font); text-align:left; cursor:pointer;
  transition:all .22s var(--ease);
  animation:ramalIn .35s var(--ease) both;
}
.user-card:last-child{ margin-bottom:0; }
.user-card:hover{ border-color:#d9b8e4; transform:translateY(-2px); box-shadow:0 10px 20px -14px rgba(123,45,142,.5); }
.user-card .left{ display:flex; align-items:center; gap:11px; min-width:0; }
.user-card .avatar{
  width:34px; height:34px; border-radius:9px; background:var(--grad); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px;
}
.user-card .uname{ font-weight:700; color:var(--ink); font-size:13.5px; }
.user-card .uemail{ font-size:11px; color:var(--faint); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-card .ext{
  font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:7px;
  background:#ede4f3; color:var(--purple); white-space:nowrap; flex-shrink:0;
}

/* ---------- Seleção de ramal (radio cards) ---------- */
.ramal-pick{ cursor:pointer; }
.ramal-pick input[type="radio"]{ accent-color:var(--purple); width:16px; height:16px; cursor:pointer; }
.ramal-pick:hover{ border-color:#d9b8e4; }

/* ---------- Bloco do gif "como descobrir seu ramal" ---------- */
.gif-help{
  margin-bottom:22px; text-align:left;
  background:#f8f8fa; border:1px solid var(--line-soft); border-radius:13px;
  padding:14px 16px;
}
.gif-help .t{ color:var(--ink-soft); font-weight:700; font-size:13px; margin-bottom:8px; }
.gif-help img{ width:100%; border-radius:10px; border:1px solid var(--line); display:block; }
.gif-help .placeholder{
  color:var(--faint); font-size:12.5px; text-align:center;
  padding:26px 14px; border:1.4px dashed #dcdfe4; border-radius:10px; background:#fafafb;
}

/* ---------- Modal de confirmação ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(8,6,20,.6); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  width:100%; max-width:420px; background:#fff; border-radius:16px;
  padding:30px 28px 26px; text-align:center; font-family:var(--font);
  box-shadow:var(--shadow-card); position:relative; overflow:hidden;
  animation:pop .35s var(--ease) both;
}
.modal::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-bar);
}
.modal h2{ color:var(--ink); font-size:18px; font-weight:800; letter-spacing:-.01em; margin-bottom:8px; }
.modal p{ color:var(--muted); font-size:13.5px; line-height:1.55; margin-bottom:22px; }
.modal .actions{ display:flex; gap:10px; }
.modal .actions .btn{ width:auto; flex:1; padding:12px 18px; font-size:14px; }

/* ============================================================
   17.2 — Redesign v2 do portal GHL (UI-SPEC §1/§2/§3/§5)
   Tokens do :root + escala 4/8/16/24/32. Sem framework.
   ============================================================ */

/* ---------- Stepper de 6 passos (UI-SPEC §1; mockup buildStepper) ---------- */
.stepper{ margin-bottom:24px; }
.stepper-track{ display:flex; align-items:center; }
.stepper-conn{
  flex:1; height:2.5px; border-radius:2px; margin:0 3px; background:var(--line);
}
.stepper-conn.filled{ background:var(--grad-bar); }
.stepper-node{ display:flex; align-items:center; justify-content:center; }
.step-circle{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:28px; height:28px; border-radius:50%; font-weight:700; font-size:12px;
}
.step-circle.step-done{ background:var(--grad); color:#fff; }
.step-circle.step-done svg{ width:14px; height:14px; }
.step-circle.step-current{
  width:30px; height:30px; background:#fff; border:2.5px solid var(--purple);
  box-shadow:0 0 0 4px rgba(123,45,142,.15); color:var(--purple);
  font-weight:800; font-size:13px;
}
.step-circle.step-future{
  background:var(--line-soft); border:2px solid var(--line); color:var(--faint);
}
.stepper-caption{ text-align:center; margin-top:12px; }
.stepper-counter{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint);
}
.stepper-label{
  font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-.01em; margin-top:2px;
}

/* ---------- Tela 1 — selecionar ramal (zero vermelho) ---------- */
.step-indicator{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:0 0 8px;
}
.cta-row{ margin-top:24px; }
.cta-row .btn{ margin-bottom:0; }
.back-link{
  text-align:center; margin-top:13px;
}
.back-link button{
  background:none; border:none; color:var(--faint); font-family:var(--font);
  font-size:12.5px; font-weight:600; cursor:pointer;
}

/* ---------- Tela 2 — header "Gerenciando" (caixa lavanda) ---------- */
.manage-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fdfaff; border:1.5px solid #e3cdec; border-radius:15px;
  padding:14px 16px; margin-bottom:16px; text-align:left;
}
.manage-header .mh-left{ display:flex; align-items:center; gap:13px; min-width:0; }
.manage-header .mh-ic{
  width:46px; height:46px; border-radius:12px; background:var(--grad);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 6px 14px -6px rgba(123,45,142,.6);
}
.manage-header .mh-ic svg{ width:22px; height:22px; }
.manage-header .mh-kicker{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#9b6fb0;
}
.manage-header .mh-ramal{
  font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.15;
}
.manage-header .mh-sub{
  font-size:12px; color:var(--muted); margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.manage-header .mh-sub b{ color:var(--ink-soft); }
.btn-trocar{
  flex-shrink:0; padding:9px 13px; border-radius:10px; border:1.4px solid #e3cdec;
  background:#fff; color:var(--purple); font-weight:700; font-size:12.5px;
  cursor:pointer; font-family:var(--font);
}
.btn-trocar:hover{ border-color:var(--purple); }

/* ---------- Banner contextual (sucesso verde / remoção vermelho) §4 ---------- */
.banner{
  display:flex; align-items:flex-start; gap:9px; border-radius:12px;
  padding:12px 14px; margin-bottom:16px; text-align:left;
  font-size:13px; font-weight:600; line-height:1.45;
}
.banner.ok{ background:#e3f7ec; border:1px solid #b6e6c9; color:#0a6b3b; }
/* Aviso/degradação = âmbar (UI-SPEC §2: vermelho SÓ em remoção/erro real). */
.banner.warn{ background:#fffaf0; border:1px solid #f4d79a; color:#b45309; }
.banner.err{ background:#fdecec; border:1px solid #f6c9c9; color:#a23b3b; }
.banner svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }

/* ---------- Barra de abas (Tela 2 — LAYOUT = ABAS, LOCKED §3 Passo 6) ---------- */
.tabs-bar{
  display:flex; border-bottom:1px solid var(--line); margin-bottom:16px;
}
.tab-btn{
  flex:1; padding:10px 6px; border:none; border-bottom:2.5px solid transparent;
  background:transparent; cursor:pointer; font-family:var(--font);
  font-weight:700; font-size:12.5px; color:#9ca3af;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.tab-btn.ativo{ border-bottom-color:var(--purple); color:var(--purple); }
.tab-count{
  font-size:11px; font-weight:800; padding:1px 7px; border-radius:20px;
  background:var(--line-soft); color:#9ca3af;
}
.tab-btn.ativo .tab-count{ background:#ede4f3; color:var(--purple); }
.tab-panel[hidden]{ display:none; }

/* ---------- Blocos numerados ①②③ ---------- */
.bloco{ margin-bottom:20px; }
.bloco:last-of-type{ margin-bottom:8px; }
.bloco-titulo{
  color:var(--ink-soft); font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; margin:0 0 11px; display:flex; align-items:center; gap:8px;
  text-align:left;
}
.bloco-num{
  width:18px; height:18px; border-radius:50%; background:var(--grad); color:#fff;
  font-size:10px; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; flex-shrink:0;
}
.bloco-count{
  background:var(--line-soft); color:var(--muted); font-size:11px; padding:2px 8px;
  border-radius:20px; font-weight:700;
}
.bloco-vazio{
  color:var(--faint); font-size:13px; text-align:center; padding:18px 16px;
  border:1.4px dashed #dcdfe4; border-radius:13px; background:#fafafb;
}

/* ---------- Linhas de location (rows ①②③) ---------- */
.loc-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 13px; background:#fff; border:1.6px solid var(--line);
  border-radius:11px; margin-bottom:7px;
}
.loc-row .lr-left{ display:flex; align-items:center; gap:11px; min-width:0; }
.loc-row .lr-pin{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--grad);
}
.loc-row .lr-pin.muted{ background:var(--line-soft); }
.loc-row .lr-pin svg{ width:16px; height:16px; }
.loc-row .lr-nome{ font-weight:700; color:var(--ink); font-size:13.5px; }
.loc-row .lr-sub{ font-size:11px; color:var(--faint); margin-top:1px; }
.loc-row .lr-sub.novo{ color:#0a6b3b; font-weight:700; }
.loc-row .lr-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* badges de status */
.badge{ font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:7px; flex-shrink:0; }
.badge.instalada{ background:#d8f5e3; color:#0a6b3b; }
.badge.nao-instalada{ background:#fef3c7; color:#92571a; }
.badge.associada{ background:#ede4f3; color:var(--purple); }

/* ações nas rows */
.btn-remover{
  padding:7px 13px; border-radius:9px; border:1.4px solid #f6c9c9; background:#fff;
  color:var(--red); font-weight:700; font-size:12.5px; cursor:pointer; font-family:var(--font);
}
.btn-instalar-row{
  padding:7px 14px; border-radius:9px; border:none; background:var(--grad);
  color:#fff; font-weight:700; font-size:12.5px; cursor:pointer; font-family:var(--font);
}

/* Bloco ② — row associável (checkbox) */
.loc-row.row-avail{ cursor:pointer; }
.loc-row.row-avail.sel{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(123,45,142,.15); background:#fdfaff; }
.loc-row.row-avail.novo{ border-color:#9bd9b4; }
.lr-check{
  width:19px; height:19px; border-radius:6px; border:2px solid #cfd3da; background:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.loc-row.row-avail.sel .lr-check{ border-color:var(--purple); background:var(--purple); }
.lr-check svg{ width:12px; height:12px; display:none; }
.loc-row.row-avail.sel .lr-check svg{ display:block; }
/* checkbox real escondido visualmente mas acessível (acent roxo no fallback) */
.lr-checkbox{ position:absolute; opacity:0; width:0; height:0; accent-color:var(--purple); }

/* ---------- Barra de lote (UI-SPEC §3 Bloco ②) ---------- */
.batch-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fdfaff; border:1.5px solid #e3cdec; border-radius:13px;
  padding:11px 14px; margin-top:9px;
}
.batch-bar[hidden]{ display:none; }
.batch-count{ font-size:13px; color:var(--purple-deep); font-weight:700; }
.batch-actions{ display:flex; gap:8px; }
.btn-limpar{
  padding:9px 14px; border-radius:10px; border:1.4px solid var(--line); background:#fff;
  color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font);
}
.btn-associar-lote{
  padding:9px 16px; border-radius:10px; border:none; background:var(--grad);
  color:#fff; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--font);
}

/* ---------- Rodapé concluir ---------- */
.manage-footer{ border-top:1px solid var(--line-soft); margin-top:18px; padding-top:16px; }
.manage-footer .btn.ghost{ border-color:#e3cdec; margin-bottom:0; }

/* ---------- Modal +/− linhas (UI-SPEC §5) ---------- */
.modal .actions .btn.danger{ background:var(--red); box-shadow:none; }
.confirm-add-box{
  background:#f8f8fa; border:1px solid var(--line-soft); border-radius:12px;
  padding:6px 14px; margin-bottom:20px; text-align:left;
}
.confirm-add-box li{
  list-style:none; display:flex; align-items:center; gap:8px; padding:9px 0;
  border-bottom:1px solid var(--line-soft); font-size:14px; font-weight:600; color:#0a6b3b;
}
.confirm-add-box li:last-child{ border-bottom:none; }
.confirm-add-box li .sinal{ font-weight:800; font-size:16px; }
.remove-box{
  background:#fdecec; border:1px solid #f6c9c9; border-radius:12px;
  padding:11px 14px; margin-bottom:14px; display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--red); text-align:left;
}
.remove-box .sinal{ font-weight:800; font-size:16px; }
.remove-ultima{
  background:#fffaf0; border:1.5px solid #f4d79a; border-radius:12px;
  padding:12px 14px; margin-bottom:20px; color:#8a5a12; font-size:12.5px;
  font-weight:600; line-height:1.5; text-align:left;
}

/* ---------- Success v2 ---------- */
.success-locations li{
  display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff;
  border:1px solid var(--line); border-radius:10px; margin-bottom:6px; text-align:left;
}
.success-locations li .lr-pin{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--grad);
}
.success-locations li .lr-pin svg{ width:16px; height:16px; }
.success-locations li .lr-nome{ font-weight:700; color:var(--ink); font-size:13.5px; }
.success-gerenciar{ margin-bottom:10px; }
.success-gerenciar .btn{ margin-bottom:0; }