/* =====================================================================
   DESIGN SYSTEM — telas operacionais (Conferência, Estoque, Frota, Sistema)

   Uma camada só, carregada depois de styles.css:
     1. TOKENS ........ cores, raios, sombras, espaçamentos
     2. BASE .......... o visual novo dos componentes que todas as telas já
                        usam (cartão, campo, botão, tabela, aviso, badge).
                        Escopo: :where(main:not(.modo-bi)) — o Comercial e o
                        Vendas têm layout próprio (bi.css) e ficam de fora.
                        :where() zera a especificidade: o que uma tela
                        define com classe própria continua valendo.
     3. COMPONENTES ... peças novas (ds-*), montadas por js/ds.js:
                        cabeçalho de página, blocos de formulário, rodapé de
                        ação, barra de ferramentas com resumo e busca,
                        estado vazio.
   Hierarquia de toda tela: cabeçalho → ação principal → filtros/controles
   → resumo → conteúdo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
  --bg: #f3f6fb;              /* cinza-azulado quase branco */
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #e4e9f1;
  --border-forte: #d6dde8;
  --texto: #111c3d;           /* tinta azul-marinho */
  --texto-suave: #5a6682;
  --texto-fraco: #97a2b8;
  --accent: #2563eb;          /* azul: ícones, foco, destaques, links */
  --accent-escuro: #1d4ed8;
  --accent-suave: #eaf1fe;
  --marinho: #1e2b63;         /* ação principal */
  --marinho-escuro: #16204d;
  --verde: #15803d;   --verde-bg: #e3f7eb;
  --vermelho: #c0262d; --vermelho-bg: #fdecec;
  --ambar: #a15c07;   --ambar-bg: #fdf3dc;
  --roxo: #6d28d9;    --roxo-bg: #f0ebfe;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --sombra-sm: 0 1px 2px rgba(17,28,61,.04);
  --sombra-md: 0 1px 2px rgba(17,28,61,.04), 0 8px 24px rgba(17,28,61,.05);
  --sombra-lg: 0 16px 40px rgba(17,28,61,.12);
  --foco: 0 0 0 3px var(--accent-suave);
  --campo-h: 40px;
  --tabela-cab: #f6f8fc;      /* cabeçalho de tabela e linha de total */
  --tabela-linha: #eef2f7;    /* divisória entre linhas */
  --tabela-hover: #eef4fc;
  --tabela-zebra: var(--surface); /* redesign 24/10/2026: sem listras, todas as linhas brancas */
  --tabela-navy: var(--surface-2); /* cabeçalho das tabelas: cinza-claro (redesign 24/10/2026) */
  --tabela-cab-txt: var(--texto-suave);
  --rotulo: #34405e;          /* labels de formulário */
  --neutro-bg: #eef1f6;       /* badge neutro */
  --neutro-tx: #5b6781;
}

/* ---------------------------------------------------------------------
   2. BASE — componentes que as telas já usam
   --------------------------------------------------------------------- */
:where(main:not(.modo-bi)) { padding: 28px 32px 40px; }

/* Cartão */
:where(main:not(.modo-bi)) .cartao { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px;
  box-shadow: var(--sombra-md); margin-bottom: 20px; }
:where(main:not(.modo-bi)) .cartao h2 { font-size: 15px; font-weight: 700; color: var(--texto); margin-bottom: 18px; letter-spacing: -.01em; }
:where(main:not(.modo-bi)) .cartao h3 { font-size: 14px; font-weight: 700; color: var(--texto); }

/* Campos */
:where(main:not(.modo-bi)) label { font-size: 12.5px; font-weight: 600; color: var(--rotulo); margin-bottom: 6px; }
:where(main:not(.modo-bi)) :is(input, select, textarea) { border: 1px solid var(--border-forte); border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--texto); background: var(--surface); }
:where(main:not(.modo-bi)) input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"])),
:where(main:not(.modo-bi)) select { min-height: var(--campo-h); padding: 8px 12px; }
:where(main:not(.modo-bi)) :is(input, textarea)::placeholder { color: var(--texto-fraco); }
:where(main:not(.modo-bi)) :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: var(--foco); }
:where(main:not(.modo-bi)) :is(input, select, textarea):disabled,
:where(main:not(.modo-bi)) input[readonly] { background: var(--surface-2); color: var(--texto-suave); }
:where(main:not(.modo-bi)) select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6682' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 16px; }
:where(main:not(.modo-bi)) .form-linha { gap: 16px; }
:where(main:not(.modo-bi)) .campo { min-width: 150px; }

/* Botões: a ação principal é marinho; o resto é neutro */
:where(main:not(.modo-bi)) .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--campo-h);
  padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid var(--border-forte); background: var(--surface); color: var(--texto);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--sombra-sm); }
:where(main:not(.modo-bi)) .btn:hover { border-color: #b9c4d6; color: var(--texto); background: var(--surface-2); box-shadow: var(--sombra-sm); }
:where(main:not(.modo-bi)) .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
:where(main:not(.modo-bi)) .btn-primario { background: var(--marinho); border-color: var(--marinho); color: #fff;
  box-shadow: 0 1px 2px rgba(17,28,61,.12), 0 6px 16px rgba(30,43,99,.18); }
:where(main:not(.modo-bi)) .btn-primario:hover { background: var(--marinho-escuro); border-color: var(--marinho-escuro); color: #fff; }
:where(main:not(.modo-bi)) .btn-contorno { background: var(--surface); border: 1px solid var(--border-forte); color: var(--accent-escuro); }
:where(main:not(.modo-bi)) .btn-contorno:hover { background: var(--accent-suave); border-color: var(--accent); color: var(--accent-escuro); }
:where(main:not(.modo-bi)) .btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; }
:where(main:not(.modo-bi)) .btn:disabled { opacity: .55; cursor: default; }
:where(main:not(.modo-bi)) .btn-texto { font-size: 13px; font-weight: 600; color: var(--accent-escuro); padding: 5px 9px; border-radius: 8px; }
:where(main:not(.modo-bi)) .btn-texto:hover { background: var(--accent-suave); }
:where(main:not(.modo-bi)) .btn-texto-perigo { color: var(--vermelho); }
:where(main:not(.modo-bi)) .btn-texto-perigo:hover { background: var(--vermelho-bg); }

/* Tabela — mesmo padrão das tabelas do BI (bi.css § Tabelas). Redesign
   (24/10/2026): cabeçalho cinza-claro com texto normal, linhas brancas sem
   listras, separador fino, mais respiro, cartão com borda e sem sombra. */
:where(main:not(.modo-bi)) .tabela-wrap { border: 1px solid var(--border); border-radius: 14px; box-shadow: none; background: var(--surface); }
:where(main:not(.modo-bi)) .tabela th { padding: 11px 16px; }
:where(main:not(.modo-bi)) .tabela td { padding: 14px 16px; }
:where(main:not(.modo-bi)) .tabela thead th { background: var(--tabela-navy); color: var(--tabela-cab-txt); box-shadow: inset 0 -1px 0 var(--border); font-size: 12.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; border-bottom: 0; }
:where(main:not(.modo-bi)) .tabela thead th * { color: var(--tabela-cab-txt); }
:where(main:not(.modo-bi)) .tabela tbody td { border-top: 1px solid var(--tabela-linha); color: var(--texto); transition: background-color .12s ease; }
:where(main:not(.modo-bi)) .tabela tbody tr:first-child td { border-top: 0; }
/* Zebra com especificidade baixa: hover, linha aberta e detalhe vencem. A
   1ª coluna (sticky, com fundo próprio) precisa da regra dela. */
:where(.tabela tbody tr:nth-child(even):not(.linha-aberta, .linha-detalhe, .grp-detalhe)) > td { background: var(--tabela-zebra); }
.tabela :where(tbody tr:nth-child(even):not(.linha-aberta, .linha-detalhe, .grp-detalhe)) > td:first-child { background: var(--tabela-zebra); }
:where(main:not(.modo-bi)) .tabela tbody tr:hover > td { background: var(--tabela-hover); }
/* A 1ª coluna é fixa (sticky) e tem fundo próprio: acompanha o hover da linha. */
:where(main:not(.modo-bi)) .tabela tbody tr:hover td:first-child { background: var(--tabela-hover); }
:where(main:not(.modo-bi)) .tabela th:first-child, :where(main:not(.modo-bi)) .tabela td:first-child { border-right: 0; }
:where(main:not(.modo-bi)) .tabela thead th:first-child { background: var(--tabela-navy); }
:where(main:not(.modo-bi)) .linha-total td { background: var(--tabela-cab); border-top: 1px solid var(--border-forte); }

/* KPIs da conferência */
:where(main:not(.modo-bi)) .kpi { border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sombra-md); }
:where(main:not(.modo-bi)) .kpi-rotulo { font-size: 11px; letter-spacing: .06em; color: var(--texto-suave); font-weight: 700; }
:where(main:not(.modo-bi)) .kpi-valor { font-size: 24px; font-weight: 700; color: var(--texto); }
:where(main:not(.modo-bi)) .kpi-card { border-radius: var(--r-lg); box-shadow: var(--sombra-md); }
:where(main:not(.modo-bi)) .kpi-card .kpi-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-suave); color: var(--accent); }
:where(main:not(.modo-bi)) .kpi-card .kpi-ico svg { width: 18px; height: 18px; }
:where(main:not(.modo-bi)) .kpi-card .rot { font-size: 11.5px; letter-spacing: .06em; font-weight: 700; }
:where(main:not(.modo-bi)) .kpi-card .val { font-size: 28px; font-weight: 700; color: var(--texto); }

/* Barra de filtros das telas antigas vira um painel de controles */
:where(main:not(.modo-bi)) .barra { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sombra-md); padding: 14px 18px; align-items: center; gap: 14px; margin-bottom: 20px; }
:where(main:not(.modo-bi)) .dash-filtro label { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
:where(main:not(.modo-bi)) .obs-geral, :where(main:not(.modo-bi)) .anexos { border-radius: var(--r-lg); box-shadow: var(--sombra-md); padding: 20px 24px; }

/* Avisos: faixa suave com barra de cor à esquerda */
:where(main:not(.modo-bi)) .aviso { background: var(--ambar-bg); border: 1px solid #f4dfb0; border-left: 3px solid #e0a526; color: #7a4a06;
  border-radius: var(--r-md); padding: 12px 16px; font-size: 13.5px; }

/* Badges: todas as "pílulas" do sistema com o mesmo desenho */
:where(main:not(.modo-bi)) :is(.pill, .frota-selo, .ds-badge) { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--neutro-bg); color: var(--neutro-tx); }
:where(main:not(.modo-bi)) :is(.pill-pos, .frota-selo.ativo, .ds-badge.verde) { background: var(--verde-bg); color: var(--verde); }
:where(main:not(.modo-bi)) :is(.pill-neg, .frota-selo.vermelho, .ds-badge.vermelho) { background: var(--vermelho-bg); color: var(--vermelho); }
:where(main:not(.modo-bi)) :is(.pill-warn, .frota-selo.manutencao, .ds-badge.ambar) { background: var(--ambar-bg); color: var(--ambar); }
:where(main:not(.modo-bi)) :is(.frota-selo.inativo, .pill-zero, .ds-badge.cinza) { background: var(--neutro-bg); color: var(--neutro-tx); }
:where(main:not(.modo-bi)) .ds-badge.azul { background: var(--accent-suave); color: var(--accent-escuro); }
:where(main:not(.modo-bi)) .ds-badge.roxo { background: var(--roxo-bg); color: var(--roxo); }
:where(main:not(.modo-bi)) .ds-badge svg { width: 13px; height: 13px; }
:where(main:not(.modo-bi)) .frota-linha-vencida > td, :where(main:not(.modo-bi)) .frota-linha-vencida:hover > td { background: #fff6f6; }

/* ---------------------------------------------------------------------
   3. COMPONENTES NOVOS (js/ds.js)
   --------------------------------------------------------------------- */

/* Cabeçalho da página */
/* Redesign (24/10/2026): trilha (js/menu.js) + título grande, sem a caixa
   do ícone — o ícone da aba vai pequeno na trilha. */
.ds-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0 0 22px; }
.ds-cab-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ds-cab-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--sombra-md); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.ds-cab-ico svg { width: 22px; height: 22px; }
.ds-cab-ico { display: none !important; }
.ds-cab h1 { margin: 0; font-size: 26px; font-weight: 700; color: var(--texto); letter-spacing: -.02em; line-height: 1.2; }
.ds-cab p { margin: 3px 0 0; font-size: 13.5px; color: var(--texto-suave); }
.ds-cab-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-cab-acoes label { margin: 0; }

/* Formulário em blocos lógicos, dentro de UM cartão */
.ds-form-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ds-form-cab h2 { margin: 0 !important; }
/* Formulário recolhível (ds.js formularioRecolhivel): fechado, fica só o
   título — o cabeçalho inteiro abre e a seta vira para cima quando aberto. */
.ds-recolhivel .ds-form-cab { cursor: pointer; user-select: none; }
.ds-recolhivel .ds-form-cab h2 { margin-right: auto !important; }
.ds-recolher { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--texto-suave); cursor: pointer; transition: background .15s, color .15s; }
.ds-recolhivel .ds-form-cab:hover .ds-recolher { background: var(--surface-2); color: var(--texto); }
.ds-recolher:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ds-recolher svg { width: 18px; height: 18px; transition: transform .2s; }
.ds-recolher[aria-expanded="true"] svg { transform: rotate(180deg); }
.ds-recolhivel.fechado form > :not(.ds-form-cab) { display: none; }
.ds-recolhivel.fechado .ds-form-cab { margin-bottom: 0; }
.ds-bloco + .ds-bloco { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); }
.ds-bloco-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.ds-bloco-tit svg { width: 15px; height: 15px; color: var(--accent); }
.ds-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; align-items: end; }
.ds-grade .ds-2 { grid-column: span 2; }
.ds-grade .ds-3 { grid-column: span 3; }
.ds-grade .ds-tudo { grid-column: 1 / -1; }
.ds-grade .campo { min-width: 0; }
.ds-check { display: flex; align-items: center; gap: 8px; min-height: var(--campo-h); margin: 0; font-size: 13.5px; font-weight: 500; color: var(--texto); cursor: pointer; }
.ds-check input { width: 16px; height: 16px; min-height: 0; accent-color: var(--accent); }
.ds-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--border); }
.ds-rodape-info { font-size: 12.5px; color: var(--texto-suave); display: flex; align-items: center; gap: 8px; }
.ds-rodape-info svg { width: 16px; height: 16px; color: var(--accent); }
.ds-rodape-acoes { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.ds-rodape-acoes .btn-primario { padding: 8px 18px 8px 16px; }

/* Campo com ícone (à esquerda ou à direita) */
.ds-campo-ico { position: relative; display: block; }
.ds-campo-ico svg { position: absolute; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--texto-suave); pointer-events: none; }
.ds-campo-ico.esq svg { left: 12px; }
.ds-campo-ico.esq input, .ds-campo-ico.esq select { padding-left: 38px !important; }
.ds-campo-ico.dir svg { right: 12px; }
.ds-campo-ico.dir input { padding-right: 38px !important; }

/* Barra de ferramentas: resumo → busca → filtros */
.ds-barra { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.ds-resumo { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: var(--r-lg);
  background: var(--accent-suave); border: 1px solid var(--border); min-width: 210px; }
.ds-resumo-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--surface); color: var(--accent); display: grid; place-items: center;
  box-shadow: var(--sombra-sm); flex-shrink: 0; }
.ds-resumo-ico svg { width: 20px; height: 20px; }
.ds-resumo b { display: block; font-size: 14.5px; font-weight: 700; color: var(--texto); }
.ds-resumo span { display: block; font-size: 12px; color: var(--texto-suave); }
.ds-controles { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; min-width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sombra-md); }
.ds-controles .ds-busca { flex: 1 1 240px; }
.ds-controles select { width: auto; min-width: 150px; max-width: 240px; }
.ds-controles input[type="date"] { width: auto; }
.ds-periodo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.ds-periodo svg { width: 16px; height: 16px; color: var(--accent); }
.ds-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 2px; }

/* Estado vazio */
.ds-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 24px 48px; }
.ds-vazio-ilus { position: relative; width: 132px; height: 96px; margin-bottom: 18px; display: grid; place-items: center; }
.ds-vazio-ilus::before { content: ""; position: absolute; inset: 6px 8px; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-suave), var(--surface-2) 72%, transparent); }
.ds-vazio-ilus::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 10px; border-radius: 50%; background: var(--accent-suave); opacity: .7; }
.ds-vazio-ilus svg { position: relative; z-index: 1; width: 52px; height: 52px; color: var(--accent); stroke-width: 1.6; }
.ds-vazio h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--texto); }
.ds-vazio p { margin: 0; max-width: 440px; font-size: 13.5px; color: var(--texto-suave); line-height: 1.55; }
.ds-vazio .btn { margin-top: 18px; }
.tabela td.ds-vazio-celula { padding: 0; }
.tabela td.ds-vazio-celula:hover { background: none; }

/* KPIs compactos (resumos dentro de cartões) */
.ds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ds-kpi { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; background: var(--surface-2); display: flex; gap: 12px; align-items: flex-start; }
.ds-kpi-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--accent); display: grid; place-items: center; box-shadow: var(--sombra-sm); flex-shrink: 0; }
.ds-kpi-ico svg { width: 17px; height: 17px; }
.ds-kpi-rot { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.ds-kpi-val { font-size: 21px; font-weight: 700; color: var(--texto); line-height: 1.25; font-variant-numeric: tabular-nums; }
.ds-kpi .est-sub { margin-top: 1px; }
/* Abastecimentos: linha de veículo que filtra a tela ao clicar */
.ab-clicavel { cursor: pointer; }
.ab-clicavel:hover > td { background: var(--surface-2); }
/* Manutenções: a lista de serviços da OS quebra linha */
.mn-servicos { white-space: normal; min-width: 220px; max-width: 420px; line-height: 1.4; }
.mn-mais { display: flex; justify-content: center; margin-top: 12px; }
/* Manutenções — abas, "Precisa de atenção", gráficos e ficha do veículo
   (frota/manutencoes.js, 16/10/2026). Só tokens do ds: valem no escuro. */
.mn-abas { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 16px; border-bottom: 1px solid var(--border); }
.mn-aba { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--texto-suave);
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.mn-aba:hover { color: var(--texto); }
.mn-aba.ativa { color: var(--accent); border-bottom-color: var(--accent); }
.mn-aba:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 6px; }
.mn-aba-n { font-size: 11.5px; font-weight: 700; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--neutro-bg); color: var(--neutro-tx); text-align: center; }
.mn-aba-n.alerta { background: var(--vermelho-bg); color: var(--vermelho); }

.mn-atencao { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--vermelho); border-radius: var(--r-lg);
  padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--sombra-sm); }
.mn-atencao.ok { border-left-color: var(--verde); display: flex; gap: 10px; align-items: flex-start; color: var(--texto-suave); }
.mn-atencao.ok > svg { width: 20px; height: 20px; color: var(--verde); flex: none; }
.mn-atencao.ok b { color: var(--texto); }
.mn-atencao-titulo { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--texto); margin-bottom: 12px; }
.mn-atencao-titulo svg { width: 18px; height: 18px; color: var(--vermelho); }
.mn-atencao-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.mn-atencao-cab { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; color: var(--texto-suave); margin-bottom: 6px; }
.mn-atencao-cab b { font-size: 18px; color: var(--texto); }
.mn-atencao-cab .mn-ir { margin-left: auto; }
.mn-atencao ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mn-atencao li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 8px; font-size: 13px; min-width: 0; }
.mn-atencao li:hover { background: var(--surface-2); }
.mn-at-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-suave); }

.mn-graf { width: 100%; height: auto; display: block; }
.mn-graf-base { stroke: var(--border-forte); stroke-width: 1; }
.mn-graf-alvo { fill: transparent; }
.mn-graf-barra { fill: var(--accent); fill-opacity: .7; transition: fill-opacity .12s; }
.mn-graf-barra.atual { fill-opacity: 1; }
.mn-graf-col:hover .mn-graf-barra { fill-opacity: 1; }
.mn-graf-val { font-size: 13px; font-weight: 600; fill: var(--texto); }
.mn-graf-rot { font-size: 12.5px; fill: var(--texto-fraco); }

.mn-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.mn-barras { display: flex; flex-direction: column; gap: 8px; }
.mn-barra { display: grid; grid-template-columns: 112px 1fr 104px; align-items: center; gap: 10px; padding: 3px 4px; border-radius: 8px; font-size: 13px; }
.mn-barra.ab-clicavel:hover { background: var(--surface-2); }
.mn-barra-rot { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-barra-trilho { height: 10px; background: var(--surface-2); border-radius: 0 5px 5px 0; overflow: hidden; }
.mn-barra-trilho > span { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.mn-barra-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 600; white-space: nowrap; }
.mn-barra-val small { display: block; font-weight: 400; font-size: 11.5px; color: var(--texto-fraco); }

#mn-ficha .mn-fundo, #es-ficha .mn-fundo { position: fixed; inset: 0; background: rgba(17, 28, 61, .32); z-index: 60; }
.mn-gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--surface); z-index: 61;
  box-shadow: var(--sombra-lg); display: flex; flex-direction: column; }
.mn-gaveta-cab { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border); }
.mn-fechar { margin-left: auto; border: 0; background: none; color: var(--texto-suave); cursor: pointer; padding: 6px; border-radius: 8px; display: inline-flex; }
.mn-fechar:hover { background: var(--surface-2); color: var(--texto); }
.mn-fechar svg { width: 18px; height: 18px; }
.mn-gaveta-corpo { padding: 16px 20px 24px; overflow-y: auto; }
.mn-fsub { margin: 0 0 14px; }
.mn-fks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.mn-fk { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mn-fk span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-fraco); }
.mn-fk b { font-size: 18px; color: var(--texto); font-variant-numeric: tabular-nums; }
.mn-fk small { font-size: 12px; color: var(--texto-suave); }
.mn-fs { margin-top: 16px; }
.mn-fs h3 { font-size: 13px; font-weight: 700; color: var(--texto); margin: 0 0 6px; }
.mn-flista { list-style: none; margin: 0; padding: 0; }
.mn-flista li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--tabela-linha); font-size: 13px; color: var(--texto); }
.mn-flista li > span:first-child { min-width: 0; }
.mn-flista small { display: block; color: var(--texto-fraco); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.mn-fdir { white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; gap: 6px; align-items: center; }
.mn-fpe { margin-top: 20px; display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .mn-barra { grid-template-columns: 90px 1fr 96px; } .mn-fks { grid-template-columns: 1fr; } }

/* Ficha do produto (Estoque › Saldo): a mesma gaveta, com entradas e saídas */
.fp-titulo { min-width: 0; font-size: 15px; line-height: 1.35; }
.fp-outras { display: flex; align-items: center; gap: 6px; margin: -6px 0 14px; }
.fp-outras svg { width: 14px; height: 14px; flex-shrink: 0; }
.fp-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.fp-barra h3 { font-size: 13px; font-weight: 700; color: var(--texto); margin: 0; }
.fp-graf { margin: 0 0 14px; }
.fp-graf svg { display: block; width: 100%; height: 80px; background: var(--surface-2); border-radius: var(--r-md); }
.fp-graf-rot { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.fp-tipo { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; margin-right: 6px; vertical-align: -5px; }
.fp-tipo svg { width: 12px; height: 12px; }
.fp-tipo.entrada { background: var(--verde-bg); color: var(--verde); }
.fp-tipo.saida { background: var(--vermelho-bg); color: var(--vermelho); }
.fp-qtd { flex-direction: column; align-items: flex-end; gap: 0; }
.fp-entrada { color: var(--verde); }
.fp-saida { color: var(--texto); }
.fp-nota { margin-top: 12px; }
.cs-tabela tr.es-linha { cursor: pointer; }
.cs-tabela tr.es-linha:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* Tipografia de apoio nas tabelas */
.ds-forte { font-weight: 700; color: var(--texto); }
.ds-mudo { color: var(--texto-fraco); }

/* Telas que ainda usam os títulos antigos */
:where(main:not(.modo-bi)) :is(.est-titulo, .frota-titulo) { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
:where(main:not(.modo-bi)) .dash-topo h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

@media (max-width: 720px) {
  :where(main:not(.modo-bi)) { padding: 18px 16px 32px; }
  .ds-grade .ds-2, .ds-grade .ds-3 { grid-column: 1 / -1; }
  .ds-resumo { flex: 1 1 100%; }
  .ds-controles select, .ds-controles input[type="date"] { flex: 1 1 140px; max-width: none; }
  .ds-rodape-acoes { width: 100%; }
  .ds-rodape-acoes .btn { flex: 1; }
}

/* Filtro único que ocupa a barra de controles (ex.: veículo em Abastecimentos) */
.ds-filtro-largo { flex: 1 1 260px; margin: 0; }
.ds-controles .ds-filtro-largo select { width: 100%; max-width: none; }

/* Dashboard da conferência */
.dash-sel-wrap { margin: 0; }
.dash-sel-wrap select { min-width: 280px; max-width: 380px; }
.dash-contexto { margin: -6px 0 2px; }
:where(main:not(.modo-bi)) .dash-kpis { margin-top: 0; }
:where(main:not(.modo-bi)) .dash-alerta { border-left: 3px solid #e0a526; }

/* Conferência do dia */
.ds-cab-acoes .conf-data { width: 170px; }
/* Tabela de lançamento (campo em todas as colunas): variante compacta,
   para caber sem rolagem lateral. */
:where(main:not(.modo-bi)) #tabela-conf :is(th, td) { padding: 9px 8px; }
:where(main:not(.modo-bi)) #tabela-conf :is(th, td):first-child { padding-left: 16px; }
:where(main:not(.modo-bi)) .tabela td :is(input, select) { min-height: 36px; padding: 6px 9px; }
:where(main:not(.modo-bi)) #conferencia .kpis { margin-bottom: 20px; }
:where(main:not(.modo-bi)) .obs-geral .ds-bloco-tit { margin-bottom: 10px; }
:where(main:not(.modo-bi)) .anexos .ds-form-cab { margin-bottom: 4px; }
label.ds-campo-ico { margin: 0; }
.dash-alerta-tit { display: flex; align-items: center; gap: 8px; }
.dash-alerta-tit svg { width: 18px; height: 18px; color: #d48a0c; }

/* Usuários e funções */
.usr-nota { margin: 10px 0 0; }
:where(main:not(.modo-bi)) .dobra-titulo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--texto); }
:where(main:not(.modo-bi)) .dobra-titulo svg { width: 17px; height: 17px; color: var(--accent); }
:where(main:not(.modo-bi)) .cartao .tabela-wrap { box-shadow: none; }

/* Configurações: sub-abas como controle segmentado no cabeçalho */
.ds-cab-acoes .cfg-subabas { margin: 0; }
/* Log de atividades */
.log-busca { flex: 1 1 260px; }
:where(main:not(.modo-bi)) .barra .dash-filtro select { min-width: 150px; }

/* Placa como texto (ds.js placa()). */
.placa-texto { font-weight: 700; color: var(--texto); letter-spacing: .03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.placa-texto.pt-grande { font-size: 20px; }


/* =====================================================================
   Redesign (24/10/2026) — o padrão da tela Pedidos de venda para o site
   inteiro, nas peças compartilhadas:
   · KPIs numa faixa só, com divisórias (sem as caixas de ícone). A
     divisória é uma sombra de 1px para fora, à esquerda e em cima: na
     primeira coluna e na primeira linha ela cai fora da faixa e o
     overflow corta — funciona com qualquer número de cards e de linhas.
   · Barra de ferramentas sem o cartão em volta: os campos ficam soltos na
     linha; o resumo vira texto compacto.
   ===================================================================== */
.ds-kpis { gap: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ds-kpi { border: 0; border-radius: 0; background: transparent; box-shadow: -1px -1px 0 0 var(--border); padding: 18px 20px; }
.ds-kpi-ico { display: none; }
.ds-kpi-rot { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--texto-suave); }
.ds-kpi-val { font-size: 22px; margin-top: 6px; }
/* Cards clicáveis (filtram a lista): o escolhido com fundo azul-claro e um
   traço embaixo, dentro da faixa. */
button.ds-kpi.pa-kpi { border: 0; border-radius: 0; }
button.ds-kpi.pa-kpi:hover { background: var(--surface-2); border-color: transparent; }
button.ds-kpi.pa-kpi.on { background: var(--accent-suave); box-shadow: -1px -1px 0 0 var(--border), inset 0 -3px 0 var(--accent); }
button.ds-kpi.pa-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ds-barra { align-items: center; gap: 10px 12px; margin: 0 0 16px; }
.ds-controles { padding: 0; background: transparent; border: 0; box-shadow: none; min-width: 0; gap: 8px; }
.ds-resumo { padding: 0 6px 0 0; background: transparent; border: 0; min-width: 0; gap: 10px; }
/* Ícone do resumo sem a caixinha de fundo (26/10/2026, para ver como fica). */
.ds-resumo-ico { width: 24px; height: 34px; border-radius: 0; background: transparent; box-shadow: none; }
.ds-resumo-ico svg { width: 20px; height: 20px; }
.ds-resumo b { font-size: 15px; }
.ds-controles select, .ds-controles input[type="date"], .ds-controles input[type="number"] { height: 38px; min-height: 38px; border-radius: 10px; }
.ds-controles .ds-busca input { height: 38px; min-height: 38px; border-radius: 10px; }
.ds-kpis:empty { display: none; }

/* Filtros como pílulas (redesign, padrão Pedidos): a caixa de seleção de
   filtro é uma pílula; sem filtro ("Todos…", valor vazio escolhido) fica
   tracejada e transparente; com um valor, cheia em azul-claro. :has()
   detecta a opção escolhida — sem tocar no código das telas. */
.ds-controles select { border-radius: 99px; padding-left: 14px; padding-right: 30px; font-size: 13px; font-weight: 500; }
.ds-controles select:has(> option[value=""]:checked) { border-style: dashed; background-color: transparent; color: var(--texto); }
.ds-controles select:has(> option[value=""]:checked):hover { border-style: solid; background-color: var(--surface); }
.ds-controles select:not(:has(> option[value=""]:checked)):has(> option[value=""]) { border-color: var(--accent); background-color: var(--accent-suave); color: var(--accent-escuro); font-weight: 600; }

/* Cartão de tabela (js/tabelas.js — padrão Pedidos): barra com "Colunas",
   a tabela e um rodapé com a quantidade de linhas. */
.ds-cartao { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 18px; }
.ds-cartao > .tabela-wrap { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.ds-cartao-barra { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.ds-cartao-colunas { position: relative; }
.ds-cartao-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--texto); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ds-cartao-btn:hover { background: var(--surface-2); }
.ds-cartao-btn svg { width: 16px; height: 16px; }
.ds-cartao-pop { position: absolute; z-index: 40; right: 0; top: calc(100% + 6px); min-width: 210px; max-height: min(380px, 70vh); overflow-y: auto; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 28px rgba(16, 24, 40, .14); display: flex; flex-direction: column; gap: 2px; }
.ds-cartao-pop[hidden] { display: none; }
.ds-cartao-pop-tit { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); padding: 2px 4px 4px; }
.ds-cartao-pop label { display: flex; align-items: center; gap: 9px; margin: 0; padding: 6px 4px; font-size: 13px; font-weight: 500; color: var(--texto); cursor: pointer; }
.ds-cartao-pop input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--accent); }
.ds-cartao-rod { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--texto-suave); }
table.oc-2 > :is(thead, tbody, tfoot) > tr > :nth-child(2),
table.oc-3 > :is(thead, tbody, tfoot) > tr > :nth-child(3),
table.oc-4 > :is(thead, tbody, tfoot) > tr > :nth-child(4),
table.oc-5 > :is(thead, tbody, tfoot) > tr > :nth-child(5),
table.oc-6 > :is(thead, tbody, tfoot) > tr > :nth-child(6),
table.oc-7 > :is(thead, tbody, tfoot) > tr > :nth-child(7),
table.oc-8 > :is(thead, tbody, tfoot) > tr > :nth-child(8),
table.oc-9 > :is(thead, tbody, tfoot) > tr > :nth-child(9),
table.oc-10 > :is(thead, tbody, tfoot) > tr > :nth-child(10),
table.oc-11 > :is(thead, tbody, tfoot) > tr > :nth-child(11),
table.oc-12 > :is(thead, tbody, tfoot) > tr > :nth-child(12),
table.oc-13 > :is(thead, tbody, tfoot) > tr > :nth-child(13),
table.oc-14 > :is(thead, tbody, tfoot) > tr > :nth-child(14),
table.oc-15 > :is(thead, tbody, tfoot) > tr > :nth-child(15),
table.oc-16 > :is(thead, tbody, tfoot) > tr > :nth-child(16),
table.oc-17 > :is(thead, tbody, tfoot) > tr > :nth-child(17),
table.oc-18 > :is(thead, tbody, tfoot) > tr > :nth-child(18),
table.oc-19 > :is(thead, tbody, tfoot) > tr > :nth-child(19),
table.oc-20 > :is(thead, tbody, tfoot) > tr > :nth-child(20),
table.oc-21 > :is(thead, tbody, tfoot) > tr > :nth-child(21),
table.oc-22 > :is(thead, tbody, tfoot) > tr > :nth-child(22),
table.oc-23 > :is(thead, tbody, tfoot) > tr > :nth-child(23),
table.oc-24 > :is(thead, tbody, tfoot) > tr > :nth-child(24),
table.oc-25 > :is(thead, tbody, tfoot) > tr > :nth-child(25) { display: none; }

/* =====================================================================
   Redesign (24/10/2026) — cabeçalho da tela num cartão branco: trilha,
   título e ações em cima; a barra de filtros logo abaixo entra no MESMO
   cartão, separada por um filete. Só CSS: quando o .ds-cab é seguido da
   barra (.ds-barra, .pv-filtros de Pedidos ou a .barra das telas antigas)
   os dois viram um cartão só; sem barra, o cabeçalho é um cartão sozinho.
   ===================================================================== */
.pagina > .ds-cab { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 22px 18px; margin: 0 0 18px; align-items: center; }
.pagina > .ds-cab .migalhas { margin-bottom: 10px; }
.pagina > .ds-cab:has(+ :is(.ds-barra, .pv-filtros, .barra):not(.oculto):not([hidden]):not(.tb-fonte)) {
  border-bottom: 0; border-radius: 14px 14px 0 0; margin-bottom: 0; padding-bottom: 16px; }
.pagina > .ds-cab + :is(.ds-barra, .pv-filtros, .barra):not(.oculto):not([hidden]):not(.tb-fonte) {
  background: linear-gradient(var(--border), var(--border)) top center / calc(100% - 44px) 1px no-repeat, var(--surface);
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: none;
  padding: 16px 22px 18px; margin: 0 0 18px; }
@media (max-width: 720px) {
  .pagina > .ds-cab { padding: 16px 16px 14px; }
  .pagina > .ds-cab + :is(.ds-barra, .pv-filtros, .barra):not(.oculto):not([hidden]):not(.tb-fonte) {
    padding: 14px 16px 16px; background-size: calc(100% - 32px) 1px, auto; }
}
/* Trilha dentro do cartão: o item atual é texto forte, sem a caixinha. */
.migalhas-atual { padding: 0; border: 0; background: transparent; color: var(--texto); font-weight: 600; }

/* Desenho novo das tabelas (24/10/2026; o Comercial segue o mesmo em
   css/bi.css): linhas brancas, sem listras; botões "Colunas" e baixar com
   contorno no canto do cartão. A tabela de Pedidos tem o cartão dela
   (.pv-cartao) e fica como está. */
.ds-cartao { --tabela-zebra: var(--surface); }
.ds-cartao-barra { padding: 10px 12px; }
.ds-cartao-btn { border: 1px solid var(--border); background: var(--surface); height: 32px; padding: 0 11px; font-weight: 600; }
.ds-cartao-btn:hover { background: var(--surface-2); border-color: var(--border-forte); }
.ds-cartao-btn.so-ico { width: 32px; padding: 0; justify-content: center; }
.ds-cartao-colunas + .ds-cartao-baixar { margin-left: 0; }
.ds-cartao .linha-total td { font-weight: 700; color: var(--texto); }

/* Canto direito do cartão de tabela (js/tabelas.js): busca, Colunas e
   baixar, juntos. A busca da tela que ela substitui fica escondida. */
.tb-fonte { display: none !important; }
.tb-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.tb-busca { position: relative; display: inline-flex; align-items: center; margin: 0; }
.tb-busca svg { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--texto-fraco); pointer-events: none; }
.tb-busca input { width: 210px; height: 32px; min-height: 32px; margin: 0; padding: 0 10px 0 32px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--texto); font: inherit; font-size: 12.5px; font-weight: 400; letter-spacing: 0; box-shadow: none; }
.tb-busca input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-suave); }
@media (max-width: 720px) { .tb-acoes { width: 100%; } .tb-busca { flex: 1 1 auto; } .tb-busca input { width: 100%; } }

/* Cartão de tabela que já existia na tela (js/tabelas.js .tb-cartao): o
   bloco/painel/cartão com título e uma tabela só. Título (.tb-cab) com as
   ações à direita; a tabela de ponta a ponta; o resto do conteúdo com o
   respiro lateral do cartão. .tb-via = os contêineres entre o cartão e a
   tabela (ficam sem respiro, quem está dentro deles ganha). */
.tb-cartao { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0 !important; box-shadow: none !important; }
.tb-cartao > .tb-cab { margin: 0 !important; padding: 16px 20px 14px !important; border-bottom: 0 !important; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.tb-cartao > .tb-cab > .tb-acoes { margin-left: auto; }
/* A nota só empurra as ações quando aparece (a sem controle fica escondida, bi.css). */
.tb-cartao > .tb-cab .note:has(button, a, input, select) + .tb-acoes { margin-left: 8px; }
.tb-cartao > :not(.tb-cab, .tb-via, .tw, .tabela-wrap, .tw-rolagem),
.tb-cartao .tb-via > :not(.tb-via, .tw, .tabela-wrap, .tw-rolagem) { margin-left: 20px !important; margin-right: 20px !important; }
.tb-cartao .tb-via { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.tb-cartao > :last-child:not(.tb-via, .tw, .tabela-wrap, .hint, .tb-pag, .tw-rolagem) { margin-bottom: 18px; }
.tb-cartao .tabela-wrap { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.tb-cartao :is(.tw, .tabela-wrap) ~ .hint { margin: 0 !important; max-width: none; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.5; }
/* Tabela no fim do cartão: as células dos cantos acompanham o
   arredondamento (o cartão não corta o conteúdo, senão cortaria o menu
   de Colunas). */
:is(.tb-cartao, .ds-cartao) .tb-ultima { border-bottom-left-radius: 13px !important; border-bottom-right-radius: 13px !important; }
:is(.tb-cartao, .ds-cartao) .tb-ultima > table > :is(tbody:last-child, tfoot) > tr:last-child > td:first-child { border-bottom-left-radius: 13px; }
:is(.tb-cartao, .ds-cartao) .tb-ultima > table > :is(tbody:last-child, tfoot) > tr:last-child > td:last-child { border-bottom-right-radius: 13px; }

/* Título da tabela dentro da barra do cartão (js/tabelas.js, 26/10/2026),
   à esquerda, com o "i" que abre a explicação. */
.ds-cartao-tit { position: relative; display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0;
  font-size: 15px; font-weight: 700; color: var(--texto); letter-spacing: -.005em; }
.ds-cartao-info { width: 19px; height: 19px; min-height: 0; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--texto-fraco); font: 700 11px/1 inherit; font-family: Georgia, serif; font-style: italic; cursor: pointer; }
.ds-cartao-info:hover, .ds-cartao-info[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-suave); }
.ds-cartao-info-txt { position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); width: max-content; max-width: min(440px, 80vw); padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
  font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--texto-suave); letter-spacing: 0; }
.ds-cartao-info-txt[hidden] { display: none; }

/* Estoque › Comparação: entrada × saída por produto e o dia a dia do escolhido */
.cp-cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; margin: 0 0 16px; scroll-margin-top: 16px; }
.cp-cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.cp-fks { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 14px; }
.cp-graf svg { display: block; width: 100%; height: 180px; background: var(--surface-2); border-radius: var(--r-md); }
.cp-leg { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--texto-suave); margin-bottom: 6px; }
.cp-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cp-b-ent { fill: var(--verde); background: var(--verde); }
.cp-b-sai { fill: var(--accent); background: var(--accent); }
.cp-eixo { stroke: var(--border); stroke-width: 1; }
.cp-graf-rot { display: flex; justify-content: space-between; margin-top: 4px; }
.cp-dias { margin-top: 14px; max-height: 320px; overflow-y: auto; }
.cp-entrou { color: var(--verde); }
.cs-tabela tr.cp-linha { cursor: pointer; }
.cs-tabela tr.cp-linha.aberta td { background: var(--accent-suave); }
.cs-tabela tr.cp-linha:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* Frota › Notas avulsas: uma caixa por carga */
.av-dia-btn { padding: 6px 8px; display: inline-grid; place-items: center; }
.av-dia-btn svg { width: 16px; height: 16px; transform: rotate(90deg); }
.av-dia-btn[data-dias="1"] svg { transform: rotate(-90deg); }
.av-acoes { margin-left: auto; display: inline-flex; gap: 8px; flex-shrink: 0; }
.av-digitar { display: inline-flex; gap: 6px; align-items: center; }
.av-digitar[hidden] { display: none; }
.av-notas { width: 130px; max-width: 100%; }
.av-bipar { margin: 0 0 16px; }
.av-bipar[hidden] { display: none; }
.av-bip-corpo { padding: 12px 16px 14px; display: grid; gap: 12px; }
.av-bip-linha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.av-bip { flex: 1; min-width: 200px; font-size: 16px; }
.av-bip-fechar { padding: 6px 8px; display: inline-grid; place-items: center; } .av-bip-fechar svg { width: 16px; height: 16px; }
.av-bip-video { width: 100%; max-width: 480px; max-height: 260px; border-radius: 10px; background: #000; object-fit: cover; }
.av-bip-video[hidden] { display: none; }
.av-bip-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.av-bip-nota { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--fundo-suave, rgba(127,127,127,.12)); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.av-bip-nota small { font-weight: 500; color: var(--texto-suave); }
.av-bip-ja { box-shadow: inset 0 0 0 1px var(--ambar, #d97706); }
.av-bip-nota button { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--texto-suave); display: inline-grid; place-items: center; }
.av-bip-nota button svg { width: 13px; height: 13px; }
.av-sugestao { margin: 18px 0 8px; flex-wrap: wrap; } .av-sugestao .btn { margin-left: auto; }
.av-sugestao + .av-envios { margin-top: 0; }
.av-envios { margin-top: 18px; }
.av-envios table { table-layout: fixed; width: 100%; }
.av-envios th:nth-child(1) { width: 13%; } .av-envios th:nth-child(2) { width: 30%; } .av-envios th:nth-child(3) { width: 10%; } .av-envios th:nth-child(4) { width: 12%; } .av-envios th:nth-child(6) { width: 14%; }
.av-envios td:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-envios .av-erro { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.av-envios.tb-cartao > .av-carga-cab { padding: 10px 16px !important; gap: 8px 14px; flex-wrap: nowrap; }
.av-envios.tb-cartao > .tb-cab > .tb-acoes { margin-left: 0; flex-shrink: 0; }
@media (max-width: 700px) { .av-digitar { width: 100%; flex-wrap: wrap; } .av-notas { flex: 1; width: auto; min-width: 0; } }
.av-carga { margin: 0 0 12px; }
.av-carga.tb-cartao > .av-carga-cab { padding: 10px 16px !important; gap: 8px 14px; flex-wrap: nowrap; }
.av-carga-cab > div { min-width: 0; }
.av-carga-cab .est-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-carga-n { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.av-carga.tb-cartao > .tb-cab > .tb-acoes { margin-left: 0; flex-shrink: 0; }
@media (max-width: 700px) { .av-carga.tb-cartao > .av-carga-cab { flex-wrap: wrap; } }
/* Mesmas colunas em todos os cartões, alinhadas de um para o outro. */
.av-carga table { table-layout: fixed; width: 100%; }
.av-carga th:nth-child(1) { width: 12%; } .av-carga th:nth-child(2) { width: 10%; } .av-carga th:nth-child(4) { width: 11%; }
.av-carga th:nth-child(5) { width: 8%; } .av-carga th:nth-child(6) { width: 7%; } .av-carga th:nth-child(7) { width: 12%; } .av-carga th:nth-child(8) { width: 15%; }
.av-erro { color: var(--vermelho); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-carga td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; }

/* Estoque › Previsibilidade (js/estoque/compras.js) */
.cp-tabela td { vertical-align: top; }
.cp-aviso { display: inline-block; font-size: 11px; font-weight: 600; color: var(--ambar, #a15c07); }
.cp-aviso-val { color: var(--vermelho); }
.cp-prazo { border: 0; background: none; padding: 0; font: inherit; color: var(--azul, #2563eb); cursor: pointer; text-decoration: underline dotted; }
.cp-barras { display: flex; align-items: flex-end; gap: 2px; height: 28px; width: 76px; }
.cp-barras i { flex: 1; background: var(--texto-suave); opacity: .55; border-radius: 2px 2px 0 0; min-height: 2px; }
.cp-barras i:last-child { opacity: .9; }
.cp-barras i.cp-faltou { background: var(--vermelho); opacity: .35; }
.cp-dica { margin: 0 0 12px; }

/* Estoque › Visão geral (js/estoque/painel.js) */
.ep-escolha { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; flex-wrap: wrap; }
.ep-busca { flex: 1; min-width: 240px; max-width: 560px; }
.ep-voltar svg { transform: rotate(180deg); }
.ep-kpis.bi { padding: 0; margin-bottom: 16px; }
.ep-alerta { color: var(--vermelho); }
.ep-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 16px; margin: 16px 0; }
.ep-largo { grid-column: 1 / -1; }
.ep-cartao { margin: 0; padding: 14px 16px; min-width: 0; }
.ep-cartao-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ep-grafico { position: relative; height: 280px; }
.ep-grafico-alto { height: 340px; }
.ep-tabela { overflow-x: auto; }
.ep-lista { width: 100%; }
.ep-lista tbody tr[data-produto] { cursor: pointer; }
.ep-lista td { vertical-align: top; }
.ep-vazio { padding: 12px 0; }
.ep-produto-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 16px; flex-wrap: wrap; }
.ep-produto-nome { font-size: 18px; font-weight: 700; }
.ep-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ep-mini > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.ep-mini b { font-size: 18px; }
@media (max-width: 700px) { .ep-grade { grid-template-columns: 1fr; } .ep-busca { min-width: 0; } }
.ep-voltar[hidden] { display: none; }
.ep-tabela .tabela { min-width: 0; }
.ep-tabela .cs-tabela > tbody > tr > td:first-child, .ep-lista td { white-space: normal; }
.ep-lista td.est-num, .ep-lista th.est-num { white-space: nowrap; }
.ep-linhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
.ep-linha.bi { padding: 0; background: none; min-height: 0; }
.ep-linha-tit { font-size: 12px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ep-periodos { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; margin-top: 6px; width: fit-content; }
.ep-periodos button { border: 0; background: none; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--texto-suave); cursor: pointer; }
.ep-periodos button.on { background: var(--surface); color: var(--texto); box-shadow: var(--sombra-sm); }
@media (max-width: 700px) { .ep-linhas { grid-template-columns: 1fr; } }

/* Importações (js/importacoes.js): a planilha, uma linha por carga */
.imp-resumos { display: flex; gap: 16px; flex-wrap: wrap; }
/* Cabeçalho das Importações: os totais numa linha, de ponta a ponta, e
   todos os filtros na linha de baixo (a busca estica até o fim). */
.imp-barra { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; }
.imp-barra .imp-resumos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.imp-barra .ds-controles { width: 100%; flex-wrap: wrap; }
.imp-barra .ds-controles .ds-busca { flex: 1 1 260px; }
.imp-filtro { min-width: 150px; }
/* Cards das cargas (a tela de 24/10, com os campos da planilha) */
.imp-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.imp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px 16px; cursor: pointer;
  display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; }
.imp-card:hover { border-color: var(--border-forte); box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
.imp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-card.fechada { background: var(--surface-2); }
.imp-card-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.imp-card-topo .ds-badge { margin-left: auto; }
.imp-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.imp-titulo > div { min-width: 0; }
.imp-bandeira { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--border); }
.imp-bandeira-txt { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--texto-suave); background: var(--surface-2); }
.imp-proc { font-size: 12.5px; font-weight: 600; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.imp-forn { margin: 0; font-size: 16px; font-weight: 700; color: var(--texto); letter-spacing: -.01em; line-height: 1.3; }
.imp-prod { margin: 3px 0 0; font-size: 13px; color: var(--texto-suave); }
.imp-passos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.imp-passos li span { display: block; height: 5px; border-radius: 99px; background: var(--tabela-linha, #eef2f7); }
.imp-passos li.feito span { background: var(--accent); opacity: .45; }
.imp-passos li.atual span { background: var(--accent); }
.imp-grupo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.imp-grupo h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-fraco); }
.imp-grupo dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.imp-grupo dt { font-size: 11.5px; color: var(--texto-fraco); }
.imp-grupo dd { margin: 1px 0 0; font-size: 13px; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.imp-transp { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--accent-suave); color: var(--accent-escuro); }
.imp-transp.maritimo { background: #e0f2fe; color: #075985; }
.imp-transp svg { width: 15px; height: 15px; }
.imp-grupo dd.pv-negativa { color: var(--vermelho); }
.imp-cambios { grid-template-columns: 1fr !important; }
.imp-card-mais { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
  font-size: 12px; font-weight: 600; color: var(--accent-escuro); }
.imp-card-mais svg { width: 14px; height: 14px; transition: transform .15s; }
.imp-card.aberto .imp-card-mais svg { transform: rotate(180deg); }
.imp-card.aberto { border-color: var(--accent); box-shadow: 0 6px 18px rgba(16, 24, 40, .07); }
.imp-detalhe { cursor: auto; }
.imp-graficos { margin: 0 0 16px; padding: 14px 16px; }
.imp-graficos-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.imp-graficos-cab > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.imp-perda { margin-top: 0; }
.pc-barra { cursor: pointer; outline: none; }
.pc-barra.apagada rect:not(.pc-alvo) { fill-opacity: .3; }
.pc-barra:hover rect:not(.pc-alvo), .pc-barra:focus-visible rect:not(.pc-alvo) { fill-opacity: 1; }
.pc-barra.on rect:not(.pc-alvo) { fill-opacity: 1; stroke: var(--texto); stroke-width: 1.5; }
.pc-mes { margin: 0 0 16px; padding: 18px 20px; border-color: var(--accent); }
.pc-mes .pc-mes-tabela { margin-top: 14px; }
.pc-mes td.pv-negativa { color: var(--vermelho); }
.pc-mes td.pc-ganho, .pc-ganho { color: var(--verde); }
tr.pc-linha-mes { cursor: pointer; }
tr.pc-linha-mes.on td { background: var(--accent-suave); }
.imp-perda-cab { margin: 0 0 16px; padding: 18px 20px; }
.imp-perda-tit { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.imp-perda-tit h2 { margin: 0 0 2px; font-size: 19px; font-weight: 700; color: var(--texto); }
.imp-perda-resumos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.imp-perda-sub { margin: 18px 0 8px; font-size: 15px; font-weight: 700; color: var(--texto); }
.imp-moedas { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); }
.imp-moeda { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 4px; border: 1px solid transparent; border-radius: 99px;
  background: transparent; color: var(--texto-suave); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, padding .15s; }
.imp-moeda .imp-bandeira { width: 26px; height: 26px; opacity: .55; transition: opacity .15s; }
.imp-moeda:hover .imp-bandeira { opacity: .85; }
.imp-moeda-nome { display: none; }
.imp-moeda.on { padding: 0 14px 0 4px; background: var(--surface); border-color: var(--accent); color: var(--accent-escuro); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.imp-moeda.on .imp-bandeira { opacity: 1; }
.imp-moeda.on .imp-moeda-nome { display: inline; }
.imp-moeda:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.imp-linhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
.imp-linha.bi { padding: 0; background: none; min-height: 0; }
.imp-linha-tit { font-size: 12px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
@media (max-width: 700px) { .imp-linhas { grid-template-columns: 1fr; } }
.imp-mais { display: flex; justify-content: center; margin: 18px 0 4px; }
.imp-periodo { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.imp-periodo input[type="date"] { width: auto; }
.imp-tabela th, .imp-tabela td { white-space: nowrap; }
.imp-tabela th:first-child, .imp-tabela td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }

/* Estoque › Ocupação: com ou sem o 1º andar (js/estoque/armazem.js) */
.ar-andar1 { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); }
.ar-andar1 button { height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: 99px; background: transparent; color: var(--texto-suave);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ar-andar1 button:hover { color: var(--texto); }
.ar-andar1 button.on { background: var(--surface); border-color: var(--accent); color: var(--accent-escuro); box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.ar-andar1 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Estoque › Movimentação do armazém (js/estoque/armazem.js) */
.mv-grafico { margin: 0 0 18px; padding: 14px 16px; }
.mv-grafico.bi { padding: 14px 16px; background: var(--surface); min-height: 0; }
.mv-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mv-cab > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.mv-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mv-controles .ds-periodo { display: inline-flex; align-items: center; gap: 6px; }
.mv-controles input[type="date"] { width: auto; }
.mv-col { cursor: default; }
.mv-col:hover rect { fill-opacity: 1; }

/* Estoque › Armazém 3D (estoque/armazem3d.js) */
.a3-palco { position:relative; height:max(440px, calc(100vh - 290px)); border:1px solid var(--rule2, #e2e8f0); border-radius:14px;
  background:linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); overflow:hidden; }
.a3-palco canvas { display:block; width:100%; height:100%; cursor:grab; }
.a3-palco canvas:active { cursor:grabbing; }
.a3-palco .pv-carregando { padding:24px; }
.a3-rodape { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; margin-top:10px; }
.a3-legenda { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; }
.a3-leg { display:inline-flex; align-items:center; gap:6px; }
.a3-leg b { font-variant-numeric:tabular-nums; }
.a3-pt { width:11px; height:11px; border-radius:3px; flex:none; }
[data-tema="escuro"] .a3-palco { background:linear-gradient(180deg, #1e293b 0%, #0f172a 100%); }