/* =========================================================================
   ITAM Make Distribuidora — ajustes de marca sobre o tema django-unfold.
   Estrutura em verde (definida em settings UNFOLD.COLORS); aqui aplicamos a
   fonte Figtree e o verde lima APENAS como destaque (regra da marca: lima
   nunca como texto sobre branco — só realces, seleção, foco e detalhes).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');
/* Set COMPLETO de ícones Material Symbols (o unfold embute só um subset → ícones
   fora dele viravam texto/"figurinha"). Carregado do CDN como a Figtree. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

:root {
  --make-lima: #cbf542;
  --make-lima-escuro: #8fb82e;
  --make-verde-medio: #32673a;
  --make-verde-escuro: #19241b;
  /* Verde vivo linha Intelbras + acentos Material */
  --intelbras-verde: #00a651;
  --intelbras-verde-escuro: #00913f;
  --categoria-notebook: #32673a;  /* era --mat-azul (#1e88e5), fora da marca */
  --mat-ambar: #ef8f3c;
  --mat-vermelho: #e0533f;
  --mat-roxo: #8e24aa;
}

/* Tipografia da marca (Figtree). Reafirma os ícones para não herdarem a fonte. */
body {
  font-family: 'Figtree', 'Inter', 'Montserrat', system-ui, sans-serif !important;
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}

/* Seleção de texto em verde lima sobre verde escuro (alto contraste). */
::selection {
  background: var(--make-lima);
  color: var(--make-verde-escuro);
}

/* Barra de rolagem discreta com toque da marca. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--make-verde-medio) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--make-verde-medio);
  border-radius: 8px;
}

/* Destaque verde lima no item ativo da navegação lateral. */
.unfold-sidebar a[aria-current="page"],
nav a[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--make-lima);
}

/* Realce de foco acessível: anel verde suave (sem o retângulo lima/amarelo). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.unfold input:focus,
.unfold select:focus,
.unfold textarea:focus {
  outline: none;
  border-color: var(--intelbras-verde) !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 81, .20);
}

/* Caixa de busca lateral: troca o contorno verde forte do unfold por um
   anel suave (o retângulo vinha de focus-within:outline-primary-600). */
div:has(> #nav-filter):focus-within {
  outline: none !important;
  border-color: var(--intelbras-verde) !important;
  box-shadow: 0 0 0 3px rgba(0, 166, 81, .18);
}

/* =========================================================================
   Barra de botões de SETOR (topo da lista de Baias) — estilo Material.
   Pílulas neutras; a selecionada fica verde vivo (Intelbras) com elevação.
   ========================================================================= */
.setor-botoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.setor-botoes__label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--make-verde-medio);
  margin-right: 4px;
}
.setor-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 9999px;            /* pílula */
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #14532d;
  background: #e8f5ee;
  border: 1px solid #c7e9d6;
  text-decoration: none;
  transition: all .15s ease;
  white-space: nowrap;
}
.setor-btn:hover {
  background: #d4eede;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 166, 81, .18);
}
.setor-btn--ativo {
  color: #fff;
  background: var(--intelbras-verde);
  border-color: var(--intelbras-verde);
  box-shadow: 0 3px 10px rgba(0, 166, 81, .35);   /* elevação Material */
}
.setor-btn--ativo:hover {
  background: var(--intelbras-verde-escuro);
}
/* Dark mode: pílulas neutras escuras */
.dark .setor-btn {
  color: #c6f4d9;
  background: rgba(0, 166, 81, .14);
  border-color: rgba(0, 166, 81, .35);
}
.dark .setor-btn--ativo {
  color: #04140a;
  background: var(--make-lima);
  border-color: var(--make-lima);
}

/* Botão de ação (CTA) — Transferência entre lojas. */
.setor-botoes--acao { margin-bottom: 12px; }
.setor-btn--cta {
  color: #fff; background: var(--intelbras-verde, #00a651);
  border-color: var(--intelbras-verde, #00a651); font-weight: 800;
  box-shadow: 0 3px 10px rgba(0, 166, 81, .3);
}
.setor-btn--cta:hover { background: var(--intelbras-verde-escuro, #0c7a3e); color: #fff; }
.dark .setor-btn--cta { color: #04140a; background: var(--make-lima); border-color: var(--make-lima); }

/* Submenu de setores: pílulas menores, levemente recuadas. */
.setor-botoes--submenu {
  margin-top: -6px;
  margin-bottom: 18px;
  padding-left: 12px;
  border-left: 3px solid #d4eede;
}
.setor-btn--sub {
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
}

/* Mais cor nas seções de formulário (faixa verde viva no título). */
.unfold fieldset > h2,
fieldset.module > h2 {
  border-left: 4px solid var(--intelbras-verde);
}

/* Cores das ações no dropdown: Alterar = verde, Excluir = vermelho. */
select[name="action"] option[value="alterar_selecionado"] {
  color: var(--intelbras-verde);
  font-weight: 600;
}
select[name="action"] option[value="delete_selected"] {
  color: var(--mat-vermelho);
  font-weight: 600;
}

/* =========================================================================
   Modal de edição na própria tela (ação "Alterar selecionado").
   ========================================================================= */
.make-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 32, 19, .55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.make-modal-overlay.is-open {
  display: flex;
}
.make-modal {
  background: #fff;
  width: min(980px, 95vw);
  height: min(860px, 90vh);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: make-modal-in .15s ease-out;
}
@keyframes make-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.make-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--intelbras-verde);
  color: #fff;
  flex: 0 0 auto;
}
.make-modal__title {
  font-weight: 700;
  font-size: 15px;
}
.make-modal__close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 8px;
}
.make-modal__close:hover {
  background: rgba(255, 255, 255, .2);
}
.make-modal__frame {
  border: 0;
  width: 100%;
  flex: 1 1 auto;
  background: #fff;
}
.dark .make-modal {
  background: #161b16;
}

/* =========================================================================
   Botões flutuantes de ação (substituem a barra inferior padrão do unfold).
   ========================================================================= */
/* Esconde a barra de ações nativa (mantém o <select> no DOM para o Excluir). */
#changelist-actions-wrapper {
  display: none !important;
}

.make-fab-bar {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border: 1px solid #e2e8e4;
  border-radius: 9999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  z-index: 9000;
}
.make-fab-bar.is-open {
  display: flex;
}
.make-fab-count {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  padding-left: 6px;
}
.make-fab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all .15s ease;
}
.make-fab--alterar {
  background: var(--intelbras-verde);
  box-shadow: 0 4px 12px rgba(0, 166, 81, .4);
}
.make-fab--alterar:hover:not(:disabled) {
  background: var(--intelbras-verde-escuro);
  transform: translateY(-1px);
}
.make-fab--reparo {
  background: #ef8f3c;
  box-shadow: 0 4px 12px rgba(239, 143, 60, .4);
  text-decoration: none;
}
.make-fab--reparo:hover { background: #d97706; transform: translateY(-1px); }
.make-fab--troca {
  background: var(--mat-vermelho);
  box-shadow: 0 4px 12px rgba(224, 83, 63, .4);
  text-decoration: none;
}
.make-fab--troca:hover { background: #c62828; transform: translateY(-1px); }
.make-fab--etiqueta {
  background: #0891b2; box-shadow: 0 4px 12px rgba(8, 145, 178, .4);
}
.make-fab--etiqueta:hover { background: #0e7490; transform: translateY(-1px); }
.make-fab--reativar {
  background: #00a651; box-shadow: 0 4px 12px rgba(0, 166, 81, .4); text-decoration: none;
}
.make-fab--transferir {
  background: #32673a; box-shadow: 0 4px 12px rgba(50, 103, 58, .4); text-decoration: none;
}
.make-fab--transferir:hover { background: #19241b; transform: translateY(-1px); }
.make-fab--atribuir { background: #8e24aa; color: #fff; }
.make-fab--atribuir:hover:not(:disabled) { background: #6d1b85; transform: translateY(-1px); }
.make-fab--termo {
  background: #475569; color: #fff; box-shadow: 0 4px 12px rgba(71, 85, 105, .4); text-decoration: none;
}
.make-fab--termo:hover:not(:disabled) { background: #334155; transform: translateY(-1px); }

/* Transferências: ações vêm da barra flutuante (ao marcar a caixinha) + modal de decisão */
.make-fab--autorizar { background: #00a651; color: #fff; box-shadow: 0 4px 12px rgba(0,166,81,.4); }
.make-fab--autorizar:hover:not(:disabled) { background: #0a5e30; transform: translateY(-1px); }

/* Escanear máquina (câmera → abrir chamado) */
.scan-wrap { max-width: 560px; margin: 0 auto; padding: 8px 4px 40px; }
.scan-titulo { font-size: 22px; font-weight: 800; color: #14532d; margin: 10px 0 4px; }
.dark .scan-titulo { color: #c6f4d9; }
.scan-sub { color: #475569; margin: 0 0 18px; }
.dark .scan-sub { color: #cbd5e1; }
.scan-reader { width: 100%; max-width: 380px; margin: 0 auto 14px; border-radius: 14px; overflow: hidden; background: #0b0f0d; }
.scan-acoes { display: flex; gap: 10px; justify-content: center; }
.scan-status { text-align: center; margin: 14px 0 0; font-weight: 600; color: #14532d; min-height: 22px; }
.dark .scan-status { color: #c6f4d9; }
.scan-status.is-erro { color: #c62828; }
.dark .scan-status.is-erro { color: #fca5a5; }
.scan-manual { margin: 22px auto 0; max-width: 380px; }
.scan-manual summary { cursor: pointer; color: #00a651; font-weight: 700; }
.scan-manual__form { display: flex; gap: 8px; margin-top: 10px; }
.scan-manual__form input { flex: 1; border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 11px; font: inherit; }
.dark .scan-manual__form input { background: #0f172a; border-color: #334155; color: #e5e7eb; }

/* Patrimônio clicável no zoom da máquina → abre a etiqueta pra imprimir. */
.monitor__patrimonio.is-link { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.monitor__patrimonio.is-link:hover { color: #cbf542; }

.tr-modal {
  position: fixed; inset: 0; z-index: 10000; display: none;
  background: rgba(15, 23, 42, .55); align-items: center; justify-content: center; padding: 20px;
}
.tr-modal.is-open { display: flex; }
.tr-modal__card {
  background: #fff; border-radius: 16px; width: 100%; max-width: 480px; padding: 22px 22px 18px;
  position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.dark .tr-modal__card { background: #161e18; color: #e5e7eb; }
.tr-modal__close {
  position: absolute; top: 10px; right: 14px; border: 0; background: transparent;
  font-size: 24px; line-height: 1; cursor: pointer; color: #94a3b8;
}
.tr-modal__title { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: #14532d; }
.dark .tr-modal__title { color: #c6f4d9; }
.tr-modal__info {
  background: #f2faf5; border: 1px solid #d6efdf; border-radius: 10px; padding: 10px 12px;
  font-size: 13px; line-height: 1.6; margin-bottom: 14px;
}
.dark .tr-modal__info { background: #11201a; border-color: #2a322b; }
.tr-modal__lbl { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.tr-modal__lbl span { font-weight: 400; color: #64748b; }
.tr-modal__ta {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 11px;
  font: inherit; font-size: 13px; resize: vertical; margin-bottom: 16px;
}
.dark .tr-modal__ta { background: #0f172a; border-color: #334155; color: #e5e7eb; }
.tr-modal__acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.tr-modal__btn {
  border: 0; border-radius: 9999px; padding: 9px 18px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.tr-modal__btn--cancel { background: #e2e8e0; color: #14532d; }
.tr-modal__btn--negar { background: #e0533f; color: #fff; }
.tr-modal__btn--negar:hover { background: #c62828; }
.tr-modal__btn--aut { background: #00a651; color: #fff; }
.tr-modal__btn--aut:hover { background: #0a5e30; }

/* Dropdown de notificações: altura máxima + scroll (o max-h-[70vh] do unfold é
   valor arbitrário do Tailwind e não existe no CSS compilado → sem scroll). */
.make-notif-drop { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }

/* Scroll horizontal das tabelas largas: no layout flex do unfold, os itens têm
   min-width:auto e empurram a tabela pra fora sem gerar barra. min-width:0 nos
   contêineres deixa a wrapper encolher e o overflow-x:auto dela funcionar. */
#content, #main, .mapa { min-width: 0; }
.tr-tabela-wrap, .tab-wrap { max-width: 100%; }
.make-fab--caixa {
  background: #0c7a3e; box-shadow: 0 4px 12px rgba(12, 122, 62, .4); text-decoration: none;
}
.make-fab--caixa:hover { background: #0a5e30; transform: translateY(-1px); }
.make-fab--reativar:hover { background: #15803d; transform: translateY(-1px); }

/* Tela de reativação de computador */
.reativar { max-width: 560px; margin: 0 auto; }
.reativar__card {
  background: #fff; border: 1px solid #eceff1; border-radius: 20px;
  padding: 28px; margin-top: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 22px rgba(0,0,0,.08);
}
.dark .reativar__card { background: #161b16; border-color: #2a322b; }
/* cabeçalho com badge tonal */
.reativar__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.reativar__badge {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: #c6f0d8; color: #00a651;
}
.reativar__badge .material-symbols-outlined { font-size: 26px; }
.dark .reativar__badge { background: #1f3a2a; color: #7fdca6; }
.reativar__title { margin: 0; font-size: 21px; font-weight: 800; color: #14532d; }
.dark .reativar__title { color: #c6f4d9; }
.reativar__subtitle { margin: 2px 0 0; font-size: 13px; color: #6b7280; font-weight: 500; }
.dark .reativar__subtitle { color: #9aa0a6; }
/* painel tonal com os dados do item */
.reativar__info {
  font-size: 14px; margin: 0 0 22px; padding: 14px 16px;
  background: #eef7f1; border: 1px solid #d7ebe0; border-radius: 12px; color: #14532d;
}
.reativar__info b { color: #14532d; }
.reativar__info span { display: inline-flex; align-items: center; gap: 5px; color: #51766a; font-size: 13px; }
.reativar__info-ico { font-size: 16px !important; color: #00a651; }
.dark .reativar__info { background: #11201a; border-color: #244234; color: #c6f4d9; }
.dark .reativar__info b { color: #c6f4d9; }
.dark .reativar__info span { color: #8fb6a4; }
.reativar__label { display: block; font-weight: 700; font-size: 13px; color: #374151; margin-bottom: 16px; }
.dark .reativar__label { color: #d7e3da; }
.reativar__hint { font-weight: 400; color: #9ca3af; }
.reativar__select {
  display: block; width: 100%; margin-top: 7px; padding: 11px 13px;
  border: 1.5px solid #d7dee5; border-radius: 11px; font-size: 14px; background: #fff; color: #1f2937;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.reativar__select:focus { outline: none; border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.18); }
.dark .reativar__select { background: #0f140f; border-color: #2a322b; color: #e5e7eb; }
.reativar__acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.reativar__acoes .mov-btn { display: inline-flex; align-items: center; gap: 6px; }
.reativar__acoes .mov-btn .material-symbols-outlined { font-size: 18px; }

/* Pré-visualização do patrimônio no cadastro de computador */
.make-patrimonio-preview {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 166, 81, .1); color: #14532d; font-weight: 700;
  padding: 8px 14px; border-radius: 9999px; font-size: 13px;
}
.make-patrimonio-preview b { font-size: 15px; letter-spacing: .5px; }
.dark .make-patrimonio-preview { background: rgba(0, 166, 81, .18); color: #c6f4d9; }
.make-fab[hidden] { display: none; }
.make-fab--excluir {
  background: var(--mat-vermelho);
  box-shadow: 0 4px 12px rgba(224, 83, 63, .4);
}
.make-fab--excluir:hover {
  background: #c62828;
  transform: translateY(-1px);
}
.make-fab:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.dark .make-fab-bar {
  background: rgba(22, 27, 22, .92);
  border-color: #2a322b;
}
.dark .make-fab-count {
  color: #c6f4d9;
}

/* =========================================================================
   Botão "mostrar/ocultar senha" dentro dos campos de senha.
   ========================================================================= */
.make-pass-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.make-pass-wrap > input {
  width: 100%;
  padding-right: 42px !important;
}
.make-pass-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  opacity: .7;
  color: #64748b;
}
.make-pass-eye:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .06);
}
.dark .make-pass-eye { color: #cbd5e1; }
.make-pass-eye .material-symbols-outlined {
  display: block; font-size: 21px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Olho antigo (SVG) — mantido só p/ não quebrar telas legadas; inerte agora. */
.make-eye { display: block; width: 22px; height: 22px; }
.make-eye__outline {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round;
}
.make-eye__iris { fill: currentColor; }
.make-eye__lid {
  fill: currentColor;
  transform: translateY(-16px);            /* aberto: pálpebra recolhida */
  transition: transform .28s ease;
}
.make-pass-eye:not(.is-open) .make-eye__lid { transform: translateY(0); }  /* fechado */

/* Botão "Alterar a senha" no lugar do hash da senha (form de usuário). */
.make-pass-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--intelbras-verde);
  color: #fff !important;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 166, 81, .3);
  transition: all .15s ease;
}
.make-pass-btn:hover {
  background: var(--intelbras-verde-escuro);
  transform: translateY(-1px);
}
.make-pass-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* =========================================================================
   MAPA DA LOJA — planta interativa (setores como áreas, baias como estações)
   ========================================================================= */
.mapa__toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.mapa__voltar {
  background: var(--g-gloss), var(--g-glass);
  border: 1px solid var(--g-edge);
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  color: #14532d;
  box-shadow: var(--g-elev);
}
.mapa__voltar:hover { box-shadow: var(--g-elev-h); }
.dark .mapa__voltar {
  background:
    linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%),
    linear-gradient(158deg, rgba(26,34,28,.6), rgba(18,24,20,.55));
  border-color: rgba(255,255,255,.1); color: #d7f0e2;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px -16px rgba(0,0,0,.5);
}
.mapa__titulo { font-size: 22px; font-weight: 800; color: #14532d; margin: 0; }
/* Legenda AGRUPADA num chip único (em vez de itens soltos). */
/* Legenda: dots + rótulos SOLTOS (sem caixinha), pra diferenciar do chip de filtro. */
.mapa__legenda {
  display: inline-flex; gap: 16px; margin-left: auto; flex-wrap: wrap; align-items: center;
  font-size: 12px; font-weight: 600; color: #64748b;
  background: transparent; border: 0; padding: 0;
}
.dark .mapa__legenda { background: transparent; border: 0; color: #94a3b8; }
.mapa__legenda .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
/* Ícone de ajuda no topo + chips de filtro por loja + texto do modal de ajuda */
.mapa__ajuda { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; border-radius: 8px; border: 1px solid #dbe7e0; background: rgba(255,255,255,.7); color: #0c7a3e; cursor: pointer; padding: 0; }
.mapa__ajuda:hover { background: var(--intelbras-verde,#00a651); color: #fff; border-color: transparent; }
.mapa__ajuda .material-symbols-outlined { font-size: 20px; }
.dark .mapa__ajuda { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #86efac; }
/* Filtro (mapa E kanban/setores/transferências) = 2ª LINHA do mesmo painel da toolbar.
   Botões arredondados, espaçados, SEM divisórias; ativo destaca arredondado verde→lima. */
.mapa__filtro, .kanban-filtro {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 16px; padding: 8px 14px;
  max-width: 100%;
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.6); border-top: 1px solid rgba(0,0,0,.06);
  border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px -18px rgba(13,50,32,.35);
}
.dark .mapa__filtro, .dark .kanban-filtro {
  background: rgba(22,30,24,.44); border-color: rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.6);
}
.mapa__filtro .setor-btn, .kanban-filtro .setor-btn {
  padding: 6px 14px; border-radius: 8px; border: 0; background: transparent;
  color: #14532d; font-weight: 700; box-shadow: none; transition: none;
}
.mapa__filtro .setor-btn:hover, .kanban-filtro .setor-btn:hover { background: rgba(0,166,81,.10); }
.mapa__filtro .setor-btn--ativo, .kanban-filtro .setor-btn--ativo {
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18;
}
.mapa__filtro .setor-btn--ativo:hover, .kanban-filtro .setor-btn--ativo:hover { background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); }
.dark .mapa__filtro .setor-btn, .dark .kanban-filtro .setor-btn { color: #cdd8d0; }
.dark .mapa__filtro .setor-btn:hover, .dark .kanban-filtro .setor-btn:hover { background: rgba(0,166,81,.16); }
.dark .mapa__filtro .setor-btn--ativo, .dark .kanban-filtro .setor-btn--ativo { color: #0b2e18; }
/* 2ª linha de filtro (por setor, cruzando lojas) colada logo abaixo da de unidade */
.mapa__filtro:has(+ .mapa__filtro--setor) { margin-bottom: 0; border-radius: 0; border-bottom: 0; }
.mapa__filtro--setor { border-radius: 0 0 10px 10px; }
.mapa__filtro-lbl {
  align-self: center; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #6b7280; margin-right: 6px;
}
.dark .mapa__filtro-lbl { color: #9aa6ae; }
/* Filtro compacto em DROPDOWNS (Unidade / Setor) — substitui as linhas de chips */
.flt-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 14px; padding: 9px 14px;
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.6); border-top: 1px solid rgba(0,0,0,.06);
  border-radius: 12px; box-shadow: 0 10px 24px -18px rgba(13,50,32,.35);
}
.dark .flt-bar { background: rgba(22,30,24,.44); border-color: rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.06); }
/* Dropdown CUSTOMIZADO (vidro espelhado) — Unidade (única) e Setor (multi) */
.mkdd { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.mkdd__lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.dark .mkdd__lbl { color: #9aa6ae; }
.mkdd__btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 150px;
  padding: 8px 10px 8px 12px; border-radius: 9px; border: 1px solid #cfe0d6;
  background: #fff; color: #14532d; font-weight: 700; font-size: 13.5px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mkdd__btn:hover { border-color: #00a651; }
.mkdd__btn[aria-expanded="true"] { border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.18); }
.dark .mkdd__btn { background: rgba(15,22,17,.6); color: #e6efe9; border-color: rgba(255,255,255,.14); }
.mkdd__cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkdd__chev { font-size: 18px; color: #00a651; flex: 0 0 auto; }
.mkdd__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 210px; max-height: 340px; overflow-y: auto;
  padding: 6px; border-radius: 14px;
  background: var(--g-glass); border: 1px solid var(--g-edge); box-shadow: var(--g-elev-h);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dark .mkdd__panel { background: rgba(24,32,26,.82); border-color: rgba(255,255,255,.12); }
.mkdd__panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--g-gloss); pointer-events: none; z-index: 0; }
.mkdd__opt {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 8px; text-decoration: none; color: #14532d; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.mkdd__opt:hover { background: rgba(0,166,81,.12); }
.dark .mkdd__opt { color: #e6efe9; }
.dark .mkdd__opt:hover { background: rgba(0,166,81,.18); }
.mkdd__opt.is-sel { background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18; }
.mkdd__opt--check input { accent-color: #00a651; width: 16px; height: 16px; flex: 0 0 auto; }
.mkdd__sep { position: relative; z-index: 1; height: 1px; background: rgba(0,0,0,.08); margin: 5px 4px; }
.dark .mkdd__sep { background: rgba(255,255,255,.12); }
.mkdd__actions { position: sticky; bottom: -6px; z-index: 1; display: flex; justify-content: flex-end;
  gap: 8px; padding: 8px 4px 2px; margin-top: 4px; background: linear-gradient(180deg, transparent, var(--g-glass) 40%); }
.dark .mkdd__actions { background: linear-gradient(180deg, transparent, rgba(24,32,26,.82) 40%); }
.mkdd__apply { background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18;
  font-weight: 800; border: 0; border-radius: 8px; padding: 7px 18px; cursor: pointer; }
/* Aviso "agente de coleta não detectado" (faixa âmbar sob o header) */
.agente-aviso {
  display: flex; align-items: center; gap: 10px; margin: 0 16px 12px; padding: 10px 14px;
  background: linear-gradient(180deg, #fff7e6, #fdf0d5); border: 1px solid #f0c879;
  border-radius: 12px; color: #7a4f10; box-shadow: 0 8px 22px -16px rgba(120,80,10,.5);
}
.dark .agente-aviso { background: rgba(239,143,60,.14); border-color: rgba(239,143,60,.38); color: #f6d79a; }
.agente-aviso__ico { font-size: 22px; color: #b45309; flex: 0 0 auto; }
.dark .agente-aviso__ico { color: #f6c667; }
.agente-aviso__txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.agente-aviso__txt code { background: rgba(0,0,0,.07); padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.dark .agente-aviso__txt code { background: rgba(255,255,255,.12); }
.agente-aviso__btn { flex: 0 0 auto; text-decoration: none; font-weight: 800; font-size: 13px;
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18;
  padding: 8px 14px; border-radius: 9px; white-space: nowrap; }
.agente-aviso__x { flex: 0 0 auto; border: 0; background: transparent; color: inherit; font-size: 20px;
  line-height: 1; cursor: pointer; opacity: .7; }
.agente-aviso__x:hover { opacity: 1; }
@media (max-width: 767px) { .agente-aviso { flex-wrap: wrap; } .agente-aviso__txt { flex-basis: 100%; } }
/* Página "Agente de coleta" */
.ag-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ag-chip { font-size: 12px; font-weight: 700; color: #475569; background: rgba(100,116,139,.12); padding: 5px 12px; border-radius: 999px; }
.dark .ag-chip { color: #cbd5e1; background: rgba(148,163,184,.16); }
.ag-chip--ok { color: #0b6b39; background: rgba(0,166,81,.14); }
.ag-chip--warn { color: #b45309; background: rgba(239,143,60,.16); }
.ag-chip--off { color: #b3261e; background: rgba(224,83,63,.14); }
.ag-card { background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: var(--g-radius); box-shadow: var(--g-elev); padding: 18px 20px; max-width: 780px; }
.dark .ag-card { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.ag-card__intro { font-size: 14px; color: #334155; margin: 0 0 14px; line-height: 1.55; }
.dark .ag-card__intro { color: #cbd5e1; }
.ag-baixar { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 15px;
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18;
  padding: 12px 22px; border-radius: 12px; box-shadow: 0 12px 26px -14px rgba(0,166,81,.6); }
.ag-baixar:hover { filter: brightness(1.03); }
.ag-baixar-linha { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-baixar--linux { background: #475569; }
.dark .ag-baixar--linux { background: #64748b; }
.ag-passos { margin: 16px 0 0; padding-left: 22px; color: #334155; font-size: 13.5px; line-height: 1.7; }
.dark .ag-passos { color: #cbd5e1; }
.ag-passos code, .ag-card__nota code { background: rgba(0,0,0,.07); padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.dark .ag-passos code, .dark .ag-card__nota code { background: rgba(255,255,255,.12); }
.ag-guia { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; }
.ag-guia__col { flex: 1 1 300px; min-width: 260px; }
.ag-guia__tit { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; font-size: 14px; font-weight: 800; color: #1e293b; }
.dark .ag-guia__tit { color: #e2e8f0; }
.ag-guia__tit .material-symbols-outlined { font-size: 20px; opacity: .85; }
.ag-guia .ag-passos { margin-top: 6px; }
.ag-guia__nota { margin: 10px 0 0; font-size: 12px; color: #64748b; line-height: 1.55; }
.dark .ag-guia__nota { color: #9aa6ae; }
.ag-guia__nota code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 5px; font-weight: 700; }
.dark .ag-guia__nota code { background: rgba(255,255,255,.12); }
.ag-guia__sub { margin: 2px 0 4px; font-size: 12.5px; font-style: italic; color: #64748b; }
.dark .ag-guia__sub { color: #94a3b8; }
.ag-guia__resumo { margin: 4px 0 8px; font-size: 13px; line-height: 1.6; color: #334155; }
.dark .ag-guia__resumo { color: #cbd5e1; }
.ag-guia__resumo code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 5px; font-weight: 700; }
.dark .ag-guia__resumo code { background: rgba(255,255,255,.12); }
.ag-det { margin: 0 0 6px; }
.ag-det > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: #00a651; list-style: none; display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.ag-det > summary::-webkit-details-marker { display: none; }
.ag-det > summary::before { content: "▸"; font-size: 11px; transition: transform .15s; }
.ag-det[open] > summary::before { transform: rotate(90deg); }
.ag-det > summary:hover { text-decoration: underline; }
.dark .ag-det > summary { color: #34d980; }
.ag-det .ag-passos { margin-top: 8px; }
.ag-passos--detalhe { line-height: 1.8; }
.ag-passos--detalhe > li { margin-bottom: 6px; }
.ag-guia__alt { margin-top: 4px; font-size: 12px; color: #64748b; background: rgba(0,0,0,.04); border-left: 3px solid var(--g-edge); border-radius: 6px; padding: 6px 10px; line-height: 1.5; }
.dark .ag-guia__alt { color: #9aa6ae; background: rgba(255,255,255,.05); }
.ag-guia__alt code { background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 5px; font-weight: 700; }
.dark .ag-guia__alt code { background: rgba(255,255,255,.12); }
.ag-card__nota { margin: 16px 0 0; font-size: 12.5px; color: #64748b; line-height: 1.55; border-top: 1px solid rgba(0,0,0,.08); padding-top: 12px; }
.dark .ag-card__nota { color: #9aa6ae; border-top-color: rgba(255,255,255,.08); }

/* Telemetria (coletas) na mesma tela do agente */
.ag-tel { margin-top: 22px; }
.ag-tel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.ag-tel__titulo { font-size: 17px; font-weight: 800; color: #1e293b; margin: 0; }
.dark .ag-tel__titulo { color: #e2e8f0; }
.ag-tel__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ag-tel__busca { font-size: 13px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--g-edge); background: var(--g-glass); color: #1e293b; min-width: 220px; }
.dark .ag-tel__busca { color: #e2e8f0; background: rgba(22,30,24,.5); }
.ag-tab { font-size: 12.5px; font-weight: 700; text-decoration: none; color: #475569; background: rgba(100,116,139,.12); padding: 6px 13px; border-radius: 999px; }
.dark .ag-tab { color: #cbd5e1; background: rgba(148,163,184,.16); }
.ag-tab--on { color: #fff; background: var(--make-accent, #00a651); }
.ag-tel__scroll { overflow-x: auto; border: 1px solid var(--g-edge); border-radius: var(--g-radius); box-shadow: var(--g-elev); background: var(--g-glass); }
.dark .ag-tel__scroll { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.ag-tel__tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #334155; }
.dark .ag-tel__tabela { color: #cbd5e1; }
.ag-tel__tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 800; padding: 11px 12px; border-bottom: 1px solid rgba(0,0,0,.08); white-space: nowrap; }
.dark .ag-tel__tabela th { color: #94a3b8; border-bottom-color: rgba(255,255,255,.1); }
.ag-tel__tabela td { padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.05); vertical-align: top; }
.dark .ag-tel__tabela td { border-bottom-color: rgba(255,255,255,.06); }
.ag-tel__tabela tr:last-child td { border-bottom: none; }
.ag-tel__tabela small { color: #64748b; font-size: 11px; }
.dark .ag-tel__tabela small { color: #94a3b8; }
.ag-tel__tabela code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-weight: 700; }
.dark .ag-tel__tabela code { background: rgba(255,255,255,.1); }
.ag-row--pend { background: rgba(239,143,60,.06); }
.ag-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ag-dot--on { background: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.18); }
.ag-dot--off { background: #94a3b8; }
.ag-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.ag-pill--pend { color: #b45309; background: rgba(239,143,60,.16); }
.ag-link { color: var(--make-accent, #00a651); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ag-link:hover { text-decoration: underline; }
.ag-tel__vazio { text-align: center; color: #64748b; padding: 26px 12px; font-style: italic; }

/* Painel de divergência de localização */
.ag-diverg { background: rgba(239,143,60,.08); border: 1px solid rgba(239,143,60,.35); border-radius: var(--g-radius); box-shadow: var(--g-elev); padding: 16px 20px; margin: 0 0 16px; max-width: 780px; }
.dark .ag-diverg { background: rgba(239,143,60,.10); border-color: rgba(239,143,60,.4); }
.ag-diverg__titulo { font-size: 16px; font-weight: 800; color: #b45309; margin: 0 0 6px; }
.dark .ag-diverg__titulo { color: #fbbf24; }
.ag-diverg__intro { font-size: 13px; color: #334155; margin: 0 0 12px; line-height: 1.5; }
.dark .ag-diverg__intro { color: #cbd5e1; }
.ag-diverg__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(0,0,0,.08); }
.dark .ag-diverg__item { border-top-color: rgba(255,255,255,.1); }
.ag-diverg__info { font-size: 13.5px; color: #1e293b; }
.dark .ag-diverg__info { color: #e2e8f0; }
.ag-diverg__rota { display: block; font-size: 12.5px; color: #475569; margin-top: 2px; }
.dark .ag-diverg__rota { color: #94a3b8; }
.ag-diverg__errado { color: #b3261e; font-weight: 700; text-decoration: line-through; }
.ag-diverg__certo { color: #0b6b39; font-weight: 800; }
.dark .ag-diverg__certo { color: #34d399; }
.ag-diverg__acoes { display: flex; align-items: center; gap: 8px; }
.ag-btn { font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 999px; border: none; cursor: pointer; text-decoration: none; }
.ag-btn--ok { color: #fff; background: var(--make-accent, #00a651); }
.ag-btn--ok:hover { filter: brightness(1.05); }
.ag-btn--ghost { color: #475569; background: rgba(100,116,139,.14); }
.dark .ag-btn--ghost { color: #cbd5e1; background: rgba(148,163,184,.18); }
.ag-pill--diverg { color: #b45309; background: rgba(239,143,60,.16); display: inline-block; margin-top: 3px; }

/* Bloco de specs da coleta na tela de vínculo */
.vinc-coleta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 20px; margin-top: 14px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 14px; font-size: 13px; color: #1e293b; }
.dark .vinc-coleta { color: #cbd5e1; border-top-color: rgba(255,255,255,.08); }
.vinc-coleta > div { display: flex; gap: 8px; }
.vinc-coleta span { color: #64748b; font-weight: 700; min-width: 62px; }
.dark .vinc-coleta span { color: #94a3b8; }
.vinc-coleta code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; }
.dark .vinc-coleta code { background: rgba(255,255,255,.1); }
.vinc-busca { display: flex; gap: 8px; margin: 4px 0 12px; }
.vinc-busca input { flex: 1; font-size: 14px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--g-edge); background: var(--g-glass); color: #1e293b; }
.dark .vinc-busca input { color: #e2e8f0; background: rgba(22,30,24,.5); }
.vinc-busca input:focus { outline: none; border-color: var(--make-accent, #00a651); box-shadow: 0 0 0 3px rgba(0,166,81,.15); }
.vinc-busca button { font-size: 14px; font-weight: 800; padding: 11px 24px; border-radius: 999px; border: none; cursor: pointer; color: #fff; background: var(--make-accent, #00a651); }
.vinc-busca button:hover { filter: brightness(1.05); }
.vinc-novo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 10px 0; }
.vinc-novo label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #64748b; }
.dark .vinc-novo label { color: #94a3b8; }
.vinc-novo select { font-size: 13px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--g-edge); background: var(--g-glass); color: #1e293b; font-weight: 600; }
.dark .vinc-novo select { color: #e2e8f0; background: rgba(22,30,24,.5); }
.vinc-novo select:focus { outline: none; border-color: var(--make-accent, #00a651); box-shadow: 0 0 0 3px rgba(0,166,81,.15); }
.vinc-novo__specs { font-size: 12px; color: #64748b; margin: 4px 0 0; line-height: 1.5; }
.dark .vinc-novo__specs { color: #94a3b8; }
.vinc-novo__specs code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; }
.dark .vinc-novo__specs code { background: rgba(255,255,255,.1); }

/* Card "Este computador" ao lado das instruções */
.ag-topo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.ag-topo .ag-card { flex: 1 1 460px; max-width: none; margin: 0; }
.ag-eu { flex: 1 1 300px; min-width: 280px; background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: var(--g-radius); box-shadow: var(--g-elev); padding: 16px 18px; }
.dark .ag-eu { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.ag-eu__cab { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,.08); }
.dark .ag-eu__cab { border-bottom-color: rgba(255,255,255,.08); }
.ag-eu__cab .material-symbols-outlined { font-size: 30px; color: var(--make-accent, #00a651); }
.ag-eu__rot { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 800; }
.dark .ag-eu__rot { color: #94a3b8; }
.ag-eu__patr { font-size: 17px; font-weight: 800; color: #1e293b; }
.dark .ag-eu__patr { color: #e2e8f0; }
.ag-eu__patr--masc { letter-spacing: 2px; color: #94a3b8; }
.dark .ag-eu__patr--masc { color: #64748b; }
.ag-eu__trocar { background: none; border: none; color: #64748b; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; }
.dark .ag-eu__trocar { color: #94a3b8; }
.ag-eu__trocar:hover { color: var(--make-accent, #00a651); }
.ag-pick__busca { display: flex; gap: 6px; margin-bottom: 10px; }
.ag-pick__busca input { flex: 1; font-size: 13px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--g-edge); background: var(--g-glass); color: #1e293b; }
.dark .ag-pick__busca input { color: #e2e8f0; background: rgba(22,30,24,.5); }
.ag-pick__busca button { font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: none; cursor: pointer; color: #fff; background: var(--make-accent, #00a651); }
.ag-pick__dica { font-size: 12px; color: #64748b; margin: 6px 0; }
.dark .ag-pick__dica { color: #94a3b8; }
.ag-pick__lista { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.ag-pick__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--g-edge); border-radius: 10px; }
.dark .ag-pick__item { border-color: rgba(255,255,255,.08); }
.ag-pick__info { display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: #1e293b; min-width: 0; }
.dark .ag-pick__info { color: #e2e8f0; }
.ag-pick__info small { color: #64748b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .ag-pick__info small { color: #94a3b8; }
.ag-eu__dot { width: 12px; height: 12px; border-radius: 50%; margin-left: auto; flex: none; }
.ag-eu__dot--on { background: #00a651; box-shadow: 0 0 0 4px rgba(0,166,81,.18); }
.ag-eu__dot--off { background: #94a3b8; }
.ag-eu__specs { margin: 12px 0 0; display: grid; gap: 7px; }
.ag-eu__specs > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.ag-eu__specs dt { color: #64748b; font-weight: 700; flex: none; }
.dark .ag-eu__specs dt { color: #94a3b8; }
.ag-eu__specs dd { color: #1e293b; margin: 0; text-align: right; }
.dark .ag-eu__specs dd { color: #cbd5e1; }
.ag-eu__aviso { margin: 12px 0 0; font-size: 12px; color: #b45309; background: rgba(239,143,60,.12); padding: 8px 11px; border-radius: 8px; line-height: 1.4; }
.dark .ag-eu__aviso { color: #fbbf24; }
.mapa-ajuda__txt { font-size: 14px; color: #334155; line-height: 1.55; }
.dark .mapa-ajuda__txt { color: #cbd5e1; }
.mapa-ajuda__txt p { margin: 0 0 12px; }
.mapa-ajuda__txt .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin: 0 1px; }
.mapa-ajuda__link a { color: var(--intelbras-verde,#00a651); font-weight: 700; text-decoration: none; }
.dot--tem_pc { background: #00a651; }
.dot--notebook { background: #32673a; }
.dot--defeito { background: #e0533f; }
.dot--sem_pc { background: #ef8f3c; }

.mapa__planta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 18px;
}
.mapa-setor {
  position: relative;
  background: #f7faf8;
  border: 1px solid #e0ece5;
  border-radius: 16px;
  padding: 14px;
  transition: border-color .3s ease;
}
.dark .mapa-setor { background: #141a15; border-color: #26302a; }
/* Tom avermelhado proporcional às máquinas críticas (var --crit = 0..100). */
/* Fica ATRÁS das estações (z-index -1) para nunca cobri-las; máx ~18% de vermelho. */
.mapa-setor::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: #e0533f; opacity: calc(var(--crit, 0) * 0.0018);
  pointer-events: none; z-index: -1;
}
.mapa-setor--risco { border-color: rgba(224, 83, 63, .45); }
.mapa-setor__crit {
  margin-left: 4px; background: #e0533f; color: #fff; font-size: 11px;
  font-weight: 800; padding: 2px 9px; border-radius: 8px; white-space: nowrap;
  animation: crit-pulse 1.6s ease-in-out infinite;
}
@keyframes crit-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,83,63,.5); } 50% { box-shadow: 0 0 0 5px rgba(224,83,63,0); } }

/* Trocar PCs: botão + seleção de baias */
.mapa__trocar {
  background: #0891b2; color: #fff; border: 0; border-radius: 9999px;
  padding: 7px 16px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.mapa__trocar.is-on { background: #e0533f; }
.mapa__planta.modo-trocar .baia { cursor: pointer; }
.mapa__planta.modo-trocar .baia .ws { outline: 2px dashed transparent; }
.baia--sel .ws {
  outline: 3px solid var(--intelbras-verde) !important; outline-offset: 2px;
  border-radius: 10px; background: rgba(0, 166, 81, .08);
}
/* Baia-alvo ao arrastar por cima (vai trocar o PC com esta) */
.baia--alvo .ws {
  outline: 3px solid var(--intelbras-verde) !important; outline-offset: 3px;
  border-radius: 10px; background: rgba(0, 166, 81, .12);
}
.baia--alvo { transform: translateY(-3px); }
.baia--alvo::after {
  content: "↔ trocar"; position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%); background: var(--intelbras-verde); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 9999px;
  white-space: nowrap; z-index: 6;
}

/* Arrastar baia entre setores */
.baia[draggable="true"] { cursor: grab; }
.baia[draggable="true"]:active { cursor: grabbing; }
.mapa-setor__baias.is-drop {
  outline: 2px dashed var(--intelbras-verde); outline-offset: 4px;
  border-radius: 12px; background: rgba(0, 166, 81, .07);
}
/* Modal de confirmação de movimentação */
.mov-modal {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; background: rgba(0, 0, 0, .5);
}
.mov-modal.is-open { display: flex; }
.mov-modal__card {
  background: #fff; border-radius: 16px; padding: 24px; width: min(440px, 92vw);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.dark .mov-modal__card { background: #161b16; color: #e5e7eb; }
.mov-modal__title { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: #14532d; }
.dark .mov-modal__title { color: #c6f4d9; }
.mov-modal__msg { margin: 0 0 20px; font-size: 14px; line-height: 1.5; }
.mov-modal__acoes { display: flex; gap: 10px; justify-content: flex-end; }
.mov-btn { border: 0; border-radius: 9999px; padding: 9px 18px; font-weight: 700; font-size: 14px; cursor: pointer; }
.mov-btn--cancel { background: #e2e8e0; color: #14532d; }
.mov-btn--ok { background: var(--intelbras-verde); color: #fff; }
.mov-btn--ok:hover { background: var(--intelbras-verde-escuro); }
.mov-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Toast (canto inferior esquerdo) — ex.: "Acesso negado" */
.make-toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 10001;
  display: flex; align-items: flex-start; gap: 12px;
  background: #1f2937; color: #fff; padding: 16px 20px; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.45;
  max-width: 360px; animation: make-toast-in .25s ease;
}
.make-toast--erro { background: #e0533f; }
.make-toast__icon { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.make-toast__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.make-toast__body b { font-weight: 700; font-size: 15px; }
.make-toast__body span { opacity: .92; }
.make-toast.is-out { opacity: 0; transform: translateY(12px); transition: all .5s ease; }
@keyframes make-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Mover por toque (celular): clique longo abre os setores como alvos */
.baia { -webkit-touch-callout: none; user-select: none; }
/* Mapa interativo: sem seleção de texto / callout (evita bug ao arrastar no toque). */
.mapa, .mapa *, .mov-touch, .mov-touch * {
  -webkit-touch-callout: none;
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.baia, .mov-touch__box { -webkit-tap-highlight-color: transparent; }
/* Enquanto arrasta no celular: trava seleção e gestos do navegador em toda a página. */
body.is-arrastando, body.is-arrastando * {
  -webkit-user-select: none !important; user-select: none !important;
  -webkit-touch-callout: none !important;
}
body.is-arrastando { touch-action: none; overscroll-behavior: contain; }
.mov-touch {
  position: fixed; inset: 0; z-index: 9998; display: none; flex-direction: column;
  background: #08140e;  /* opaco: nunca deixa o mapa vazar por trás */
  background: linear-gradient(180deg, #0b1c13 0%, #08140e 100%);
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.mov-touch.is-open { display: flex; }
.mov-touch__head { color: #fff; text-align: center; margin-bottom: 12px; }
.mov-touch__head b { display: block; font-size: 16px; }
.mov-touch__head span { font-size: 12px; opacity: .8; }
.mov-touch__grid {
  flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  align-content: start; overflow-y: auto;
}
.mov-touch__box {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(141, 227, 176, .45);
  border-radius: 12px; color: #d6f5e3; padding: 12px 10px; text-align: center;
  font-weight: 600; font-size: 13px; line-height: 1.25; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
}
.mov-touch__box:active { transform: scale(.97); }
.mov-touch__box--truck {
  grid-column: 1 / -1; background: rgba(239, 143, 60, .16);
  border-color: rgba(239, 143, 60, .6); color: #fde3b0; font-weight: 700;
}
.mov-touch__box.is-origem { opacity: .4; }
.mov-touch__box.is-over { background: rgba(0, 166, 81, .4); border-color: #34d57e; color: #fff; transform: scale(1.04); }
.mov-touch__cancel {
  margin-top: 12px; background: #e2e8e0; color: #14532d; border: 0;
  border-radius: 9999px; padding: 12px; font-weight: 700; font-size: 15px;
}
.mov-touch__chip {
  position: fixed; z-index: 9999; transform: translate(-50%, -135%);
  background: var(--intelbras-verde); color: #fff; padding: 8px 14px;
  border-radius: 9999px; font-weight: 700; font-size: 13px; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); white-space: nowrap;
}
.mapa-setor__titulo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: #14532d;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #e0ece5;
}
.dark .mapa-setor__titulo { color: #c6f4d9; border-color: #26302a; }
.mapa-setor__qtd {
  margin-left: auto; background: var(--intelbras-verde); color: #fff;
  font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 9999px;
}
/* Contagem de máquinas = CÍRCULO com texto branco (transparente no escuro). */
.mapa .mapa-setor__qtd {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(0,120,60,.9); border: 1px solid transparent;
}
.dark .mapa .mapa-setor__qtd { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.18); }
/* Grade ÚNICA de estações em TODOS os mapas (completo/score/filtro): uniforme,
   sem esticar verticalmente (align-items:start) e preenchendo a largura do setor,
   pra acabar com os "caixões" vazios e o vazio à direita nos setores com poucos cards. */
.mapa-setor__baias,
.mapa-setor__baias--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 12px;
  align-items: start;
  align-content: start;
}
/* Cards preenchem a célula do grid (nada de largura fixa 168px deixando vão). */
.mapa-setor__baias > .baia,
.nb-grid > .nb-card { width: auto; }
/* Altura consistente pros cards COM conteúdo; os VAZIOS ficam compactos (sem caixão). */
.mapa-setor__baias > .baia:not(.baia--add):not(.baia--sem_pc),
.nb-grid > .nb-card:not(.nb-card--vazio) { min-height: 126px; }
.baia--sem_pc, .nb-card--vazio { min-height: 0; justify-content: center; }
/* Tile "＋ Adicionar" com a mesma pegada de um card (não uma barra larga/alta). */
.baia--add__mais { min-height: 126px; }

/* ---- Busca do mapa (NS / patrimônio / nome / specs) — em todos os mapas ---- */
.mapa__busca { position: relative; display: flex; align-items: center; max-width: 460px; margin: 0 0 16px; }
.mapa__busca-ico { position: absolute; left: 12px; font-size: 20px; color: #64748b; pointer-events: none; }
.mapa__busca-input {
  width: 100%; padding: 10px 40px 10px 40px; font-size: 14px; font-weight: 500;
  color: #14532d; border: 1px solid var(--g-edge); border-radius: 10px;
  background: var(--g-panel); box-shadow: var(--g-elev); outline: none;
  -webkit-appearance: none; appearance: none;
}
.mapa__busca-input::placeholder { color: #94a3b8; font-weight: 500; }
.mapa__busca-input::-webkit-search-cancel-button { display: none; }
.mapa__busca-input:focus { border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.16); }
.mapa__busca-x {
  position: absolute; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 7px;
  background: rgba(0,0,0,.06); color: #475569; font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mapa__busca-x:hover { background: rgba(0,0,0,.12); }
.dark .mapa__busca-input {
  color: #d7f0e2; border-color: rgba(255,255,255,.1);
  background: rgba(22,30,24,.5);
}
.dark .mapa__busca-input::placeholder { color: #64748b; }
.dark .mapa__busca-x { background: rgba(255,255,255,.08); color: #cbd5e1; }
.dark .mapa__busca-x:hover { background: rgba(255,255,255,.16); }
/* Card/setor/unidade fora do resultado da busca. */
.mapa-hit-off { display: none !important; }

/* Botões "adicionar" no mapa */
.mapa__estoque {
  background: #eef2f0; color: #14532d; text-decoration: none;
  border-radius: 7px; padding: 7px 16px; font-weight: 700; font-size: 13px;
}
.mapa__estoque:hover { background: #e2ebe6; }
.dark .mapa__estoque { background: #1e2a22; color: #c6f4d9; }
/* Botões de adicionar no cabeçalho (+ Setor / + Baia / + Notebook) = MESMA cor do
   card tracejado de adicionar (.baia--add__mais): verde --intelbras-verde + tinte
   verde→lima sutil. Contorno (não pílula chapada). */
.mapa__add-setor, .mapa-setor__add {
  background: linear-gradient(135deg, rgba(0,166,81,.06), rgba(203,245,66,.04));
  color: var(--intelbras-verde); text-decoration: none;
  border: 1px solid rgba(0,166,81,.35); border-radius: 8px; font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mapa__add-setor { padding: 7px 16px; font-size: 13px; }
.mapa-setor__add { padding: 3px 12px; font-size: 11px; }
.mapa__add-setor:hover, .mapa-setor__add:hover {
  background: linear-gradient(135deg, rgba(0,166,81,.14), rgba(203,245,66,.08));
  border-color: var(--intelbras-verde); color: var(--intelbras-verde-escuro);
}
.dark .mapa__add-setor, .dark .mapa-setor__add {
  color: #86efac; border-color: rgba(0,166,81,.4);
  background: linear-gradient(135deg, rgba(0,166,81,.10), rgba(203,245,66,.05));
}
.dark .mapa__add-setor:hover, .dark .mapa-setor__add:hover {
  background: linear-gradient(135deg, rgba(0,166,81,.18), rgba(203,245,66,.09));
  border-color: rgba(134,239,172,.6); color: #a7f3c6;
}

/* "Estação" de adicionar baia (placeholder tracejado com +) */
.baia--add {
  justify-content: center; text-decoration: none;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.baia--add:hover { transform: none; box-shadow: none; }
.baia--add__mais {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 100%; height: auto;
  border: 2px dashed rgba(0,166,81,.35); border-radius: var(--g-radius);
  color: var(--intelbras-verde); font-size: 34px; font-weight: 300; line-height: 1;
  background: linear-gradient(135deg, rgba(0,166,81,.06), rgba(203,245,66,.04));
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
}
.baia--add:hover .baia--add__mais {
  border-color: var(--intelbras-verde); color: var(--intelbras-verde-escuro);
  background: linear-gradient(135deg, rgba(0,166,81,.14), rgba(203,245,66,.08));
  box-shadow: 0 8px 22px -8px rgba(0,166,81,.45); transform: translateY(-2px);
}
.dark .baia--add__mais { border-color: rgba(0,166,81,.4); background: linear-gradient(135deg, rgba(0,166,81,.10), rgba(203,245,66,.05)); }
.dark .baia--add:hover .baia--add__mais { color: #86efac; background: linear-gradient(135deg, rgba(0,166,81,.18), rgba(203,245,66,.09)); }

/* Estação de trabalho (baia) — mesmo VIDRO PREMIUM dos cards do Estoque */
.baia {
  position: relative; width: 168px; --cor: #94a3b8;
  cursor: pointer; text-align: left;
  border-radius: var(--g-radius);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 12px 13px; transition: transform .18s ease, box-shadow .18s ease;
}
/* Skin de vidro (não vale para o placeholder "＋ Adicionar"). */
.baia:not(.baia--add) {
  background: var(--g-glass);
  border: 1px solid var(--g-edge); border-left: 4px solid var(--cor);
  box-shadow: var(--g-elev);
}
/* Brilho no topo — sem overflow:hidden para NÃO cortar o tooltip (fica acima do card). */
.baia:not(.baia--add)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; background: var(--g-gloss);
}
.baia > * { position: relative; z-index: 1; }
.baia:not(.baia--add):hover { transform: translateY(-3px); box-shadow: var(--g-elev-h); z-index: 5; }
.dark .baia:not(.baia--add) {
  background: rgba(22,30,24,.44);
  border-color: rgba(255,255,255,.08); border-left-color: var(--cor);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -16px rgba(0,0,0,.6);
}
.dark .baia:not(.baia--add)::before { background: linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%); }
/* Cor (borda/ícone/badge/rodapé) pela CLASSE de desempenho — igual ao score */
.baia--cl-critico { --cor: #e0533f; }
.baia--cl-baixo   { --cor: #ef8f3c; }
.baia--cl-bom     { --cor: #8fb82e; }
.baia--cl-otimo   { --cor: #00a651; }
.baia__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.baia__icone { color: var(--cor); font-size: 22px; }
.baia__nome {
  font-weight: 700; font-size: 13px; color: #0f172a; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .baia__nome { color: #c6f4d9; }
.baia__specs {
  font-size: 11px; color: #64748b; margin-top: 2px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dark .baia__specs { color: #94a3b8; }
.baia__ocupante {
  font-size: 11px; font-weight: 600; color: #64748b; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dark .baia__ocupante { color: #94a3b8; }
.baia__classe {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--cor); margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ===== Modo TABELA dos dispositivos (MESMO menu do mapa) ===== */
/* Filtro de UNIDADE = 2ª linha do painel da toolbar (colada), botões arredondados/espaçados. */
.tab-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 14px; padding: 8px 14px;
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.6); border-top: 1px solid rgba(0,0,0,.06);
  border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px -18px rgba(13,50,32,.35);
}
.dark .tab-chips {
  background: rgba(22,30,24,.44); border-color: rgba(255,255,255,.08); border-top-color: rgba(255,255,255,.06);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.6);
}
.tab-chips__lbl {
  font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .04em;
  padding: 0 10px 0 6px; margin-right: 2px; border-right: 1px solid rgba(0,0,0,.08);
}
.dark .tab-chips__lbl { color: #8aa596; border-right-color: rgba(255,255,255,.08); }
/* 2 linhas de chip nas tabelas (unidade + setor) coladas num painel só */
.tab-chips:has(+ .tab-chips.mapa__filtro--setor) { margin-bottom: 0; border-radius: 0; border-bottom: 0; }
.tab-chip {
  padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 700;
  color: #14532d; background: transparent; text-decoration: none; transition: none;
}
.tab-chip:hover { background: rgba(0,166,81,.10); }
.dark .tab-chip { color: #cdd8d0; }
.dark .tab-chip:hover { background: rgba(0,166,81,.16); }
.tab-chip.is-active {
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18;
  box-shadow: 0 4px 12px -3px rgba(0,166,81,.5);
}
.dark .tab-chip.is-active { color: #0b2e18; }
/* --- Fora de uso: nº no chip, resumo truncado, botão reativar --- */
.fdu-chip__n { font-size: 11px; opacity: .7; margin-left: 2px; }
.tab-chip.is-active .fdu-chip__n { opacity: .85; }
.fdu-resumo { max-width: 460px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; color: #64748b; }
.dark .fdu-resumo { color: #9aa8a0; }
.fdu-acao { text-align: right; white-space: nowrap; }
.fdu-btn { display: inline-block; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
  color: #0c7a3e; background: #e7f8ee; text-decoration: none; border: 1px solid #b7e7cc; }
.fdu-btn:hover { background: #00a651; color: #fff; border-color: #00a651; }
.dark .fdu-btn { background: #14251c; color: #7fe0a8; border-color: #2f5b41; }
/* --- Filtro de período (data da compra) + coluna de data --- */
.tab-periodo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap;
  background: #f4f9f6; border: 1px solid #e0ece5; border-radius: 12px; padding: 8px 12px; }
.dark .tab-periodo { background: #141a15; border-color: #26302a; }
.tab-periodo__lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #14532d; }
.dark .tab-periodo__lbl { color: #c6f4d9; }
.tab-periodo__lbl .material-symbols-outlined { font-size: 18px; }
.tab-periodo__ate { font-size: 12px; color: #64748b; }
.tab-periodo input[type=date] { padding: 6px 10px; border-radius: 9px; border: 1px solid #cfe0d6; background: #fff; font-size: 13px; }
.dark .tab-periodo input[type=date] { background: #171e19; border-color: rgba(255,255,255,.14); color: #e5efe8; color-scheme: dark; }
.tab-periodo__btn { padding: 7px 16px; border-radius: 9px; border: 0; background: #00a651; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.tab-periodo__btn:hover { background: #0c7a3e; }
.tab-periodo__x { font-size: 12px; color: #e0533f; text-decoration: none; font-weight: 700; margin-left: 2px; }
.tab-data { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; }
.tab-data--vazio { color: #94a3b8; }
.tab-acoes { display: flex; align-items: center; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
/* Busca da tabela usa o MESMO campo do mapa (.mapa__busca) — identidade única. */
.tab-acoes__busca { flex: 1 1 260px; max-width: 460px; margin: 0; }
.tab-novo {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 16px; font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, var(--intelbras-verde), #35c46f); color: #fff; border-radius: 10px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px -4px rgba(0,166,81,.5); transition: filter .15s, box-shadow .15s, transform .1s;
}
.tab-novo:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(0,166,81,.6); }
.tab-novo .material-symbols-outlined { font-size: 18px; }
.tab-col-chk { width: 38px; text-align: center; }
.tab-col-chk input { width: 16px; height: 16px; cursor: pointer; accent-color: #00a651; }
.tab-busca {
  flex: 1 1 240px; max-width: 360px; margin: 0; padding: 9px 14px; font-size: 14px;
  border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; outline: none;
}
.tab-busca:focus { border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.15); }
.dark .tab-busca { background: #161b16; border-color: #2c352e; color: #e2e8f0; }
/* Painel de vidro do tema (as 3 tabelas: dispositivos, peças, estoque). */
.tab-wrap {
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.7); border-radius: var(--g-radius);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 30px -18px rgba(13,50,32,.4);
}
/* No celular a tabela rola na horizontal (não corta colunas). */
.tab-wrap .tab-tabela { min-width: 640px; }
.dark .tab-wrap {
  background: rgba(22,30,24,.55); border-color: rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -18px rgba(0,0,0,.5);
}
.tab-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tab-tabela th {
  text-align: left; padding: 14px 16px; background: linear-gradient(180deg, #f3faf6, #e8f4ed); color: #14532d;
  font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .045em;
  border-bottom: 2px solid #cfe9db; white-space: nowrap;
}
.dark .tab-tabela th { background: linear-gradient(180deg, rgba(20,36,29,.95), rgba(15,26,21,.92)); color: #c6f4d9; border-color: #2b5340; }
/* Cabeçalho clicável: ordena (asc → desc → original). */
.tab-th-sort { cursor: pointer; user-select: none; }
.tab-th-sort:hover { color: #00a651; }
.tab-th-sort::after { content: "↕"; opacity: .3; font-size: 10px; margin-left: 6px; }
.tab-th-sort[data-sort="asc"]::after { content: "▲"; opacity: 1; color: #00a651; }
.tab-th-sort[data-sort="desc"]::after { content: "▼"; opacity: 1; color: #00a651; }
.tab-tabela td { padding: 11px 16px; border-bottom: 1px solid #eef2f6; color: #0f172a; }
.dark .tab-tabela td { color: #d7e3da; border-color: #232c25; }
.tab-row { cursor: pointer; transition: background .1s; }
/* Zebra bem sutil (td pinta acima do tr → hover também precisa mirar o td). */
.tab-tabela tbody tr:nth-child(even) td { background: rgba(0,166,81,.035); }
.dark .tab-tabela tbody tr:nth-child(even) td { background: rgba(255,255,255,.022); }
.tab-row:hover td { background: #f0f9f3; }
.tab-row:hover td:first-child { box-shadow: inset 3px 0 0 #00a651; }
.dark .tab-row:hover td { background: rgba(0,166,81,.12); }
.tab-badge {
  color: #fff; font-weight: 800; font-size: 11px; border-radius: 9999px; padding: 2px 10px; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
.tab-score { color: #fff; font-weight: 800; font-size: 12px; border-radius: 9999px; padding: 2px 10px; white-space: nowrap; }
.tab-resumo { color: #64748b; font-weight: 500; }
.tab-vazio { text-align: center; color: #64748b; padding: 26px; }
/* Coluna de ações por linha (alterar / transferir / atribuir / excluir) */
.tab-acoes-col { white-space: nowrap; text-align: right; }
.tab-acoes-col form { margin: 0; }
.tab-act {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; text-decoration: none; margin-left: 4px; transition: background .12s, border-color .12s;
}
.tab-act:hover { background: #f1f7f3; border-color: #00a651; }
.tab-act--del:hover { background: #fef2f2; border-color: #e0533f; }
.dark .tab-act { background: #161b16; border-color: #2c352e; }

/* ===== Diagnóstico do desempenho (na tela de zoom) ===== */
.monitor__diag {
  margin: 12px 0 4px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
.monitor__diag--ok { background: rgba(0,166,81,.16); border-color: rgba(0,166,81,.4); }
.monitor__diag-titulo { font-weight: 800; font-size: 13px; margin-bottom: 8px; }
.monitor__diag-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.monitor__diag-item {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 8px;
  background: rgba(0,0,0,.18); border-left: 4px solid #94a3b8;
}
.monitor__diag-item b { font-size: 12.5px; font-weight: 800; }
.monitor__diag-item span { font-size: 12px; opacity: .92; }
.monitor__diag-item--alto { border-left-color: #e0533f; }
.monitor__diag-item--medio { border-left-color: #ef8f3c; }
.monitor__diag-item--baixo { border-left-color: #ef8f3c; }

/* O diagnóstico do notebook (#nbz-diag) usa tema claro do card de notebook */
#nbz-diag { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; }
#nbz-diag.monitor__diag--ok { background: #e7f8ee; border-color: #b6e3c8; }
#nbz-diag .monitor__diag-item { background: #fff; }

/* ===== Estoque — tela-hub (Computadores / Notebooks / Periféricos) ===== */
.estoque-intro { margin: 14px 0 2px; font-size: 14px; color: #6b7280; font-weight: 600; }
.dark .estoque-intro { color: #9aa0a6; }
.estoque-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 14px; }
.estoque-card {
  --ac: #00a651; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 36px 22px 22px; border-radius: 18px; background: #fff; border: 1px solid #eceff1;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.estoque-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 10px 22px rgba(0,0,0,.13);
  border-color: color-mix(in srgb, var(--ac) 45%, #eceff1);
}
.estoque-card__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 50%, #fff));
}
.estoque-card__icon {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ac) 15%, transparent); color: var(--ac);
  transition: transform .15s ease;
}
.estoque-card__icon .material-symbols-outlined { font-size: 33px; }
.estoque-card:hover .estoque-card__icon { transform: scale(1.07); }
.estoque-card__total { font-size: 34px; font-weight: 800; color: #1f2937; line-height: 1; margin-top: 4px; }
.estoque-card__nome { font-size: 16px; font-weight: 700; color: #1f2937; }
.estoque-card__desc { font-size: 12.5px; color: #6b7280; font-weight: 600; }
.estoque-card__cta {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 700; color: var(--ac);
}
.estoque-card__cta .material-symbols-outlined { font-size: 18px; transition: transform .15s ease; }
.estoque-card:hover .estoque-card__cta .material-symbols-outlined { transform: translateX(4px); }
.dark .estoque-card { background: #161b16; border-color: #2a322b; }
.dark .estoque-card__total, .dark .estoque-card__nome { color: #e5e7eb; }
.dark .estoque-card__desc { color: #9aa0a6; }

/* ===== Toggle de visualização Mapa ↔ Tabela ===== */
.mapa__view { display: inline-flex; gap: 4px; border: 0; }
.mapa__view-btn { border-radius: 8px; }
.mapa__view-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; font-size: 13px; font-weight: 700;
  color: #475569; text-decoration: none; background: transparent; transition: background .12s, color .12s;
}
.mapa__view-btn + .mapa__view-btn { border-left: 0; }
.mapa__view-btn .material-symbols-outlined { font-size: 17px; }
.mapa__view-btn:hover { background: rgba(0,166,81,.10); }
.mapa__view-btn.is-active { background: #00a651; color: #fff; }
.dark .mapa__view-btn { background: transparent; color: #94a3b8; }
.dark .mapa__view-btn:hover { background: rgba(0,166,81,.16); }
.dark .mapa__view-btn.is-active { background: #00a651; color: #fff; }

/* Manutenção preventiva (ciclo de 60 dias) — contagem no card */
.baia__prev { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 10px; font-weight: 700; }
.baia__prev .material-symbols-outlined { font-size: 14px; }
.baia__prev--em_dia { color: #00a651; }
.baia__prev--proxima { color: #ef8f3c; }
.baia__prev--vencida, .baia__prev--pendente { color: #e0533f; }

/* Periféricos: presente (cinza) · ausente (fantasma) · com defeito (vermelho) */
.baia__perifs { display: flex; gap: 7px; margin-top: 7px; }
.baia__perif { font-size: 16px; color: #475569; line-height: 1; }
.dark .baia__perif { color: #94a3b8; }
.baia__perif.is-nao { opacity: .2; }
.baia__perif.is-defeito { color: #e0533f; opacity: 1; }
/* Estação EM MANUTENÇÃO: faixas listradas animadas + relógio com tooltip */
.baia__manut { position: absolute; top: 0; left: 0; right: 0; bottom: 20px; border-radius: 8px; overflow: hidden; pointer-events: none; z-index: 2; }
.baia__manut-tape {
  position: absolute; inset: 0; opacity: .42;
  background: repeating-linear-gradient(-45deg, #f5c518 0 10px, #1a1a1a 10px 20px);
  /* Sem animação: animar background-position força repaint por frame e trava o mapa. Fita estática. */
}
.baia__manut-clock {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  font-size: 16px; line-height: 1; z-index: 3; cursor: help;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
/* A situação agora é indicada pela borda esquerda colorida do card. */
.baia__dot { display: none; }

/* Estação de trabalho desenhada (SVG) */
.ws { width: 100%; height: auto; display: block; }
.ws-desk { fill: #f8fafc; stroke: #d8e0e6; stroke-width: 2; }
.dark .ws-desk { fill: #1b211c; stroke: #2c352e; }
.ws-panel { fill: #475569; }
.ws-pad { fill: #1f2937; }
.ws-neck { fill: #64748b; }
.ws-line { fill: #cbf542; }
.ws-scan { fill: #0b1220; }  /* janela do leitor de código de barras */
/* monitor/PC ligado = tela esverdeada */
.ws-screen .ws-fill { fill: #bbf7d0; stroke: #00a651; stroke-width: 2; }
.ws-screen.is-defeito .ws-fill { fill: #fecaca; stroke: #e0533f; }
.ws-warn { display: none; }
.ws-screen.is-defeito .ws-warn { display: block; fill: #b91c1c; font-size: 18px; font-weight: 800; text-anchor: middle; }
/* periféricos: presente / faltando (fantasma) / com defeito */
.ws-fill { fill: #64748b; }
.ws-stroke { fill: none; stroke: #64748b; stroke-width: 3; }
.ws-item.is-sim .ws-fill { fill: #64748b; }
.ws-item.is-sim .ws-stroke { stroke: #64748b; }
.ws-item.is-nao { opacity: .14; }
.ws-item.is-nao .ws-fill, .ws-item.is-nao .ws-stroke { stroke-dasharray: 3 2; }
.ws-item.is-defeito .ws-fill { fill: #fecaca; stroke: #e0533f; stroke-width: 1.5; }

/* Círculo de SCORE (índice de desempenho) na mesa */
.baia__score {
  background: var(--cor); color: #fff; font-weight: 800; font-size: 13px;
  border-radius: 999px; min-width: 30px; text-align: center; padding: 2px 8px; line-height: 1.2;
}
/* Indicador de TELEMETRIA (agente) no card: ativa / parada / sem agente */
.baia__tel { margin-left: auto; margin-right: 4px; font-size: 16px; line-height: 1; }
.baia__tel--ativo { color: #00a651; }
.baia__tel--inativo { color: #ef8f3c; }
.baia__tel--sem { color: #cbd5e1; }
.dark .baia__tel--sem { color: #566;  }

/* Faíscas + flicker: máquina prestes a dar defeito (.baia--risco) */
.ws-spark { display: none; }
.baia--risco .ws-spark { display: block; }
.ws-bolt, .ws-sp { transform-box: fill-box; transform-origin: center; opacity: 0; }
.ws-bolt { fill: #fbbf24; }
.ws-sp { fill: #f97316; }
.baia--risco .ws-bolt { animation: spark-bolt 1.15s ease-in-out infinite; }
.baia--risco .ws-sp1 { animation: spark-pop 1.3s ease-in-out infinite; }
.baia--risco .ws-sp2 { animation: spark-pop 1.3s ease-in-out .35s infinite; }
.baia--risco .ws-sp3 { animation: spark-pop 1.3s ease-in-out .7s infinite; }
.baia--risco .ws-screen .ws-fill { animation: scr-flicker 1.8s steps(1) infinite; }
@keyframes spark-bolt { 0%,68%,100% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: .2; } 26% { opacity: .95; } 42% { opacity: 0; } }
@keyframes spark-pop {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(.4); }
  14% { opacity: 1; transform: translate(0, 0) scale(1); }
  60% { opacity: 0; transform: translate(5px, -7px) scale(.5); }
}
@keyframes scr-flicker {
  0%, 44%, 100% { fill: #bbf7d0; }
  48% { fill: #fde68a; } 52% { fill: #bbf7d0; }
  80% { fill: #fca5a5; } 84% { fill: #bbf7d0; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-spark, .baia--risco .ws-screen .ws-fill, .mapa-setor__crit { animation: none !important; }
  .ws-bolt, .ws-sp { opacity: .85; }
}
.ws-item.is-defeito .ws-stroke { stroke: #e0533f; }
/* Notebook = figura de laptop, com a marca na tela */
.ws-laptop-screen { fill: #111827; stroke: #1f2937; stroke-width: 2; }
.ws-laptop-bezel { fill: #0b1220; }
.ws-laptop-base { fill: #9aa6b2; }
.ws-laptop-touch { fill: #7d8893; }
.ws-marca { fill: #cbf542; font-size: 9px; font-weight: 800; text-anchor: middle; letter-spacing: .4px; }

/* Tooltip no hover */
.baia__tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px);
  background: #19241b; color: #fff; border-radius: 10px; padding: 8px 12px;
  font-size: 11px; line-height: 1.5; white-space: nowrap; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 20;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.baia__tip strong { display: block; font-size: 12px; }
.baia__tip em { color: var(--make-lima); font-style: normal; font-weight: 600; }
.baia__tip span { display: block; opacity: .8; }
.baia__tip-manut { color: #f5c518 !important; font-weight: 700; opacity: 1 !important; margin-top: 3px; }
.baia:hover .baia__tip { opacity: 1; }

/* Overlay: aproximação do monitor */
.mapa-zoom {
  position: fixed; inset: 0; z-index: 9999;
  /* Sem backdrop-filter: o blur de tela cheia + tremor da tela travava em PCs
     fracos (Celeron). Gradiente escuro forte já obscurece o fundo. */
  background: radial-gradient(circle at center, rgba(0,35,18,.92), rgba(6,10,7,.97));
  perspective: 1500px;
  /* safe center: centraliza quando cabe; quando o conteúdo é mais alto que a tela
     (celular), alinha no topo e ROLA — nunca corta a informação. */
  display: none; align-items: safe center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.mapa-zoom.is-open { display: flex; }
.mapa-zoom__fechar {
  position: fixed; top: 18px; right: 24px; z-index: 3; background: rgba(255,255,255,.15);
  color: #fff; border: 0; font-size: 28px; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer;
}
.monitor { width: min(620px, 94vw); transform-origin: center bottom; }
/* Abre como a tela do notebook: gira de baixo p/ cima ao "ligar". */
.mapa-zoom.is-open .monitor { animation: monitor-abrir .55s cubic-bezier(.2,.8,.25,1); }
@keyframes monitor-abrir {
  0%   { transform: rotateX(-85deg); opacity: .4; }
  60%  { opacity: 1; }
  70%  { transform: rotateX(6deg); }
  100% { transform: rotateX(0); opacity: 1; }
}
.monitor__tela {
  position: relative;
  background: linear-gradient(160deg, #0b2a18, #0a1f12);
  border: 10px solid #1f2937; border-radius: 14px;
  box-shadow: 0 0 0 2px #374151, 0 30px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(0,166,81,.12);
  padding: 22px 26px; color: #d1fae5; overflow: hidden;
}
/* Varredura de "ligar a tela" (igual ao zoom do notebook) */
.monitor__power {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(203,245,66,.35) 50%, transparent 70%);
}
.mapa-zoom.is-open .monitor__power { animation: monitor-power 1s ease .45s; }
@keyframes monitor-power {
  0% { opacity: 0; transform: translateX(-60%); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

/* Tela com DEFEITO (máquina crítica): riscos, scanlines, glitch e tremor. */
.monitor__defeito { display: none; position: absolute; inset: 0; border-radius: 6px; overflow: hidden; pointer-events: none; z-index: 6; }
.monitor--defeito .monitor__defeito { display: block; }
.monitor--defeito .monitor__tela { animation: mon-shake 2.6s steps(1) 3; }
.monitor--defeito .monitor__tela { box-shadow: 0 0 0 2px #7f1d1d, 0 30px 80px rgba(0,0,0,.6), inset 0 0 70px rgba(224,83,63,.18); }
@keyframes mon-shake {
  0%, 90%, 100% { transform: translate(0, 0); }
  91% { transform: translate(-2px, 1px); } 93% { transform: translate(2px, -1px); }
  95% { transform: translate(-1px, 0); } 97% { transform: translate(1px, 1px); }
}
/* Scanlines ESTÁTICAS (sem mover) — textura de CRT sem repaint contínuo. */
.mon-scan {
  position: absolute; inset: 0; opacity: .55;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.30) 3px, rgba(0,0,0,0) 4px);
}
.mon-risco { position: absolute; left: -20%; width: 140%; height: 2px; opacity: .35;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
/* Glitch/riscos só na ABERTURA (finito) — depois a tela fica calma e legível. */
.mon-risco--1 { top: 22%; transform: rotate(-8deg); animation: mon-risco-fl 3.1s steps(1) 3; }
.mon-risco--2 { top: 55%; height: 1px; transform: rotate(5deg); animation: mon-risco-fl 2.3s steps(1) 3 .4s; }
.mon-risco--3 { top: 79%; transform: rotate(-3deg); animation: mon-risco-fl 4s steps(1) 2 .8s; }
@keyframes mon-risco-fl { 0%,100% { opacity: .35; } 50% { opacity: .6; } 72% { opacity: .1; } }
.mon-glitch { position: absolute; left: 0; right: 0; height: 16%; top: 30%; opacity: 0;
  background: linear-gradient(90deg, rgba(255,0,80,.30), rgba(0,200,255,.26));
  animation: mon-glitch-jump 3.4s steps(1) 2; }
@keyframes mon-glitch-jump {
  0%, 100% { opacity: 0; } 10% { opacity: .55; top: 16%; } 12% { opacity: 0; }
  46% { opacity: .5; top: 64%; } 48% { opacity: 0; }
  78% { opacity: .6; top: 42%; } 80% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .monitor--defeito .monitor__tela, .mon-scan, .mon-risco, .mon-glitch { animation: none !important; }
  .mon-scan { opacity: .5; } .mon-glitch { opacity: .3; } .mon-risco { opacity: .35; }
}
.monitor__cabecalho { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 12px; margin-bottom: 14px; }
.monitor__pessoa { font-size: 20px; font-weight: 800; color: #fff; }
.monitor__baia { font-size: 13px; color: #9ca3af; }
.monitor__patrimonio {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #9ca3af;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 9999px; padding: 2px 10px; white-space: nowrap;
}
.monitor__patrimonio.is-vazio { color: #6b7280; font-style: italic; font-weight: 600; }
.monitor__status { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--make-lima); border: 1px solid rgba(203,245,66,.4); border-radius: 9999px; padding: 2px 12px; }
.monitor__specs { list-style: none; margin: 0; padding: 0; }
.monitor__specs li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: 14px; }
.monitor__specs b { color: #6ee7b7; font-weight: 600; }
.monitor__specs span { color: #fff; text-align: right; }
.monitor__perifs { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; font-size: 12px; color: #cbd5e1; }
.monitor__editar { display: inline-block; margin-top: 16px; background: var(--intelbras-verde); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 9999px; text-decoration: none; }

/* Ações no rodapé do monitor — botões Material (ícone + rótulo), alinhados à direita.
   Sobre a "tela" escura: contorno tonal nas ações; verde cheio no "Editar" (primária). */
.monitor__acoes {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end; align-items: center;
}
.mz-act {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid currentColor; background: transparent; cursor: pointer;
  text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: .2px;
  padding: 9px 18px; border-radius: 9999px; white-space: nowrap;
  transition: background-color .18s ease, box-shadow .18s ease, transform .05s ease;
}
.mz-act .material-symbols-outlined { font-size: 19px; }
.mz-act:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.mz-act:active { transform: translateY(1px); }
.mz-act[hidden] { display: none; }
.mz-act:disabled { opacity: .5; cursor: default; }
.mz-act--pc     { color: #5fe08d; }
.mz-act--nb     { color: #cbf542; }
.mz-act--add    { color: #4ade80; }
.mz-act--remove { color: #fbbf24; }
.mz-act--danger { color: #fca5a5; }
/* Editar = ação primária (filled, Material) */
.mz-act--edit {
  color: #fff; border-color: transparent; background: var(--intelbras-verde, #00a651);
  box-shadow: 0 2px 8px rgba(0,166,81,.35);
}
.mz-act--edit:hover { background: #00b85c; box-shadow: 0 6px 18px rgba(0,166,81,.45); }
@media (max-width: 767px) {
  .monitor__acoes { justify-content: center; }
  .mz-act { flex: 1 1 auto; justify-content: center; }
}

/* Modal: atribuir colaborador à baia */
.baia-colab { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,.62); padding: 20px; }
.baia-colab.is-open { display: flex; }
.baia-colab__card { position: relative; width: min(460px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.dark .baia-colab__card { background: #141a15; color: #e5e7eb; }
.baia-colab__fechar { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #94a3b8; }
.baia-colab__titulo { font-size: 16px; font-weight: 800; margin: 0 0 14px; padding-right: 24px; }
.baia-colab__busca { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.dark .baia-colab__busca { background: #0f150f; border-color: #26302a; color: #e5e7eb; }
.baia-colab__lista { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.baia-colab__item { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; cursor: pointer; }
.baia-colab__item:hover { border-color: var(--intelbras-verde); background: #f0fdf4; }
.dark .baia-colab__item { background: #0f150f; border-color: #26302a; }
.dark .baia-colab__item:hover { background: #14251a; }
.baia-colab__item[hidden] { display: none; }
.baia-colab__item-nome { font-weight: 700; font-size: 14px; }
.baia-colab__item-cargo { font-size: 12px; color: #6b7280; }
.baia-colab__item:disabled { opacity: .6; cursor: default; }

/* (As ações de dispositivo/colaborador usam o rodapé .monitor__acoes/.mz-act acima.) */

/* Modal de confirmação do sistema (usa o overlay .baia-colab) */
.baia-confirm__card { width: min(420px, 100%); }
.baia-confirm__msg { margin: 8px 0 18px; color: #374151; font-size: 14px; line-height: 1.45; }
.dark .baia-confirm__msg { color: #cbd5e1; }
.baia-confirm__acoes { display: flex; gap: 10px; justify-content: flex-end; }

/* Toast (mensagens sem alert() nativo) */
.baia-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #00a651; color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 22px; border-radius: 9999px; box-shadow: 0 12px 30px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; z-index: 10001; transition: opacity .25s ease, transform .25s ease;
  max-width: 92vw;
}
.baia-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.baia-toast.is-erro { background: #e0533f; }

/* ===== Tela visual do CHAMADO (chamado_detalhe) ===== */
.chd-status { font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 9999px; white-space: nowrap; color: #fff; }
.chd-status--ok { background: #00a651; }
.chd-status--andamento { background: #ef8f3c; }
.chd-status--aberto { background: #0891b2; }
/* Painel que emoldura o conteúdo (mesmo espírito dos mapas — não fica solto no fundo) */
.chd-topo { margin: 0 0 14px; }
.chd-wrap { background: var(--g-panel, rgba(255,255,255,.55)); border: 1px solid var(--g-edge, #e6efe9); border-radius: 22px; padding: 20px; box-shadow: var(--g-elev, 0 10px 26px rgba(0,0,0,.05)); }
.dark .chd-wrap { background: rgba(18,24,19,.45); border-color: #26302a; }
.chd-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .chd-grid { grid-template-columns: 1fr; } }

/* Máquina desenhada como uma "tela" */
.chd-screen {
  background: linear-gradient(160deg, #0f2417 0%, #0a1a11 100%);
  border: 3px solid #0b1410; border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  color: #e5f2ea;
}
.is-notebook .chd-screen { border-radius: 14px 14px 4px 4px; }
.chd-screen__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.chd-dev-icone { font-size: 40px; color: #34d57e; }
.chd-dev-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chd-dev-id b { font-size: 18px; }
.chd-dev-id > span { font-size: 12px; color: #9fc7b1; }
.chd-patr { color: #cdeede !important; }
.chd-score { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 58px; height: 58px; border-radius: 50%; font-size: 20px; font-weight: 800; color: #fff; }
.chd-score small { font-size: 9px; font-weight: 700; opacity: .9; }
.chd-score--otimo { background: #00a651; }
.chd-score--bom { background: #8fb82e; }
.chd-score--baixo { background: #ef8f3c; }
.chd-score--critico { background: #e0533f; }
.chd-specs { list-style: none; margin: 0; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 7px; }
.chd-specs li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.chd-specs li span { color: #8fbda3; }
.chd-specs li b { color: #eafff3; text-align: right; }
.chd-perifs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.chd-perif .material-symbols-outlined { font-size: 22px; color: #5b6b60; }
.chd-perif.is-sim .material-symbols-outlined { color: #34d57e; }
.chd-perif.is-defeito .material-symbols-outlined { color: #f87171; }
.chd-pedestal { width: 60px; height: 20px; background: linear-gradient(#374151,#1f2937); margin: 0 auto; border-radius: 0 0 6px 6px; }
.is-notebook .chd-pedestal { display: none; }
.chd-base { width: 150px; height: 10px; background: #111827; margin: 0 auto; border-radius: 9999px; box-shadow: 0 12px 22px rgba(0,0,0,.4); }
.is-notebook .chd-base { width: 118%; margin-left: -9%; height: 22px; border-radius: 3px 3px 12px 12px; background: linear-gradient(180deg,#e5e7eb,#9aa1ac); clip-path: polygon(3% 0,97% 0,100% 100%,0 100%); }

.chd-diag { margin-top: 16px; background: rgba(148,163,184,.08); border: 1px solid #e0ece5; border-radius: 14px; padding: 14px; }
.dark .chd-diag { border-color: #26302a; }
.chd-diag__tit { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; margin-bottom: 10px; color: #14532d; }
.dark .chd-diag__tit { color: #c6f4d9; }
.chd-diag__tit .material-symbols-outlined { font-size: 18px; }
.chd-diag__item { border-left: 4px solid #94a3b8; padding: 6px 12px; margin-bottom: 8px; border-radius: 0 8px 8px 0; background: rgba(148,163,184,.1); }
.chd-diag__item b { display: block; font-size: 13px; }
.chd-diag__item span { font-size: 12px; color: #64748b; }
.dark .chd-diag__item span { color: #94a3b8; }
.chd-diag__item--alto { border-left-color: #e0533f; background: rgba(224,83,63,.08); }
.chd-diag__item--medio { border-left-color: #ef8f3c; background: rgba(239,143,60,.08); }

/* Cards do lado direito */
.chd-lado { display: flex; flex-direction: column; gap: 16px; }
.chd-card { background: #fff; border: 1px solid #e0ece5; border-radius: 16px; padding: 18px; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.dark .chd-card { background: #141a15; border-color: #26302a; }
.chd-card__tit { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin: 0 0 14px; color: #14532d; }
.dark .chd-card__tit { color: #c6f4d9; }
.chd-info { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px; }
.chd-info__lbl { font-size: 11px; color: #94a3b8; display: block; text-transform: uppercase; letter-spacing: .3px; }
.chd-info__val { font-size: 14px; font-weight: 700; }
.dark .chd-info__val { color: #e5e7eb; }
.chd-desc { font-size: 13px; color: #475569; background: rgba(148,163,184,.08); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.dark .chd-desc { color: #cbd5e1; }
.chd-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.chd-field { display: flex; flex-direction: column; gap: 6px; }
.chd-field__lbl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #334155; }
.dark .chd-field__lbl { color: #cbd5e1; }
.chd-field__lbl .material-symbols-outlined { font-size: 18px; color: var(--intelbras-verde,#00a651); }
.chd-input { width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 10px; font-size: 14px; background: #fff; box-sizing: border-box; }
.dark .chd-input { background: #0f150f; border-color: #26302a; color: #e5e7eb; }
.chd-input:focus { outline: none; border-color: var(--intelbras-verde,#00a651); box-shadow: 0 0 0 3px rgba(0,166,81,.15); }
.chd-textarea { min-height: 90px; resize: vertical; }
.chd-exec-ro { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.chd-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,166,81,.1); color: #0c7a3e; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 9999px; }
.dark .chd-pill { background: rgba(52,213,126,.14); color: #86efac; }
.chd-pill .material-symbols-outlined { font-size: 18px; }
.chd-finalizar { margin-top: 4px; }
/* Botões Material legíveis sobre os cards claros (mz-act base é feito p/ tela escura) */
.chd-card .mz-act--add, .chd-card .mz-act--ok { border-color: transparent; color: #fff; }
.chd-card .mz-act--add { background: #0891b2; }
.chd-card .mz-act--ok { background: #00a651; }
.chd-card .mz-act--add:hover, .chd-card .mz-act--ok:hover { filter: brightness(1.08); background-color: initial; }
.chd-card .mz-act--add:hover { background: #0aa0c0; }
.chd-card .mz-act--ok:hover { background: #18b352; }

/* Cabeçalho do card com ação à direita (Execução + Finalizar) */
.chd-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.chd-card__head .chd-card__tit { margin: 0; }
/* Form de execução: campos lado a lado + botão compacto à direita */
.chd-exec-form, .chd-rel-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.chd-exec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .chd-exec-grid { grid-template-columns: 1fr; } }
.chd-exec-actions { display: flex; justify-content: flex-end; }
/* Botões compactos (não estouram a largura do card) */
.chd-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  text-decoration: none; font-weight: 700; font-size: 13px; padding: 9px 18px; border-radius: 9999px; white-space: nowrap; }
.chd-btn .material-symbols-outlined { font-size: 19px; }
.chd-btn--save { background: transparent; border: 1.5px solid var(--intelbras-verde,#00a651); color: #0c7a3e; }
.dark .chd-btn--save { color: #4ade80; }
.chd-btn--save:hover { background: rgba(0,166,81,.1); }
.chd-btn--finalizar { background: #00a651; color: #fff; }
.chd-btn--finalizar:hover { filter: brightness(1.08); }
.chd-btn--reg { background: #0891b2; color: #fff; }
.chd-btn--reg:hover { filter: brightness(1.08); }

/* Gatilho + modal de edição avançada (abre por cima, sem navegar) */
.chd-adv-open { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid #cbd5e1; color: #475569; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 9999px; cursor: pointer; }
.dark .chd-adv-open { border-color: #334155; color: #94a3b8; }
.chd-adv-open:hover { background: rgba(148,163,184,.12); border-color: var(--intelbras-verde,#00a651); color: var(--intelbras-verde,#00a651); }
.chd-adv-open .material-symbols-outlined { font-size: 18px; }
.chd-adv__card { width: min(640px, 100%); max-height: 88vh; overflow-y: auto; }
.chd-adv__form { display: flex; flex-direction: column; gap: 12px; }
.chd-adv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .chd-adv__grid { grid-template-columns: 1fr; } }
.chd-adv__checks { display: flex; flex-direction: column; gap: 8px; }
.chd-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; }
.dark .chd-check { color: #cbd5e1; }
.chd-check input { width: 16px; height: 16px; }
/* Blocos guiados do modal de detalhes */
.chd-blk { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dark .chd-blk { border-color: #26302a; }
.chd-blk__tit { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--intelbras-verde,#00a651); padding: 0 4px; }
.chd-field__lbl small { font-weight: 500; color: #94a3b8; text-transform: none; letter-spacing: 0; }

/* Timeline de registros */
.chd-timeline { display: flex; flex-direction: column; gap: 10px; }
.chd-reg { border-left: 3px solid var(--intelbras-verde,#00a651); background: rgba(148,163,184,.07); border-radius: 0 10px 10px 0; padding: 10px 14px; }
.chd-reg__head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 4px; }
.chd-reg__head b { color: #14532d; }
.dark .chd-reg__head b { color: #c6f4d9; }
.chd-reg__head span { color: #94a3b8; }
.chd-reg__txt { margin: 0; font-size: 14px; color: #334155; white-space: pre-wrap; }
.dark .chd-reg__txt { color: #e2e8f0; }
.chd-vazio { color: #94a3b8; font-size: 13px; text-align: center; padding: 12px; }
.chd-adminlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; text-decoration: none; align-self: flex-start; }
.chd-adminlink:hover { color: var(--intelbras-verde,#00a651); }
.chd-adminlink .material-symbols-outlined { font-size: 16px; }

/* ===== Realocar colaborador (chamado_realocar) ===== */
.chr-intro { background: #fff; border: 1px solid #e0ece5; border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.dark .chr-intro { background: #141a15; border-color: #26302a; }
.chr-intro p { margin: 0 0 12px; font-size: 14px; color: #334155; line-height: 1.5; }
.dark .chr-intro p { color: #cbd5e1; }
.chr-skip { margin: 0; }
.chr-skip__btn { background: transparent; border: 1px solid #cbd5e1; color: #64748b; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 9999px; cursor: pointer; }
.chr-skip__btn:hover { background: rgba(148,163,184,.12); }
.chr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.chr-card { background: #fff; border: 1px solid #e0ece5; border-radius: 14px; padding: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dark .chr-card { background: #141a15; border-color: #26302a; }
.chr-card__top { display: flex; align-items: center; gap: 10px; }
.chr-card__icone { font-size: 30px; color: var(--intelbras-verde,#00a651); }
.chr-card__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chr-card__id b { font-size: 15px; }
.chr-card__id span { font-size: 12px; color: #94a3b8; }
.chr-score { min-width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; }
.chr-score--otimo { background: #00a651; } .chr-score--bom { background: #8fb82e; }
.chr-score--baixo { background: #ef8f3c; } .chr-score--critico { background: #e0533f; }
.chr-card__specs { font-size: 12px; color: #64748b; min-height: 16px; }
.dark .chr-card__specs { color: #94a3b8; }
.chr-card__btn { justify-content: center; }

/* Badge de desempenho no cabeçalho do monitor */
.monitor__desempenho { font-size: 12px; font-weight: 700; color: #fff; border-radius: 9999px; padding: 2px 12px; white-space: nowrap; background: #64748b; }
.monitor__desempenho[data-classe="Crítico"] { background: #e0533f; }
.monitor__desempenho[data-classe="Baixo"]   { background: #ef8f3c; }
.monitor__desempenho[data-classe="Bom"]     { background: #00a651; }
.monitor__desempenho[data-classe="Ótimo"]   { background: #00a651; }

/* Bloco de chamado (qualquer máquina); fica vermelho só quando crítica */
.monitor__critico { margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); border-radius: 12px; }
.monitor__critico.is-critico { border-color: rgba(224,83,63,.5); background: rgba(224,83,63,.12); }
.monitor__critico-msg { margin: 0 0 12px; font-size: 13px; color: #fecaca; line-height: 1.45; }
.monitor__critico-msg b { color: #fff; }
.monitor__critico-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
/* Ações críticas (reparo/desativar/finalizar) no mesmo estilo Material do rodapé */
.mz-act--reparo { color: #fb923c; }
.mz-act--troca  { color: #fca5a5; }
.mz-act--ok     { color: #4ade80; }
.monitor__btn[hidden] { display: none; }
.monitor__btn:hover { filter: brightness(1.08); }
.monitor__pedestal { width: 70px; height: 26px; background: linear-gradient(#374151,#1f2937); margin: 0 auto; border-radius: 0 0 6px 6px; }
.monitor__base-mesa { width: 160px; height: 12px; background: #111827; margin: 0 auto; border-radius: 9999px; box-shadow: 0 18px 30px rgba(0,0,0,.5); }

/* ----- Variação NOTEBOOK: o zoom vira um laptop (tela + base/teclado) ----- */
/* Tela: lid do notebook (sem pé/pedestal, cantos de baixo retos junto à dobradiça) */
.is-notebook .monitor__tela { border-radius: 12px 12px 3px 3px; border-width: 12px 12px 8px; }
.is-notebook .monitor__pedestal { display: none; }
/* Base = deck do teclado, trapézio em perspectiva (alumínio) com dobradiça e trackpad */
.is-notebook .monitor__base-mesa {
  width: 112%; margin: -2px 0 0 -6%; height: 28px;
  background: linear-gradient(180deg, #e5e7eb 0%, #b6bcc6 55%, #8b919c 100%);
  border-radius: 4px 4px 14px 14px;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0% 100%);
  box-shadow: 0 22px 34px rgba(0,0,0,.55);
  position: relative;
}
.is-notebook .monitor__base-mesa::before {  /* dobradiça */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 58%; height: 5px; background: #6b7280; border-radius: 0 0 4px 4px;
}
.is-notebook .monitor__base-mesa::after {   /* recorte do trackpad (frente) */
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 8px; background: rgba(15,23,42,.18); border-radius: 4px;
}
.mapa__vazio { color: #6b7280; padding: 30px; text-align: center; }
.mapa__total { background: var(--mat-vermelho); color: #fff; font-size: 13px; font-weight: 700; padding: 1px 12px; border-radius: 9999px; margin-left: 8px; vertical-align: middle; }
.make-card__hint { font-size: 11px; font-weight: 500; color: #9ca3af; }

/* Mapa filtrado: agrupamento por unidade */
.mapa-unidade { grid-column: 1 / -1; }
.mapa-unidade__titulo { font-size: 16px; font-weight: 800; color: #14532d; margin: 6px 0 12px; padding-bottom: 6px; border-bottom: 2px solid #e8f5ee; }
.dark .mapa-unidade__titulo { color: #c6f4d9; border-color: #243027; }
/* Ícone Material da loja (substitui o emoji 🏬) — herda o verde do título. */
.mapa-uni-ico { font-size: 20px; vertical-align: -4px; margin-right: 6px; color: inherit; }
.mapa__titulo .mapa-uni-ico { font-size: 22px; vertical-align: -4px; }
.mapa-unidade__setores { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 18px; }

/* Mapa de notebooks: cada unidade ocupa UMA coluna, então os painéis ficam
   lado a lado (e quebram pra próxima linha quando não couber). */
.tl-nb .mapa-unidade { grid-column: auto; }
.tl-nb .mapa-unidade__setores { display: block; }

/* No modal (popup) só mostramos o formulário: esconde o cabeçalho/topo do
   admin (a sidebar já não é renderizada pelo Django em modo popup). */
body.popup #main > div:first-child {
  display: none !important;
}
body.popup #content {
  padding-top: 8px;
}

/* =========================================================================
   Dashboard inicial — KPIs e cards de gráfico (estilo Material/Intelbras).
   ========================================================================= */
.make-dash {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 0 24px;
}

/* ===== Tela inicial (dashboard): logo + fundo de doodles que acompanha o tema ===== */
.make-dash { position: relative; min-height: calc(100vh - 150px); overflow: hidden; border-radius: 18px; }
.make-dash-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; padding: 16px; }

/* Fundo CLARO (padrão): verde bem suave + doodles verde-escuro discretos */
.make-dash-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(130% 120% at 50% 0%, #f5faf7 0%, #ecf5f0 55%, #e4f0e9 100%);
}
.make-dash-bg svg { width: 100%; height: 100%; display: block; color: #235539; opacity: .12; }
/* Fundo ESCURO: igual ao login */
.dark .make-dash-bg {
  background: radial-gradient(130% 120% at 50% 0%, #123a28 0%, #0a1f15 55%, #06120c 100%);
}
.dark .make-dash-bg svg { color: #8fe3b0; opacity: .16; }

/* Logo da Make no topo da sidebar — MESMO painel da tela de login. */
.make-sidebar-logo {
  background: #00a651;
  padding: 12px 16px;
  text-decoration: none; min-width: 0;
}
.make-sidebar-logo img { max-height: 30px; width: auto; max-width: 100%; display: block; }

/* (legado) logo no topo do dashboard — não usado mais */
.make-dash-logo { display: flex; justify-content: center; margin: 6px 0 8px; }
.make-dash-logo__panel {
  background: linear-gradient(135deg, #34d57e 0%, #00a651 45%, #073d22 100%);
  border-radius: 18px; padding: 18px 30px; display: flex; justify-content: center;
  box-shadow: 0 12px 32px rgba(0, 166, 81, .3);
}
.make-dash-logo__panel img { max-width: 230px; width: 100%; height: auto; display: block; }

/* Cards: leve realce p/ destacar do fundo; cores de texto seguem o tema */
body.make-dashboard .make-kpi,
body.make-dashboard .make-card,
body.make-dashboard .make-loja {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.dark body.make-dashboard .make-kpi,
.dark body.make-dashboard .make-card,
.dark body.make-dashboard .make-loja {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.make-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
/* Elevação Material (umbra + penumbra) — reutilizada em KPI, loja e card. */
.make-kpi, .make-loja, .make-card {
  --elev-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  --elev-2: 0 2px 6px rgba(0,0,0,.10), 0 8px 18px rgba(0,0,0,.12);
}
.make-kpi {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--elev-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.make-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}
/* Ícone num "tonal container" Material (círculo verde-suave) */
.make-kpi__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px !important;
  color: #00a651;                 /* on-primary-container */
  background: #c6f0d8;            /* primary container */
  border-radius: 50%;
}
/* Bloco de texto: pode encolher dentro do card (evita estouro/deslocamento). */
.make-kpi__txt { min-width: 0; flex: 1 1 auto; }
.make-kpi__valor {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  color: #1f2937;
}
.make-kpi__rotulo {
  font-size: clamp(10px, 1.1vw, 11px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-top: 3px;
  line-height: 1.2;
  overflow-wrap: anywhere;        /* quebra a palavra dentro do card */
  hyphens: auto;
}
.make-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.make-card {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 18px 20px 8px;
  box-shadow: var(--elev-1);
}
.make-card--wide {
  grid-column: 1 / -1;
}
.make-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f6;
}
.make-card__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--intelbras-verde);
  margin-right: 8px;
  vertical-align: middle;
}

/* KPI / card de ALERTA — surface limpa + "error container" no ícone (Material). */
.make-kpi--alerta { border-color: #f4d3d0; }
.make-kpi--alerta .make-kpi__icon {
  background: #fcdcd9;            /* error container */
  color: #b3261e;                /* on-error-container */
}
.make-kpi--alerta .make-kpi__valor { color: #b3261e; }
.dark .make-kpi--alerta { border-color: #5b2320; }
.dark .make-kpi--alerta .make-kpi__icon { background: #3a201e; color: #ffb4ab; }
.dark .make-kpi--alerta .make-kpi__valor { color: #ffb4ab; }

.make-card--alerta { border-color: #f3c0bd; }
.make-card--alerta .make-card__title { color: #b71c1c; border-bottom-color: #f7d6d3; }
.make-card--alerta .make-card__title::before { background: #e0533f; }
.dark .make-card--alerta { border-color: #5b2320; }
.dark .make-card--alerta .make-card__title { color: #ffb4ab; }
.make-card__badge {
  display: inline-block; min-width: 22px; text-align: center;
  background: #e0533f; color: #fff; font-size: 12px; font-weight: 800;
  border-radius: 9999px; padding: 1px 9px; margin: 0 6px;
}
.make-chartbox {
  height: 260px;
}
/* Rosca de máquinas críticas: centralizada, um pouco mais alta. */
.make-chartbox--rosca {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 14px;
}
.make-card__ok {
  text-align: center; color: #00a651; font-weight: 700; font-size: 15px;
  padding: 28px 0 34px; margin: 0;
}
.dark .make-card__ok { color: #4ade80; }
.make-card__badge--verde { background: #00a651; }
/* Gráfico detalhado (histórico de reparos): mais alto. */
.make-chartbox--alto { height: 340px; }
/* Linha com gráfico principal (esquerda) + ranking pequeno (direita). */
.make-charts-row { display: flex; gap: 24px; align-items: stretch; }
.make-charts-row__main { flex: 2 1 0; min-width: 0; }
.make-charts-row__side { flex: 1 1 0; min-width: 0; border-left: 1px solid #e6efe9; padding-left: 22px; }
.dark .make-charts-row__side { border-left-color: #26302a; }
@media (max-width: 860px) {
  .make-charts-row { flex-direction: column; }
  .make-charts-row__side { border-left: 0; padding-left: 0; border-top: 1px solid #e6efe9; padding-top: 14px; }
}
/* KPI clicável (ex.: Máquinas críticas → mapa). */
.make-kpi--link { text-decoration: none; color: inherit; cursor: pointer; }
.make-kpi--link:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }

/* Cards de loja no dashboard (abrem o mapa interativo) — padrão Material */
.make-lojas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  padding-bottom: 8px;
}
.make-loja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid transparent;
  box-shadow: var(--elev-1);
  text-decoration: none;
  min-width: 0; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.make-loja:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}
/* Ícone em círculo tonal verde (igual aos KPIs) */
.make-loja__icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px !important;
  color: #00a651; background: #c6f0d8; border-radius: 50%;
}
.make-loja__nome { font-weight: 600; color: #1f2937; font-size: 15px; max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }
/* Contagem de baias como chip Material (pílula) */
.make-loja__baias {
  font-size: 12px; font-weight: 600; color: #00a651;
  background: #e8f5ee; border-radius: 999px; padding: 2px 10px;
}
.dark .make-loja { background: #161b16; border: 1px solid #2a322b; }
.dark .make-loja__nome { color: #c6f4d9; }
.dark .make-loja__icon { background: #1f3a2a; color: #7fdca6; }
.dark .make-loja__baias { background: rgba(0,166,81,.18); color: #7fdca6; }

/* Dark mode */
.dark .make-kpi,
.dark .make-card {
  background: #161b16;
  border: 1px solid #2a322b;
}
.dark .make-kpi__icon { background: #1f3a2a; color: #7fdca6; }
.dark .make-kpi__valor,
.dark .make-card__title {
  color: #c6f4d9;
}
.dark .make-card__title {
  border-bottom-color: #243027;
}

@media (max-width: 900px) {
  .make-charts {
    grid-template-columns: 1fr;
  }
}

/* Dashboard no celular: evita estouro/deslocamento de texto */
@media (max-width: 640px) {
  .make-dash-inner { padding: 10px; gap: 14px; }
  .make-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .make-kpi { padding: 12px; gap: 10px; }
  .make-kpi__icon { font-size: 22px !important; padding: 8px; border-radius: 10px; }
  .make-kpi__valor { font-size: 20px; }
  .make-kpi__rotulo { font-size: 10px; }
  .make-lojas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   Aprovações pendentes (inbox unificado: transferências + movimentações).
   ========================================================================= */
.aprov { max-width: 1100px; margin: 0 auto; padding: 4px 4px 40px; }
.aprov__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.aprov__voltar { color: var(--intelbras-verde); font-weight: 600; text-decoration: none; }
.aprov__voltar:hover { text-decoration: underline; }
.aprov__titulo { font-size: 22px; font-weight: 800; margin: 0; }
.aprov__total {
  background: #ef8f3c; color: #fff; font-weight: 700; font-size: 12px;
  padding: 3px 12px; border-radius: 9999px;
}
.aprov__vazio {
  background: var(--make-card-bg, #fff); border: 1px solid #e6efe9; border-radius: 16px;
  padding: 40px; text-align: center; font-size: 16px; color: #64748b;
}
.aprov__sec { margin-top: 22px; }
.aprov__sec-tit { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.aprov__tabela {
  background: #fff; border: 1px solid #e6efe9; border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.aprov__tr {
  display: grid; grid-template-columns: 2.2fr 1.3fr 1.2fr auto; gap: 14px;
  align-items: center; padding: 12px 18px; border-bottom: 1px solid #eef3f0;
}
.aprov__tr:last-child { border-bottom: 0; }
.aprov__tr--head { background: #f6faf7; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: .03em; }
.aprov__acoes { display: flex; gap: 8px; justify-content: flex-end; }
.aprov__btn {
  padding: 5px 14px; border-radius: 9999px; text-decoration: none;
  font-weight: 700; font-size: 12px; color: #fff; white-space: nowrap;
}
.aprov__btn--ok { background: #00a651; }
.aprov__btn--no { background: #e0533f; }
.aprov__btn:hover { filter: brightness(1.06); }
/* Tema escuro */
.dark .aprov__tabela { background: #1c1c1c; border-color: #2c2c2c; }
.dark .aprov__tr { border-color: #2a2a2a; }
.dark .aprov__tr--head { background: #232323; color: #9aa0a6; }
.dark .aprov__vazio { background: #1c1c1c; border-color: #2c2c2c; color: #9aa0a6; }
@media (max-width: 720px) {
  .aprov__tr { grid-template-columns: 1fr; gap: 6px; }
  .aprov__tr--head { display: none; }
  .aprov__acoes { justify-content: flex-start; margin-top: 4px; }
}

/* ============================================================
   Transferência entre lojas (mapa + caminhão + animação)
   ============================================================ */
.tl-intro { margin: 4px 0 16px; color: #475569; font-size: 14px; }
.dark .tl-intro { color: #9aa0a6; }
.tl-intro b { color: #14532d; }
.dark .tl-intro b { color: #c6f4d9; }

/* Cards de unidade (origem e destino) */
.tl-units {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tl-unit {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 16px; cursor: pointer; text-decoration: none;
  background: #fff; border: 1px solid #eceff1; border-radius: 16px;
  color: #1f2937; font: inherit; box-shadow: var(--elev-1);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tl-unit:hover { transform: translateY(-2px); box-shadow: var(--elev-2); border-color: #d7e3da; }
.dark .tl-unit { background: #161b16; border-color: #2a322b; color: #e5e7eb; }
.dark .tl-unit:hover { border-color: #355040; }
.tl-unit__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: #c6f0d8; color: #00a651;
}
.tl-unit__icon .material-symbols-outlined { font-size: 24px; }
.dark .tl-unit__icon { background: #1f3a2a; color: #7fdca6; }
.tl-unit__txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl-unit__nome { font-weight: 600; font-size: 15px; line-height: 1.2; }
.tl-unit__cidade { font-size: 12px; color: #6b7280; }
.dark .tl-unit__cidade { color: #9aa0a6; }
.tl-unit__seta { flex: 0 0 auto; font-size: 20px; color: #cbd5e1; transition: transform .15s ease, color .15s ease; }
.tl-unit:hover .tl-unit__seta { color: #00a651; transform: translateX(3px); }
.dark .tl-unit__seta { color: #4b5563; }

/* Dock do caminhão (zona de drop, fixo no rodapé) */
.truck-dock {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
  z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 26px; background: #fff; border: 3px dashed #00a651; border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18); transition: transform .35s cubic-bezier(.2,.8,.2,1), background .2s;
  pointer-events: none;
}
.dark .truck-dock { background: #161b16; }
.truck-dock.is-armed { transform: translate(-50%, 0); pointer-events: auto; }
.truck-dock.is-over { background: #e7f8ee; border-color: #15803d; }
.dark .truck-dock.is-over { background: #14321f; }
.truck-dock.is-over .truck-dock__svg { transform: scale(1.06); }
/* Chip que segue o dedo ao arrastar a máquina no celular */
.tl-touch-chip {
  position: fixed; z-index: 90; transform: translate(-50%, -150%); pointer-events: none;
  background: #00a651; color: #fff; font-weight: 800; font-size: 13px;
  padding: 8px 14px; border-radius: 9999px; box-shadow: 0 8px 22px rgba(0,0,0,.32);
  white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis;
}
.truck-dock__hint { font-weight: 800; color: #14532d; font-size: 13px; }
.dark .truck-dock__hint { color: #c6f4d9; }
.truck-dock__svg { width: 132px; height: 66px; transition: transform .2s ease; }

/* Caminhão (SVG) — partes */
.tr-body { fill: #00a651; stroke: rgba(0,0,0,.14); stroke-width: 1.2; }
.tr-cab { fill: #0a6e37; stroke: rgba(0,0,0,.14); stroke-width: 1.2; }
.tr-door { fill: #ffffff; opacity: .14; }
.tr-window { fill: #e6f7ee; stroke: rgba(0,0,0,.10); stroke-width: 1; }
.tr-bumper { fill: #6b7280; }
.tr-wheel { fill: #1f2937; stroke: #0b0f14; stroke-width: 1.5; }
.tr-hub { fill: #cbd5e1; stroke: #6b7280; stroke-width: 1.5; }

/* Overlays de destino (unidades + mapa) */
.tl-overlay {
  position: fixed; inset: 0; z-index: 75; display: none;
  background: rgba(8,20,12,.7); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 24px;
}
.tl-overlay.is-open { display: flex; }
.tl-overlay__card {
  position: relative; background: #f7faf8; border-radius: 20px; padding: 28px;
  max-width: 560px; width: 100%; max-height: 88vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.tl-overlay__card--wide { max-width: 960px; }
.dark .tl-overlay__card { background: #161b16; color: #e5e7eb; }
.tl-overlay__title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #14532d; }
.dark .tl-overlay__title { color: #c6f4d9; }
.tl-overlay__sub { margin: 0 0 18px; font-size: 13px; color: #64748b; }
.dark .tl-overlay__sub { color: #9aa0a6; }
.tl-overlay__close {
  position: absolute; top: 14px; right: 16px; border: 0; background: transparent;
  font-size: 26px; line-height: 1; cursor: pointer; color: #64748b;
}
.tl-overlay__back {
  border: 0; background: transparent; color: #00a651; font-weight: 700; cursor: pointer;
  padding: 0; margin: 0 0 12px; font-size: 14px;
}

/* Mapa de destino: setores + vagas */
.dest-unidade { display: flex; flex-direction: column; gap: 14px; }
.dest-setor { background: #fff; border: 1px solid #e6efe9; border-radius: 14px; padding: 12px 14px; }
.dark .dest-setor { background: #141a15; border-color: #26302a; }
.dest-setor__titulo { font-weight: 800; color: #14532d; margin: 0 0 10px; font-size: 14px; }
.dark .dest-setor__titulo { color: #c6f4d9; }
.dest-setor__baias { display: flex; flex-wrap: wrap; gap: 10px; }
.dest-baia {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 92px;
  padding: 10px 6px; border-radius: 12px; cursor: pointer; font: inherit;
  background: #f1f5f3; border: 2px solid #d7e2db; color: #334155;
}
.dark .dest-baia { background: #1c241e; border-color: #2c382f; color: #cbd5e1; }
.dest-baia__icon { font-size: 22px; line-height: 1; }
.dest-baia__nome { font-size: 11px; font-weight: 700; text-align: center; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest-baia__tag {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: #fff; background: #00a651; border-radius: 9999px; padding: 1px 8px;
}
/* Vaga (baia SEM computador): sempre destacada em verde, sem tooltip. */
.dest-baia.is-vaga { border-color: #00a651; background: #e7f8ee; color: #14532d; }
.dark .dest-baia.is-vaga { background: #14321f; border-color: #2f9e57; color: #c6f4d9; }
.dest-baia.is-vaga:hover { background: #d3f3e0; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,166,81,.22); }
.dark .dest-baia.is-vaga:hover { background: #1b4429; }
.dest-baia.is-ocupada { opacity: .45; cursor: not-allowed; }
.dest-baia--nova { border-style: dashed; border-color: #00a651; color: #14532d; }
.dark .dest-baia--nova { color: #c6f4d9; }
.dest-baia--nova:hover { background: #e7f8ee; transform: translateY(-2px); }
.dark .dest-baia--nova:hover { background: #14321f; }

/* Campo de texto do modal (nova baia) */
.tl-input {
  width: 100%; box-sizing: border-box; margin: 4px 0 18px; padding: 11px 14px;
  font: inherit; font-size: 15px; color: #14532d;
  background: #fff; border: 2px solid #c7e9d6; border-radius: 12px;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
/* Rótulo + campo do modal de confirmação (transferência de notebook) */
.tl-campo { display: block; text-align: left; font-weight: 700; font-size: 13px; color: #14532d; margin-top: 4px; }
.tl-campo small { font-weight: 500; color: #64748b; }
.tl-campo .tl-input { margin-top: 6px; }
.dark .tl-campo { color: #e5e7eb; }
.tl-input:focus { border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.18); }
.tl-input.is-erro { border-color: #e0533f; box-shadow: 0 0 0 3px rgba(224,83,63,.18); }
.dark .tl-input { background: #1c241e; border-color: #2c382f; color: #e5e7eb; }
.dark .tl-input:focus { border-color: var(--make-lima); box-shadow: 0 0 0 3px rgba(203,245,66,.22); }

@media (max-width: 720px) {
  .truck-dock__svg { width: 104px; height: 52px; }
}

/* ============================================================
   Central de Ajuda (/ajuda/)
   ============================================================ */
.ajuda { max-width: 1100px; margin: 0 auto; }
.ajuda__head { margin-bottom: 18px; }
.ajuda__titulo { font-size: 26px; font-weight: 800; color: #14532d; margin: 0 0 6px; }
.dark .ajuda__titulo { color: #c6f4d9; }
.ajuda__sub { margin: 0; color: #475569; font-size: 14px; max-width: 760px; }
.dark .ajuda__sub { color: #9aa0a6; }

.ajuda__layout { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start; }
.ajuda__toc {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid #e6efe9; border-radius: 14px; padding: 12px;
}
.dark .ajuda__toc { background: #141a15; border-color: #26302a; }
.ajuda__toc-titulo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; padding: 4px 10px 8px; }
.ajuda__toc a {
  text-decoration: none; color: #334155; font-size: 13px; font-weight: 600;
  padding: 7px 10px; border-radius: 8px; transition: background .12s, color .12s;
}
.ajuda__toc a:hover { background: #e8f5ee; color: #14532d; }
.dark .ajuda__toc a { color: #cbd5e1; }
.dark .ajuda__toc a:hover { background: rgba(0,166,81,.16); color: #c6f4d9; }
/* item ativo (seção em foco ao rolar — scroll-spy) */
.ajuda__toc a.is-active { background: #e8f5ee; color: #14532d; font-weight: 800; box-shadow: inset 3px 0 0 #00a651; }
.dark .ajuda__toc a.is-active { background: rgba(0,166,81,.20); color: #c6f4d9; box-shadow: inset 3px 0 0 #00a651; }
/* compensa o topo ao ancorar/destacar a seção */
.ajuda-sec { scroll-margin-top: 80px; }
/* Demonstrativos ilustrados (Material) dentro de cada seção */
.ajuda-demo {
  margin: 2px 0 18px; padding: 18px 20px; border-radius: 16px;
  background: linear-gradient(180deg, #f2faf5, #e9f5ef); border: 1px solid #d9eae1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.dark .ajuda-demo { background: #11201a; border-color: #244234; }
.ajuda-demo svg { width: 100%; max-width: 460px; height: auto; display: block; }
.ajuda-demo--wide svg { max-width: 760px; }
.ajuda-demo svg text { font-family: Figtree, "Segoe UI", sans-serif; }
.ajuda-demo figcaption { font-size: 12.5px; font-weight: 600; color: #51766a; text-align: center; }
.dark .ajuda-demo figcaption { color: #8fb6a4; }
/* reaproveitável: legenda de cores/itens abaixo do demo */
.ajuda-demo__legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 12px; font-weight: 600; color: #51766a; }
.dark .ajuda-demo__legenda { color: #8fb6a4; }
.ajuda-demo__legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.ajuda__body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ajuda-sec {
  background: #fff; border: 1px solid #e6efe9; border-radius: 16px; padding: 20px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04); scroll-margin-top: 84px;
}
.dark .ajuda-sec { background: #141a15; border-color: #26302a; }
.ajuda-sec h2 { font-size: 18px; font-weight: 800; color: #14532d; margin: 0 0 12px; }
.dark .ajuda-sec h2 { color: #c6f4d9; }
.ajuda-sec h3 { font-size: 15.5px; font-weight: 800; color: #14532d; margin: 18px 0 8px; }
.dark .ajuda-sec h3 { color: #c6f4d9; }
.ajuda-sec h4 { font-size: 14px; font-weight: 800; color: #166534; margin: 14px 0 6px; display: flex; align-items: center; gap: 6px; }
.dark .ajuda-sec h4 { color: #9be8bd; }
.ajuda-sec p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: #334155; }
.dark .ajuda-sec p { color: #cbd5e1; }
.ajuda-sec ul, .ajuda-sec ol { margin: 0 0 6px; padding-left: 22px; }
.ajuda-sec li { font-size: 14px; line-height: 1.6; color: #334155; margin-bottom: 6px; }
.dark .ajuda-sec li { color: #cbd5e1; }
.ajuda-sec code { background: #eef2f0; padding: 1px 6px; border-radius: 6px; font-size: 13px; color: #14532d; }
.dark .ajuda-sec code { background: #1e2a22; color: #c6f4d9; }
.ajuda-nota { background: #f0f9f4; border-left: 4px solid #00a651; border-radius: 8px; padding: 10px 14px; font-size: 13.5px; }
.dark .ajuda-nota { background: #14271c; }
/* especificidade .ajuda-sec p ... vence .ajuda-formula; por isso o seletor combinado */
.ajuda-sec p.ajuda-formula, .dark .ajuda-sec p.ajuda-formula {
  background: #14532d; color: #eafff2 !important; border-radius: 10px;
  padding: 12px 16px; font-size: 14px; font-weight: 600; text-align: center;
}

.ajuda-tabela {
  overflow-x: auto; margin: 4px 0 14px;
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.7); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 10px 24px -18px rgba(13,50,32,.35);
}
.dark .ajuda-tabela { background: rgba(22,30,24,.55); border-color: rgba(255,255,255,.06); }
.ajuda-tabela table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ajuda-tabela th, .ajuda-tabela td { border: 0; border-bottom: 1px solid #eef3f0; padding: 11px 14px; text-align: left; vertical-align: middle; }
.ajuda-tabela thead th { background: linear-gradient(180deg, #f3faf6, #e8f4ed); color: #14532d; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; border-bottom: 2px solid #cfe9db; }
.ajuda-tabela tbody tr:nth-child(even) td { background: rgba(0,166,81,.035); }
.dark .ajuda-tabela th, .dark .ajuda-tabela td { border-color: rgba(255,255,255,.06); }
.dark .ajuda-tabela thead th { background: linear-gradient(180deg, rgba(20,36,29,.95), rgba(15,26,21,.92)); color: #c6f4d9; border-color: #2b5340; }
.dark .ajuda-tabela tbody tr:nth-child(even) td { background: rgba(255,255,255,.022); }

.ajuda-badge { display: inline-block; color: #fff; font-size: 11px; font-weight: 800; padding: 1px 9px; border-radius: 9999px; }
.ajuda-badge--critico { background: #e0533f; }
.ajuda-badge--baixo { background: #ef8f3c; }
.ajuda-badge--bom { background: #00a651; }
.ajuda-badge--otimo { background: #00a651; }

@media (max-width: 820px) {
  .ajuda__layout { grid-template-columns: 1fr; }
  .ajuda__toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .ajuda__toc-titulo { width: 100%; }
}

/* ============================================================
   Mapa de Notebooks (/parque/mapa-notebooks/)
   ============================================================ */
.nb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 12px; align-items: start; align-content: start;
}
.nb-card {
  position: relative; --cor: #94a3b8;
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  width: 168px; padding: 12px 13px; border-radius: var(--g-radius);
  background: #fff; border: 1px solid #e2e8f0; border-left: 5px solid var(--cor);
  box-shadow: 0 1px 3px rgba(0,0,0,.06); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nb-card:hover { transform: translateY(-3px); box-shadow: var(--g-elev-h); }
/* Brilho de topo igual às baias (sem overflow:hidden). */
.nb-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; background: var(--g-gloss);
}
.nb-card > * { position: relative; z-index: 1; }
.dark .nb-card::before { background: linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%); }
/* Cor (borda/ícone/badge) pela classe de desempenho — igual aos demais cards */
.nb-cl-critico { --cor: #e0533f; }
.nb-cl-baixo   { --cor: #ef8f3c; }
.nb-cl-bom     { --cor: #8fb82e; }
.nb-cl-otimo   { --cor: #00a651; }
.nb-card[draggable="true"] { cursor: grab; }
.nb-card[draggable="true"]:active { cursor: grabbing; }
/* Assento VAZIO (colaborador sem notebook) — visão unificada */
.nb-card--vazio { --cor: #cbd5e1; background: #f8fafc; border-style: dashed; box-shadow: none; opacity: .92; }
.nb-card--vazio:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.nb-card--vazio .baia__icone { color: #94a3b8; }
.nb-card--vazio .baia__ocupante { color: #94a3b8; font-style: italic; }
.dark .nb-card--vazio { background: rgba(255,255,255,.03); }
/* Toque (celular): sem seleção de texto / callout ao segurar.
   IMPORTANTE: NÃO usar -webkit-user-drag aqui — ele desativa o arrastar
   nativo (HTML5) e quebra o envio de notebook entre lojas no PC. */
.nb-card, .nb-card * {
  -webkit-user-select: none !important; -moz-user-select: none !important;
  -ms-user-select: none !important; user-select: none !important;
  -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent;
}
.nb-card { touch-action: pan-y; }
.dark .nb-card { background: #141a15; border-color: #26302a; }
.nb-laptop { width: 96px; height: auto; }
.nb-screen-frame { fill: #334155; }
.nb-screen { fill: #bbf7d0; }
.nb-base { fill: #94a3b8; }
.nb-touch { fill: #cbd5e1; }
.nb-marca { fill: #14532d; font-size: 12px; font-weight: 800; text-anchor: middle; font-family: Figtree, "Segoe UI", sans-serif; }
/* Cor da tela por situação */
.nb--defeito .nb-screen { fill: #fecaca; }
.nb--defeito .nb-marca { fill: #b91c1c; }
.nb--obsoleto .nb-screen { fill: #e5e7eb; }
.nb--obsoleto .nb-marca { fill: #6b7280; }
.nb-card__nome { font-size: 12px; font-weight: 700; color: #14532d; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .nb-card__nome { color: #c6f4d9; }
.nb-card__user { font-size: 11px; color: #64748b; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-badge { font-size: 10px; font-weight: 800; color: #fff; border-radius: 9999px; padding: 1px 9px; margin-top: 7px; align-self: flex-start; }
.nb-badge--ativo { background: #00a651; }
.nb-badge--defeito { background: #e0533f; }
.nb-badge--obsoleto { background: #9ca3af; }

/* ============================================================
   Prateleira de notebooks no setor (mapa da loja)
   ============================================================ */
/* Rodapé do setor: prateleira centralizada ao fim. */
.mapa-setor__shelf {
  display: flex; justify-content: center; margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed #e0ece5;
}
.dark .mapa-setor__shelf { border-top-color: #26302a; }
.mapa-shelf {
  position: relative; width: 150px; display: flex; flex-direction: column;
  align-items: center; padding: 0; background: transparent; border: 0; cursor: pointer;
  animation: shelf-in .4s ease; transition: transform .12s ease;
}
.mapa-shelf:hover { transform: translateY(-3px); }
.mapa-shelf:hover .shelf-board { fill: #ea8a08; }
@keyframes shelf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.shelf-svg { width: 100%; height: auto; display: block; }
.shelf-post { fill: #b45309; }
.shelf-board { fill: #d97706; }
.shelf-laptop rect { fill: #bbf7d0; stroke: #15803d; stroke-width: 1.5; }
.shelf-laptop polygon { fill: #94a3b8; }
.shelf-laptop { transform-box: fill-box; transform-origin: center; animation: shelf-bob 2.6s ease-in-out infinite; }
.shelf-laptop--2 { animation-delay: .35s; }
.shelf-laptop--3 { animation-delay: .7s; }
@keyframes shelf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.mapa-shelf__qtd {
  position: absolute; top: -4px; right: 16px; z-index: 4;
  min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: #32673a; color: #fff; font-size: 13px; font-weight: 800;
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2);
  animation: shelf-pulse 1.7s ease-in-out infinite;
}
.dark .mapa-shelf__qtd { border-color: #161b16; }
@keyframes shelf-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,136,229,.55); }
  50% { box-shadow: 0 0 0 7px rgba(30,136,229,0); }
}
@media (prefers-reduced-motion: reduce) {
  .shelf-laptop, .mapa-shelf__qtd, .mapa-shelf { animation: none !important; }
}

/* Modal da prateleira: lista de notebooks do setor */
.shelf-modal {
  position: fixed; inset: 0; z-index: 78; display: none;
  background: rgba(8,20,12,.7); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 24px;
}
.shelf-modal.is-open { display: flex; }
.shelf-modal__card {
  position: relative; background: #f7faf8; border-radius: 18px; padding: 24px;
  max-width: 460px; width: 100%; max-height: 84vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.dark .shelf-modal__card { background: #161b16; color: #e5e7eb; }
.shelf-modal__close {
  position: absolute; top: 12px; right: 14px; border: 0; background: transparent;
  font-size: 26px; line-height: 1; cursor: pointer; color: #64748b;
}
.shelf-modal__title { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: #14532d; }
.dark .shelf-modal__title { color: #c6f4d9; }
.shelf-modal__sub { margin: 0 0 16px; font-size: 13px; color: #64748b; }
.shelf-modal__list { display: flex; flex-direction: column; gap: 8px; }
.shelf-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1px solid #e6efe9; border-radius: 12px; padding: 12px 14px;
  cursor: pointer; font: inherit; transition: all .12s ease;
}
.shelf-item:hover { border-color: #00a651; transform: translateX(2px); box-shadow: 0 4px 12px rgba(0,166,81,.16); }
.dark .shelf-item { background: #1c241e; border-color: #2c382f; }
.shelf-item__ico { font-size: 22px; flex-shrink: 0; }
.shelf-item__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.shelf-item__txt b { font-size: 14px; color: #14532d; font-weight: 700; }
.dark .shelf-item__txt b { color: #c6f4d9; }
.shelf-item__txt span { font-size: 12px; color: #64748b; }
.shelf-item__seta { margin-left: auto; color: #94a3b8; font-size: 20px; font-weight: 700; }

/* Prateleira GRANDE (card próprio, tamanho de um setor) */
.mapa-setor--shelf { display: flex; flex-direction: column; }
.mapa-setor--shelf .mapa-setor__titulo { width: 100%; }
.mapa-shelf--big {
  width: 100%; max-width: 460px; margin: 8px auto 6px; flex: 1;
  justify-content: center;
}
.mapa-shelf--big .shelf-svg { max-height: 230px; }
.mapa-shelf--big .mapa-shelf__qtd { top: 8px; right: 10px; min-width: 30px; height: 30px; font-size: 15px; }
.mapa-shelf__cta { font-size: 12.5px; font-weight: 800; color: #b45309; margin-top: 6px; }
.dark .mapa-shelf__cta { color: #ef8f3c; }
.mapa-shelf--big:hover .shelf-board { fill: #ea8a08; }

/* Prateleira METÁLICA (rack industrial) — 1 laptop por notebook */
/* Prateleira simples e limpa: laptops apoiados numa tábua leve. */
.shelf-metal {
  width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: 14px 26px; padding: 18px 18px 16px; border-radius: 10px;
  background: linear-gradient(180deg, #e6ebef, #cdd5dc) bottom / 100% 13px no-repeat;
}
.dark .shelf-metal { background: linear-gradient(180deg, #353b42, #232830) bottom / 100% 13px no-repeat; }
.shelf-nb { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; }
.shelf-nb__svg { width: 60px; height: auto; filter: drop-shadow(0 3px 3px rgba(0,0,0,.18)); }
.snb-screen { fill: #1f2937; } .snb-fill { fill: #bbf7d0; } .snb-base { fill: #cbd5e1; }
.dark .snb-base { fill: #aab2bb; }
.shelf-nb__m {
  font-size: 10px; font-weight: 800; color: #334155; max-width: 80px; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; letter-spacing: .2px;
}
.dark .shelf-nb__m { color: #cbd5e1; }

/* Botão "Voltar aos notebooks" no monitor (zoom) */
.mapa-zoom__voltar {
  position: absolute; top: 18px; left: 18px; z-index: 12; cursor: pointer;
  background: rgba(255,255,255,.14); color: #eafff2; border: 1px solid rgba(255,255,255,.32);
  border-radius: 9999px; padding: 8px 16px; font-weight: 700; font-size: 13px;
}
.mapa-zoom__voltar:hover { background: rgba(255,255,255,.26); }

/* Modal grande + carrossel de notebooks (prateleira) */
.shelf-modal__card--big { max-width: 720px; }
.shelf-stage { position: relative; padding: 4px 44px 0; }
.shelf-carousel {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 6px 22px; scroll-behavior: smooth;
  /* viga metálica da prateleira sob os notebooks */
  background:
    linear-gradient(180deg, #c4ccd3, #aab2bb 60%, #8b939c) bottom / 100% 16px no-repeat;
  border-radius: 8px;
}
.dark .shelf-carousel { background: linear-gradient(180deg, #3a4048, #2a2f35) bottom / 100% 16px no-repeat; }
.shelf-carousel::-webkit-scrollbar { height: 8px; }
.shelf-carousel::-webkit-scrollbar-thumb { background: #b6bec6; border-radius: 9999px; }
.shelf-slide {
  flex: 0 0 auto; width: 150px; scroll-snap-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 1px solid #e6efe9; border-radius: 14px; padding: 12px 10px 14px;
  font: inherit; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.shelf-slide:hover { transform: translateY(-4px); border-color: #00a651; box-shadow: 0 12px 26px rgba(0,166,81,.18); }
.dark .shelf-slide { background: #1c241e; border-color: #2c382f; }
.shelf-slide__svg { width: 110px; height: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.shelf-slide__nome { font-size: 13px; font-weight: 800; color: #14532d; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .shelf-slide__nome { color: #c6f4d9; }
.shelf-slide__modelo { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snb-marca { fill: #14532d; font-size: 13px; font-weight: 800; text-anchor: middle; font-family: Figtree, "Segoe UI", sans-serif; }
.snb-touch { fill: #cbd5e1; }
.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d7e2db;
  background: #fff; color: #14532d; font-size: 22px; font-weight: 800; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.carousel-nav:hover { background: #00a651; color: #fff; border-color: #00a651; }
.carousel-nav--prev { left: 2px; } .carousel-nav--next { right: 2px; }
.dark .carousel-nav { background: #1c241e; color: #c6f4d9; border-color: #2c382f; }

/* ============================================================
   Transferência de notebooks — docks (caminhão + colaborador)
   ============================================================ */
.nb-docks {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 28px; justify-content: center; align-items: flex-end;
  padding: 16px; pointer-events: none;
  transform: translateY(150%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.nb-docks.is-armed { transform: translateY(0); pointer-events: auto; }
/* Caminhão em linha dentro da barra (sobrescreve o posicionamento fixo padrão) */
.truck-dock--inline {
  position: static; transform: none; left: auto; bottom: auto; pointer-events: auto;
}
/* Dock "atribuir a colaborador" */
.dock-colab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 26px 6px; background: #fff; border: 3px dashed #32673a; border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18); transition: background .2s, border-color .2s;
}
.dark .dock-colab { background: #161b16; }
.dock-colab.is-over { background: #e8f1fe; border-color: #1d4ed8; }
.dark .dock-colab.is-over { background: #14233a; }
.dock-colab__av { width: 60px; transition: transform .2s ease; }
.dock-colab.is-over .dock-colab__av { transform: scale(1.08); }

/* ---- Avatar do colaborador (camisa polo Make) ---- */
.av-svg { width: 100%; height: auto; display: block; }
.av-shirt { fill: #111418; }
.av-collar { fill: #1f2937; }
.av-placket { fill: #22c55e; }
.av-btn { fill: #0b3d22; }
.av-sleeve { fill: #111418; }
.av-sleeve-trim { fill: #32cd5a; }
.av-leaf { fill: #8bd11f; }
.av-brand { fill: #fff; font: 800 6px Figtree, "Segoe UI", sans-serif; }
.av-neck { fill: #c98a5e; }
.av-face { fill: #d99b6c; }
.av-ear { fill: #c98a5e; }
.av-hair { fill: #2a1a12; }
/* Cabelo por sexo: masculino (curto) é o padrão; .av--f mostra o feminino */
.av-hair-f { display: none; }
.av--f .av-hair-m { display: none; }
.av--f .av-hair-f { display: block; }
.av-eye { fill: #2a1a12; }
.av-brow { stroke: #2a1a12; stroke-width: 2; fill: none; stroke-linecap: round;
           transform-box: fill-box; transform-origin: center; }
.av-mouth { fill: none; stroke: #7a3b2e; stroke-width: 2.4; stroke-linecap: round; display: none; }
.av-laptop { display: none; }
/* Expressões (controladas pela classe-pai .av--*) */
.av--smile   .av-mouth--smile,
.av--neutral .av-mouth--neutral,
.av--sad     .av-mouth--sad { display: block; }
.av--sad .av-brow--l { transform: rotate(18deg); }
.av--sad .av-brow--r { transform: rotate(-18deg); }
.av--sad .av-face { fill: #d49066; }
/* notebook nas mãos */
.av--has-nb .av-laptop { display: block; }
.av-lap-screen { fill: #334155; }
.av-lap-screen-in { fill: #bbf7d0; }
.av-lap-base { fill: #94a3b8; }
.av-hand { fill: #d99b6c; }

/* ---- Carrossel de colaboradores ---- */
.colab-track {
  display: flex; gap: 14px; overflow-x: auto; padding: 8px 2px 16px; scroll-behavior: smooth;
}
.colab-card {
  flex: 0 0 auto; width: 152px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #fff; border: 2px solid #e6efe9; border-radius: 16px; padding: 12px 8px 14px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.dark .colab-card { background: #1c241e; border-color: #2c382f; }
.colab-card__av { width: 96px; }
.colab-card.is-livre { cursor: pointer; }
.colab-card.is-livre:hover { transform: translateY(-4px); border-color: #32673a; box-shadow: 0 10px 24px rgba(50,103,58,.18); }
.colab-card__nome { font-size: 13px; font-weight: 800; color: #14532d; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .colab-card__nome { color: #c6f4d9; }
.colab-card__cargo { font-size: 11px; color: #64748b; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colab-card__nb { font-size: 11px; font-weight: 700; color: #32673a; text-align: center; }
.colab-card__tag { font-size: 10px; font-weight: 800; color: #fff; background: #00a651; border-radius: 9999px; padding: 1px 10px; margin-top: 2px; }
.colab-card__remover {
  margin-top: 4px; border: 0; background: #fee2e2; color: #b91c1c; font-weight: 800; font-size: 11px;
  border-radius: 9999px; padding: 3px 12px; cursor: pointer;
}
.colab-card__remover:hover { background: #fecaca; }
@keyframes av-festejar { 0%{transform:none;} 30%{transform:translateY(-9px) scale(1.06);} 60%{transform:none;} 100%{transform:none;} }
.colab-card.av--festejar .colab-card__av { animation: av-festejar .7s ease; }
@media (prefers-reduced-motion: reduce) { .colab-card.av--festejar .colab-card__av { animation: none; } }

/* ============================================================
   Mesa redonda de notebooks (vista de cima) — no mapa da loja
   ============================================================ */
/* Card sempre centralizado e ocupando a largura toda da planta */
.mapa-setor--mesa {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
}
.nbtable {
  position: relative; width: 100%; max-width: 460px; margin: 18px auto 8px;
  aspect-ratio: 1 / 1;
}
/* tampo redondo de madeira (com veios e brilho) */
.nbtable__top {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60%; aspect-ratio: 1 / 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.12) 100%),
    repeating-radial-gradient(circle at 50% 50%, #b9824f 0 7px, #b07a48 7px 14px),
    radial-gradient(circle at 38% 30%, #d6a06a, #a9743f 60%, #7c5230);
  box-shadow: 0 16px 34px rgba(0,0,0,.30), inset 0 0 0 8px rgba(255,255,255,.05),
              inset 0 -14px 36px rgba(0,0,0,.22), inset 0 10px 26px rgba(255,255,255,.08);
}
.dark .nbtable__top {
  background:
    repeating-radial-gradient(circle at 50% 50%, #8a6038 0 7px, #7e5733 7px 14px),
    radial-gradient(circle at 38% 30%, #9c6f44, #7c5230 60%, #4f3317);
}
/* régua de energia no centro */
.nbtable__outlet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 28px; border-radius: 7px; background: linear-gradient(#f4f5f1, #dfe2db);
  display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 6;
  box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.1);
}
.nbtable__socket {
  position: relative; width: 12px; height: 14px; border-radius: 3px; background: #d3d7cf;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.nbtable__socket::before, .nbtable__socket::after {
  content: ""; position: absolute; top: 3px; width: 2px; height: 8px; border-radius: 1px; background: #555;
}
.nbtable__socket::before { left: 3px; } .nbtable__socket::after { right: 3px; }

/* assento: caixa fixa posicionada pelo JS (left/top); o conteúdo gira p/ o centro */
.nbseat {
  position: absolute; width: 96px; height: 96px; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 4;
}
.nbseat:hover { z-index: 20; }
/* wrapper que gira p/ "sentar" virado ao centro */
.nbseat__rot {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); transform-origin: center;
  width: 84px; display: flex; flex-direction: column; align-items: center;
}
.nbseat__svg { width: 84px; height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.22)); transition: transform .12s ease; }
.nbseat:hover .nbseat__svg { transform: translateY(-3px) scale(1.04); }

/* cadeira (encosto discreto atrás) */
.nbc-back { fill: #6b7382; }
.dark .nbc-back { fill: #3c4452; }
/* colaborador */
.nbp-shirt { fill: #14181d; }
.nbp-collar { fill: #22c55e; }
.nbp-arm { fill: none; stroke: #d99b6c; stroke-width: 5.5; stroke-linecap: round; }
.nbp-hand { fill: #e2a877; }
.nbp-hair { fill: #2a1a12; }
.nbp-face { fill: #d99b6c; }
.nbp-hairf { fill: #3a241a; display: none; }
.nbseat--f .nbp-hairf { display: block; }
/* notebook sobre a mesa */
.nbl-screen { fill: #2b3344; }
.nbl-fill { fill: #bbf7d0; }
.nbl-base { fill: #d3dae3; }
.nbl-pad { fill: #aab4c0; }
.nbl-marca { fill: #14532d; font: 800 8px Figtree, "Segoe UI", sans-serif; text-anchor: middle; }
.nb--defeito .nbl-fill { fill: #fecaca; }
.nb--defeito .nbl-marca { fill: #b91c1c; }
/* cabo do carregador: sobe do notebook até a régua central */
.nbseat__cord {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  width: 3px; height: var(--cordlen, 80px);
  background: linear-gradient(#23282f, #15181d); border-radius: 2px; opacity: .85; z-index: 1;
}
.nbseat__brick {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 7px; border-radius: 2px; background: #15181d;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* nome (contra-girado p/ ficar sempre legível) */
.nbseat__name {
  margin-top: 1px; transform: rotate(calc(-1 * var(--rot, 0deg)));
  font-size: 11px; font-weight: 800; color: #14532d; background: #fff;
  padding: 1px 9px; border-radius: 9999px; box-shadow: 0 1px 4px rgba(0,0,0,.16);
  white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.dark .nbseat__name { background: #1c241e; color: #c6f4d9; }
.nbseat:hover .nbseat__name { background: #00a651; color: #fff; }
/* tooltip (fora do wrapper girado → sempre na vertical) */
.nbseat__tip {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px);
  display: none; flex-direction: column; gap: 1px; z-index: 30;
  background: #14532d; color: #fff; padding: 8px 12px; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.32); white-space: nowrap; text-align: center;
}
.nbseat:hover .nbseat__tip { display: flex; }
.nbseat__tip strong { font-size: 13px; }
.nbseat__tip em { font-style: normal; font-size: 11px; color: #cbf542; font-weight: 700; }
.nbseat__tip span { font-size: 11px; color: #d7efe0; opacity: .9; }
.nbseat__tip .nbseat__tip-cta { margin-top: 3px; font-size: 10px; color: #bbf7d0; }
@media (max-width: 560px) {
  .nbtable { max-width: 320px; }
  .nbseat { width: 80px; height: 80px; }
  .nbseat__rot, .nbseat__svg { width: 70px; }
}

/* ============================================================
   Zoom do notebook (laptop abrindo a tela) — mapa de notebooks
   ============================================================ */
.nb-zoom {
  position: fixed; inset: 0; z-index: 85; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(8, 20, 12, .72); backdrop-filter: blur(3px);
}
.nb-zoom.is-open { display: flex; }
.nb-zoom__fechar {
  position: absolute; top: 18px; right: 22px; z-index: 3; border: 0; background: rgba(255,255,255,.12);
  color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
}
.nb-zoom__fechar:hover { background: rgba(255,255,255,.24); }
/* o laptop, com perspectiva p/ a tampa abrir em 3D */
.nbz-laptop { width: min(560px, 94vw); perspective: 1400px; }
.nbz-screen {
  position: relative; transform-origin: bottom center; transform: rotateX(-88deg);
  background: linear-gradient(150deg, #0f172a, #14532d 140%); color: #eafff2;
  border: 12px solid #1c2430; border-bottom-width: 16px; border-radius: 14px 14px 4px 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 60px rgba(0,166,81,.12);
  padding: 22px 26px 26px; overflow: hidden;
}
.nb-zoom.is-open .nbz-screen { animation: nbz-abrir .55s cubic-bezier(.2,.8,.25,1) forwards; }
@keyframes nbz-abrir {
  0% { transform: rotateX(-88deg); }
  70% { transform: rotateX(6deg); }
  100% { transform: rotateX(0deg); }
}
/* varredura de "ligar a tela" */
.nbz-power {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(203,245,66,.35) 50%, transparent 70%);
}
.nb-zoom.is-open .nbz-power { animation: nbz-power 1s ease .45s; }
@keyframes nbz-power { 0% { opacity: 0; transform: translateX(-60%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
/* conteúdo aparece depois que a tampa abre */
.nbz-content { opacity: 0; }
.nb-zoom.is-open .nbz-content { animation: nbz-fade .4s ease .42s forwards; }
@keyframes nbz-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nbz-top { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.nbz-marca { font-size: 22px; font-weight: 800; color: #fff; }
.nbz-status { font-size: 12px; font-weight: 800; color: #fff; border-radius: 9999px; padding: 2px 12px; }
.nbz-status--ativo { background: #00a651; }
.nbz-status--defeito { background: #e0533f; }
.nbz-status--obsoleto { background: #9ca3af; }
.nbz-modelo { font-size: 14px; color: #bbf7d0; margin-bottom: 16px; }
.nbz-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 22px; }
.nbz-specs li { display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 6px; }
.nbz-specs li b { font-size: 11px; font-weight: 700; color: #9fe3bd; }
.nbz-specs li span { font-size: 14px; color: #fff; word-break: break-word; }
.nbz-editar {
  display: inline-block; margin-top: 18px; background: #cbf542; color: #14532d; font-weight: 800;
  text-decoration: none; padding: 9px 18px; border-radius: 9999px; font-size: 14px;
}
.nbz-editar:hover { background: #b9e636; }
/* Botão "Gerar termo": mesmo formato do editar, cor branca + borda; desabilita quando não há colaborador. */
.nbz-termo { border: 2px solid #cbf542; background: transparent; color: #eafff2; cursor: pointer; margin-left: 8px; }
.nbz-termo:hover { background: rgba(203,245,66,.16); }
.nbz-termo:disabled { opacity: .4; cursor: not-allowed; border-color: #64748b; color: #94a3b8; background: transparent; }
/* Patrimônio clicável no zoom do notebook → abre a etiqueta pra imprimir. */
.nbz-patr-link { color: #cbf542; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.nbz-patr-link:hover { color: #eaffab; }
/* base/teclado do laptop */
.nbz-base {
  position: relative; height: 18px; margin: 0 auto; width: 86%;
  background: linear-gradient(#cdd5dd, #aab4bf); border-radius: 3px 3px 12px 12px;
  box-shadow: 0 16px 30px rgba(0,0,0,.4);
}
.nbz-base::before { content: ""; position: absolute; left: 50%; top: 3px; transform: translateX(-50%); width: 46%; height: 4px; border-radius: 2px; background: rgba(0,0,0,.18); }
.nbz-touch { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); width: 26%; height: 6px; border-radius: 2px; background: rgba(0,0,0,.22); }
@media (max-width: 560px) {
  .nbz-specs { grid-template-columns: 1fr; }
  .nbz-screen { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-zoom.is-open .nbz-screen { animation: none; transform: none; }
  .nb-zoom.is-open .nbz-content { animation: none; opacity: 1; }
  .nb-zoom.is-open .nbz-power { animation: none; }
}

/* Notebooks no mapa da loja (mesmo card do mapa de notebooks) */
.mapa-setor--notebooks { grid-column: 1 / -1; }
.mapa-setor--notebooks .nb-card { cursor: pointer; }
.nb-badge--notebook { background: #32673a; }

/* ============================================================
   Montar caixa de envio (vários itens → 1 protocolo)
   ============================================================ */
.cx-top { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 18px; }
.cx-campo { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 13px; color: #14532d; }
.cx-campo small { font-weight: 500; color: #64748b; }
.dark .cx-campo { color: #c6f4d9; }
.cx-campo select, .cx-campo input {
  min-width: 200px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid #d7e2db;
  background: #fff; font-size: 14px; color: #14532d;
}
.dark .cx-campo select, .dark .cx-campo input { background: #1c241e; border-color: #2c382f; color: #e5e7eb; }
.cx-campo select.is-erro, .cx-campo input.is-erro { border-color: #e0533f; box-shadow: 0 0 0 3px rgba(224,83,63,.18); }

.cx-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 18px; align-items: start; }
@media (max-width: 760px) { .cx-grid { grid-template-columns: 1fr; } }

/* itens disponíveis */
.cx-itens { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; padding-right: 4px; }
.cx-item {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #e6efe9;
  border-radius: 12px; padding: 10px 14px; transition: border-color .15s, box-shadow .15s;
}
.dark .cx-item { background: #1c241e; border-color: #2c382f; }
.cx-item.is-na-caixa { border-color: #00a651; box-shadow: 0 4px 14px rgba(0,166,81,.16); }
.cx-item__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cx-item__txt b { font-size: 14px; color: #14532d; } .dark .cx-item__txt b { color: #c6f4d9; }
.cx-item__txt span { font-size: 11px; color: #64748b; }
.cx-item__qtd { display: flex; align-items: center; gap: 6px; }
.cx-item__qtd input { width: 56px; text-align: center; padding: 6px; border-radius: 8px; border: 1.5px solid #d7e2db; font-weight: 700; }
.dark .cx-item__qtd input { background: #141a15; border-color: #2c382f; color: #e5e7eb; }
.cx-step {
  width: 30px; height: 30px; border-radius: 50%; border: 0; background: #e7f8ee; color: #0c7a3e;
  font-size: 19px; font-weight: 800; line-height: 1; cursor: pointer;
}
.cx-step:hover { background: #00a651; color: #fff; }

/* itens FORA do estoque (avulsos) */
.cx-avulsos { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed #d7e2db; }
.dark .cx-avulsos { border-top-color: #2c382f; }
.cx-avulsos__head { display: flex; flex-direction: column; margin-bottom: 8px; }
.cx-avulsos__head b { font-size: 13px; color: #14532d; } .dark .cx-avulsos__head b { color: #c6f4d9; }
.cx-avulsos__head span { font-size: 11px; color: #64748b; }
.cx-avulsos__list { display: flex; flex-direction: column; gap: 8px; }
.cx-avulso {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #e6efe9;
  border-radius: 12px; padding: 8px 12px; transition: border-color .15s, box-shadow .15s;
}
.dark .cx-avulso { background: #1c241e; border-color: #2c382f; }
.cx-avulso.is-na-caixa { border-color: #00a651; box-shadow: 0 4px 14px rgba(0,166,81,.16); }
.cx-avulso__tipo { flex: 0 0 auto; min-width: 150px; max-width: 190px; }
.cx-avulso__nome { flex: 1; min-width: 0; }
.cx-avulso__x {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fdeaea; color: #c0392b; font-size: 17px; font-weight: 800; line-height: 1;
}
.cx-avulso__x:hover { background: #e0533f; color: #fff; }
.dark .cx-avulso__x { background: #3a2020; color: #f3b4b4; }
.cx-avulso-add {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: #e7f8ee; color: #0c7a3e; border: 1.5px dashed #9ad9b7; border-radius: 10px;
  padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s;
}
.cx-avulso-add .material-symbols-outlined { font-size: 18px; }
.cx-avulso-add:hover { background: #00a651; color: #fff; border-color: #00a651; }
.dark .cx-avulso-add { background: #14251c; color: #7fe0a8; border-color: #2f5b41; }
.cx-resumo__tag {
  font-style: normal; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #b45309; background: #fff3e0; border-radius: 5px; padding: 1px 5px; margin-left: 4px; vertical-align: middle;
}
.dark .cx-resumo__tag { color: #fbbf77; background: #3a2c14; }
/* estoque recolhível (usado no "protocolo genérico") */
.cx-stock { border: 0; }
.cx-stock__sum { cursor: pointer; font-weight: 800; color: #14532d; font-size: 13px; padding: 6px 4px;
  list-style: none; display: flex; align-items: center; gap: 7px; }
.cx-stock__sum::-webkit-details-marker { display: none; }
.cx-stock__sum::before { content: "▸"; transition: transform .15s; color: #00a651; }
.cx-stock[open] .cx-stock__sum::before { transform: rotate(90deg); }
.cx-stock__sum small { color: #64748b; font-weight: 600; }
.dark .cx-stock__sum { color: #c6f4d9; }
.cx-stock__list { display: flex; flex-direction: column; gap: 8px; padding: 8px 2px 2px; }
/* modo genérico: avulsos em cima, estoque (opcional) embaixo */
.cx-itens--generico #cx-avulsos { order: 1; margin-top: 0; padding-top: 0; border-top: 0; }
.cx-itens--generico .cx-stock { order: 2; margin-top: 8px; padding-top: 8px; border-top: 1.5px dashed #d7e2db; }
.dark .cx-itens--generico .cx-stock { border-top-color: #2c382f; }

/* painel da caixa */
.cx-box-panel {
  position: sticky; top: 12px; background: #f7faf8; border: 1px solid #e0ece5; border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.dark .cx-box-panel { background: #141a15; border-color: #26302a; }
.cx-box { position: relative; width: 150px; transition: transform .2s ease; }
.cx-box.is-pulse { animation: cx-pulse .4s ease; }
@keyframes cx-pulse { 0%,100% { transform: none; } 40% { transform: scale(1.08) translateY(-4px); } }
.cx-box__svg { width: 100%; height: auto; display: block; }
.cx-box__flapL { fill: #c98a4e; } .cx-box__flapR { fill: #b9793f; }
.cx-box__back { fill: #a9743f; } .cx-box__front { fill: #c2884c; }
.cx-box.is-cheia .cx-box__front { fill: #00a651; } .cx-box.is-cheia .cx-box__back { fill: #0c7a3e; }
.cx-box__count {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%);
  font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.cx-resumo { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow: auto; }
.cx-resumo li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; background: #fff; border: 1px solid #e6efe9; border-radius: 9px; padding: 6px 10px; }
.dark .cx-resumo li { background: #1c241e; border-color: #2c382f; color: #e5e7eb; }
.cx-resumo__nome { font-weight: 700; color: #14532d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .cx-resumo__nome { color: #c6f4d9; }
.cx-resumo__q { color: #0c7a3e; font-weight: 800; white-space: nowrap; }
.cx-resumo__vazio { justify-content: center; color: #94a3b8; font-style: italic; }
.cx-total { font-size: 12px; font-weight: 700; color: #64748b; }
.cx-montar { width: 100%; }
.cx-montar:disabled { opacity: .5; cursor: not-allowed; }

/* overlay da animação de montagem */
.cx-anim { position: fixed; inset: 0; z-index: 95; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; background: rgba(8,20,12,.82); backdrop-filter: blur(3px); }
.cx-anim.is-open { display: flex; }
.cx-anim__stage { position: relative; width: 240px; }
.cx-anim__box { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)); }
.cx-anim__flapL, .cx-anim__flapR { transform-box: fill-box; transform-origin: bottom center; }
.cx-anim__stage.is-playing .cx-anim__flapL { animation: cx-flapL 1.6s ease forwards; }
.cx-anim__stage.is-playing .cx-anim__flapR { animation: cx-flapR 1.6s ease forwards; }
@keyframes cx-flapL { 0%,40% { transform: rotateX(-75deg); } 70%,100% { transform: rotateX(0); } }
@keyframes cx-flapR { 0%,40% { transform: rotateX(-75deg); } 72%,100% { transform: rotateX(0); } }
.cx-anim__tape { position: absolute; top: 28%; left: 50%; width: 0; height: 8px; background: #cbf542;
  transform: translateX(-50%); border-radius: 2px; }
.cx-anim__stage.is-playing .cx-anim__tape { animation: cx-tape .5s ease 1.8s forwards; }
@keyframes cx-tape { from { width: 0; } to { width: 66%; } }
.cx-anim__txt { color: #fff; font-weight: 700; font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .cx-anim__stage.is-playing .cx-anim__flapL, .cx-anim__stage.is-playing .cx-anim__flapR,
  .cx-anim__stage.is-playing .cx-anim__tape, .cx-box.is-pulse { animation: none; }
}

/* Controles nativos (calendário, etc.) seguem o TEMA do sistema/app.
   O unfold alterna a classe .dark no <html>; definir color-scheme no root faz
   o navegador renderizar o date picker no tom certo (claro ou escuro). */
html { color-scheme: light; }
html.dark { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .85; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ============================================================
   Lista unificada de transferências (PC + notebook + peças)
   ============================================================ */
/* Painel de vidro do tema em volta da tabela (data-table bonito, igual ao admin). */
.tr-tabela-wrap {
  overflow-x: auto;
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.7); border-radius: var(--g-radius);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 30px -18px rgba(13,50,32,.4);
}
.dark .tr-tabela-wrap {
  background: rgba(22,30,24,.55); border-color: rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -18px rgba(0,0,0,.5);
}
.tr-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 920px; background: transparent; }
/* Cabeçalho: tonal verde, MAIÚSCULO, leve (Material) — igual ao changelist. */
.tr-tabela thead th {
  text-align: left; padding: 14px 16px; background: linear-gradient(180deg, #f3faf6, #e8f4ed); color: #14532d;
  text-transform: uppercase; letter-spacing: .045em; font-weight: 800; font-size: 11px;
  border-bottom: 2px solid #cfe9db; white-space: nowrap;
}
.dark .tr-tabela thead th { background: linear-gradient(180deg, rgba(20,36,29,.95), rgba(15,26,21,.92)); color: #c6f4d9; border-color: #2b5340; }
/* Células: respiro + alinhamento vertical ao centro (some o desalinhamento). */
.tr-tabela td { padding: 13px 16px; border-bottom: 1px solid #eef2f6; color: #0f172a; vertical-align: middle; }
.dark .tr-tabela td { border-color: #232c25; color: #d7e3da; }
/* Zebra sutil (igual à tabela de computadores). */
.tr-tabela tbody tr:nth-child(even) td { background: rgba(0,166,81,.035); }
.dark .tr-tabela tbody tr:nth-child(even) td { background: rgba(255,255,255,.022); }
/* Hover de linha com acento verde à esquerda (seleção Material). */
.tr-tabela tbody tr { transition: background .12s ease; }
.tr-tabela tbody tr:hover td { background: #f5fbf7; }
.tr-tabela tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #00a651; }
.dark .tr-tabela tbody tr:hover td { background: rgba(0,166,81,.08); }
.tr-tipo { font-weight: 700; color: #14532d; white-space: nowrap; }
.dark .tr-tipo { color: #c6f4d9; }
.tr-badge { font-size: 11px; font-weight: 800; color: #fff; border-radius: 9999px; padding: 3px 11px; white-space: nowrap; display: inline-block; }
.tr-badge--autorizada, .tr-badge--enviada, .tr-badge--recebida { background: #00a651; }
.tr-badge--pendente { background: #ef8f3c; }
.tr-badge--negada, .tr-badge--devolvida, .tr-badge--cancelada { background: #9ca3af; }
.tr-prot {
  background: #0c7a3e; color: #fff; padding: 4px 12px; border-radius: 9999px;
  text-decoration: none; font-weight: 700; font-size: 12px; white-space: nowrap;
}
.tr-prot:hover { background: #0a5e30; }
.tr-vazio { text-align: center; color: #94a3b8; padding: 28px; font-style: italic; }
.tr-del { background: #e0533f; color: #fff; border: 0; padding: 4px 12px; border-radius: 9999px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tr-del:hover { background: #c62828; }
.tr-col-chk { width: 36px; text-align: center; }
.tr-col-chk input { width: 16px; height: 16px; cursor: pointer; }
.tr-bulkbar { margin: 4px 0 12px; }
#tr-bulk-del:disabled { opacity: .45; cursor: not-allowed; }

/* ====== Mapa de notebooks no celular: docks compactos + cards 2/linha ====== */
@media (max-width: 600px) {
  /* Barra dos docks (Enviar / Atribuir) cabe lado a lado, sem estourar */
  .nb-docks { gap: 8px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); align-items: stretch; }
  .nb-docks .truck-dock--inline,
  .nb-docks .dock-colab {
    flex: 1 1 0; min-width: 0; padding: 6px 8px; border-radius: 16px;
    align-items: center; justify-content: flex-start; gap: 2px;
    border-width: 2px;
  }
  .nb-docks .truck-dock__hint { font-size: 10.5px; text-align: center; line-height: 1.15; }
  .nb-docks .truck-dock__svg { width: 70px; height: 36px; }
  .nb-docks .dock-colab__av { width: 34px; }
  /* Cards de notebook: 2 por linha, compactos */
  .nb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .nb-card { width: 100%; padding: 8px 6px 10px; }
  /* O "+" (usa .baia--add) também preenche a coluna, alinhado com os cards. */
  .nb-grid .baia--add { width: 100% !important; }
  .nb-laptop { width: 64px; }
  .nb-card__nome { font-size: 11px; }
  /* Overlays (carrossel / escolher loja) usam quase toda a largura */
  .tl-overlay { padding: 12px; }
  .tl-overlay__card, .tl-overlay__card--wide { max-width: 100%; padding: 16px 12px; }
  .colab-card { width: 130px; }
  .colab-card__av { width: 80px; }
}

/* ============================================================
   Mobile: telas MAXIMIZADAS (conteúdo edge-to-edge)
   ============================================================ */
@media (max-width: 767px) {
  /* tira as margens laterais do conteúdo do unfold */
  #content { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  #content [class~="@container"] { padding-left: 6px !important; padding-right: 6px !important; }
  .result-list-wrapper { padding-left: 4px !important; padding-right: 4px !important; gap: 0 !important; }
  /* dashboard e telas customizadas ocupam a largura toda */
  .make-dash { border-radius: 0 !important; min-height: calc(100vh - 110px) !important; }
  .make-dash-inner { padding: 8px !important; }
  .mapa { padding: 0 !important; }
  .mapa__planta { gap: 10px !important; }
  /* Toolbar mais compacta e o filtro de lojas vira faixa segmentada que ROLA na horizontal
     (não quebra em várias linhas com bordas soltas). */
  .mapa__toolbar { gap: 10px !important; }
  .mapa__filtro { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mapa__filtro::-webkit-scrollbar { display: none; }
  .mapa__filtro .setor-btn { flex: 0 0 auto; white-space: nowrap; }
  /* Filtros das TABELAS também rolam na horizontal no celular. */
  .tab-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .tab-chips::-webkit-scrollbar { display: none; }
  .tab-chip, .tab-chips__lbl { flex: 0 0 auto; white-space: nowrap; }
  .tr-tabela-wrap { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
  /* cards de loja/kpi e seções aproveitam a largura */
  .make-card, .mapa-setor, .mapa-unidade { width: 100% !important; }
}

/* ============================================================
   Login + Recuperação de senha (telas não-autenticadas)
   ============================================================ */
body.login #page {
  background: radial-gradient(130% 120% at 50% 6%, #eef6f0 0%, #dcebe1 60%, #cfe3d6 100%) !important;
}
.dark body.login #page {
  background: radial-gradient(130% 120% at 50% 6%, #123a28 0%, #0a1f15 55%, #05110b 100%) !important;
}
.make-login-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; color: #235539; opacity: .12; }
.make-login-bg svg { width: 100%; height: 100%; display: block; }
.dark .make-login-bg { color: #8fe3b0; opacity: .16; }
/* ===== Login: foto NÍTIDA de fundo + card de VIDRO DE VITRINE (com reflexo), centralizado ===== */
.make-login-photo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  /* compensa monitor: + brilho, - saturação (a arte estava forte/escura na tela) */
  filter: brightness(1.16) saturate(.86) contrast(.98);
}
/* vinheta central leve só p/ contraste do texto do card */
.make-login-photo::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(56% 52% at 50% 48%, rgba(4,14,9,.34), rgba(4,14,9,.08) 66%, transparent 100%);
}
/* Card = vidro de vitrine: liso, translúcido, brilho de borda + reflexo diagonal. */
/* Card = PAINEL DE HQ EM VIDRO: contorno de tinta preta + sombra dura de quadrinho,
   sobre vidro fosco translúcido com reflexo glossy — casa com a arte de fundo. */
.make-login-card {
  position: relative; z-index: 1; max-width: 430px; margin: 24px auto; overflow: hidden;
  /* ESPELHADO: sheen reflexivo escorrendo no topo + tônus escuro translúcido só
     o suficiente para o texto branco continuar legível sobre a arte. */
  background:
    linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 18%, rgba(255,255,255,.02) 40%, transparent 60%),
    linear-gradient(160deg, rgba(14,26,19,.52) 0%, rgba(9,17,12,.62) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.5) brightness(1.05); backdrop-filter: blur(12px) saturate(1.5) brightness(1.05);
  border: 2.5px solid rgba(12,18,12,.9); border-radius: 20px; padding: 30px 30px 26px;
  box-shadow:
    9px 9px 0 rgba(12,18,12,.42),          /* sombra dura, offset — cara de quadrinho */
    0 26px 58px rgba(0,0,0,.40),           /* profundidade suave por baixo */
    inset 0 1px 0 rgba(255,255,255,.72),   /* brilho fino na borda superior (vidro) */
    inset 0 0 44px rgba(255,255,255,.10);  /* neblina interna do vidro */
}
/* Reflexo de ESPELHO: specular forte no canto superior-esquerdo + riscos de luz
   diagonais suaves (a luz que escorre no vidro polido) + brilho no canto oposto.
   Mais suaves que a versão original para reflexo sem "cortar" a leitura. */
.make-login-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    /* specular largo no topo-esquerda */
    linear-gradient(135deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.12) 13%, transparent 32%),
    /* riscos finos de luz do espelho */
    linear-gradient(118deg, transparent 44%, rgba(255,255,255,.16) 46%, transparent 49%),
    linear-gradient(118deg, transparent 60%, rgba(255,255,255,.09) 62%, transparent 65%),
    /* brilho suave no canto inferior-direito */
    linear-gradient(305deg, rgba(255,255,255,.18) 0%, transparent 28%);
}
/* Varredura "ligar o monitor" — mesmo keyframe do zoom de máquina do parque,
   agora em luz BRANCA. Roda uma vez ao carregar (reflexo de vidro cruzando). */
.make-login-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,248,225,.42) 50%, transparent 70%);
  opacity: 0;
  animation: login-sheen 8s ease .4s infinite;
}
/* Mesmo formato da varredura de acesso (monitor-power): passada larga e suave da
   luz cruzando o card; depois pausa longa e repete. */
@keyframes login-sheen {
  0%   { opacity: 0; transform: translateX(-65%); }
  5%   { opacity: 1; }
  17%  { opacity: 0; transform: translateX(65%); }
  100% { opacity: 0; transform: translateX(65%); }
}
@media (prefers-reduced-motion: reduce) {
  .make-login-card::after { animation: none; }
}
.make-login-card > * { position: relative; z-index: 1; }
.make-login-card label, .make-login-card .help,
.make-login-card .text-font-important-light { color: #eef7f1 !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* Rótulos no estilo Material: label-large, peso médio, leve tracking. */
.make-login-card label {
  font-size: 13px; font-weight: 600; letter-spacing: .3px; line-height: 1.4;
  display: inline-block; margin-bottom: 2px;
}
.make-login-logo { display: flex; justify-content: center; margin-bottom: 22px; }
/* Logo: superfície verde chapada (Material). */
.make-login-logo__panel {
  background: #00a651; border: 2.5px solid rgba(12,18,12,.9); border-radius: 18px; padding: 20px 28px; width: 100%; display: flex; justify-content: center;
  box-shadow: 5px 5px 0 rgba(12,18,12,.34), 0 6px 16px rgba(0,120,60,.30);
}
.make-login-logo__panel img { max-width: 220px; width: 100%; height: auto; display: block; }
.make-login-welcome {
  text-align: center; font-size: 21px; font-weight: 700; color: #ffffff;
  line-height: 1.28; letter-spacing: -.3px; margin: 4px 0 6px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.make-login-sub { text-align: center; font-size: 13.5px; color: #d6ebe0; margin: 0 0 24px; line-height: 1.5; letter-spacing: .1px; }
/* Campos: vidro (frosted), ÍCONE MATERIAL preenchido, foco verde-lima.
   Escala tipográfica Material: corpo 16px, tracking sutil. */
.make-login-card input[type="text"],
.make-login-card input[type="password"],
.make-login-card input[type="email"] {
  width: 100%; box-sizing: border-box; height: 54px; padding: 12px 16px 12px 48px; margin-top: 4px;
  border: 1.5px solid rgba(255,255,255,.32); border-radius: 14px; background-color: rgba(255,255,255,.10);
  background-repeat: no-repeat; background-position: 15px center; background-size: 22px;
  font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .1px;
  color: #ffffff; outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.make-login-card input[type="text"], .make-login-card input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dcebe3'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
.make-login-card input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dcebe3'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z'/%3E%3C/svg%3E");
}
.make-login-card input::placeholder { color: rgba(255,255,255,.80); font-weight: 400; }
.make-login-card input:hover { border-color: rgba(255,255,255,.55); }
.make-login-card input:focus { border-color: #8bd11f; background-color: rgba(255,255,255,.14); box-shadow: 0 0 0 3px rgba(139,209,31,.3); }
/* link pequeno de recuperação / voltar */
.make-login-reset { display: block; text-align: center; margin-top: 18px; font-size: 13px; }
.make-login-reset a, a.make-login-reset { color: #b9f4d3; text-decoration: none; font-weight: 600; letter-spacing: .2px; border-bottom: 1.5px solid transparent; padding-bottom: 1px; transition: color .15s, border-color .15s; }
.make-login-reset a:hover, a.make-login-reset:hover { color: #cbf542; border-bottom-color: currentColor; }
/* Botão verde das telas de login/recuperação (sempre visível) — Material label-large. */
.make-login-btn {
  width: 100%; border: 0; cursor: pointer; border-radius: 14px; padding: 15px 20px;
  background: #00a651; color: #fff; font-family: 'Figtree', system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .3px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 8px 22px rgba(0,166,81,.32); transition: background .15s, transform .1s, box-shadow .15s;
}
.make-login-btn:hover { background: #00913f; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,166,81,.42); }
.make-login-btn:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(0,166,81,.3); }

/* --- Telas de fundo CLARO (recuperar / trocar senha) usam os doodles, NÃO a foto HQ.
   O card compartilhado é desenhado p/ fundo escuro (texto branco). Aqui invertemos p/
   painel branco fosco com texto escuro (legível), mantendo o contorno/sombra de HQ.
   Seletor de irmão: só casa quando existe .make-login-bg antes (login usa .make-login-photo). --- */
.make-login-bg ~ .make-login-card {
  background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(255,255,255,.7));
}
.make-login-bg ~ .make-login-card .make-login-welcome { color: #14532d; text-shadow: none; }
.make-login-bg ~ .make-login-card .make-login-sub { color: #46685a; }
.make-login-bg ~ .make-login-card label,
.make-login-bg ~ .make-login-card .help,
.make-login-bg ~ .make-login-card .text-font-important-light { color: #1f3d2b !important; text-shadow: none; }
.make-login-bg ~ .make-login-card input[type="text"],
.make-login-bg ~ .make-login-card input[type="email"],
.make-login-bg ~ .make-login-card input[type="password"] {
  color: #0f172a; background-color: rgba(255,255,255,.92); border-color: rgba(20,60,40,.3);
}
.make-login-bg ~ .make-login-card input::placeholder { color: rgba(15,23,42,.5); }
.make-login-bg ~ .make-login-card input:hover { border-color: rgba(0,145,63,.55); }
.make-login-bg ~ .make-login-card input[type="text"],
.make-login-bg ~ .make-login-card input[type="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300a651'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}
.make-login-bg ~ .make-login-card input[type="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300a651'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z'/%3E%3C/svg%3E");
}
.make-login-bg ~ .make-login-card .make-login-reset a { color: #00913f; }
.make-login-bg ~ .make-login-card .make-login-reset a:hover { color: #00a651; }

.make-dash-titulo { font-size: 20px; font-weight: 800; color: #0f172a; margin: 4px 0 18px; }
.make-dash-titulo small { font-size: 14px; font-weight: 600; color: #64748b; }

/* Botão "Ver no mapa" do explorador de score */
.make-score__mapbtn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #00a651; color: #fff; border: none; border-radius: 9px;
  padding: 8px 14px; font-weight: 700; font-size: 13px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,166,81,.28); transition: background .15s, transform .1s;
}
.make-score__mapbtn:hover { background: #00913f; transform: translateY(-1px); }
.make-score__mapbtn .material-symbols-outlined { font-size: 18px; }

/* Cards de dispositivo no Mapa por Score */
.mapa-score-cards { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px; }
.score-dev {
  width: 168px; background: #fff; border: 1px solid #e2e8f0; border-left: 5px solid var(--cor, #94a3b8);
  border-radius: 10px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.score-dev__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.score-dev__icone { color: var(--cor, #64748b); font-size: 22px; }
.score-dev__badge {
  background: var(--cor, #94a3b8); color: #fff; font-weight: 800; font-size: 13px;
  border-radius: 999px; min-width: 30px; text-align: center; padding: 2px 8px;
}
.score-dev__nome { font-weight: 700; font-size: 13px; color: #0f172a; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-dev__specs { font-size: 11px; color: #64748b; margin-top: 2px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.score-dev__rodape { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--cor, #64748b); margin-top: 6px; }

/* ===== Explorador de Score (dashboard) ===================================== */
.make-score__head { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 6px 0 20px; }
.make-score__stats { display: flex; gap: 26px; }
.make-score__stat { display: flex; flex-direction: column; line-height: 1.05; }
.make-score__stat span { font-size: 26px; font-weight: 800; color: #0f172a; }
.make-score__stat small { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 600; margin-top: 2px; }
.make-score__slider { position: relative; flex: 1 1 280px; height: 36px; min-width: 240px; }
.make-score__track, .make-score__sel { position: absolute; top: 16px; height: 4px; border-radius: 2px; }
.make-score__track { left: 0; right: 0; background: #e2e8f0; }
.dark .make-score__track { background: rgba(255,255,255,.12); }
.make-score__sel { background: linear-gradient(90deg, #00a651, #cbf542); box-shadow: 0 0 12px -2px rgba(0,166,81,.55); }
.make-score__slider input[type=range] {
  position: absolute; left: 0; top: 0; width: 100%; height: 36px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.make-score__slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid #00a651;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); transition: box-shadow .15s ease;
}
.make-score__slider input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 5px rgba(203,245,66,.3), 0 1px 4px rgba(0,0,0,.35);
}
.make-score__slider input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid #00a651; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.dark .make-score__slider input[type=range]::-webkit-slider-thumb { background: #0d1310; }
.dark .make-score__slider input[type=range]::-moz-range-thumb { background: #0d1310; }
.make-score__slider input[type=range]::-moz-range-track { background: none; border: none; }
.make-score__charts { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 18px; }
.make-score__chart { display: flex; flex-direction: column; min-width: 0; }
.make-score__chart-lbl { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 6px; }
/* Tema escuro: textos que somiam no fundo escuro */
.dark .make-score__stat span { color: #c6f4d9; }
.dark .make-score__chart-lbl { color: #94a3b8; }
.dark .make-dash-titulo { color: #c6f4d9; }
.dark .make-dash-titulo small { color: #94a3b8; }
.make-score__chart .make-chartbox { height: 220px; }
@media (max-width: 900px) { .make-score__charts { grid-template-columns: 1fr; } }

/* ====================== Setores (agrupados por unidade) ====================== */
.set-nova-uni {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: #00a651; color: #fff; font-size: 13px; font-weight: 700;
  border-radius: 10px; padding: 9px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.1);
  transition: background .14s ease, transform .14s ease;
}
.set-nova-uni:hover { background: #00913f; transform: translateY(-1px); }
.set-lista { display: flex; flex-direction: column; gap: 22px; }
.set-grupo {
  background: #fff; border: 1px solid #eceff1; border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
}
.dark .set-grupo { background: #161b16; border-color: #2a322b; }
.set-grupo__head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: #f2faf5; border-bottom: 1px solid #e3efe8;
}
.dark .set-grupo__head { background: #11201a; border-color: #244234; }
.set-grupo__nome { margin: 0; font-size: 16px; font-weight: 800; color: #14532d; display: inline-flex; align-items: center; gap: 8px; }
.dark .set-grupo__nome { color: #c6f4d9; }
.set-grupo__ico { color: var(--intelbras-verde,#00a651); font-size: 22px; vertical-align: middle; }
.set-grupo__qtd { font-size: 12px; font-weight: 700; color: #51766a; background: #d6efe0; border-radius: 999px; padding: 2px 10px; }
.dark .set-grupo__qtd { background: rgba(0,166,81,.18); color: #7fdca6; }
.set-grupo__add { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #00a651; text-decoration: none; border: 1px solid #bfe6cf; border-radius: 9px; padding: 5px 12px; }
.set-grupo__add:hover { background: #e8f5ee; }
.dark .set-grupo__add { color: #7fdca6; border-color: #2f5740; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 16px 18px; }
.set-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 12px 14px; border: 1px solid #eceff1; border-radius: 13px; background: #fff;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.set-card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 8px 18px rgba(0,0,0,.10); border-color: #d7e3da; }
.dark .set-card { background: #141a15; border-color: #232b25; }
.set-card__icone { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #c6f0d8; color: #00a651; font-size: 22px; }
.dark .set-card__icone { background: #1f3a2a; color: #7fdca6; }
.set-card__txt { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.set-card__nome { font-size: 14px; font-weight: 700; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .set-card__nome { color: #e5e7eb; }
.set-card__baias { font-size: 12px; color: #6b7280; font-weight: 600; }
.dark .set-card__baias { color: #9aa0a6; }
.set-card__edit { flex: 0 0 auto; font-size: 18px; color: #cbd5e1; border-radius: 8px; padding: 3px; transition: color .14s ease, background .14s ease; }
.set-card__edit:hover { color: #00a651; background: #e8f5ee; }
.dark .set-card__edit { color: #4b5563; }
/* Card "Adicionar setor" — MESMO estilo do "+" do mapa (.baia--add__mais).
   Especificidade .set-card.set-card--add + !important pra vencer o vidro do .set-card. */
.set-card.set-card--add {
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  font-weight: 700; color: var(--intelbras-verde) !important;
  border: 2px dashed rgba(0,166,81,.35) !important; border-radius: var(--g-radius) !important;
  background: linear-gradient(135deg, rgba(0,166,81,.06), rgba(203,245,66,.04)) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
}
.set-card.set-card--add::before { display: none !important; }   /* sem o gloss do vidro */
.set-card.set-card--add:hover {
  border-color: var(--intelbras-verde) !important; color: var(--intelbras-verde-escuro) !important;
  background: linear-gradient(135deg, rgba(0,166,81,.14), rgba(203,245,66,.08)) !important;
  box-shadow: 0 8px 22px -8px rgba(0,166,81,.45) !important; transform: translateY(-2px);
}
.dark .set-card.set-card--add {
  color: #7fdca6 !important; border-color: rgba(0,166,81,.4) !important;
  background: linear-gradient(135deg, rgba(0,166,81,.10), rgba(203,245,66,.05)) !important;
}
.dark .set-card.set-card--add:hover { color: #86efac !important; background: linear-gradient(135deg, rgba(0,166,81,.18), rgba(203,245,66,.09)) !important; }
.set-card--add__mais { font-size: 34px; font-weight: 300; line-height: 1; }
.set-card--add .set-card__nome { font-size: 13px; color: inherit; }

/* ====================== Reparos / Manutenções (Kanban) ====================== */
/* (.kanban-filtro herda o painel/estilo do filtro do mapa — ver bloco unificado no topo.) */
/* Grid responsivo: colunas se ajustam à largura e quebram de linha (nunca cortam). */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; padding-bottom: 14px; align-items: start; }
.kanban-col {
  min-width: 0; background: #f6f8f7; border: 1px solid #ebeff0;
  border-radius: 16px; padding: 0 0 4px; overflow: hidden;
}
.dark .kanban-col { background: #141a15; border-color: #232b25; }
/* cabeçalho tonal por situação (suave, sem tarja grossa) */
.kanban-col__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-bottom: 1px solid rgba(0,0,0,.04);
}
.kanban-col--abertos .kanban-col__head { background: #eef3fd; }
.kanban-col--cotacao .kanban-col__head { background: #fdf4e3; }
.kanban-col--manutencao .kanban-col__head { background: #fdeee3; }
.kanban-col--finalizados .kanban-col__head { background: #e8f6ee; }
.dark .kanban-col--abertos .kanban-col__head { background: rgba(59,111,224,.16); }
.dark .kanban-col--cotacao .kanban-col__head { background: rgba(239,143,60,.16); }
.dark .kanban-col--manutencao .kanban-col__head { background: rgba(234,88,12,.16); }
.dark .kanban-col--finalizados .kanban-col__head { background: rgba(0,166,81,.18); }
.kanban-col__titulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.kanban-col--abertos .kanban-col__titulo { color: #1e40af; }
.kanban-col--cotacao .kanban-col__titulo { color: #b45309; }
.kanban-col--manutencao .kanban-col__titulo { color: #c2410c; }
.kanban-col--finalizados .kanban-col__titulo { color: #00a651; }
.dark .kanban-col__titulo { color: #e5e7eb; }
.kanban-col__qtd { background: #fff; color: #475569; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.dark .kanban-col__qtd { background: #0f140f; color: #c6f4d9; }
.kanban-col__body { display: flex; flex-direction: column; gap: 10px; min-height: 20px; padding: 12px; }
.kanban-col__vazio { font-size: 12px; color: #9aa6a0; text-align: center; padding: 22px 10px; border: 1.5px dashed #d9e0dc; border-radius: 12px; }
.dark .kanban-col__vazio { border-color: #2a322b; }

.kanban-card {
  background: #fff; border: 1px solid #eceff1; border-left: 4px solid #cbd5e1; border-radius: 13px;
  padding: 13px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10);
  transition: transform .14s ease, box-shadow .14s ease;
}
.kanban-card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 10px 20px rgba(0,0,0,.12); }
.dark .kanban-card { background: #161b16; border-color: #2a322b; }
.kanban-card--abertos { border-left-color: #3b6fe0; }
.kanban-card--cotacao { border-left-color: #ef8f3c; }
.kanban-card--manutencao { border-left-color: #ea580c; }
.kanban-card--finalizados { border-left-color: #00a651; }
.kanban-card__link { text-decoration: none; display: block; }
.kanban-card__titulo { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: #1f2937; }
.dark .kanban-card__titulo { color: #e5e7eb; }
.kanban-card__maq { margin: 0; font-size: 12.5px; font-weight: 700; color: #14532d; display: flex; align-items: center; gap: 5px; }
.dark .kanban-card__maq { color: #c6f4d9; }
.kanban-card__maq .material-symbols-outlined { font-size: 16px; color: #00a651; }
.kanban-card__local { margin: 2px 0 0; font-size: 11.5px; color: #6b7280; }
.dark .kanban-card__local { color: #9aa0a6; }
.kanban-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.kanban-tag { font-size: 11px; font-weight: 700; background: #eef2f6; color: #475569; border-radius: 999px; padding: 2px 9px; }
.dark .kanban-tag { background: #1e2a22; color: #c6f4d9; }
.kanban-tag--tipo { background: #e8f5ee; color: #00a651; }
.kanban-tag--cot { background: #fef3c7; color: #b45309; }
.kanban-tag--orc { background: #ede9fe; color: #6d28d9; text-decoration: none; }
.kanban-tag--orc:hover { background: #ddd6fe; }
.dark .kanban-tag--orc { background: rgba(124,58,237,.22); color: #c4b5fd; }
.kanban-card__rodape { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #6b7280; font-weight: 600; }
.dark .kanban-card__rodape { color: #9aa0a6; }
.kanban-card__status { display: inline-block; margin-top: 9px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.kanban-card__status--ok { background: #dcfce7; color: #15803d; }
.kanban-card__status--prazo { background: #fff3e0; color: #c2410c; }
.kanban-card__finalizar {
  display: block; margin-top: 10px; text-align: center; text-decoration: none;
  background: #00a651; color: #fff; font-size: 12px; font-weight: 800;
  border-radius: 9px; padding: 7px 0; transition: background .14s ease;
}
.kanban-card__finalizar:hover { background: #00913f; }
@media (max-width: 620px) { .kanban { grid-template-columns: 1fr; } }

/* ===== Assistência externa (envio p/ autorizada): cores das 6 colunas do Kanban ===== */
.kanban-col--aut-enviado .kanban-col__head    { background: #eef3fd; } .kanban-col--aut-enviado .kanban-col__titulo    { color: #1e40af; } .kanban-card--aut-enviado    { border-left-color: #3b6fe0; }
.kanban-col--aut-em_analise .kanban-col__head { background: #fdf4e3; } .kanban-col--aut-em_analise .kanban-col__titulo { color: #b45309; } .kanban-card--aut-em_analise { border-left-color: #ef8f3c; }
.kanban-col--aut-aguardando .kanban-col__head { background: #f3ecfe; } .kanban-col--aut-aguardando .kanban-col__titulo { color: #6d28d9; } .kanban-card--aut-aguardando { border-left-color: #7c3aed; }
.kanban-col--aut-em_reparo .kanban-col__head  { background: #e6f6fd; } .kanban-col--aut-em_reparo .kanban-col__titulo  { color: #0369a1; } .kanban-card--aut-em_reparo  { border-left-color: #0ea5e9; }
.kanban-col--aut-retornando .kanban-col__head { background: #e8f6ee; } .kanban-col--aut-retornando .kanban-col__titulo { color: #00a651; } .kanban-card--aut-retornando { border-left-color: #00a651; }
.kanban-col--aut-finalizado .kanban-col__head { background: #e8f6ee; } .kanban-col--aut-finalizado .kanban-col__titulo { color: #15803d; } .kanban-card--aut-finalizado { border-left-color: #15803d; }
.dark .kanban-col--aut-enviado .kanban-col__head    { background: rgba(59,111,224,.16); }
.dark .kanban-col--aut-em_analise .kanban-col__head { background: rgba(239,143,60,.16); }
.dark .kanban-col--aut-aguardando .kanban-col__head { background: rgba(124,58,237,.18); }
.dark .kanban-col--aut-em_reparo .kanban-col__head  { background: rgba(14,165,233,.16); }
.dark .kanban-col--aut-retornando .kanban-col__head,
.dark .kanban-col--aut-finalizado .kanban-col__head { background: rgba(0,166,81,.18); }
/* ===== Preventiva — lista estilo Google Tarefas ===== */
/* Abas por status */
.gt-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 12px; border-bottom: 1px solid rgba(0,0,0,.08); }
.dark .gt-tabs { border-bottom-color: rgba(255,255,255,.10); }
.gt-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; text-decoration: none;
  color: #64748b; font-weight: 700; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.gt-tab:hover { color: #14532d; background: rgba(0,166,81,.06); border-radius: 8px 8px 0 0; }
.gt-tab--ativa { color: #00713a; border-bottom-color: #00a651; }
.dark .gt-tab { color: #9aa6ae; }
.dark .gt-tab--ativa { color: #7ee0a6; border-bottom-color: #34d17f; }
.gt-tab__qtd { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px;
  font-weight: 800; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
/* Cor por status (pílula da aba) */
.gt-dot--pendente { background: #e0533f; }
.gt-dot--vencida  { background: #ea580c; }
.gt-dot--proxima  { background: #ef8f3c; }
.gt-dot--em_dia   { background: #00a651; }
/* Lista (painel de vidro) */
.gt-list { background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: var(--g-radius);
  box-shadow: var(--g-elev); overflow: hidden; }
.dark .gt-list { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.gt-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.gt-row:last-child { border-bottom: 0; }
.gt-row:hover { background: rgba(0,166,81,.05); }
.dark .gt-row { border-bottom-color: rgba(255,255,255,.06); }
.dark .gt-row:hover { background: rgba(0,166,81,.10); }
.gt-check-form { margin: 0; display: flex; }
/* Bolinha vazada (concluir); cor por status via .gt-row--<status> */
.gt-check { width: 24px; height: 24px; border-radius: 999px; border: 2px solid #94a3b8; background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: background .15s ease, border-color .15s ease; }
.gt-check__done { font-size: 18px; color: transparent; }
.gt-check:hover .gt-check__done, .gt-check:focus-visible .gt-check__done { color: #fff; }
.gt-row--pendente .gt-check { border-color: #e0533f; } .gt-row--pendente .gt-check:hover { background: #e0533f; }
.gt-row--vencida  .gt-check { border-color: #ea580c; } .gt-row--vencida  .gt-check:hover { background: #ea580c; }
.gt-row--proxima  .gt-check { border-color: #ef8f3c; } .gt-row--proxima  .gt-check:hover { background: #ef8f3c; }
.gt-row--em_dia   .gt-check { border-color: #00a651; } .gt-row--em_dia   .gt-check:hover { background: #00a651; }
/* Corpo da linha */
.gt-row__body { min-width: 0; }
.gt-row__titulo { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #14532d;
  font-size: 15px; overflow-wrap: anywhere; }
.dark .gt-row__titulo { color: #e6efe9; }
.gt-row__ico { font-size: 18px; color: #64748b; }
.dark .gt-row__ico { color: #9aa6ae; }
.gt-row__sub { font-size: 12.5px; color: #64748b; margin-top: 1px; }
.dark .gt-row__sub { color: #9aa6ae; }
.gt-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gt-chip { font-size: 11px; font-weight: 700; color: #475569; background: rgba(100,116,139,.12);
  padding: 2px 8px; border-radius: 999px; }
.dark .gt-chip { color: #cbd5e1; background: rgba(148,163,184,.16); }
.gt-chip--aberta { color: #b45309; background: rgba(239,143,60,.16); }
.gt-row__right { display: flex; align-items: center; }
.gt-abrir { text-decoration: none; font-size: 16px; padding: 6px 8px; border-radius: 8px; }
.gt-abrir:hover { background: rgba(0,166,81,.12); }
.gt-vazio { padding: 28px 14px; text-align: center; color: #64748b; }
@media (max-width: 767px) {
  .gt-tab { padding: 9px 12px; font-size: 13px; }
  .gt-row { grid-template-columns: 34px 1fr auto; padding: 11px 12px; }
}

/* ===== Preventiva — visão CALENDÁRIO (estilo Google Agenda) ===== */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.cal-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; border: 1px solid #cfe0d6; background: #fff; color: #14532d; font-size: 20px; font-weight: 800;
  text-decoration: none; line-height: 1; }
.cal-nav__btn:hover { border-color: #00a651; background: rgba(0,166,81,.08); }
.dark .cal-nav__btn { background: rgba(15,22,17,.6); color: #e6efe9; border-color: rgba(255,255,255,.14); }
.cal-nav__mes { font-size: 17px; font-weight: 800; color: #14532d; min-width: 160px; text-align: center; }
.dark .cal-nav__mes { color: #e6efe9; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; font-weight: 700; color: #475569; }
.dark .cal-legenda { color: #cbd5e1; }
.cal-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

/* Grade do mês */
.cal { overflow-x: auto; }
.cal__grid { min-width: 720px; background: var(--g-glass); border: 1px solid var(--g-edge);
  border-radius: var(--g-radius); box-shadow: var(--g-elev); overflow: hidden; }
.dark .cal__grid { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.cal__wkrow, .cal__row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__wkday { padding: 9px 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #64748b; text-align: center; border-bottom: 1px solid rgba(0,0,0,.08); background: rgba(0,166,81,.05); }
.dark .cal__wkday { color: #9aa6ae; border-bottom-color: rgba(255,255,255,.10); background: rgba(0,166,81,.10); }
.cal-cell { min-height: 108px; padding: 6px; border-right: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 4px; }
.cal__row .cal-cell:nth-child(7n) { border-right: 0; }
.dark .cal-cell { border-color: rgba(255,255,255,.06); }
.cal-cell--fora { background: rgba(100,116,139,.05); }
.cal-cell--fora .cal-cell__num { color: #b6c2cc; }
.cal-cell--fds { background: rgba(100,116,139,.04); }
.cal-cell--hoje { background: rgba(0,166,81,.08); box-shadow: inset 0 0 0 2px #00a651; }
.cal-cell__top { display: flex; align-items: center; justify-content: space-between; }
.cal-cell__num { font-size: 12.5px; font-weight: 800; color: #334155; }
.dark .cal-cell__num { color: #cbd5e1; }
.cal-cell--hoje .cal-cell__num { color: #00713a; }
.cal-cell__qtd { font-size: 10px; font-weight: 800; color: #fff; background: #94a3b8; border-radius: 999px; padding: 0 6px; min-width: 16px; text-align: center; }
.cal-cell__events { display: flex; flex-direction: column; gap: 3px; max-height: 148px; overflow-y: auto; }
.cal-ev-form { margin: 0; display: block; }
/* Evento = pílula clicável (conclui a preventiva) */
.cal-ev { display: flex; align-items: center; gap: 5px; width: 100%; text-align: left; cursor: pointer;
  padding: 3px 7px; border-radius: 7px; border: 0; border-left: 4px solid var(--evc, #94a3b8);
  background: var(--evb, rgba(148,163,184,.14)); color: #14532d; font-size: 11.5px; font-weight: 700; }
.cal-ev:hover { filter: brightness(.97); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.dark .cal-ev { color: #e6efe9; }
.cal-ev__ico { font-size: 14px; opacity: .8; flex: 0 0 auto; }
.cal-ev__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev--pendente { --evc: #e0533f; --evb: rgba(224,83,63,.14); }
.cal-ev--vencida  { --evc: #ea580c; --evb: rgba(234,88,12,.14); }
.cal-ev--proxima  { --evc: #ef8f3c; --evb: rgba(239,143,60,.16); }
.cal-ev--em_dia   { --evc: #00a651; --evb: rgba(0,166,81,.14); }
@media (max-width: 767px) {
  .cal-nav__mes { min-width: 120px; font-size: 15px; }
  .cal-cell { min-height: 92px; }
}
.cal-cell--click { cursor: pointer; }
.cal-cell--click:hover { background: rgba(0,166,81,.10); }
.cal-cell--click:focus-visible { outline: 2px solid #00a651; outline-offset: -2px; }

/* ===== Preventiva: modal concluir + overlay do dia (carrossel de telas) ===== */
body.pv-lock { overflow: hidden; }
/* Overlay do dia */
.pvday { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-end; justify-content: center; }
.pvday__backdrop { position: absolute; inset: 0; background: rgba(8,15,11,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pvday__panel { position: relative; z-index: 1; width: 100%; max-width: 1100px; max-height: 82vh; display: flex; flex-direction: column;
  background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: 18px 18px 0 0; box-shadow: var(--g-elev-h);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 14px 16px 18px; }
.dark .pvday__panel { background: rgba(24,32,26,.92); border-color: rgba(255,255,255,.12); }
@media (min-width: 768px) { .pvday { align-items: center; } .pvday__panel { border-radius: 18px; } }
.pvday__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pvday__tit { font-size: 17px; font-weight: 800; color: #14532d; margin: 0; }
.dark .pvday__tit { color: #e6efe9; }
.pvday__x, .pvdlg__x { width: 34px; height: 34px; border: 0; background: transparent; font-size: 24px; line-height: 1; color: #64748b; cursor: pointer; border-radius: 9px; }
.pvday__x:hover, .pvdlg__x:hover { background: rgba(0,0,0,.06); color: #14532d; }
.pvday__hint { font-size: 12px; color: #64748b; margin-bottom: 10px; }
.dark .pvday__hint { color: #9aa6ae; }
/* Carrossel + setas de deslizar */
.pvday__carwrap { display: flex; align-items: stretch; gap: 8px; }
.pvday__arrow { flex: 0 0 auto; align-self: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid #cfe0d6; background: #fff; color: #14532d; font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; }
.pvday__arrow:hover { border-color: #00a651; background: rgba(0,166,81,.08); }
.dark .pvday__arrow { background: rgba(15,22,17,.6); color: #e6efe9; border-color: rgba(255,255,255,.14); }
.pvcar { flex: 1; min-width: 0; display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x proximity; cursor: grab; }
.pvcar.is-drag { cursor: grabbing; user-select: none; }
.pvcar::-webkit-scrollbar { height: 10px; }
.pvcar::-webkit-scrollbar-track { background: rgba(0,0,0,.05); border-radius: 999px; }
.pvcar::-webkit-scrollbar-thumb { background: rgba(0,166,81,.45); border-radius: 999px; }
.pvcar::-webkit-scrollbar-thumb:hover { background: rgba(0,166,81,.65); }
/* Cada slot = card do mapa (.baia) + botão concluir */
.pv-slot { scroll-snap-align: start; flex: 0 0 190px; display: flex; flex-direction: column; gap: 10px; }
.pv-slot .baia { width: 100%; }
.pv-slot .pvscreen__ok { width: 100%; }
@media (max-width: 767px) { .pvday__arrow { display: none; } .pv-slot { flex-basis: 168px; } }
/* "Tela / monitor" de cada máquina */
.pvscreen { scroll-snap-align: start; flex: 0 0 260px; display: flex; flex-direction: column; gap: 10px; }
.pvscreen__bezel { background: #1f2937; border-radius: 14px; padding: 10px; box-shadow: 0 10px 26px -14px rgba(0,0,0,.55); }
.pvscreen__scr { position: relative; min-height: 150px; border-radius: 8px; padding: 12px; overflow: hidden;
  background: #0b1220; color: #e6efe9; border: 1px solid rgba(255,255,255,.08); }
.pvscreen__scr--pendente { box-shadow: inset 0 0 0 2px rgba(224,83,63,.6); }
.pvscreen__scr--vencida  { box-shadow: inset 0 0 0 2px rgba(234,88,12,.6); }
.pvscreen__scr--proxima  { box-shadow: inset 0 0 0 2px rgba(239,143,60,.6); }
.pvscreen__scr--em_dia   { box-shadow: inset 0 0 0 2px rgba(0,166,81,.6); }
.pvscreen__top { display: flex; align-items: center; justify-content: space-between; color: #9fb0c3; }
.pvscreen__top .material-symbols-outlined { font-size: 26px; }
.pvscreen__score { font-weight: 800; font-size: 13px; padding: 2px 9px; border-radius: 999px; background: #94a3b8; color: #0b1220; }
.pvscreen__score--critico { background: #e0533f; color: #fff; } .pvscreen__score--baixo { background: #ef8f3c; }
.pvscreen__score--bom { background: #8fb82e; color: #14231a; } .pvscreen__score--otimo { background: #00a651; color: #fff; }
.pvscreen__nome { font-weight: 800; font-size: 15px; margin-top: 8px; }
.pvscreen__local { font-size: 12px; color: #9fb0c3; margin-top: 2px; }
.pvscreen__pat { font-size: 12px; color: #cdd8e5; margin-top: 6px; font-family: monospace; }
.pvscreen__spec { font-size: 11.5px; color: #9fb0c3; margin-top: 6px; }
.pvscreen__badges { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pvscreen__badge { font-size: 11px; font-weight: 800; color: #fff; padding: 2px 9px; border-radius: 999px; }
.pvscreen__dias { font-size: 11px; color: #cdd8e5; }
.pvscreen__ok { border: 0; border-radius: 10px; padding: 9px 12px; font-weight: 800; cursor: pointer;
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18; }

/* Boas-vindas + desempenho do usuário (topo da aba Tarefas) */
.pv-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin: 8px 0 22px;
  background: linear-gradient(135deg, rgba(0,166,81,.10), rgba(123,198,45,.06));
  border: 1px solid var(--g-edge); border-radius: 16px; box-shadow: var(--g-elev); padding: 20px; }
.dark .pv-hero { background: linear-gradient(135deg, rgba(0,166,81,.14), rgba(22,30,24,.5)); border-color: rgba(255,255,255,.08); }
.pv-hero__ola { font-size: 22px; font-weight: 800; color: #14532d; margin: 0 0 4px; }
.dark .pv-hero__ola { color: #c6f4d9; }
.pv-hero__sub { font-size: 13.5px; color: #475569; margin: 0 0 14px; line-height: 1.5; }
.dark .pv-hero__sub { color: #cbd5e1; }
.pv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pv-kpi { background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: 12px;
  padding: 12px 10px; text-align: center; }
.dark .pv-kpi { background: rgba(22,30,24,.55); border-color: rgba(255,255,255,.08); }
.pv-kpi--destaque { border-color: #00a651; box-shadow: 0 0 0 2px rgba(0,166,81,.18); }
.pv-kpi__num { display: block; font-size: 24px; font-weight: 800; color: #00a651; line-height: 1.1; }
.dark .pv-kpi__num { color: #34d980; }
.pv-kpi__lbl { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.dark .pv-kpi__lbl { color: #9aa6ae; }
.pv-hero__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px;
  font-size: 13px; font-weight: 700; color: #00a651; text-decoration: none; }
.pv-hero__link:hover { text-decoration: underline; }
.pv-hero__link .material-symbols-outlined { font-size: 18px; }
.pv-hero__chart { display: flex; flex-direction: column; }
.pv-hero__chart-lbl { font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 6px; }
.dark .pv-hero__chart-lbl { color: #9aa6ae; }
.pv-chartbox { position: relative; flex: 1; min-height: 180px; }
.pv-sec-titulo { font-size: 16px; font-weight: 800; color: #14532d; margin: 4px 0 14px; }
.dark .pv-sec-titulo { color: #c6f4d9; }
@media (max-width: 720px) {
  .pv-hero { grid-template-columns: 1fr; }
  .pv-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Painel de TAREFAS de saúde (aba Tarefas da preventiva) */
.tf-sec { margin: 0 0 22px; }
.tf-sec__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; }
.tf-sec__tit { font-size: 16px; font-weight: 800; color: #14532d; margin: 0; }
.dark .tf-sec__tit { color: #c6f4d9; }
.tf-sec__qtd { display: inline-block; min-width: 22px; text-align: center; font-size: 12px; font-weight: 800;
  color: #fff; background: #64748b; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.tf-sec__ajuda { font-size: 12.5px; color: #64748b; }
.dark .tf-sec__ajuda { color: #9aa6ae; }
.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tf-card { background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: 14px; box-shadow: var(--g-elev);
  padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.dark .tf-card { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.tf-card__top { display: flex; align-items: center; gap: 10px; }
.tf-card__ico { font-size: 26px; color: #00a651; }
.dark .tf-card__ico { color: #34d980; }
.tf-card__nome { font-weight: 800; font-size: 14px; color: #1e293b; }
.dark .tf-card__nome { color: #e2e8f0; }
.tf-card__sub { font-size: 12px; color: #64748b; }
.dark .tf-card__sub { color: #9aa6ae; }
.tf-card__metrica { font-size: 13px; font-weight: 700; color: #334155; background: rgba(0,0,0,.04);
  border-radius: 8px; padding: 6px 10px; }
.dark .tf-card__metrica { color: #cbd5e1; background: rgba(255,255,255,.06); }
.tf-card__resp { font-size: 12px; color: #64748b; }
.dark .tf-card__resp { color: #9aa6ae; }
.tf-card__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.tf-btn { border: 0; border-radius: 9px; padding: 7px 12px; font-size: 12.5px; font-weight: 800;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.tf-btn--ok { background: linear-gradient(135deg, var(--intelbras-verde, #00a651), var(--make-lima, #7bc62d)); color: #0b2e18; }
.tf-btn--ghost { background: transparent; border: 1px solid var(--g-edge); color: #475569; }
.dark .tf-btn--ghost { color: #cbd5e1; }
.tf-btn--link { background: rgba(0,166,81,.12); color: #14532d; }
.dark .tf-btn--link { background: rgba(52,217,128,.16); color: #c6f4d9; }
.tf-btn:hover { filter: brightness(1.04); }
.tf-vazio { font-size: 13px; color: #64748b; margin: 0; padding: 10px 0; }
.dark .tf-vazio { color: #9aa6ae; }

/* Ranking de preventivas (pódio + tabelas) */
.rk-tit { font-size: 17px; font-weight: 800; color: #14532d; margin: 8px 0 12px; }
.dark .rk-tit { color: #c6f4d9; }
.rk-subtit { font-size: 14px; font-weight: 800; color: #334155; margin: 0 0 8px; }
.dark .rk-subtit { color: #cbd5e1; }
.rk-podio { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 0 0 22px; }
.rk-podio__col { flex: 1 1 160px; min-width: 150px; background: var(--g-glass); border: 1px solid var(--g-edge);
  border-radius: 14px; box-shadow: var(--g-elev); padding: 16px 12px; text-align: center; }
.dark .rk-podio__col { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.rk-podio__col--1 { order: 2; border-color: #f5c518; box-shadow: 0 0 0 2px rgba(245,197,24,.35), var(--g-elev); }
.rk-podio__col--2 { order: 1; }
.rk-podio__col--3 { order: 3; }
.rk-podio__medal { font-size: 34px; }
.rk-podio__nome { font-weight: 800; font-size: 15px; color: #1e293b; margin-top: 4px; }
.dark .rk-podio__nome { color: #e2e8f0; }
.rk-podio__uni { font-size: 12px; color: #64748b; }
.dark .rk-podio__uni { color: #9aa6ae; }
.rk-podio__pts { font-size: 20px; font-weight: 800; color: #00a651; margin-top: 6px; }
.dark .rk-podio__pts { color: #34d980; }
.rk-podio__n { font-size: 11px; color: #64748b; }
.dark .rk-podio__n { color: #9aa6ae; }
.rk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.rk-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rk-tab th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #64748b; border-bottom: 2px solid var(--g-edge); padding: 6px 8px; }
.rk-tab td { padding: 7px 8px; border-bottom: 1px solid rgba(0,0,0,.06); color: #334155; }
.dark .rk-tab td { color: #cbd5e1; border-bottom-color: rgba(255,255,255,.06); }
.rk-tab__num { text-align: right; }
.rk-tab__pos { font-weight: 800; color: #64748b; width: 32px; }
.rk-tab__uni { color: #64748b; }
.rk-tab__top td { background: rgba(0,166,81,.06); }
.dark .rk-tab__top td { background: rgba(52,217,128,.08); }

/* Orçamentos (tela custom de aprovação) */
.orc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.orc-card { background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: 14px;
  box-shadow: var(--g-elev); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dark .orc-card { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.orc-card--pendente { border-left: 4px solid #ef8f3c; }
.orc-card--aprovado { border-left: 4px solid #00a651; }
.orc-card--negado { border-left: 4px solid #e0533f; }
.orc-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.orc-card__badge { font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 999px; color: #fff; }
.orc-badge--pendente { background: #ef8f3c; }
.orc-badge--aprovado { background: #00a651; }
.orc-badge--negado { background: #e0533f; }
.orc-card__valor { font-size: 18px; font-weight: 800; color: #14532d; }
.dark .orc-card__valor { color: #c6f4d9; }
.orc-card__titulo { font-size: 15px; font-weight: 800; color: #1e293b; margin: 0; line-height: 1.35; }
.dark .orc-card__titulo { color: #e2e8f0; }
.orc-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: #64748b; }
.dark .orc-card__meta { color: #9aa6ae; }
.orc-card__decisao { font-size: 12.5px; font-weight: 700; color: #166534; background: rgba(0,166,81,.08);
  border-radius: 8px; padding: 6px 10px; }
.dark .orc-card__decisao { color: #9be8bd; background: rgba(52,217,128,.10); }
.orc-card__decisao--no { color: #b71c1c; background: rgba(224,83,63,.08); }
.dark .orc-card__decisao--no { color: #ffb4ab; background: rgba(224,83,63,.14); }
.orc-card__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.orc-ver__linha { font-size: 13.5px; margin: 6px 0 2px; }
.orc-ver__desc { font-size: 13px; color: #475569; white-space: pre-wrap; margin: 0 0 8px; }
.dark .orc-ver__desc { color: #cbd5e1; }

/* Grupos de manutenção */
.grp-novo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grp-novo input[type=text], .grp-novo select { flex: 1 1 220px; padding: 9px 12px; border: 1px solid var(--g-edge);
  border-radius: 9px; font-size: 14px; background: transparent; color: inherit; }
.grp-novo__uni { font-size: 13px; color: #64748b; }
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.grp-card { display: block; text-decoration: none; background: var(--g-glass); border: 1px solid var(--g-edge);
  border-radius: 14px; box-shadow: var(--g-elev); padding: 16px; color: inherit; transition: transform .1s; }
.dark .grp-card { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.grp-card:hover { transform: translateY(-2px); }
.grp-card__nome { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; color: #1e293b; }
.dark .grp-card__nome { color: #e2e8f0; }
.grp-card__uni { font-size: 12px; color: #64748b; margin-top: 2px; }
.grp-card__total { font-size: 13px; font-weight: 700; color: #00a651; margin-top: 8px; }
.dark .grp-card__total { color: #34d980; }
.grp-acoes-topo { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.grp-row__acoes { display: flex; gap: 6px; white-space: nowrap; }
.grp-cand { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; }
.grp-cand__item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 8px; border-radius: 7px; }
.grp-cand__item:hover { background: rgba(0,0,0,.04); }
.dark .grp-cand__item:hover { background: rgba(255,255,255,.05); }

/* Modal concluir preventiva */
.pvdlg { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pvdlg__backdrop { position: absolute; inset: 0; background: rgba(8,15,11,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pvdlg__card { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: 16px; box-shadow: var(--g-elev-h);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 16px 18px; }
.dark .pvdlg__card { background: rgba(24,32,26,.94); border-color: rgba(255,255,255,.12); }
.pvdlg__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.pvdlg__ico { color: #00a651; font-size: 26px; display: inline-flex; }
.pvdlg__ico svg { width: 26px; height: 26px; }
.pvdlg__ok svg, .pvdlg__cancel svg { width: 15px; height: 15px; vertical-align: -2px; }
.pvdlg__ok { display: inline-flex; align-items: center; gap: 6px; }
.pvdlg__headtxt { flex: 1; min-width: 0; }
.pvdlg__tit { font-size: 17px; font-weight: 800; color: #14532d; margin: 0; }
.dark .pvdlg__tit { color: #e6efe9; }
.pvdlg__sub { font-size: 13px; color: #64748b; margin: 2px 0 0; }
.pvdlg__lbl { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #64748b; margin: 4px 0 8px; }
.pvchk { display: grid; gap: 6px; margin-bottom: 14px; }
.pvchk__item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #14532d; cursor: pointer; }
.dark .pvchk__item { color: #e6efe9; }
.pvchk__item input { accent-color: #00a651; width: 17px; height: 17px; flex: 0 0 auto; }
.pvdlg__ta { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid #cfe0d6; padding: 9px 11px;
  font: inherit; resize: vertical; color: #14532d; background: #fff; }
.pvdlg__ta:focus-visible { outline: none; border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.18); }
.dark .pvdlg__ta { background: rgba(15,22,17,.6); color: #e6efe9; border-color: rgba(255,255,255,.14); }
.pvdlg__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.pvdlg__cancel { background: transparent; border: 1px solid #cfe0d6; color: #475569; border-radius: 9px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.dark .pvdlg__cancel { color: #cbd5e1; border-color: rgba(255,255,255,.16); }
.pvdlg__ok { background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18; border: 0; border-radius: 9px; padding: 9px 18px; font-weight: 800; cursor: pointer; }

/* Tabela de preventiva */
.pvtab-wrap { overflow-x: auto; background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: var(--g-radius); box-shadow: var(--g-elev); }
.dark .pvtab-wrap { background: rgba(22,30,24,.5); border-color: rgba(255,255,255,.08); }
.pvtab { width: 100%; border-collapse: collapse; min-width: 860px; }
.pvtab thead th { text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #14532d; background: rgba(0,166,81,.06); padding: 11px 14px; border-bottom: 2px solid #cfe9db; white-space: nowrap; }
.dark .pvtab thead th { color: #cbd5e1; background: rgba(0,166,81,.10); border-bottom-color: rgba(255,255,255,.10); }
.pvtab td { padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13.5px; color: #334155; vertical-align: middle; }
.dark .pvtab td { color: #cbd5e1; border-bottom-color: rgba(255,255,255,.06); }
.pvtab tbody tr:hover { background: rgba(0,166,81,.05); }
.pvtab--num { text-align: center; }
.pvtab__ico .material-symbols-outlined { font-size: 20px; color: #64748b; }
.pvtab__maq { font-weight: 700; color: #14532d; }
.dark .pvtab__maq { color: #e6efe9; }
.pvtab__spec { display: block; font-size: 11px; font-weight: 500; color: #94a3b8; }
.pvtab__score { font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #94a3b8; color: #fff; font-size: 12px; }
.pvtab__score--critico { background: #e0533f; } .pvtab__score--baixo { background: #ef8f3c; }
.pvtab__score--bom { background: #8fb82e; } .pvtab__score--otimo { background: #00a651; }
.pvtab__badge { font-size: 11px; font-weight: 800; color: #fff; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pvtab__ok { border: 0; border-radius: 8px; padding: 7px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18; }
.pvtab__vazio { text-align: center; padding: 28px; color: #64748b; }
/* Card VERMELHO quando devolutiva negativa (sem conserto). */
.kanban-card--sem-conserto { border-left-color: #e0533f !important; background: #fef2f2 !important; }
.kanban-card--sem-conserto .kanban-card__titulo { color: #b3261e; }
.dark .kanban-card--sem-conserto { background: rgba(224,83,63,.12) !important; }
.kanban-tag--erro { background: #fcdcd9; color: #b3261e; }
.dark .kanban-tag--erro { background: rgba(224,83,63,.2); color: #ffb4ab; }

/* Badge de status no detalhe do envio */
.chd-badge { display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: #eef3fd; color: #1e40af; }
.chd-badge--em_analise { background: #fdf4e3; color: #b45309; }
.chd-badge--aguardando { background: #f3ecfe; color: #6d28d9; }
.chd-badge--em_reparo  { background: #e6f6fd; color: #0369a1; }
.chd-badge--retornando, .chd-badge--finalizado { background: #e8f6ee; color: #15803d; }
.chd-badge--erro { background: #fcdcd9 !important; color: #b3261e !important; }

/* Trilha de etapas + ações da máquina de estados + anexos */
.aut-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 18px; }
.aut-step { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: #eef2f6; color: #94a3b8; border: 1px solid #e2e8f0; }
.aut-step.is-done { background: #e8f6ee; color: #15803d; border-color: #c6ecd6; }
.aut-step.is-now { background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)); color: #0b2e18; border-color: transparent; }
.dark .aut-step { background: #1b241d; color: #64748b; border-color: #2c352e; }
.dark .aut-step.is-done { background: rgba(0,166,81,.16); color: #86efac; border-color: transparent; }
.aut-acao { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px dashed #e2e8f0; }
.aut-acao:first-of-type { border-top: 0; }
.dark .aut-acao { border-top-color: #2c352e; }
.aut-anexos { display: flex; flex-direction: column; gap: 6px; }
.aut-anexo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0c7a3e; text-decoration: none; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(0,166,81,.3); background: rgba(0,166,81,.05); }
.aut-anexo:hover { background: rgba(0,166,81,.12); }
.aut-nf { display: flex; align-items: center; gap: 6px; }
.aut-nf .aut-anexo { flex: 1; min-width: 0; }
.aut-nf .aut-anexo, .aut-nf__x { }
.aut-nf__del { margin: 0; }
.aut-nf__x { border: 0; background: rgba(0,0,0,.06); color: #475569; width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1; flex: none; }
.aut-nf__x:hover { background: #fcdcd9; color: #b3261e; }
.dark .aut-nf__x { background: rgba(255,255,255,.08); color: #cbd5e1; }

/* Tira de autorizadas cadastradas (editar) no quadro */
.aut-cadastros { margin: 0 0 16px; }
.aut-cadastros__toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.aut-cadastros__toggle .material-symbols-outlined { font-size: 17px; }
.aut-cadastros__lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.aut-cadastros__lbl { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.aut-cadastro { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #0c7a3e; text-decoration: none; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(0,166,81,.3); background: rgba(0,166,81,.05); }
.aut-cadastro:hover { background: rgba(0,166,81,.12); }
.aut-cadastro .material-symbols-outlined { font-size: 15px; }
.dark .aut-cadastros__lbl { color: #94a3b8; }
.dark .aut-cadastro { color: #86efac; border-color: rgba(134,239,172,.35); background: rgba(0,166,81,.1); }

/* Dropzone (upload arrastar/soltar, vários arquivos) */
.dz { display: flex; flex-direction: column; gap: 8px; }
.dz-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%;
  padding: 18px; border: 2px dashed rgba(0,166,81,.4); border-radius: 12px;
  background: rgba(0,166,81,.04); color: #0c7a3e; font-weight: 600; font-size: 13px;
  cursor: pointer; text-align: center; transition: background .15s, border-color .15s;
}
.dz-drop .material-symbols-outlined { font-size: 26px; }
.dz-drop small { color: #64748b; font-weight: 500; }
.dz-drop:hover, .dz.is-over .dz-drop { background: rgba(0,166,81,.1); border-color: #00a651; }
.dz--compact .dz-drop { padding: 12px; }
.dz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dz-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #eef7f1; border: 1px solid #d6e8de; font-size: 13px; font-weight: 600; color: #14532d; }
.dz-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; text-decoration: underline dotted transparent; }
.dz-item__name:hover { text-decoration-color: currentColor; }
/* Lightbox de pré-visualização do documento anexado */
.dz-preview { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; background: rgba(6,12,9,.72); padding: 20px; }
.dz-preview.is-open { display: flex; }
.dz-preview__box { background: #fff; border-radius: 14px; overflow: hidden; width: min(920px, 96vw); max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.dark .dz-preview__box { background: #141a16; }
.dz-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e6efe9; }
.dark .dz-preview__bar { border-bottom-color: #26302a; }
.dz-preview__cap { font-size: 13px; font-weight: 700; color: #14532d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .dz-preview__cap { color: #c6f4d9; }
.dz-preview__x { border: 0; background: rgba(0,0,0,.06); color: #475569; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; flex: none; }
.dz-preview__x:hover { background: #fcdcd9; color: #b3261e; }
.dark .dz-preview__x { background: rgba(255,255,255,.08); color: #cbd5e1; }
.dz-preview__body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #f1f5f3; overflow: auto; }
.dark .dz-preview__body { background: #0d1310; }
.dz-preview__body img { max-width: 100%; max-height: 86vh; display: block; }
.dz-preview__body iframe { width: 100%; height: 86vh; border: 0; }
.dz-preview__body a { margin: 30px; }
.dz-item__x { border: 0; background: rgba(0,0,0,.06); color: #475569; width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; flex: none; }
.dz-item__x:hover { background: #fcdcd9; color: #b3261e; }
.dark .dz-drop { background: rgba(0,166,81,.1); border-color: rgba(134,239,172,.4); color: #86efac; }
.dark .dz-drop small { color: #94a3b8; }
.dark .dz-item { background: #171e19; border-color: #2c352e; color: #d7e3da; }
.dark .dz-item__x { background: rgba(255,255,255,.08); color: #cbd5e1; }
.dark .aut-anexo { color: #86efac; border-color: rgba(134,239,172,.35); background: rgba(0,166,81,.1); }
.chd-btn--neg { background: #fcdcd9 !important; color: #b3261e !important; }
.chd-hint { font-size: 13px; color: #64748b; margin: 0 0 8px; }
.dark .chd-hint { color: #94a3b8; }
/* Cabeçalho e colunas do detalhe do envio */
.chd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.chd-head .chamado__crumb { flex-basis: 100%; }
.chd-titulo { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 800; color: #14532d; margin: 0; }
.dark .chd-titulo { color: #c6f4d9; }
.chd-titulo .material-symbols-outlined { color: var(--intelbras-verde); }
.chd-main, .chd-side { display: flex; flex-direction: column; gap: 16px; }
.chd-ok { font-size: 14px; font-weight: 700; color: #15803d; }

/* ================== Abrir chamado (tela custom estilo tarefa) ================== */
.chamado-wrap { max-width: 1120px; margin: 0 auto; }
.chamado { display: grid; grid-template-columns: 1fr 330px; gap: 20px; margin-top: 14px; align-items: start; }
.chamado__main, .chamado__side-card {
  background: #fff; border: 1px solid #eceff1; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 22px rgba(0,0,0,.07);
}
.dark .chamado__main, .dark .chamado__side-card { background: #161b16; border-color: #2a322b; }
.chamado__main { padding: 24px 26px; }
.chamado__head { border-bottom: 1px solid #eef2f0; padding-bottom: 16px; margin-bottom: 18px; }
.dark .chamado__head { border-color: #243027; }
.chamado__crumb { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.chamado__titulo-maq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 2px; font-size: 22px; font-weight: 800; color: #14532d; }
.dark .chamado__titulo-maq { color: #c6f4d9; }
.chamado__titulo-maq .material-symbols-outlined { font-size: 26px; color: #00a651; }
.chamado__pat { font: 700 12px monospace; background: #eef7f1; color: #00a651; border-radius: 999px; padding: 3px 10px; }
.dark .chamado__pat { background: rgba(0,166,81,.18); color: #7fdca6; }
.chamado__sub { margin: 0; font-size: 13px; color: #6b7280; }
.dark .chamado__sub { color: #9aa0a6; }
.chamado__campo { display: block; margin-bottom: 16px; }
.chamado__label { display: block; font-size: 12.5px; font-weight: 700; color: #374151; margin-bottom: 6px; }
.dark .chamado__label { color: #d7e3da; }
.chamado__campo input, .chamado__campo textarea,
.chamado__meta-row select, .chamado__meta-row input, .chamado__meta-row textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid #d7dee5; border-radius: 11px;
  font-size: 14px; background: #fff; color: #1f2937; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chamado__meta-row textarea { resize: vertical; }
.chamado__meta-row textarea:focus { outline: none; border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.18); }
.chamado__campo--titulo input { font-size: 16px; font-weight: 700; }
.chamado__campo input:focus, .chamado__campo textarea:focus,
.chamado__meta-row select:focus, .chamado__meta-row input:focus {
  outline: none; border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.18);
}
.dark .chamado__campo input, .dark .chamado__campo textarea,
.dark .chamado__meta-row select, .dark .chamado__meta-row input { background: #0f140f; border-color: #2a322b; color: #e5e7eb; }
.chamado__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 4px 0 4px; }
.chamado__meta-row { display: block; }
.chamado__check { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: #374151; margin-top: 2px; }
.dark .chamado__check { color: #d7e3da; }
.chamado__check input { width: 16px; height: 16px; accent-color: #00a651; }
.chamado__meta-row--full { grid-column: 1 / -1; }
.chamado__hint { font-weight: 500; color: #94a3b8; font-size: 12px; }
/* Peças por CHIPS (várias) — abrir chamado + modal avançado do detalhe.
   Mesmo estilo do sistema: chip retangular; selecionado = degradê verde→lima. */
.peca-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.peca-chip { position: relative; display: inline-flex; cursor: pointer; }
.peca-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.peca-chip__txt {
  display: inline-block; padding: 7px 14px; border-radius: 8px;
  border: 1px solid #d6e2da; background: #fff; color: #14532d;
  font-size: 13px; font-weight: 700; line-height: 1; user-select: none;
}
.peca-chip:hover .peca-chip__txt { background: rgba(0,166,81,.10); }
.peca-chip input:checked + .peca-chip__txt {
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima));
  border-color: transparent; color: #0b2e18; box-shadow: 0 2px 8px -2px rgba(0,166,81,.5);
}
.peca-chip input:focus-visible + .peca-chip__txt { box-shadow: 0 0 0 3px rgba(0,166,81,.35); }
.dark .peca-chip__txt { background: #171e19; border-color: #2c352e; color: #d7e3da; }
.dark .peca-chip:hover .peca-chip__txt { background: rgba(0,166,81,.16); }
.dark .peca-chip input:checked + .peca-chip__txt { color: #0b2e18; border-color: transparent; }
.chamado__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0; }
.chamado__tags .chamado__label { margin: 0 4px 0 0; }
.chamado__tag { font-size: 12px; font-weight: 700; background: #eef2f6; color: #475569; border-radius: 999px; padding: 4px 12px; }
.dark .chamado__tag { background: #1e2a22; color: #c6f4d9; }
.chamado__tag--critico { background: #fcdcd9; color: #b3261e; }
.chamado__tag--baixo { background: #fef3c7; color: #b45309; }
.chamado__tag--bom { background: #dcfce7; color: #15803d; }
.chamado__tag--otimo { background: #c6f0d8; color: #00a651; }
.chamado__acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.chamado__acoes .mov-btn { display: inline-flex; align-items: center; gap: 6px; }
.chamado__acoes .mov-btn .material-symbols-outlined { font-size: 18px; }
/* painel lateral (máquina) */
.chamado__side { display: flex; flex-direction: column; gap: 16px; }
.chamado__side-card { padding: 18px 20px; }
.chamado__side-titulo { margin: 0 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #14532d; }
.dark .chamado__side-titulo { color: #c6f4d9; }
.chamado__score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: #eef7f1; }
.chamado__score-num { font-size: 26px; font-weight: 800; color: #00a651; }
.chamado__score-cls { font-size: 12px; font-weight: 700; color: #51766a; }
.chamado__score--critico { background: #fcdcd9; } .chamado__score--critico .chamado__score-num { color: #b3261e; }
.chamado__score--baixo { background: #fef3c7; } .chamado__score--baixo .chamado__score-num { color: #b45309; }
.dark .chamado__score { background: #11201a; }
.chamado__specs { list-style: none; margin: 0; padding: 0; }
.chamado__specs li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f5f3; font-size: 13px; }
.dark .chamado__specs li { border-color: #1f2a22; }
.chamado__specs li:last-child { border-bottom: 0; }
.chamado__specs b { color: #6b7280; font-weight: 700; }
.chamado__specs span { color: #1f2937; font-weight: 600; text-align: right; }
.dark .chamado__specs b { color: #9aa0a6; } .dark .chamado__specs span { color: #e5e7eb; }
.chamado__diag { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chamado__diag-item { border-left: 4px solid #cbd5e1; padding: 4px 0 4px 12px; }
.chamado__diag-item b { display: block; font-size: 12.5px; font-weight: 800; color: #1f2937; }
.chamado__diag-item span { font-size: 12px; color: #6b7280; }
.dark .chamado__diag-item b { color: #e5e7eb; } .dark .chamado__diag-item span { color: #9aa0a6; }
.chamado__diag-item--alto { border-left-color: #e0533f; }
.chamado__diag-item--medio { border-left-color: #ef8f3c; }
.chamado__diag-item--baixo { border-left-color: #ef8f3c; }
@media (max-width: 900px) { .chamado { grid-template-columns: 1fr; } .chamado__meta { grid-template-columns: 1fr; } }

/* ============ Polimento GLOBAL do admin (todas as telas ainda em admin) ============ */
/* Escopo: body.change-list / body.change-form — só telas do admin (não pega as custom). */
/* ---- Listagens (changelist): data-table Material elegante ---- */
/* Cabeçalho: tonal verde, maiúsculas, leve. */
body.change-list #result_list thead th,
body.change-list #result_list thead th a {
  color: #14532d !important; text-transform: uppercase; letter-spacing: .045em;
  font-size: 11px !important; font-weight: 800 !important;
}
body.change-list #result_list thead th {
  background: linear-gradient(180deg, #f3faf6, #e8f4ed) !important; border-bottom: 2px solid #cfe9db !important;
  padding: 14px 16px !important; vertical-align: middle;
}
.dark body.change-list #result_list thead th,
.dark body.change-list #result_list thead th a { color: #c6f4d9 !important; }
.dark body.change-list #result_list thead th { background: linear-gradient(180deg, rgba(20,36,29,.95), rgba(15,26,21,.92)) !important; border-bottom-color: #2b5340 !important; }
/* O #result_list agora vive dentro de um .tab-wrap (override change_list_results.html) —
   MESMO painel de vidro das tabelas custom. Aqui só deixamos tudo por dentro TRANSPARENTE
   (o vidro do .tab-wrap aparece) e alinhamos células/zebra/hover EXATAMENTE ao .tab-tabela. */
/* Ocupa a largura TODA: as colunas se distribuem pelo espaço (igual à .tab-tabela),
   em vez de ficarem agrupadas à esquerda com vazio à direita. */
body.change-list #result_list { width: 100% !important; }
body.change-list #result_list,
body.change-list #result_list tbody,
body.change-list #result_list tbody tr,
body.change-list #result_list td,
body.change-list #result_list tbody th { background: transparent !important; }
/* Zebra idêntica ao .tab-tabela (cada linha é um <tbody> próprio no unfold). */
body.change-list #result_list tbody:nth-of-type(even) td { background: rgba(0,166,81,.035) !important; }
.dark body.change-list #result_list tbody:nth-of-type(even) td { background: rgba(255,255,255,.022) !important; }
/* Células: MESMO respiro/borda do .tab-tabela (td 11px 16px, borda #eef2f6). */
body.change-list #result_list tbody td,
body.change-list #result_list tbody th {
  padding: 11px 16px !important; vertical-align: middle !important;
  border-bottom: 1px solid #eef2f6 !important; font-size: 13.5px; color: #0f172a;
}
.dark body.change-list #result_list tbody td,
.dark body.change-list #result_list tbody th { border-bottom-color: #232c25 !important; color: #d7e3da; }
/* Links das linhas em verde Make. */
body.change-list #result_list tbody a { color: #14532d; font-weight: 600; text-decoration: none; }
body.change-list #result_list tbody a:hover { color: #00a651; }
.dark body.change-list #result_list tbody a { color: #d7e3da; }
/* Hover idêntico ao .tab-tabela: linha #f0f9f3 + filete verde à esquerda. */
body.change-list #result_list tbody tr.data-row { transition: background .1s ease, box-shadow .1s ease; }
body.change-list #result_list tbody tr.data-row:hover td { background: #f0f9f3 !important; }
body.change-list #result_list tbody tr.data-row:hover td:first-child { box-shadow: inset 3px 0 0 #00a651; }
.dark body.change-list #result_list tbody tr.data-row:hover td { background: rgba(0,166,81,.12) !important; }
/* Busca: campo "outlined" Material com foco verde. */
body.change-list #changelist-search > div { border-radius: 12px !important; transition: border-color .15s ease, box-shadow .15s ease; }
body.change-list #changelist-search > div:focus-within { border-color: #00a651 !important; box-shadow: 0 0 0 3px rgba(0,166,81,.16) !important; }
body.change-list #searchbar { border: 0 !important; box-shadow: none !important; outline: none !important; }
/* Filtros + contador. */
body.change-list #changelist-filter { border-radius: 14px !important; overflow: hidden; }
body.change-list .paginator { padding-top: 14px !important; font-weight: 600; color: #6b7280; }

/* FIM do "vários fundos": o #changelist tem classe .module (ganharia o painel de
   vidro do #main .module) e a barra de ferramentas tem lg:border — isso fazia
   painel-dentro-de-painel com o .tab-wrap da tabela. Aqui esses dois viram
   TRANSPARENTES; o ÚNICO painel da changelist é a própria tabela (.tab-wrap)
   e o box de filtros (#changelist-filter). 2 ids batem o "#main .module". */
body.change-list #main #changelist.module,
body.change-list #changelist > div:has(#toolbar),
body.change-list #changelist > form,
body.change-list #changelist .changelist-form-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
/* O unfold puxa o #changelist com -mx-4 (margem negativa) → a tabela cola no menu.
   Zeramos essa margem: a changelist passa a respeitar o mesmo recuo do #content
   que as telas custom (.mapa) usam — igual respiro dos dois lados. */
body.change-list #main #changelist.module { margin-left: 0 !important; margin-right: 0 !important; }

/* ---- Formulários (changeform): fieldset = card de VIDRO ESPELHADO ---- */
body.change-form .module { margin-bottom: 18px; overflow: hidden; }
/* Regra ÚNICA vencedora do card (bate o #main .module): vidro + brilho empilhado no fundo. */
body.change-form #main .module {
  background: var(--g-gloss), var(--g-glass) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-elev) !important;
}
.dark body.change-form #main .module {
  background:
    linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%),
    linear-gradient(158deg, rgba(26,34,28,.55), rgba(18,24,20,.5)) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -16px rgba(0,0,0,.6) !important;
}
body.change-form .module > h2,
body.change-form .module > .collapse-handler {
  background: #f2faf5 !important; color: #14532d !important;
  font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em;
  border-left: 4px solid #00a651; padding: 12px 16px !important;
}
.dark body.change-form .module > h2,
.dark body.change-form .module > .collapse-handler { background: #11201a !important; color: #c6f4d9 !important; }
/* Descrição do fieldset / textos de ajuda: contraste legível sobre o vidro. */
body.change-form #main .module .text-subtle { color: #475569 !important; }
.dark body.change-form #main .module .text-subtle { color: #b7c4bc !important; }
/* ---- Campos do formulário: input/select/textarea + o BOTÃO "⋮" ----
   O "⋮" é ancorado por [x-ref^="relatedWidgetWrapper"] (o botão REAL, que existe
   tanto no select simples quanto no autocomplete — onde ele fica aninhado). Assim
   ele recebe o MESMO fundo dos campos e some o cinza-claro/caixa-dupla. Foco: L59-68. */
body.change-form #content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
body.change-form #content select,
body.change-form #content textarea,
body.change-form #content [x-ref^="relatedWidgetWrapper"] {
  background: #ffffff !important;
  border: 1px solid #cfe0d6 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.dark body.change-form #content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.dark body.change-form #content select,
.dark body.change-form #content textarea,
.dark body.change-form #content [x-ref^="relatedWidgetWrapper"] {
  background: #171e19 !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #e5efe8 !important;
}
/* Todos os wrappers internos do widget (menos o próprio botão) = SEM caixa. */
body.change-form #content .related-widget-wrapper > div:not([x-ref]),
body.change-form #content .related-widget-wrapper > div:not([x-ref]) > div:not([x-ref]) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
/* Largura: o widget ocupa a mesma largura dos campos; select preenche, "⋮" na ponta. */
body.change-form #content .related-widget-wrapper {
  max-width: 42rem !important; width: 100% !important; align-items: center !important;
}
body.change-form #content .related-widget-wrapper > div.grow { max-width: none !important; }
body.change-form #content .related-widget-wrapper > div.grow .max-w-2xl,
body.change-form #content .related-widget-wrapper select { max-width: none !important; }
/* "⋮" real: mesma altura do campo, largura fixa, ícone centralizado. */
body.change-form #content [x-ref^="relatedWidgetWrapper"] {
  height: 38px !important; width: 40px !important; margin-left: 8px !important; flex: 0 0 40px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
/* IMPORTANTE: a lista de opções do <select> é desenhada pelo SO e herda a cor do select.
   Forçar cor/fundo legíveis nas <option> (senão o texto some, como no bug reportado). */
body.change-form #content select option { background: #ffffff !important; color: #111827 !important; }
.dark body.change-form #content select option { background: #1b2620 !important; color: #e9f2ec !important; }

/* ===== Protótipo aprovado: form contido + campos em 2 colunas ============
   Contém a largura (acaba com os campos esticados no monitor largo) e coloca
   os campos de cada seção numa grade de 2 colunas (label ACIMA do campo).
   Campos largos (textarea, upload, tabelas) ocupam a linha inteira. */
@media (min-width: 1180px) {
  body.change-form #main .module,
  body.change-form #main #submit-row,
  body.change-form #main .submit-row {
    max-width: 1120px; width: 100% !important; margin-left: auto !important; margin-right: auto !important;
  }
}
@media (min-width: 1024px) {
  /* grade de 2 colunas dentro de cada fieldset */
  body.change-form .module .form-rows.aligned { display: grid !important; grid-template-columns: 1fr 1fr; align-items: start; }
  body.change-form .module .form-rows.aligned { column-gap: 22px; }
  body.change-form .module .form-rows.aligned > .form-row { border-bottom: 1px solid var(--g-edge) !important; min-width: 0; }
  /* campos que precisam de largura total ocupam a linha inteira */
  body.change-form .module .form-rows.aligned > .form-row:has(textarea),
  body.change-form .module .form-rows.aligned > .form-row:has(input[type="file"]),
  body.change-form .module .form-rows.aligned > .form-row:has(table),
  body.change-form .module .form-rows.aligned > .form-row.field-full { grid-column: 1 / -1; }
  /* label ACIMA do campo (igual ao protótipo), em vez de label lateral fixa */
  body.change-form .module .form-rows.aligned .field-line { flex-direction: column !important; align-items: stretch !important; }
  body.change-form .module .form-rows.aligned .field-line { border-left: 0 !important; }
  body.change-form .module .form-rows.aligned .field-line > div:first-child {
    width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    line-height: 1.3 !important; margin-bottom: 4px !important;
  }
}
/* Barra Salvar = vidro espelhado (continua sticky no rodapé — comportamento do unfold). */
#submit-row > div {
  background: var(--g-gloss), var(--g-glass) !important;
  border-top: 1px solid var(--g-edge) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--g-elev-h) !important;
}
.dark #submit-row > div {
  background:
    linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%),
    linear-gradient(158deg, rgba(26,34,28,.72), rgba(18,24,20,.66)) !important;
  border-top-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset, 0 -14px 34px -16px rgba(0,0,0,.6) !important;
}

/* ============ Abrir chamado / Reparo: form do admin com cara de tarefa ============ */
/* (Card + cabeçalho verde herdam do bloco changeform acima — vidro espelhado.) */
/* Máquina TRAVADA: o campo desabilitado vira um "chip" claro (não um select triste). */
body.model-reparo select[name="baia"][disabled],
body.model-reparo .field-baia [disabled] {
  background: #eef7f1 !important; color: #14532d !important;
  border: 1px solid #cfe6da !important; border-radius: 10px !important;
  font-weight: 700 !important; opacity: 1 !important; cursor: not-allowed !important;
}
.dark body.model-reparo select[name="baia"][disabled],
.dark body.model-reparo .field-baia [disabled] {
  background: #11201a !important; color: #c6f4d9 !important; border-color: #244234 !important;
}
/* Rótulos das linhas mais "label de tarefa". */
body.model-reparo .form-row label { font-weight: 700; color: #374151; }
.dark body.model-reparo .form-row label { color: #d7e3da; }

/* =========================================================================
   TEMA MAKE — VIDRO (glassmorphism) no SISTEMA INTEIRO.
   Traduz a tela de login: superfícies de vidro fosco flutuando sobre um fundo
   com atmosfera (brilho quente + verde da marca + doodles), com brilho no topo,
   sombra em camadas e a varredura de luz quente. SEM contorno preto.
   Escopo: #main pega admin + telas custom (todas estendem admin/base_site).
   ========================================================================= */
:root {
  --g-radius: 18px;
  --g-glass: linear-gradient(158deg, rgba(255,255,255,.72), rgba(255,255,255,.50));
  --g-panel: rgba(255,255,255,.46);
  --g-edge: rgba(255,255,255,.85);
  --g-gloss: linear-gradient(122deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.15) 16%, transparent 40%);
  --g-elev: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px -16px rgba(13,50,32,.42), 0 3px 10px rgba(13,50,32,.07);
  --g-elev-h: 0 1px 0 rgba(255,255,255,.95) inset, 0 22px 46px -18px rgba(13,50,32,.5), 0 5px 14px rgba(13,50,32,.10);
  --g-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%2300a651' stroke-opacity='0.05' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cg transform='translate(14,16) rotate(-5)'%3E%3Crect x='3' y='10' width='34' height='26' rx='2'/%3E%3Cline x1='3' y1='18' x2='37' y2='18'/%3E%3Cline x1='20' y1='18' x2='20' y2='36'/%3E%3Cpath d='M14 10 l6 8 6 -8'/%3E%3C/g%3E%3Cg transform='translate(120,24) rotate(7)'%3E%3Cpath d='M4 16 L20 4 H34 V18 L18 34 Z'/%3E%3Ccircle cx='27' cy='12' r='2.5'/%3E%3C/g%3E%3Cg transform='translate(18,120) rotate(4)'%3E%3Cpath d='M2 12 H24 V30 H2 Z'/%3E%3Cpath d='M24 18 H32 L36 24 V30 H24 Z'/%3E%3Ccircle cx='9' cy='32' r='3.5'/%3E%3Ccircle cx='30' cy='32' r='3.5'/%3E%3C/g%3E%3Cg transform='translate(120,120) rotate(-6)'%3E%3Crect x='6' y='6' width='28' height='34' rx='3'/%3E%3Crect x='14' y='3' width='12' height='6' rx='2'/%3E%3Cpath d='M11 23 h18 M11 30 h12'/%3E%3Cpath d='M10 16 l3 3 5 -6'/%3E%3C/g%3E%3Cg transform='translate(92,74) rotate(10)'%3E%3Cpath d='M4 6 V30 M8 6 V30 M12 6 V30 M17 6 V30 M21 6 V30 M26 6 V30 M30 6 V30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Fundo: atmosfera do login (brilho quente + verde da marca + doodles), sem a foto. */
/* Atmosfera no APP INTEIRO: no #page (cobre menu + conteúdo) — some o branco atrás
   do menu flutuante. #main e a coluna do menu ficam transparentes. */
#page {
  background-color: #e6f1ea !important;
  background-image:
    var(--g-doodle),
    radial-gradient(120% 90% at 88% -12%, #eef8e4 0%, transparent 46%),
    radial-gradient(90% 80% at -8% 108%, #c7e6d4 0%, transparent 54%),
    linear-gradient(158deg, #e6f2ea, #cee3d7) !important;
  background-size: 250px 250px, cover, cover, cover !important;
}
body #main { background: transparent !important; }
div:has(> #nav-sidebar), div:has(> div > #nav-sidebar) { background: transparent !important; }
/* Doodle do #main duplicava com o da dashboard — mantemos só o do #page. */
.make-dash-bg { display: none !important; }
.dark #page {
  background-color: #0a0d0b !important;
  background-image:
    var(--g-doodle),
    radial-gradient(90% 70% at 85% -10%, rgba(0,200,100,.10) 0%, transparent 50%),
    radial-gradient(80% 65% at -6% 106%, rgba(0,150,75,.08) 0%, transparent 55%),
    linear-gradient(160deg, #0d1310 0%, #080b09 100%) !important;
  background-size: 300px 300px, cover, cover, cover !important;
}
.dark body #main { background: transparent !important; }

/* PAINÉIS/CONTÊINERES (seções do dashboard, fieldsets, listas, filtros): folha de
   vidro fosco mais leve — segura o conteúdo sem competir com os cards. */
.make-card, .make-score,
#main .module, #main .results, #main #changelist-filter,
.chamado__main, .chamado__side-card,
body.delete-confirmation #content > div:last-child {
  background: var(--g-panel) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 30px -18px rgba(13,50,32,.4) !important;
  overflow: hidden;
}
/* ESPELHADO também nos painéis de conteúdo (.make-card/.make-score do dashboard e
   da Início) — mesmo gloss dos KPIs, com o conteúdo por cima do brilho. */
.make-card, .make-score { position: relative; }
.make-card::before, .make-score::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: var(--g-gloss);
}
.make-card > *, .make-score > * { position: relative; z-index: 1; }

/* CARDS DE CONTEÚDO (KPIs, lojas, estoque, chamados): VIDRO FOSCO flutuante —
   degradê translúcido + desfoque + brilho no topo + sombra em camadas. */
.make-kpi, .make-loja, .estoque-card, .kanban-card {
  position: relative; overflow: hidden;
  background: var(--g-glass) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-elev) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.make-kpi::before, .make-loja::before, .estoque-card::before, .kanban-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: var(--g-gloss);
}
.make-kpi > *, .make-loja > *, .estoque-card > *, .kanban-card > * { position: relative; z-index: 1; }
.make-kpi--link:hover, .make-kpi:hover, .make-loja:hover,
.estoque-card:hover, .kanban-card:hover {
  box-shadow: var(--g-elev-h) !important; transform: translateY(-3px);
}
/* KPI/painel de ALERTA: mantém a cue vermelha na borda. */
.make-kpi--alerta { border-color: rgba(179,38,30,.35) !important; }
.make-card--alerta { border-color: rgba(179,38,30,.3) !important; }
/* Chamados: cor de status vira filete à esquerda (inset), preservando o vidro. */
.kanban-card--abertos { box-shadow: inset 4px 0 0 #3b6fe0, var(--g-elev) !important; }
.kanban-card--cotacao { box-shadow: inset 4px 0 0 #ef8f3c, var(--g-elev) !important; }
.kanban-card--manutencao { box-shadow: inset 4px 0 0 #ea580c, var(--g-elev) !important; }
.kanban-card--finalizados { box-shadow: inset 4px 0 0 #00a651, var(--g-elev) !important; }

/* Modo escuro: vidro escuro, brilho de topo sutil. */
.dark .make-card, .dark .make-score,
.dark .make-kpi, .dark .make-loja, .dark .estoque-card, .dark .kanban-card,
.dark #main .module, .dark #main .results, .dark #main #changelist-filter,
.dark .chamado__main, .dark .chamado__side-card,
.dark body.delete-confirmation #content > div:last-child {
  background: rgba(22,30,24,.44) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -16px rgba(0,0,0,.6) !important;
}
.dark .make-card::before, .dark .make-score::before,
.dark .make-kpi::before, .dark .make-loja::before,
.dark .estoque-card::before, .dark .kanban-card::before {
  background: linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%);
}

/* Tipografia Material: títulos com leve tracking Make. */
body #content h1, .make-dash-titulo { letter-spacing: -.2px; }

/* ===== CHROME (sidebar, topo, busca, navegação) — o MESMO vidro ===== */
#nav-sidebar {
  top: 12px !important; left: 0 !important; bottom: 12px !important;   /* encostado à esquerda: NÃO invade o conteúdo */
  max-height: calc(100vh - 24px) !important;
  background:
    linear-gradient(157deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 9%, transparent 20%),
    linear-gradient(180deg, rgba(247,251,248,.9), rgba(236,245,239,.8)) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.75) !important; border-left: 0 !important;
  border-radius: 0 20px 20px 0 !important;   /* arredonda só o lado direito (o visível) */
  box-shadow: 14px 0 40px -26px rgba(13,50,32,.4) !important;
}
/* Interior transparente e na altura do card (o bg quadrado tapava os cantos);
   sem overflow:hidden no menu pra não cortar o dropdown do usuário. */
#nav-sidebar-inner { background: transparent !important; height: 100% !important; min-height: 0 !important; }
.dark #nav-sidebar {
  background:
    linear-gradient(157deg, rgba(255,255,255,.10) 0%, transparent 18%),
    linear-gradient(180deg, rgba(16,22,17,.78), rgba(11,16,12,.72)) !important;
  border-color: rgba(255,255,255,.08) !important;
}
/* Logo Make: painel verde com borda SUAVE (verde quase igual ao logo) + efeito espelhado. */
.make-sidebar-logo {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #0b5230 0%, #0a7a41 60%, #12995322 100%), #0a7a41 !important;
  border: 1px solid rgba(255,255,255,.14) !important; border-radius: 16px !important;
}
/* Reflexo espelhado de vidro sobre o painel do logo — bem suave, sem "estourar". */
.make-sidebar-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 24%, transparent 48%);
}
/* Varredura de luz SUAVE cruzando o painel do logo (reativada, bem mais discreta
   que a original — brilho .28 em vez de .55 — pra não cansar a vista). */
.make-sidebar-logo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.28) 50%, transparent 64%);
  opacity: 0; animation: login-sheen 7s ease 1.5s infinite;
}
@media (prefers-reduced-motion: reduce) { .make-sidebar-logo::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { .make-sidebar-logo::before { animation: none; } }
.make-sidebar-logo img { position: relative; z-index: 1; }
/* Busca lateral: campo de vidro arredondado. */
div:has(> #nav-filter) {
  border: 1px solid rgba(255,255,255,.8) !important; border-radius: 13px !important;
  background: rgba(255,255,255,.72) !important; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
div:has(> #nav-filter):focus-within {
  border-color: rgba(0,166,81,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,166,81,.16) !important;
}
div:has(> #nav-filter) .material-symbols-outlined { color: var(--intelbras-verde) !important; }
#nav-filter { border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; }
.dark div:has(> #nav-filter) { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; }
/* Resultados da busca: mesmo vidro/estilo do sistema (Figtree herdada; hover verde). */
#search-results > div {
  background: var(--g-glass) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--g-edge) !important; border-radius: 14px !important;
  box-shadow: var(--g-elev-h) !important;
}
.dark #search-results > div {
  background: rgba(22,30,24,.92) !important; border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -18px rgba(0,0,0,.7) !important;
}
#search-results a { border-radius: 10px !important; font-weight: 600 !important; color: #2b4034 !important; }
.dark #search-results a { color: #cdd8d0 !important; }
#search-results a:hover { background: rgba(0,166,81,.10) !important; color: var(--intelbras-verde-escuro) !important; }
.dark #search-results a:hover { background: rgba(0,166,81,.16) !important; color: #d7f0e2 !important; }
/* Item de navegação ATIVO: pílula verde + filete lima. */
#nav-sidebar a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(0,166,81,.20), rgba(203,245,66,.14)) !important; border-radius: 11px !important;
  box-shadow: inset 4px 0 0 var(--make-lima), 0 8px 20px -10px rgba(0,166,81,.55) !important; font-weight: 800;
}
#nav-sidebar a[aria-current="page"] .material-symbols-outlined {
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)) !important;
  color: #0b2e18 !important; box-shadow: 0 3px 10px -3px rgba(0,166,81,.6) !important;
}
.dark #nav-sidebar a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(0,166,81,.30), rgba(203,245,66,.12)) !important;
}
/* Header do topo: barra de vidro + varredura de luz quente (a mesma do login). */
/* Conteúdo ocupa a largura toda (sem o "container" centralizado) → alinha com o header. */
#main .container { max-width: none !important; }
.make-header {
  margin: 12px 16px !important;   /* recuo lateral 16px = mesmo recuo do conteúdo → tudo alinhado */
  background: var(--g-glass) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.75) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-elev) !important;
  position: relative; overflow: visible;   /* NÃO cortar (o popup de notificações abre pra fora) */
}
/* Altura confortável do header (nem grande demais, nem apertada). */
.make-header .h-16 { height: 58px !important; }
/* Sino de notificação: de volta ao header (posição original). */
/* Título fica na posição NATURAL (esquerda, ao lado do toggle) — espaçamento normal do topo. */
/* A duplicata no conteúdo continua escondida → o título aparece UMA vez só (no header). */
.mapa__titulo, .make-dash-titulo, .aprov__titulo, .ajuda__titulo { display: none !important; }

/* Notificação FIXA de aprovar/negar (no sino). */
.make-notif-fixa { background: rgba(0,166,81,.06); }
.dark .make-notif-fixa { background: rgba(0,166,81,.10); }
/* Botão "×" de excluir uma notificação (aparece à direita da linha). */
.make-notif-row { position: relative; }
.make-notif-row .make-notif-item { padding-right: 40px; }
.make-notif-del {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: #94a3b8;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0; z-index: 1;
}
.make-notif-del:hover { background: rgba(224,83,63,.12); color: #e0533f; }
.dark .make-notif-del:hover { background: rgba(224,83,63,.18); color: #fca5a5; }
/* Dark: as utils claras do Tailwind (bg-primary-50 / hover:bg-base-50) estavam vencendo
   as variantes dark: — texto ficava ilegível. Força o fundo escuro correto. */
.dark .make-notif-item { background: transparent !important; }
.dark .make-notif-item.is-unread { background: rgba(0,166,81,.12) !important; }
.dark .make-notif-item:hover { background: rgba(255,255,255,.07) !important; }
.make-notif-ok, .make-notif-no {
  flex: 1; text-align: center; padding: 7px 10px; border-radius: 9px;
  font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.make-notif-ok { background: #00a651; color: #fff; }
.make-notif-ok:hover { background: #00913f; }
.make-notif-no { background: #fee2e2; color: #b91c1c; }
.make-notif-no:hover { background: #fecaca; }
.dark .make-notif-no { background: rgba(185,28,28,.2); color: #fca5a5; }

/* Cards do Estoque (hub): borda na COR DO ACENTO, igual ao ícone/texto do card. */
.estoque-card { border: 1.5px solid var(--ac) !important; }
.estoque-card:hover { border-color: var(--ac) !important; }

/* MAPAS (notebooks + PCs) no tema de vidro — painéis de setor e cards translúcidos. */
.mapa-setor {
  background: var(--g-panel) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -18px rgba(13,50,32,.35) !important;
}
.dark .mapa-setor { background: rgba(22,30,24,.44) !important; border-color: rgba(255,255,255,.07) !important; }
.nb-card {
  background: var(--g-glass) !important;
  border: 1px solid var(--g-edge) !important;
  border-left: 4px solid var(--cor) !important;   /* mantém a cor de status/classe */
  box-shadow: var(--g-elev) !important;
}
.dark .nb-card {
  background: rgba(22,30,24,.55) !important;
  border-color: rgba(255,255,255,.08) !important; border-left-color: var(--cor) !important;
}
/* (O "+" do mapa de notebooks usa as MESMAS classes do computador: .baia .baia--add,
   .baia--add__mais — então herda exatamente o mesmo estilo. Sem CSS próprio.) */
/* Brilho ESTÁTICO no topo (sem animação). border-radius próprio p/ respeitar os cantos sem overflow:hidden. */
.make-header::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(122deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 18%, transparent 42%);
}
.make-header > * { position: relative; z-index: 1; }
.make-header h1, .make-header .text-important { letter-spacing: -.2px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .make-header::after { animation: none; } }
/* Dark: header em vidro ESCURO (estava claro no modo escuro, sumindo com o título). */
.dark .make-header {
  background: rgba(22,30,24,.72) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 34px -18px rgba(0,0,0,.6) !important;
}
.dark .make-header::after { background: linear-gradient(122deg, rgba(255,255,255,.08) 0%, transparent 42%); }

/* --- Sidebar: blocos "flutuando" (sem divisórias duras), como no comp --- */
/* Cabeçalho do logo: tira a linha divisória e a altura fixa, dá respiro. */
#nav-sidebar-inner > div:first-child {
  border-bottom: 0 !important; height: auto !important;
  padding: 16px 12px 8px !important; margin-bottom: 18px !important;
}
/* Respiro entre a marca e o chip do usuário (a logo não fica espremida). */
#nav-sidebar-inner > div:nth-child(2) { margin-top: 4px !important; }
.make-sidebar-logo { box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 20px -14px rgba(0,166,81,.4) !important; }
/* Chip do usuário: vira um card de vidro flutuante (sem a linha de cima). */
#nav-sidebar-inner > div:nth-child(2) { border-top: 0 !important; padding: 4px 12px 8px !important; }
#nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer {
  margin: 0 !important; min-height: 0 !important; padding: 10px 12px !important;
  border-radius: 13px !important; background: var(--g-glass) !important;
  border: 1px solid var(--g-edge) !important; box-shadow: var(--g-elev) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
#nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer:hover {
  border-color: color-mix(in srgb, var(--intelbras-verde) 45%, var(--g-edge)) !important;
  box-shadow: var(--g-elev-h) !important;
}
.dark #nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer {
  background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 24px -16px rgba(0,0,0,.5) !important;
}
.dark #nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer:hover {
  border-color: rgba(0,166,81,.4) !important;
}
/* Avatar do usuário: quadrado arredondado com vidro verde tintado + inicial destacada. */
#nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer > div:first-child {
  background: linear-gradient(135deg, rgba(0,166,81,.30), rgba(203,245,66,.16)) !important;
  color: var(--intelbras-verde-escuro) !important; font-weight: 800 !important;
  border-radius: 11px !important;
  box-shadow: inset 0 0 0 1px rgba(0,166,81,.35), 0 4px 12px -4px rgba(0,166,81,.5) !important;
}
.dark #nav-sidebar-inner > div:nth-child(2) > div.cursor-pointer > div:first-child {
  background: linear-gradient(135deg, rgba(0,166,81,.38), rgba(203,245,66,.12)) !important;
  color: #eaffd6 !important;
}
/* Itens do menu: cantos arredondados + hover suave. */
#nav-sidebar-inner a:not(.make-sidebar-logo) { border-radius: 11px !important; }
#nav-sidebar-inner a:not(.make-sidebar-logo):hover { background: rgba(0,166,81,.10) !important; }

/* KPIs: rótulo sem hifenização feia ("COMPUTADO-RES"). */
.make-kpi__rotulo { hyphens: none !important; overflow-wrap: normal !important; word-break: normal !important; }

/* --- MENU do sistema (app_list gerado pelo unfold) no estilo do comp --- */
/* Rótulo de grupo (INÍCIO, PARQUE DE MÁQUINAS…): caption Material, maiúsculo. */
#nav-sidebar-apps h2 {
  text-transform: uppercase !important; font-size: 10.5px !important; font-weight: 800 !important;
  letter-spacing: .12em !important; color: #5c7568 !important; margin: 10px 14px 2px !important; padding: 0 !important;
}
#nav-sidebar-apps h2::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 2px;
  background: var(--make-lima); margin-right: 8px; vertical-align: middle;
}
.dark #nav-sidebar-apps h2 { color: #8aa596 !important; }
/* Itens: pílulas arredondadas, ícone verde, respiro. */
#nav-sidebar-apps ol { padding-left: 10px !important; padding-right: 10px !important; gap: 1px !important; }
#nav-sidebar-apps ol li a {
  margin: 0 !important; height: auto !important; padding: 7px 10px !important;
  border-radius: 9px !important; font-size: 13px; font-weight: 600; color: #33473b !important;
}
#nav-sidebar-apps ol li a:hover { background: rgba(0,166,81,.10) !important; color: var(--intelbras-verde-escuro) !important; }
.dark #nav-sidebar-apps ol li a:hover { background: rgba(0,166,81,.14) !important; }
/* Ícone em CHIP circular tintado (igual aos cards do Estoque). */
#nav-sidebar-apps ol li a .material-symbols-outlined {
  color: #6b8478 !important; margin-right: 10px !important;
  width: 22px !important; height: 22px !important; border-radius: 7px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 20px !important; flex: 0 0 auto !important;
  background: transparent !important;
  transition: color .15s ease, background .15s ease;
}
.dark #nav-sidebar-apps ol li a .material-symbols-outlined { color: #7f9689 !important; background: transparent !important; }
#nav-sidebar-apps ol li a:hover .material-symbols-outlined { color: var(--intelbras-verde) !important; background: transparent !important; }
/* Item ATIVO (o unfold usa a classe .active, não aria-current): pílula verde + filete lima. */
#nav-sidebar-apps ol li a.active {
  background: rgba(0,166,81,.12) !important;
  color: var(--make-verde-escuro) !important; font-weight: 800 !important;
  box-shadow: inset 3px 0 0 var(--intelbras-verde) !important;
}
#nav-sidebar-apps ol li a.active .material-symbols-outlined { color: var(--intelbras-verde) !important; }
.dark #nav-sidebar-apps ol li a.active { background: rgba(0,166,81,.18) !important; color: #d7f7c9 !important; }
.dark #nav-sidebar-apps ol li a.active .material-symbols-outlined { color: #6ee7a0 !important; }
/* Chip do ícone no item ATIVO: gradiente verde→lima + brilho. */
#nav-sidebar-apps ol li a.active .material-symbols-outlined {
  background: linear-gradient(135deg, var(--intelbras-verde), var(--make-lima)) !important;
  color: #0b2e18 !important; box-shadow: 0 3px 10px -3px rgba(0,166,81,.6) !important;
}
.dark #nav-sidebar-apps ol li a { color: #cdd8d0 !important; }
.dark #nav-sidebar-apps ol li a.active {
  background: linear-gradient(90deg, rgba(0,166,81,.30), rgba(203,245,66,.12)) !important; color: #eaffd6 !important;
}
/* Separadores duros entre grupos viram respiro (o comp não tem linhas). */
#nav-sidebar-apps hr { border: 0 !important; margin: 6px 0 0 !important; }

/* --- Unidades / Setores: entram no MESMO vidro do tema (estavam chapados) --- */
.set-grupo {
  background: var(--g-panel) !important;
  border: 1px solid rgba(255,255,255,.7) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 30px -18px rgba(13,50,32,.4) !important;
}
.set-card {
  position: relative; overflow: hidden;
  background: var(--g-glass) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: 14px !important;
  box-shadow: var(--g-elev) !important;
}
.set-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: var(--g-gloss);
}
.set-card > * { position: relative; z-index: 1; }
.dark .set-grupo {
  background: rgba(22,30,24,.55) !important; border-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 30px -18px rgba(0,0,0,.5) !important;
}
.dark .set-card {
  background: rgba(22,30,24,.66) !important; border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -16px rgba(0,0,0,.6) !important;
}
.dark .set-card::before { background: linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%); }

/* ============================================================
   DASHBOARD / INÍCIO — "DARK PREMIUM" (Linear/Vercel + marca Make)
   Escopo: body.make-dashboard (não afeta estoque/kanban/outras telas).
   ============================================================ */
body.make-dashboard .make-dash-inner {
  max-width: 1200px; margin: 0 auto; padding: 6px 2px 48px;
  display: flex; flex-direction: column; gap: 22px;
}

/* --- Cabeçalho de boas-vindas (hero) --- */
.make-hero { padding: 6px 4px 0; }
.make-hero__eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 800;
  color: var(--intelbras-verde);
}
.dark .make-hero__eyebrow { color: #4ade80; }
.make-hero__title {
  font-size: clamp(22px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.6px;
  margin: 4px 0 6px; color: #0f172a;
}
.dark .make-hero__title { color: #f1f5f9; }
.make-hero__sub { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #64748b; }
.dark .make-hero__sub { color: #94a3b8; }
.make-hero__sub span { position: relative; }
.make-hero__sub span + span::before { content: "·"; position: absolute; left: -11px; opacity: .5; }
.make-hero__alerta { color: #e0533f !important; font-weight: 700; }
.make-hero__warn { color: #d97706 !important; font-weight: 700; }
.dark .make-hero__warn { color: #ef8f3c !important; }

/* --- KPIs: grade fluida + cartão "hero" --- */
body.make-dashboard .make-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px;
}
body.make-dashboard .make-kpi {
  display: flex; align-items: center; gap: 14px;
  padding: 18px !important; border-radius: 18px !important;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, border-color .18s ease;
}
body.make-dashboard .make-kpi::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, #00a651, #cbf542); opacity: .85;
}
body.make-dashboard .make-kpi--alerta::after { background: linear-gradient(90deg, #e0533f, #ef8f3c); }
body.make-dashboard .make-kpi__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-size: 24px !important;
  background: rgba(0,166,81,.12); color: #00a651; padding: 0;
}
.dark body.make-dashboard .make-kpi__icon { background: rgba(0,166,81,.18); color: #4ade80; }
body.make-dashboard .make-kpi--alerta .make-kpi__icon { background: rgba(224,83,63,.12); color: #e0533f; }
.dark body.make-dashboard .make-kpi--alerta .make-kpi__icon { background: rgba(224,83,63,.2); color: #fca5a5; }
body.make-dashboard .make-kpi__valor {
  font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; color: #0f172a;
}
.dark body.make-dashboard .make-kpi__valor { color: #f8fafc; }
body.make-dashboard .make-kpi__rotulo {
  margin-top: 5px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: #64748b;
}
.dark body.make-dashboard .make-kpi__rotulo { color: #94a3b8; }
body.make-dashboard .make-kpi--link { cursor: pointer; }
body.make-dashboard .make-kpi--link:hover {
  transform: translateY(-3px); border-color: rgba(0,166,81,.4) !important;
  box-shadow: var(--g-elev-h), 0 0 0 1px rgba(203,245,66,.25), 0 18px 40px -20px rgba(0,166,81,.45) !important;
}
.dark body.make-dashboard .make-kpi--link:hover {
  border-color: rgba(74,222,128,.35) !important;
  box-shadow: 0 16px 38px -18px rgba(0,0,0,.75), 0 0 26px -6px rgba(0,166,81,.4) !important;
}

/* --- Mapa das lojas: tiles consistentes --- */
body.make-dashboard .make-lojas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
body.make-dashboard .make-loja {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 16px 12px !important; border-radius: 16px !important;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, border-color .18s ease;
}
body.make-dashboard .make-loja__icon {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  font-size: 22px !important; background: rgba(0,166,81,.12); color: #00a651;
}
.dark body.make-dashboard .make-loja__icon { background: rgba(0,166,81,.18); color: #4ade80; }
body.make-dashboard .make-loja__nome { font-weight: 700; font-size: 14px; }
body.make-dashboard .make-loja__baias {
  font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 9999px;
  background: rgba(0,166,81,.14); color: #0a5e30;
}
.dark body.make-dashboard .make-loja__baias { background: rgba(0,166,81,.2); color: #86efac; }
body.make-dashboard .make-loja:hover {
  transform: translateY(-3px); border-color: rgba(0,166,81,.4) !important;
  box-shadow: var(--g-elev-h), 0 0 0 1px rgba(203,245,66,.22) !important;
}

body.make-dashboard .make-card__title { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }

/* --- Entrada suave (fade-up) escalonada — só opacity/transform (GPU) --- */
@media (prefers-reduced-motion: no-preference) {
  body.make-dashboard .make-hero,
  body.make-dashboard .make-kpi,
  body.make-dashboard .make-card { animation: dashIn .5s cubic-bezier(.2,.7,.2,1) both; }
  body.make-dashboard .make-kpi:nth-child(1) { animation-delay: .04s; }
  body.make-dashboard .make-kpi:nth-child(2) { animation-delay: .08s; }
  body.make-dashboard .make-kpi:nth-child(3) { animation-delay: .12s; }
  body.make-dashboard .make-kpi:nth-child(4) { animation-delay: .16s; }
  body.make-dashboard .make-kpi:nth-child(5) { animation-delay: .20s; }
  body.make-dashboard .make-kpi:nth-child(6) { animation-delay: .24s; }
  body.make-dashboard .make-kpi:nth-child(7) { animation-delay: .28s; }
  body.make-dashboard .make-kpi:nth-child(8) { animation-delay: .32s; }
}
@keyframes dashIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Responsivo (celular) --- */
@media (max-width: 560px) {
  body.make-dashboard .make-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.make-dashboard .make-kpi { padding: 14px !important; gap: 10px; }
  body.make-dashboard .make-kpi__icon { width: 40px; height: 40px; font-size: 20px !important; }
  body.make-dashboard .make-kpi__valor { font-size: 23px; }
  body.make-dashboard .make-dash-inner { gap: 16px; }
}

/* --- Mapa: hero + toolbar de vidro (mesma família da Início) --- */
.make-hero--mapa { margin-bottom: 10px; }
.mapa > .mapa__toolbar {
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.6);
  border-radius: 10px; padding: 10px 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -18px rgba(13,50,32,.35);
}
.dark .mapa > .mapa__toolbar {
  background: rgba(22,30,24,.44); border-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -16px rgba(0,0,0,.6);
}
/* Toolbar + filtro = UM painel só (colados, sem gap) — vale p/ mapa (.mapa__filtro)
   E p/ as tabelas (.tab-chips), replicando o mesmo menu. */
.mapa > .mapa__toolbar:has(+ .mapa__filtro),
.mapa > .mapa__toolbar:has(+ .tab-chips),
.mapa > .mapa__toolbar:has(+ .kanban-filtro) {
  border-radius: 10px 10px 0 0; border-bottom: 0; margin-bottom: 0;
}
/* Legenda sai da toolbar (mapa e tabelas) — as cores ficam dentro do "?" (modal de ajuda). */
.mapa > .mapa__toolbar .mapa__legenda { display: none; }

/* --- Painel de controle unificado do mapa completo -----------------------------
   Linha 1 (toolbar): voltar à esquerda + toggle Mapa/Tabela à direita (sem espaço morto).
   Linha 2 (.mapa__ctl, colada): filtros à esquerda + busca ocupando o resto da largura.
   Vira UM card de vidro só, no lugar de 3 tiras soltas. Não mexe no mapa em si. */
.mapa > .mapa__toolbar .mapa__view { margin-left: auto; }
.mapa > .mapa__toolbar:has(+ .mapa__ctl) {
  border-radius: 10px 10px 0 0; border-bottom: 0; margin-bottom: 0;
}
.mapa__ctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.6);
  border-top: 1px solid rgba(0,0,0,.06); border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 24px -18px rgba(13,50,32,.35);
}
.dark .mapa__ctl {
  background: rgba(22,30,24,.44); border-color: rgba(255,255,255,.08);
  border-top-color: rgba(255,255,255,.06);
}
/* Filtros dentro do painel: sem card próprio (o card agora é o .mapa__ctl). */
.mapa__ctl > .flt-bar {
  flex: 0 0 auto; margin: 0; padding: 0;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
/* Busca ocupa o espaço restante, na mesma linha dos filtros. */
.mapa__ctl .mapa__busca { flex: 1 1 300px; max-width: none; margin: 0; }
.mapa__ctl .mapa__busca-vazio { flex: 1 0 100%; margin: 6px 0 0; }
/* Botão "Novo" (tabelas) dentro do painel de controle: não estica, fica na direita. */
.mapa__ctl > .tab-novo { flex: 0 0 auto; }
/* Botão "Exportar" (secundário, vidro) ao lado do "Novo". */
.tab-export {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; font-size: 14px; font-weight: 700; border-radius: 10px;
  text-decoration: none; white-space: nowrap;
  color: #14532d; background: var(--g-gloss), var(--g-glass);
  border: 1px solid var(--g-edge); box-shadow: var(--g-elev);
  transition: box-shadow .15s ease, transform .1s ease;
}
.tab-export:hover { box-shadow: var(--g-elev-h); transform: translateY(-1px); }
.tab-export .material-symbols-outlined { font-size: 18px; }
/* botão "Protocolo avulso" na tela de Peças — mesmo estilo de vidro do Exportar */
.tab-proto {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; font-size: 14px; font-weight: 700; border-radius: 10px;
  text-decoration: none; white-space: nowrap;
  color: #14532d; background: var(--g-gloss), var(--g-glass);
  border: 1px solid var(--g-edge); box-shadow: var(--g-elev);
  transition: box-shadow .15s ease, transform .1s ease;
}
.tab-proto:hover { box-shadow: var(--g-elev-h); transform: translateY(-1px); }
.tab-proto .material-symbols-outlined { font-size: 18px; color: #00a651; }
.dark .tab-proto { color: #d7f0e2; border-color: rgba(255,255,255,.1); }
.dark .tab-export {
  color: #d7f0e2; border-color: rgba(255,255,255,.1);
  background:
    linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%),
    linear-gradient(158deg, rgba(26,34,28,.6), rgba(18,24,20,.55));
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px -16px rgba(0,0,0,.5);
}
@media (max-width: 720px) {
  /* Em telas estreitas os filtros e a busca empilham (busca em linha própria). */
  .mapa__ctl .mapa__busca { flex: 1 0 100%; }
}

/* --- Tabelas (modo Tabela): mesma família dos mapas --------------------------
   A linha de ações (busca + "Novo") deixa de ser um strip solto e vira a ÚLTIMA
   linha do painel de controle — colada nos chips de unidade, ou direto na toolbar
   quando não há chips. A busca ocupa a largura; o "Novo" fica à direita. */
.mapa .tab-chips:has(+ .tab-acoes) { margin-bottom: 0; border-radius: 0; border-bottom: 0; }
.mapa > .mapa__toolbar:has(+ .tab-acoes) {
  border-radius: 10px 10px 0 0; border-bottom: 0; margin-bottom: 0;
}
.mapa .tab-acoes {
  margin: 0 0 16px; padding: 10px 14px; gap: 10px 14px;
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.6);
  border-top: 1px solid rgba(0,0,0,.06); border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 24px -18px rgba(13,50,32,.35);
}
.dark .mapa .tab-acoes {
  background: rgba(22,30,24,.44); border-color: rgba(255,255,255,.08);
  border-top-color: rgba(255,255,255,.06);
}
.mapa .tab-acoes__busca { max-width: none; }

/* ===== Barra de saúde do parque (Direção 1): resumo + legenda visível + filtros rápidos ===== */
.pq-resumo {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--g-panel); border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 24px -18px rgba(13,50,32,.35);
}
.dark .pq-resumo {
  background: rgba(22,30,24,.44); border-color: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -16px rgba(0,0,0,.6);
}
.pq-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-bottom: 11px; background: rgba(148,163,184,.22); }
.pq-bar span { display: block; min-width: 3px; }
.pq-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.pq-total { font-size: 12px; font-weight: 800; color: #64748b; }
.dark .pq-total { color: #93a79a; }
.pq-sep { width: 1px; align-self: stretch; background: rgba(0,0,0,.10); margin: 2px 3px; }
.dark .pq-sep { background: rgba(255,255,255,.10); }
.pq-acao-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }
.pq-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #14532d;
  background: var(--g-glass); border: 1px solid var(--g-edge); border-radius: 999px;
  padding: 5px 11px; transition: box-shadow .14s ease, transform .1s ease, background .14s ease;
}
.pq-chip b { font-weight: 800; }
.pq-chip:hover { box-shadow: var(--g-elev-h); transform: translateY(-1px); }
.dark .pq-chip { color: #d7f0e2; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.pq-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pq-chip--warn { color: #b45309; background: rgba(239,143,60,.10); border-color: rgba(239,143,60,.30); }
.dark .pq-chip--warn { color: #fbbf24; background: rgba(239,143,60,.12); border-color: rgba(239,143,60,.28); }
/* chip ATIVO (filtro aplicado) = verde→lima sólido, igual ao chip ativo do menu/estoque */
.pq-chip.is-active {
  background: linear-gradient(135deg, #00a651, #cbf542); color: #0b2e18; border-color: transparent;
  box-shadow: 0 4px 12px -3px rgba(0,166,81,.5);
}
.pq-clear { cursor: pointer; font-size: 12px; font-weight: 700; color: #e0533f; background: transparent; border: 0; padding: 5px 8px; border-radius: 8px; }
.pq-clear:hover { background: rgba(224,83,63,.10); }
@media (max-width: 720px) { .pq-resumo { overflow-x: auto; } .pq-chips { flex-wrap: nowrap; } }

/* Filtro de CARGO (select client-side) no painel de controle do mapa — casa com os dropdowns. */
.mapa-cargo { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mapa-cargo__lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.dark .mapa-cargo__lbl { color: #9aa6ae; }
.mapa-cargo__sel {
  min-width: 140px; padding: 8px 10px; border-radius: 9px; border: 1px solid #cfe0d6;
  background: #fff; color: #14532d; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.mapa-cargo__sel:focus { outline: none; border-color: #00a651; box-shadow: 0 0 0 3px rgba(0,166,81,.18); }
.dark .mapa-cargo__sel { background: rgba(15,22,17,.6); color: #e6efe9; border-color: rgba(255,255,255,.14); }

/* --- Botão "Indicadores completos" no hero da Início --- */
.make-hero__acao {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 13px;
  text-decoration: none; color: #0a5e30; background: rgba(0,166,81,.10);
  border: 1px solid rgba(0,166,81,.25); transition: background .16s ease, transform .16s ease;
}
.make-hero__acao:hover { background: rgba(0,166,81,.18); transform: translateY(-1px); }
.make-hero__acao .material-symbols-outlined { font-size: 18px; }
.dark .make-hero__acao { color: #86efac; background: rgba(0,166,81,.14); border-color: rgba(0,166,81,.3); }


/* --- Accordion do menu: cabeçalho de grupo recolhível com afordância --- */
#nav-sidebar-apps h2.cursor-pointer:hover { color: var(--intelbras-verde) !important; }
.dark #nav-sidebar-apps h2.cursor-pointer:hover { color: #4ade80 !important; }

/* ============================================================================
   IDENTIDADE "ESPELHO" — vidro + brilho em TODOS os popups/modais/dropdowns.
   O brilho é empilhado no próprio background (2 camadas de gradiente) → funciona
   mesmo nos cards que rolam (overflow:auto), sem pseudo-elemento nem z-index.
   ============================================================================ */
.baia-colab__card, .mov-modal__card, .tl-overlay__card, .tr-modal__card,
.shelf-modal__card, .make-modal, .reativar__card,
.make-notif-drop, #nav-sidebar-inner > div:nth-child(2) > nav {
  background:
    linear-gradient(122deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.12) 16%, transparent 40%),
    linear-gradient(158deg, rgba(255,255,255,.9), rgba(255,255,255,.78)) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-elev-h) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dark .baia-colab__card, .dark .mov-modal__card, .dark .tl-overlay__card, .dark .tr-modal__card,
.dark .shelf-modal__card, .dark .make-modal, .dark .reativar__card,
.dark .make-notif-drop, .dark #nav-sidebar-inner > div:nth-child(2) > nav {
  background:
    linear-gradient(122deg, rgba(255,255,255,.10) 0%, transparent 34%),
    linear-gradient(158deg, rgba(26,34,28,.9), rgba(18,24,20,.86)) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 26px 60px -20px rgba(0,0,0,.7) !important;
}

/* ===== Botões de AÇÃO verdes: verde sólido + BRILHO ESPELHADO (sem degradê de cor) ===== */
.tab-novo {
  background:
    linear-gradient(122deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 16%, transparent 42%),
    var(--intelbras-verde) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -6px rgba(0,166,81,.55) !important;
  transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}
.tab-novo:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 22px -8px rgba(0,166,81,.6) !important;
}
/* Toggle Mapa/Tabela ativo: mesmo brilho, sem borda (fica dentro do segmentado). */
.mapa__view-btn.is-active, .dark .mapa__view-btn.is-active {
  background:
    linear-gradient(122deg, rgba(255,255,255,.4) 0%, transparent 42%),
    var(--intelbras-verde) !important;
  color: #fff !important;
}

/* ===== Sem botões redondos no topo: "+" (addlink), "?" e sino = retângulo + vidro ===== */
.addlink {
  border-radius: 8px !important; width: auto !important; min-width: 38px; padding: 0 9px !important;
  background:
    linear-gradient(122deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 16%, transparent 42%),
    var(--intelbras-verde) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -6px rgba(0,166,81,.55) !important;
}
.addlink .material-symbols-outlined { border-radius: 6px !important; background: transparent !important; }
/* "?" e sino = SÓ os ícones (sem caixa/vidro/borda), com hover leve. */
#page-help-btn, .make-notif > button {
  border-radius: 8px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ============================================================================
   CONSISTÊNCIA GLOBAL — mesmo padrão de CAMPO, BOTÃO e TEXTO em TODO o sistema.
   (Regras finais: vencem as variações espalhadas pelas telas custom.)
   ============================================================================ */

/* --- CAMPOS: sólidos, raio 9, borda 1px — idênticos em todas as telas --- */
.tab-busca, .baia-colab__busca, .chd-input,
.chamado__campo input, .chamado__campo select, .chamado__campo textarea,
.chamado__meta-row input, .chamado__meta-row select, .chamado__meta-row textarea,
.tl-input, .cx-campo input, .cx-campo select, .cx-item__qtd input,
.cx-avulso__tipo, .cx-avulso__nome, .cx-avulso input[type=number],
.reativar__select, .scan-manual__form input, .tr-modal__ta {
  background: #ffffff !important; border: 1px solid #cfe0d6 !important;
  border-radius: 9px !important; box-shadow: none !important;
}
.dark .tab-busca, .dark .baia-colab__busca, .dark .chd-input,
.dark .chamado__campo input, .dark .chamado__campo select, .dark .chamado__campo textarea,
.dark .chamado__meta-row input, .dark .chamado__meta-row select, .dark .chamado__meta-row textarea,
.dark .tl-input, .dark .cx-campo input, .dark .cx-campo select, .dark .cx-item__qtd input,
.dark .cx-avulso__tipo, .dark .cx-avulso__nome, .dark .cx-avulso input[type=number],
.dark .reativar__select, .dark .scan-manual__form input, .dark .tr-modal__ta {
  background: #171e19 !important; border-color: rgba(255,255,255,.14) !important; color: #e5efe8 !important;
}
/* preserva a borda vermelha de erro */
.is-erro, input.is-erro, select.is-erro, textarea.is-erro { border-color: #e0533f !important; }
/* busca do changelist no mesmo raio */
body.change-list #changelist-search > div { border-radius: 9px !important; }

/* --- BOTÕES: nada redondo/pílula — raio único 8px (mantém a cor de cada um) --- */
.setor-btn, .mov-btn, .tr-modal__btn, .chd-btn, .chr-skip__btn,
.make-fab, .make-fab-bar, .cx-step, .make-notif-ok, .make-notif-no,
.make-login-btn, .make-pass-btn,
.mapa__trocar, .mov-touch__cancel, .monitor__editar, .chd-adv-open,
.aprov__btn, .mapa-zoom__voltar, .colab-card__remover, .nbz-editar, .mz-act,
.monitor__editar, .chd-adv__open, .chd-btn--save, .chd-btn--finalizar, .chd-btn--reg {
  border-radius: 8px !important;
}

/* --- TEXTOS de ajuda/descrição dos formulários: UMA cor neutra (nada esverdeado) --- */
body.change-form #content .text-subtle,
body.change-form #content .leading-relaxed.text-xs,
body.change-form #content .help { color: #64748b !important; }
.dark body.change-form #content .text-subtle,
.dark body.change-form #content .leading-relaxed.text-xs,
.dark body.change-form #content .help { color: #93a29a !important; }
/* Respiro + cor UNIFORME (neutraliza trechos coloridos dentro do texto, ex.: "NÃO"). */
/* padding-left 12px alinha a descrição com o título (h2 px-3) e as labels dos campos. */
body.change-form #content .module .text-subtle { margin: 2px 0 12px !important; padding-left: 12px !important; line-height: 1.5 !important; }
body.change-form #content .leading-relaxed.text-xs { margin-top: 8px !important; line-height: 1.5 !important; }
body.change-form #content .module .text-subtle *,
body.change-form #content .leading-relaxed.text-xs * { color: inherit !important; }

/* ===== Sidebar recolhível (colapsar para só ícones) ===== */
#nav-sidebar, #page div:has(#nav-sidebar) { transition: width .18s ease; }
/* Item único de "Recolher menu" (rodapé da sidebar) */
.mkx-side-collapse {
  flex: none; margin: 4px 10px 10px; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 0; background: transparent; border-radius: 9px;
  color: #6b8478; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; text-align: left;
}
.mkx-side-collapse:hover { background: rgba(0,166,81,.08); color: var(--intelbras-verde); }
.mkx-side-collapse:hover .mkx-side-collapse__ic { color: var(--intelbras-verde); }
.dark .mkx-side-collapse { color: #7f9689; }
.mkx-side-collapse__ic {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none;
  background: transparent; color: #6b8478; transition: transform .2s ease, color .15s ease;
}
.dark .mkx-side-collapse__ic { background: transparent; color: #7f9689; }
.mkx-side-collapse__ic svg { width: 18px; height: 18px; }
body.mkx-side-collapsed .mkx-side-collapse { justify-content: center; font-size: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
body.mkx-side-collapsed .mkx-side-collapse__ic { transform: rotate(180deg); }

/* larguras: encolhe a sidebar e TODOS os wrappers que a contêm (reflui o conteúdo) */
body.mkx-side-collapsed #page div:has(#nav-sidebar),
body.mkx-side-collapsed #nav-sidebar,
body.mkx-side-collapsed #nav-sidebar-inner { width: 74px !important; min-width: 74px !important; }

/* esconde chip do usuário (2º) e busca (3º) quando recolhido */
body.mkx-side-collapsed #nav-sidebar-inner > div:nth-child(2),
body.mkx-side-collapsed #nav-sidebar-inner > div:nth-child(3) { display: none !important; }

/* logo: esconde o cabeçalho (logo/wordmark) quando recolhido — vira um trilho de ícones */
body.mkx-side-collapsed .make-sidebar-logo { display: none !important; }
body.mkx-side-collapsed #nav-sidebar-inner > div:first-child { display: none !important; }

/* captions de grupo somem; itens viram só ícone (font-size:0 esconde o text node do rótulo) */
body.mkx-side-collapsed #nav-sidebar-apps h2 { display: none !important; }
body.mkx-side-collapsed #nav-sidebar-apps ol { padding-left: 6px !important; padding-right: 6px !important; }
body.mkx-side-collapsed #nav-sidebar-apps ol li a { justify-content: center !important; font-size: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
body.mkx-side-collapsed #nav-sidebar-apps ol li a .material-symbols-outlined { margin-right: 0 !important; }