/* ============ Tokens ============ */
:root {
  --sidebar-width: 260px;
  --topbar-height: 56px;
  --content-max: 1240px;
  --radius: 10px;
  --transition: 0.2s ease;

  /* Cores SEMÂNTICAS fixas — significado, não identidade visual.
     Idênticas em TODOS os temas (claro/escuro, azul/vermelho): nunca seguem o
     acento/cor primária. Usar para status, pago/aprovado, recebido, atraso,
     pendência, elegível, etc. Ver CLAUDE.md / princípio global. */
  --sem-success: #36c275;  /* pago · aprovado · recebido · ganho · elegível-ok */
  --sem-danger:  #ff5c5c;  /* atraso · perdido · pendência · erro */
  --sem-warning: #e0a73c;  /* proposta enviada · aviso */
  --sem-info:    #4f8cff;  /* em contato · elegível · azul semântico */
  --label-strong: #910303; /* labels de destaque (vinho) — clareado no tema escuro */
  /* Versões de TEXTO dos tokens semânticos: os --sem-* preenchem fundo e não
     alcançam 4,5:1 como tinta. Aqui a mesma identidade, com contraste. */
  --sem-success-txt: color-mix(in srgb, var(--sem-success) 62%, #000);
  --sem-danger-txt:  color-mix(in srgb, var(--sem-danger) 68%, #000);
  --sem-warning-txt: color-mix(in srgb, var(--sem-warning) 58%, #000);
  --sem-info-txt:    color-mix(in srgb, var(--sem-info) 72%, #000);
  --os-amb-bg: #717171;    /* fundo do cabeçalho de ambiente da OS (mesmo cinza nos dois temas) */
  --os-amb-nd-tinta: #f3d16f; /* tinta do grupo "Ambiente não definido" (o fundo é o mesmo dos demais) */
}

[data-theme="dark"] {
  --bg: #121316;
  --bg-elevated: #1b1d22;
  --bg-elevated-2: #23262d;
  --bg-soft: #17181c;      /* bloco cinza atrás de cards claros (estilo Fichas) */
  --border: #2c2f37;
  --text: #f0f1f3;
  --text-muted: #9a9ea8;
  --accent: #4f8cff;
  --accent-text: #ffffff;
  --danger: #ff5c5c;
  --success: #36c275;
  --link: #5b8def;   /* azul escuro para links (independente do accent de marca) */
  --label-strong: color-mix(in srgb, #910303 45%, #fff); /* o vinho puro some no fundo escuro */
  /* No escuro a tinta clareia em vez de escurecer (mesmo alvo de contraste). */
  --sem-success-txt: color-mix(in srgb, var(--sem-success) 78%, #fff);
  --sem-danger-txt:  color-mix(in srgb, var(--sem-danger) 80%, #fff);
  --sem-warning-txt: color-mix(in srgb, var(--sem-warning) 82%, #fff);
  --sem-info-txt:    color-mix(in srgb, var(--sem-info) 72%, #fff);
  --shadow: 0 4px 16px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #eceef1;
  --bg-soft: #eef0f3;      /* bloco cinza atrás de cards brancos (estilo Fichas) */
  --border: #dadde2;
  --text: #1a1c20;
  --text-muted: #5f6470;
  --accent: #2e6ef0;
  --accent-text: #ffffff;
  --danger: #d6334a;
  --success: #1f9d58;
  --link: #1e40af;   /* azul escuro (navy) para links no tema claro */
  --shadow: 0 4px 16px rgba(0,0,0,0.1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* Guarda do fallback de ligadura dos Material Icons: sem a fonte carregada o
   span vira TEXTO largo ("arrow_drop_down") e estoura o layout. Com a fonte,
   o glifo tem 1em — o clamp não muda nada. */
.material-icons { display: inline-block; max-width: 1.6em; overflow: hidden; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* ============ Login ============ */
.login-screen {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 320px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 28px;
  box-shadow: var(--shadow);
}

.login-logo {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 2px;
  margin: 0;
  color: var(--accent);
}

.login-logo-img {
  display: block;
  margin: 0 auto 36px;
  max-width: 180px;
  height: auto;
}

/* Logo transparente — funciona em tema claro e escuro */

.login-subtitle {
  margin: 4px 0 32px;
  color: var(--text-muted);
  font-size: 14px;
}

.dev-mode-btn {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.dev-mode-btn small {
  font-size: 11px;
  color: var(--text-muted);
}

.login-status {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
  min-height: 18px;
}

/* ============ Loading screen (carregando todos os JSONs) ============ */
/* Conteúdo solto e centralizado — sem o card do .login-box ao redor. */
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
/* Ainda usado no viewer de anexos (js/utils.js). */
.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tji-spin 0.8s linear infinite;
}
.loading-logo {
  max-width: 140px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.loading-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}
@keyframes tji-spin {
  to { transform: rotate(360deg); }
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  transition: filter var(--transition), background var(--transition);
}

.btn .material-icons {
  font-size: 18px;
}

.btn-block { width: 100%; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { filter: brightness(0.95); }

.btn-ghost {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }

.btn-icon {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { background: var(--bg-elevated-2); }
.btn-icon .material-icons { font-size: 22px; }
.btn-icon--danger { color: var(--danger); }
.btn-icon--danger:hover { background: rgba(255,92,92,.12); }

/* ============ Shell layout ============ */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: var(--topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.module-title {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Indicador de salvamento (header) — aparece durante/após cada escrita em background */
.save-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  opacity: 0;
  transition: opacity var(--transition);
}
.save-indicator.show {
  opacity: 1;
}
.save-indicator-icon {
  font-size: 20px;
  color: var(--text-muted);
}
.save-indicator.saving .save-indicator-icon {
  color: var(--accent);
  animation: tji-spin 1s linear infinite;
}
.save-indicator.saved .save-indicator-icon {
  color: var(--success);
}
.save-indicator.error .save-indicator-icon {
  color: var(--danger);
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.content > * {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ============ Sidebar ============ */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 20;
}

.sidebar-header {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-logo {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--accent);
}

.sidebar-logo-img {
  height: 36px;
  width: auto;
  max-width: 100%;
  display: block;
}

.sidebar-close { display: none; }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  flex: 1;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  user-select: none;
}

.nav-item:hover {
  background: var(--bg-elevated-2);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent);
  color: var(--accent-text);
}

.nav-item .nav-icon {
  font-size: 17px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.nav-group-header {
  margin-bottom: 2px;
}

.nav-caret {
  margin-left: auto;
  font-size: 18px;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.nav-group.open .nav-caret {
  transform: rotate(180deg);
}

.nav-sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}

.nav-group.open .nav-sublist {
  max-height: 200px;
}

.nav-sublist .nav-item {
  margin-top: 2px;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.version-footer {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 4px 4px;
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}
.sync-dot.offline { background: var(--danger); }
.sync-dot.syncing { background: #e0a73c; }

.pending-counter {
  font-size: 11px;
  font-weight: 700;
  color: var(--danger);
  background: rgba(255,92,92,0.15);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Banner de saves pendentes/falhos — abaixo do header, persiste até resolver */
.save-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--danger);
  color: #fff;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.save-banner .material-icons {
  font-size: 18px;
  flex-shrink: 0;
}
.save-banner span#save-banner-text {
  flex: 1;
  min-width: 160px;
}
.save-banner .btn {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.save-banner .btn:hover {
  color: #fff;
  border-color: #fff;
}

/* Banner offline persistente (Feature 3) */
.offline-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 900;
}
.offline-banner .material-icons { font-size: 18px; }
.offline-banner-offline { background: #d97706; }
.offline-banner-reconnected { background: #2563eb; }

/* Banner de leads pendentes — faixa FIXA sobreposta ao topo do conteúdo.
   position:fixed tira o elemento do fluxo, então mesmo dentro do shell flex ele
   NÃO vira uma coluna (corrige a "3ª coluna" no desktop). Fica abaixo da topbar
   e à direita do menu no desktop; ocupa a largura toda no mobile. Dispensável,
   não-bloqueante (não é modal, não trava a tela). */
.pending-banner {
  position: fixed;
  top: var(--topbar-height);
  left: var(--sidebar-width);
  right: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-elevated-2);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.pending-banner .material-icons { font-size: 20px; }
@media (max-width: 768px) {
  .pending-banner { left: 0; }
}

/* Log de sincronização (Feature 6) */
.sync-log-summary { margin-bottom: 10px; }
.sync-log-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  gap: 8px;
}
.sync-log-row:last-child { border-bottom: none; }
.sync-log-list { margin-top: 10px; }
.sync-log-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.sync-log-item:last-child { border-bottom: none; }
.sync-log-item-error { opacity: 0.8; }
.sync-log-filename { flex: 1; color: var(--text-muted); font-family: monospace; }
.sync-log-ts { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }

.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 15;
}

/* ============ Páginas de módulo (lista/form/perfil) ============ */
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* ============ Menu dropdown (⋮ Inativar/Excluir nos formulários) ============ */
.form-menu-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 180px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
.dropdown-menu.open {
  display: flex;
}

/* Menu ⋮ por linha de listagem (Inativar/Excluir) — botão discreto no fim da linha. */
.row-menu-wrapper { position: relative; display: flex; align-items: center; flex: none; }
.row-menu-btn { flex: none; }
.row-menu-btn .material-icons { font-size: 20px; color: var(--text-muted); }

/* ===== Formulário da OS — materiais (DUAS LINHAS por material) ===== */
/* L1 = bolinha + nome (trunca). L2 = controles (Qtd · Reservado · Concluído · ⋮). */
.os-mat { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.os-mat-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.os-mat-l2 { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* ⋮ colado à direita da linha 2. */
.os-mat-l2 .row-menu-wrapper { margin-left: auto; }
/* Nome do material: ocupa a linha e TRUNCA (peso normal). Clicar expande o nome completo. */
.os-mat-nome-trunc { flex: 1; min-width: 0; font-size: 13px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.os-mat-nome-trunc.expandido { white-space: normal; overflow: visible; text-overflow: clip; }
.os-mat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* Campo com rótulo (Qtd / Custo) antes do input. */
.os-mat-qtd-wrap { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.os-mat-field-lbl { font-size: 11px; color: var(--text-muted); }
/* Cards compactos Reservado / Concluído (mesmo tamanho, pouca altura): rótulo em cima,
   valor embaixo, centralizados. Botão real (clicável). */
.os-mat-card { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 72px; padding: 4px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elevated); cursor: pointer; line-height: 1.1; font-family: inherit; }
.os-mat-card-lbl { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.os-mat-card-val { font-size: 14px; font-weight: 800; color: var(--text); }
/* Reservado — semáforo: texto E borda na cor, fundo suave. */
.os-mat-card-resv.zero { background: rgba(253,110,110,0.12); border-color: rgba(253,110,110,0.45); }
.os-mat-card-resv.zero .os-mat-card-lbl, .os-mat-card-resv.zero .os-mat-card-val { color: var(--sem-danger); }
.os-mat-card-resv.parcial { background: rgba(79,140,255,0.12); border-color: rgba(79,140,255,0.45); }
.os-mat-card-resv.parcial .os-mat-card-lbl, .os-mat-card-resv.parcial .os-mat-card-val { color: var(--sem-info); }
.os-mat-card-resv.completo { background: rgba(54,194,117,0.14); border-color: rgba(54,194,117,0.45); }
.os-mat-card-resv.completo .os-mat-card-lbl, .os-mat-card-resv.completo .os-mat-card-val { color: var(--sem-success); }
.os-mat-card-resv.semestoque { background: rgba(224,167,60,0.16); border-color: rgba(224,167,60,0.50); }
.os-mat-card-resv.semestoque .os-mat-card-lbl, .os-mat-card-resv.semestoque .os-mat-card-val { color: var(--sem-warning); }
.os-mat-card-resv.semestoque .os-mat-card-val { font-size: 11px; }
/* Concluído: ligado = verde; desligado = apagado (muted); indisponível = opaco/não clicável. */
.os-mat-card-concl:not(.on) .os-mat-card-val { color: var(--text-muted); }
.os-mat-card-concl.on { background: rgba(54,194,117,0.14); border-color: rgba(54,194,117,0.45); }
.os-mat-card-concl.on .os-mat-card-lbl, .os-mat-card-concl.on .os-mat-card-val { color: var(--sem-success); }
.os-mat-card-concl.disabled { opacity: .45; cursor: not-allowed; }
/* Painel de reserva: item de reserva (seletor de lote + qtd + remover). */
.os-resv-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.os-resv-lote-sel { flex: 1; min-width: 0; }
.os-resv-qtd { font-weight: 700; flex: none; }
/* Inputs no padrão do app (borda/fundo/foco iguais aos demais). */
.os-input {
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
}
.os-input:focus { outline: none; border-color: var(--accent); }
.os-input-qtd { width: 56px; flex: none; text-align: center; padding: 6px 4px; }
.os-input-custo { width: 110px; flex: none; padding: 6px 8px; }
.os-input-nome { flex: 1; min-width: 0; }
.os-mat-menu-btn { flex: none; }
.os-mat-menu-btn .material-icons { font-size: 20px; color: var(--text-muted); }

@media (max-width: 560px) {
  .os-mat { padding: 7px 8px; }
  .os-mat-l2 { gap: 8px; }
  .os-mat-card { min-width: 56px; padding: 3px 6px; }
  .os-input-qtd { width: 48px; }
}

/* ===== Formulário da OS — quadro ATIVIDADES (espelho do protótipo) ===== */
/* Lista sem cards: itens com leve respiro entre si; separador fino no topo (sem borda dupla). */
.os-atv { position: relative; border-top: 1px solid var(--border); padding: 10px 2px; margin-bottom: 8px; border-radius: 6px; }
.os-atv:first-child { border-top: none; }
/* Item concluído: fundo verde bem claro (o respiro branco separa os itens). */
.os-atv.concluida { background: rgba(54, 194, 117, 0.10); border-top-color: transparent; padding-left: 8px; padding-right: 8px; }
.os-atv.concluida + .os-atv { border-top-color: transparent; }
.os-atv-tline { display: flex; align-items: flex-start; gap: 9px; }
.os-atv-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 5px; }
/* Item fornecido pelo cliente: avatar no lugar da bolinha (cor inline = estado). */
.os-atv-avatar {
  flex: none;
  font-size: 16px;
  line-height: 1;
  width: 16px;
  height: 16px;
}
/* Prefixo "#N" (usado ao lado do input de tarefa). */
.os-atv-num { flex: none; font-weight: 700; font-size: 13px; color: var(--text-muted); margin-top: 3px; }
/* Tag "sem baixa": concluída cuja reserva não saiu do estoque (âmbar discreto). */
/* Tag "Fornecido pelo cliente" — mesmo padrão da "sem baixa"; cor inline (acompanha a bolinha) */
.os-atv-tag-fornecido { flex: none; align-self: flex-start; margin-top: 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; background: var(--bg-elevated-2); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
/* Chip de estoque no título do produto — mesmo estilo dos chips do cadastro
   de produtos (.estoque-chip-ok/zero), ajustado para caber inline no texto. */
.estoque-chip.os-atv-est-chip { justify-self: auto; display: inline-block; min-width: 22px; padding: 2px 7px; font-size: 11px; vertical-align: 1px; white-space: nowrap; }
.os-atv-titulo { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; cursor: default; }
.os-atv-titulo.feito { text-decoration: line-through; color: var(--text-muted); }
.os-atv-titulo-input { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; padding: 4px 8px; }
.os-atv-titulo-input.feito { text-decoration: line-through; color: var(--text-muted); }
/* Linha de mão de obra: data | descrição | valor | remover (inputs no estilo
   padrão de campo — ver os seletores compartilhados com .form-group input). */
.os-mdo-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

/* ⋮ como botão discreto emoldurado (32×30), no fim da 1ª linha. */
.os-atv-menu-btn { flex: none; width: 32px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated); display: inline-flex; align-items: center; justify-content: center; }
.os-atv-menu-btn:hover { border-color: var(--text-muted); }
.os-atv-menu-btn .material-icons { font-size: 19px; color: var(--text-muted); }
/* Observação: 2ª linha, largura cheia, borda tracejada, recuo mínimo. */
.os-atv-obs-line { margin-top: 7px; }
.os-atv-obs { width: 100%; box-sizing: border-box; border: 1px dashed var(--border); border-radius: 7px; padding: 6px 9px; font-size: 12px; color: var(--text-muted); background: var(--bg-subtle, rgba(127,127,127,.04)); }
.os-atv-obs:focus { outline: none; border-color: var(--accent); }
/* Detalhes (lote/custo): bloco cinza claro. */
.os-atv-detalhes { margin-top: 8px; background: var(--bg-subtle, rgba(127,127,127,.05)); border: 1px solid var(--border); border-radius: 9px; padding: 10px 11px; }
.os-atv-det-h { margin: 0 0 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--label-strong); font-weight: 800; }
.os-atv-detalhes select, .os-atv-custo-manual { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 12.5px; background: var(--bg-elevated); color: var(--text); font-family: inherit; }
.os-atv-detalhes select:focus, .os-atv-custo-manual:focus { outline: none; border-color: var(--accent); }
.os-atv-custo { display: flex; align-items: center; gap: 8px; }
.os-atv-custo label { font-size: 11px; font-weight: 700; color: var(--text-muted); flex: none; }
.os-atv-custo .os-atv-custo-manual { width: 120px; padding: 7px 9px; }
.os-atv-det-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Quadro de Atividades sem caixa: o .form-card vira transparente (só o card da
   atividade é branco, apoiado direto no fundo da página). */
.form-card.form-card-flat {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ===== Card de atividade de PRODUTO (estilo Fichas) ===== */
.os-atv-card {
  border: none;
  border-radius: 12px;
  padding: 14px 15px;
  background: var(--bg-elevated);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  margin-bottom: 10px;
  cursor: pointer;
}
/* Concluída: fundo verde suave (tint sobre --sem-success, com fallback rgba), sem borda. */
.os-atv-card.concluida {
  background: rgba(54, 194, 117, 0.10);
  background: color-mix(in srgb, var(--sem-success) 9%, var(--bg-elevated));
}
/* Visão Lista: sem caixa intermediária — cards direto sobre o fundo da página. */
.os-bloco-cards { background: transparent; padding: 0; border-radius: 0; }
/* Visão Por ambiente: cards em largura total, sem caixa — a cor fica no
   cabeçalho do grupo (.os-amb-head). */
.os-amb-cards { background: transparent; border-radius: 0; padding: 0; }
.os-amb-grupo.nd .os-amb-nome  { color: var(--os-amb-nd-tinta); font-weight: 600; }
.os-bloco-cards .os-atv:last-child, .os-amb-cards .os-atv:last-child { margin-bottom: 0; }
/* Tarefa dentro do bloco cinza: mesmo fundo claro sem borda, para não ficar solta. */
.os-bloco-cards .os-atv, .os-amb-cards .os-atv {
  border-top: none;
  background: var(--bg-elevated);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.os-bloco-cards .os-atv.concluida, .os-amb-cards .os-atv.concluida {
  background: rgba(54, 194, 117, 0.10);
  background: color-mix(in srgb, var(--sem-success) 9%, var(--bg-elevated));
}
.os-bloco-cards .os-atv-card, .os-amb-cards .os-atv-card { padding: 14px 15px; border-radius: 12px; }
/* Concluída (card de produto): o verde sai do corpo e fica só na faixa do título,
   para o conteúdo da expansão ficar legível. O card ganha um anel verde de 1px
   feito com box-shadow (não `border`, que deslocaria o layout em 1px). */
.os-atv-card.concluida,
.os-bloco-cards .os-atv-card.concluida,
.os-amb-cards .os-atv-card.concluida {
  background: rgba(54, 194, 117, 0.04);
  background: color-mix(in srgb, var(--sem-success) 4%, var(--bg-elevated));
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05),
              0 0 0 1px color-mix(in srgb, var(--sem-success) 45%, transparent);
}
/* A faixa sangra até as bordas do card: margens negativas = padding do card. */
.os-atv-card.concluida > .os-atv-top {
  background: rgba(54, 194, 117, 0.12);
  background: color-mix(in srgb, var(--sem-success) 12%, var(--bg-elevated));
  margin: -14px -15px;
  padding: 14px 15px;
  border-radius: 12px;
}
/* Expandido: faixa arredondada só em cima + respiro para o conteúdo.
   Fechado, a faixa preenche o card inteiro e o visual continua o de hoje. */
.os-atv-card.concluida.expandido > .os-atv-top {
  border-radius: 12px 12px 0 0;
  margin-bottom: 12px;
}
.os-atv.dragging { opacity: .55; }
/* Durante o arrasto, nada de seleção de texto (classe posta/tirada pelo próprio drag). */
body.os-arrastando { user-select: none; -webkit-user-select: none; }
.os-atv-top { cursor: pointer; align-items: center; }
.os-atv-top .os-atv-dot { margin-top: 0; }
.os-atv-top .os-atv-avatar { margin-top: 0; }
.os-atv-top .os-atv-num { margin-top: 0; }
/* Marcador do card: bolinha/avatar em cima, "#N" embaixo — devolve largura ao título. */
.os-atv-marca { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 15px; }
.os-atv-marca .os-atv-num { margin-top: 0; font-size: 11px; line-height: 1; }
/* Coluna título + subtítulo: assume o flex que era do título. */
.os-atv-tt-col { flex: 1 1 auto; min-width: 0; }
/* Localização no cabeçalho do card FECHADO, à direita, antes do ⋮. Discreta
   para não competir com o título; encolhe 4x mais rápido que a coluna do
   título (flex-shrink alto + teto de largura), então faltando espaço é ELA
   que trunca — mesmo princípio do nome do produto na listagem (Prompt 14). */
/* Auditoria de estoque (Configurações): linhas de achado e estado íntegro. */
.audit-grupo { margin-top: 10px; }
.audit-grupo-titulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
.audit-linha { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.audit-linha:last-child { border-bottom: none; }
.audit-linha .material-icons { font-size: 18px; flex: none; }
.audit-ok { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.audit-ok .material-icons { flex: none; }

/* Chaves do modo documento da OS, na barra de ações (mesma barra da ficha). */
.os-doc-chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.os-doc-chk input { cursor: pointer; }
#os-doc-iframe-wrap { display: flex; flex-direction: column; }

/* Alerta de impedimento no título do card: âmbar semântico. flex:none porque a
   trava global de .material-icons (max-width + overflow:hidden) deixaria o
   ícone encolhível até zero como flex item — a lição do botão de mês. */
.os-atv-imp {
  flex: none;
  font-size: 18px;
  color: var(--sem-warning);
  cursor: pointer;
}
.os-atv-loc-head {
  flex: 0 4 auto;
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted);
}
/* Nome do produto no card fechado: pequeno, discreto, uma linha com reticências. */
.os-atv-sub {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.os-atv-tipo-titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  overflow-wrap: break-word; /* quebra em palavras, nunca letra a letra */
}
.os-atv-tipo-titulo.feito { color: var(--text-muted); }
.os-atv-divisor { border-top: 1px solid var(--border); margin: 8px 0; }
.os-atv-ml { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; min-width: 0; }
.os-atv-ml.um { grid-template-columns: 1fr; }
.os-atv-ml-col { min-width: 0; }
.os-atv-ml-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--label-strong);
  font-weight: 800;
  margin-bottom: 3px;
}
.os-atv-ml-valor { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.os-atv-loc { width: 100%; box-sizing: border-box; }
/* Bloco Produto: objeto clicável transparente, só borda — abre o menu de status. */
.os-atv-prod-wrap { display: block; }
.os-atv-prod-obj {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  min-width: 0;
  font-family: inherit;
}
.os-atv-prod-obj:hover { border-color: var(--text-muted); }
.os-atv-prod-obj .os-atv-dot { margin-top: 0; width: 10px; height: 10px; }
.os-atv-prod-nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.os-atv-dot-mini { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
/* Campos como TEXTO no card (sem caixa): localização e observações herdam a
   fonte/cor; placeholder discreto. Foco/edição seguem normais. */
.os-atv-card .os-atv-loc,
.os-atv-card .os-atv-obs-ta {
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font: inherit;
  font-size: 13px;
  color: inherit;
}
.os-atv-card .os-atv-loc:focus,
.os-atv-card .os-atv-obs-ta:focus { outline: none; }
.os-atv-card .os-atv-loc::placeholder,
.os-atv-card .os-atv-obs-ta::placeholder { color: var(--text-muted); opacity: .55; }
/* Expansão: observações (textarea) + fotos + detalhes. */
.os-atv-obs-ta { min-height: 0; height: auto; resize: none; overflow: hidden; width: 100%; box-sizing: border-box; font-family: inherit; display: block; }
.os-atv-fotos { margin-top: 10px; }
.os-atv-fotos-sub { font-size: 11px; font-weight: 700; color: var(--text-muted); margin: 6px 0 4px; }
/* Antes | Depois lado a lado: no uso real é ~1 foto de cada lado. */
.os-atv-fotos-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
/* Grid interno se adapta à metade da largura (era fixo em 3 colunas). */
.os-atv-fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.os-atv-fotos-grupo .os-atv-fotos-sub:first-child { margin-top: 0; }
.os-atv-foto-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  cursor: pointer;
}
.os-atv-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.os-atv-foto-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.os-atv-foto-del .material-icons { font-size: 13px; }
.os-atv-foto-add {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
}
.os-atv-foto-add:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.os-atv-foto-add:disabled { opacity: .5; cursor: not-allowed; }
.os-atv-foto-add .material-icons { font-size: 20px; }
@media (max-width: 480px) {
  .os-atv-card { padding: 9px 10px; }
  .os-atv-card.concluida > .os-atv-top { margin: -9px -10px; padding: 9px 10px; }
  /* dentro dos blocos o padding continua 14/15 (regra dos blocos tem especificidade maior) */
  .os-bloco-cards .os-atv-card.concluida > .os-atv-top,
  .os-amb-cards .os-atv-card.concluida > .os-atv-top { margin: -14px -15px; padding: 14px 15px; }
  .os-atv-prod-nome { font-size: 11px; }
}
.os-atv-ml.tres { grid-template-columns: 1fr 1fr 1fr; }

/* ===== Visão "Por ambiente" (quadro Atividades da OS) ===== */
.os-atv-quadro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.os-atv-quadro-head .card-title { margin: 0; }
.os-atv-visao-seg {
  display: flex;
  gap: 2px;
  flex: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.os-atv-visao-seg button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.os-atv-visao-seg button.active { background: var(--bg-elevated-2); color: var(--text); }
.os-atv-visao-seg button:disabled { opacity: .5; cursor: not-allowed; }
/* Menu "Ordenar": check visível só no item ativo de cada grupo. */
.os-ordenar-menu .dropdown-menu-item .material-icons { visibility: hidden; }
.os-ordenar-menu .dropdown-menu-item.active .material-icons { visibility: visible; }
/* Indicador discreto de salvamento contínuo no cabeçalho da OS. */
.os-save-ind { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.os-amb-grupo { margin-bottom: 16px; }
.os-amb-grupo:last-child { margin-bottom: 0; }
/* Cabeçalho do grupo: cinza fixo (--os-amb-bg) com tinta clara sólida;
   "Ambiente não definido" usa o visual do chip de status "Em execução"
   (regra compartilhada com .badge-warning, mais abaixo). */
.os-amb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--os-amb-bg);
  cursor: pointer;
  min-width: 0;
}
.os-amb-bar {
  flex: none;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--bg-elevated);
  display: inline-block;
}
.os-amb-bar.nd { background: var(--text-muted); }
.os-amb-nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bg-elevated);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Secundários do cabeçalho: mesma tinta clara, sólida. */
.os-amb-cont { flex: none; font-size: 12px; font-weight: 700; color: var(--bg-elevated); font-variant-numeric: tabular-nums; }
.os-amb-chevron { flex: none; font-size: 18px; color: var(--bg-elevated); }
.os-amb-menu-wrap { flex: none; }
.os-amb-menu-btn { width: 26px; height: 24px; border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.os-amb-menu-btn .material-icons { font-size: 17px; color: var(--bg-elevated); }
/* "Ambiente não definido": mesmo fundo dos nomeados — quem distingue é a TINTA. */
.os-amb-grupo.nd .os-amb-nome,
.os-amb-grupo.nd .os-amb-cont,
.os-amb-grupo.nd .os-amb-chevron,
.os-amb-grupo.nd .os-amb-menu-btn .material-icons { color: var(--os-amb-nd-tinta); }
.os-amb-grupo.nd .os-amb-bar { background: var(--os-amb-nd-tinta); }
.os-amb-cards[hidden] { display: none !important; }
/* Opções do modal "Mover para ambiente" */
.os-amb-opts { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.os-amb-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.os-amb-opt:hover { border-color: var(--accent); }
/* Passo "Tarefa / Produto" da janela de adicionar item (ícone acima do rótulo). */
.os-add-tipos { display: flex; gap: 8px; margin-top: 4px; }
.os-addmenu-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elevated); color: var(--text); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; }
.os-addmenu-item:hover { border-color: var(--sem-info); background: rgba(79,140,255,0.10); color: var(--sem-info); }
.os-addmenu-item:hover .material-icons { color: var(--sem-info); }
.os-addmenu-item .material-icons { font-size: 21px; color: var(--text-muted); }
/* Lista global de OS (menu lateral) agrupada por cliente: card por grupo no
   padrão dos cards de proposta (.prop-card), com cabeçalho clicável
   (expandir/recolher) e corpo com linhas flush de OS. */
.os-grupo {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .15s;
}
.os-grupo:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.os-grupo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  text-align: left;
  font: inherit;
  color: var(--text);
}
.os-grupo-head:hover { background: var(--bg-elevated-2); }
.os-grupo-chevron { font-size: 20px; color: var(--text-muted); transition: transform var(--transition); }
.os-grupo.aberto .os-grupo-chevron { transform: rotate(90deg); }
.os-grupo-nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-grupo-body {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
/* Linha de OS dentro do grupo: flush (sem card próprio), divisor entre linhas. */
.os-grupo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.os-grupo-item:last-child { border-bottom: none; }
.os-grupo-item:hover { background: var(--bg-elevated-2); }
/* Bolinha de status: legenda nos chips de filtro (sempre) e, no mobile, no
   lugar do badge dentro do item da lista de OS. */
.chip-status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.os-item-dot {
  display: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.os-item-cod, .os-item-cod-l1 { white-space: nowrap; }
.os-item-cod-mobile { display: none; white-space: nowrap; }
/* Ícone de OS automática (origem 'auto' — gerada da proposta) */
.os-ico-auto { font-size: 14px; color: var(--text-muted); flex: none; vertical-align: middle; cursor: default; }
/* Contadores da OS nas listagens: "(N atividades · N reservadas · N concluídas)" */
.os-item-contadores { font-size: 11px; font-weight: 400; color: var(--text-muted); white-space: nowrap; flex: none; }
.os-item-titulo-menu {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ===== OS: alternância Lista | Kanban ===== */
.os-view-seg {
  display: flex;
  gap: 2px;
  flex: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.os-view-btn {
  width: 34px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.os-view-btn.active { background: var(--accent); color: #fff; }
.os-view-btn .material-icons { font-size: 19px; }

/* ===== OS: visão Kanban (colunas = status) ===== */
/* Lanes com a altura vertical inteira disponível (iguais entre si), rolagem
   interna por coluna; no mobile o board rola na horizontal. */
.os-kanban {
  display: flex;
  gap: 10px;
  align-items: stretch;
  height: calc(100vh - 215px);
  min-height: 340px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.os-kb-col {
  flex: 1 1 0;
  min-width: 225px;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border); /* cor do status via style inline */
  border-radius: var(--radius);
}
.os-kb-col.drag-over { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.os-kb-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.os-kb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.os-kb-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: 999px;
  padding: 1px 8px;
}
.os-kb-cards {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Card com TINT CLARO da cor do status (--st/--st-tint inline por card).
   Sem suporte a color-mix, cai no tint pronto do STATUS_META (--st-tint). */
.os-kb-card {
  background: var(--st-tint, var(--bg-elevated));
  background: color-mix(in srgb, var(--st, var(--border)) 8%, var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.os-kb-card:hover { border-color: var(--accent); }
.os-kb-card.dragging { opacity: .5; }
.os-kb-cli { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-kb-cli-nome { font-weight: 700; color: var(--text); }
/* Topo do card: identificação do cliente + o ⋮ de ações da OS. */
.os-kb-topo { display: flex; align-items: flex-start; gap: 4px; }
.os-kb-topo .os-kb-cli { flex: 1; min-width: 0; }
.os-lote-wrap { flex: none; }
.os-lote-wrap .btn-icon { width: 26px; height: 26px; color: var(--text-muted); }
.os-lote-wrap .btn-icon:hover { color: var(--accent); }
.os-lote-wrap .material-icons { font-size: 18px; }
/* Lista de OS elegíveis dentro da pop-up de agendamento em lote. */
.os-lote-lista {
  max-height: 40vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.os-lote-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
}
.os-lote-item:last-child { border-bottom: none; }
.os-lote-item:hover { background: var(--bg-soft); }
.os-lote-cod {
  flex: none;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
/* Faltando largura é o TÍTULO que trunca — código e data nunca somem. */
.os-lote-sep { flex: none; color: var(--text-muted); }
.os-lote-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-lote-data { flex: none; }
.os-kb-titulo { font-size: 13px; font-weight: 600; margin: 2px 0; overflow-wrap: anywhere; }
.os-kb-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.os-kb-cod { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 11px; font-weight: 700; color: var(--accent); }
/* Data como pill: cinza; vermelha SÓ quando vencida (OS não concluída). */
.os-kb-agenda {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.os-kb-agenda .material-icons { font-size: 13px; }
.os-kb-agenda.vencida { background: rgba(255, 92, 92, 0.15); color: var(--sem-danger); font-weight: 600; }
/* Sem agendamento: ícone vermelho + "agendar" (sem pill). */
.os-kb-agendar { display: inline-flex; align-items: center; gap: 3px; color: var(--sem-danger); font-weight: 600; }
.os-kb-agendar .material-icons { font-size: 14px; }
.os-kb-ativ { margin-left: auto; white-space: nowrap; }
/* Agrupador por cliente dentro da lane: SEM caixa — nenhum fundo, borda ou
   aparência nativa de botão; só chevron + nome + bolinha do totalizador. */
.os-kb-grp-head {
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  padding: 3px 0 2px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.os-kb-grp-chevron { font-size: 16px; color: var(--text-muted); transition: transform .15s; }
.os-kb-grp-chevron.collapsed { transform: rotate(-90deg); }
.os-kb-grp-nome { font-size: 11.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Contador do cliente: pill na cor do status da coluna (fundo suave + número). */
.os-kb-grp-count {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--st-tint, var(--bg-elevated-2));
  background: color-mix(in srgb, var(--st, var(--border)) 15%, var(--bg-elevated));
  color: var(--st, var(--text-muted));
  font-variant-numeric: tabular-nums;
}
.os-kb-grp-cards { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; }
/* Colapso: o [hidden] precisa vencer o display:flex acima. */
.os-kb-grp-cards[hidden] { display: none !important; }
@media (max-width: 768px) {
  .os-kanban { height: calc(100vh - 250px); }
  .os-kb-col { flex: 0 0 240px; }
}

/* Conteúdo alternado desktop/mobile dentro dos itens de OS (ex.: linha de
   agendamento da aba OS: texto simples no desktop, calendário+dia no mobile). */
.os-item-mob { display: none; }
@media (max-width: 768px) {
  .os-item-dot { display: inline-block; }
  .os-item-cod-l1 { display: none; }
  .os-item-cod-mobile { display: inline; }
  .os-item-badge { display: none; }
  .os-item-desk { display: none; }
  .os-item-mob { display: inline; }
  .os-item-titulo-menu {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: clip;
  }
}

/* Calendário com o número do dia sobreposto (herda a cor do texto ao redor). */
.cal-ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -4px;
}
.cal-ico .material-icons { font-size: 18px; }
.cal-ico-dia {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

/* Cabeçalho e separador do popover de ações. */
.dropdown-menu-header { padding: 8px 13px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.dropdown-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.dropdown-menu-item-disabled { opacity: .45; cursor: not-allowed; }

.dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  text-align: left;
  width: 100%;
}
.dropdown-menu-item:hover {
  background: var(--bg-elevated-2);
}
.dropdown-menu-item .material-icons {
  font-size: 18px;
  color: var(--text-muted);
}
.dropdown-menu-item-danger {
  color: var(--danger);
}
.dropdown-menu-item-danger .material-icons {
  color: var(--danger);
}

.page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-title .material-icons {
  font-size: 20px;
}

.search-box {
  position: relative;
  flex: 1;
}

/* `input` dentro de `.form-group` é campo de formulário — MENOS caixa de
   marcação. Um checkbox de linha de lista mora num slot que só queria o rótulo
   e o espaçamento do .form-group, e herdava daqui `width:100%` + padding +
   borda: virava um bloco da largura toda (no Safari do iPad com o controle
   desenhado centralizado, o "vazio" que aparecia), comia a largura da linha
   flex e espremia o título até zero. Excluir aqui, e não na classe da linha,
   porque a próxima lista com marcação cairia no mesmo buraco. */
.search-box input,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select,
.tipo-add-row input,
.ambiente-custom-row input,
.amb-custom-row input,
.compra-item-field input,
.compra-prod-search-input,
.os-mdo-row input,
.select-filter {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14.5px;
}

/* input[type=date] nativo é mais alto/"cru" que os demais e no mobile estoura a
   altura; normaliza a aparência para casar com selects/inputs padrão (mesma
   altura e caixa) — mesma técnica de .cond-input-data. */
.select-filter[type="date"],
.form-group input[type="date"],
.os-mdo-row input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  line-height: normal;
}
.select-filter[type="date"]::-webkit-date-and-time-value,
.form-group input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.select-filter[type="date"]::-webkit-calendar-picker-indicator,
.form-group input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; opacity: .7; }

.form-group select,
.select-filter {
  cursor: pointer;
}

.search-box input {
  padding-left: 36px;
  padding-right: 34px;
}

.search-box .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
}
.search-clear.visible {
  display: flex;
}
.search-clear:hover {
  background: var(--bg-elevated-2);
  color: var(--text);
}
.search-clear .material-icons {
  font-size: 16px;
}

.search-box input:focus,
.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group textarea:focus,
.form-group select:focus,
.tipo-add-row input:focus,
.ambiente-custom-row input:focus,
.compra-item-field input:focus,
.compra-prod-search-input:focus,
.os-mdo-row input:focus,
.select-filter:focus {
  outline: none;
  border-color: var(--accent);
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
  cursor: pointer;
}
.checkbox-inline input { cursor: pointer; }

.filters-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.select-filter {
  width: auto;
  cursor: pointer;
}

.loading-state,
.empty-state {
  color: var(--text-muted);
  font-size: 14px;
  padding: 24px 4px;
  text-align: center;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Superfície sólida para grids/listagens tabulares (ex.: tabelas de NFs) — evita
   que o fundo quadriculado da skin apareça atrás dos dados. Reaproveita o estilo
   de card (fundo do tema + raio + sombra sutil), SEM moldura/borda. Funciona nos
   dois temas porque usa tokens tema-aware. */
.list-surface {
  background: var(--bg-elevated);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.list-item:hover {
  border-color: var(--accent);
  background: var(--bg-elevated-2);
}

/* Wrapper interno: a opacidade do estado inativo fica aqui, nunca no .list-item
   (container), para não deixar o fundo translúcido e "vazar" os botões de ação
   posicionados atrás dele quando ainda não revelados por hover/swipe. */
.list-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.list-item-main { flex: 1; min-width: 0; }

.list-item-title {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-item-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item-arrow {
  color: var(--text-muted);
  font-size: 20px;
  flex-shrink: 0;
}

.list-item-inactive {
  opacity: 0.5;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-muted { background: var(--bg-elevated-2); color: var(--text-muted); }
.badge-success { background: rgba(54,194,117,0.15); color: var(--sem-success); }
.badge-danger { background: rgba(255,92,92,0.15); color: var(--sem-danger); }
.badge-info { background: rgba(79,140,255,0.15); color: var(--sem-info); }
.badge-warning { background: rgba(224,167,60,0.18); color: var(--sem-warning); }

/* ============ Formulário ============ */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
/* Formulário largo: usa toda a largura do trilho de conteúdo (igual ao de Propostas) */
.form.form-wide {
  max-width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-group textarea { resize: vertical; font-family: inherit; }

.form-group input:disabled,
.form-group textarea:disabled,
.form-group select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Mobile: reclama largura reduzindo o respiro externo e o padding dos cards de formulário. */
@media (max-width: 768px) {
  .content { padding: 10px; }
  .form-card { padding: 12px; }
}

.card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============ Itens de Kit (formulário) ============ */
/* Usa todo o trilho de conteúdo (como Propostas); a classe .form.form-wide já
   pede 100%, mas o seletor de ID precisa acompanhar para não vencer com 640px. */
#form-kit {
  max-width: 100%;
}

/* Campo com ícone (ex: descrição + lupa de busca no catálogo) */
.input-with-icon {
  position: relative;
  display: flex;
}
.input-with-icon input {
  flex: 1;
  padding-right: 38px;
}
.input-icon-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
}
.input-icon-btn:hover {
  background: var(--bg-elevated-2);
  color: var(--accent);
}
.input-icon-btn .material-icons {
  font-size: 18px;
}

.kit-item-adder-toggle {
  margin-bottom: 4px;
}

.kit-item-adder {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.kit-item-adder .form-group {
  flex: 1;
  min-width: 120px;
  margin-bottom: 0;
}
.kit-item-adder .form-group.kit-item-adder-desc {
  flex-basis: 100%;
}
.kit-item-adder-actions {
  display: flex;
  gap: 8px;
}
.btn-icon-confirm {
  color: var(--success);
}
.btn-icon-cancel {
  color: var(--text-muted);
}

.kit-itens-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kit-item-row {
  display: grid;
  /* Coluna de descrição flexível com min 0 (pode encolher e quebrar o texto);
     numéricas fixas modestas + ações ancoradas — a soma NUNCA estoura o card. */
  grid-template-columns: 24px minmax(0, 1.6fr) 84px 88px 88px 96px 36px;
  grid-template-areas: "drag desc qtd custo venda total actions";
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
/* Alça de arraste (início da linha) — reordenação por drag-and-drop */
.kit-item-drag {
  grid-area: drag;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: grab;
}
.kit-item-drag .material-icons { font-size: 18px; }
.kit-item-dragging { opacity: 0.5; }
.kit-item-dragging .kit-item-drag { cursor: grabbing; }
/* Realce da linha de destino durante o arraste */
.kit-item-drop-target { box-shadow: inset 0 2px 0 0 var(--accent); }
.kit-item-row:last-child {
  border-bottom: none;
}
.kit-item-row[data-item-row] {
  cursor: pointer;
  border-radius: var(--radius);
}
.kit-item-row[data-item-row]:hover {
  background: var(--bg-elevated-2);
}

.kit-item-row-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding-bottom: 6px;
}

/* Descrição do item: NÃO trunca — quebra em várias linhas se necessário */
.kit-item-desc {
  grid-area: desc;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.kit-item-desc-text { min-width: 0; overflow-wrap: anywhere; }
/* Marcadores no fim da descrição */
.kit-item-ico-info { font-size: 16px; color: var(--text-muted); flex: none; cursor: default; }
.kit-item-ico-diverg { font-size: 17px; color: var(--sem-danger); flex: none; cursor: pointer; }

/* Quantidade: botões "-" e "+" ao redor do valor (um de cada lado) */
.kit-item-qtd-stepper {
  grid-area: qtd;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.kit-item-qtd-value {
  font-size: 13px;
  min-width: 18px;
  text-align: center;
}
.kit-item-qtd-arrows {
  display: flex;
  flex-direction: column;
}
.qtd-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 14px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
}
.qtd-arrow-btn:hover:not(:disabled) {
  color: var(--text);
}
.qtd-arrow-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.qtd-arrow-btn .material-icons {
  font-size: 16px;
}

.kit-item-custo-display {
  grid-area: custo;
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kit-item-venda-display {
  grid-area: venda;
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kit-item-total {
  grid-area: total;
  font-size: 13.5px;
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kit-item-row-actions {
  grid-area: actions;
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}
.kit-item-row-actions .btn-icon {
  width: 30px;
  height: 30px;
}
.kit-item-row-actions .btn-icon .material-icons {
  font-size: 18px;
}

/* Linha de totais do grid de itens (última linha da tabela) */
.kit-item-row-totais {
  font-weight: 700;
  border-top: 2px solid var(--border);
  border-bottom: none;
}
.kit-item-row-totais .kit-item-desc {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.3px;
}

/* Margem dos itens — linha simples abaixo do grid, dentro do card "Itens" */
.kit-totais {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kit-totais-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
}

.kit-total-final {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 4px;
}

/* Margem de Produtos (itens, sem mão de obra) — logo acima da Margem total */
.kit-margem-produtos .kit-margem-valor {
  color: var(--success);
  font-weight: 600;
}
.kit-margem-produtos.kit-margem-negativa .kit-margem-valor {
  color: var(--danger);
}

.kit-margem-total .kit-margem-total-valor {
  color: var(--success);
  font-weight: 700;
}
.kit-margem-total.kit-margem-negativa .kit-margem-total-valor {
  color: var(--danger);
}

/* Seção Tipos de Produto (Categorias) — chips removíveis + adicionar */
.chips-removiveis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.chip-removivel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated-2);
  border-radius: 999px;
  padding: 6px 6px 6px 12px;
  font-size: 13px;
}
.chip-removivel.chip-protegido {
  padding-right: 12px;
}
.chip-removivel.chip-protegido .material-icons {
  font-size: 14px;
  color: var(--text-muted);
}
.chip-removivel button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 50%;
}
.chip-removivel button:hover {
  background: var(--bg-elevated);
  color: var(--danger);
}
.chip-removivel .material-icons {
  font-size: 16px;
}
/* Nome do ambiente clicável (renomear) no chip do cliente — anula o estilo
   de botão-círculo genérico do chip. */
.chip-removivel button.cli-amb-nome {
  width: auto;
  height: auto;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.chip-removivel button.cli-amb-nome:hover {
  background: none;
  color: var(--accent);
  text-decoration: underline;
}
.tipo-add-row {
  display: flex;
  gap: 8px;
}
.tipo-add-row input {
  flex: 1;
}

/* ===== Tipos de produto com modelos (form da categoria) ===== */
.tipo-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  margin-bottom: 8px;
  overflow: hidden;
}
.tipo-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.tipo-row-nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tipo-lock {
  font-size: 14px;
  color: var(--text-muted);
}
.tipo-modelos-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.tipo-modelos-toggle:hover { color: var(--text); }
.tipo-modelos-toggle .material-icons { font-size: 16px; }
.tipo-row-btn { width: 26px; height: 26px; }
.tipo-row-btn .material-icons { font-size: 16px; }
.tipo-modelos-bloco {
  border-top: 1px solid var(--border);
  padding: 10px;
  background: var(--bg-elevated-2);
}
.tipo-modelos-bloco[hidden] { display: none !important; }
.modelo-grupo-cfg {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  padding: 8px 10px;
  margin-bottom: 8px;
}
.modelo-grupo-cfg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.modelo-grupo-cfg-titulo {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}
.modelo-grupo-cfg-tam {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--bg-elevated-2);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 4px;
}
.modelo-grupo-cfg-acoes {
  display: inline-flex;
  gap: 2px;
  flex: none;
}
.modelo-grupo-cfg-acoes .btn-icon { width: 26px; height: 26px; }
.modelo-grupo-cfg-acoes .btn-icon .material-icons { font-size: 16px; }
.modelo-grupo-cfg-acoes .btn-icon:disabled { opacity: .3; cursor: default; }

/* Seção Ambientes (Clientes) — lista simples + modal de adição */
.ambientes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.ambiente-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated-2);
  border-radius: var(--radius);
  font-size: 14px;
}
.ambiente-row.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.ambiente-row.dragging { opacity: 0.4; }
.ambiente-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ambiente-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 18px;
  flex-shrink: 0;
}
.ambiente-row .btn-icon {
  width: 32px;
  height: 32px;
}
.ambiente-row .btn-icon .material-icons {
  font-size: 18px;
  color: var(--text-muted);
}
.ambiente-row .btn-icon:hover .material-icons {
  color: var(--danger);
}

/* Fotos do ambiente — thumbnails 60x60 com botão de remover */
.ambiente-fotos-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ambiente-foto-thumb {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  border: 1px solid var(--border);
}
.ambiente-foto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.ambiente-foto-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.ambiente-foto-remove .material-icons { font-size: 13px; }

/* Fotos do item (reaproveita o mesmo padrão visual das fotos de ambiente) */
.item-fotos-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.item-fotos-wrap .ambiente-foto-thumb { width: 60px; height: 60px; }

.ambiente-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.ambiente-modal-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.ambiente-modal-option:hover {
  border-color: var(--accent);
}
.ambiente-modal-option.selected {
  border-color: var(--accent);
  background: rgba(79, 140, 255, 0.12);
}
.ambiente-modal-option .material-icons {
  color: var(--text-muted);
  font-size: 20px;
}
.ambiente-modal-option.selected .material-icons {
  color: var(--accent);
}
.ambiente-custom-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.ambiente-custom-row input {
  flex: 1;
}

/* Módulo Sincronização */
.sync-page .form-card {
  margin-bottom: 12px;
  padding: 24px;
}
.sync-page .form-card:last-child {
  margin-bottom: 0;
}

.sync-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 14px;
}
.sync-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.sync-action-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sync-action-desc {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.sync-backup-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
}
.sync-backup-label:hover {
  text-decoration: underline;
}
.sync-backup-label:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  text-decoration: none;
}
.sync-backup-label .material-icons {
  font-size: 18px;
}

.sync-card-muted {
  opacity: 0.85;
}
.sync-card-muted .card-title {
  font-size: 12px;
}

.sync-danger-zone {
  border-color: var(--danger);
}
.sync-danger-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.backup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.backup-item:last-child {
  border-bottom: none;
}
.backup-item-nome {
  font-size: 13.5px;
  font-weight: 600;
}
.backup-item-obs {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.backup-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.backup-item-actions .btn-icon {
  width: 32px;
  height: 32px;
}
.backup-item-actions .btn-icon .material-icons {
  font-size: 18px;
}

@media (max-width: 768px) {
  .sync-actions-row {
    flex-direction: column;
    align-items: stretch;
  }
  .sync-actions-row .btn {
    width: 100%;
  }
}

/* Chips de filtro multi-categoria (Catálogo, Kits) */
.categoria-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.categoria-chip {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition), background var(--transition), color var(--transition);
}
.categoria-chip:hover {
  color: var(--text);
}
.categoria-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Seções colapsáveis por categoria (Catálogo, Kits) */
.categoria-section {
  margin-bottom: 14px;
  border-left: 4px solid var(--cat-color, var(--accent));
  border-radius: var(--radius);
  background: var(--bg-elevated);
}
.categoria-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  cursor: pointer;
}
.categoria-section-chevron {
  transition: transform var(--transition);
  color: var(--text-muted);
}
.categoria-section-chevron.collapsed {
  transform: rotate(-90deg);
}
.categoria-section-nome {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
}
.categoria-section-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: 999px;
  padding: 2px 9px;
}
.categoria-section-body {
  display: block;
  padding: 0;
  overflow: hidden;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
/* Colapso: o [hidden] precisa vencer o display:block acima (senão a seta não some). */
.categoria-section-body[hidden] { display: none !important; }

/* ===== Listagem compacta de produtos: linhas finas com colunas alinhadas ===== */
/* Grid COMPARTILHADO entre o cabeçalho da categoria e as linhas — colunas:
   código | nome | venda | a receber | estoque | repor | ⋮. Fixas → alinhadas
   entre todas as linhas; nome (1fr) trunca. */
.produto-grid {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 90px 72px 72px 72px 30px;
  align-items: center;
  gap: 8px;
}
/* No cabeçalho, o nome da categoria (chevron + nome + contador) ocupa as
   colunas de código+nome. */
.produto-col-cat {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Rótulo de coluna no cabeçalho: EMPILHADO — ícone em cima, texto pequeno
   uppercase embaixo, centralizado na coluna. */
.produto-col-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.produto-col-label .material-icons { font-size: 15px; }
/* Célula de quantidade da linha: pill CENTRALIZADA na coluna, alinhada ao
   ícone/rótulo do cabeçalho (que também é centralizado). */
.produto-row-qt { display: flex; justify-content: center; }
/* Pill "Repor" com UMA OS de destino: clicável. */
.repor-link { cursor: pointer; }
/* Dentro da seção as linhas ficam flush, sem "card" individual, separadas por
   um divisor fino de 1px. Altura/densidade preservadas (padding 2px, 22px). */
.produto-row {
  padding: 2px 10px;
  min-height: 22px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.categoria-section-body .produto-row:last-child { border-bottom: none; }
/* ⋮ e chip compactos dentro da linha (não forçar a altura de 40px do .btn-icon). */
.produto-row .row-menu-wrapper { justify-self: end; }
.produto-row .row-menu-btn { width: 28px; height: 24px; }
.produto-row .row-menu-btn .material-icons { font-size: 19px; }

.produto-row-nome {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
}

/* Código legível (PREFIXO-0001): coluna própria, mono/muted, SEMPRE visível
   (não trunca), inclusive no mobile. Quem trunca é o nome. */
.produto-row-codigo {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Nome do produto: ocupa o espaço restante e trunca com reticências. */
.produto-row-nome-txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.produto-row-selinho {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  background: rgba(255, 92, 92, 0.15);
  color: var(--sem-danger);
}

.produto-row-venda {
  text-align: center; /* alinhado ao rótulo centralizado do cabeçalho */
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ===== Fotos do produto ===== */
/* Ícone discreto na linha da listagem (produto com foto): abre a principal. */
.produto-foto-ico {
  flex: none;
  font-size: 16px;
  color: var(--text-muted);
  cursor: pointer;
}
.produto-foto-ico:hover { color: var(--accent); }

/* Galeria de miniaturas no card "Fotos" do formulário. */
.produto-fotos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.produto-foto-thumb {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg-elevated-2);
}
.produto-foto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Foto principal: destaque com borda na cor de destaque + badge. */
.produto-foto-thumb.principal { border-color: var(--accent); }
.produto-foto-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 6px;
  border-radius: 999px;
  pointer-events: none;
}
.produto-foto-acoes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 2px;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 0;
}
.produto-foto-acoes .btn-icon {
  width: 26px;
  height: 26px;
  color: #fff;
}
.produto-foto-acoes .btn-icon .material-icons { font-size: 16px; }

/* Setas ‹ › do lightbox quando aberto em modo galeria (fotos do produto). */
.anexo-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anexo-viewer-nav:hover { background: rgba(0, 0, 0, 0.65); }
.anexo-viewer-nav-prev { left: 12px; }
.anexo-viewer-nav-next { right: 12px; }

/* Item inativo: apaga só o CONTEÚDO (texto/chips/seta), NUNCA a camada que desliza
   (.produto-row é o próprio .swipe-content). Assim o fundo continua 100% opaco e as
   ações reveladas no swipe/hover não "vazam" por baixo do texto. Vale em densidade
   normal e compacta. */
.produto-row-inactive > * { opacity: 0.5; }

/* Pills de quantidade da listagem: a receber (cinza) · estoque (verde/vermelha)
   · repor (âmbar). Mesma tipografia/tamanho do .estoque-chip de sempre. */
.estoque-chip-acaminho { background: var(--bg-elevated-2); color: var(--text-muted); }
.estoque-chip-demanda { background: rgba(224, 167, 60, 0.18); color: var(--sem-warning); }
.estoque-chip {
  justify-self: end;
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.estoque-chip-ok   { background: rgba(54, 194, 117, 0.15); color: var(--sem-success); }
.estoque-chip-zero { background: rgba(255, 92, 92, 0.15);  color: var(--sem-danger); }

/* Cards de totais/visões no topo da listagem de produtos (também são o filtro).
   Ativo = borda accent; clicar de novo volta para "Todas". */
.produto-visao-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.produto-visao-card {
  position: relative;
  overflow: hidden; /* a barra colorida respeita o border-radius */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px 14px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Barra colorida à esquerda, por visão */
.produto-visao-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.produto-visao-card[data-visao="areceber"]::before { background: var(--text-muted); }
.produto-visao-card[data-visao="estoque"]::before  { background: var(--sem-success); }
.produto-visao-card[data-visao="repor"]::before    { background: var(--sem-warning); }
.produto-visao-card.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.produto-visao-card-titulo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.produto-visao-card-titulo .material-icons { font-size: 14px; }
.produto-visao-card-num {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.produto-visao-card-un { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.produto-visao-card-valor { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Legenda única acima da lista: no mobile em retrato o cabeçalho da categoria
   fica só com os ícones, e é ela que diz o que cada um significa. Some fora do
   retrato, onde os rótulos por extenso continuam no cabeçalho. */
.produto-legenda { display: none; }
@media (max-width: 768px) {
  .produto-legenda {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 2px 0 8px;
    font-size: 11px;
    color: var(--text-muted);
  }
  .produto-legenda > span { display: inline-flex; align-items: center; gap: 3px; }
  .produto-legenda .material-icons { font-size: 14px; }
}

/* Responsivo — o NOME nunca some. Ordem de encolhimento:
   1) ≤640px esconde "Venda" e "A receber"; 2) ≤440px encurta o código.
   Piso mínimo sempre visível: [código | nome | estoque | repor | ⋮]. */
@media (max-width: 640px) {
  .produto-grid { grid-template-columns: 74px minmax(0, 1fr) 56px 56px 56px 30px; }
  .produto-col-venda { display: none; }
}
@media (max-width: 440px) {
  .produto-grid { grid-template-columns: 62px minmax(0, 1fr) 56px 56px 30px; }
}

/* ===== Produtos no MOBILE (≤768px): lista própria, sem grid de colunas =====
   Nome completo em até duas linhas + "código · tipo" abaixo; estoque e repor
   em colunas de largura fixa, alinhadas aos rótulos do cabeçalho da categoria. */
.produto-row-mob { display: none; }
@media (max-width: 768px) {
  .produto-grid {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* Colunas do desktop somem; sobra o bloco mobile + a receber/estoque/repor + ⋮. */
  .produto-row-codigo, .produto-row-nome, .produto-col-venda { display: none; }
  .produto-row-mob {
    display: block;
    flex: 1;
    min-width: 0;
  }
  .produto-row-mob-nome {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .produto-row-mob-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted);
  }
  .produto-row-mob-cod {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
  }
  .produto-row { padding: 10px 12px; min-height: 0; }
  .categoria-section-header.produto-grid { align-items: flex-end; }
  .produto-col-cat { flex: 1; min-width: 0; }
  /* Três colunas de 30px com gap 6 ocupam MENOS que as duas de 46px com gap 8 —
     o nome do produto não perde largura por causa da coluna nova. */
  .produto-grid { gap: 6px; }
  .produto-col-areceber, .produto-col-estoque, .produto-col-repor { flex: none; width: 30px; }
  /* Cabeçalho da categoria só com o ícone: quem explica é a legenda acima da lista. */
  .produto-col-label-txt { display: none; }
  .produto-grid > span:last-child, .produto-row .row-menu-wrapper { flex: none; width: 26px; }
}

/* ===== Calendário (agenda) =====
   A grade, a lista por dia e o painel de detalhe reaproveitam as classes .fc-*
   do calendário do Fluxo de Caixa. Aqui ficam SÓ as peças que não existem lá:
   o chip do evento na célula do dia e a hora. */
/* Navegação de mês (Calendário e Fluxo de Caixa). Os botões nascem com
   `btn btn-ghost btn-icon`: o ghost traz superfície e borda, mas o .btn-icon vem
   depois no arquivo e zera as duas — sobrava uma seta solta, sem nada que a
   leia como botão. A tinta sempre esteve em --text; o que faltava era o
   controle ter corpo. Devolve a superfície só aqui, sem desfazer o .btn-icon
   para o resto do sistema (especificidade 0,2,0 também ganha da folha que o
   Fluxo de Caixa injeta em runtime). */
.fc-nav-row .btn-icon {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
}
/* A seta é caractere de texto, não ícone de fonte externa, de propósito: a
   trava global `.material-icons { max-width: 1.6em; overflow: hidden }` zera o
   tamanho mínimo do span como flex item, e num aparelho onde a fonte de ícones
   não se aplica o ligature "chevron_left" (131px de conteúdo) era espremido
   para 6px — o botão aparecia vazio. Aqui o conteúdo sempre desenha. */
.fc-nav-seta {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
.fc-nav-row .btn-icon:hover {
  background: var(--bg-elevated-2);
  border-color: var(--accent);
  color: var(--accent);
}

.cal-acoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cal-sem-agenda-n { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Mobile: o botão vira ícone + número — o texto disputaria espaço com
   "Novo evento" na mesma linha. */
@media (max-width: 768px) {
  #cal-btn-sem-agenda .btn-label { display: none; }
}
/* Cabeçalho de cliente na lista do lote: marca/desmarca o grupo inteiro. */
.os-lote-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.os-lote-grupo:hover { background: var(--bg-elevated-2); }
.os-lote-grupo .material-icons { font-size: 18px; color: var(--accent); }
.os-lote-grupo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-lote-grupo-n { flex: none; color: var(--text-muted); font-weight: 600; }
.cal-dia:hover { border-color: var(--accent); }
/* A grade do calendário é montada por SEMANA (uma linha cada) porque a barra da
   OS precisa atravessar dias — coisa que a grade de 7 colunas corrida do Fluxo
   de Caixa não expressa. As células continuam sendo .fc-dia. */
.cal-grade {
  min-width: 560px;
  /* Altura da linha DERIVA das faixas: a célula é dimensionada para caber
     exatamente as faixas visíveis, então nenhuma barra vaza para fora do card.
     O que não couber vira "+N", não transborda. */
  --cal-faixa-h: 19px;
  --cal-faixa-gap: 3px;
  --cal-faixas-topo: 22px;
  --cal-faixas-visiveis: 3;
}
.cal-linha-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
/* Recorte na linha: rede de segurança para fonte grande do sistema — nada
   escapa da semana, nem por acidente. */
.cal-semana { position: relative; margin-top: 4px; overflow: hidden; }
/* Seletor com o pai porque o .fc-dia do Fluxo de Caixa é injetado em <style>
   DEPOIS da folha: mesma especificidade perderia para o min-height dele. */
.cal-grade .cal-dia {
  min-height: calc(var(--cal-faixas-topo)
    + var(--cal-faixas-visiveis) * (var(--cal-faixa-h) + var(--cal-faixa-gap)) + 4px);
}
/* Semana com "+N": a linha ganha a faixa extra onde ele mora, sem roubar
   espaço das barras. */
.cal-grade .cal-semana-com-mais .cal-dia {
  min-height: calc(var(--cal-faixas-topo)
    + var(--cal-faixas-visiveis) * (var(--cal-faixa-h) + var(--cal-faixa-gap)) + 20px);
}
/* Camada das faixas por cima das células: mesma grade de 7 colunas, começando
   abaixo do número do dia. Sem pointer-events, para o clique no vazio cair na
   célula do dia; as barras reativam por conta própria. */
.cal-semana-faixas {
  position: absolute;
  left: 0; right: 0; top: 22px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: var(--cal-faixa-h);
  gap: var(--cal-faixa-gap) 4px;
  align-content: start;
  padding: 0 5px;
  pointer-events: none;
}
.cal-semana-faixas > * { pointer-events: auto; }
.cal-barra {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  height: var(--cal-faixa-h);
  padding: 0 6px;
  border-radius: 4px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
/* OS: tinta informativa, a mesma dos demais reflexos de origem. */
.cal-barra-os, .cal-barra-origem {
  border-left-color: var(--sem-info);
  background: color-mix(in srgb, var(--sem-info) 14%, var(--bg-elevated));
}
/* Pontas cortadas quando o período segue para outra linha da grade. */
.cal-barra-de-antes { border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-barra-continua { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-barra-cont { font-size: 14px; flex: none; color: var(--text-muted); }
.cal-barra-cont-fim { margin-left: auto; }
.cal-mais {
  position: absolute;
  left: 5px; bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.cal-dia { position: relative; }
.cal-mais:hover { color: var(--accent); }
.cal-ev-chip {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
  padding: 1px 5px;
  border-radius: 4px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-size: 11px;
  cursor: pointer;
}
.cal-ev-titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-hora {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cal-detalhe-linha:hover { background: var(--bg-soft); }
.cal-faixa {
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: pointer;
}
/* ⋮ da linha da lista do dia: discreto, ganha peso no hover. */
.cal-item-menu-btn {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
}
.cal-item-menu-btn:hover { color: var(--accent); }
.cal-item-menu-btn .material-icons { font-size: 18px; }

/* Evento vindo de outro registro (OS, compra): mesma forma, tinta informativa.
   Vale tanto para o chip do desktop quanto para a faixa da lista no mobile. */
.cal-ev-chip.cal-ev-origem,
.cal-faixa.cal-ev-origem {
  border-left-color: var(--sem-info);
  background: color-mix(in srgb, var(--sem-info) 12%, transparent);
}

/* Modal de busca no catálogo (Kits) */
.modal-search-box {
  margin-bottom: 12px;
}
.modal-catalogo-list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .kit-item-row {
    grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 40px;
    grid-template-areas:
      "drag desc desc desc desc desc"
      "drag qtd custo venda total actions";
    row-gap: 6px;
  }
  .kit-item-row-header {
    display: none;
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* Mobile: empilha botões, largura total, ordem Salvar → Cancelar → Inativar → Excluir */
@media (max-width: 768px) {
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn {
    width: 100%;
  }
  .form-actions .btn-primary { order: 1; }
  .form-actions .btn-ghost { order: 2; }
  .form-actions .btn-secondary { order: 3; }
  .form-actions .btn-danger { order: 4; }
}

/* ============ Botões de ação em listagens (icon-only no mobile) ============ */
.action-btn .btn-label {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .action-btn {
    padding: 8px;
  }
  .action-btn .btn-label {
    display: none;
  }
}

/* ============ Swipe to action (Clientes, Categorias, Catálogo) ============ */
.swipe-row {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
}

.swipe-actions .action-btn {
  border-radius: 0;
  height: 100%;
  width: 72px;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 8px;
}

.swipe-actions .action-btn .material-icons {
  font-size: 20px;
}

.swipe-content {
  position: relative;
  background: var(--bg-elevated);
  touch-action: pan-y;
  will-change: transform;
}

/* Desktop: passar o mouse revela as ações sem precisar arrastar (mobile usa o swipe). */
@media (hover: hover) {
  .swipe-content {
    transition: transform 0.2s ease;
  }
  .swipe-row:hover .swipe-content {
    transform: translateX(calc(-1 * var(--swipe-actions-width, 144px)));
  }
}

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { filter: brightness(1.1); }
.btn-secondary { background: var(--bg-elevated-2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { filter: brightness(1.08); }

/* ============ Campos somente leitura (ex: Lixeira) ============ */
.profile-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
  margin-bottom: 16px;
}

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
}

.profile-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ============ Densidade das listagens ============ */
body.density-compact .list {
  gap: 4px;
}
body.density-compact .list-item {
  padding: 8px 12px;
}
body.density-compact .list-item-title {
  font-size: 14px;
}
body.density-compact .list-item-sub {
  font-size: 12px;
  margin-top: 0;
}
body.density-compact .swipe-actions .action-btn {
  width: 60px;
}

/* ============ Placeholder de módulo ============ */
.module-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  padding: 60px 20px;
  gap: 8px;
}
.module-placeholder .icon { font-size: 42px; }

/* ============ Grade de ícones (home / Financeiro / Cadastros) ============ */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  padding: 4px;
}

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 16px;
  min-height: 132px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.home-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.home-tile-icon {
  font-size: 40px;
  color: var(--accent);
}

.home-tile-label {
  font-size: 14.5px;
  font-weight: 600;
}

/* ============ Rodapé de ações da sidebar (Lixeira / Commit / Sair) ============ */
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============ Seções da tela Configurações ============ */
.config-section {
  margin-bottom: 22px;
}

.config-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Título próprio da seção substitui o page-header interno dos módulos reaproveitados */
.config-section .page-header { display: none; }

/* ============ Mobile ============ */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close { display: flex; }
  .menu-overlay.open { display: block; }
  #btn-open-menu { display: flex; }
}

@media (min-width: 769px) {
  #btn-open-menu { display: none; }
  /* Recolher a sidebar no desktop (no mobile ela é overlay — não interfere). */
  body.sidebar-collapsed .sidebar { display: none; }
}

/* Botão de ocultar/exibir o menu: só existe no desktop. */
@media (max-width: 768px) {
  #btn-toggle-sidebar { display: none; }
}

@media (max-width: 480px) {
  .page-header { flex-wrap: wrap; }
  .page-header .search-box { flex-basis: 100%; order: 1; }
  .page-header .btn-primary { order: 2; }
}

/* ============ Toast ============ */
.toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  width: calc(100% - 32px);
  max-width: 380px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 14px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition);
  cursor: pointer;
  pointer-events: auto;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-clickable {
  cursor: pointer;
  pointer-events: auto;
  border-color: var(--accent);
}
.toast-clickable:hover { filter: brightness(1.1); }

.toast-icon { font-size: 20px; flex-shrink: 0; }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: #e0a73c; }

.toast-undo {
  pointer-events: auto;
}
.toast-undo-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  padding: 4px;
  margin-left: 4px;
}
.toast-undo-btn:hover { filter: brightness(1.2); }

/* ============ Modal de confirmação ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 20px;
}

/* Overlay bloqueante "Processando..." (TJIUtils.showProcessing/hideProcessing):
   acima de tudo, sem botão de fechar — bloqueia cliques até o hideProcessing. */
.processing-overlay { z-index: 10001; cursor: progress; }
.processing-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.processing-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tji-spin 0.8s linear infinite;
}
.processing-msg { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em; }

.modal-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  width: 100%;
  max-width: 360px;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-box-lg {
  max-width: 480px;
}

/* ===== Janela COM LISTA: usa o espaço da tela =====
   Janela dimensionada pelo conteúdo mais curto deixa a lista com uma fresta de
   altura. Aqui o box para de rolar (overflow:hidden) e quem rola é o container
   da lista — é isso que impede o item de vazar para fora do card. Especificidade
   dupla de propósito: precisa ganhar dos modificadores de módulo (.compra-sel-modal
   e afins), que aparecem depois neste arquivo. */
.modal-box.modal-box-lista {
  width: 100%;
  max-width: min(880px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-box.modal-box-lista > .modal-title,
.modal-box.modal-box-lista > .modal-actions,
.modal-box.modal-box-lista > .search-box,
.modal-box.modal-box-lista > .form-row { flex: none; }
/* O bloco que embrulha a lista precisa ser flex também, senão o flex:1 da lista
   não tem de quem crescer. */
.modal-box.modal-box-lista .modal-lista-slot {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
}
.modal-box.modal-box-lista .os-lote-lista,
.modal-box.modal-box-lista .compra-sel-lista,
.modal-box.modal-box-lista .ambiente-modal-list,
.modal-box.modal-box-lista .modal-catalogo-list,
.modal-box.modal-box-lista .compra-prod-results {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
/* Dentro da janela, o resultado do catálogo é lista EM FLUXO. Fora dela ele é o
   dropdown absoluto que pendura embaixo do campo na linha do item — e era essa
   herança que fazia o resultado escapar do card. */
.modal-box.modal-box-lista .compra-prod-picker {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.modal-box.modal-box-lista .compra-prod-results {
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  margin-top: 8px;
}

/* Mobile: praticamente tela cheia — é o padrão certo para busca com resultado.
   Só a janela com lista muda; as compactas seguem no recuo de sempre. */
@media (max-width: 768px) {
  .modal-overlay:has(.modal-box-lista) { padding: 8px; }
  .modal-box.modal-box-lista {
    max-width: none;
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }
}

/* ============ Visualizador de foto em tela cheia ============ */
.foto-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.foto-viewer-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-sm, 6px);
}
.foto-viewer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.foto-viewer-close:hover { background: rgba(255,255,255,0.24); }
.foto-viewer-close .material-icons { font-size: 22px; }

/* ===== Visualizador de anexos (imagem/PDF inline) ===== */
.anexo-viewer-body {
  display: flex;
  flex-direction: column;
  width: 92vw;
  max-width: 900px;
  height: 90vh;
  gap: 10px;
}
.anexo-viewer-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.anexo-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm, 6px);
}
.anexo-viewer-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-sm, 6px);
  background: #fff;
}
.anexo-viewer-loading,
.anexo-viewer-generic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-align: center;
}
.anexo-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 4px 2px;
}
/* Nome do arquivo ABAIXO da imagem, com a largura toda: nome longo quebra em mais
   de uma linha em vez de ser cortado. */
.anexo-viewer-nome {
  color: #fff;
  font-size: 14px;
  width: 100%;
  text-align: center;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
/* Os dois botões vivem sobre o overlay escuro: fundo e tinta próprios, senão o
   .btn-ghost herda o tema claro e some (tinta branca sobre fundo branco). */
.anexo-viewer-download,
.anexo-viewer-original {
  flex: 0 0 auto;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
.anexo-viewer-download:hover:not(:disabled),
.anexo-viewer-original:hover:not(:disabled) { background: rgba(0, 0, 0, 0.65) !important; }

.modal-box-tall {
  max-height: 85vh;
  min-height: 420px;
}

.modal-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
}
.modal-title-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-title-icon .material-icons {
  font-size: 20px;
  color: var(--accent);
}

.modal-actions-center {
  justify-content: center;
}

.modal-message {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modal-hint {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Picker de pasta OneDrive */
.picker-pasta-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  gap: 4px;
}
.picker-pasta-item:hover {
  background: var(--bg-alt, #f5f5f5);
}
.picker-pasta-item input[type="radio"] {
  margin-right: 6px;
  accent-color: var(--primary);
}
.picker-pasta-item--atual {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.pasta-onedrive-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  min-height: unset;
}

.modal-confirm-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14.5px;
  margin-bottom: 20px;
}
.modal-confirm-input:focus {
  outline: none;
  border-color: var(--accent);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn:disabled:hover {
  filter: none;
}

.btn-small {
  padding: 8px 12px;
  font-size: 13px;
}

/* ============ Abas ============ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
}

.tab {
  background: transparent;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Aba desabilitada por falta de conteúdo: visível, esmaecida, não clicável */
.tab:disabled, .tab.tab-disabled { opacity: 0.4; cursor: not-allowed; }
.tab:disabled:hover, .tab.tab-disabled:hover { color: var(--text-muted); }

/* ============ Lixeira ============ */
.nav-item-trash {
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
}

.trash-group {
  margin-bottom: 24px;
}

.trash-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: none;
}
.trash-group-header .material-icons { font-size: 18px; }
.trash-group-label { flex: 1; }
.trash-group-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-radius: 999px;
  padding: 2px 9px;
  text-transform: none;
}
.trash-group-chevron {
  transition: transform var(--transition);
}
.trash-group-chevron.collapsed {
  transform: rotate(-90deg);
}

.trash-item {
  flex-wrap: wrap;
  cursor: pointer;
}
.trash-item:hover {
  border-color: var(--accent);
  background: var(--bg-elevated-2);
}

.trash-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.trash-item-actions .btn {
  padding: 8px 12px;
  font-size: 13px;
}

.trash-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

/* ===== Lixeira agrupada por cliente ===== */
.trash-cliente-grupo {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  margin-bottom: 12px;
  overflow: hidden;
}
.trash-cliente-header {
  padding: 12px 14px;
  margin-bottom: 0;
  text-transform: none;
  font-size: 15px;
  color: var(--text);
}
.trash-cliente-header .trash-group-label { font-weight: 700; }
.trash-cliente-body {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
}
.trash-cliente-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.trash-selo {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
.trash-selo-danger { background: rgba(255, 92, 92, 0.15); color: var(--sem-danger); }
.trash-selo-muted { background: var(--bg-elevated-2); color: var(--text-muted); }

.trash-subgrupo { margin-bottom: 4px; }
.trash-subgrupo-header {
  padding: 7px 6px;
  margin-bottom: 0;
  font-size: 12px;
}
.trash-vazio-sub {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 6px;
}

.trash-item-trilha {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.trash-trilha-cliente { color: var(--text); font-weight: 600; }
.trash-trilha-sep { color: var(--text-muted); opacity: 0.7; }

/* ===== Financeiro — cards de oportunidade colapsáveis (visão do cliente) ===== */
.fin-oport-chevron.collapsed { transform: rotate(-90deg); }
.fin-oport-header { user-select: none; }

/* ============ Visita Técnica ============ */

/* Listagem de visitas (aba Propostas do cliente) */
.visitas-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.visitas-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.visita-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color var(--transition);
}
.visita-item:hover {
  border-color: var(--accent);
}
.visita-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.visita-icon.status-com-proposta { background: rgba(54, 194, 117, 0.15); }
.visita-icon.status-com-proposta .material-icons { color: var(--success); }
.visita-icon.status-sem-proposta { background: rgba(224, 167, 60, 0.15); }
.visita-icon.status-sem-proposta .material-icons { color: #e0a73c; }
.visita-icon.status-rascunho { background: var(--bg-elevated-2); }
.visita-icon.status-rascunho .material-icons { color: var(--text-muted); }
.visita-info { flex: 1; min-width: 0; }
.visita-titulo {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.visita-badge-proposta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
}
.visita-badge-proposta .material-icons { font-size: 12px; }
.visita-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Header interno do detalhe de visita (dentro da aba Propostas) */
.visita-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.visita-detail-title-wrap { flex: 1; min-width: 0; }
/* Barra de ações da ficha (abaixo do cabeçalho, não imprimível) */
.ficha-action-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 4px;
  flex-wrap: wrap;
}
@media print { .ficha-action-bar { display: none !important; } }
@media (max-width: 768px) {
  .ficha-action-bar .btn-label { display: none; }
  .ficha-action-bar .btn { padding: 6px 8px; }
}

/* PDF iframe inline */
.ficha-pdf-iframe {
  width: 100%;
  height: calc(100vh - 140px);
  border: none;
  display: block;
  border-radius: var(--radius);
}

/* Tela cheia */
.ficha-tela-cheia .sidebar,
.ficha-tela-cheia .topbar,
.ficha-tela-cheia .save-banner,
.ficha-tela-cheia .visita-detail-header,
.ficha-tela-cheia .ficha-action-bar { display: none !important; }
.ficha-tela-cheia .main { padding: 0 !important; }
.ficha-tela-cheia #ficha-conteudo { height: 100vh; }
.ficha-tela-cheia .ficha-pdf-iframe { height: 100vh; border-radius: 0; }

/* Botão flutuante de saída da tela cheia */
.ficha-tela-cheia-exit {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9998;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.visita-detail-title {
  font-size: 16px;
  font-weight: 700;
}
.visita-detail-sub {
  font-size: 13px;
  color: var(--text-muted);
}

/* Resumo (texto monoespaçado) */
.resumo-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  color: var(--text);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

/* Categorias (seções colapsáveis) */
.visita-cat-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.visita-cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}
.visita-cat-header:hover { background: var(--bg-elevated-2); }
.visita-cat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--cat-dim);
}
.visita-cat-icon .material-icons { color: var(--cat-color); font-size: 22px; }
.visita-cat-info { flex: 1; min-width: 0; }
.visita-cat-name { font-weight: 700; font-size: 15.5px; }
.visita-cat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.visita-cat-chevron { transition: transform 0.2s; color: var(--text-muted); }
.visita-cat-chevron.open { transform: rotate(180deg); }
.visita-cat-body {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 12px;
}
.visita-cat-body.open { display: block; }

/* Cômodo card — destaque visual por categoria (borda + header colorido + ícone) */
.comodo-card {
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.comodo-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border-left: 4px solid var(--cat-color);
  background: var(--cat-dim);
}
.comodo-card-header:hover { filter: brightness(0.97); }
.comodo-card.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.comodo-card.dragging { opacity: 0.4; }
.comodo-drag-handle {
  cursor: grab;
  color: var(--text-muted);
  font-size: 18px;
  flex-shrink: 0;
}
.comodo-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-elevated);
}
.comodo-icon .material-icons { color: var(--cat-color); font-size: 18px; }
.comodo-info { flex: 1; min-width: 0; }
.comodo-name { font-weight: 700; font-size: 14px; }
.comodo-count { font-size: 11px; color: var(--cat-color); margin-top: 1px; }
.comodo-card-body {
  display: none;
  border-top: 1px solid var(--border);
  padding: 14px;
  background: var(--bg-elevated-2);
}
.comodo-card-body.open { display: block; }
.comodo-chevron { transition: transform 0.2s; color: var(--text-muted); flex-shrink: 0; }
.comodo-chevron.open { transform: rotate(180deg); }
.comodo-card-remove { flex-shrink: 0; }

/* Item dentro do cômodo */
.item-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
}
.item-adder-inline {
  background: none;
  border: none;
  box-shadow: none;
  padding: 8px 0 0;
}
.item-adder-cancel {
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-dim, rgba(37,99,235,.1)) !important;
}
.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 10px;
}
.item-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cat-dim);
  color: var(--cat-color);
  min-width: 0;
}
.item-tag-edit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.item-tag-edit:hover {
  filter: brightness(1.1);
}
.item-tag-edit .material-icons {
  font-size: 12px;
  flex-shrink: 0;
}
.item-tag > .material-icons:first-child {
  font-size: 13px;
  flex-shrink: 0;
}
.item-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.item-header .btn-xs {
  padding: 5px 9px;
  font-size: 11.5px;
  gap: 3px;
}
.item-header .btn-xs .material-icons {
  font-size: 14px;
}
@media (max-width: 768px) {
  .item-tag-edit {
    text-overflow: ellipsis;
  }
  .item-header .btn-xs {
    padding: 6px;
  }
}

/* Seletor de Modelo em cards agrupados (Interruptor/Tomada Inteligente) */
.modelo-grupos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.modelo-grupo-titulo {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.modelo-grupo-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modelo-opcao {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  font-size: 14px;
  cursor: pointer;
}
.modelo-opcao:hover { border-color: var(--accent); }
.modelo-opcao.active {
  border-color: var(--accent);
  background: rgba(79, 140, 255, 0.15);
  color: var(--accent);
  font-weight: 600;
}
.modelo-selecionado-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  width: 100%;
  text-align: left;
}
.modelo-selecionado-label:hover { border-color: var(--accent); }
.modelo-trocar-icon { margin-left: auto; font-size: 16px; color: var(--text-muted); }

/* Mapeamento de circuitos */
.circ-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.circ-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  width: 18px;
  flex-shrink: 0;
}
.circ-row input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
}
@media (max-width: 768px) {
  .circ-row input { font-size: 12.5px; padding: 6px 6px; }
  .circ-btn { width: 28px; height: 28px; font-size: 13px; }
}
.circ-tipo { display: flex; gap: 4px; flex-shrink: 0; }
.circ-btn {
  width: 32px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circ-btn.active-r { border-color: var(--accent); background: rgba(79, 140, 255, 0.15); }
.circ-btn.active-p { border-color: #e0a73c; background: rgba(224, 167, 60, 0.15); }
.circ-btn.active-t { border-color: var(--success); background: rgba(54, 194, 117, 0.15); }

/* Tags de observação */
.obs-area { margin-top: 10px; }
.obs-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.tag-chip.active {
  border-color: var(--accent);
  background: rgba(79, 140, 255, 0.15);
  color: var(--accent);
  font-weight: 600;
}
.tag-chip .material-icons { font-size: 13px; }
.tag-input-wrap { position: relative; }
.tag-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  z-index: 60;
  max-height: 160px;
  overflow-y: auto;
}
.tag-suggestion-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
.tag-suggestion-item:hover { background: var(--bg-elevated-2); color: var(--accent); }

/* Categoria — grid de chips (Nova Visita / Adicionar Categoria) */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cat-option {
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  background: var(--bg-elevated);
  transition: border-color var(--transition);
}
.cat-option:hover { border-color: var(--accent); }
.cat-option.selected { border-color: var(--accent); background: rgba(79, 140, 255, 0.12); }
.cat-option .material-icons { font-size: 26px; color: var(--accent); display: block; margin-bottom: 4px; }
.cat-option-name { font-size: 12px; font-weight: 600; }

/* Adicionador de item inline — grid de cards de Tipo de Produto (compacto, sem scroll) */
.tipo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 2px;
}
@media (min-width: 480px) {
  .tipo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.tipo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border: none;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, transform 0.12s;
}
.tipo-card:hover {
  background: var(--cat-dim, var(--bg-elevated-2));
  transform: translateY(-1px);
}
.tipo-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cat-dim, rgba(79, 140, 255, 0.12));
}
.tipo-card .material-icons {
  color: var(--cat-color, var(--accent));
  font-size: 17px;
}
.tipo-card-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tipo-card.active {
  box-shadow: 0 0 0 2px var(--cat-color, var(--accent));
  background: var(--cat-dim, rgba(79,140,255,0.12));
}
.tipo-card.active .tipo-card-name {
  color: var(--cat-color, var(--accent));
}
@media (max-width: 768px) {
  .tipo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ambiente (cômodo) — modal "Adicionar Cômodo" */
.amb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.amb-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg-elevated);
}
.amb-option:hover { border-color: var(--accent); }
.amb-option.disabled {
  cursor: default;
  pointer-events: none;
  background: rgba(79, 140, 255, 0.12);
  border-color: var(--accent);
}
.amb-option.disabled .amb-option-name { color: var(--accent); }
.amb-option.disabled .material-icons { color: var(--accent); }
.amb-option.selected {
  background: rgba(79, 140, 255, 0.12);
  border-color: var(--accent);
}
.amb-option.selected .amb-option-name { color: var(--accent); }
.amb-option.selected .material-icons { color: var(--accent); }
.amb-option .material-icons { color: var(--text-muted); font-size: 20px; }
.amb-option-name { font-size: 14px; font-weight: 600; }
.amb-option-status { font-size: 11px; color: var(--text-muted); }

/* Chips de seleção (renderChipGroup / renderToggleSimNao) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  transition: all 0.15s;
}
.chip:hover { border-color: var(--accent); }
.chip.active {
  background: rgba(79, 140, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* Preview de seções no modal Gerar Proposta */
.gerar-proposta-preview {
  background: var(--bg-elevated-2);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 4px;
}
.gerar-proposta-preview-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}
.gerar-proposta-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 0;
}
.gerar-proposta-preview-row .material-icons { font-size: 16px; }
.gerar-proposta-preview-row .gerar-proposta-count { margin-left: auto; color: var(--text-muted); }
.gerar-proposta-preview-row.sem-itens { color: var(--text-muted); }

/* ============ Módulo Oportunidades ============ */
.oport-funil {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .oport-funil { grid-template-columns: repeat(2, 1fr); }
}
.oport-funil-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  border-top: 3px solid var(--cor, var(--accent));
  transition: box-shadow 0.15s, border-color 0.15s;
}
.oport-funil-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.oport-funil-card-ativo {
  border-color: var(--cor, var(--accent));
  box-shadow: 0 0 0 2px var(--cor, var(--accent));
  background: var(--bg-elevated-2);
}
.oport-readonly-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--warning-dim, rgba(224,167,60,0.12));
  color: var(--warning, #e0a73c);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 12px;
}
.oport-funil-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.oport-funil-count {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.oport-funil-valor {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.oport-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
}
.oport-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--cor, var(--accent));
  flex-shrink: 0;
}
.oport-card-info {
  flex: 1;
  min-width: 0;
}
.oport-card-nome {
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.oport-temp-icon {
  font-size: 16px !important;
  flex-shrink: 0;
}
.oport-card-cats {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.oport-vinculado-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--info-dim, rgba(79,140,255,0.1));
  color: var(--info, #4f8cff);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  margin-bottom: 12px;
}
.oport-card-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oport-card-valor {
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  margin-top: 2px;
}

.oport-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.oport-status-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.oport-status-chip.active {
  border-color: var(--cor, var(--accent));
  background: var(--cor-dim, rgba(79,140,255,0.12));
  color: var(--cor, var(--accent));
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-left: 2px solid var(--border);
  padding-left: 14px;
  margin-left: 6px;
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.timeline-item-texto {
  font-size: 13.5px;
}
.timeline-item-data {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Campo com prefixo (ex: R$) */
.input-prefix-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  overflow: hidden;
}
.input-prefix-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.input-prefix {
  padding: 0 10px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--bg-elevated-2);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  height: 100%;
  display: flex;
  align-items: center;
  align-self: stretch;
}
.input-prefix-wrap input {
  width: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.input-prefix-wrap input:focus {
  outline: none;
  box-shadow: none;
}

.oport-detail-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}
.oport-detail-empty .material-icons {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
}

/* ============ Ambientes da Oportunidade ============ */

.oport-ambientes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 10px;
}
.oport-ambiente-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 6px 2px 10px;
  font-size: 12.5px;
  color: var(--text);
}
.oport-ambiente-chip .btn-icon {
  padding: 0;
  width: 18px;
  height: 18px;
  min-width: 0;
}

/* ============ Módulo Propostas ============ */

.prop-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.prop-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.prop-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.prop-card-info {
  flex: 1;
  min-width: 0;
}
.prop-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prop-card-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.prop-chevron {
  font-size: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.prop-card-body {
  border-top: 1px solid var(--border);
  padding: 14px;
  background: var(--bg);
}
.prop-card.open .prop-card-body {
  display: block;
}

/* Card de condições de pagamento — sempre expandido */
.prop-cond-card {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.prop-cond-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Detalhamento de Produtos e Serviços — pode usar até ~900px (um pouco mais
   largo que o form padrão), sem esticar além do card da proposta. */
/* Prompt 24: o detalhamento tem a MESMA largura da seção de condições de pagamento. */

/* Quadros do detalhamento */
.comp-quadro {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  margin-bottom: 10px;
}
.comp-quadro-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-elevated-2);
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
}
.comp-setas { display: inline-flex; flex: none; }
.comp-seta {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: none; background: none; padding: 0;
  color: var(--text-muted); cursor: pointer; border-radius: 4px;
}
.comp-seta:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text); }
.comp-seta:disabled { opacity: .3; cursor: default; }
.comp-seta .material-icons { font-size: 15px; }
/* Input inline "transparente": borda só no hover/focus, focus com anel do accent */
.comp-inline-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  font: inherit; font-size: 13px;
  color: var(--text);
  min-width: 0;
}
.comp-inline-input:hover:not([readonly]) { border-color: var(--border); }
.comp-inline-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 140, 255, .22);
  background: var(--bg-elevated);
}
.comp-quadro-nome { flex: 1; font-weight: 700; }
.comp-quadro-subtotal { font-weight: 700; font-size: 13px; white-space: nowrap; margin-left: auto; }
/* Linhas de item — filete fino sólido (leitura em tabela, como o resumo) */
.comp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
}
.comp-item:last-child { border-bottom: none; }
/* A linha de MO é sempre a última do quadro, mas tem o MESMO tratamento de
   borda das demais linhas. */
.comp-item.comp-item-mo:last-child { border-bottom: 1px solid var(--border); }
.comp-item-nome { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.comp-item-nome .comp-inline-input { flex: 1; min-width: 0; }
/* Renomeado: clicável — restaura o nome original do cadastro */
.comp-ico-renome { font-size: 15px; color: var(--text-muted); flex: none; cursor: pointer; }
.comp-ico-renome:hover { color: var(--text); }
/* Origem do item: ícone p/ catálogo (produto/kit); chip p/ customizado */
.comp-item-ico-cat { font-size: 14px; color: var(--text-muted); flex: none; cursor: default; }
.comp-chip-custom { font-size: 10px; padding: 1px 6px; flex: none; cursor: default; }
/* Stepper de quantidade: botão − à esquerda, + à direita, campo central
   estreito e centralizado; borda do CONJUNTO só no hover/focus */
.comp-qtd-stepper {
  width: 84px;
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
}
.comp-qtd-stepper:hover:has(.comp-item-qtd:not([readonly])),
.comp-qtd-stepper:focus-within { border-color: var(--border); }
.comp-item-qtd {
  width: 32px;
  min-width: 0;
  flex: 1;
  text-align: center;
  padding: 4px 2px;
  appearance: textfield;
  -moz-appearance: textfield;
}
.comp-item-qtd::-webkit-outer-spin-button,
.comp-item-qtd::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* A borda/anel individual do input some — quem sinaliza é o conjunto */
.comp-item-qtd:hover:not([readonly]),
.comp-item-qtd:focus { border-color: transparent; box-shadow: none; background: transparent; }
.qtd-side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 22px;
  flex: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 6px;
}
.qtd-side-btn:hover { color: var(--text); background: var(--bg-elevated); }
.qtd-side-btn .material-icons { font-size: 14px; }
/* Coluna de custo unitário (análise de margem ligada) — antes do Unitário */
.comp-item-custo { width: 90px; flex: none; text-align: right; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.comp-item-unit { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.comp-item-unit-input { width: 108px; text-align: right; }
/* Unitário travado pela precificação (custo/sem custo): display somente leitura */
.comp-item-unit-display {
  width: 108px;
  text-align: right;
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 4px 6px;
}
.comp-ico-difere { font-size: 16px; color: var(--sem-warning); cursor: pointer; flex: none; }
.comp-item-total {
  min-width: 92px;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
/* Coluna Serviço (mão de obra por item) — entre o valor unitário e o total. */
.comp-item-mo-un {
  width: 96px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.comp-item-mo-input { width: 100%; min-width: 0; text-align: right; }
/* Linha de MO em "item a item": o total calculado vive na coluna Serviço. */
.comp-item-mo-total { flex-direction: column; align-items: flex-end; justify-content: center; font-weight: 700; font-size: 13px; line-height: 1.25; }
/* Item avulso: ícone próprio no lugar da antiga etiqueta "customizado". */
.comp-item-ico-custom { color: var(--text-muted); }
/* Valor livre digitado na própria linha de MO. */
.comp-mo-livre-input { width: 92px; text-align: right; font-weight: 700; }
.comp-item-fornecido-txt { font-size: 10.5px; text-align: right; color: var(--text-muted); padding: 0; }
/* Rodapé do quadro: "Total" com os números sob as colunas do grid. */
.comp-foot-linha {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.comp-foot-linha .c-item { flex: 1; min-width: 0; }
.comp-foot-linha .c-qtd { width: 84px; text-align: center; flex: none; }
.comp-foot-linha .c-custo { width: 90px; text-align: right; flex: none; }
.comp-foot-linha .c-unit { width: 108px; text-align: right; flex: none; }
.comp-foot-linha .c-mo { width: 96px; text-align: right; flex: none; }
.comp-foot-linha .c-total { min-width: 92px; text-align: right; flex: none; }
.comp-foot-linha .c-margem { width: 100px; flex: none; }
.comp-foot-linha .c-espaco-menu { width: 28px; flex: none; }
.comp-foot-rot { font-size: 12.5px; font-weight: 700; color: var(--text); }
.comp-foot-num { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.comp-foot-sub { font-weight: 700; }
.comp-foot-margem { width: 100%; text-align: right; font-size: 12px; color: var(--text-muted); }
/* Setas ocultas da linha de MO (ela não se move) — só o espaço, p/ alinhar. */
.comp-setas-vazias { width: 44px; flex: none; }

/* Linha de MÃO DE OBRA do quadro */
.comp-mo-chip {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  background: var(--bg-elevated-2);
  color: var(--text-muted);
  flex: none;
}
.comp-mo-selo { font-size: 10px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
/* Tag de classificação da linha customizada (Produto × Serviço) — clicável */
.comp-classe-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex: none;
}
.comp-classe-tag:hover:not(:disabled) { color: var(--text); border-color: var(--text-muted); }
.comp-classe-tag:disabled { cursor: default; }
/* Popup "Mão de obra calculada" */
.mo-calc-modal { max-width: 680px; }
.mo-calc-grid { border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.mo-calc-row {
  display: grid;
  grid-template-columns: 1fr 40px 150px 90px;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.mo-calc-row:last-child { border-bottom: none; }
.mo-calc-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.mo-calc-row span:nth-child(2) { text-align: center; }
.mo-calc-row span:nth-child(4), .mo-calc-tot { text-align: right; }
/* Nome pode quebrar em até 2 linhas — nunca corta com reticências */
.mo-calc-nome { min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
/* Stepper de valor do MO/un: −/+ dos lados (mesmo padrão do stepper de qtd) */
.mo-calc-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
}
.mo-calc-stepper:hover,
.mo-calc-stepper:focus-within { border-color: var(--border); }
.mo-calc-input { flex: 1; min-width: 0; width: auto; text-align: right; padding: 4px 2px; }
.mo-calc-input:hover,
.mo-calc-input:focus { border-color: transparent; box-shadow: none; background: transparent; }
.mo-calc-geral { font-weight: 700; border-top: 1px solid var(--border); }
/* Fornecido pelo cliente: qtd/unitário esmaecidos e travados; texto editável à direita */
.comp-item-fornecido .comp-item-qtd,
.comp-item-fornecido .comp-item-unit-input { opacity: .45; pointer-events: none; }
.comp-item-fornecido-txt { width: 190px; text-align: right; color: var(--sem-info); flex: none; }
/* Rodapé do quadro (adicionar itens + subtotal) */
.comp-quadro-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.comp-foot-tot { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--text-muted); }
.comp-foot-tot b { color: var(--text); }
.comp-picker { flex-basis: 100%; }
/* Lista de versões guardadas do detalhamento */
.comp-versoes-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.comp-versao-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.comp-versao-data { font-size: 13px; font-weight: 600; }
.comp-versao-motivo { font-size: 11.5px; color: var(--text-muted); }
.comp-versao-item .btn { margin-left: auto; }

/* Menu ⋮ com grupos de escolha única (linha de mão de obra) */
.dropdown-menu-grupo {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 10px 3px;
}
.dropdown-menu-sep { height: 1px; background: var(--border); margin: 5px 6px; }
.dropdown-menu-item.active .material-icons { color: var(--accent); }

/* Pílula "Separar produtos × serviços" — neutra/cinza quando ativa (sem accent) */
.comp-flag-ps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.comp-flag-ps.ativa {
  border-color: var(--text-muted);
  background: var(--bg-elevated-2);
  color: var(--text);
}
.comp-flag-ps .material-icons { font-size: 14px; }
/* Configurações da proposta (modal da engrenagem) */
.comp-cfg-grupo { margin-bottom: 16px; }
.comp-cfg-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.comp-cfg-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.comp-cfg-pill.ativa { font-weight: 700; }
.comp-cfg-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
/* Linha-resumo das configurações não-default, sob o header da seção */
.comp-cfg-resumo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 2px 0 10px;
}
.comp-cfg-resumo-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--bg-elevated-2);
  white-space: nowrap;
}
/* Cabeçalho de colunas (análise de margem ligada) */
.comp-cols-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--border);
}
.comp-cols-head .c-espaco-setas { width: 44px; flex: none; }
.comp-cols-head .c-item { flex: 1; min-width: 0; }
.comp-cols-head .c-qtd { width: 84px; text-align: center; flex: none; }
.comp-cols-head .c-custo { width: 90px; text-align: right; flex: none; }
.comp-cols-head .c-unit { width: 108px; text-align: right; flex: none; }
.comp-cols-head .c-mo { width: 96px; text-align: right; flex: none; }
.comp-cols-head .c-total { min-width: 92px; text-align: right; flex: none; }
.comp-cols-head .c-margem { width: 100px; text-align: right; flex: none; }
.comp-cols-head .c-espaco-menu { width: 28px; flex: none; }
/* Coluna de margem do item (depois do Total, antes do ⋮) */
.comp-item-margem {
  width: 100px;
  flex: none;
  text-align: right;
  font-size: 11.5px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* Card de total geral no fim da seção */
.comp-total-card {
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 10px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.comp-total-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.comp-total-valor { font-size: 14px; font-weight: 600; }
.comp-total-geral { margin-left: auto; text-align: right; }
.comp-total-geral .comp-total-valor { font-size: 20px; font-weight: 700; color: var(--primary); }
/* ===== Visualização p/ copiar (espelho do slide do PPT) =====
   Cores FIXAS (fundo branco, texto escuro), independentes do tema. */
.comp-ppt-modal {
  background: #fff;
  color: #1a1a1a;
  border-color: #ddd;
  max-width: 860px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.comp-ppt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #e3e3e3;
  flex-wrap: wrap;
}
.comp-ppt-body { padding: 16px; overflow-y: auto; }
/* Controles da toolbar em cores fixas (o tema escuro não vale aqui dentro) */
.comp-ppt-modal .btn-secondary { background: #efefef; color: #1a1a1a; border: 1px solid #ccc; }
.comp-ppt-modal .btn-ghost { background: transparent; color: #1a1a1a; border: 1px solid #ccc; }
.comp-ppt-modal .comp-flag-ps { color: #666; border-color: #ccc; background: transparent; }
.comp-ppt-modal .comp-flag-ps.ativa { color: #1a1a1a; border-color: #999; background: #e9e9e9; }
/* Linhas da visualização: nome + colunas na ordem do detalhamento
   (Qtd · Valor un. · Serviço · Total). As colunas presentes dependem das
   configurações da janela — por isso flex, e não grid de largura fixa. */
.ppt-linha { display: flex; align-items: baseline; gap: 10px; }
.ppt-linha .ppt-nome { flex: 1; min-width: 0; }
.ppt-c { width: 96px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.ppt-c-qtd { width: 56px; }
/* Valor un. mais larga: cabe o texto digitado do fornecido pelo cliente. */
.ppt-c-val { width: 138px; }
.ppt-c-lbl {
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
/* Ocultar coluna: duplo clique no título (nada de ícone — ele apareceria na
   imagem que vai para o cliente). */
.ppt-c-lbl[data-ppt-ocultar] { cursor: pointer; user-select: none; }
.ppt-faixa {
  background: #d9d9d9;
  color: #1a1a1a;
  padding: 5px 10px;
  font-size: 13px;
  margin-top: 16px;
  font-weight: 700;
}
.comp-ppt-body .ppt-quadro:first-child .ppt-faixa { margin-top: 0; }
/* Uma linha a mais de respiro entre os quadros. */
.ppt-quadro { margin-bottom: 26px; }
.comp-ppt-body .ppt-quadro:last-child { margin-bottom: 0; }
/* Borda entre as linhas, igual à do quadro de resumo. */
.ppt-item { padding: 5px 10px; font-size: 13px; border-bottom: 1px solid #eee; }
.ppt-item .ppt-nome { padding-left: 12px; }
.ppt-forn { color: #2e86de; }
/* A última linha antes do total não leva borda dupla (mesmo acabamento do resumo). */
.ppt-item:has(+ .ppt-total-row) { border-bottom: none; }
.ppt-total-row { border-top: 1px solid #999; margin-top: 4px; padding-top: 5px; font-weight: 700; border-bottom: none; }
.ppt-total-row .ppt-nome { padding-left: 0; }
/* Primeira linha da janela: as configurações, sempre visíveis */
.ppt-cfg-barra {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid #e3e3e3;
  background: #fafafa;
}
.ppt-cfg-g { display: inline-flex; align-items: center; gap: 6px; }
.ppt-cfg-rot { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #666; }
.ppt-seg { display: inline-flex; border: 1px solid #ccc; border-radius: 7px; overflow: hidden; }
.ppt-seg button {
  border: none;
  background: #fff;
  color: #666;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  cursor: pointer;
}
.ppt-seg button.ativo { background: #1a1a1a; color: #fff; }
.ppt-seg button:disabled { opacity: .4; cursor: not-allowed; }
/* Etiquetas das colunas ocultadas — o caminho de volta */
.ppt-cfg-ocultas { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #666; }
.ppt-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.ppt-pill .material-icons { font-size: 13px; color: #666; }
.ppt-resumo-titulo { font-weight: 700; margin: 18px 0 6px; font-size: 13px; }
.ppt-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.ppt-tabela th {
  background: #d9d9d9;
  color: #1a1a1a;
  font-size: 11px;
  padding: 5px 10px;
  text-align: right;
}
.ppt-tabela th:first-child { text-align: left; }
.ppt-tabela td { padding: 4px 10px; text-align: right; border-bottom: 1px solid #eee; }
.ppt-tabela td:first-child { text-align: left; }
.ppt-tabela .ppt-tg td { font-weight: 700; border-top: 2px solid #666; border-bottom: none; }
/* Mobile: nome em cima; qtd/unitário/total na linha de baixo (setas e ⋮ nas laterais);
   coluna/cabeçalho de margem ficam ocultos. */
.comp-item-l2 { display: contents; }
@media (max-width: 640px) {
  .comp-item { flex-wrap: wrap; }
  .comp-item-l2 {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: flex-end;
  }
  .comp-cols-head, .comp-item-margem, .comp-item-custo { display: none !important; }
}

/* Grid de condições de pagamento */
.cond-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: auto;
}

.cond-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 130px 150px auto;
  gap: 8px;
  align-items: center;
  min-width: 480px;
}
.cond-row--ro {
  grid-template-columns: minmax(0, 1fr) 64px 130px 150px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
}
.cond-row--ro:last-child { border-bottom: none; }

.cond-row input {
  width: 100%;
  padding: var(--input-padding, 8px 10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-input, var(--bg));
  color: var(--text);
  font-size: var(--font-sm, 13px);
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.cond-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light, rgba(79,140,255,.18));
}

/* Datepicker (input[type=date]) — no mobile/iOS o controle nativo tem largura
   intrínseca grande e ignora width:100%, estourando a célula e às vezes exibindo
   vazio. Normalizamos a aparência para que respeite o container, mostre o valor e
   continue tocável para abrir o calendário. */
.cond-input-data {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  min-height: 38px;
  line-height: normal;
}
.cond-input-data::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
.cond-input-data::-webkit-calendar-picker-indicator {
  margin-left: auto;
  opacity: .7;
}

/* Placeholder sobreposto para o datepicker NATIVO (input[type=date] não aceita
   placeholder de texto). Mostrado só quando o campo está vazio; some ao escolher
   uma data. Mantém o seletor nativo do iOS. Cinza (--text-muted) nos dois temas. */
.cond-data-wrap {
  position: relative;
  min-width: 0;
  display: flex;
}
.cond-data-wrap .cond-input-data { flex: 1; }
.cond-data-ph {
  position: absolute;
  left: 11px;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cond-data-wrap.has-value .cond-data-ph { display: none; }
/* Enquanto vazio, oculta o texto nativo (dd/mm/aaaa) para o placeholder aparecer. */
.cond-data-wrap:not(.has-value) .cond-input-data::-webkit-datetime-edit { color: transparent; }

/* Células read-only */
.cond-cell-desc  { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cond-cell-pct   { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cond-cell-valor { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cond-cell-data  { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Botões de ação lado a lado */
.cond-actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
}

/* Mobile: card empilhado */
@media (max-width: 640px) {
  .cond-row,
  .cond-row--ro {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    gap: 6px 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2, var(--surface));
  }
  .cond-row--ro { border-bottom: none; }
  .cond-input-desc,
  .cond-cell-desc  { grid-column: 1 / -1; }
  .cond-input-data,
  .cond-data-wrap,
  .cond-cell-data  { grid-column: 1 / -1; }
  .cond-actions    { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Mobile: ocultar badge de status na linha de parcela */
@media (max-width: 600px) {
  .parc-status-badge { display: none; }
}

/* Anexos */
.anexos-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anexo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.anexo-icon {
  font-size: 20px;
  color: var(--primary);
  flex-shrink: 0;
}
.anexo-info {
  flex: 1;
  min-width: 0;
}
.anexo-nome {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anexo-data {
  font-size: 11px;
  color: var(--text-muted);
}
.anexo-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.btn-xs {
  padding: 4px 8px;
  font-size: 12px;
  gap: 4px;
}
.btn-xs .material-icons {
  font-size: 14px;
}

/* ===== Tela Adicionar Ambiente (fichas) ===== */
.amb-select-section {
  margin-bottom: 8px;
}
.amb-select-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: 6px 0 2px;
}
.amb-select-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.amb-select-row:hover:not(.disabled) {
  background: var(--surface-alt);
}
.amb-select-row.selected {
  background: rgba(79,140,255,.08);
}
.amb-select-row.disabled {
  cursor: default;
  opacity: .55;
}
.amb-cb-icon {
  color: var(--text-muted);
  font-size: 22px;
  flex-shrink: 0;
}
.amb-select-row.selected .amb-cb-icon {
  color: var(--accent);
}
.amb-select-name {
  flex: 1;
  font-size: 15px;
}
.amb-select-note {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.amb-custom-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.amb-custom-row input {
  width: auto;
  flex: 1;
}

/* ============ Compras (pedidos de compra) ============ */

/* Campo de filtro rotulado (De/Até) na linha de filtros — usa .select-filter no
   controle e um rótulo pequeno em cima, no padrão dos demais filtros. */
.filter-field {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}
/* Colapso: o [hidden] precisa vencer o display:inline-flex acima (senão os
   campos De/Até das Compras aparecem fora do período Personalizado). */
.filter-field[hidden] { display: none !important; }
.filter-field > .filter-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Linha de pedido: usa .list-item (card/hover/densidade) + layout responsivo. */
.compra-list-item { display: flex; align-items: center; gap: 12px; }
/* Fundo da linha na cor do status (tints do STATUS_META do módulo; cotação mantém
   o padrão --bg-elevated). Hover intensifica o próprio tint. */
/* Cor SÓLIDA (sem alpha): mesma tonalidade via color-mix sobre o fundo do tema. */
.compra-list-item.compra-status-enviado        { background: color-mix(in srgb, #e0a73c 12%, var(--bg-elevated)); }
.compra-list-item.compra-status-enviado:hover  { background: color-mix(in srgb, #e0a73c 20%, var(--bg-elevated)); }
.compra-list-item.compra-status-recebido       { background: color-mix(in srgb, #36c275 10%, var(--bg-elevated)); }
.compra-list-item.compra-status-recebido:hover { background: color-mix(in srgb, #36c275 18%, var(--bg-elevated)); }
.compra-list-item.compra-status-cancelado      { background: color-mix(in srgb, #ff5c5c 10%, var(--bg-elevated)); }
.compra-list-item.compra-status-cancelado:hover{ background: color-mix(in srgb, #ff5c5c 18%, var(--bg-elevated)); }

/* Badge de data em 3 linhas (dia/mês/ano) — dia menor para o conjunto ficar com a
   mesma altura das 2 linhas do conteúdo ao lado. */
.compra-data-badge {
  flex: none;
  width: 46px;
  text-align: center;
  line-height: 1.15;
}
.compra-data-badge .compra-dia { font-size: 16px; font-weight: 700; }
.compra-data-badge .compra-mes {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.compra-data-badge .compra-ano { font-size: 10px; color: var(--text-muted); }

.compra-row-body { flex: 1; min-width: 0; }
.compra-row-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.compra-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14.5px;
}
/* Badge de status e valor no mesmo eixo (aside, centrados verticalmente). */
.compra-row-aside { flex: none; display: flex; align-items: center; gap: 8px; }
.compra-row-aside .badge { flex: none; }
.compra-total {
  text-align: right;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

/* Nº interno do pedido (PED-NNN) como prefixo discreto no título da lista. */
.compra-codigo {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
body.density-compact .compra-data-badge .compra-dia { font-size: 14px; }

/* Mobile: distribuição CONSISTENTE em TODAS as linhas — data à esquerda (fixa),
   conteúdo ao lado ocupando o espaço, e a faixa com badge de status + valor + menu ⋮
   SEMPRE numa faixa inferior alinhada à direita (mesmo padrão para todo card, sem uns
   com o valor ao lado e outros embaixo). `order` + basis 100% no aside força a quebra
   de forma igual, independente do tamanho do fornecedor/título. */
@media (max-width: 768px) {
  .compra-list-item { flex-wrap: wrap; align-items: flex-start; }
  .compra-data-badge { order: 1; }
  .compra-row-body { order: 2; flex: 1 1 0; min-width: 0; }
  .compra-row-aside {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-end;
    margin-top: 6px;
    margin-left: 58px; /* alinha sob o conteúdo, após o badge de data (46 + gap 12) */
  }
}

/* Filtros de data (De/Até) — largura adequada no mobile (não colapsar). */
.filter-field .select-filter { width: 100%; }
@media (max-width: 640px) {
  .compras-filtros .select-filter,
  .compras-filtros .filter-field { flex: 1 1 140px; min-width: 130px; }
}

/* ====== Botão "Filtros" + painel recolhível (só mobile) ======
   Desktop: filtros sempre à vista (como hoje) e o botão fica oculto (sem efeito).
   Mobile: filtros recolhidos por padrão dentro de um painel tipo card; o botão
   "Filtros (N)" abre/fecha o painel inline (empurra a lista para baixo). */
#btn-toggle-filtros { display: none; }
@media (max-width: 768px) {
  #btn-toggle-filtros { display: inline-flex; }

  /* Topo da lista de Compras no mobile: busca ocupa a 1ª linha inteira; "Novo pedido"
     e "Filtros" ficam JUNTOS na MESMA linha abaixo (Novo à esquerda ocupando o espaço,
     Filtros à direita). No desktop mantém tudo na mesma linha (regra base). */
  .compras-header { flex-wrap: wrap; }
  .compras-header .search-box { order: 1; flex: 1 1 100%; }
  .compras-header #btn-novo-pedido { order: 2; flex: 1 1 auto; justify-content: center; }
  .compras-header #btn-toggle-filtros { order: 3; flex: 0 0 auto; }

  .compras-filtros.filtros-recolhiveis { display: none; }
  .compras-filtros.filtros-recolhiveis.aberto {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
  }
  /* Selects organizados ~2 por linha, sem estourar a largura. */
  .compras-filtros.filtros-recolhiveis.aberto .select-filter,
  .compras-filtros.filtros-recolhiveis.aberto .filter-field {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
  .compras-filtros.filtros-recolhiveis.aberto .filter-field .select-filter {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Editor de itens do pedido — grid responsivo, SEM scroll horizontal. Colunas:
   Produto · Qtd · Custo un. · Custo total · A receber · Estoque · Repor · remover.
   O NOME tem prioridade de largura (1fr); as numéricas são fixas e curtas.
   O layout é escolhido pela LARGURA REAL do quadro (container query), não pelo
   aparelho: celular deitado tem largura de sobra e usa as colunas. */
.compra-itens-wrap { container-type: inline-size; container-name: compraitens; }
.compra-itens { display: flex; flex-direction: column; }
.compra-itens-head,
.compra-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px 104px 104px 58px 58px 58px 36px;
  gap: 10px;
  align-items: start;
}
.compra-itens-head {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 0 6px;
}
/* Dinheiro à DIREITA (cabeçalho e conteúdo), como nas Propostas. A Qtd é a
   exceção: coluna de largura fixa com o conteúdo CENTRALIZADO — com os botões
   − e + na célula, alinhar à direita descola o cabeçalho do controle. */
.compra-itens-head .col-custo,
.compra-itens-head .col-final { text-align: right; }
.compra-itens-head .col-qtd { text-align: center; }
.compra-itens-head .col-arec { text-align: center; }
.compra-itens-head .col-est, .compra-itens-head .col-rep { text-align: center; }
.compra-itens-head .col-arec, .compra-itens-head .col-est, .compra-itens-head .col-rep { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compra-item {
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.compra-item-field { min-width: 0; }
.compra-item-field > .compra-item-label {
  display: none;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.compra-item-field input,
.compra-item-field select { width: 100%; }
.compra-item-final {
  text-align: right;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  padding-top: 6px;
}
.compra-item-qtd, .compra-item-custo { padding-top: 2px; }
.compra-item-qtd { text-align: center; }
.item-qtd-ro, .item-custo-ro { padding-top: 4px; font-size: 13px; }
.compra-item-remove { justify-self: center; align-self: start; margin-top: 3px; }
/* Quantidade com passo: reaproveita .comp-qtd-stepper/.qtd-side-btn das Propostas
   (borda só no hover/foco). O conjunto fica centralizado na coluna. */
.item-qtd-wrap { margin: 0 auto; }
/* Campos da linha em texto integrado (.comp-inline-input): sem caixa no repouso. */
.compra-item-custo .item-custo { width: 100%; text-align: right; }
.compra-item-final, .item-custo-ro { text-align: right; }
/* Preço de compra do cadastro, sob o custo digitado (referência de comparação). */
.item-custo-ref { display: block; margin-top: 2px; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; text-align: right; }
/* Nome do produto em modo leitura: texto puro, sem moldura de campo. */
.compra-prod-chosen-ro { display: block; border: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
/* Campos da linha no estilo do quadro de Propostas: SEM borda no repouso — o
   contorno do hover/foco vem de box-shadow, que não desloca o layout. */
.compra-item .comp-inline-input,
.compra-item .compra-prod-chosen {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  font-size: 13px;
}
.compra-item .comp-inline-input:hover:not([readonly]):not(:disabled),
.compra-item .compra-prod-chosen:hover { box-shadow: inset 0 0 0 1px var(--border); }
.compra-item .comp-inline-input:focus,
.compra-item .compra-prod-chosen:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 2px rgba(79, 140, 255, .22);
  background: var(--bg-elevated);
}
.compra-item .comp-qtd-stepper { border: 0; }
.compra-item .comp-qtd-stepper:hover:has(.item-qtd:not([readonly])),
.compra-item .comp-qtd-stepper:focus-within { box-shadow: inset 0 0 0 1px var(--border); border-radius: 8px; }
/* Item já recebido (entrada lançada no estoque): fundo verde e tag. */
.compra-item-recebido { background: color-mix(in srgb, var(--sem-success) 10%, transparent); }
.compra-item-tag-receb { flex: none; font-size: 9.5px; padding: 1px 6px; }
.compra-item-menu-wrap { justify-self: center; align-self: start; }

/* A receber/Estoque/Repor: chip centralizado; célula vazia quando não há nada. */
.compra-item-arec, .compra-item-est, .compra-item-rep { text-align: center; padding-top: 8px; }
.compra-item-qt { display: block; min-height: 1px; }
/* Valores em modo leitura (pedido enviado/recebido): texto, não campo. */
.item-qtd-ro, .item-custo-ro { display: inline-block; padding-top: 10px; font-variant-numeric: tabular-nums; }
/* A quantidade em leitura ocupa só o que o número mede, centralizada na coluna —
   assim o cabeçalho "Qtd" cai exatamente sobre ela. */
.item-qtd-ro { display: block; width: fit-content; margin: 0 auto; text-align: center; }
.item-custo-ro { text-align: right; width: 100%; }

/* Seletor de produto por busca inline (sem modal/overlay). */
.compra-prod-picker { position: relative; min-width: 0; }
.compra-prod-chosen {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
/* O nome tem prioridade de largura sobre as colunas numéricas: aparece inteiro,
   quebrando em até duas linhas — nunca com reticências. */
.compra-prod-chosen .compra-prod-chosen-nome {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.compra-prod-chosen .material-icons { font-size: 18px; color: var(--text-muted); flex: none; }
/* A lista abre MAIS LARGA que o campo (nomes longos cabem sem truncar), presa à
   ESQUERDA do campo e limitada à viewport com margem — nunca vaza da tela. Presa
   à direita ela crescia para a esquerda e ia parar embaixo do menu lateral (ou
   fora da tela no mobile). O teto de largura vem de `--picker-max`, calculado no
   módulo a partir da posição real do campo. */
.compra-prod-results {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: var(--picker-max, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  padding: 4px;
}
.compra-prod-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--text);
}
.compra-prod-result:hover { background: var(--bg-elevated-2); }
/* Destaque da navegação por teclado (setas + Tab/Enter) no seletor de produto. */
.compra-prod-result.kb-active { background: var(--bg-elevated-2); }
.compra-prod-result .prod-nome { font-size: 13.5px; font-weight: 600; }
.compra-prod-result .prod-ref { font-size: 11px; color: var(--text-muted); }
.compra-prod-empty { padding: 10px; font-size: 12px; color: var(--text-muted); }

/* Documentos do pedido (anexos) — lista compacta. */
.compra-anexo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.compra-anexo-item:last-child { border-bottom: none; }
.compra-anexo-item > .material-icons { font-size: 16px; color: var(--text-muted); }
.compra-anexo-nome {
  color: var(--link);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
}
.compra-anexo-enviando {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-muted);
}

/* Menu ⋮ de ações por linha da lista (mudar status). */
.compra-row-menu { flex: none; margin-left: 4px; }

/* Rodapé de totais do pedido (Produtos / Frete / Total). */
.compra-totais {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 13px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.compra-totais .compra-total-destaque { color: var(--accent); }

/* Timeline do histórico do pedido (só leitura). */
.historico-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.historico-item {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
}
.historico-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.historico-item .material-icons {
  font-size: 18px;
  color: var(--text-muted);
  flex: none;
}
.historico-item-texto { flex: 1; min-width: 0; }
.historico-item-data {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Excluir revelado por arrasto: fundo fixo atrás do item, que desliza por cima.
   Só existe no mobile — no desktop a lixeira continua na própria linha. */
.compra-item-swipe-back { display: none; }

/* ===== Itens do pedido no MOBILE (≤768px): duas alturas =====
   Linha 1: nome do produto sozinho, em uma linha só (trunca com reticências).
   Linha 2: Qtd · Custo un. · Custo total, cada um com rótulo em cima do valor.
   Fora do mobile: preço de cadastro, chips de estoque/repor e a lixeira da linha
   (que passa a ser revelada arrastando o item para a esquerda). */
/* Largura intermediária (celular deitado, janela estreita): as colunas continuam,
   só ficam mais justas — a do nome cede primeiro. */
@container compraitens (max-width: 700px) {
  .compra-itens-head,
  .compra-item {
    grid-template-columns: minmax(78px, 1fr) 72px 70px 70px 32px 32px 32px 24px;
    gap: 5px;
  }
  /* Cabeçalho quebra em duas linhas em vez de cortar o rótulo. */
  .compra-itens-head { font-size: 10px; letter-spacing: 0; align-items: end; }
  .compra-itens-head .col-arec,
  .compra-itens-head .col-est,
  .compra-itens-head .col-rep { white-space: normal; line-height: 1.15; overflow: visible; }
  .compra-item .comp-qtd-stepper { width: 72px; }
  .compra-item .qtd-side-btn { width: 18px; }
  .compra-item-remove { margin-left: -2px; }
  .compra-item .comp-inline-input,
  .compra-item .compra-prod-chosen { padding: 4px 2px; font-size: 12px; }
  .compra-item-final { font-size: 12px; }
  .item-custo-ref { font-size: 9.5px; }
  .compra-item-arec, .compra-item-est, .compra-item-rep { padding-top: 6px; }
  .compra-item .estoque-chip { padding: 1px 5px; font-size: 10.5px; }
}

@container compraitens (max-width: 430px) {
  .compra-itens-head { display: none; }
  /* Desfaz o aperto do degrau de colunas: no empilhado sobra largura. */
  .compra-item .comp-qtd-stepper { width: 84px; }
  .compra-item .qtd-side-btn { width: 20px; }
  .compra-item .comp-inline-input { padding: 4px 6px; font-size: 13px; }
  .compra-item-swipe {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 11px;
    margin-bottom: 8px;
  }
  /* O recorte só existe DURANTE o arrasto (senão ele cortaria a lista do seletor
     de produto, que precisa passar por cima dos outros itens). */
  .compra-item-swipe:has(.swipe-aberto),
  .compra-item-swipe:has(.swipe-arrastando) { overflow: hidden; }
  /* Com o seletor aberto o item inteiro sobe: a lista cobre os itens seguintes. */
  .compra-item-swipe:has(.compra-prod-results) { z-index: 30; }
  .compra-item-swipe:last-child { margin-bottom: 0; }
  .compra-item-swipe-back {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-radius: inherit;
    background: color-mix(in srgb, var(--sem-danger) 14%, transparent);
  }
  .compra-item-swipe-del {
    width: var(--compra-swipe-larg, 84px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--sem-danger);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .compra-item-swipe-del .material-icons { font-size: 21px; }
  .compra-item {
    --empilhado: 1;   /* sinal para o JS: só aqui o arrasto revela o excluir */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "prod prod  menu"
      "qtd  custo final";
    gap: 9px 10px;
    align-items: start;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 10px;
    margin-bottom: 8px;
  }
  .compra-item:last-child { margin-bottom: 0; }
  /* Dentro do envelope de arrasto o item desliza sozinho, com fundo opaco para
     esconder o excluir enquanto está fechado. */
  /* Sem `transform` no repouso: ele criaria contexto de empilhamento no item e
     prenderia a lista do seletor abaixo dos itens seguintes. */
  .compra-item-swipe .compra-item {
    position: relative;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    background: var(--bg-elevated);
    transition: transform .18s ease;
    touch-action: pan-y;
  }
  .compra-item-swipe .compra-item.swipe-aberto { transform: translateX(calc(-1 * var(--compra-swipe-larg, 84px))); }
  .compra-item-swipe .compra-item.swipe-arrastando { transition: none; }
  /* O fundo do card é opaco (esconde o excluir atrás enquanto fechado), então o
     verde do item recebido precisa vir opaco também — com `transparent` o
     --bg-elevated acima venceria e a linha ficaria branca. */
  .compra-item-swipe .compra-item.compra-item-recebido {
    background: color-mix(in srgb, var(--sem-success) 10%, var(--bg-elevated));
  }
  .compra-item-prod   { grid-area: prod; align-self: start; }
  .compra-item-qtd    { grid-area: qtd; padding-top: 0; }
  .compra-item-custo  { grid-area: custo; padding-top: 0; }
  .compra-item-final  { grid-area: final; text-align: right; padding-top: 0; }
  /* O ⋮ do item vai para o alto à direita do card. Sem área nomeada ele cairia
     numa linha implícita no canto ESQUERDO, e o menu abriria fora da tela. */
  .compra-item-menu-wrap { grid-area: menu; justify-self: end; align-self: start; }
  /* Só no layout de colunas: lixeira na linha, preço de cadastro e os chips. */
  .compra-item-remove,
  .compra-item-arec,
  .compra-item-est,
  .compra-item-rep,
  .item-custo-ref { display: none; }
  .compra-item-qtd .item-qtd-ro { width: 100%; text-align: center; }
  .compra-item-custo .item-custo, .compra-item-custo .item-custo-ro { width: 100%; text-align: left; }
  .compra-item-final { font-size: 14px; }
  /* Rótulo em cima do valor nas três colunas (padrão que o Custo total já usava). */
  .compra-item-field > .compra-item-label { display: block; margin-bottom: 3px; }
  .compra-item-prod > .compra-item-label { display: none; }
  .compra-item-qtd > .compra-item-label,
  .compra-item-custo > .compra-item-label,
  .compra-item-final > .compra-item-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
  }
  .item-qtd-ro, .item-custo-ro { padding-top: 0; }
  /* No card o produto é só texto, em UMA linha: nome longo trunca. */
  .compra-item .compra-prod-chosen { border: none; background: transparent; padding: 0; font-size: 13.5px; font-weight: 600; }
  .compra-item .compra-prod-chosen-nome,
  .compra-item .compra-prod-chosen-ro {
    display: block;
    -webkit-line-clamp: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
}

/* Formulário de compra mais largo que o padrão (480px): 900px, com todo o ganho
   indo para a coluna do produto (as numéricas são fixas). Empilha no mobile via
   a media query acima. */
#form-compra { max-width: 900px; }

/* ============ Aba Estoque do produto (lotes + movimentações) ============ */
/* 2x2 (o form tem ~480px; 4 colunas apertariam os valores monetários). */
.estoque-totais {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.estoque-total-card {
  text-align: center;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  min-width: 0;
}
.estoque-total-card .val { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estoque-total-card .lbl {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em; margin-top: 2px;
}

.estoque-secao-titulo {
  font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px;
}
.estoque-secao-titulo.colapsavel { cursor: pointer; display: flex; align-items: center; gap: 4px; }
.estoque-secao-titulo .material-icons { font-size: 18px; transition: transform .15s; }
.estoque-secao-titulo .material-icons.collapsed { transform: rotate(-90deg); }

/* Modal "Atualizar OS" (diff quadro × OS) */
.atll-body { max-height: 55vh; overflow-y: auto; margin: 10px 0 4px; text-align: left; }
.atll-sec { margin-bottom: 12px; }
.atll-sec-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.atll-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--border); }
.atll-row:last-child { border-bottom: none; }
.atll-row.travada { opacity: .8; }
.atll-ctl { flex: none; width: 20px; display: flex; justify-content: center; padding-top: 2px; }
.atll-lock { font-size: 16px; color: var(--sem-warning); }
.atll-main { flex: 1; min-width: 0; }
.atll-titulo { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.atll-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.atll-aviso { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sem-warning); margin-top: 3px; }
.atll-delta { flex: none; min-width: 34px; text-align: center; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.atll-resumo { margin-right: auto; font-size: 12px; color: var(--text-muted); }

/* Quadro "OSs criadas com este produto" (form do produto): linhas clicáveis */
.os-prod-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 2px; border-bottom: 1px solid var(--border);
  font-size: 13px; cursor: pointer;
}
.os-prod-row:last-child { border-bottom: none; }
.os-prod-row:hover .os-prod-txt { color: var(--link); }
.os-prod-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lote-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elevated); margin-bottom: 6px;
}
.lote-row.esgotado { opacity: .55; }
.lote-row-main { flex: 1; min-width: 0; }
.lote-row-forn { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lote-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.lote-row-saldo { flex: none; text-align: right; }
.lote-row-saldo .n { font-size: 17px; font-weight: 700; }
.lote-row-saldo .u { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
/* Split do lote (camada 2): Disponível + Reservado empilhados à direita. */
.lote-row-split { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.lote-row-split .lote-mark-n { font-size: 14px; font-weight: 700; white-space: nowrap; }
.lote-row-split .lote-mark-de { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-top: 1px; }

.baixa-panel {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-elevated-2); padding: 12px; margin: 8px 0 12px;
  display: flex; flex-direction: column; gap: 10px;
}

.mov-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--border);
}
.mov-row:last-child { border-bottom: none; }
.mov-row-main { flex: 1; min-width: 0; }
.mov-l1 { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-l1 .mov-tipo { font-weight: 700; }
.mov-l2 { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-l2 a { color: var(--link); text-decoration: none; }
.mov-l2 a:hover { text-decoration: underline; }
.mov-qtd { flex: none; font-size: 15px; font-weight: 700; white-space: nowrap; }
.mov-qtd.entrada { color: var(--sem-success); }
.mov-qtd.saida { color: var(--sem-danger); }
.mov-qtd.manual { color: var(--sem-warning); }

/* Botão de estornar baixa manual (ícone de seta/desfazer). */
.mov-estornar { flex: none; }

/* Link do pedido (PED-xxx) em lotes e histórico — azul escuro (não o accent de
   marca, que pode ser vermelho) para identificar claramente como link. */
.pedido-link {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}
.pedido-link:hover { text-decoration: underline; }

/* ===== Título fluido (.title-flow) — padrão global =====
   Título corre livre por até 2 LINHAS, com reticências só depois disso.
   Abaixo dele, a linha .title-flow-meta traz código + badge de status + ⋮
   numa única linha flex (nada disputa espaço com o título). */
.title-flow,
.page-title.title-flow {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.title-flow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Texto/link truncável na linha meta: encolhe com ellipsis; badge e ⋮ nunca quebram. */
.title-flow-meta-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title-flow-meta > .badge,
.title-flow-meta > .form-menu-wrapper { flex: none; }
/* Ações sempre no fim da linha meta: código/badge à esquerda, ⋮ à direita. */
.title-flow-meta > .form-menu-wrapper { margin-left: auto; }
/* Variante de LINHA ÚNICA (registro sem código): título trunca com ellipsis e
   badge + ⋮ ficam na mesma linha, à direita, sem nunca quebrar. */
.page-title.title-flow-one {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-header > .badge { flex: none; }
@media (max-width: 768px) {
  .title-flow { font-size: 18px; }
  .title-flow-one { font-size: 18px; }
}

/* ===== Compras — seletor MÚLTIPLO de produtos (modal do "+Adicionar produto") ===== */
.compra-sel-modal {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  max-height: min(84vh, 720px);
  overflow: hidden;      /* o scroll é da lista interna */
  padding-bottom: 0;
}
.compra-sel-modal .modal-title { display: flex; align-items: center; gap: 8px; }
.compra-sel-modal .modal-title .material-icons { color: var(--text-muted); }
/* O modal é flex column: sem flex:none o .search-box (flex:1) estica e cobre os
   chips; a fileira de chips também não pode encolher (rolagem horizontal só). */
.compra-sel-busca { flex: none; margin-bottom: 10px; }
/* Chips de categoria em fileira rolável (sem barra visível). */
.compra-sel-cats {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.compra-sel-cats::-webkit-scrollbar { display: none; }
.compra-sel-cat {
  flex: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
}
.compra-sel-cat.active { background: var(--text); color: var(--bg-elevated); border-color: var(--text); }
.compra-sel-cat-sel { border-color: var(--accent); color: var(--accent); }
.compra-sel-cat-sel.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.compra-sel-cat:disabled { opacity: .35; cursor: default; }
.compra-sel-lista {
  flex: 1;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  margin: 0 -24px;
}
.compra-sel-vazio { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.compra-sel-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 24px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.compra-sel-item:active { background: var(--bg-soft); }
.compra-sel-check {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.compra-sel-check .material-icons { font-size: 15px; }
.compra-sel-item.sel .compra-sel-check { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* Produto já presente no pedido: esmaecido e não selecionável. */
.compra-sel-item.ja { opacity: .5; }
.compra-sel-item.ja .compra-sel-check { background: var(--bg-elevated-2); border-color: var(--border); color: var(--text-muted); }
.compra-sel-corpo { flex: 1; min-width: 0; }
.compra-sel-nome { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
/* Números da linha: todos no mesmo tom secundário (o destaque fica nos chips). */
.compra-sel-num {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.compra-sel-val { font-variant-numeric: tabular-nums; }
.compra-sel-tag {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 5px;
}
.compra-sel-foot { align-items: center; margin: 0 -24px; padding: 11px 24px; border-top: 1px solid var(--border); }
.compra-sel-cont { flex: 1; font-size: 13px; color: var(--text-muted); }
.compra-sel-cont b { color: var(--text); }

/* ============ Material do dia (Prompt 48) — protótipo prompts/_prototipos/material-do-dia.html ============ */
.mdd-box { max-width: min(560px, 100%); }
.mdd-top { display: flex; align-items: center; gap: 8px; flex: none; }
.mdd-top .modal-title { flex: 1; margin: 0; }
.mdd-datebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none;
  border: 1px solid var(--border); border-radius: 11px; padding: 6px 10px; margin: 10px 0 12px; }
.mdd-data { text-align: center; min-width: 0; }
.mdd-data b { font-size: 14.5px; }
.mdd-data small { display: block; color: var(--text-muted); font-size: 11.5px; font-weight: 500; }
.mdd-corpo { flex: 1; min-height: 0; overflow-y: auto; }
.mdd-sec { margin: 4px 0 8px; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mdd-sec em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
.mdd-oslist { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin-bottom: 12px; }
.mdd-osrow { display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-bottom: 1px solid var(--border); cursor: pointer; }
.mdd-osrow:last-child { border-bottom: 0; }
.mdd-osrow.off { opacity: .45; }
.mdd-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border);
  flex: none; display: grid; place-items: center; }
.mdd-check.on { background: var(--accent); border-color: var(--accent); }
.mdd-check .material-icons { font-size: 14px; color: var(--accent-text); flex: none; }
.mdd-osnm { flex: 1; min-width: 0; }
.mdd-osnm b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdd-osnm > span { color: var(--text-muted); font-size: 12px; }
.mdd-osrow .badge, .mdd-cli > header .badge { flex: none; }
.mdd-add { display: block; width: 100%; text-align: center; padding: 11px; border-radius: 11px;
  background: transparent; border: 1px dashed var(--border); color: var(--text-muted);
  font-size: 13px; cursor: pointer; margin-bottom: 18px; font-family: inherit; }
.mdd-cli { border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin-bottom: 14px; }
.mdd-cli > header { display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: var(--bg-elevated-2); }
.mdd-cli > header > b { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdd-oscod { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.mdd-amb { padding: 8px 13px 2px; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; border-top: 1px solid var(--border); }
.mdd-it { display: flex; align-items: flex-start; gap: 11px; padding: 8px 13px; }
.mdd-qt { min-width: 34px; text-align: center; font-weight: 700; font-size: 14px;
  background: var(--bg-elevated-2); border-radius: 7px; padding: 3px 5px; flex: none; }
.mdd-info { flex: 1; min-width: 0; }
.mdd-info b { display: block; font-size: 13.5px; font-weight: 550; line-height: 1.3; }
.mdd-info > span { font-size: 11.5px; color: var(--text-muted); margin-right: 6px; }
.mdd-chip { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 700; padding: 2.5px 7px;
  border-radius: 999px; background: color-mix(in srgb, var(--sem-danger) 15%, transparent); color: var(--sem-danger-txt); }
.mdd-vazio { padding: 10px 13px; font-size: 12.5px; color: var(--text-muted); }
.mdd-foot { padding: 9px 13px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--sem-danger-txt);
  background: color-mix(in srgb, var(--sem-danger) 6%, transparent); }
.mdd-forn { border-top: 1px solid var(--border); padding: 10px 13px;
  background: color-mix(in srgb, var(--sem-info) 5%, transparent); }
.mdd-forn > b { display: block; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px; }
.mdd-fornit { font-size: 12.5px; color: var(--text-muted); padding: 2px 0; }
.mdd-fornit i { font-style: normal; font-weight: 700; color: var(--text); }
.mdd-fornit em { font-style: normal; color: var(--text-muted); font-size: 11.5px; }
.mdd-forn small { display: block; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.mdd-cand { display: block; width: 100%; text-align: left; padding: 10px 13px; background: transparent;
  border: 0; border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text); font: inherit; }
.mdd-cand:last-child { border-bottom: 0; }
.mdd-cand > span { display: block; color: var(--text-muted); font-size: 12px; }

/* Conferência da separação (Prompt 49) */
.mdd-it { cursor: pointer; }
.mdd-it .mdd-check { margin-top: 2px; }
.mdd-it.sep { opacity: .45; }
.mdd-it.sep .mdd-info b { text-decoration: line-through; }
.mdd-sep-cont { font-size: 11.5px; color: var(--text-muted); font-weight: 700; flex: none; }
.mdd-limpar { background: transparent; border: 0; color: var(--link); font-size: 11.5px; font-weight: 600;
  cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0; font-family: inherit; }

/* Filtro "Clientes do dia" — navegador de data ao lado do combo (Prompt 50) */
.os-dia-nav { display: flex; align-items: center; gap: 2px; flex: none;
  border: 1px solid var(--border); border-radius: 9px; padding: 2px 4px; background: var(--bg-elevated); }
.os-dia-nav[hidden] { display: none; }
.os-dia-label { background: transparent; border: 0; cursor: pointer; font: inherit; color: var(--text);
  font-size: 13px; font-weight: 600; padding: 4px 6px; min-width: 72px; text-align: center; }

/* ============ Itens amarrados (Prompt 51) — protótipo prompts/_prototipos/itens-amarrados.html ============ */
/* Faixa vertical de 2px, cinza, recuada 6px em cima e embaixo, pontas
   arredondadas; as linhas do grupo ganham recuo à esquerda. Sem linha nova,
   sem selo, sem cabeçalho de grupo. */
.os-atv-grupo { position: relative; padding-left: 6px; margin-bottom: 8px; }
.os-atv-grupo::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; background: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.os-atv-grupo > .os-atv:last-child { margin-bottom: 0; }
.os-atv-grupo.dragging { opacity: .55; }
/* Modal "Amarrar itens": linha inteira clicável, checkbox nativo à esquerda. */
.os-amarrar-item { display: flex; align-items: center; gap: 10px; padding: 9px 6px;
  border-bottom: 1px solid var(--border); cursor: pointer; }
.os-amarrar-item:last-child { border-bottom: 0; }
.os-amarrar-item input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin: 0; }
.os-amarrar-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-amarrar-item .badge { flex: none; }