/* ERP AgroMáquinas — CSS comum a todos os módulos.
   Versão oficial no portal (src/Portal.Web/wwwroot/assets/erp.css, servida em /assets/erp.css). Nos módulos é uma
   cópia em wwwroot/lib/erp-ui/, usada só em desenvolvimento: NÃO EDITAR lá (docs/regras-comuns.md, "Visual").
   Ajustes de um módulo vão no CSS dele (wwwroot/css/<modulo>.css), carregado depois deste.
   Nasceu do layout do BI: os nomes das classes são os dele.

   Identidade AgroMáquinas — três guias da marca (outubro de 2026):
   · Paleta Terra, combinação "Relatório" (telas, dashboards e tabelas): chão Argila, superfícies Algodão, texto
     Carvão; Capim nas barras, Terracota nos rótulos de seção e nas marcas; Mearim só em detalhe. O laranja oficial
     é a âncora da marca e nada mais (logo, faixa do cabeçalho, aba ativa, foco, linha selecionada). Verde e
     vermelho oficiais só para subiu / caiu. O laranja, a Palha, o Capim e o Mearim nunca carregam texto pequeno
     sobre fundo claro.
   · Guia de Tipografia: Saira nos títulos, rótulos e números de destaque; Source Sans no texto e nas tabelas;
     IBM Plex Mono em códigos (.cod). Os arquivos ficam ao lado deste, em fonts/ (ver fonts/LEIA-ME.txt).
   · Catálogo de Ícones: os ícones da biblioteca (.ico), em icones/<variação>/<nome>.svg ao lado deste (servidos
     em /assets/icones), nunca abaixo de 24 px, sempre com o nome junto (ao lado ou embaixo), uma variação por fundo
     (terra-carvao-terracota no claro, terra-algodao-palha no Carvão), sem recolorir.
   Do desenho do logo vêm as pontas retas das barras e o "corte" de 2 px entre a base e o destaque (a faixa laranja
   sob o cabeçalho). Raios: 4 px nas marcas, 6 px nos controles, 8 px nas superfícies. */

/* As fontes: a instalada no computador, se houver; senão o arquivo de fonts/ (o caminho é relativo a este arquivo:
   /assets/fonts em produção, lib/erp-ui/fonts na cópia de desenvolvimento dos módulos). */
@font-face { font-family: "Saira"; font-style: normal; font-weight: 600; font-display: swap; src: local("Saira SemiBold"), local("Saira-SemiBold"), url("fonts/Saira-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Saira"; font-style: normal; font-weight: 700; font-display: swap; src: local("Saira Bold"), local("Saira-Bold"), url("fonts/Saira-Bold.ttf") format("truetype"); }
@font-face { font-family: "Saira"; font-style: normal; font-weight: 800; font-display: swap; src: local("Saira ExtraBold"), local("Saira-ExtraBold"), url("fonts/Saira-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap; src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("fonts/SourceSansPro-Regular.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; font-display: swap; src: local("Source Sans Pro SemiBold"), local("SourceSansPro-SemiBold"), url("fonts/SourceSansPro-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 700; font-display: swap; src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("fonts/SourceSansPro-Bold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: local("IBM Plex Mono"), local("IBMPlexMono"), url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"), url("fonts/IBMPlexMono-Medium.ttf") format("truetype"); }

:root {
  /* Paleta Terra */
  --algodao: #F6F3EF; --argila: #E2DCD5; --pedra: #756B61; --carvao: #34302D; --babacu: #523C2E;
  --palha: #C3A065; --barro: #BC9076; --terracota: #9D4E2F; --capim: #7C865F; --mata: #2E4835; --mearim: #6A8EA0;
  /* Paleta oficial */
  --laranja: #D0672F; --grafite: #4B4B4A; --verde: #256136; --vermelho: #C30D26;

  --fonte-titulo: "Saira", "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --fonte-codigo: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Os papéis, nas cores da marca */
  --brand: var(--laranja);
  --brand-ink: var(--terracota);          /* o laranja não carrega texto sobre Algodão (3,4:1); a Terracota sim (5,3:1) */
  --primary: var(--carvao);
  --primary-dark: #262220;
  --accent: var(--laranja);
  --text: var(--carvao);
  --ink: var(--carvao);
  --ink-2: #574F47;                       /* entre Pedra e Carvão: texto secundário que lê também sobre Argila */
  --ink-3: #655C53;                       /* Pedra escurecida: 4,8:1 sobre Argila, 5,9:1 sobre Algodão (a Pedra é 3,8:1) */
  --muted: #655C53;
  --bg: var(--argila);                    /* o chão */
  --side: var(--argila);
  --card: var(--algodao);                 /* as superfícies */
  --superficie: var(--algodao);           /* campos, pílulas e menus: Algodão, nunca branco puro ao lado dele */
  --hairline: var(--argila);              /* linhas dentro das superfícies */
  --line: #D3CBC1;                        /* linhas sobre o chão */
  --line-strong: #A39A90;                 /* sob o cabeçalho das tabelas, antes dos totais, borda das caixas de marcar */
  --control-line: #C8BEB3;
  --info-bg: #ECE6DF;                     /* realce (linha sob o mouse, selecionada): meio caminho até a Argila */
  --info-line: #D3CBC1;
  --warn-bg: #F1E6D0;
  --warn-line: var(--palha);
  --series: var(--capim);                 /* todas as barras de um ranking são a mesma série */
  --series-track: var(--argila);          /* o trilho do medidor */
  --good: var(--verde);
  --bad: var(--vermelho);
  --shadow: rgba(52,48,45,.16);           /* sombra dos menus: Carvão, não preto */
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--fonte-texto); font-size: 14px; }
code, pre, .cod { font-family: var(--fonte-codigo); }
code, pre { font-size: 12px; }
code { background: rgba(52,48,45,.07); padding: 1px 5px; border-radius: 4px; }
/* códigos de produto, números de nota, pedido e OS */
.cod { font-size: .92em; letter-spacing: -.01em; font-variant-numeric: normal; }
:focus-visible { outline-color: var(--laranja); }

/* Tipografia: Saira nos títulos e nos números de destaque */
.sidebar h2, .dash-header h1, .card-head h2, .section-title, .card-sub, .empty-state h1,
.tile-value, .mini strong, table.grid caption, .btn, .tab, .topnav a, .topnav button, .seg button.on, .portal-link { font-family: var(--fonte-titulo); }
/* o "rótulo" dos guias: caixa alta curta, espaçada, em Saira 600 */
.tile-label, .section, table.grid th, .badge {
  font-family: var(--fonte-titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
}
.tile-label .muted, table.grid th.group, table.grid th small { font-family: var(--fonte-texto); text-transform: none; letter-spacing: 0; }

/* Ícones da biblioteca (img.ico): o tamanho vem do atributo, nunca abaixo de 24 px; o nome vai junto, ao lado (.com-ico) ou embaixo */
.ico { display: inline-block; flex: none; vertical-align: middle; }
.com-ico { display: flex; align-items: center; gap: 9px; min-width: 0; }
.com-ico > .nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Layout: fixed sidebar with its own scroll */
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--side); padding: 20px 16px 40px; border-right: 1px solid var(--line);
}
.sidebar h2 { color: var(--carvao); font-size: 19px; font-weight: 800; margin: 0 0 14px; }
.sidebar hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0 8px; }
.section { font-size: 11px; color: var(--terracota); margin: 20px 0 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.main { padding: 24px 32px 48px; min-width: 0; }

.field { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; position: relative; }
.field-label { display: block; font-size: 12.5px; color: var(--ink-2); margin: 0 0 6px; padding: 0; }
.field-label small { color: var(--muted); }

/* Pills: checkbox / radio kept focusable for keyboard users */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-block; padding: 3px 10px; border-radius: 6px; user-select: none;
  background: var(--superficie); border: 1px solid var(--control-line); font-size: 13px; color: var(--ink);
}
.pill:hover span { border-color: var(--carvao); }
.pill input:checked + span { background: var(--carvao); color: var(--algodao); border-color: var(--carvao); }
.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.check input, .ms-list, .pills { accent-color: var(--carvao); }

/* Multi-select (search + tick list; the behaviour is the module's script) */
.ms { position: relative; }
.ms-box {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 36px;
  background: var(--superficie); border: 1px solid var(--control-line); border-radius: 6px; padding: 4px 6px; cursor: text; color: var(--ink);
}
.ms-box:focus-within { border-color: var(--carvao); box-shadow: 0 0 0 1px var(--carvao); }
.ms-input { flex: 1 1 60px; min-width: 60px; border: 0; outline: 0; font: inherit; font-size: 13px; padding: 3px 2px; background: transparent; }
.chip {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  background: var(--carvao); color: var(--algodao); border-radius: 5px; padding: 1px 2px 1px 8px; font-size: 12px;
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { border: 0; background: transparent; color: var(--algodao); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 4px; }
.chip button:hover, .chip button:focus-visible { background: rgba(246,243,239,.25); outline: 0; }
.chip.more { padding: 1px 8px; background: var(--pedra); cursor: default; }
.ms-clear { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.ms-clear:hover, .ms-clear:focus-visible { color: var(--primary); background: var(--info-bg); outline: 0; }
.ms-panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); overflow: hidden;
  background: var(--superficie); border: 1px solid var(--control-line); border-radius: 8px; box-shadow: 0 8px 22px var(--shadow);
}
.ms-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.ms-actions[hidden] { display: none; }
.ms-actions button { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ms-list { max-height: 280px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; }
.ms-list li { position: relative; padding: 6px 10px 6px 32px; font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.ms-list li.active, .ms-list li:hover { background: var(--info-bg); }
.ms-list li.empty { color: var(--muted); cursor: default; padding-left: 10px; }
.ms-list li.empty:hover { background: none; }
/* Tick box: the list stays open, so several items can be ticked in one go */
.ms-list li[data-value]::before { content: ""; position: absolute; left: 10px; top: 8px; width: 13px; height: 13px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--superficie); }
.ms-list li.on::before { background: var(--carvao); border-color: var(--carvao); }
.ms-list li.on::after { content: ""; position: absolute; left: 15px; top: 10px; width: 4px; height: 8px; border: solid var(--algodao); border-width: 0 2px 2px 0; transform: rotate(45deg); }


/* Cabeçalho: a faixa Carvão, o corte e a faixa laranja (o logo, deitado) */
.dash-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; row-gap: 12px; flex-wrap: wrap;
  background: var(--carvao); color: var(--algodao); border-radius: 8px;
  padding: 16px 22px; margin-bottom: 23px;
  box-shadow: 0 2px 0 var(--bg), 0 5px 0 var(--laranja);
}
/* ao lado do logo, o rótulo da peça: caixa alta espaçada, em Palha (5,3:1 sobre o Carvão) */
.dash-header h1 { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--palha); }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; flex-wrap: wrap; }
.brand img { display: block; height: 30px; width: auto; }
.brand h1 { padding-left: 16px; border-left: 1px solid rgba(246,243,239,.26); }
/* o lado direito do cabeçalho: as abas e a volta ao portal; quebram juntas */
.dash-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topnav { display: flex; gap: 2px; flex-wrap: wrap; background: rgba(246,243,239,.09); padding: 4px; border-radius: 8px; }
.topnav a { display: inline-flex; align-items: center; gap: 7px; color: var(--algodao); text-decoration: none; padding: 4px 13px 4px 8px; border-radius: 6px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.topnav a:not(:has(.ico)) { padding: 7px 13px; }
.topnav a:hover { background: rgba(246,243,239,.14); }
.topnav a.on { background: var(--algodao); color: var(--carvao); box-shadow: inset 0 -3px 0 var(--laranja); }
/* uma aba com ícone traz as duas variações: a clara sobre o Carvão (.no-escuro), a escura na aba ativa (.no-claro) */
.topnav a .ico.no-claro, .topnav a.on .ico.no-escuro { display: none; }
.topnav a.on .ico.no-claro { display: inline-block; }
/* Navigation of the header: the user's name and an action that posts (Sair) look like the links */
.topnav form { display: flex; margin: 0; }
.topnav button { font: inherit; font-family: var(--fonte-titulo); font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--algodao); background: none; border: 0; padding: 7px 13px; border-radius: 6px; cursor: pointer; }
.topnav button:hover { background: rgba(246,243,239,.14); }
.topnav .who { align-self: center; padding: 0 10px; color: var(--argila); font-size: 13px; }
/* "← Portal": a volta ao menu do portal, no cabeçalho dos módulos */
.portal-link { color: var(--algodao); font-size: 13px; font-weight: 600; letter-spacing: .01em; text-decoration: none; white-space: nowrap; padding: 7px 9px; border: 1px solid rgba(246,243,239,.26); border-radius: 8px; }
.portal-link:hover { background: rgba(246,243,239,.14); }

/* Barra lateral do ERP (.shell > .rail + .conteudo): a mesma em todos os sistemas, preenchida por /assets/erp-shell.js
   (no portal, vem pronta do servidor). Carvão com o corte e a faixa laranja à direita, como o cabeçalho. Expandida, o
   nome fica ao lado do ícone; compacta (.shell.compacta, para quem já tem coluna de filtros, como o BI), embaixo, e o
   logo sai do topo: o símbolo da marca vira o ícone do Início no lugar da casa (.inicio-ico), na cor dos outros (.simbolo-ico: o favicon em 48 px,
   embutido como máscara e pintado com a cor do texto; embutido porque máscara de outra origem pede CORS).
   No celular vira um cabeçalho, com os itens no botão "Menu". */
.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.shell.compacta { grid-template-columns: 84px minmax(0, 1fr); }
.shell > .conteudo { min-width: 0; }
.rail {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; margin-right: 5px; padding: 18px 12px;
  display: flex; flex-direction: column; background: var(--carvao); color: var(--algodao);
  box-shadow: 2px 0 0 var(--bg), 5px 0 0 var(--laranja);
}
.rail-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail .marca { display: block; padding: 2px 8px 18px; }
.rail .marca img { display: block; width: auto; }
.rail .marca .logo { height: 26px; }
.rail .rail-menu, .rail .simbolo-ico { display: none; }
.rail .simbolo-ico { width: 24px; height: 24px; flex: none; background-color: currentColor;
  --simbolo: url("data:image/png;base64,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");
  -webkit-mask-image: var(--simbolo); mask-image: var(--simbolo);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.rail .inicio-ico { display: contents; }
.rail-itens { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.rail .grupo { font-family: var(--fonte-titulo); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; font-size: 11px; color: var(--palha); padding: 14px 10px 4px; }
.rail-itens > a, .rail button {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 36px; padding: 5px 10px; border: 0; border-radius: 6px;
  background: none; color: var(--algodao); text-decoration: none; text-align: left; cursor: pointer;
  font-family: var(--fonte-titulo); font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
}
.rail-itens > a:hover, .rail button:hover { background: rgba(246,243,239,.14); }
.rail-itens > a.on { background: var(--algodao); color: var(--carvao); box-shadow: inset 3px 0 0 var(--laranja); }
.rail-itens > a .ico.no-claro, .rail-itens > a.on .ico.no-escuro { display: none; }
.rail-itens > a.on .ico.no-claro { display: inline-block; }
.rail .conta { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(246,243,239,.18); }
.rail .conta form { margin: 0; }
.rail .conta button { width: 100%; }
.rail .who { padding: 4px 10px; font-size: 13px; color: var(--argila); overflow-wrap: anywhere; }
.rail .who small { display: block; font-size: 11.5px; color: var(--palha); }
.compacta .rail { padding: 14px 6px; }
.compacta .rail .marca, .compacta .rail .who { display: none; }
.compacta .rail .simbolo-ico { display: block; }
.compacta .rail .inicio-ico { display: none; }
.compacta .rail-itens > a, .compacta .rail button { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; font-size: 11.5px; line-height: 1.15; text-align: center; }
/* compacta, o grupo não cabe escrito: vira uma linha entre os itens */
.compacta .rail .grupo { height: 1px; margin: 8px 10px; padding: 0; overflow: hidden; font-size: 0; background: rgba(246,243,239,.18); }
@media (max-width: 760px) {
  .shell, .shell.compacta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .rail, .compacta .rail { position: sticky; z-index: 20; height: auto; max-height: 100vh; margin: 0 0 5px; padding: 10px 12px; box-shadow: 0 2px 0 var(--bg), 0 5px 0 var(--laranja); }
  .rail .marca, .compacta .rail .marca { display: block; padding: 0; }
  .compacta .rail .simbolo-ico { display: none; }
  .compacta .rail .inicio-ico { display: contents; }
  .rail .rail-menu { display: block; width: auto; padding: 7px 13px; border: 1px solid rgba(246,243,239,.26); }
  .rail-itens { display: none; padding-top: 10px; }
  .rail.aberta .rail-itens { display: flex; }
  .compacta .rail-itens > a, .compacta .rail button { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 5px 10px; font-size: 13.5px; text-align: left; }
  .compacta .rail .grupo { height: auto; margin: 0; padding: 14px 10px 4px; font-size: 11px; background: none; }
  .compacta .rail .who { display: block; }
}

/* Alerts, buttons */
.alert { border-radius: 6px; padding: 12px 16px; margin: 0 0 16px; border: 1px solid; font-size: 14px; }
.alert.warning { background: var(--warn-bg); border-color: var(--warn-line); color: #5A451C; }
.alert.info { background: var(--info-bg); border-color: var(--info-line); color: var(--ink-2); }
.alert p { margin: 6px 0 0; }
.alert pre { background: rgba(52,48,45,.05); padding: 8px 10px; border-radius: 6px; margin: 8px 0 0; }
.filter-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block; margin-top: 12px; background: var(--superficie); color: var(--carvao);
  border: 1px solid var(--control-line); border-radius: 6px; padding: 7px 14px; font: inherit; font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--carvao); }
.btn.ghost { margin-top: 0; }
.btn.primary { background: var(--carvao); color: var(--algodao); border-color: var(--carvao); margin-top: 0; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.small { margin-top: 0; padding: 5px 10px; font-size: 12px; }
.btn.danger { color: var(--bad); }
.btn.danger:hover { border-color: var(--bad); }
.caption { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.footer { margin-top: 24px; }

/* Modal de confirmação e aviso (dialog.erp-modal), aberto por /assets/erp-confirmar.js no lugar do confirm, do alert e
   do hx-confirm do navegador: superfície Algodão sobre o Carvão translúcido, título, texto, nota e os botões à direita. */
dialog.erp-modal {
  width: min(420px, calc(100% - 32px)); max-width: none; margin: auto; padding: 0; border: 0; border-radius: 8px;
  background: var(--card); color: var(--ink); box-shadow: 0 12px 32px var(--shadow);
}
dialog.erp-modal::backdrop { background: rgba(52,48,45,.55); }
.erp-modal-corpo { padding: 20px 22px 18px; }
.erp-modal h2 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-size: 17px; font-weight: 700; color: var(--carvao); overflow-wrap: anywhere; }
.erp-modal p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-line; }
.erp-modal p.nota { font-size: 12.5px; color: var(--ink-3); }
.erp-modal ul { margin: 0 0 8px; padding-left: 20px; max-height: 14rem; overflow-y: auto; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.erp-modal-botoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.erp-modal-botoes .btn { margin-top: 0; }
/* páginas sem conteúdo ainda (primeira carga, sem perfil): o logo, o título e o recado */
.empty-state { max-width: 760px; margin: 48px auto; padding: 0 16px; }
.empty-state > img { display: block; height: 30px; width: auto; margin-bottom: 18px; }
.empty-state h1 { font-size: 26px; font-weight: 800; color: var(--carvao); margin: 0 0 14px; }

.muted { color: var(--ink-3); font-weight: 400; }
/* links: o texto em Carvão, o sublinhado laranja */
.link, .tile-foot a, .empty a, .link-btn, .chip-clear {
  color: var(--carvao); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--laranja); text-decoration-thickness: 1.5px;
}
.link:hover, .tile-foot a:hover, .empty a:hover, .link-btn:hover, .chip-clear:hover { color: var(--terracota); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-filter {
  font: inherit; font-size: 12px; background: var(--superficie); border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 10px; color: var(--ink);
}
button.chip-filter { cursor: pointer; }
.chip-filter.active { border-color: var(--terracota); box-shadow: inset 3px 0 0 var(--terracota); }
.chip-clear { font-size: 12px; margin-left: 4px; }

/* Stat tiles: label · value · delta vs a named period. A faixa à esquerda é a do logo: reta, grossa, e só no primeiro
   indicador, a âncora da marca. Os demais ficam sem faixa (em Argila ela sumia sobre o Algodão). */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile {
  position: relative; background: var(--card); border: 0; border-radius: 8px; padding: 14px 16px 14px 20px;
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.tiles > .tile:first-child::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; background: var(--laranja); }
.tile-label { font-size: 10.5px; color: var(--ink-3); line-height: 1.35; }
.tile-value { font-size: 29px; line-height: 1.15; font-weight: 700; letter-spacing: -.005em; color: var(--carvao); overflow-wrap: anywhere; }
.tile-value.muted { font-weight: 600; color: var(--ink-3); }
.tile-value small, .tile-value .muted { font-family: var(--fonte-texto); }
.tile-foot { font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.delta { font-weight: 700; white-space: nowrap; }
.delta.good { color: var(--good); }
.delta.bad { color: var(--bad); }
.delta.flat { color: var(--ink-3); font-weight: 400; }
/* medidor e barras: pontas retas, como as faixas do logo */
.meter { display: block; height: 8px; border-radius: 0; background: var(--series-track); overflow: hidden; margin: 2px 0; }
.meter > span { display: block; height: 100%; background: var(--series); border-radius: 0; }
.tile .meter > span { background: var(--laranja); }

/* Cards: superfícies Algodão sobre o chão Argila, sem borda */
.card { background: var(--card); border: 0; border-radius: 8px; padding: 16px 18px; margin: 0 0 14px; min-width: 0; }
.card.accent { border-left: 4px solid var(--laranja); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h2 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: .005em; color: var(--carvao); }
.card-head .muted, .card-head .link { font-size: 12px; }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.grid-1-1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.grid-3-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.grid-3-2 table.grid th, .grid-3-2 table.grid td { padding-left: 6px; padding-right: 6px; }
.grid-2-1.flush, .grid-1-1.flush, .grid-3-2.flush { gap: 24px; }
.empty.note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--ink-3); }
.stack { display: flex; flex-direction: column; min-width: 0; }
/* Cards that stay closed until asked for: the head is the summary, side by side while they fit */
.folds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 0 14px; align-items: start; }
details.fold > summary { margin-bottom: 0; cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--ink-3); }
details.fold[open] > summary h2::before { content: "▾"; }
details.fold[open] > summary { margin-bottom: 10px; }
details.fold > summary:hover h2::before { color: var(--laranja); }
details.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.empty { color: var(--ink-2); font-size: 13px; margin: 4px 0; line-height: 1.5; }
.scroll-x { overflow-x: auto; }
.scroll-y { max-height: 420px; overflow: auto; }
.scroll-y-sm { max-height: 300px; overflow: auto; }

.seg { display: inline-flex; border: 0; border-radius: 7px; padding: 3px; background: var(--argila); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { font: inherit; font-size: 12px; border: 0; background: none; padding: 4px 12px; border-radius: 5px; cursor: pointer; color: var(--ink-2); }
.seg button.on { background: var(--superficie); color: var(--carvao); font-weight: 700; box-shadow: 0 1px 0 rgba(52,48,45,.14); }

/* Tables */
table.grid { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
table.grid th, table.grid td { padding: 6px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hairline); }
table.grid th { font-size: 10.5px; color: var(--ink-3); background: var(--card); position: sticky; top: 0; z-index: 1; padding-top: 7px; padding-bottom: 6px; border-bottom-color: var(--line-strong); }
table.grid th.group { text-align: center; border-left: 1px solid var(--hairline); font-size: 12px; color: var(--ink-2); }
table.grid .lbl { text-align: left; }
table.grid td.lbl { color: var(--ink); }
table.grid td.strong { font-weight: 600; }
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: 0; }
table.grid caption { text-align: left; font-size: 13px; font-weight: 600; color: var(--ink); padding: 6px 8px 2px; }
table.grid tr.partial td { color: var(--ink-3); }
/* The name column takes what is left and truncates; numbers keep their natural width. */
table.rank td.lbl { max-width: var(--name-w, 300px); overflow: hidden; text-overflow: ellipsis; }
table.rank tr.clickable { cursor: pointer; }
table.rank td.wrap { white-space: normal; max-width: none; min-width: 130px; line-height: 1.35; overflow: visible; }
table.rank td.wrap div + div { margin-top: 3px; }
/* Sortable column headers */
.col-sort { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.col-sort + .col-sort { margin-left: 6px; }
.col-sort:hover { color: var(--primary); }
.col-sort .arrow::after { content: "↕"; font-size: 10px; opacity: .3; }
.col-sort:hover .arrow::after { opacity: 1; }
.col-sort[data-dir=desc], .col-sort[data-dir=asc] { color: var(--ink); }
.col-sort[data-dir] .arrow::after { color: var(--laranja); }
.col-sort[data-dir=desc] .arrow::after { content: "▼"; opacity: 1; }
.col-sort[data-dir=asc] .arrow::after { content: "▲"; opacity: 1; }
.col-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
table.rank td small { font-size: 11px; margin-left: 2px; }
table.rank tfoot { position: sticky; bottom: 0; z-index: 1; }
table.rank tfoot td { background: var(--card); }
table.rank tfoot tr.media td { font-weight: 400; color: var(--ink-2); border-top: 0; padding-top: 2px; padding-bottom: 4px; }
/* A table with many columns scrolls sideways under its name column */
table.rank.wide .lbl { position: sticky; left: 0; z-index: 1; background: var(--card); }
table.rank.wide thead .lbl, table.rank.wide tfoot .lbl { z-index: 2; }
table.rank tr.clickable:hover td, table.rank tr.clickable:focus-visible td { background: var(--info-bg); }
table.rank tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.rank tr.selected td { background: var(--info-bg); font-weight: 600; }
table.rank tr.selected td:first-child { box-shadow: inset 4px 0 0 var(--laranja); }
/* In-row bar: thin, one colour (Capim), straight ends like the bands of the logo */
.barcell { width: var(--bar-w, 90px); min-width: var(--bar-w, 60px); padding-right: 0 !important; }
.bar { display: block; height: 9px; min-width: 2px; background: var(--series); border-radius: 0; }

.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; margin-bottom: 14px; }
.mini { border-left: 3px solid var(--argila); padding: 2px 0 2px 11px; min-width: 0; }
.mini > span { display: block; font-size: 12px; color: var(--ink-3); }
.mini strong { display: block; font-size: 19px; font-weight: 700; color: var(--carvao); }
.mini small { font-family: var(--fonte-texto); font-size: 12px; font-weight: 400; color: var(--ink-3); }
.mini small.sub { display: block; line-height: 1.4; }
.minis.wide { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.check.side { margin: 8px 0 0; font-size: 12px; align-items: flex-start; line-height: 1.35; }

table.grid tr.quiet td { color: var(--ink-2); font-style: italic; }
.card-head .seg { flex: none; }
/* a number that opens the list behind it: the number as it was, underlined */
.tile-value .link-btn, .mini strong .link-btn, .tile-foot .link-btn { color: inherit; font-weight: inherit; }
/* a card that has something wrong in it stands out: a red line on its side and a light red ground. With nothing
   wrong it is a card like the others. */
.card.alerta { background: #F8EAE6; box-shadow: inset 4px 0 0 var(--vermelho); padding-left: 20px; }
.card.alerta > .card-head h2 { color: var(--bad); }
.alerta-n { display: inline-block; min-width: 1.6em; margin-left: 8px; padding: 1px 7px; border-radius: 4px; background: var(--bad); color: white; font-family: var(--fonte-titulo); font-size: 12px; font-weight: 600; text-align: center; vertical-align: 1px; }
.tile-value small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.seg-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scroll-y.tall { max-height: 560px; }
.card-sub { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.link-btn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
/* a second text column (família · sub-família): left-aligned and quiet, truncated like the name */
table.grid .txt { text-align: left; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
/* two tables side by side with four number columns each */
table.tight th, table.tight td { padding-left: 5px; padding-right: 5px; }
table.grid td.txt { color: var(--ink-3); }
.callout { margin: 0 0 10px; padding: 8px 12px; border-left: 4px solid var(--laranja); border-radius: 0; background: var(--info-bg); color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.callout strong { color: var(--ink); }
.badge { display: inline-block; padding: 0 6px; border: 1px solid var(--control-line); border-radius: 4px; color: var(--ink-2); font-size: 9.5px; line-height: 17px; letter-spacing: .06em; white-space: nowrap; }
.badge.now { border-color: var(--terracota); color: var(--brand-ink); }
.badge.bad { border-color: var(--vermelho); color: var(--vermelho); }
table.grid td.lbl .badge { margin-right: 4px; }
/* a period still in progress, and the rule before a table's totals column */
table.grid th.parcial, table.grid td.parcial { font-style: italic; }
table.grid th.gs, table.grid td.gs { border-left: 1px solid var(--hairline); }
.page { max-width: 1500px; margin: 0 auto; padding: 24px 32px 48px; }
.section-title { color: var(--carvao); margin: 22px 0 10px; font-size: 22px; font-weight: 800; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; margin-bottom: -1px;
  font: inherit; font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.tab.on { color: var(--carvao); font-weight: 700; border-bottom: 3px solid var(--laranja); margin-bottom: -2px; }
.check { display: flex; gap: 6px; align-items: center; font-size: 13px; margin-top: 24px; cursor: pointer; }
.check:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.hint { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.check.inline { margin-top: 0; }
.pill input:disabled + span { opacity: .5; cursor: not-allowed; }
.pill:has(input:disabled):hover span { border-color: var(--control-line); }
/* Busy indicator while the page loads (body.loading) */
body.loading::before {
  content: ""; position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 50% 100%; background-repeat: no-repeat;
  animation: loading 1s linear infinite;
}
/* htmx marks the region that is being refreshed: only it dims */
.htmx-request { opacity: .6; transition: opacity .2s .15s; }
@keyframes loading { from { background-position: -50% 0; } to { background-position: 150% 0; } }

@media (max-width: 1500px) {
  table.rank.wide { --name-w: 210px; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2-1, .grid-3-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1200px) {
  /* the bar column collapses but stays in place: the header spans it */
  table.rank.wide .barcell { width: 0; min-width: 0; padding: 0 !important; }
  table.rank.wide .barcell .bar { display: none; }
  .grid-1-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .main, .page { padding: 16px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-value { font-size: 24px; }
  .topnav a { padding: 4px 10px 4px 6px; }
}

/* Forms (login, admin screens): label above the control, the controls of the sidebar */
.form { display: flex; flex-direction: column; gap: 12px; }
.form.inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.input, .form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .form select, .form textarea {
  padding: 7px 10px; font: inherit; font-size: 13px; color: var(--ink); background: var(--superficie);
  border: 1px solid var(--control-line); border-radius: 6px;
}
.input:focus, .form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--carvao); box-shadow: 0 0 0 1px var(--carvao); }
.form .btn { margin-top: 0; }
.msg-ok { color: var(--good); }
.msg-error { color: var(--bad); }

/* Topo e sincronização (docs/regras-comuns.md, "Topo e sincronização"; o padrão nasceu no BI). O topo de toda tela:
   a barra da marca (.dash-header) e, logo abaixo, a barra das atualizações do Odoo (.sincronizar). As duas ficam na tela
   enquanto a página rola (.topo é sticky) e por isso são curtas. O bloco cobre o padding de .page (24px 32px), no fundo
   da própria página: ele começa colado no alto e nada se move ao rolar. */
.topo { position: sticky; top: 0; z-index: 30; margin: -24px -32px 16px; padding: 10px 32px 8px; background: var(--bg); }
.topo .dash-header { padding: 7px 14px; margin: 0; row-gap: 6px; }
.topo .brand img { height: 26px; }
.topo .topnav a { padding: 3px 11px 3px 7px; font-size: 13px; }
/* Os botões de atualização (.atualizar) e quando os dados da tela vieram do Odoo: na barra das atualizações
   (.cabecalho), o mesmo lugar em toda tela, e um bloco na tela ainda sem dados (.lateral). */
.atualizar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; font-size: 12px; }
.atualizar .btn[disabled] { opacity: .6; cursor: default; }
.atualizar-erro { color: var(--bad); flex-basis: 100%; }
.atualizar.lateral { flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 0 0; line-height: 1.4; }
.sincronizar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 10px; padding: 4px 6px 4px 14px;
  background: var(--card); border-radius: 8px; font-size: 12px; line-height: 1.3;
}
.sincronizar-info { margin: 0 auto 0 0; min-width: 0; color: var(--ink-2); }
.sincronizar .velho { color: var(--terracota); }
.sincronizar .velho strong { color: inherit; }
.atualizar.cabecalho { flex-wrap: nowrap; gap: 8px; margin: 0; color: var(--ink-2); white-space: nowrap; }
.atualizar.cabecalho .btn { padding: 3px 10px; white-space: nowrap; }
.atualizar.cabecalho .atualizar-erro { flex-basis: auto; white-space: normal; max-width: 320px; }
.atualizar-status.velho { color: var(--terracota); }
@media (max-width: 800px) {
  .topo { margin: -16px -16px 12px; padding: 8px 16px 6px; }
  /* uma linha de abas que rola para o lado, em vez de um cabeçalho alto */
  .topo .dash-nav, .topo .topnav { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
  .topo .topnav a { flex: none; }
  .sincronizar-info:has(> .muted:only-child) { display: none; }
  .atualizar.cabecalho .atualizar-status { white-space: normal; }
}
/* O modal de carregamento das sincronizações (erp-sincronizar.js) */
dialog.sync-modal {
  width: min(380px, calc(100vw - 32px)); box-sizing: border-box; padding: 26px 24px 22px; border: 0; border-radius: 10px;
  background: var(--card); color: var(--ink); text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); overflow: visible;
}
dialog.sync-modal::backdrop { background: rgba(40, 34, 28, .45); }
dialog.sync-modal h2 { margin: 14px 0 6px; font-family: var(--fonte-titulo); font-size: 17px; }
.sync-passo { margin: 0; font-size: 14px; color: var(--ink-2); min-height: 1.4em; }
.sync-nota { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.45; }
dialog.sync-modal .btn { margin-top: 16px; }
.sync-spinner {
  width: 36px; height: 36px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent); animation: sync-gira .9s linear infinite;
}
@keyframes sync-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sync-spinner { animation-duration: 3s; } }

/* Campos de data e hora em pt-BR (erp-datas.js, regras comuns "Datas e horas"): o calendário do flatpickr 4.6.13
   (https://flatpickr.js.org, licença MIT, © 2017 Gregory Petrosyan), o CSS dele sem mudança e, depois, as cores e as
   fontes da marca. O campo visível leva a classe do original e mais erp-data, erp-hora ou erp-data-hora. */
.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*      /*rtl:begin:ignore*/left:0/*      /*rtl:end:ignore*/}/*      /*rtl:begin:ignore*//*      /*rtl:end:ignore*/.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*      /*rtl:begin:ignore*/right:0/*      /*rtl:end:ignore*/}/*      /*rtl:begin:ignore*//*      /*rtl:end:ignore*/.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
.flatpickr-calendar { font-family: var(--fonte-texto); background: var(--algodao); border: 1px solid var(--control-line); box-shadow: 0 6px 18px rgba(40, 34, 28, .18); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowBottom::before { border-bottom-color: var(--control-line); }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--control-line); border-bottom-color: transparent; }
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--algodao); }
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--algodao); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--carvao); fill: var(--carvao); font-family: var(--fonte-titulo); }
.flatpickr-current-month { font-size: 15px; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--laranja); }
span.flatpickr-weekday { color: var(--pedra); font-weight: 600; }
.flatpickr-day { color: var(--carvao); border-radius: 6px; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--argila); }
.flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--argila); border-color: var(--argila); }
.flatpickr-day.today { border-color: var(--laranja); }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--argila); border-color: var(--laranja); color: var(--carvao); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--carvao); border-color: var(--carvao); color: var(--algodao); }
.flatpickr-time input, .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { color: var(--carvao); font-family: var(--fonte-texto); }
.flatpickr-time input:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:hover { background: var(--argila); }
input.erp-data { width: 9em; }
input.erp-hora { width: 5.5em; }
input.erp-data-hora { width: 12em; }
input.erp-data, input.erp-hora, input.erp-data-hora { cursor: pointer; }