/* ════════════════════════════════════════════════════════════════
   PORTOTEC — style.css  (v2 · editorial premium)
   ────────────────────────────────────────────────────────────────
   • 100% drop-in: nenhum id/class renomeado ou removido.
   • Nenhuma dependência de imagem externa — todos os visuais são
     gerados via CSS/SVG data-uri.
   • Continua compatível com o app.js atual (template strings iguais).
   ──────────────────────────────────────────────────────────────── */
/* ─── TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Superfícies — navy noturno com nuance quente no bg profundo.
     Clareado em 2026-08-27 (pedido do Kalebe: "está muito escuro") — mesma
     hierarquia de tons, só que uns 3 tons mais claros cada, pra tirar o
     "quase preto" sem virar tema claro de verdade (que exigiria revisar
     cada sombra/glow pensado pra superfície escura). */
  --bg:            #1c2942;
  --bg-deep:       #16202f;
  --bg-panel:      #223454;
  --bg-card:       #2a3d61;
  --bg-elevated:   #33496f;
  --bg-hover:      #3d557d;
  --bg-input:      #1a2540;

  --border:        rgba(180,200,230,0.11);
  --border-bright: rgba(180,200,230,0.19);
  --border-focus:  rgba(96,165,250,0.6);

  /* Azul elétrico + cyan + violeta pra profundidade cromática */
  --accent:        #4f8dfb;
  --accent-light:  #7fb0ff;
  --accent-deep:   #2563eb;
  --accent-2:      #22d3ee;
  --accent-3:      #8b7dff;
  --accent-dim:    rgba(79,141,251,0.12);
  --accent-glow:   rgba(79,141,251,0.28);
  --accent-text:   #a6c8ff;
  --on-accent:     #f2f7ff;

  --gold:          #f5b544;
  --gold-dim:      rgba(245,181,68,0.11);
  --gold-text:     #fbd38d;

  --success:       #34d399;
  --success-dim:   rgba(52,211,153,0.11);
  --success-text:  #86efac;
  --danger:        #f87171;
  --danger-dim:    rgba(248,113,113,0.10);
  --danger-text:   #fca5a5;

  /* Faltavam tokens de texto pro ciano e pro cinza-azulado usados em
     badges (peça enviada/marcada, criado) — por isso ficaram hardcoded
     direto na regra em vez de var(), e por isso quebravam no tema claro
     (mesma causa do --text acima). */
  --cyan-text:  #7de3f4;
  --muted-text: #b8c8de;

  --text-primary:   #eaf0fb;
  --text-secondary: #aebdd6;
  --text-muted:     #8496b3;
  --text-faint:     #64758f;
  /* Alias — 15 regras no arquivo usam var(--text, ...) ou var(--text) sem
     nunca ter existido --text de verdade (só sobreviviam pelo fallback fixo
     '#e6edf7', que só por coincidência combinava com o escuro). Descoberto
     ao testar o tema claro: viravam texto quase branco em cima de fundo
     branco. Definir aqui resolve as 15 de uma vez, sem editar regra por
     regra — e acompanha --text-primary automaticamente em cada tema. */
  --text: var(--text-primary);

  --font-display: 'Syne', sans-serif;
  --font-serif:   'Fraunces', 'Times New Roman', serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Glass — duas camadas: fill translúcido + veil interno claro */
  --glass-fill:      rgba(17,28,49,0.62);
  --glass-fill-2:    rgba(24,41,74,0.44);
  --glass-veil:      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 45%);
  --glass-border:    rgba(166,200,255,0.09);
  --glass-border-hi: rgba(166,200,255,0.22);

  --shadow-card:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 0 0 1px rgba(0,0,0,0.35),
    0 22px 44px -26px rgba(0,0,0,0.85);
  --shadow-card-hi:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(166,200,255,0.1),
    0 30px 60px -22px rgba(0,0,0,0.9),
    0 0 40px -18px rgba(79,141,251,0.35);
  --shadow-pop:
    0 40px 90px -30px rgba(0,0,0,0.9),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 60px -20px rgba(79,141,251,0.3);

  --glow-accent-sm: 0 0 0 1px rgba(79,141,251,0.2), 0 0 22px -4px rgba(79,141,251,0.45);
  --glow-accent-md: 0 0 0 1px rgba(79,141,251,0.25), 0 0 48px -6px rgba(79,141,251,0.55);
  --glow-gold-sm:   0 0 0 1px rgba(245,181,68,0.22), 0 0 22px -6px rgba(245,181,68,0.45);
  --glow-cyan-sm:   0 0 24px -4px rgba(34,211,238,0.5);
}

/* ─── TEMA CLARO ──────────────────────────────────────────────────
   Pedido de 2026-09-01. Repõe TODOS os tokens de cor (nenhuma regra do
   arquivo usa cor fora de var(--x)), então isso sozinho já troca o site
   inteiro — sem precisar revisar componente por componente.
   :root[data-theme] em vez de prefers-color-scheme de propósito: é
   escolha do usuário (botão no header, guardada em localStorage), não
   o SO decidindo por ele — o painel é usado em jornada de trabalho, não
   em navegação eventual. */
:root[data-theme="light"] {
  --bg:            #eef1f7;
  --bg-deep:       #e3e8f2;
  --bg-panel:      #f8f9fc;
  --bg-card:       #ffffff;
  --bg-elevated:   #ffffff;
  --bg-hover:      #eef2fb;
  --bg-input:      #ffffff;

  --border:        rgba(30,41,59,0.10);
  --border-bright: rgba(30,41,59,0.20);
  --border-focus:  rgba(37,99,235,0.55);

  --accent:        #2f6fe0;
  --accent-light:  #5b8def;
  --accent-deep:   #1d4ed8;
  --accent-2:      #0891b2;
  --accent-3:      #7c6ff0;
  --accent-dim:    rgba(47,111,224,0.08);
  --accent-glow:   rgba(47,111,224,0.18);
  --accent-text:   #1d4ed8;
  --on-accent:     #ffffff;

  --gold:          #b8790a;
  --gold-dim:      rgba(184,121,10,0.10);
  --gold-text:     #8a5b06;

  --success:       #16a34a;
  --success-dim:   rgba(22,163,74,0.10);
  --success-text:  #15803d;
  --danger:        #dc2626;
  --danger-dim:    rgba(220,38,38,0.08);
  --danger-text:   #b91c1c;

  --cyan-text:  #0e7490;
  --muted-text: #475569;

  --text-primary:   #101828;
  --text-secondary: #3f4b63;
  --text-muted:     #667085;
  /* Era #98a2b3 (contraste ~2,6:1 no branco — abaixo do mínimo legível de
     4,5:1). Usado em rótulos pequenos/negrito (ex: .vcep-historico-label),
     não só em decoração, então precisa ler de verdade. */
  --text-faint:     #6c7890;

  --glass-fill:      rgba(255,255,255,0.72);
  --glass-fill-2:    rgba(255,255,255,0.55);
  --glass-veil:      linear-gradient(180deg, rgba(16,24,40,0.035), rgba(16,24,40,0) 45%);
  --glass-border:    rgba(16,24,40,0.08);
  --glass-border-hi: rgba(16,24,40,0.16);

  --shadow-card:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 0 0 1px rgba(16,24,40,0.06),
    0 12px 28px -18px rgba(16,24,40,0.18);
  --shadow-card-hi:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(16,24,40,0.08),
    0 18px 40px -16px rgba(16,24,40,0.22),
    0 0 30px -14px rgba(47,111,224,0.18);
  --shadow-pop:
    0 30px 70px -24px rgba(16,24,40,0.28),
    0 0 0 1px rgba(16,24,40,0.05) inset,
    0 0 40px -18px rgba(47,111,224,0.16);

  --glow-accent-sm: 0 0 0 1px rgba(47,111,224,0.18), 0 0 16px -4px rgba(47,111,224,0.30);
  --glow-accent-md: 0 0 0 1px rgba(47,111,224,0.22), 0 0 34px -6px rgba(47,111,224,0.38);
  --glow-gold-sm:   0 0 0 1px rgba(184,121,10,0.20), 0 0 16px -6px rgba(184,121,10,0.30);
  --glow-cyan-sm:   0 0 16px -4px rgba(8,145,178,0.35);
}

/* Aurora/starfield e o mapa foram desenhados pensando em fundo escuro —
   no claro, o mesmo peso vira mancha e o mapa fica invertido/estranho. */
:root[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 1100px 720px at 8% -10%,  rgba(47,111,224,0.10), transparent 62%),
    radial-gradient(ellipse 900px 620px at 108% 12%,  rgba(8,145,178,0.08), transparent 58%),
    radial-gradient(ellipse 900px 620px at 50% 118%,  rgba(124,111,240,0.07), transparent 62%);
}
:root[data-theme="light"] body::before { opacity: 0.4; }
:root[data-theme="light"] body::after  { opacity: 0.012; }
:root[data-theme="light"] .leaflet-container { background: var(--bg-deep) !important; }
:root[data-theme="light"] .leaflet-tile-pane { filter: none; }

/* Header tem gradiente de cor FIXA (rgba(6,9,17,...) — quase preto), não
   var() — mesma classe de bug do --text acima. Sem isso, o header ficava
   escuro por cima de um site claro, e o texto do status-pill (transparente,
   herda o que está atrás) ficava ilegível: cor de texto clara do tema
   escuro nunca mudou porque a regra nem usava token nenhum. */
:root[data-theme="light"] header {
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.68));
}
:root[data-theme="light"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,246,251,0.96)),
    radial-gradient(ellipse 300px 400px at 50% -10%, rgba(47,111,224,0.08), transparent 70%);
}
:root[data-theme="light"] .leaflet-control-attribution {
  background: rgba(255,255,255,0.85) !important;
}
/* .modal era o mesmo bug do header/sidebar, só que mais grave: é a
   superfície de TODO formulário do sistema (Nova OS, desfecho, editar...) —
   ficava um bloco quase preto opaco em cima de um site claro, com rótulo e
   campo ilegíveis. */
:root[data-theme="light"] .modal {
  background: linear-gradient(160deg, #ffffff, #f3f5fa 96%);
}
/* Mesmo bug do .modal, achado depois: .toast (todo aviso de "salvo"/"erro")
   e .drawer (painel lateral) tinham o mesmo gradiente fixo escuro. */
:root[data-theme="light"] .toast {
  background: linear-gradient(160deg, #ffffff, #f3f5fa 96%);
}
:root[data-theme="light"] .drawer {
  background: linear-gradient(160deg, #ffffff, #f3f5fa 96%);
}
/* Mesmo bug de novo, achado em 2026-09-05: .form-input:focus e
   .vcep-input:focus/.vcep-select:focus escureciam pra rgba(8,14,26,0.9) fixo
   ao CLICAR pra digitar — no tema escuro isso é só um destaque sutil, mas no
   claro o texto (--text-primary escuro) ficava escrevendo em cima de um
   campo quase preto, ilegível bem na hora de digitar. O destaque de foco já
   vem da borda + glow (ambos com token); a cor de fundo não precisa mudar. */
:root[data-theme="light"] .form-input:focus,
:root[data-theme="light"] .vcep-input:focus,
:root[data-theme="light"] .vcep-select:focus {
  background: var(--bg-input);
}

/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── ÍCONES (SVG de linha) ──────────────────────────────────────
   Um único jogo de ícones em vez de emoji do sistema operacional —
   emoji varia de aparência entre Windows/Android/iOS e é o maior
   sinal visual de interface feita às pressas. Tamanho por classe
   modificadora (icone-11 a icone-28) em vez de inline style repetido. */
.icone-svg {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.icone-11 { width: 11px; height: 11px; }
.icone-12 { width: 12px; height: 12px; }
.icone-13 { width: 13px; height: 13px; }
.icone-14 { width: 14px; height: 14px; }
.icone-15 { width: 15px; height: 15px; }
.icone-16 { width: 16px; height: 16px; }
.icone-24 { width: 24px; height: 24px; }
.icone-28 { width: 28px; height: 28px; }

html, body {
  width: 100%; min-height: 100%;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","cv11";
}

/* Aurora animada + starfield sutil. Zero dependência de arquivo. */
body {
  position: relative;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 1100px 720px at 8% -10%,  rgba(79,141,251,0.22), transparent 62%),
    radial-gradient(ellipse 900px 620px at 108% 12%,  rgba(34,211,238,0.14), transparent 58%),
    radial-gradient(ellipse 900px 620px at 50% 118%,  rgba(139,125,255,0.10), transparent 62%),
    radial-gradient(circle at 20% 40%, rgba(255,255,255,0.06) 0.5px, transparent 1.2px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,0.05) 0.5px, transparent 1.2px),
    radial-gradient(circle at 45% 20%, rgba(255,255,255,0.045) 0.5px, transparent 1.2px);
  background-size: auto, auto, auto, 220px 220px, 380px 380px, 310px 310px;
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 25% 30%, rgba(79,141,251,0.18), transparent 60%),
    radial-gradient(ellipse 35% 28% at 75% 60%, rgba(34,211,238,0.14), transparent 60%),
    radial-gradient(ellipse 30% 25% at 55% 80%, rgba(139,125,255,0.12), transparent 60%);
  filter: blur(40px);
  animation: aurora 22s ease-in-out infinite alternate;
}

@keyframes aurora {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(2%, -1%, 0) rotate(3deg); }
  100% { transform: translate3d(-1%, 1.5%, 0) rotate(-2deg); }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-rows: 64px minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
}

/* ─── HEADER ─────────────────────────────────────────────────── */
header {
  grid-column: 1 / -1;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(6,9,17,0.88), rgba(6,9,17,0.66));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--border);
}

.header-logo { height: 42px; width: auto; object-fit: contain; flex-shrink: 0; display: block; }

/* A logo é um link para o início. O alvo clicável recebe respiro e um leve
   realce no hover para anunciar que é clicável — sem isso o usuário só
   descobre tentando. */
.header-logo-link {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 4px 8px; margin: -4px -8px; border-radius: 10px;
  text-decoration: none; transition: background .16s ease, opacity .16s ease;
}
.header-logo-link:hover { background: var(--bg-hover); }
.header-logo-link:active { opacity: .82; }
.header-logo-link:focus-visible {
  outline: 2px solid var(--border-focus); outline-offset: 2px;
}

/* ─── Aviso de dados novos ─────────────────────────────────────────
   Substitui o antigo redesenho automático da tela. Fica parado no canto
   inferior esquerdo — longe dos toasts, que ficam do outro lado — e não sai
   dali até alguém clicar. Não desloca conteúdo (position:fixed) e não rouba
   foco. */
.aviso-atualizacao {
  position: fixed; left: 18px; bottom: 18px; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px; border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  font-size: 13px; color: var(--text, #e6edf7);
  animation: avisoEntra .22s ease-out;
}
@keyframes avisoEntra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.aviso-ponto {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim);
}
.aviso-versao .aviso-ponto { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-dim); }
.aviso-texto { white-space: nowrap; }
.aviso-btn {
  border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent-deep); color: var(--on-accent);
  font: 600 12.5px/1 inherit; font-family: inherit; padding: 8px 12px;
  transition: filter .16s ease;
}
.aviso-btn:hover { filter: brightness(1.12); }
.aviso-btn-ghost {
  background: transparent; border: 1px solid var(--border-bright);
  color: var(--text-secondary);
}
.aviso-btn-ghost:hover { filter: none; background: var(--bg-hover); }
.aviso-fechar {
  border: 0; background: transparent; color: var(--text-muted, #8fa3bf);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px;
  border-radius: 6px; font-family: inherit;
}
.aviso-fechar:hover { color: var(--text, #e6edf7); background: var(--bg-hover); }

@media (max-width: 640px) {
  .aviso-atualizacao { left: 12px; right: 12px; bottom: 12px; }
  .aviso-texto { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-atualizacao { animation: none; }
}

/* Polimento de transições entre abas do painel (pedido de 2026-09-03: "as
   telas trocam seco") — fade + leve deslize de baixo pra cima, CSS puro,
   sem lib. Ver switchMainTab()/_mostrarPainelPrincipal() em app.js. */
@keyframes painelPrincipalEntrar {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.painel-entrando { animation: painelPrincipalEntrar .22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .painel-entrando { animation: none; }
}

/* ─── Assinatura do autor ──────────────────────────────────────────
   Discreta, fixa no canto, e com pointer-events:none para nunca roubar um
   clique de quem está trabalhando. */
/* ─── Peças: linha compacta em vez de cartão alto ──────────────────
   Cada compra ocupava ~190px de altura; com 14 compras a tela virava
   rolagem sem fim. Em linha, cabem seis na mesma altura e dá para
   comparar as peças de relance. */
.peca-linha {
  position: relative;
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1.4fr) minmax(0, 1fr) 148px;
  gap: 12px; align-items: end;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  transition: border-color .16s ease, background .16s ease;
}
.peca-linha:hover { background: var(--bg-elevated); }
.peca-linha.tem-cliente { border-left-color: var(--success); }

/* Fica FORA do grid (position:absolute) de propósito -- .peca-linha tem 4
   colunas fixas definidas pra 4 filhos; um 5º filho normal empurraria tudo
   uma coluna adiante. Pedido de 2026-09-04: "coloque um x pra eu poder
   remover" -- limpa peça/cliente da linha (POST /pedidos/<linha>/limpar),
   sem mexer no status_compra (é do robô da planilha). */
.peca-remover {
  position: absolute; top: 8px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border-bright); background: var(--bg-card);
  color: var(--text-muted, #8fa3bf); font-size: 11px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.peca-remover:hover { border-color: var(--danger-text, #fca5a5); color: var(--danger-text, #fca5a5); background: rgba(248,113,113,.1); }

.peca-ident { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.peca-valor {
  font-weight: 700; font-size: 15px; color: var(--text, #e6edf7);
  font-variant-numeric: tabular-nums;
}
/* Quebra em duas linhas em vez de cortar com reticências: o número do pedido
   e a data são o que identifica a compra — truncar "18/0…" não informa nada. */
.peca-meta {
  font-size: 11px; color: var(--text-muted, #8fa3bf);
  line-height: 1.35; word-break: break-word;
}
.peca-campo { min-width: 0; }
.peca-rot {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-muted, #8fa3bf);
  font-weight: 700; margin-bottom: 4px;
}
.peca-input { width: 100%; }

/* Campo Cliente + botão de cadastro rápido lado a lado. O input segue
   ocupando o espaço todo (flex:1); o "+" é de tamanho fixo, sempre visível
   ao lado, pra não competir com o autocomplete da lista. */
.peca-cliente-linha { display: flex; gap: 5px; align-items: center; min-width: 0; }
.peca-cliente-linha .peca-input { flex: 1; min-width: 0; }
.peca-cliente-add {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 1px dashed var(--border-bright); background: transparent;
  color: var(--text-muted, #8fa3bf); font-size: 15px; font-weight: 700;
  line-height: 1; cursor: pointer; display: flex; align-items: center;
  justify-content: center; padding: 0;
}
.peca-cliente-add:hover { border-style: solid; border-color: var(--accent); color: var(--text-primary); background: var(--accent-dim); }

.peca-estado { font-size: 11px; text-align: right; white-space: nowrap; align-self: end; padding-bottom: 9px; }
.peca-estado .ok { color: var(--success-text, #86efac); }
.peca-estado .salvando { color: var(--text-muted, #8fa3bf); }
.peca-estado .falhou { color: var(--danger-text, #fca5a5); cursor: help; }
.peca-sugestao-slot:empty { display: none; }
.peca-sugestao-slot { grid-column: 1 / -1; }

.pecas-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.pecas-busca {
  flex: 1 1 240px; min-width: 180px; max-width: 380px;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--border-bright); background: var(--bg-input);
  color: var(--text, #e6edf7); font-size: 13px; font-family: inherit;
}
.pecas-busca:focus {
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.pecas-contagem { font-size: 12px; color: var(--text-muted, #8fa3bf); }

/* ─── Estágio da compra ────────────────────────────────────────────
   Cor por estágio, mas com o nome escrito junto: quem não distingue as
   cores lê o rótulo, e ninguém precisa decorar legenda. */
.peca-estagio {
  /* align-self porque o pai é flex-column: sem isto a etiqueta estica na
     largura inteira da coluna e vira uma barra colorida. */
  align-self: flex-start;
  display: inline-block; margin-top: 4px; padding: 2px 8px;
  border-radius: 5px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.e-criado   { background: rgba(148,178,220,.12); color: var(--muted-text); }
.e-aprovado { background: var(--accent-dim); color: var(--accent-text, #a6c8ff); }
.e-faturado { background: var(--gold-dim); color: var(--gold-text, #fbd38d); }
.e-enviado  { background: rgba(34,211,238,.14); color: var(--cyan-text); }
.e-chegou   { background: var(--success-dim); color: var(--success-text, #86efac); }

.peca-linha.chegou { border-left-color: var(--accent-2, #22d3ee); }

/* ─── Filtros por estágio ──────────────────────────────────────────
   Responde "cadê a peça do fulano?" antes de qualquer busca: um clique em
   "A caminho" mostra o que já saiu da Panasonic. */
.pecas-filtros { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pecas-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted, #8fa3bf); font: 600 12px inherit;
  font-family: inherit; transition: background .16s ease, color .16s ease;
}
.pecas-filtro:hover { background: var(--bg-hover); color: var(--text, #e6edf7); }
.pecas-filtro.ativo {
  background: var(--accent-dim); border-color: var(--accent);
  color: var(--accent-text, #a6c8ff);
}
.pecas-filtro-n {
  background: rgba(255,255,255,.09); border-radius: 5px;
  padding: 1px 6px; font-size: 11px; font-variant-numeric: tabular-nums;
}

/* Forma de pagamento do Chamado Técnico — "quadrados pra assinalar" em vez
   de select, pedido de 2026-08-28. Mesmo visual de .pecas-filtro (escolha
   única entre poucas opções já é um padrão conhecido deste projeto). */
.pagamento-quadrados { display: flex; gap: 6px; flex-wrap: wrap; }
.pagamento-quadrado {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 8px; cursor: pointer;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-muted, #8fa3bf); font: 600 12.5px inherit;
  font-family: inherit; transition: background .16s ease, color .16s ease;
}
.pagamento-quadrado:hover { background: var(--bg-hover); color: var(--text, #e6edf7); }
.pagamento-quadrado.ativo {
  background: var(--accent-dim); border-color: var(--accent);
  color: var(--accent-text, #a6c8ff);
}

/* Checkboxes de "o que mostrar na impressão" — desmarcar tira da folha sem
   apagar o dado (pedido de 2026-08-28: decidir isso na hora de criar/editar
   a OS, não descobrir só depois de imprimir). */
.imprimir-opcoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

/* ─── Ações da linha ───────────────────────────────────────────────── */
.peca-acoes {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; align-self: end;
}
.peca-chegou {
  padding: 5px 10px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px dashed var(--border-bright);
  color: var(--text-muted, #8fa3bf); font: 600 11px inherit;
  font-family: inherit; white-space: nowrap;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.peca-chegou:hover { background: var(--bg-hover); color: var(--text, #e6edf7); }
.peca-chegou.marcado {
  border-style: solid; border-color: var(--accent-2, #22d3ee);
  background: rgba(34,211,238,.12); color: var(--cyan-text);
}
.peca-chegou:disabled { opacity: .55; cursor: default; }

@media (max-width: 900px) {
  .peca-linha { grid-template-columns: 1fr 1fr; }
  .peca-ident { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; }
  .peca-estado { grid-column: 1 / -1; text-align: left; padding-bottom: 0; }
}

/* ─── Cotação: peças aguardando preço, antes de comprar ─────────────── */
.cotacao-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin-bottom: 16px;
}
.cotacao-form .form-group { margin: 0; flex: 1 1 150px; min-width: 130px; }
.cotacao-form .cotacao-desc { flex: 2 1 220px; }
.cotacao-form .cotacao-qtd { flex: 0 1 80px; min-width: 70px; }
.cotacao-form .cotacao-foto-campo { flex: 1 1 170px; min-width: 150px; }
.cotacao-form .cotacao-foto-campo input[type="file"] { padding: 6px 8px; font-size: 11.5px; }

.cotacao-linha {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  transition: border-color .16s ease, background .16s ease;
}
.cotacao-linha:hover { background: var(--bg-elevated); }
.cotacao-linha.cotado { border-left-color: var(--success); }

.cotacao-ident { display: flex; flex-direction: column; gap: 3px; min-width: 150px; flex: 1 1 170px; }
.cotacao-cod { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--text, #e6edf7); }

.cotacao-campo { min-width: 0; flex: 1 1 160px; }
.cotacao-campo-sm { flex: 0 1 100px; min-width: 90px; }

.cotacao-acoes { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ─── Ordens de Serviço ───────────────────────────────────────────────── */
/* Pedido de 2026-09-17: 900px, depois min(1400px,88vw), depois 90vw --
   NENHUM tinha efeito nenhum, e o motivo real só apareceu agora: a regra
   base ".modal" (mais abaixo neste arquivo, linha ~2286) define width:480px
   e vem DEPOIS desta regra no arquivo. Mesma especificidade (uma classe
   cada) => quem vem depois no CSS vence, empate de especificidade decidido
   por ORDEM DE ORIGEM, não por qual nome "parece" mais específico. Todo
   valor que eu já tinha colocado aqui em cima estava sendo silenciosamente
   substituído pelos 480px da regra de baixo -- por isso nada nunca mudava,
   não importava o valor. Corrigido usando o seletor composto ".modal.modal-lg"
   (duas classes = especificidade maior que UMA classe só), que vence a
   regra base não importa a ordem no arquivo -- resolve de vez, não só até
   a próxima reorganização do CSS. */
/* clamp(mínimo, fluido, máximo) — pedido de 2026-09-17: "quero q ele se
   adapte pra cada tela, automático". Nunca menor que ~600px (formulário
   não fica ilegível numa tela pequena) nem menor que 96vw (nunca estoura
   OS um lado numa tela minúscula); no meio, acompanha 90% da largura real
   de qualquer tela; nunca maior que 1600px (não vira uma linha de campo
   absurdamente esticada num monitor gigante). Três faixas, uma regra só,
   sem breakpoint nenhum pra adivinhar. */
.modal.modal-lg { width: clamp(min(600px, 96vw), 90vw, 1600px); max-width: none; max-height: 88vh; overflow-y: auto; }
.form-separador {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted); margin: 18px 0 10px; padding-top: 12px;
  border-top: 1px solid var(--border); font-weight: 700;
}
.form-separador:first-of-type { border-top: 0; padding-top: 0; }

.os-resultado-item {
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); margin-top: 6px;
  transition: background .14s ease, border-color .14s ease;
}
.os-resultado-item:hover { background: var(--bg-hover); border-color: var(--border-bright); }
.os-resultado-item b { display: block; font-size: 13px; }
.os-resultado-item span { font-size: 11.5px; color: var(--text-muted); }
.os-resultado-item.selecionado { border-color: var(--accent); background: var(--accent-dim); }

.os-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.os-cartao {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; text-align: left;
  font-family: inherit; transition: border-color .14s ease, background .14s ease;
}
.os-cartao:hover { background: var(--bg-elevated); }
.os-cartao.ativo { border-color: var(--accent); background: var(--accent-dim); }
.os-cartao .n { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text, #e6edf7); }
.os-cartao .rot { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.os-linha {
  display: grid; grid-template-columns: 100px 1.4fr 1fr 150px; gap: 14px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 13px; padding: 13px 16px; margin-bottom: 9px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.os-linha:hover {
  background: var(--bg-elevated); border-color: var(--border-bright);
  box-shadow: 0 6px 18px rgba(0,0,0,.14); transform: translateY(-1px);
}
.os-linha.status-ok { border-left-color: var(--success-text, #2aa05c); }
.os-linha.status-aviso { border-left-color: var(--accent); }
.os-linha.status-neutro { border-left-color: var(--text-muted); }
.os-linha .num-bloco { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.os-linha .num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.os-linha .cliente { font-weight: 650; font-size: 13.5px; }
.os-linha .aparelho { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.os-linha .defeito { font-size: 12px; color: var(--text-secondary); }

/* Fichas Panasonic sem OS vinculada (pedido de 2026-09-18) — não são OS de
   verdade (sem id de ordens_servico pra abrir detalhe), por isso um cartão
   mais simples, sem cursor de clique nem hover de navegação. */
.os-panasonic-sem-os { margin-top: 18px; }
.os-panasonic-sem-os-linha {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent-2);
  border-radius: 13px; padding: 11px 16px; margin-bottom: 8px;
}
.os-panasonic-sem-os-linha .cliente { font-weight: 650; font-size: 13px; }
.os-modelo-badge {
  display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px;
  background: var(--glass-fill, rgba(255,255,255,.06)); color: var(--text-muted);
  border: 1px solid var(--border); white-space: nowrap;
}
.os-modelo-badge.chamado { color: var(--accent-text, #4f8dfb); border-color: var(--accent); }
.os-modelo-badge.orcamento { color: var(--gold, #d4a94f); border-color: var(--gold, #d4a94f); }
@media (max-width: 760px) {
  .os-linha { grid-template-columns: 1fr; }
}

/* Reclassificar o modelo de uma OS já existente, no detalhe (osTrocarModelo)
   -- removida da Nova OS (pedido de 2026-09-22: tipo já vem escolhido de
   fora, seletor ali só confundia), mas continua aqui: corrigir uma OS que
   nasceu classificada errada é caso de uso diferente e continua útil. */
.modelo-os-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.modelo-os-btn {
  flex: 1 1 150px; padding: 11px 14px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 650; text-align: center;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary);
  transition: all .14s ease;
}
.modelo-os-btn:hover { border-color: var(--border-bright); background: var(--bg-elevated); }
.modelo-os-btn.ativo {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--glow-accent-sm);
}

.os-orc-item-linha {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px;
  font-size: 12.5px;
}
.os-orc-total { font-weight: 700; font-size: 14px; margin-top: 8px; text-align: right; }

/* ─── Agendar Clientes: card de ação, não linha de tabela ─────────────
   Diferente da lista da aba OS (que é consulta), esta é uma fila de fazer:
   quem abre precisa decidir "ligo pra esse primeiro?" de relance — por isso
   telefone e tempo de espera vêm no topo, e o botão de agendar é parte do
   card, não só o clique genérico na linha inteira. */
.agendar-card {
  display: flex; flex-direction: column; gap: 6px; position: relative;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.agendar-card:hover { background: var(--bg-elevated); border-color: var(--border-bright); }
.agendar-remover {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; background: transparent;
  color: var(--text-muted); cursor: pointer; transition: all .14s ease;
}
.agendar-remover:hover { background: var(--danger-bg, rgba(224,92,42,.15)); color: var(--danger-text, #e05c2a); }
.agendar-card-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.agendar-cliente { font-weight: 700; font-size: 15px; color: var(--text, #e6edf7); }
.agendar-espera {
  font-size: 10.5px; font-weight: 600; color: var(--text-muted, #8fa3bf);
  white-space: nowrap; flex-shrink: 0;
}
.agendar-linha-info {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap;
}
.agendar-linha-info .icone-svg { width: 13px; height: 13px; color: var(--text-muted); flex-shrink: 0; }
.agendar-linha-info a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.agendar-linha-info a:hover { text-decoration: underline; }
.agendar-sem-info { color: var(--text-muted, #8fa3bf); font-style: italic; }
.agendar-sep { color: var(--text-muted); }
.agendar-aparelho { color: var(--text-muted); }
.agendar-defeito {
  font-size: 12px; color: var(--text-secondary); line-height: 1.4;
  padding-top: 2px; border-top: 1px dashed var(--border); margin-top: 2px;
}
.agendar-btn { align-self: flex-end; margin-top: 6px; }
@media (max-width: 760px) {
  .agendar-btn { align-self: stretch; }
}

.ajuda-texto { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }

.os-detalhe-secao { margin-top: 16px; }
.os-detalhe-secao:first-child { margin-top: 0; }
.os-visita-linha {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 6px;
  font-size: 12.5px;
}
/* Pagamento já recebido em campo, com foto de comprovante (pedido de
   2026-09-17) — fica colada embaixo da linha da visita a que pertence. */
.os-visita-pagamento {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 11px 9px; margin: -6px 0 6px;
}
.os-visita-comprovante {
  width: 46px; height: 46px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border-bright); cursor: zoom-in;
}

.cotacao-foto-mini {
  width: 52px; height: 52px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); display: block; flex: 0 0 auto;
  cursor: pointer;
}

/* ─── Seção compacta dentro da aba Peças ─────────────────────────────── */
.cotacao-details {
  margin-top: 22px; border-top: 1px solid var(--border); padding-top: 14px;
}
.cotacao-summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 9px; font: 700 13px var(--font-display); color: var(--text-primary);
  padding: 4px 0;
}
.cotacao-summary::-webkit-details-marker { display: none; }
.cotacao-summary::before {
  content: "›"; display: inline-block; transition: transform .16s ease;
  color: var(--text-muted); font-size: 16px; line-height: 1;
}
.cotacao-details[open] .cotacao-summary::before { transform: rotate(90deg); }
.cotacao-details #cotacao-conteudo { margin-top: 14px; }

.assinatura-autor {
  /* Sobe acima do botão flutuante do chat, que fica no canto inferior
     direito — antes a assinatura ficava escondida atrás dele. */
  position: fixed; right: 14px; bottom: 82px; z-index: 300;
  pointer-events: none; user-select: none;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT",
               "Snell Roundhand", cursive;
  font-size: 13px; letter-spacing: .2px;
  color: var(--text-muted, #8fa3bf); opacity: .55;
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
@media (max-width: 640px) { .assinatura-autor { font-size: 11.5px; opacity: .42; } }

/* logo mark (H1 do header ganha um selo à esquerda via ::before) */
header h1,
header .brand,
header [class*="titulo"]:first-child {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fff 0%, var(--accent-text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

header h1::before,
header .brand::before,
header [class*="titulo"]:first-child::before {
  content: '';
  width: 26px; height: 26px;
  border-radius: 8px;
  background:
    conic-gradient(from 220deg at 50% 50%, var(--accent-2), var(--accent), var(--accent-3), var(--accent-2));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    0 0 20px -3px rgba(79,141,251,0.7);
  flex-shrink: 0;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 5px, #000 6px);
          mask: radial-gradient(circle at 50% 50%, transparent 5px, #000 6px);
}

header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,141,251,0.55), rgba(34,211,238,0.35), transparent 88%);
}

/* Abas principais (Roteiros / Verificar CEP) */
.main-tabs {
  display: flex; gap: 3px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(8px);
  margin-left: 8px;
  min-width: 0;
  position: relative;
  /* Antes só o breakpoint de celular tinha rolagem — no desktop, sem
     overflow nenhum, as abas simplesmente vazavam por cima da data/status
     à direita (.header-meta) quando o número de abas cresceu (entrada da
     "Agendar Clientes"). flex-shrink:0 nos botões garante que quem encolhe
     é a rolagem da barra, não cada letra do texto espremendo. */
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.main-tabs::-webkit-scrollbar { display: none; }
.main-tabs.arrastando { cursor: grabbing; user-select: none; }
/* Sinaliza que dá pra arrastar pros lados — sem scrollbar visível (tirada
   de propósito, ver acima), quem só usa mouse não tinha como adivinhar que
   tinha mais aba escondida. Some sozinho quando chega na ponta. */
.main-tabs::before, .main-tabs::after {
  content: ''; position: absolute; top: 3px; bottom: 3px; width: 20px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 2;
}
.main-tabs::before {
  left: 0; border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, var(--glass-fill-2), transparent);
}
.main-tabs::after {
  right: 0; border-radius: 0 10px 10px 0;
  background: linear-gradient(270deg, var(--glass-fill-2), transparent);
}
.main-tabs.rolagem-inicio::before { opacity: 1; }
.main-tabs.rolagem-fim::after { opacity: 1; }
.main-tab {
  height: 36px;
  padding: 0 18px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s;
}
.main-tab:hover { color: var(--text-secondary); }
.main-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    var(--glow-accent-sm);
}

.header-meta { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.status-dot {
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
  position: relative;
}
.status-dot::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--success);
  opacity: 0;
  animation: ringPulse 2.5s ease-in-out infinite;
}
@keyframes ringPulse { 0% { opacity: .55; transform: scale(.4);} 70%,100% { opacity: 0; transform: scale(1.9);} }
@keyframes pulse { 0%,100% { opacity: 1;} 50% { opacity: .5;} }

/* Monitor de saúde real da API — não é mais decoração fixa verde */
.status-pill {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.status-latencia { color: var(--text-muted); font-size: 10px; }
.status-dot--erro {
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
  animation: pulse 0.9s ease-in-out infinite;
}
.status-dot--erro::before {
  border-color: var(--danger);
  animation: ringPulse 0.9s ease-in-out infinite;
}

/* Brilho breve num número quando ele muda — não só na carga inicial,
   mas toda vez que um valor é recalculado (reordenar rota, otimizar). */
.numero-vivo {
  color: var(--accent-2) !important;
  text-shadow: 0 0 18px rgba(34,211,238,0.75) !important;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Marcadores do mapa "caindo" em sequência ao renderizar a rota */
@keyframes pin-drop {
  0%   { opacity: 0; transform: translateY(-16px) scale(.5); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.pin-anim {
  animation: pin-drop 0.42s cubic-bezier(.34,1.56,.64,1) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .pin-anim { animation: none; }
}

/* ─── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(13,21,36,0.9), rgba(6,9,17,0.94)),
    radial-gradient(ellipse 300px 400px at 50% -10%, rgba(79,141,251,0.14), transparent 70%);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(14px);
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(79,141,251,0.28) 25%, rgba(34,211,238,0.18) 70%, transparent);
}

/* Verificador de CEP (topo da sidebar) */
.verificador-box {
  padding: 18px 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background:
    linear-gradient(180deg, rgba(24,41,74,0.35), rgba(24,41,74,0) 90%);
  position: relative;
}

/* Verificador de CEP em aba própria — mais espaço, sem espremer no sidebar */
.verificador-box--full {
  max-width: 640px;
  margin: 12px auto 0;
  padding: 28px 32px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 16px);
  background:
    linear-gradient(180deg, rgba(24,41,74,0.35), rgba(24,41,74,0) 90%);
}
.verificador-box--full .verificador-title { font-size: 12px; margin-bottom: 14px; }
.verificador-box::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 260px 120px at 50% 0%, rgba(79,141,251,0.18), transparent 70%);
  pointer-events: none;
}
.verificador-box > * { position: relative; }

.verificador-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.4px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.verificador-title::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent);
}

.verificador-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.verificador-title-row .verificador-title { margin-bottom: 0; }
.vbusca-modo-link {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  color: var(--accent-text);
  padding: 4px 8px; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.vbusca-modo-link:hover { background: var(--accent-dim); color: var(--accent-light); }

/* Histórico de CEPs verificados (localStorage) */
.vcep-historico { margin-top: 10px; }
.vcep-historico-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-faint); font-weight: 700; margin-bottom: 7px;
}
.vcep-historico-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vcep-chip-historico {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.vcep-chip-historico:hover { border-color: var(--accent); color: var(--accent-light); background: var(--accent-dim); }

/* Comparar dois CEPs */
.vcep-comparar-toggle {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px;
  margin-top: 10px; padding: 2px 0;
}
.vcep-comparar-toggle:hover { color: var(--text-secondary); }
.vcep-comparar-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 6px;
}
.vcep-comparar-col {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.vcep-comparar-titulo {
  display: block;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(24,41,74,0.5), rgba(24,41,74,0.15));
}
.vcep-comparar-titulo span {
  display: block;
  font-family: var(--font-body);
  font-size: 10px; font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vcep-comparar-col .vcep-analise-wrap { padding: 8px; }
.vcep-comparar-col .vcep-rota-card { cursor: default; }
@media (max-width: 560px) {
  .vcep-comparar-grid { grid-template-columns: 1fr; }
}

/* Aviso de rota lotada, visível sem expandir o card */
.vcep-tag-lotada {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(248,113,113,0.14);
  color: var(--danger-text);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Botão de adicionar direto no card, sem precisar expandir */
.vcep-btn-add-rapido {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.vcep-btn-add-rapido:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.verificador-row { display: flex; gap: 6px; }
.verificador-row .form-input {
  flex: 1; min-width: 0;
  font-size: 14px;
  padding: 11px 14px;
  letter-spacing: 1.2px;
  font-family: var(--font-mono);
}
.verificador-row .btn {
  padding: 10px 14px;
  font-size: 11px;
  white-space: nowrap;
}
.verificador-row .btn-primary { box-shadow: 0 3px 14px -4px rgba(79,141,251,0.5); }

.verificar-resultado-box {
  margin-top: 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border-hi);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(10px);
  overflow: hidden;
  animation: slideIn 0.28s cubic-bezier(.22,.68,0,1);
  box-shadow: var(--shadow-card-hi);
  position: relative;
}
.verificar-resultado-box::before {
  content: ''; position: absolute; inset: 0;
  background: var(--glass-veil);
  pointer-events: none;
}
.verificar-resultado-box.erro {
  border-color: rgba(248,113,113,0.3);
  background: var(--danger-dim);
  padding: 12px;
}

/* Cabeçalho da lista de técnicos */
.sidebar-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sidebar-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-title::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: var(--glow-cyan-sm);
}

.btn-nova-ficha {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--accent-dim), rgba(34,211,238,0.08));
  border: 1px solid rgba(79,141,251,0.3);
  border-radius: 8px;
  color: var(--accent-text);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0; line-height: 1;
}
.btn-nova-ficha:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--glow-accent-sm);
  transform: translateY(-1px);
}

/* Busca de cliente/CEP na barra lateral — acha o dia sem abrir ficha por
   ficha. Fica relativo pra o dropdown de resultados flutuar por cima da
   lista de técnicos, sem empurrar o layout. */
.sidebar-busca-wrap { position: relative; padding: 0 12px 10px; flex-shrink: 0; }
.sidebar-busca { width: 100%; font-size: 12.5px; }
.sidebar-busca-resultados {
  display: none; position: absolute; left: 12px; right: 12px; top: 100%;
  z-index: 30; margin-top: 4px; max-height: 320px; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border-bright);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.sidebar-busca-resultados.aberto { display: block; }
.sidebar-busca-item {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px;
  cursor: pointer; border-bottom: 1px solid var(--border);
}
.sidebar-busca-item:last-child { border-bottom: none; }
.sidebar-busca-item:hover { background: var(--bg-hover); }
.sidebar-busca-item .cliente { font-size: 12.5px; font-weight: 650; color: var(--text, #e6edf7); }
.sidebar-busca-item .meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.sidebar-busca-item .bolinha-tec {
  width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block;
}
.sidebar-busca-vazio { padding: 12px; font-size: 12px; color: var(--text-muted); text-align: center; }

.sidebar-list { flex: 1; overflow-y: visible; overscroll-behavior: contain; padding: 12px; min-height: 0; }
.sidebar-list::-webkit-scrollbar { width: 3px; }
.sidebar-list::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.tecnico-section { margin-bottom: 12px; }

.tecnico-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(24,41,74,0.7), rgba(24,41,74,0.35)),
    linear-gradient(90deg, rgba(79,141,251,0.06), transparent 70%);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.tecnico-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0.6;
}

/* Nome em UMA linha, com reticências se não couber.
   "Joao Paulo" quebrava em "JOAO / PAULO" e "Marcos Vieira" em "MARCOS /
   VIEIRA": o letter-spacing de 1.1px somado a maiúsculas e a três botões
   ao lado não cabia na largura da barra. Nome de pessoa quebrado ao meio
   é o tipo de detalhe que faz um sistema inteiro parecer improvisado.
   O min-width:0 é obrigatório — sem ele, item de flex não encolhe abaixo
   do conteúdo e as reticências nunca aparecem. */
.tecnico-nome {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* flex:1 para OCUPAR o espaço que sobra em vez de ser espremido pelos
     irmãos; min-width:0 para poder encolher abaixo do conteúdo e as
     reticências funcionarem. Os dois juntos, ou nenhum funciona. */
  flex: 1 1 auto;
  min-width: 0;
}

.tecnico-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.btn-add-ficha {
  background: none;
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  /* Mesma caixa dos outros três botões da linha, para os quatro formarem
     uma fileira regular em vez de um botão largo seguido de três ícones. */
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.btn-add-ficha:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-dim);
}

.btn-del-tecnico {
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}
.btn-del-tecnico:hover { color: var(--danger-text); background: var(--danger-dim); }

/* As fichas pertencem ao técnico acima — e isso precisa ser VISÍVEL.
   Antes o dia da semana flutuava solto abaixo do cartão, sem nada que o
   ligasse ao técnico: com três técnicos na tela, não se sabia de quem era
   qual dia. Um filete vertical à esquerda faz o agrupamento sem precisar
   de caixa nem de mais borda. */
.fichas-do-tecnico {
  position: relative;
  padding-left: 16px;
  margin-left: 10px;
}
.fichas-do-tecnico::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 12px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg,
              rgba(148,178,220,.28), rgba(148,178,220,.05));
}
.fichas-do-tecnico:empty { display: none; }

/* Ficha item */
.ficha-item {
  position: relative;
  border-radius: var(--radius);
  padding: 11px 13px 11px 16px;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
  margin-bottom: 4px;
}
.ficha-item::before {
  content: '';
  position: absolute;
  left: 6px; top: 50%;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transform: translateY(-50%);
  transition: height 0.2s ease;
}
.ficha-item:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.ficha-item:hover::before { height: 40%; }
.ficha-item.active {
  background:
    linear-gradient(135deg, rgba(79,141,251,0.16), rgba(34,211,238,0.05));
  border-color: rgba(79,141,251,0.45);
  box-shadow: var(--glow-accent-sm);
}
.ficha-item.active::before { height: 70%; box-shadow: 0 0 12px var(--accent); }

/* Ficha sem atendimento: existe, dá para clicar, mas não disputa atenção.
   Recolhe a altura e baixa o contraste — o objetivo da barra é responder
   "quem tem trabalho hoje?" num relance, e para isso o vazio precisa
   pesar menos que o cheio. Volta ao normal no hover, para continuar
   sendo um alvo confortável. */
.ficha-item.vazia {
  padding-top: 7px; padding-bottom: 7px;
  opacity: .55;
}
.ficha-item.vazia .ficha-item-dia { font-size: 11.5px; font-weight: 600; margin-bottom: 2px; }
.ficha-item.vazia .ficha-item-meta { font-size: 9.5px; }
.ficha-item.vazia:hover { opacity: 1; }

.ficha-item-dia {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.ficha-item.active .ficha-item-dia { color: var(--accent-text); }

.ficha-item-meta { font-size: 10px; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; }

.badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.badge.accent {
  background: var(--accent-dim);
  color: var(--accent-text);
  border-color: rgba(79,141,251,0.28);
}

.btn-del-ficha {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer; font-size: 13px;
  opacity: 0; transition: opacity 0.15s;
  padding: 2px 5px; border-radius: 4px;
}
.ficha-item:hover .btn-del-ficha { opacity: 1; }
.btn-del-ficha:hover { color: var(--danger-text); background: var(--danger-dim); }

/* ─── MAIN ───────────────────────────────────────────────────── */
.main {
  overflow-y: auto;
  padding: 34px 36px;
  min-height: 0; min-width: 0;
  -webkit-overflow-scrolling: touch;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(79,141,251,0.08), transparent 40%),
    radial-gradient(circle at 88% 100%, rgba(139,125,255,0.06), transparent 45%);
}
.main::-webkit-scrollbar { width: 6px; }
.main::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }

/* ─── EMPTY STATE ────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 65vh;
  gap: 18px;
  text-align: center;
  color: var(--text-muted);
  position: relative;
  padding: 40px 20px;
}
.empty-state::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='400' viewBox='0 0 560 400'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%234f8dfb' stop-opacity='.9'/%3E%3Cstop offset='.5' stop-color='%2322d3ee' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%238b7dff' stop-opacity='.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M60 340 C 130 240, 200 300, 250 200 S 380 90, 500 130' stroke='url(%23r)' stroke-width='2.5' fill='none' stroke-dasharray='7 10' opacity='.55'/%3E%3Ccircle cx='60' cy='340' r='9' fill='%23f5b544'/%3E%3Ccircle cx='60' cy='340' r='16' fill='none' stroke='%23f5b544' stroke-opacity='.4'/%3E%3Ccircle cx='250' cy='200' r='7' fill='%2322d3ee'/%3E%3Ccircle cx='500' cy='130' r='7' fill='%234f8dfb'/%3E%3Ccircle cx='500' cy='130' r='14' fill='none' stroke='%234f8dfb' stroke-opacity='.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(78%, 560px) auto;
  opacity: 0.7;
  pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(79,141,251,0.25));
}
.empty-state > * { position: relative; z-index: 1; }

.empty-icon {
  font-size: 60px;
  opacity: 0.65;
  filter: drop-shadow(0 0 40px rgba(79,141,251,0.4));
}

/* ─── VISÃO GERAL (painel de operações, dentro do estado vazio) ── */
.visao-geral {
  width: 100%;
  max-width: 620px;
  text-align: left;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
  margin-bottom: 8px;
  overflow: hidden;
}
.visao-geral-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(24,41,74,0.6), rgba(24,41,74,0.25));
}
.visao-geral-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-secondary);
}
.visao-geral-live {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--success-text);
}

.visao-geral-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
.vg-stat {
  background: var(--bg-card);
  padding: 18px 14px;
  text-align: center;
  min-width: 0;
}
/* Só na Visão Geral (não no Histórico, que reusa .vg-stat sem ser
   clicável) — pedido de 2026-09-02: clicar rola até o detalhe por técnico
   logo abaixo, em vez do número ser só decoração. */
.visao-geral-stats .vg-stat {
  cursor: pointer; transition: background .14s, transform .14s;
}
.visao-geral-stats .vg-stat:hover { background: var(--bg-elevated); transform: translateY(-1px); }

.vg-resumo-dia {
  margin: 12px 18px 0; padding: 11px 14px; border-radius: 10px;
  background: var(--accent-dim); border: 1px solid rgba(79,141,251,.28);
}
.vg-resumo-dia:empty { display: none; }
.vg-resumo-dia-titulo { font-size: 12.5px; font-weight: 700; color: var(--accent-text); margin-bottom: 6px; }
.vg-resumo-dia-lista { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.7; }
.vg-alertas { display: flex; flex-direction: column; gap: 6px; padding: 12px 18px 0; }
.vg-alerta {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 9px;
  background: var(--gold-dim); border: 1px solid rgba(245,181,68,.35);
  color: var(--gold-text); font: 650 12.5px inherit; font-family: inherit;
  cursor: pointer; transition: background .14s;
}
.vg-alerta:hover { background: rgba(245,181,68,.22); }
.vg-alerta-num {
  flex-shrink: 0; min-width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,181,68,.25); font-weight: 800; font-size: 12px;
}

.vg-comparativo {
  padding: 10px 18px 0; font-size: 12.5px; color: var(--text-secondary);
}
.vg-comparativo b { color: var(--text-primary); font-size: 14px; }
.vg-comparativo-dif { margin-left: 6px; font-weight: 700; }
.vg-comparativo-dif.ok      { color: var(--success-text); }
.vg-comparativo-dif.aviso   { color: var(--danger-text); }
.vg-comparativo-dif.neutro  { color: var(--text-muted); }
.vg-valor {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--text-primary);
  text-shadow: 0 0 24px rgba(166,200,255,0.35);
  letter-spacing: -0.5px;
}
.vg-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 700;
  margin-top: 6px;
}

.visao-geral-tecnicos { padding: 6px 8px; }
.visao-geral-tecnicos:empty { padding: 0; }
.vg-tecnico-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  transition: background 0.15s;
}
.vg-tecnico-row:hover { background: rgba(255,255,255,0.03); }
.vg-tecnico-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.vg-tecnico-nome { color: var(--text-primary); font-weight: 600; flex-shrink: 0; }
.vg-tecnico-meta { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; margin-left: auto; }

@media (max-width: 560px) {
  .visao-geral-stats { grid-template-columns: repeat(2, 1fr); }
  .vg-tecnico-meta { margin-left: 0; }
  .vg-tecnico-row { flex-wrap: wrap; }
}
.empty-state h2 {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  line-height: 1.1;
}
.empty-state p {
  font-size: 13px;
  max-width: 320px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ─── FICHA DETALHE ──────────────────────────────────────────── */
.ficha-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ficha-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent);
}

.ficha-titulo {
  font-family: var(--font-display);
  /* Era 38px e "Segunda-feira" quebrava em "Segunda- / feira": o título
     divide a linha com cinco botões de ação, e o que sobrava não comportava
     a palavra. Título partido no hífen é o defeito mais visível da tela.
     30px cabe inteiro, e o nowrap garante que não volte a quebrar com
     "Quinta-feira" ou "Sábado". */
  font-size: 30px;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
  background: linear-gradient(135deg, #fff 10%, var(--accent-text) 55%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ficha-sub {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 8px;
  letter-spacing: 0.2px;
}

.ficha-acoes {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.ficha-acoes .btn { min-width: 0; }

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s cubic-bezier(.22,.68,0,1), box-shadow 0.3s, border-color 0.3s;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent-3), transparent);
  opacity: 0.85;
}
.stat-card::after {
  content: '';
  position: absolute; top: -40%; right: -20%;
  width: 70%; height: 160%;
  background: radial-gradient(circle, rgba(34,211,238,0.11), transparent 70%);
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-card-hi);
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 500;
  color: var(--text-primary);
  text-shadow: 0 0 30px rgba(166,200,255,0.4);
  letter-spacing: -0.5px;
}
.stat-unit { font-size: 13px; color: var(--text-muted); margin-left: 4px; }

/* Content map grid */
.content-map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 22px;
  align-items: start;
}
.content-col { display: flex; flex-direction: column; gap: 0; }

/* Panels */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.panel::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--glass-veil);
  pointer-events: none;
}
.panel:hover {
  border-color: var(--glass-border-hi);
  transform: translateY(-2px);
}
.panel-header {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background:
    linear-gradient(180deg, rgba(24,41,74,0.6), rgba(24,41,74,0.25));
}
.panel-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--accent-dim), rgba(34,211,238,0.12));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px rgba(79,141,251,0.24),
    0 0 18px -4px rgba(79,141,251,0.55);
}
.panel-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
}
.panel-body { padding: 18px; position: relative; }

/* Roteiro — timeline vertical real */
.roteiro-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
}
.roteiro-container::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--glass-veil);
  pointer-events: none;
}

.roteiro-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(24,41,74,0.6), rgba(24,41,74,0.25));
}
.roteiro-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-secondary);
}

.roteiro-lista { position: relative; }

.roteiro-item {
  position: relative;
  display: grid;
  /* AÇÕES NA SEGUNDA LINHA.
     Eram uma quarta coluna `auto`, que cresce até caber os seis botões
     (~250px). Como este painel divide a largura com o mapa, o que sobrava
     para o texto era uma faixa de ~120px: endereço e nome do cliente
     quebravam palavra por palavra, uma por linha. Em cima o conteúdo,
     embaixo os botões alinhados sob ele — o texto recupera a largura
     inteira e a leitura volta a ser horizontal. */
  grid-template-columns: 22px 40px minmax(0, 1fr);
  grid-template-areas:
    "puxador numero info"
    ".       .      acoes";
  align-items: start;
  gap: 6px 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.18s;
  animation: slideIn 0.3s cubic-bezier(.22,.68,0,1);
}

.drag-handle {
  width: 22px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  font-size: 16px;
  cursor: grab;
  touch-action: none; /* deixa o SortableJS controlar o toque, sem o navegador brigar tentando rolar a página */
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.drag-handle:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
.drag-handle:active { cursor: grabbing; }

/* Estado enquanto o SortableJS está arrastando/soltando */
.roteiro-item-ghost {
  opacity: 0.35;
  background: var(--accent-dim);
  border-radius: var(--radius);
}
.roteiro-item-dragging {
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.5);
  background: var(--bg-card, rgba(24,41,74,0.55));
  border-radius: var(--radius);
  cursor: grabbing;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.roteiro-item:last-child { border-bottom: none; }
.roteiro-item:hover { background: linear-gradient(90deg, rgba(79,141,251,0.07), transparent 60%); }

.step-num {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
  flex-shrink: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(79,141,251,0.28), rgba(79,141,251,0.08) 70%),
    var(--bg-card);
  border: 1px solid rgba(79,141,251,0.35);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 18px -4px rgba(79,141,251,0.55);
}
.step-num::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(79,141,251,0.15);
}
.roteiro-item:not(:last-child) .step-num::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 32px;
  background:
    linear-gradient(180deg, var(--accent) 0%, transparent 100%);
  opacity: 0.5;
  border-radius: 2px;
}

.step-num.partida {
  background:
    radial-gradient(circle at 30% 30%, rgba(245,181,68,0.32), rgba(245,181,68,0.08) 70%),
    var(--bg-card);
  border-color: rgba(245,181,68,0.4);
  color: var(--gold-text);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 18px -4px rgba(245,181,68,0.55);
}

.roteiro-info { min-width: 0; }
.roteiro-cep {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  /* CEP é um número só e não pode quebrar. Com 1.2px de espaçamento em fonte
     monoespaçada, "08021-000" não cabia na coluna estreita (o painel divide a
     largura com o mapa) e virava "08021- / 000" — parecia dado corrompido.
     O nowrap resolve e o espaçamento menor devolve a folga. */
  letter-spacing: 0.6px;
  white-space: nowrap;
  margin-bottom: 3px;
  color: var(--text-primary);
}
.roteiro-endereco {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roteiro-cliente {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-style: italic;
}
.roteiro-cliente a { color: inherit; font-style: normal; text-decoration: none; }
.roteiro-cliente a:hover { text-decoration: underline; }
.roteiro-aparelho {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.roteiro-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.btn-remove {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  transition: all 0.15s;
}
.btn-remove:hover {
  background: var(--danger-dim);
  border-color: rgba(248,113,113,0.28);
  color: var(--danger-text);
}

.partida-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  background:
    linear-gradient(90deg, rgba(245,181,68,0.14), rgba(245,181,68,0.03) 70%);
  border-bottom: 1px solid rgba(245,181,68,0.18);
  position: relative;
}
.partida-strip::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.partida-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--gold-text);
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-weight: 700;
}
.partida-text { font-size: 12px; color: var(--text-secondary); }

/* Mapa */
.mapa-col { position: sticky; top: 0; }

.mapa-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card-hi);
}
.mapa-wrapper::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(166,200,255,0.08) inset;
}
/* Cantos estilo HUD — reutilizável em qualquer painel, não só o mapa.
   Precisa de position:relative + overflow:hidden no elemento. */
.hud-frame { position: relative; }
.hud-frame::after {
  content: '';
  position: absolute; inset: 10px;
  pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) top left / 14px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) top left / 1.5px 14px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) top right / 14px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) top right / 1.5px 14px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) bottom left / 14px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) bottom left / 1.5px 14px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) bottom right / 14px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) bottom right / 1.5px 14px no-repeat;
  opacity: 0.4;
}

.mapa-wrapper::after {
  content: '';
  position: absolute; inset: 12px;
  pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) top left / 16px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) top left / 1.5px 16px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) top right / 16px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) top right / 1.5px 16px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) bottom left / 16px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) bottom left / 1.5px 16px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) bottom right / 16px 1.5px no-repeat,
    linear-gradient(var(--accent-text), var(--accent-text)) bottom right / 1.5px 16px no-repeat;
  opacity: 0.45;
}

.mapa-header {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(24,41,74,0.6), rgba(24,41,74,0.25));
  position: relative;
  z-index: 4;
}

.mapa-container {
  height: 500px;
  background: var(--bg-input);
  position: relative;
}

.mapa-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  position: relative;
}
.mapa-empty::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2322d3ee' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%234f8dfb' stop-opacity='.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 240 C 90 160, 130 210, 190 130 S 320 40, 400 90' stroke='url(%23g)' stroke-width='2' fill='none' stroke-dasharray='6 8' opacity='.55'/%3E%3Ccircle cx='30' cy='240' r='6' fill='%23f5b544'/%3E%3Ccircle cx='30' cy='240' r='12' fill='none' stroke='%23f5b544' stroke-opacity='.35'/%3E%3Ccircle cx='400' cy='90' r='6' fill='%234f8dfb'/%3E%3Ccircle cx='400' cy='90' r='12' fill='none' stroke='%234f8dfb' stroke-opacity='.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(70%, 400px) auto;
  opacity: 0.55;
}
.mapa-empty > * { position: relative; z-index: 1; }

/* ─── CLIENTES DA ROTA (lista copiável, abaixo do mapa) ─────────── */
.clientes-rota { border-top: 1px solid var(--border); }
.clientes-rota-header {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, rgba(24,41,74,0.6), rgba(24,41,74,0.25));
}
.btn-copiar { padding: 7px 14px; font-size: 10.5px; white-space: nowrap; }
.clientes-rota-lista {
  padding: 8px 10px 12px;
  max-height: 260px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.clientes-rota-lista::-webkit-scrollbar { width: 3px; }
.clientes-rota-lista::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }
.cliente-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.15s;
}
.cliente-linha:hover { background: rgba(255,255,255,0.03); }
.cliente-num {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.cliente-nome { color: var(--text-secondary); overflow-wrap: anywhere; }
.cliente-nome em { color: var(--text-muted); font-style: normal; }

/* ─── FORMS ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 7px;
  font-family: var(--font-display);
}
.form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 10px 13px;
  outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35) inset;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-input:focus {
  border-color: var(--accent);
  background: rgba(8,14,26,0.9);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 0 0 3px var(--accent-glow);
}
.form-input::placeholder { color: var(--text-faint); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  position: relative;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  padding: 10px 20px;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}

.btn-primary {
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 4px 16px -4px rgba(79,141,251,0.45);
}
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-deep) 55%, var(--accent-2) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    var(--glow-accent-md);
}
.btn-primary:hover::after { left: 130%; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-dim);
}
.btn-full { width: 100%; justify-content: center; }

/* ─── MODAIS ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  background: rgba(3,5,10,0.75);
  backdrop-filter: blur(10px);
  /* display:flex + overflow + margin:auto no .modal = modal alto ROLA em vez
     de cortar o topo/rodapé. align-items:center junto com overflow tinha o bug
     clássico do flexbox de clipar o topo do que não cabe — por isso saiu, e a
     centralização passou a ser pelo margin:auto do .modal. Sem isso, editar
     atendimento (modal alto) deixava o botão Salvar fora do alcance. */
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 12px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  position: relative;
  margin: auto;              /* centraliza quando cabe; ancora no topo e rola quando não cabe */
  width: 480px;
  max-width: 92vw;
  padding: 32px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border-hi);
  background:
    linear-gradient(160deg, rgba(17,28,49,0.97), rgba(6,9,17,0.98));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-pop);
  transform: translateY(14px) scale(0.97);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(.22,.68,0,1), opacity 0.22s;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; }
.modal::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(166,200,255,0.25), transparent 40%, rgba(34,211,238,0.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 24px;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

/* Dias pills */
.dias-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.dia-pill {
  padding: 7px 15px;
  border-radius: 22px;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.6px;
}
.dia-pill:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-dim); }
.dia-pill.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--glow-accent-sm);
}

/* ─── TOASTS ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 26px; right: 26px;
  display: flex; flex-direction: column;
  gap: 10px;
  z-index: 200;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  max-width: 340px;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border-hi);
  background: linear-gradient(160deg, rgba(17,28,49,0.97), rgba(6,9,17,0.97));
  backdrop-filter: blur(16px);
  font-size: 13px;
  color: var(--text-primary);
  box-shadow: var(--shadow-pop);
  animation: toastIn 0.3s cubic-bezier(.22,.68,0,1);
}
.toast-desfazer-btn {
  flex: none; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  background: var(--accent-dim); border: 1px solid var(--accent);
  color: var(--accent-text); font: 700 12px inherit; font-family: inherit;
  white-space: nowrap; transition: background .15s;
}
.toast-desfazer-btn:hover { background: var(--accent-glow); }
.toast.success { border-left: 3px solid var(--success); box-shadow: var(--shadow-pop), -6px 0 20px -8px var(--success); }
.toast.error   { border-left: 3px solid var(--danger);  box-shadow: var(--shadow-pop), -6px 0 20px -8px var(--danger); }
.toast.info    { border-left: 3px solid var(--accent);  box-shadow: var(--shadow-pop), -6px 0 20px -8px var(--accent); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── SPINNER + SKELETON ─────────────────────────────────────── */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-bright);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-row {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
.loading-row::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(166,200,255,0.06), transparent);
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ─── ESQUELETOS DE CARREGAMENTO ─────────────────────────────────
   Substituem o spinner central em listas grandes (OS, Clientes) — o
   formato já lembra o card de verdade, então a troca pro conteúdo real
   não "salta" a tela. Pedido de 2026-09-01. */
.skeleton-linha {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 13px; padding: 14px 16px; margin-bottom: 10px;
}
.skeleton-bloco {
  position: relative; overflow: hidden;
  background: var(--bg-elevated);
  border-radius: 6px;
}
.skeleton-bloco::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(166,200,255,0.10), transparent);
  animation: shimmer 1.5s linear infinite;
}
.skeleton-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.skeleton-linhas { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.skeleton-linhas .skeleton-bloco:first-child { width: 46%; height: 13px; }
.skeleton-linhas .skeleton-bloco:last-child  { width: 72%; height: 10px; }

/* ─── DESTAQUE DE BUSCA ──────────────────────────────────────────
   Trecho que bateu com o texto digitado, dentro de nome/telefone/etc
   já renderizado. Pedido de 2026-09-01. */
mark.realce-busca {
  background: var(--gold-dim);
  color: var(--gold-text);
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 700;
}

/* ─── ALTERNAR TEMA ──────────────────────────────────────────────
   Botão no header — sol/lua conforme o tema atual. */
/* ─── SINO DE NOTIFICAÇÕES ────────────────────────────────────────
   Junta num lugar só o que hoje é selo espalhado (peças pendentes, fila de
   agendar, erro de diagnóstico, chat) — pedido de 2026-09-02. Os números
   pegam carona no polling que já existe (/api/versao, a cada 10s) —
   nenhuma rota nova só pra isso. */
.notif-wrap { position: relative; }
.btn-notif {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-notif:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-bright); }
.badge-notif {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
  border-radius: 99px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 700; display: none;
  align-items: center; justify-content: center; padding: 0 4px;
}
.badge-notif.tem { display: flex; }

.notif-painel {
  display: none;
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  width: 300px; max-height: 70vh; overflow-y: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border-hi);
  background: linear-gradient(160deg, rgba(17,28,49,0.97), rgba(6,9,17,0.98));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-pop);
  padding: 8px;
}
:root[data-theme="light"] .notif-painel {
  background: linear-gradient(160deg, #ffffff, #f3f5fa 96%);
}
.notif-painel.aberto { display: block; }
.notif-titulo {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); padding: 8px 10px 6px;
}
.notif-som-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
  cursor: pointer; color: var(--text-muted);
}
.notif-som-toggle input { cursor: pointer; width: 12px; height: 12px; accent-color: var(--accent); }
.notif-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 10px; border-radius: 9px;
  background: none; border: none; cursor: pointer;
  font: inherit; color: var(--text-primary); font-size: 13px;
  transition: background .14s;
}
.notif-item:hover { background: var(--bg-hover); }
.notif-item-num {
  flex-shrink: 0; min-width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--danger-dim); color: var(--danger-text);
  font-weight: 700; font-size: 12px;
}
.notif-vazio { padding: 18px 10px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.notif-item-sos {
  justify-content: space-between; background: var(--danger-dim) !important;
  border: 1px solid var(--danger); margin-bottom: 4px; cursor: default;
}
.notif-item-sos:hover { background: var(--danger-dim) !important; }

.btn-tema {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-tema:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-bright); }
.btn-tema .icone-lua   { display: none; }
.btn-tema .icone-sol   { display: block; }
:root[data-theme="light"] .btn-tema .icone-sol { display: none; }
:root[data-theme="light"] .btn-tema .icone-lua { display: block; }

/* ─── LEAFLET DARK ──────────────────────────────────────────── */
.leaflet-container {
  background: #0d1524 !important;
  font-family: var(--font-body) !important;
}
.leaflet-tile-pane { filter: brightness(0.7) saturate(0.65) hue-rotate(185deg) invert(1) contrast(1.05); }
.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important;
  border: 1px solid var(--glass-border-hi) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-pop) !important;
  color: var(--text-primary) !important;
}
.leaflet-popup-tip { background: var(--bg-card) !important; }
.leaflet-popup-close-button { color: var(--text-muted) !important; }
.leaflet-control-zoom a {
  background: var(--bg-card) !important;
  border-color: var(--border-bright) !important;
  color: var(--text-secondary) !important;
  backdrop-filter: blur(8px);
}
.leaflet-control-zoom a:hover { background: var(--bg-elevated) !important; color: var(--text-primary) !important; }
.leaflet-control-attribution { background: rgba(13,21,36,0.7) !important; color: var(--text-muted) !important; }
.leaflet-control-attribution a { color: var(--accent-text) !important; }

/* ══════════════════════════════════════════════════════════════
   VERIFICADOR DE CEP (vcep-*)
   ══════════════════════════════════════════════════════════════ */

.vcep-geo {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 15px;
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(8px);
  animation: vcep-slide-up 0.24s ease both;
  position: relative;
  overflow: hidden;
}
.vcep-geo::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--glass-veil);
  pointer-events: none;
}
.vcep-geo-pin {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 24px -4px rgba(79,141,251,0.7);
}
.vcep-geo-info { flex: 1; min-width: 0; position: relative; }
.vcep-geo-addr {
  font-size: 12.5px; font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 6px;
}
.vcep-geo-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.vcep-chip {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
}
.vcep-chip-zona {
  background: var(--accent-dim);
  color: var(--accent-text);
  border: 1px solid rgba(79,141,251,0.22);
}
.vcep-chip-cep {
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: 0.6px;
  border: 1px solid var(--border);
}

/* TABS */
.vcep-tabs {
  display: flex; gap: 2px;
  margin-top: 10px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(8px);
  animation: vcep-slide-up 0.26s 0.04s ease both;
  opacity: 0; animation-fill-mode: forwards;
}
.vcep-tab {
  flex: 1; height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.18s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.vcep-tab:not(.active):hover {
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
}
.vcep-tab.active {
  /* Sólido, não gradiente claro->escuro (pedido de 2026-09-02, "modo
     escuro impossível de ver"): com fonte pequena (11px), o lado claro do
     gradiente (--accent) contra o texto quase-branco de --on-accent dava
     só ~3:1 de contraste — abaixo do mínimo de leitura confortável. Sólido
     em --accent-deep sobe pra ~4.8:1 sem perder o azul de "selecionado". */
  background: var(--accent-deep);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    var(--glow-accent-sm);
}
.agendar-tab-count:empty { display: none; }

/* PAINEL */
.vcep-painel {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  animation: vcep-slide-up 0.28s 0.08s ease both;
  opacity: 0; animation-fill-mode: forwards;
  position: relative;
}
.vcep-painel::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--glass-veil);
  pointer-events: none;
}

/* ROTA CARDS */
.vcep-analise-wrap {
  padding: 12px 14px 14px;
  max-height: 440px;
  overflow-y: auto;
  position: relative;
}
.vcep-analise-wrap::-webkit-scrollbar { width: 3px; }
.vcep-analise-wrap::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }
.vcep-analise-label {
  font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  margin-bottom: 11px;
  font-family: var(--font-display);
}
.vcep-rota-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  background:
    linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  backdrop-filter: blur(6px);
  transition: border-color 0.18s, box-shadow 0.22s, transform 0.18s;
}
.vcep-rota-card:last-child { margin-bottom: 0; }
.vcep-rota-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.vcep-rota-card.vcep-rota-top {
  border-color: rgba(79,141,251,0.55);
  box-shadow:
    0 0 0 1px rgba(79,141,251,0.2),
    0 0 34px -10px rgba(79,141,251,0.6);
}
.vcep-rota-card.vcep-rota-top::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
}
.vcep-rota-card.vcep-rota-expanded {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(79,141,251,0.3),
    0 0 40px -8px rgba(79,141,251,0.65);
}

.vcep-rota-inner {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
}
.vcep-avatar {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-mono);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.vcep-avatar-rank {
  position: absolute; bottom: -4px; right: -4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 12px -2px rgba(79,141,251,0.8);
}
.vcep-rota-info { flex: 1; min-width: 0; }
.vcep-rota-nome { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.1px; }
.vcep-rota-dia { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.vcep-rota-dist { font-size: 10px; color: var(--text-faint); margin-top: 1px; font-family: var(--font-mono); }

.vcep-rota-score { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.vcep-score-bar {
  width: 48px; height: 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
  position: relative;
}
.vcep-score-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(79,141,251,0.6);
  transition: width 0.7s cubic-bezier(.22,.68,0,1);
}
/* Selo de encaixe — sempre visível, em toda rota, sem precisar clicar.
   É a resposta direta a "isso cabe ou não?" sem precisar interpretar
   o número de score. */
.vcep-badge-encaixe {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 7px 14px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.vcep-badge-otimo {
  background: linear-gradient(90deg, rgba(79,141,251,0.22), rgba(79,141,251,0.06));
  color: var(--accent-light);
  text-transform: uppercase;
  font-weight: 800;
}
.vcep-badge-bom {
  background: linear-gradient(90deg, rgba(52,211,153,0.16), rgba(52,211,153,0.04));
  color: var(--success-text);
}
.vcep-badge-medio {
  background: linear-gradient(90deg, rgba(245,181,68,0.16), rgba(245,181,68,0.04));
  color: var(--gold-text);
}
.vcep-badge-ruim {
  background: linear-gradient(90deg, rgba(248,113,113,0.16), rgba(248,113,113,0.04));
  color: var(--danger-text);
}
.vcep-badge-vazio {
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  font-weight: 600;
}

/* Detalhe expandido */
.vcep-rota-detalhe { border-top: 1px solid var(--border); position: relative; }
.vcep-detalhe-body { padding: 14px; }
.vcep-detalhe-titulo {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 11px;
  font-family: var(--font-display);
}
/* Cartão rico do painel de detalhe ("Por que essa pontuação?") — nome
   PRÓPRIO (não .vcep-motivo) de propósito. O card da lista usa .vcep-motivo
   pra um chip compacto (ver mais abaixo no arquivo); mesmo nome nos dois
   contextos fazia a definição que vem depois no arquivo vencer nos DOIS
   lugares, e o painel de detalhe renderizava como chip pequeno em vez do
   card com ícone/título/descrição que era o objetivo aqui. */
.vcep-motivos-detalhe { display: flex; flex-direction: column; gap: 7px; margin-bottom: 13px; }
.vcep-motivo-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid transparent;
}
.vcep-motivo-item-pos { background: var(--success-dim); border-color: rgba(52,211,153,0.16); }
.vcep-motivo-item-neu { background: var(--gold-dim);    border-color: rgba(245,181,68,0.16); }
.vcep-motivo-item-neg { background: var(--danger-dim);  border-color: rgba(248,113,113,0.16); }

.vcep-motivo-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}
.vcep-motivo-icon-pos { background: rgba(52,211,153,0.25);  color: var(--success-text); box-shadow: 0 0 12px -2px rgba(52,211,153,0.5); }
.vcep-motivo-icon-neu { background: rgba(245,181,68,0.25);  color: var(--gold-text);    box-shadow: 0 0 12px -2px rgba(245,181,68,0.5); }
.vcep-motivo-icon-neg { background: rgba(248,113,113,0.25); color: var(--danger-text);  box-shadow: 0 0 12px -2px rgba(248,113,113,0.5); }
.vcep-motivo-titulo { font-size: 11.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.vcep-motivo-desc   { font-size: 10.5px; color: var(--text-muted); line-height: 1.45; }

.vcep-metricas { display: flex; gap: 7px; margin-bottom: 11px; }
.vcep-metrica {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 11px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.vcep-metrica::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
}
.vcep-met-val {
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-mono);
  color: var(--text-primary);
  letter-spacing: -0.3px;
}
.vcep-met-lbl {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
}

.vcep-btn-add,
.vcep-btn-primary {
  position: relative;
  width: 100%; height: 36px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--on-accent);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all 0.18s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 3px 12px -4px rgba(79,141,251,0.5);
  overflow: hidden;
}
.vcep-btn-primary { margin-top: 2px; }
.vcep-btn-add::after,
.vcep-btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.vcep-btn-add:hover,
.vcep-btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--accent-light), var(--accent-deep) 60%, var(--accent-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    var(--glow-accent-md);
}
.vcep-btn-add:hover::after,
.vcep-btn-primary:hover::after { left: 130%; }

/* FORM (Adicionar / Novo dia) */
.vcep-form { padding: 14px; }
.vcep-form-titulo {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display);
  letter-spacing: 0.3px;
}
.vcep-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.vcep-fg { display: flex; flex-direction: column; }
.vcep-fg-half { grid-column: span 1; }
.vcep-fg-full { grid-column: span 2; }
.vcep-lbl {
  font-size: 10px; font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 5px;
  display: block;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.vcep-input,
.vcep-select {
  width: 100%; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px; padding: 0 10px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.vcep-input:focus,
.vcep-select:focus {
  border-color: var(--accent);
  background: rgba(8,14,26,0.9);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.vcep-dias { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0 12px; }
.vcep-dpill {
  font-size: 10px; font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-bright);
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.4px;
  font-family: var(--font-display);
}
.vcep-dpill:hover { border-color: var(--accent); color: var(--accent-text); }
.vcep-dpill.sel {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), var(--glow-accent-sm);
}

/* AVISO */
.vcep-aviso {
  background: var(--gold-dim);
  border: 1px solid rgba(245,181,68,0.28);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 11px;
  color: var(--gold-text);
  line-height: 1.55;
  margin-bottom: 11px;
  position: relative;
  padding-left: 14px;
}
.vcep-aviso::before {
  content: '';
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--gold);
  border-radius: 2px;
}

/* VAZIO / ERRO */
.vcep-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}
.vcep-empty svg { display: block; margin: 0 auto 10px; stroke: var(--border-bright); opacity: 0.7; }
.vcep-empty p { line-height: 1.65; }
.vcep-erro {
  margin-top: 10px;
  padding: 11px 13px;
  background: var(--danger-dim);
  border: 1px solid rgba(248,113,113,0.28);
  border-radius: 9px;
  font-size: 12px;
  color: var(--danger-text);
}

@keyframes vcep-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── ACESSIBILIDADE ─────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.ficha-item:focus-visible,
.vcep-rota-card:focus-visible,
.vcep-tab:focus-visible,
.dia-pill:focus-visible,
.vcep-dpill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: rgba(79,141,251,0.4); color: #fff; }

/* ─── RESPONSIVO ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .content-map-grid { grid-template-columns: 1fr; }
  .mapa-col { position: static; }
  .mapa-container { height: 340px; }
}

@media (max-width: 768px) {
  html, body { height: 100%; overflow: hidden; }
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: 56px auto minmax(0, 1fr);
    height: 100dvh; overflow: hidden;
  }
  header { padding: 0 12px; min-height: 56px; gap: 8px; }
  .header-logo { height: 32px; }
  .main-tabs {
    margin-left: 0; padding: 3px; gap: 2px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .main-tabs::-webkit-scrollbar { display: none; }
  /* 30px/11px era ilegível no aparelho de um técnico ("está minúscula e não
     conseguimos ver", 2026-09-03). O header tem 56px de altura reservados;
     34px de aba com folga de 3px em cada lado ainda cabe folgado. */
  .main-tab { height: 34px; padding: 0 13px; font-size: 12.5px; flex-shrink: 0; }
  /* Torre de Controle e Painel de TV são ferramentas de tela grande (mapa,
     dashboard) — no celular a aba nem cabia direito no cabeçalho e ficava
     inacessível ("não conseguimos ver a aba", 2026-09-03). Só de computador. */
  #btn-torre-controle { display: none !important; }
  .status-pill #status-texto,
  .status-pill #status-latencia { display: none; }
  .status-pill { padding: 6px; gap: 0; }
  .btn-sair { padding: 6px 8px; }
  .verificador-box--full { padding: 18px 16px 22px; margin-top: 4px; }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 260px;
    overflow-y: auto; min-height: 0;
  }
  .sidebar-list {
    display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    padding: 10px; gap: 8px;
    flex: 0 0 auto; min-height: 0;
  }
  .sidebar-list::-webkit-scrollbar { height: 2px; }
  .fichas-do-tecnico { display: flex; gap: 6px; padding-left: 0; }
  .tecnico-section { flex: 0 0 auto; min-width: 180px; }
  .ficha-item { min-width: 160px; margin-bottom: 0; flex-shrink: 0; }
  .main { padding: 18px; overflow-y: auto; min-height: 0; }
  .ficha-header { flex-direction: column; gap: 12px; }
  .ficha-titulo { font-size: 28px; }
  .ficha-acoes { flex-direction: column; align-items: stretch; width: 100%; }
  .ficha-acoes .btn { width: 100%; justify-content: center; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .panel-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .modal-overlay { align-items: flex-end; }
  .modal {
    width: 100%; max-width: 100%; margin: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 26px 22px;
    max-height: 90dvh; overflow-y: auto;
  }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; justify-content: center; }
  .toast-container { bottom: 18px; right: 18px; left: 18px; }
  .toast { max-width: 100%; }
}

/* ─── ÍCONE 10px (faltava — usado em tags compactas) ────────────── */
.icone-10 { width: 10px; height: 10px; }

/* ─── STATUS DE FICHA (concluída/pendente) ──────────────────────── */
.tag-concluida {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--success-text);
  background: var(--success-dim);
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: 999px;
  padding: 4px 11px;
  vertical-align: middle;
  margin-left: 10px;
}

.ficha-item-concluida { opacity: 0.62; }
.ficha-item-concluida:hover { opacity: 0.9; }
.ficha-item-concluida .ficha-item-dia { display: flex; align-items: center; gap: 6px; }
.mini-check {
  display: inline-flex;
  color: var(--success-text);
}

.btn-editar {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  transition: all 0.15s;
}
.btn-editar:hover {
  background: var(--accent-dim);
  border-color: var(--border-bright);
  color: var(--accent-text);
}

.btn-sm { padding: 6px 12px; font-size: 10px; }

/* ─── HISTÓRICO ──────────────────────────────────────────────────── */
/* Pedido de 2026-09-17: "quero q a tela fique toda preenchida igual a aba
   de roteiros, quero q o site todo fique assim" -- ESTA classe era a causa
   real. Usada em praticamente toda aba (Faturamento, OS, Peças, Agendar
   Clientes, Central do Cliente, Estoque, Vendas...) MENOS Roteiros, que
   nunca passa por .historico-wrap e por isso sempre preencheu a tela
   normalmente. max-width:720px+margin:auto prendia todo o resto numa
   coluna estreita centralizada dentro do .main, que já é 1fr (o espaço
   inteiro que sobra depois da barra lateral de 380px) -- não tinha nada
   a ver com as páginas públicas que mexi antes, era essa UMA regra
   compartilhada. Sem teto de largura agora, do jeito que Roteiros já era. */
.historico-wrap {
  width: 100%;
}
.historico-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.historico-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 18px;
}
.historico-stats .vg-stat { background: var(--bg-card); }

.historico-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.historico-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.historico-item .vg-tecnico-dot { flex-shrink: 0; }
.historico-item-info { flex: 1; min-width: 0; }
.historico-item-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.historico-item-tecnico { color: var(--text-muted); font-weight: 400; }
.historico-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.historico-item-meta span { display: inline-flex; align-items: center; gap: 4px; }

.historico-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 560px) {
  .historico-stats { grid-template-columns: 1fr; }
  .historico-item { flex-wrap: wrap; }
}

/* ─── Sair (logout) no header ───────────────────────────────────── */
.btn-sair {
  background: none;
  border: 1px solid var(--border-bright);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  display: flex;
  transition: all 0.15s;
}
.btn-sair:hover { color: var(--danger-text); border-color: rgba(248,113,113,0.28); background: var(--danger-dim); }

/* Botão de almoço no PAINEL (não só no celular de campo) — pedido de
   2026-08-31: login de técnico via usuário/senha cai neste painel, não no
   link pessoal /tecnico/<token>, e o botão só existia lá. Só aparece pra
   quem é técnico (ver carregarUsuarioLogado em app.js). */
.btn-almoco-painel {
  font-family: inherit; font-size: 12px; font-weight: 650;
  background: var(--bg-elevated); border: 1px solid var(--border-bright);
  color: var(--text-secondary); border-radius: 20px;
  padding: 6px 14px; cursor: pointer; transition: all 0.15s;
}
.btn-almoco-painel:hover { border-color: var(--accent); color: var(--text-primary); }
.btn-almoco-painel.em-almoco {
  color: var(--accent-text); border-color: var(--accent); background: var(--accent-dim);
}
.btn-almoco-painel.atrasado {
  color: var(--danger-text); border-color: rgba(248,113,113,0.4); background: var(--danger-dim);
}

/* ─── Concluir ponto individual ─────────────────────────────────── */
.step-num-btn {
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: transform 0.12s;
}
.step-num-btn:hover { transform: scale(1.1); }
.roteiro-item-concluido { opacity: 0.55; }
.roteiro-item-concluido .roteiro-cliente,
.roteiro-item-concluido .roteiro-endereco { text-decoration: line-through; text-decoration-color: var(--text-faint); }

/* Parada travada (pedido de 2026-09-22) — não muda de posição quando a
   rota é otimizada. Faixa lateral pra ficar visível na lista inteira sem
   precisar ler o ícone de cada linha. */
.roteiro-item-travado { box-shadow: inset 3px 0 0 var(--warning-text, #d97706); }
.btn-travar-ativo { color: var(--warning-text, #d97706); }
.btn-travar-ativo:hover { color: var(--warning-text, #d97706); border-color: currentColor; }

/* ─── Link individual do técnico ────────────────────────────────── */
.btn-link-tecnico {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 8px;
  transition: all 0.15s;
}
.btn-link-tecnico:hover { background: var(--accent-dim); color: var(--accent-text); }

/* ─── Tendência por técnico (Histórico) ─────────────────────────── */
.tendencia-wrap { margin-bottom: 20px; }
.tendencia-titulo {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.tendencia-semana {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--bg-card);
}
.tendencia-semana-titulo {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* ─── CONCILIAÇÃO COM A PLANILHA ─────────────────────────────────── */
.conc-resumo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 18px;
}
.conc-bloco { background: var(--bg-card); padding: 14px; text-align: center; min-width: 0; }
.conc-num { font-family: var(--font-mono); font-size: 26px; font-weight: 500; }
.conc-lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-muted); font-family: var(--font-display);
  font-weight: 700; margin-top: 4px;
}

.conc-titulo {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--text-secondary);
  margin: 16px 0 8px;
}

.conc-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  background: var(--bg-card);
}
.conc-cliente { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.conc-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }

.conc-tag {
  flex-shrink: 0;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  padding: 4px 8px; border-radius: 999px;
  font-family: var(--font-display);
}
.conc-tag.ok     { background: var(--success-dim); color: var(--success-text); border: 1px solid rgba(52,211,153,0.28); }
.conc-tag.aviso  { background: var(--gold-dim);    color: var(--gold-text);    border: 1px solid rgba(245,181,68,0.28); }
.conc-tag.neutro { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border-bright); }

.conc-alerta {
  margin-top: 14px; padding: 10px 13px;
  background: var(--gold-dim);
  border: 1px solid rgba(245,181,68,0.28);
  border-radius: var(--radius);
  font-size: 11.5px; color: var(--gold-text); line-height: 1.5;
}

@media (max-width: 560px) {
  .conc-resumo { grid-template-columns: 1fr; }
}

/* ─── PEÇAS COMPRADAS ────────────────────────────────────────────── */
.pecas-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.pecas-toggle input { accent-color: var(--accent); cursor: pointer; }

/* Pipeline explicado em passos — substitui o parágrafo corrido. Numerado
   pra deixar claro que é uma SEQUÊNCIA (compra -> vínculo -> chegada ->
   estoque), não uma lista de recursos soltos. */
.pecas-explicador {
  display: flex; flex-direction: column; gap: 6px;
  list-style: none; counter-reset: passo;
  margin: 0 0 10px; padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; font-size: 12px; line-height: 1.5;
  color: var(--text-muted, #8fa3bf);
}
.pecas-explicador li {
  counter-increment: passo;
  padding-left: 22px; position: relative;
}
.pecas-explicador li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent-text, #a6c8ff);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pecas-explicador b { color: var(--text, #e6edf7); font-weight: 600; }

.pecas-nota-cotacao {
  font-size: 11.5px; color: var(--text-muted); margin: 0 0 16px;
}

.pecas-sub-secao {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.manual-pecas-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.manual-pecas-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 10px;
}
.manual-pecas-pagina {
  width: 100%; border-radius: 8px; border: 1px solid var(--border-bright);
  background: #fff; cursor: zoom-in; transition: transform 0.15s, box-shadow 0.15s;
}
.manual-pecas-pagina:hover { transform: scale(1.03); box-shadow: var(--shadow-card-hi); }

/* Lista de peças (código + descrição) em texto normal (substituiu 3
   tentativas de overlay em cima da imagem — nenhuma se provou confiável
   na mão de quem usa de verdade). Sem posição calculada, sem depender de
   escala de tela: é só texto e botão.
   v246 (2026-09-24): virou lista vertical com descrição ao lado do código
   (antes só tinha o código solto, sem contexto nenhum — impossível achar
   "qual é o motor" numa parede de 100+ códigos parecidos) + campo de
   busca por cima (#manual-pecas-filtro/_filtrarPecasManual). Scroll
   próprio com altura máxima pra não esticar a página inteira quando o
   manual tem 100+ peças. */
.manual-pecas-lista-itens {
  display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
  max-height: 420px; overflow-y: auto; padding-right: 4px;
}
.manual-pecas-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border-bright);
  border-radius: 8px; padding: 8px 11px;
  font-family: inherit; color: var(--text-primary); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.manual-pecas-item:hover { background: var(--bg-hover); border-color: var(--accent); }
.manual-pecas-item.copiado {
  background: var(--success-dim); border-color: rgba(52,211,153,0.6); color: var(--success-text);
}
.manual-pecas-item-codigo {
  font-family: var(--font-mono, monospace); font-size: 12.5px; font-weight: 600;
  flex: 0 0 auto; min-width: 150px;
}
.manual-pecas-item-descricao {
  font-size: 12.5px; color: var(--text-muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.substituicao-cartao {
  background: var(--bg-panel); border: 1px solid var(--border-bright);
  border-radius: 9px; padding: 10px 12px; margin-top: 10px;
}
.substituicao-cartao .cod-original { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.substituicao-cartao .cod-original b { color: var(--text-primary); font-family: monospace; }
.substituicao-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.substituicao-chip {
  font-family: monospace; font-size: 12.5px; font-weight: 700;
  color: var(--accent-text); background: var(--accent-dim);
  border-radius: 7px; padding: 5px 10px;
}
.substituicao-seta { color: var(--text-muted); font-size: 12px; align-self: center; }
.substituicao-chip-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.substituicao-preco { font-size: 11px; color: var(--text-muted); }
.substituicao-preco-pendente { font-style: italic; }
.substituicao-preco-indisponivel { font-style: italic; opacity: .7; }
.comparador-caixa {
  background: var(--bg-panel); border: 1px solid var(--border-bright);
  border-radius: 9px; padding: 10px 12px; margin-top: 4px;
}
.comparador-linha {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  align-items: center; padding: 6px 4px; font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.comparador-linha:last-child { border-bottom: none; }
.comparador-melhor { background: var(--success-dim, rgba(52,211,153,.1)); border-radius: 6px; }
.comparador-fornecedor { color: var(--text-primary); font-weight: 600; }
.comparador-valor { font-family: 'JetBrains Mono', monospace; color: var(--accent-text); font-weight: 700; }
.comparador-data { color: var(--text-muted); font-size: 11px; }
.substituicao-progresso {
  height: 6px; border-radius: 4px; overflow: hidden;
  background: var(--bg-panel); margin: 10px 2px 4px; border: 1px solid var(--border);
}
.substituicao-progresso-barra {
  height: 100%; background: var(--accent-text);
  transition: width 1s linear;
}
.substituicao-progresso-texto { margin: 4px 2px 0; font-size: 11.5px; }
.substituicao-preco-data { color: var(--text-muted); opacity: .7; }

/* Aba "Pedidos com comprovante" — cada peça pedida vira um cartão com dois
   lados: dados do cliente à esquerda, comprovante à direita. Lado a lado
   porque comparar "é essa a peça, é esse o cliente" é mais rápido olhando
   os dois ao mesmo tempo do que abrindo a foto num modal à parte. */
.pp-cartao {
  display: grid; grid-template-columns: 1fr 160px; gap: 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  padding: 14px 16px; margin-bottom: 10px;
}
.pp-cliente { font-weight: 700; font-size: 14.5px; color: var(--text-primary); }
.pp-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pp-peca { font-size: 12.5px; color: var(--text-secondary); margin-top: 6px; font-weight: 600; }
.pp-rodape { font-size: 11px; color: var(--text-muted); margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.pp-lado-imagem { display: flex; align-items: center; justify-content: center; }
.pp-foto {
  width: 100%; max-height: 130px; object-fit: cover; cursor: zoom-in;
  border-radius: 10px; border: 1px solid var(--border-bright);
  background: var(--bg-input);
}
.pp-sem-foto {
  font-size: 11px; color: var(--text-faint); text-align: center;
  border: 1px dashed var(--border); border-radius: 10px; padding: 10px;
}
.pp-cartao.pp-chegou { border-color: rgba(52,211,153,.4); background: linear-gradient(160deg, rgba(52,211,153,.08), var(--glass-fill-2)); }

.pp-btn-chegou {
  background: transparent; border: 1px solid var(--border-bright); color: var(--text-secondary);
}
.pp-btn-chegou.ativo {
  background: var(--success-dim, rgba(52,211,153,.16)); border-color: rgba(52,211,153,.5);
  color: var(--success-text, #34d399); font-weight: 700;
}
@media (max-width: 560px) {
  .pp-cartao { grid-template-columns: 1fr; }
}

.peca-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--glass-fill), var(--glass-fill-2));
  padding: 14px 16px;
  margin-bottom: 10px;
}
.peca-topo {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.peca-valor {
  font-family: var(--font-mono); font-size: 16px;
  color: var(--text-primary); font-weight: 500;
}
.peca-meta {
  font-size: 11px; color: var(--text-muted);
  font-family: var(--font-mono); margin-top: 2px;
}
.peca-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 560px) {
  .peca-form { grid-template-columns: 1fr; }
  .peca-topo { flex-direction: column; gap: 8px; }
}

/* ─── Selo de pendência na aba ───────────────────────────────────── */
.aba-selo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px;
  background: var(--danger); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  line-height: 1;
}

/* ─── Barra e sugestão da aba Peças ──────────────────────────────── */
.pecas-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.pecas-contagem {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
}

.peca-sugestao {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 12px;
  background: var(--success-dim);
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: var(--radius);
}
.peca-sugestao-txt {
  flex: 1; min-width: 0;
  font-size: 11.5px; color: var(--success-text); line-height: 1.45;
}
.peca-sugestao-txt strong { font-weight: 700; }

@media (max-width: 560px) {
  .peca-sugestao { flex-direction: column; align-items: stretch; }
}

.roteiro-etiquetas {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px;
}
.roteiro-os, .roteiro-setor {
  font-family: var(--font-mono);
  font-size: 10.5px;
  border-radius: 5px;
  padding: 2px 7px;
  letter-spacing: 0.4px;
  display: inline-block;
}
.roteiro-os {
  color: var(--accent-text);
  background: var(--accent-dim);
  border: 1px solid var(--border-bright);
}
.roteiro-setor {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: 1px solid;
}

.previa-vinculo {
  margin-top: 10px; padding: 10px;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
}

/* ─── Resumo por setor na Visão Geral ────────────────────────────── */
.vg-setores { padding: 6px 8px 12px; }
.vg-setores:empty { padding: 0; }
.vg-setores-titulo {
  font-family: var(--font-display);
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--text-muted);
  padding: 8px 12px 6px;
  border-top: 1px solid var(--border);
}
/* Deixa explícito no próprio título o que está sendo contado. Sem isso o
   número volta a ser ambíguo entre "hoje", "em aberto" e "desde sempre" —
   que foi exatamente a dúvida que originou esta mudança. */
.vg-setores-escopo {
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: none;
  opacity: 0.7;
}
/* Os pontos sem classificação aparecem em cinza, sem cor de marca: a linha
   existe para incomodar de leve até alguém atribuir o setor, não para
   competir visualmente com as frentes de verdade. */
.vg-setor-row--sem .vg-setor-preenchido { opacity: 0.45; }
/* A linha de pontos sem setor é clicável (abre a classificação em lote).
   O cursor é o único aviso disso — sem ele, o usuário não descobre. */
.vg-setor-row--sem { cursor: pointer; }
.vg-setor-row--sem:hover { background: var(--hover, rgba(127,127,127,0.08)); }

/* Marca de campo obrigatório nos formulários */
.form-obrigatorio { color: var(--danger-text); font-weight: 700; }

/* Filtro de período do Histórico */
.hist-periodo { display: flex; gap: 4px; margin-left: auto; margin-right: 10px; }
.hist-periodo-btn {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  padding: 5px 10px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.hist-periodo-btn:hover { color: var(--text); border-color: var(--text-muted); }
.hist-periodo-btn.active {
  color: var(--accent-text);
  border-color: var(--accent-text);
  background: var(--accent-suave, rgba(79,141,251,0.10));
}
.vg-setor-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; font-size: 12px;
}
.vg-setor-barra {
  flex: 1; min-width: 40px; height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px; overflow: hidden;
}
.vg-setor-preenchido { height: 100%; border-radius: 999px; transition: width 0.5s ease; }

@media (max-width: 560px) {
  .vg-setor-row { flex-wrap: wrap; }
  .vg-setor-barra { order: 3; flex-basis: 100%; }
}

/* ─── Verificador de encaixe: leitura em vez de aritmética ───────────── */

.vcep-mapa {
  height: 260px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 14px;
  overflow: hidden;
  z-index: 0; /* abaixo dos dropdowns do painel */
}

/* A borda esquerda colorida dá o veredito antes da leitura: dá pra varrer a
   lista com o olho sem ler uma palavra. */
.vcep-card-bom   { border-left: 3px solid var(--success); }
.vcep-card-medio { border-left: 3px solid var(--gold); }
.vcep-card-ruim  { border-left: 3px solid var(--danger); opacity: 0.72; }
.vcep-card-vazio { border-left: 3px solid var(--text-muted); }

.vcep-veredito {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  margin-bottom: 4px;
}

/* O score continua visível, mas rebaixado a nota de rodapé: é diagnóstico de
   quem quer conferir a conta, não a informação principal. */
.vcep-score-num {
  font-size: 10px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 3px;
  opacity: 0.65;
}

.vcep-motivos {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 5px;
}
.vcep-motivo {
  font-size: 10.5px;
  color: var(--text-muted);
  background: rgba(127,127,127,0.10);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1.5;
}

.vcep-alerta-nenhuma {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px;
  margin-bottom: 12px;
  border-radius: 7px;
  background: rgba(224, 32, 32, 0.08);
  border: 1px solid rgba(224, 32, 32, 0.25);
  color: var(--text);
  font-size: 12px; line-height: 1.5;
}

.vcep-toggle-fora {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.vcep-toggle-fora:hover { color: var(--text); border-color: var(--text-muted); }
.vcep-toggle-fora.aberto { border-style: solid; }
.vcep-fora-lista { margin-top: 8px; }

/* ─── Simulação "como o dia fica" ─────────────────────────────────────── */

.vcep-sim-barra {
  margin: -8px 0 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2, rgba(127,127,127,0.05));
  font-size: 12px;
  min-height: 38px;
  display: flex; align-items: center;
}
.vcep-sim-dica, .vcep-sim-carregando { color: var(--text-muted); font-size: 11.5px; }
.vcep-sim-erro { color: var(--danger-text); font-size: 11.5px; }

.vcep-sim-resumo { width: 100%; }
.vcep-sim-linha { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vcep-sim-pos { font-size: 11px; color: var(--text-muted); }
.vcep-sim-numeros {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; font-size: 12px;
}
.vcep-sim-seta { color: var(--text-muted); margin: 0 2px; }

/* O acréscimo é o número que decide. Verde quando o desvio é pequeno,
   âmbar quando não — para o olho responder antes da leitura. */
.vcep-sim-delta {
  font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11.5px;
}
.vcep-sim-delta.ok   { color: var(--success-text); background: rgba(42,160,92,0.12); }
.vcep-sim-delta.caro { color: var(--gold-text);    background: rgba(212,160,26,0.14); }

/* Paradas numeradas na ordem em que o técnico vai rodar */
.vcep-pin-parada {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
/* A parada nova pulsa: é a única que ainda não existe, e ver ONDE ela cai
   na sequência é o ponto inteiro da simulação. */
.vcep-pin-parada.novo {
  background: #e02020;
  box-shadow: 0 0 0 4px rgba(224,32,32,0.25);
}
.vcep-pin-base {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff8e0; color: #b87800; border: 2px solid #b87800;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Botão "A caminho" na linha do cliente, dentro do roteiro.
   Verde do WhatsApp para não se confundir com os ícones de navegação ao lado —
   são ações diferentes. Texto em vez de ícone porque a ação não tem símbolo
   óbvio, e um ícone genérico aqui viraria adivinhação. */
.btn-a-caminho {
  background: #128c7e;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 9px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
}
.btn-a-caminho:hover { background: #0f7568; }

.acaminho-msg {
  background: var(--surface-2, rgba(127,127,127,0.06));
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 11px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 45vh;
  overflow-y: auto;
  margin: 0 0 12px;
  font-family: inherit;
}
.acaminho-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
  text-decoration: none;
}

/* Marca discreta do dia de hoje na sidebar. Menor que a do celular de
   proposito: aqui o Kalebe ve a semana inteira e o destaque so orienta. */
.tag-hoje {
  background: var(--success); color: #fff;
  font-size: 8.5px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; margin-left: 5px;
  vertical-align: middle;
}

/* Foto do técnico na barra lateral. Clicar troca a imagem — sem botão
   separado, porque a própria foto é o alvo óbvio. */
.tec-avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  flex: none; cursor: pointer; margin-right: 8px;
  border: 2px solid rgba(255,255,255,.12);
  transition: transform .12s ease, border-color .12s ease;
}
.tec-avatar:hover { transform: scale(1.08); border-color: rgba(255,255,255,.35); }
.tec-avatar.sem-foto {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px; border-color: transparent;
}

/* ─── Técnico recolhido ───────────────────────────────────────────────
   A barra lateral com 4 técnicos × 5 dias vira uma coluna sem fim.
   Recolhido, o técnico continua visível — some só a lista de dias. */
.tecnico-header { cursor: pointer; user-select: none; }
.tecnico-header:hover { border-color: var(--border-bright); }

.tec-seta {
  display: inline-flex; align-items: center; flex: none;
  color: var(--text-muted); font-size: 11px; line-height: 1;
  transition: transform .18s ease;
}
.tecnico-section.recolhido .tec-seta { transform: rotate(-90deg); }

/* Recolher não pode esconder informação: o número diz quantas fichas
   ficaram ali dentro. Só aparece quando está fechado. */
.tec-contagem {
  display: none; flex: none;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 99px; padding: 1px 7px;
}
.tecnico-section.recolhido .tec-contagem:not(:empty) { display: inline-flex; }

/* Selo de almoço — só aparece quando o técnico está de almoço agora
   (ver carregarStatusAlmocoTecnicos em app.js). Cor de aviso, não de
   erro: é informação, não problema. */
.tec-almoco-selo {
  flex: none; font-size: 10px; font-weight: 650;
  color: var(--accent-text); background: var(--accent-dim);
  border: 1px solid var(--accent); border-radius: 99px; padding: 1px 8px;
}

/* max-height em vez de display:none para a transição existir. 1400px é teto
   folgado: nenhum técnico tem tanta ficha aberta, e altura fixa é o preço de
   poder animar (o navegador não anima até 'auto'). */
.fichas-do-tecnico {
  max-height: 1400px; overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease;
}
.tecnico-section.recolhido .fichas-do-tecnico {
  max-height: 0; opacity: 0; margin: 0;
}
.tecnico-section.recolhido { margin-bottom: 6px; }

.btn-recolher-todos {
  background: none; border: 1px solid var(--border-bright);
  border-radius: 6px; color: var(--text-secondary);
  font-size: 12px; line-height: 1; padding: 3px 7px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.btn-recolher-todos:hover { color: var(--text-primary); border-color: var(--accent); }

/* ─── Aba Diagnóstico ─────────────────────────────────────────────────
   Traduz sinal técnico para linguagem de gente. Cor faz o trabalho: verde
   dispensa leitura, vermelho exige ação. */
.diag-versao {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-muted); margin-bottom: 12px;
}
.diag-secao {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--text-secondary);
  margin: 18px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.diag-item {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
  align-items: center; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.diag-titulo { font-size: 12.5px; font-weight: 600; }
.diag-detalhe {
  grid-column: 1 / -1; font-size: 11px; color: var(--text-muted);
  line-height: 1.55;
}
.diag-selo {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}
.diag-selo.ok    { background: rgba(42,160,92,.16);  color: var(--success-text); }
.diag-selo.aviso { background: rgba(224,168,42,.16); color: var(--gold-text); }
.diag-selo.ruim  { background: rgba(224,60,60,.16);  color: var(--danger-text); }

.diag-erro {
  padding: 8px 10px; margin-bottom: 6px;
  background: rgba(224,60,60,.07);
  border-left: 2px solid rgba(224,60,60,.5); border-radius: 4px;
}
.diag-erro-msg { font-family: var(--font-mono); font-size: 11px; word-break: break-word; }
/* Cor da borda pelo status do erro (o log de diagnóstico virou editável) */
.diag-erro--resolvido { background: var(--success-dim); border-left-color: var(--success); opacity: .7; }
.diag-erro--ignorado  { background: rgba(90,109,138,.10); border-left-color: var(--text-muted); opacity: .6; }

/* Visão geral agora — números reais do dia a dia (2026-08-29) */
.diag-cards-op { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.diag-card-op {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px;
}
.diag-card-op.aviso { border-color: var(--accent); background: var(--accent-dim); }
.diag-card-op .n { font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.diag-card-op .lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.diag-card-op .sub { font-size: 10px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

/* Changelog */
.changelog-linha {
  display: flex; gap: 10px; align-items: baseline; padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px;
}
.changelog-versao {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--accent-text); background: var(--accent-dim);
  border-radius: 6px; padding: 1px 7px; flex-shrink: 0;
}
.changelog-resumo { flex: 1; color: var(--text-secondary); }
.changelog-data { font-size: 10px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

.diag-erro--investigando { background: var(--accent-dim); border-left-color: var(--accent); }
.diag-erro-acoes { display: flex; gap: 6px; align-items: center; margin-top: 7px; flex-wrap: wrap; }
.diag-erro-status {
  font-family: inherit; font-size: 11px; padding: 4px 7px; border-radius: 6px;
  background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border);
}
.diag-erro-obs { flex: 1 1 140px; font-size: 11px; padding: 4px 8px; min-width: 120px; }

/* Aviso de pontos sem setor: fica no topo do painel porque ninguém
   classifica o que não aparece na frente. */
.aviso-sem-setor {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 12px;
  background: rgba(224,168,42,.10);
  border: 1px solid rgba(224,168,42,.30); border-radius: var(--radius);
  font-size: 12.5px;
}

/* ─── Comparativo entre técnicos ─────────────────────────────────── */
.comp-grade { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.comp-card {
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: rgba(255,255,255,.02);
}
.comp-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.comp-nome { font-weight: 700; font-size: 13px; flex: 1; }
.comp-fatia { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.comp-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; margin-bottom: 10px;
}
.comp-numeros div { display: flex; flex-direction: column; }
.comp-numeros b { font-family: var(--font-mono); font-size: 15px; line-height: 1.1; }
.comp-numeros span { font-size: 9.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.comp-barra { height: 4px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.comp-barra span { display: block; height: 100%; border-radius: 99px; }

/* ─── Chat no painel (mesma bolinha do cliente, do outro lado do balcão) ── */
.chat-bolha {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); transition: transform .15s ease;
}
.chat-bolha:hover { transform: scale(1.06); }
.chat-bolha .badge-chat {
  position: absolute; top: -2px; right: -2px; min-width: 19px; height: 19px;
  border-radius: 99px; background: #e04c4c; color: #fff;
  font-size: 11px; font-weight: 700; display: none;
  align-items: center; justify-content: center; padding: 0 5px;
}
.chat-bolha .badge-chat.tem { display: flex; }

.chat-janela {
  position: fixed; right: 18px; bottom: 80px; z-index: 900;
  width: min(360px, calc(100vw - 36px)); max-height: min(500px, 72vh);
  display: none; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,.55); overflow: hidden;
}
.chat-janela.aberto { display: flex; }
.chat-topo {
  padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700;
  cursor: grab; touch-action: none; user-select: none;
}
.chat-topo.arrastando { cursor: grabbing; }
.chat-topo small { display: block; font-weight: 400; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.chat-corpo { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-envio { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }
.chat-envio input {
  flex: 1; background: rgba(0,0,0,.25); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text-primary); padding: 9px 11px;
  font-size: 13px; font-family: inherit;
}
.chat-envio button { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 0 14px; cursor: pointer; font-weight: 600; }
.chat-digitando {
  min-height: 16px; padding: 0 12px; font-size: 11px; font-style: italic;
  color: var(--text-muted);
}
.chat-anexo-previa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0 10px 6px; padding: 6px 10px; border-radius: 8px;
  background: var(--bg-hover); font-size: 12px; color: var(--text-secondary);
}
.chat-anexo-previa button { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; }
.chat-anexo-botao {
  display: flex; align-items: center; justify-content: center;
  width: 34px; flex-shrink: 0; cursor: pointer; font-size: 16px;
  color: var(--text-muted); border-radius: 9px; transition: background .15s;
}
.chat-anexo-botao:hover { background: var(--bg-hover); }
.msg-mencao { color: var(--gold-text); font-weight: 700; }
.msg-anexo-img { display: block; max-width: 180px; max-height: 180px; border-radius: 8px; margin-top: 6px; cursor: zoom-in; }
.msg-anexo-arquivo {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  color: inherit; text-decoration: underline; font-size: 12.5px;
}

.campo-com-scan { display: flex; gap: 6px; align-items: stretch; }
.campo-com-scan input { flex: 1; }
.btn-scan-codigo {
  flex-shrink: 0; width: 42px; border-radius: 9px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-bright);
  font-size: 16px; transition: background .15s;
}
.btn-scan-codigo:hover { background: var(--bg-hover); }
.scan-codigo-video { width: 100%; border-radius: 10px; background: #000; }

.msg { max-width: 82%; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.msg .hora { display: block; font-size: 10px; opacity: .6; margin-top: 3px; }
.msg.deles { align-self: flex-start; background: var(--bg-hover); border-bottom-left-radius: 4px; }
.msg.minha { align-self: flex-end; background: var(--accent); border-bottom-right-radius: 4px; }
.msg.sistema { align-self: center; background: rgba(42,160,92,.14); color: var(--success-text); font-size: 12px; text-align: center; }

.conversa-item {
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; transition: border-color .15s ease;
}
.conversa-item:hover { border-color: var(--accent); }
.conversa-item.nova { border-color: #e04c4c; background: rgba(224,76,76,.06); }
.conversa-nome { font-size: 12.5px; font-weight: 700; }
.conversa-previa { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Abas dentro da janela de chat: clientes x equipe */
.chat-abas { display: flex; gap: 6px; }
.chat-aba {
  background: none; border: 1px solid var(--border); border-radius: 7px;
  color: var(--text-secondary); font-size: 11px; font-weight: 600;
  padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.chat-aba.ativa { background: var(--accent); border-color: var(--accent); color: #fff; }

.conversa-item { display: flex; align-items: flex-start; gap: 8px; }
.conversa-item > div:first-child { flex: 1; min-width: 0; }
.conversa-apagar {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 2px 4px; flex: none; border-radius: 5px;
}
.conversa-apagar:hover { color: var(--danger-text); background: rgba(224,76,76,.12); }

/* Desfecho do atendimento, visto no painel. Cor por tipo, com o nome escrito
   junto — quem lê precisa saber POR QUE o atendimento fechou, e "precisa de
   peça" é o que gera trabalho novo. */
.roteiro-desfecho {
  display: inline-block; margin-top: 6px; padding: 3px 9px;
  border-radius: 7px; font-size: 11px; font-weight: 650;
  background: rgba(255,255,255,.05); color: var(--text-secondary);
}
.df-resolvido     { background: var(--success-dim); color: var(--success-text); }
.df-precisa-peca  { background: var(--gold-dim);    color: var(--gold-text); }
.df-cotacao-peca  { background: var(--accent-dim);  color: var(--accent-text); }
.df-volto         { background: rgba(34,211,238,.13); color: var(--cyan-text); }
.df-nao-atendido  { background: var(--danger-dim);  color: var(--danger-text); }
.df-orcamento     { background: var(--gold-dim);    color: var(--gold-text); }

/* Áreas do item de roteiro (ver .roteiro-item: ações foram para a 2ª linha) */
.roteiro-item > .drag-handle   { grid-area: puxador; align-self: center; }
.roteiro-item > .step-num      { grid-area: numero;  align-self: center; }
.roteiro-item > .roteiro-info  { grid-area: info; min-width: 0; }
.roteiro-item > .roteiro-actions {
  grid-area: acoes;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  margin-top: 2px;
}

/* ─── Folha de desfecho no painel ───────────────────────────────────
   Mesmas quatro opções do app do técnico. Botão largo com rótulo e
   explicação embaixo: quem escolhe precisa entender a diferença entre
   "volta depois" e "precisa de peça" sem adivinhar. */
.df-opcoes { display: grid; gap: 8px; margin-bottom: 4px; }
.df-opcao {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 11px; color: var(--text-primary); font-family: inherit;
  transition: border-color .15s, background .15s;
}
.df-opcao:hover { background: var(--bg-hover); }
.df-opcao.ativa { border-color: var(--accent); background: var(--accent-dim); }
.df-opcao b { font-size: 14px; font-weight: 650; }
.df-opcao small { font-size: 11.5px; color: var(--text-muted); }

.df-motivos { display: flex; flex-wrap: wrap; gap: 7px; }
.df-motivo {
  padding: 8px 12px; border-radius: 9px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12.5px; font-family: inherit;
}
.df-motivo.ativa { border-color: var(--accent); background: var(--accent-dim); color: var(--accent-text); }
#df-extra:not(:empty) { margin-top: 14px; }

/* ─── Foto da etiqueta, vista no painel ─────────────────────────────
   Miniatura no item do roteiro; clique abre em tamanho cheio, que é como
   se lê o número de série para pedir a peça. */
.roteiro-fotos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.roteiro-foto {
  width: 62px; height: 62px; object-fit: cover; cursor: zoom-in;
  border-radius: 9px; border: 1px solid var(--border-bright);
  transition: transform .15s, border-color .15s;
}
.roteiro-foto:hover { transform: scale(1.05); border-color: var(--accent); }

.lupa-fundo {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
  background: rgba(0,0,0,.82); padding: 24px; cursor: zoom-out;
}
.lupa-fundo img {
  max-width: 96vw; max-height: 92vh; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  touch-action: none; user-select: none;
}
.lupa-dica {
  position: fixed; bottom: 18px; left: 0; right: 0; text-align: center;
  color: var(--text-muted); font-size: 12px; pointer-events: none;
}
.lupa-fechar {
  position: fixed; top: 18px; right: 18px; z-index: 4001;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lupa-fechar:hover { background: rgba(255,255,255,.18); }

/* Área da foto dentro da folha de desfecho (painel) */
.df-ajuda { margin: 0 0 9px; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.df-foto-botao {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 11px; cursor: pointer;
  background: var(--bg-card); border: 1px dashed var(--border-bright);
  color: var(--text-secondary); font-size: 13.5px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.df-foto-botao:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent-text); }
.df-previa:not(:empty) { margin-top: 10px; }
.df-foto-item { margin-bottom: 10px; }
.df-foto-item:last-child { margin-bottom: 0; }
.df-thumb {
  width: 100%; max-height: 200px; object-fit: contain; display: block;
  border-radius: 10px; background: var(--bg-input);
  border: 1px solid var(--border-bright);
}
.df-remover-foto {
  margin-top: 7px; padding: 6px 11px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid rgba(248,113,113,.35);
  color: var(--danger-text); font-size: 12px; font-family: inherit;
}
.df-processando { font-size: 12.5px; color: var(--text-muted); }
.df-erro { font-size: 12.5px; color: var(--danger-text); line-height: 1.45; }

/* Assinatura do cliente no "Fazer Ordem de Serviço" — mesmo canvas do
   app do técnico (static/tecnico.css), só que pro painel do escritório. */
.df-obrigatorio { color: var(--danger-text); }
.df-assinatura-canvas {
  width: 100%; height: 150px; border-radius: 11px; touch-action: none;
  background: #f4f6fa; border: 1px dashed var(--border-bright); display: block;
}
.df-limpar-assinatura {
  margin-top: 7px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-bright);
  color: var(--text-secondary); font-size: 12.5px; font-family: inherit;
}

/* Banner "mandar pro cliente no WhatsApp" após assinar em campo — mesmas
   classes de static/tecnico.css (t-envio-cliente*), reaproveitadas aqui
   porque o efeito visual pretendido é idêntico nas duas telas. */
.t-envio-cliente {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 960;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: #14251c; border: 1px solid rgba(52,211,153,.4);
  color: #eaf0fb; font-size: 13.5px;
}
.t-envio-cliente-btn {
  margin-left: auto; padding: 8px 14px; border-radius: 9px;
  background: #25d366; color: #06210f; font-weight: 700; font-size: 13px;
  text-decoration: none; white-space: nowrap;
}
.t-envio-cliente-fechar {
  background: transparent; border: 0; color: #8fa3bf; font-size: 14px;
  cursor: pointer; padding: 2px 4px;
}

/* ═══ Aba Atendimentos ══════════════════════════════════════════════
   Junta o que o técnico registrou em campo. Os quatro indicadores são
   BOTÕES: clicar filtra a lista, clicar de novo desfaz — o número e o
   filtro são a mesma coisa, e separá-los em dois controles seria pedir
   dois gestos para uma intenção. */
.at-periodo { display: flex; gap: 5px; }
.at-per {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); font: 600 12px inherit; font-family: inherit;
  transition: background .15s, color .15s;
}
.at-per:hover { background: var(--bg-hover); color: var(--text-primary); }
.at-per.ativo { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-text); }

.at-cartoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.at-cartao {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 15px 16px; cursor: pointer; position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 13px; font-family: inherit;
  transition: border-color .16s, background .16s, transform .16s;
}
.at-cartao:hover { background: var(--bg-elevated); transform: translateY(-1px); }
.at-cartao.ativo { border-color: currentColor; }
/* Fio de cor no topo em vez de número colorido: número colorido vira texto
   que disputa com o próprio valor. A cor fica numa marca, a tinta fica tinta. */
.at-cartao::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: currentColor; opacity: .9;
}
.at-num {
  font-size: 30px; font-weight: 800; letter-spacing: -1px;
  color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.at-rot { font-size: 12.5px; font-weight: 650; color: var(--text-secondary); }
.at-nota { font-size: 11px; color: var(--text-muted); }

.at-peca     { color: var(--gold); }
.at-cotacao  { color: var(--accent); }
.at-volta    { color: var(--accent-2); }
.at-nao      { color: var(--danger); }
.at-fazer-os { color: var(--accent-3); }
.at-orcamento { color: var(--gold); }
.at-ok       { color: var(--success); }

.at-filtro-aviso {
  font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px;
}
.at-limpar {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--accent-text); font: inherit; text-decoration: underline;
}

/* Toggle "peças já pedidas" (pedido de 2026-09-18) — separa visualmente do
   resto da tabela, mesma altura de linha pra não parecer outro componente. */
.at-pedidas-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 15px; background: var(--bg-panel); border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 650; color: var(--text-secondary);
  transition: background .14s;
}
.at-pedidas-toggle:hover { background: var(--bg-hover); }
.at-pedidas-seta {
  display: inline-block; transition: transform .15s;
}
.at-pedidas-seta.fechada { transform: rotate(-90deg); }

.at-barra-selecao {
  align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 12px; border-radius: 10px;
  background: var(--accent-dim); border: 1px solid var(--accent);
  font-size: 12.5px; font-weight: 650; color: var(--accent-text);
}
.at-btn-remover-lote {
  margin-left: auto; background: var(--danger-dim); border: 1px solid var(--danger);
  color: var(--danger-text); font-weight: 700;
}
.at-btn-remover-lote:hover { background: rgba(248,113,113,0.22); }
.at-check { cursor: pointer; width: 15px; height: 15px; accent-color: var(--accent); }

.at-tabela { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.at-cabecalho, .at-linha {
  display: grid;
  grid-template-columns: 88px minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, .9fr) 92px;
  gap: 14px; align-items: start; padding: 12px 15px;
}
.at-cabecalho {
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  font-size: 10px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text-muted); font-weight: 700;
}
.at-linha {
  background: var(--bg-card); border-bottom: 1px solid rgba(255,255,255,.045);
  border-left: 3px solid currentColor;
  transition: background .14s;
}
.at-linha:last-child { border-bottom: 0; }
.at-linha:hover { background: var(--bg-elevated); }

.at-quando { display: flex; flex-direction: column; }
.at-data { font-size: 12.5px; font-weight: 650; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.at-hora { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.at-cliente { font-size: 13px; font-weight: 650; color: var(--text-primary); }
.at-sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-top: 1px; }
.at-detalhe { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.at-tecnico { font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; }
.at-ponto-cor {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.at-etiqueta {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; background: currentColor;
}
/* O texto da etiqueta precisa de contraste contra o próprio fundo colorido;
   por isso a cor entra como fundo e o texto é forçado escuro. */
.at-etiqueta { color: #08101c; }
.at-linha.at-peca     .at-etiqueta { background: var(--gold); }
.at-linha.at-cotacao  .at-etiqueta { background: var(--accent); }
.at-linha.at-volta    .at-etiqueta { background: var(--accent-2); }
.at-linha.at-nao      .at-etiqueta { background: var(--danger); }
.at-linha.at-fazer-os .at-etiqueta { background: var(--accent-3); }
.at-linha.at-orcamento .at-etiqueta { background: var(--gold); }
.at-linha.at-ok       .at-etiqueta { background: var(--success); }
.at-linha.at-agendar  .at-etiqueta { background: var(--accent-2); }
.at-linha.at-panasonic-resolvido  .at-etiqueta { background: var(--success); }
.at-linha.at-aprovado-executado   .at-etiqueta { background: var(--success); }
.at-linha.at-aprovado-retirado    .at-etiqueta { background: var(--accent-3); }
.at-linha.at-garantia-resolvido   .at-etiqueta { background: var(--success); }
.at-linha.at-garantia-voltar      .at-etiqueta { background: var(--danger); }

/* Etiqueta de "já pagou" (pedido de 2026-09-17): tem que ter a MESMA força
   visual da etiqueta de desfecho, lado a lado com ela em .at-oque — não
   uma tag apagada escondida na coluna de foto, que foi a 1ª tentativa e o
   usuário rejeitou por não aparecer "junto com as outras informações". */
.at-etiqueta.at-etiqueta-pago { background: var(--success); }
.at-etiqueta + .at-etiqueta { margin-left: 6px; }

.at-ver-foto {
  padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  background: var(--accent-dim); border: 1px solid rgba(79,141,251,.3);
  color: var(--accent-text); font: 600 11.5px inherit; font-family: inherit;
}
.at-ver-foto:hover { background: var(--bg-hover); }
.at-thumb {
  width: 54px; height: 54px; object-fit: cover; border-radius: 8px;
  cursor: zoom-in; border: 1px solid var(--border-bright);
}
/* Fotos extras (mais de uma) em OS/estoque — mesmo padrão de thumbnail do
   .at-thumb, com botão de remover no canto. */
.foto-extra-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.foto-extra-item { position: relative; width: 64px; height: 64px; }
.foto-extra-item img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
  cursor: zoom-in; border: 1px solid var(--border-bright); display: block;
}
.foto-extra-remover {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--danger-dim); border: 1px solid var(--danger-text);
  color: var(--danger-text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}

@media (max-width: 1000px) {
  .at-cabecalho { display: none; }
  .at-linha { grid-template-columns: 1fr 1fr; gap: 8px; }
  .at-quem { grid-column: 1 / -1; }
}

/* Observação: complemento das opções, então pesa menos que elas na tela. */
.df-obs { resize: vertical; min-height: 62px; font-family: inherit; line-height: 1.45; }
.roteiro-obs {
  margin-top: 5px; padding-left: 9px; font-size: 11.5px; line-height: 1.45;
  color: var(--text-secondary); border-left: 2px solid var(--border-bright);
}
.at-obs {
  margin-top: 5px; padding-left: 8px; font-size: 11.5px; line-height: 1.45;
  color: var(--text-secondary); border-left: 2px solid var(--border-bright);
}

/* Baixa da peça: a LINHA fica verde, não só o botão — com vinte linhas na
   tela, é a cor da linha que responde "já pedi essa?" de longe. */
.at-cabecalho, .at-linha {
  grid-template-columns: 84px minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,.8fr) 84px 108px;
}
.at-linha.pedida { background: rgba(52,211,153,.07); border-left-color: var(--success); }
.at-linha.pedida:hover { background: rgba(52,211,153,.12); }
/* "Peça chegou" (2026-09-18): estágio seguinte a "pedida" — cor diferente
   pra distinguir de longe "já comprei" de "já está aqui". */
.at-linha.chegou { background: rgba(79,141,251,.08); border-left-color: var(--accent); }
.at-linha.chegou:hover { background: rgba(79,141,251,.14); }

.at-baixa { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.at-btn-baixa {
  padding: 7px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  background: var(--success-dim); border: 1px solid rgba(52,211,153,.38);
  color: var(--success-text); font: 700 11.5px inherit; font-family: inherit;
  transition: background .15s, transform .12s;
}
.at-btn-baixa:hover { background: rgba(52,211,153,.22); transform: translateY(-1px); }
.at-btn-remover {
  padding: 5px 9px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; line-height: 1; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.at-btn-remover:hover { background: var(--danger-dim); border-color: var(--danger); color: var(--danger-text); }
.at-pedida {
  font-size: 11.5px; font-weight: 650; color: var(--success-text);
  white-space: nowrap; cursor: help;
}
.at-pedida.at-chegou { color: var(--accent-text); }

/* Formulário mini de "anexar comprovante" que abre dentro da própria
   célula ao clicar "Já pedi" — cabe na coluna estreita da tabela, por isso
   o botão de foto vira uma versão compacta do .df-foto-botao do painel. */
.at-pedido-form { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.df-foto-botao-mini { min-height: 32px; font-size: 11.5px; padding: 4px 8px; }
.at-pedido-form .df-thumb { max-height: 90px; }
.at-pedido-acoes { display: flex; gap: 6px; align-items: center; }
.at-btn-cancelar-mini {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 11px; font-family: inherit;
  text-decoration: underline;
}

/* Sugestão de cliente vinda do que o técnico registrou em campo */
.peca-sugere {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 8px; padding: 9px 12px; border-radius: 10px;
  background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.26);
  font-size: 12px; color: var(--text-secondary);
}
.peca-sugere.ambigua {
  background: var(--gold-dim); border-color: rgba(245,181,68,.3);
}
.peca-sugere-txt b { color: var(--text-primary); }
.peca-sugere-ok {
  margin-left: 6px; padding: 1px 7px; border-radius: 5px; font-size: 10px;
  font-weight: 700; background: rgba(52,211,153,.2); color: var(--success-text);
}
.peca-sugere-opcoes { display: flex; gap: 6px; flex-wrap: wrap; }
.peca-sugere-btn {
  margin-left: auto; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: var(--success-dim); border: 1px solid rgba(52,211,153,.4);
  color: var(--success-text); font: 700 11.5px inherit; font-family: inherit;
  white-space: nowrap;
}
.peca-sugere.ambigua .peca-sugere-btn {
  margin-left: 0; background: var(--gold-dim);
  border-color: rgba(245,181,68,.4); color: var(--gold-text);
}
.peca-sugere-btn:hover { filter: brightness(1.15); }

/* ═══ Estoque do carro do técnico ═══════════════════════════════════ */
.btn-carro:hover { color: var(--accent-2); border-color: rgba(34,211,238,.4); }

.carro-form {
  display: grid; grid-template-columns: 1.1fr 1.4fr 76px auto; gap: 8px;
  margin-bottom: 14px;
}
.carro-qtd-input { text-align: center; }
.carro-lista { max-height: 320px; overflow-y: auto; }
.carro-vazio {
  padding: 22px; text-align: center; font-size: 12.5px; color: var(--text-muted);
}
.carro-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 6px;
  background: var(--bg-card);
}
.carro-info { flex: 1; min-width: 0; }
.carro-codigo {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--text-primary);
}
.carro-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.carro-qtd { display: flex; align-items: center; gap: 4px; flex: none; }
.carro-btn {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border-bright);
  color: var(--text-secondary); font-size: 15px; line-height: 1;
  font-family: inherit; display: grid; place-items: center;
}
.carro-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.carro-num {
  min-width: 30px; text-align: center; font-weight: 700; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}

/* Alerta na linha do atendimento: aparece ANTES do botão de comprar, que é
   onde a informação impede o gasto. */
.at-no-carro {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin-top: 7px; padding: 7px 11px; border-radius: 9px; font-size: 11.5px;
  background: rgba(34,211,238,.10); border: 1px solid rgba(34,211,238,.3);
  color: var(--cyan-text);
}
.at-no-carro b { color: var(--text-primary); }
.at-carro-icone { font-size: 13px; }

/* Resumo no topo ao abrir a aba. Faixa por linha se perde na rolagem. */
.aviso-carro {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 14px;
  padding: 12px 14px; border-radius: 12px; font-size: 13px;
  background: var(--bg-elevated); border: 1px solid rgba(34,211,238,.4);
  box-shadow: 0 10px 34px rgba(0,0,0,.5); color: var(--text-primary);
  animation: avisoEntra .22s ease-out;
}
.aviso-carro-icone { font-size: 18px; flex: none; }
.aviso-carro-fechar {
  border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 6px;
  margin-left: auto; font-family: inherit;
}
.aviso-carro-fechar:hover { color: var(--text-primary); background: var(--bg-hover); }

@media (max-width: 720px) {
  .carro-form { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   CELULAR — correções de sobreposição
   ═══════════════════════════════════════════════════════════════════
   Este bloco vai por último de propósito: sobrescreve o que veio antes
   sem precisar caçar e alterar cada regra original. */
@media (max-width: 760px) {

  /* 1. ASSINATURA DEIXA DE FLUTUAR.
     Fixa sobre uma página que rola, ela sempre vai passar por cima de
     alguma coisa — não existe posição segura. No celular ela entra no
     fluxo, no fim da página: continua visível, nunca cobre nada. */
  .assinatura-autor {
    position: static; display: block; text-align: center;
    margin: 26px 0 12px; opacity: .5; font-size: 12px;
    text-shadow: none;
  }

  /* 2. ESPAÇO PARA OS AVISOS FIXOS.
     O aviso do carro e o de dados novos ficam presos no rodapé; sem
     folga embaixo, a última linha da lista fica permanentemente
     escondida atrás deles. Somado ao botão do chat. */
  .main, .historico-wrap { padding-bottom: 150px; }

  .aviso-atualizacao { left: 10px; right: 10px; max-width: none; bottom: 84px; }

  /* 3. CARTÃO DO TÉCNICO PARA DE ESTOURAR.
     Nome + cinco botões não cabem em 390px: a barra rolava para o lado e
     o cartão seguinte aparecia cortado. As ações passam para a linha de
     baixo, alinhadas à direita. */
  /* A raiz do estouro era o .layout: grid-template-columns 380px 1fr numa
     tela de 390 não deixa espaço para nada, e a barra rolava para o lado
     mostrando o cartão seguinte cortado. Empilhado, cada faixa usa a
     largura inteira. O cartão volta a caber em uma linha: cinco botões de
     22px mais avatar somam ~160px e sobram ~200px para o nome. */
  /* html/body estavam com height:100% e overflow:hidden (regra do bloco de
     768px). Era isso que travava o dedo: o conteúdo tinha 1643px e a página
     ficava presa nos 844px da janela. */
  html, body {
    height: auto; min-height: 100%;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* A PÁGINA INTEIRA ROLA — uma barra de rolagem só.
     No desktop isto é um layout de aplicativo: .layout ocupa 100vh com
     overflow:hidden e cada painel rola por dentro. No celular esse desenho
     vira armadilha: o dedo rola só quando encosta no painel certo, e parece
     que a tela travou. Aqui tudo tem altura natural e quem rola é o
     documento, que é o que o dedo espera. */
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto; min-height: 100vh; overflow: visible;
  }
  .sidebar {
    max-height: none; height: auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .sidebar-list { max-height: none; height: auto; overflow: visible; }
  .main { overflow: visible; height: auto; min-height: 0; }
  .mapa-container, .mapa-wrapper { max-height: 60vh; }
  .sidebar, .sidebar-list, .tecnico-section { max-width: 100%; overflow-x: hidden; }
  .tecnico-header { gap: 6px; padding: 10px; }
  .tecnico-actions { gap: 2px; }

  /* DESFAZ O CARROSSEL HORIZONTAL.
     Havia uma regra em 768px que punha os técnicos lado a lado com
     min-width:180px. Cartão de 180px não comporta nome mais cinco botões:
     o conteúdo estourava e via-se o cartão seguinte cortado na borda.
     Lista vertical é o padrão do celular e usa a largura inteira. */
  .sidebar-list { display: block; overflow: visible; flex: 0 0 auto; }
  .tecnico-section { flex: none; min-width: 0; width: 100%; margin-bottom: 12px; }
  .fichas-do-tecnico { display: block; padding-left: 16px; }
  .ficha-item { min-width: 0; margin-bottom: 4px; }

  /* 4. ATENDIMENTO EM UMA COLUNA.
     Em duas colunas a observação ficava com ~150px e quebrava palavra
     por palavra ("Cliente / pediu / para / nao"). Empilhado, cada campo
     tem a largura inteira. */
  .at-cabecalho { display: none; }
  .at-linha { grid-template-columns: 1fr; gap: 9px; }
  .at-quando { flex-direction: row; align-items: baseline; gap: 8px; }
  .at-tecnico, .at-foto, .at-baixa { flex-direction: row; align-items: center; }
  .at-baixa { justify-content: flex-start; }
  .at-obs, .at-detalhe { padding-left: 8px; }

  /* 5. BOTÃO DO CHAT SAI DE CIMA DO CONTEÚDO.
     Ele é o elemento mais alto da tela e cobria gráfico e última linha.
     Encolhe e a folga do item 2 completa. */
  .chat-bolha { transform: scale(.86); transform-origin: bottom right; }

  /* 6. Cartões de indicador em duas colunas, não quatro espremidos. */
  .at-cartoes { grid-template-columns: 1fr 1fr; gap: 9px; }
  .at-num { font-size: 25px; }

  /* 7. Cabeçalho da seção deixa o filtro de período respirar. */
  .historico-header { flex-wrap: wrap; row-gap: 10px; }
  .at-periodo { width: 100%; }
  .at-per { flex: 1; text-align: center; }
}

/* Telas bem estreitas: os quatro indicadores empilham de vez. */
@media (max-width: 360px) {
  .at-cartoes { grid-template-columns: 1fr; }
  .carro-form { grid-template-columns: 1fr; }
}

/* A faixa de avisos passou a ter mais de uma linha (rastreio mudo + setor).
   O aviso GRAVE é o que o cliente está vendo agora — vermelho, não amarelo. */
.aviso-sem-setor { flex-direction: column; align-items: stretch; gap: 8px; }
.aviso-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.aviso-linha.grave {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(224,168,42,.25);
  color: var(--danger-text);
}
.aviso-linha.grave b { color: var(--text-primary); }

/* ─── Reagendar (técnico + dia no modal de editar) ────────────────────
   Junta o que antes eram dois lugares diferentes. Cartões clicáveis em vez
   de <select>: o Kalebe quis "menos feio", e escolher batendo o olho num
   quadro é mais direto que abrir uma lista. */
.reagendar {
  margin-top: 6px; padding: 14px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.reagendar-titulo {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; color: var(--text-secondary);
  margin-bottom: 10px;
}
.reagendar-tecnicos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.reag-tec {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--text-secondary);
  font-family: inherit; font-size: 12px; font-weight: 600;
  transition: border-color .12s, background .12s, color .12s;
}
.reag-tec:hover { border-color: var(--border-bright); color: var(--text-primary); }
.reag-tec.sel {
  border-color: var(--cor); color: #fff;
  background: color-mix(in srgb, var(--cor) 22%, transparent);
}
.reag-bolinha { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.reagendar-dias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 7px; margin-top: 5px;
}
.reag-dia {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 8px 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: none; color: var(--text-primary);
  font-family: inherit; transition: border-color .12s, background .12s;
}
.reag-dia:hover:not(.atual) { border-color: var(--accent); }
.reag-dia.sel {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.reag-dia.atual { opacity: .5; cursor: default; }
.reag-dia-nome { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.reag-dia-meta { font-size: 10.5px; color: var(--text-muted); }
.reag-hoje {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  background: #2aa05c; color: #fff; padding: 1px 5px; border-radius: 4px;
}
.reag-vazio { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted); padding: 4px 2px; }

/* Criar dia novo dentro do reagendar (ocupa a linha inteira do grid) */
.reag-novo { grid-column: 1 / -1; margin-top: 2px; }
.reag-novo-btn {
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  color: var(--accent-text); background: none;
  border: 1px dashed var(--border-bright); border-radius: 9px;
  padding: 7px 11px; width: 100%; font-family: inherit;
  transition: border-color .12s, color .12s;
}
.reag-novo-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.reag-novo-form { display: flex; gap: 8px; margin-top: 7px; align-items: center; }
.reag-novo-form .form-input { flex: 1 1 auto; }

/* ─── Verificar CEP agrupado por técnico ──────────────────────────────
   Antes as rotas de todos vinham numa lista só e ninguém sabia de quem era
   cada dia. Agora cada técnico tem seu bloco, com a barrinha da cor dele. */
.vcep-grupo-tec {
  margin-bottom: 14px; padding-top: 4px;
  border-top: 1px solid var(--border);
}
.vcep-grupo-tec:first-of-type { border-top: none; }
.vcep-grupo-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 2px 10px;
}
.vcep-grupo-bolinha { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.vcep-grupo-nome {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--cor); flex: 1;
}
.vcep-grupo-cont {
  font-size: 11px; color: var(--text-muted);
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: 99px; padding: 2px 9px;
}
.vcep-grupo-vazio { font-size: 12px; color: var(--text-muted); padding: 4px 2px 8px; }

/* ─── Verificar CEP: um mapa por técnico, lado a lado ─────────────────
   Dois técnicos = dois mapas na mesma linha (a tela tem largura). Três ou
   mais quebram para a linha de baixo. Um só ocupa a largura inteira. Abaixo
   de 900px empilha, senão os mapas ficam estreitos demais para servir. */
.vcep-grupos-grade {
  display: grid;
  /* DUAS colunas fixas — não auto-fit. O auto-fit empilhava quando a caixa
     era estreita (o "corrido" que o Kalebe viu). Aqui força lado a lado e só
     empilha de verdade abaixo de 820px, onde dois mapas não caberiam mesmo. */
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.vcep-grupos-grade .vcep-grupo-tec {
  border-top: none;               /* na grade, cada bloco é um cartão */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 0;
  background: rgba(255,255,255,.02);
  min-width: 0;                   /* deixa o mapa encolher dentro da coluna */
}
.vcep-grupos-grade .vcep-mapa { height: 300px; }
@media (max-width: 820px) {
  .vcep-grupos-grade { grid-template-columns: 1fr; }
}

/* Na aba de análise (a que tem os mapas), a caixa precisa de largura para os
   dois lado a lado — os 640px do modo normal deixariam tudo espremido.
   A altura fixa com scroll também sai: com dois mapas, rolar dentro de uma
   janelinha de 440px é pior que a página inteira rolar. */
.verificador-box--full.vcep-modo-mapas { max-width: 1080px; }
.vcep-modo-mapas .vcep-analise-wrap { max-height: none; overflow: visible; }

/* ═══ Estoque ═══════════════════════════════════════════════════════════ */
.estoque-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.estoque-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 18px;
}
.estoque-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.estoque-card--alerta { border-color: var(--danger); background: var(--danger-dim); }
.estoque-card-num { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.estoque-card--alerta .estoque-card-num { color: var(--danger-text); }
.estoque-card-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* Navegação em dois níveis: breadcrumb + cards de prateleira */
.estoque-topo-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.estoque-breadcrumb { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.estoque-breadcrumb a { color: var(--accent-text); cursor: pointer; }
.estoque-breadcrumb a:hover { text-decoration: underline; }
.estoque-breadcrumb span { margin: 0 4px; opacity: .6; }

.estoque-prateleiras {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.estoque-subgrupos-titulo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin: 6px 2px 8px;
}
.estoque-subgrupos-titulo + .estoque-prateleiras { margin-bottom: 16px; }
.estoque-prateleira {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.estoque-prateleira:hover { border-color: var(--accent); background: var(--bg-elevated); transform: translateY(-2px); }
.estoque-prateleira-nome {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.estoque-prateleira-meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

.estoque-filtros { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.estoque-busca-input { flex: 1 1 280px; max-width: 460px; }
.estoque-filtro-sel { flex: 0 0 auto; width: auto; min-width: 180px; }

/* Chips de aparelho — o filtro rápido "só geladeira", "só lavadora" */
.estoque-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.estoque-chip {
  font-size: 12px; font-weight: 600; padding: 6px 14px; cursor: pointer;
  color: var(--text-secondary); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 20px; transition: all .15s;
}
.estoque-chip:hover { border-color: var(--border-bright); color: var(--text-primary); }
.estoque-chip.ativo {
  color: #fff; background: var(--accent-deep);
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow);
}

/* Grupo por aparelho — as "prateleiras" estilo AgoraOS */
.estoque-grupo { margin-bottom: 22px; }
.estoque-grupo-cab {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 2px 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border-bright);
}
.estoque-grupo-nome {
  font-size: 13px; font-weight: 700; color: var(--accent-light);
  text-transform: uppercase; letter-spacing: .04em;
}
.estoque-grupo-cont { font-size: 11px; color: var(--text-muted); }
.estoque-item-ident {
  font-size: 11px; font-weight: 600; color: var(--accent-text);
  background: var(--accent-dim); border-radius: 6px; padding: 1px 7px;
}

.estoque-item {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.estoque-item-foto {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  flex: 0 0 auto; border: 1px solid var(--border); cursor: zoom-in;
}
.estoque-item:hover { border-color: var(--border-bright); background: var(--bg-elevated); }
.estoque-item--alerta { border-left: 3px solid var(--danger); }
.estoque-item-info { flex: 1 1 auto; min-width: 0; }
.estoque-item-cod {
  font-weight: 700; font-size: 13px; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.estoque-tag-alerta {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--danger-text); background: var(--danger-dim);
  border: 1px solid var(--danger); border-radius: 20px; padding: 1px 8px;
}
.estoque-item-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.estoque-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.estoque-item-saldo { text-align: right; flex: 0 0 auto; min-width: 74px; }
.estoque-saldo-num { font-size: 20px; font-weight: 700; color: var(--accent-light); }
.estoque-item--alerta .estoque-saldo-num { color: var(--danger-text); }
.estoque-saldo-lbl { font-size: 10px; color: var(--text-muted); }
.estoque-item-acoes { display: flex; gap: 5px; flex-wrap: wrap; flex: 0 0 auto; justify-content: flex-end; max-width: 300px; }
.btn-xs { padding: 4px 9px; font-size: 10px; border-radius: 7px; }
.estoque-btn-excluir:hover { color: var(--danger-text); border-color: var(--danger); background: var(--danger-dim); }

.estoque-mov-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Histórico */
.estoque-hist-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.estoque-hist-titulo { font-weight: 700; color: var(--text-primary); }
.estoque-hist-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.estoque-hist-tabela { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 720px; }
.estoque-hist-tabela th {
  text-align: left; padding: 9px 12px; color: var(--text-muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); background: var(--bg-panel);
}
.estoque-hist-tabela td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.estoque-hist-link { color: var(--accent-text); cursor: pointer; text-decoration: none; }
.estoque-hist-link:hover { text-decoration: underline; }
.estoque-hist-tabela tr:last-child td { border-bottom: none; }
.estoque-hist-entrada td:first-child { color: var(--success-text); font-weight: 600; }
.estoque-hist-saida td:first-child { color: var(--danger-text); font-weight: 600; }
.estoque-hist-ajuste td:first-child { color: var(--accent-text); font-weight: 600; }

/* Drawer lateral (editor de permissões) */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(3,5,10,0.6); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-overlay.aberto { opacity: 1; pointer-events: all; }
.drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 420px; max-width: 92vw;
  background: linear-gradient(160deg, rgba(17,28,49,0.99), rgba(6,9,17,0.99));
  border-left: 1px solid var(--border-bright);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.68,0,1);
  padding: 22px;
}
.drawer-overlay.aberto .drawer { transform: translateX(0); }
.drawer-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer-titulo { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.drawer-sub { font-size: 13px; color: var(--accent-text); margin-top: 2px; }
.drawer-fechar {
  background: none; border: none; color: var(--text-muted);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.drawer-fechar:hover { color: var(--text-primary); }
.drawer-ajuda { font-size: 12px; color: var(--text-muted); margin: 10px 0 4px; }
.drawer-corpo { flex: 1; overflow-y: auto; margin: 8px -4px; padding: 0 4px; }
.drawer-acoes { display: flex; gap: 10px; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--border); }

.perm-area { margin-bottom: 16px; }
.perm-area-titulo {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: 4px 2px 8px;
}
.perm-linha {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg-card); margin-bottom: 6px; font-size: 13px; color: var(--text-primary);
  transition: border-color .12s, background .12s;
}
.perm-linha:hover { border-color: var(--border-bright); background: var(--bg-elevated); }
.perm-check { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; }

/* Bipar nota fiscal */
.modal-largo { max-width: 640px; width: 100%; }
.bipar-entrada { display: flex; gap: 8px; }
.bipar-entrada .form-input { flex: 1 1 auto; font-size: 15px; letter-spacing: .3px; }
.bipar-alt { display: flex; gap: 14px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.bipar-xml-link, .bipar-camera-btn {
  font-size: 12px; cursor: pointer; background: none; border: none;
  color: var(--accent-text); font-family: inherit; padding: 0;
}
.bipar-xml-link:hover, .bipar-camera-btn:hover { text-decoration: underline; }
.bipar-camera-btn {
  border: 1px solid var(--border-bright); border-radius: 8px; padding: 6px 12px; font-weight: 600;
}
.bipar-cabecalho { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bipar-chave-tag { font-size: 11px; color: var(--text-muted); font-family: monospace; }

/* Navegador de destino do bipar (clica Panasonic > Geladeira) */
.bipar-nav-wrap { margin-top: 14px; }
.bipar-nav-titulo { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.bipar-nav-bc { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.bipar-nav-bc a { color: var(--accent-text); cursor: pointer; }
.bipar-nav-bc a:hover { text-decoration: underline; }
.bipar-nav-bc span { margin: 0 3px; opacity: .6; }
.bipar-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bipar-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  transition: border-color .12s, background .12s;
}
.bipar-nav-item:hover { border-color: var(--accent); background: var(--bg-elevated); }
.bipar-nav-seta { color: var(--text-muted); font-weight: 700; }
.bipar-nav-vazio { font-size: 12px; color: var(--text-muted); padding: 8px 2px; }
.bipar-nav-destino {
  margin-top: 10px; font-size: 12.5px; color: var(--text-muted);
  padding: 8px 12px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border);
}
.bipar-nav-destino.ok { color: var(--success-text); border-color: var(--success); background: var(--success-dim); }

/* Elo com a aba Peças: selo de saldo e botão de entrada */
.peca-estoque-tag {
  font-size: 10px; font-weight: 600; color: var(--accent-text);
  background: var(--accent-dim); border-radius: 6px; padding: 1px 7px; margin-left: 6px;
}
.peca-estoque-btn {
  font-size: 10px; font-weight: 600; cursor: pointer;
  color: var(--accent-text); background: transparent;
  border: 1px solid var(--border-bright); border-radius: 7px; padding: 4px 9px;
  max-width: 132px; white-space: normal; line-height: 1.3; text-align: center;
}
.peca-estoque-btn:hover { border-color: var(--accent); color: var(--text-primary); background: var(--accent-dim); }

/* Elo com a aba Agendar Clientes. Só faz sentido depois que a peça chegou —
   por isso fica escondido até a linha ganhar a classe .chegou (a mesma que
   alternarChegada() já alterna sem redesenhar a lista inteira). */
.peca-linha:not(.chegou) .peca-agendar { display: none; }
.peca-agendar {
  font-size: 10px; font-weight: 600; cursor: pointer;
  color: var(--accent-text); background: transparent;
  border: 1px solid var(--border-bright); border-radius: 7px; padding: 4px 9px;
  max-width: 132px; white-space: normal; line-height: 1.3; text-align: center;
}
.peca-agendar:hover { border-color: var(--accent); color: var(--text-primary); background: var(--accent-dim); }
.peca-agendar:disabled { opacity: .6; cursor: default; }
.peca-agendar.enviado {
  border-style: solid; border-color: var(--accent-2, #22d3ee);
  background: rgba(34,211,238,.12); color: var(--cyan-text);
}

/* Igual ao .peca-agendar acima, mas SEM a trava ":not(.chegou)" -- pedidos
   emitidos (pedido de 2026-09-03) precisam agendar o cliente ANTES da peça
   chegar, não depois. */
.peca-agendar-email {
  font-size: 10px; font-weight: 600; cursor: pointer;
  color: var(--accent-text); background: transparent;
  border: 1px solid var(--border-bright); border-radius: 7px; padding: 4px 9px;
  max-width: 132px; white-space: normal; line-height: 1.3; text-align: center;
}
.peca-agendar-email:hover { border-color: var(--accent); color: var(--text-primary); background: var(--accent-dim); }
.peca-agendar-email:disabled { opacity: .6; cursor: default; }
.peca-agendar-email.enviado {
  border-style: solid; border-color: var(--accent-2, #22d3ee);
  background: rgba(34,211,238,.12); color: var(--cyan-text);
}

/* Cartão de pedido EMITIDO (e-mail) — layout próprio, não o grid de 4
   colunas do .peca-linha comum. Motivo (pedido de 2026-09-03: "está
   horrível pra visualizar"): o código de peça da loja é um SKU longo
   (14-18 caracteres, ex: "AWW027PACYA0-2J0"), bem maior que o "NF ...12345678"
   /"Pedido 12345" que o grid original foi desenhado pra caber numa coluna
   estreita de ~200px — o código quebrava linha, brigava com a data e o
   selo no mesmo espaço apertado. Aqui o código ganha uma linha própria,
   de largura total, em fonte monoespaçada maior — e só embaixo vêm os
   campos editáveis, num grid de 3 colunas com mais fôlego. */
.peca-linha-email { display: block; }
.pel-topo {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.pel-codigo {
  font-family: var(--font-mono); font-weight: 700; font-size: 16.5px;
  letter-spacing: .3px; color: var(--text, #e6edf7);
  word-break: break-all;
}
.pel-data { margin-left: auto; font-size: 11.5px; color: var(--text-muted, #8fa3bf); white-space: nowrap; }
.pel-remover {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-bright); background: transparent;
  color: var(--text-muted, #8fa3bf); font-size: 12px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.pel-remover:hover { border-color: var(--danger-text, #fca5a5); color: var(--danger-text, #fca5a5); background: rgba(248,113,113,.1); }
.pel-corpo {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 148px;
  gap: 12px; align-items: end;
}
@media (max-width: 720px) {
  .pel-corpo { grid-template-columns: 1fr 1fr; }
  .peca-linha-email .peca-acoes { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (max-width: 460px) {
  .pel-topo { gap: 6px 12px; }
  .pel-data { margin-left: 0; }
  .pel-corpo { grid-template-columns: 1fr; }
}

/* Estados auxiliares reutilizados pela aba */
.carregando { padding: 30px; text-align: center; color: var(--text-muted); font-size: 13px; }
.vazio-box {
  padding: 34px 20px; text-align: center; color: var(--text-muted); font-size: 13px;
  background: var(--bg-card); border: 1px dashed var(--border-bright); border-radius: var(--radius);
}
.erro-box {
  padding: 16px; color: var(--danger-text); font-size: 13px;
  background: var(--danger-dim); border: 1px solid var(--danger); border-radius: var(--radius);
}

@media (max-width: 720px) {
  .estoque-cards { grid-template-columns: 1fr; }
  .estoque-item { flex-wrap: wrap; }
  .estoque-item-acoes { max-width: none; width: 100%; justify-content: flex-start; }
}

/* ─── Vendas de balcão ──────────────────────────────────────────────── */
.venda-layout { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; margin-top: 12px; }
.venda-busca-input { font-size: 15px; letter-spacing: .2px; margin-bottom: 12px; }

.venda-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; max-height: 62vh; overflow-y: auto; padding-right: 2px;
}
.venda-produto-card {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; cursor: pointer; font-family: inherit; transition: border-color .12s, background .12s;
}
.venda-produto-card:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-elevated); }
.venda-produto-card:disabled, .venda-produto-card.sem-saldo { opacity: .5; cursor: not-allowed; }
.venda-produto-foto, .venda-produto-sem-foto {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 7px; object-fit: cover; margin-bottom: 7px;
  background: var(--bg-panel);
}
.venda-produto-sem-foto {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-muted); border: 1px dashed var(--border-bright);
}
.venda-produto-nome { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.venda-produto-cod { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-family: monospace; }
.venda-produto-preco { font-size: 13px; font-weight: 700; color: var(--accent-light); margin-top: 4px; }
.venda-produto-saldo { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.venda-produto-card.sem-saldo .venda-produto-saldo { color: var(--danger-text); }

/* Aba "Clientes" em OS (pedido de 2026-09-01) — card por cliente em vez de
   reaproveitar a grid de 4 colunas pensada pra OS (ficava "jogado e feio"
   com só 3 dados de verdade pra preencher 4 colunas). Clique abre o modal
   de detalhe com o cadastro completo. */
.prazo-painel {
  background: var(--bg-card); border: 1px solid var(--border-bright);
  border-radius: 13px; padding: 14px 16px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 7px;
}
.prazo-linha {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: var(--bg-panel); transition: background .14s ease;
}
.prazo-linha:hover { background: var(--bg-hover); }
.prazo-cliente { font-weight: 700; color: var(--text-primary); font-size: 13px; flex: 1 1 160px; }
.prazo-aparelho { color: var(--text-muted); font-size: 12px; flex: 1 1 160px; }
.prazo-data { color: var(--text-secondary); font-size: 12px; font-family: var(--font-mono); }
.prazo-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px; flex: 0 0 auto;
}
.prazo-badge-perto   { background: var(--gold-dim);   color: var(--gold-text); }
.prazo-badge-hoje,
.prazo-badge-vencido { background: var(--danger-dim); color: var(--danger-text); }

.cliente-lista { display: flex; flex-direction: column; gap: 9px; }
.cliente-linha {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 13px; padding: 12px 16px; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.cliente-linha:hover {
  background: var(--bg-elevated); border-color: var(--border-bright);
  box-shadow: 0 6px 18px rgba(0,0,0,.14); transform: translateY(-1px);
}
.cliente-linha-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-dim); color: var(--accent-text);
  font-size: 13px; font-weight: 700;
}
.cliente-linha-principal { flex: 1 1 auto; min-width: 0; }
.cliente-linha-nome { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cliente-linha-doc { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
.cliente-linha-lado { flex: 0 0 auto; text-align: right; }
.cliente-linha-contato { font-size: 12.5px; color: var(--text-primary); }
.cliente-linha-cidade { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.cliente-detalhe-linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.cliente-detalhe-linha:last-child { border-bottom: none; }
.cliente-detalhe-rotulo {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .04em; flex: 0 0 auto;
}
.cliente-detalhe-valor { font-size: 13.5px; color: var(--text-primary); text-align: right; }
.cliente-detalhe-secao {
  margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted);
}
.cliente-aparelhos-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cliente-aparelho-item {
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  transition: background .14s, border-color .14s;
}
.cliente-aparelho-item:hover { background: var(--bg-hover); border-color: var(--border-bright); }
.cliente-aparelho-nome { font-size: 13px; font-weight: 650; color: var(--text-primary); }
.cliente-aparelho-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Histórico completo de OS no detalhe do cliente (pedido de 2026-09-22) --
   uma linha por OS, sem agrupar (ver abrirClienteDetalhe). */
.cliente-os-historico-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cliente-os-historico-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px 12px; align-items: center;
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  transition: background .14s, border-color .14s;
}
.cliente-os-historico-item:hover { background: var(--bg-hover); border-color: var(--border-bright); }
.cliente-os-historico-item .num-bloco { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; }
.cliente-os-historico-item .num { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.cliente-os-historico-item .aparelho { font-size: 12px; color: var(--text-secondary); }

.rel-neg-titulo { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.rel-neg-tabela-wrap { overflow-x: auto; }
.rel-neg-bairros { display: flex; flex-direction: column; gap: 8px; }
.rel-neg-bairro-linha {
  display: grid; grid-template-columns: 140px 1fr 40px; gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--text-secondary);
}

/* Faturamento: gráfico de barras por dia, em CSS puro (projeto não usa
   biblioteca de gráfico) — cada coluna é só uma div com altura em %,
   'title' nativo do navegador serve de tooltip sem precisar de JS extra. */
.fat-grafico {
  display: flex; align-items: flex-end; gap: 2px; height: 90px;
  padding: 8px 4px 0; margin-bottom: 14px;
  background: var(--bg-card); border-radius: 10px;
}
.fat-grafico-col { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 2px; }
.fat-grafico-barra {
  width: 100%; background: var(--accent); border-radius: 2px 2px 0 0;
  min-height: 0; transition: height .3s ease;
}
.fat-variacao { font-size: 13px; }
.fat-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fat-tabela th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text-muted); font-weight: 700; padding: 0 8px 6px 0; border-bottom: 1px solid var(--border);
}
.fat-tabela td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.fat-tabela tbody tr:hover td { background: var(--bg-hover); }

.ajuda-corpo { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.ajuda-item { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.ajuda-item:last-child { border-bottom: none; }
.ajuda-pergunta { font-size: 13.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.ajuda-resposta { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }

.t-df-checklist { display: flex; flex-direction: column; gap: 8px; }
.t-df-checklist-item {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary);
  padding: 8px 10px; border-radius: 9px; background: var(--bg-card); border: 1px solid var(--border);
}
.t-df-checklist-item input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.cliente-detalhe-editavel {
  cursor: pointer; border-radius: 6px; padding: 2px 6px; margin: -2px -6px;
  border-bottom: 1px dashed var(--border-bright);
  transition: background .14s, border-color .14s;
}
.cliente-detalhe-editavel:hover { background: var(--bg-hover); border-color: var(--accent); }
.cliente-detalhe-vazio { color: var(--text-faint); font-style: italic; }
.cliente-edit-input { font-size: 13.5px; padding: 5px 8px; width: 100%; max-width: 220px; }

.venda-carrinho {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; position: sticky; top: 12px;
}
.venda-carrinho-titulo { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.venda-carrinho-lista { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.venda-carrinho-vazio { font-size: 12px; color: var(--text-muted); padding: 10px 0; }
.venda-carrinho-item {
  display: grid; grid-template-columns: 34px 1fr auto auto auto; align-items: center; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.venda-carrinho-foto, .venda-carrinho-sem-foto {
  width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--bg-panel);
}
.venda-carrinho-info { min-width: 0; }
.venda-carrinho-nome { font-size: 11.5px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.venda-carrinho-qtd { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; }
.venda-qtd-btn {
  width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border-bright);
  background: var(--bg-panel); color: var(--text-primary); font-size: 12px; line-height: 1; cursor: pointer;
}
.venda-qtd-btn:hover { border-color: var(--accent); }
.venda-carrinho-valor { width: 64px; font-size: 11px; padding: 4px 6px; }
.venda-carrinho-subtotal { font-size: 11.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.venda-carrinho-remover {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px;
}
.venda-carrinho-remover:hover { color: var(--danger-text); }
.venda-carrinho-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.venda-resumo-total { font-size: 13px; color: var(--text-secondary); margin: 4px 0 2px; }

.venda-recente-linha {
  display: grid; grid-template-columns: 70px 1fr 70px 90px 130px auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.venda-recente-linha:last-child { border-bottom: none; }
.venda-recente-num { font-family: monospace; color: var(--text-muted); }
.venda-recente-cliente { font-weight: 600; color: var(--text-primary); }
.venda-recente-itens, .venda-recente-quando { color: var(--text-muted); font-size: 11px; }
.venda-recente-valor { font-weight: 700; color: var(--accent-light); }

@media (max-width: 900px) {
  .venda-layout { grid-template-columns: 1fr; }
  .venda-carrinho { position: static; }
  .venda-recente-linha { grid-template-columns: 1fr 1fr; row-gap: 4px; }
}