/* ==========================================================================
   ERP3D — Layout e componentes
   --------------------------------------------------------------------------
   Regra para todos os módulos: reutilize estas classes. Se precisar de algo que
   não existe aqui, estenda ESTE arquivo — não crie CSS solto na página. É o que
   mantém a coerência visual entre telas construídas em momentos diferentes.
   ========================================================================== */

/* ==========================================================================
   1. Estrutura
   ========================================================================== */
.app { display: flex; min-height: 100vh; }

.conteudo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-w);
  transition: margin-left var(--transicao-lenta);
}
.app[data-sidebar="recolhida"] .conteudo { margin-left: var(--sidebar-w-recolhida); }

.pagina {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--conteudo-max);
  margin: 0 auto;
  padding: var(--e6) var(--e8) var(--e12);
}

/* ==========================================================================
   2. Sidebar
   ========================================================================== */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-sidebar);
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  transition: width var(--transicao-lenta);
}
.app[data-sidebar="recolhida"] .sidebar { width: var(--sidebar-w-recolhida); }

.sidebar__marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  height: var(--topbar-h);
  padding: 0 var(--e4);
  flex-shrink: 0;
}
.sidebar__logo {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--cinza-900);
  color: var(--marca-400);
  border-radius: var(--raio-md);
}
[data-theme="dark"] .sidebar__logo { background: var(--marca-500); color: var(--cinza-950); }
.sidebar__logo svg { width: 18px; height: 18px; }
.sidebar__nome {
  font-size: var(--txt-lg);
  font-weight: var(--peso-semi);
  letter-spacing: -0.02em;
}

.sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--e2) var(--e3) var(--e4);
}

.nav-grupo + .nav-grupo { margin-top: var(--e5); }
.nav-grupo__titulo {
  padding: 0 var(--e3) var(--e2);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-4);
  white-space: nowrap;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 0 var(--e3);
  height: 34px;
  border-radius: var(--raio-md);
  font-size: var(--txt-md);
  font-weight: var(--peso-medio);
  color: var(--texto-2);
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.nav-item + .nav-item { margin-top: 1px; }
.nav-item:hover { background: var(--superficie-hover); color: var(--texto); }

.nav-item__icone {
  width: 17px; height: 17px;
  flex-shrink: 0;
  stroke-width: 1.9;
  opacity: 0.85;
}
.nav-item__rotulo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.nav-item--ativo {
  background: var(--marca-100);
  color: var(--marca-800);
  font-weight: var(--peso-semi);
}
[data-theme="dark"] .nav-item--ativo { color: var(--marca-300); }
.nav-item--ativo:hover { background: var(--marca-200); color: var(--marca-800); }
[data-theme="dark"] .nav-item--ativo:hover { color: var(--marca-300); }
.nav-item--ativo .nav-item__icone { opacity: 1; }

/* Módulo ainda não entregue: visível, porém inerte — sinaliza o roteiro sem enganar */
.nav-item--indisponivel {
  color: var(--texto-4);
  cursor: default;
  pointer-events: none;
}
.nav-item--indisponivel .nav-item__icone { opacity: 0.45; }

.sidebar__rodape {
  flex-shrink: 0;
  padding: var(--e3);
  border-top: 1px solid var(--borda-suave);
}

.usuario-card {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2);
  border-radius: var(--raio-md);
  width: 100%;
  text-align: left;
  transition: background var(--transicao);
}
.usuario-card:hover { background: var(--superficie-hover); }
.usuario-card__info { min-width: 0; flex: 1 1 auto; }
.usuario-card__nome {
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usuario-card__papel {
  font-size: var(--txt-xs);
  color: var(--texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.avatar {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--raio-md);
  background: var(--marca-200);
  color: var(--marca-800);
  font-size: var(--txt-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .avatar { color: var(--marca-300); }
.avatar--sm { width: 24px; height: 24px; font-size: var(--txt-2xs); border-radius: var(--raio-sm); }
.avatar--lg { width: 40px; height: 40px; font-size: var(--txt-md); }

.sidebar__recolher {
  display: flex;
  align-items: center;
  gap: var(--e2);
  width: 100%;
  margin-top: var(--e2);
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-md);
  font-size: var(--txt-xs);
  color: var(--texto-3);
  transition: background var(--transicao), color var(--transicao);
}
.sidebar__recolher:hover { background: var(--superficie-hover); color: var(--texto); }
.sidebar__recolher svg { width: 14px; height: 14px; transition: transform var(--transicao-lenta); }
.app[data-sidebar="recolhida"] .sidebar__recolher svg { transform: rotate(180deg); }

/* Estado recolhido: some tudo que é texto, sobra o ícone centralizado */
.app[data-sidebar="recolhida"] .sidebar__nome,
.app[data-sidebar="recolhida"] .nav-item__rotulo,
.app[data-sidebar="recolhida"] .nav-grupo__titulo,
.app[data-sidebar="recolhida"] .usuario-card__info,
.app[data-sidebar="recolhida"] .sidebar__recolher span,
.app[data-sidebar="recolhida"] .nav-item .selo { display: none; }
.app[data-sidebar="recolhida"] .nav-item,
.app[data-sidebar="recolhida"] .sidebar__recolher { justify-content: center; padding: 0; }
.app[data-sidebar="recolhida"] .nav-grupo__titulo {
  display: block; height: 1px; padding: 0; margin: var(--e3) var(--e2);
  background: var(--borda-suave); overflow: hidden; text-indent: -999px;
}
.app[data-sidebar="recolhida"] .sidebar__marca { justify-content: center; padding: 0; }

/* ==========================================================================
   3. Topbar
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sidebar) - 10);
  display: flex;
  align-items: center;
  gap: var(--e3);
  height: var(--topbar-h);
  padding: 0 var(--e8);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

.trilha { display: flex; align-items: center; gap: var(--e2); font-size: var(--txt-sm); }
.trilha__item { color: var(--texto-3); }
.trilha__item--atual { color: var(--texto); font-weight: var(--peso-medio); }
.trilha__sep { color: var(--texto-4); }

.icone-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--raio-md);
  color: var(--texto-2);
  transition: background var(--transicao), color var(--transicao);
}
.icone-btn:hover { background: var(--superficie-3); color: var(--texto); }
.icone-btn svg { width: 17px; height: 17px; }
.icone-btn--sm { width: 26px; height: 26px; }
.icone-btn--sm svg { width: 14px; height: 14px; }

.ponto-notificacao {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--perigo);
  box-shadow: 0 0 0 2px var(--superficie);
}

/* ==========================================================================
   4. Cabeçalho de página
   ========================================================================== */
.pagina__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e6);
}
.pagina__titulo {
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--txt-4xl);
  font-weight: var(--peso-forte);
  letter-spacing: -0.03em;
}
.pagina__emoji { font-size: 1.6rem; line-height: 1; }
.pagina__sub {
  margin-top: var(--e2);
  font-size: var(--txt-md);
  color: var(--texto-3);
}
.pagina__acoes { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }

/* ==========================================================================
   5. Cartões
   ========================================================================== */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
}
.cartao--plano { box-shadow: none; }
.cartao--flutuante { box-shadow: var(--sombra-sm); }

.cartao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e5) var(--e5) 0;
}
.cartao__titulo { font-size: var(--txt-lg); font-weight: var(--peso-semi); }
.cartao__sub { margin-top: 2px; font-size: var(--txt-sm); color: var(--texto-3); }
.cartao__corpo { padding: var(--e5); }
.cartao__rodape {
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--borda-suave);
  background: var(--superficie-2);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

/* ==========================================================================
   6. KPI — o card do anexo: rótulo, valor grande, pill de variação
   ========================================================================== */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e6);
}

.kpi {
  position: relative;
  padding: var(--e5);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.kpi:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-xs); }

.kpi__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e2); }
.kpi__rotulo { font-size: var(--txt-md); font-weight: var(--peso-medio); color: var(--texto-2); }
.kpi__acao { color: var(--texto-4); }
.kpi__acao:hover { color: var(--texto-2); }

.kpi__valor {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  margin-top: var(--e4);
  font-family: var(--fonte-num);
  font-size: var(--txt-3xl);
  font-weight: var(--peso-forte);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi__nota { margin-top: var(--e3); font-size: var(--txt-xs); color: var(--texto-3); }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--e2);
  border-radius: var(--raio-sm);
  font-family: var(--fonte);
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0;
}
.delta--pos { background: var(--sucesso-bg); color: var(--sucesso-txt); }
.delta--neg { background: var(--perigo-bg); color: var(--perigo-txt); }
.delta--neutro { background: var(--neutro-bg); color: var(--neutro-txt); }

/* ==========================================================================
   7. Botões
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  height: 34px;
  padding: 0 var(--e4);
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  font-size: var(--txt-md);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), box-shadow var(--transicao);
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn--primario {
  background: var(--marca-400);
  color: var(--cinza-900);
  font-weight: var(--peso-semi);
}
.btn--primario:hover { background: var(--marca-500); }
.btn--primario:active { background: var(--marca-600); }

.btn--secundario {
  background: var(--superficie);
  border-color: var(--borda);
  color: var(--texto);
}
.btn--secundario:hover { background: var(--superficie-2); border-color: var(--borda-forte); }

.btn--fantasma { color: var(--texto-2); }
.btn--fantasma:hover { background: var(--superficie-3); color: var(--texto); }

.btn--escuro { background: var(--cinza-900); color: var(--cinza-0); }
.btn--escuro:hover { background: var(--cinza-800); }
[data-theme="dark"] .btn--escuro { background: var(--superficie-3); color: var(--texto); }

.btn--perigo { background: var(--perigo); color: #fff; }
.btn--perigo:hover { filter: brightness(1.08); }

.btn--sm { height: 28px; padding: 0 var(--e3); font-size: var(--txt-xs); }
.btn--sm svg { width: 13px; height: 13px; }
.btn--lg { height: 40px; padding: 0 var(--e5); font-size: var(--txt-lg); }
.btn--bloco { width: 100%; }

/* ==========================================================================
   8. Selos e status
   ========================================================================== */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 2px var(--e2);
  border-radius: var(--raio-sm);
  font-size: var(--txt-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.selo--neutro  { background: var(--neutro-bg);  color: var(--neutro-txt); }
.selo--sucesso { background: var(--sucesso-bg); color: var(--sucesso-txt); }
.selo--aviso   { background: var(--aviso-bg);   color: var(--aviso-txt); }
.selo--perigo  { background: var(--perigo-bg);  color: var(--perigo-txt); }
.selo--info    { background: var(--info-bg);    color: var(--info-txt); }
.selo--marca   { background: var(--marca-100);  color: var(--marca-800); }
[data-theme="dark"] .selo--marca { color: var(--marca-300); }

.selo--ponto::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.status { display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--txt-sm); }
.status__ponto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.status--sucesso .status__ponto { background: var(--sucesso); }
.status--aviso   .status__ponto { background: var(--aviso); }
.status--perigo  .status__ponto { background: var(--perigo); }
.status--info    .status__ponto { background: var(--info); }
.status--neutro  .status__ponto { background: var(--cinza-400); }

/* Pulso apenas no estado "acontecendo agora" — imprimindo, ao vivo */
.status--pulsando .status__ponto { animation: pulso 1.8s ease-in-out infinite; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: 0.65; }
}

/* ==========================================================================
   9. Alerta (banner do topo, como no anexo)
   ========================================================================== */
.alerta {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid;
  border-radius: var(--raio-lg);
  font-size: var(--txt-md);
  margin-bottom: var(--e5);
}
.alerta__icone { width: 17px; height: 17px; flex-shrink: 0; }
.alerta__texto { flex: 1 1 auto; min-width: 0; }
.alerta a { text-decoration: underline; text-underline-offset: 2px; font-weight: var(--peso-medio); }

.alerta--aviso   { background: var(--aviso-bg);   border-color: color-mix(in srgb, var(--aviso) 28%, transparent);   color: var(--aviso-txt); }
.alerta--perigo  { background: var(--perigo-bg);  border-color: color-mix(in srgb, var(--perigo) 28%, transparent);  color: var(--perigo-txt); }
.alerta--sucesso { background: var(--sucesso-bg); border-color: color-mix(in srgb, var(--sucesso) 28%, transparent); color: var(--sucesso-txt); }
.alerta--info    { background: var(--info-bg);    border-color: color-mix(in srgb, var(--info) 28%, transparent);    color: var(--info-txt); }

/* ==========================================================================
   10. Abas
   ========================================================================== */
.abas {
  display: flex;
  align-items: center;
  gap: var(--e5);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--e6);
}
.aba {
  position: relative;
  padding: var(--e3) 0;
  font-size: var(--txt-md);
  font-weight: var(--peso-medio);
  color: var(--texto-3);
  transition: color var(--transicao);
}
.aba:hover { color: var(--texto); }
.aba--ativa { color: var(--texto); font-weight: var(--peso-semi); }
.aba--ativa::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--cinza-900);
  border-radius: var(--raio-pill);
}
[data-theme="dark"] .aba--ativa::after { background: var(--marca-400); }

/* ==========================================================================
   11. Tabelas
   ========================================================================== */
.tabela-wrap {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  background: var(--superficie);
}
.tabela-wrap .tabela { border: none; }

.tabela { font-size: var(--txt-sm); }
.tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--e3) var(--e4);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  font-size: var(--txt-xs);
  font-weight: var(--peso-semi);
  color: var(--texto-3);
  text-align: left;
  white-space: nowrap;
}
.tabela tbody td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda-suave);
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela--clicavel tbody tr { cursor: pointer; }

/* Cabeçalho clicável — ordenação em JS puro sobre a tabela já renderizada */
.tabela__th-ordenavel { cursor: pointer; user-select: none; transition: color var(--transicao); }
.tabela__th-ordenavel:hover { color: var(--texto); }
.tabela__th-ordenavel:focus-visible { outline-offset: -2px; }
.tabela__seta {
  display: inline-block;
  width: 0.9em;
  margin-left: 2px;
  opacity: 0.35;
}
.tabela__seta::after { content: "↕"; }
.tabela__th-ordenavel[aria-sort="ascending"] .tabela__seta { opacity: 1; }
.tabela__th-ordenavel[aria-sort="ascending"] .tabela__seta::after { content: "↑"; }
.tabela__th-ordenavel[aria-sort="descending"] .tabela__seta { opacity: 1; }
.tabela__th-ordenavel[aria-sort="descending"] .tabela__seta::after { content: "↓"; }

.tabela th.t-dir, .tabela td.t-dir { text-align: right; }
.tabela td.num { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.tabela__acoes { display: flex; align-items: center; gap: var(--e1); justify-content: flex-end; }

.tabela tfoot td {
  padding: var(--e3) var(--e4);
  background: var(--superficie-2);
  border-top: 1px solid var(--borda);
  font-weight: var(--peso-semi);
}

/* ==========================================================================
   12. Formulários
   ========================================================================== */
.form-grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--e4);
}
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}

.campo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.campo__rotulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-2);
}
.campo__obrigatorio { color: var(--perigo); }
.campo__ajuda { font-size: var(--txt-xs); color: var(--texto-3); }
.campo__erro { font-size: var(--txt-xs); color: var(--perigo-txt); }

.input, .select, .textarea {
  width: 100%;
  min-height: 34px;
  padding: var(--e2) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  font-size: var(--txt-md);
  color: var(--texto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.input::placeholder, .textarea::placeholder { color: var(--texto-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--borda-forte); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--marca-500);
  box-shadow: var(--sombra-foco);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--superficie-3);
  color: var(--texto-3);
  cursor: not-allowed;
}
.input--erro, .select--erro { border-color: var(--perigo); }
.textarea { min-height: 84px; resize: vertical; line-height: var(--altura-normal); }

.select {
  appearance: none;
  padding-right: var(--e8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3AEC0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Campo com prefixo/sufixo — "R$" antes do valor, "g" depois do peso */
.input-grupo { display: flex; align-items: stretch; }
.input-grupo .input { border-radius: 0; }
.input-grupo > :first-child { border-top-left-radius: var(--raio-md); border-bottom-left-radius: var(--raio-md); }
.input-grupo > :last-child { border-top-right-radius: var(--raio-md); border-bottom-right-radius: var(--raio-md); }
.input-grupo__fixo {
  display: grid; place-items: center;
  padding: 0 var(--e3);
  background: var(--superficie-3);
  border: 1px solid var(--borda);
  font-size: var(--txt-sm);
  color: var(--texto-3);
  white-space: nowrap;
}
.input-grupo .input + .input-grupo__fixo,
.input-grupo__fixo + .input { border-left: none; }
.input-grupo .input:not(:last-child) { border-right: none; }

.check { display: inline-flex; align-items: center; gap: var(--e2); cursor: pointer; font-size: var(--txt-md); }
.check input { width: 16px; height: 16px; accent-color: var(--marca-600); cursor: pointer; }

/* Select com cadastro rápido acoplado */
.select-rapido { display: flex; gap: var(--e2); align-items: stretch; }
.select-rapido .select { flex: 1 1 auto; }

/* ==========================================================================
   13. Modal
   ========================================================================== */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--e4);
  background: rgba(11, 15, 23, 0.45);
  backdrop-filter: blur(3px);
  animation: fade 160ms ease-out;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-xl);
  box-shadow: var(--sombra-lg);
  animation: sobe 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sobe {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.modal--lg { max-width: 780px; }
.modal--xl { max-width: 1040px; }

.modal__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e5) var(--e5) var(--e4);
  border-bottom: 1px solid var(--borda-suave);
}
.modal__titulo { font-size: var(--txt-xl); font-weight: var(--peso-semi); }
.modal__sub { margin-top: var(--e1); font-size: var(--txt-sm); color: var(--texto-3); }
.modal__corpo { padding: var(--e5); overflow-y: auto; flex: 1 1 auto; }
.modal__rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e2);
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--borda-suave);
  background: var(--superficie-2);
  border-radius: 0 0 var(--raio-xl) var(--raio-xl);
}

/* ==========================================================================
   14. Progresso e medidores
   ========================================================================== */
.barra {
  height: 6px;
  background: var(--superficie-3);
  border-radius: var(--raio-pill);
  overflow: hidden;
}
.barra__preenchimento {
  height: 100%;
  background: var(--marca-500);
  border-radius: var(--raio-pill);
  transition: width var(--transicao-lenta);
}
.barra--sucesso .barra__preenchimento { background: var(--sucesso); }
.barra--aviso   .barra__preenchimento { background: var(--aviso); }
.barra--perigo  .barra__preenchimento { background: var(--perigo); }
.barra--fina { height: 4px; }
.barra--grossa { height: 10px; }

/* Escala vermelho→verde com marcador, como o "Saúde do negócio" do anexo */
.medidor { display: flex; align-items: center; gap: var(--e3); }
.medidor__escala {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg,
    #EF4444 0%, #F59E0B 32%, #EAB308 52%, #84CC16 74%, #22C55E 100%);
}
.medidor__marcador {
  position: absolute;
  top: 50%;
  width: 3px; height: 16px;
  margin-left: -1.5px;
  background: var(--texto);
  border: 1px solid var(--superficie);
  border-radius: var(--raio-pill);
  transform: translateY(-50%);
  transition: left var(--transicao-lenta);
}
.medidor__valor {
  font-family: var(--fonte-num);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dimensao {
  display: grid;
  grid-template-columns: 1fr 90px 56px;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
  font-size: var(--txt-sm);
}
.dimensao__nome { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   15. Gráficos
   ========================================================================== */
.grafico { position: relative; width: 100%; }
.grafico canvas { max-width: 100%; }
.grafico__legenda {
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
  font-size: var(--txt-xs);
  color: var(--texto-2);
}
.grafico__legenda-item { display: inline-flex; align-items: center; gap: var(--e2); }
.grafico__legenda-cor { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ==========================================================================
   16. Kanban (fila de impressão)
   ========================================================================== */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 1fr);
  gap: var(--e4);
  overflow-x: auto;
  padding-bottom: var(--e3);
  align-items: start;
}
.kanban__coluna {
  background: var(--superficie-2);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio-lg);
  padding: var(--e3);
  min-height: 180px;
}
.kanban__cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e2);
  padding: 0 var(--e2) var(--e3);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semi);
}
.kanban__lista { display: flex; flex-direction: column; gap: var(--e2); min-height: 40px; }
.kanban__card {
  padding: var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  cursor: grab;
  transition: box-shadow var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.kanban__card:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-sm); }
.kanban__card--arrastando { opacity: 0.45; transform: rotate(1.5deg); cursor: grabbing; }
.kanban__coluna--alvo { border-color: var(--marca-400); background: var(--marca-50); }
[data-theme="dark"] .kanban__coluna--alvo { background: var(--marca-100); }

/* ==========================================================================
   17. Estados vazios e carregamento
   ========================================================================== */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e12) var(--e5);
  text-align: center;
}
.vazio__icone {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--raio-lg);
  background: var(--superficie-3);
  color: var(--texto-4);
}
.vazio__icone svg { width: 21px; height: 21px; }
/* Variante pequena: mesmo selo cinza-com-ícone, fora do contexto de estado
   vazio — usado como marcador de item em listas de cartão (ex.: Relatórios). */
.vazio__icone--sm { width: 34px; height: 34px; border-radius: var(--raio-md); flex-shrink: 0; }
.vazio__icone--sm svg { width: 16px; height: 16px; }
.vazio__titulo { font-size: var(--txt-lg); font-weight: var(--peso-semi); }
.vazio__texto { font-size: var(--txt-md); color: var(--texto-3); max-width: 42ch; }

.esqueleto {
  background: linear-gradient(90deg, var(--superficie-3) 25%,
              var(--superficie-2) 50%, var(--superficie-3) 75%);
  background-size: 200% 100%;
  border-radius: var(--raio-sm);
  animation: brilho 1.4s ease-in-out infinite;
}
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.girando { animation: girar 900ms linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ==========================================================================
   18. Toasts
   ========================================================================== */
.toasts {
  position: fixed;
  bottom: var(--e5); right: var(--e5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-width: 380px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cinza-400);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-md);
  font-size: var(--txt-md);
  animation: entra-lado 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes entra-lado {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
.toast--sucesso { border-left-color: var(--sucesso); }
.toast--erro    { border-left-color: var(--perigo); }
.toast--aviso   { border-left-color: var(--aviso); }
.toast--info    { border-left-color: var(--info); }
.toast__icone { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; }
.toast--sucesso .toast__icone { color: var(--sucesso); }
.toast--erro    .toast__icone { color: var(--perigo); }
.toast--aviso   .toast__icone { color: var(--aviso); }
.toast--info    .toast__icone { color: var(--info); }
.toast__corpo { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   19. Dropdown
   ========================================================================== */
.dropdown { position: relative; }
.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  z-index: var(--z-dropdown);
  min-width: 190px;
  padding: var(--e1);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-md);
  animation: sobe 140ms ease-out;
}
.dropdown__menu--esq { right: auto; left: 0; }
.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  padding: var(--e2) var(--e3);
  border-radius: var(--raio-sm);
  font-size: var(--txt-md);
  color: var(--texto-2);
  text-align: left;
  transition: background var(--transicao), color var(--transicao);
}
.dropdown__item:hover { background: var(--superficie-hover); color: var(--texto); }
.dropdown__item svg { width: 15px; height: 15px; flex-shrink: 0; }
.dropdown__item--perigo { color: var(--perigo-txt); }
.dropdown__sep { height: 1px; margin: var(--e1) 0; background: var(--borda-suave); }

/* ==========================================================================
   20. Grades de conteúdo
   ========================================================================== */
.grade { display: grid; gap: var(--e4); }
.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Painel principal + coluna lateral, como o dashboard do anexo */
.grade--principal { grid-template-columns: minmax(0, 1fr) 340px; }

/* Lista de chave/valor — memória de cálculo, resumo de custo */
.linhas { display: flex; flex-direction: column; }
.linhas__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e2) 0;
  font-size: var(--txt-sm);
  border-bottom: 1px solid var(--borda-suave);
}
.linhas__item:last-child { border-bottom: none; }
.linhas__item--total {
  margin-top: var(--e1);
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  border-bottom: none;
  font-size: var(--txt-md);
  font-weight: var(--peso-semi);
}
.linhas__rotulo { color: var(--texto-2); }
.linhas__valor {
  font-family: var(--fonte-num);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

/* ==========================================================================
   21. Responsivo
   ========================================================================== */
@media (max-width: 1180px) {
  .grade--principal { grid-template-columns: minmax(0, 1fr); }
  .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--sombra-lg);
    transition: transform var(--transicao-lenta);
  }
  .app[data-sidebar="aberta"] .sidebar { transform: none; }
  .conteudo { margin-left: 0 !important; }
  .topbar, .pagina { padding-left: var(--e4); padding-right: var(--e4); }
  .grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0, 1fr); }
  .form-grade > [class*="col-"] { grid-column: span 12; }
  .pagina__titulo { font-size: var(--txt-3xl); }
  .modal { max-height: 92vh; }
}

@media (max-width: 560px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .toasts { left: var(--e4); right: var(--e4); max-width: none; }
}

/* Fundo escurecido que fecha a sidebar no mobile */
.sidebar-fundo {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sidebar) - 1);
  background: rgba(11, 15, 23, 0.4);
  animation: fade 160ms ease-out;
}
@media (min-width: 901px) { .sidebar-fundo { display: none; } }

/* ==========================================================================
   22. Impressão (PDF pelo navegador)
   ========================================================================== */
@media print {
  .sidebar, .topbar, .pagina__acoes, .toasts, .btn { display: none !important; }
  .conteudo { margin-left: 0 !important; }
  .pagina { padding: 0; max-width: none; }
  .cartao { border-color: #ddd; break-inside: avoid; }
  body { background: #fff; }
}

/* ==========================================================================
   23. Alternância de tema — mostra apenas o ícone do tema que será aplicado
   ========================================================================== */
.icone-tema-escuro { display: none; }
[data-theme="dark"] .icone-tema-claro { display: none; }
[data-theme="dark"] .icone-tema-escuro { display: block; }

/* ==========================================================================
   24. Tela de autenticação
   ========================================================================== */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--fundo);
}
.login__painel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--e12) var(--e10);
}
.login__caixa { width: 100%; max-width: 380px; margin: 0 auto; }
.login__marca { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e10); }
.login__titulo { font-size: var(--txt-3xl); font-weight: var(--peso-forte); letter-spacing: -0.03em; }
.login__sub { margin-top: var(--e2); color: var(--texto-3); }
.login__form { margin-top: var(--e8); display: flex; flex-direction: column; gap: var(--e4); }

/* Vitrine à direita: gradiente da marca, sem imagem externa */
.login__vitrine {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--e12);
  background:
    radial-gradient(900px 620px at 78% 12%, rgba(147, 221, 60, 0.30), transparent 62%),
    radial-gradient(700px 520px at 12% 88%, rgba(116, 190, 34, 0.20), transparent 60%),
    var(--cinza-900);
  color: var(--cinza-0);
  overflow: hidden;
}
.login__vitrine::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}
.login__frase {
  position: relative;
  z-index: 1;
  max-width: 34ch;
  font-size: var(--txt-2xl);
  font-weight: var(--peso-semi);
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.login__assinatura {
  position: relative;
  z-index: 1;
  margin-top: var(--e4);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--txt-sm);
}
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__vitrine { display: none; }
  .login__painel { padding: var(--e8) var(--e5); }
}

/* ==========================================================================
   25. Página de erro
   ========================================================================== */
.erro-pagina {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  text-align: center;
}
.erro-pagina__codigo {
  font-family: var(--fonte-num);
  font-size: 4rem;
  font-weight: var(--peso-forte);
  letter-spacing: -0.04em;
  color: var(--texto-4);
  line-height: 1;
}

/* ==========================================================================
   26. Tooltip do grafico
   ========================================================================== */
.grafico__dica {
  position: absolute;
  z-index: 5;
  min-width: 140px;
  padding: var(--e2) var(--e3);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-md);
  font-size: var(--txt-xs);
  line-height: 1.6;
  pointer-events: none;
}
.grafico__dica strong { display: block; margin-bottom: 2px; font-size: var(--txt-xs); }
.grafico__dica-linha { display: flex; align-items: center; gap: var(--e2); color: var(--texto-2); }
.grafico__dica-linha b { margin-left: auto; color: var(--texto); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   27. Amostra de cor (filamento)
   --------------------------------------------------------------------------
   A cor em si vem do cadastro (`cor_hex`), então é passada via `style` no
   template — não é uma cor literal nova no CSS, é dado do usuário, igual ao
   marcador do medidor. Aqui só ficam a forma e a borda, que são tokens.
   ========================================================================== */
.amostra-cor {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: var(--raio-pill);
  border: 1px solid var(--borda);
}

/* Tabela dentro de um cartao: o cartao ja da a borda e o raio, entao a moldura
   do wrapper e dispensada. O overflow continua, que e o que impede a tabela de
   estourar o cartao em tela estreita. */
.tabela-wrap--nu {
  border: none;
  border-radius: 0;
  background: transparent;
}

/* ==========================================================================
   27. Foto de produto
   ========================================================================== */
.foto-produto {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--superficie-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
}
.foto-produto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder: o icone herda 1em do seletor global, entao precisa de tamanho proprio */
.foto-produto__vazio {
  width: 30px;
  height: 30px;
  color: var(--texto-4);
}

/* Miniatura na listagem de produtos */
.foto-produto--mini {
  width: 40px;
  height: 40px;
  border-radius: var(--raio-md);
}
.foto-produto--mini .foto-produto__vazio { width: 17px; height: 17px; }

/* ==========================================================================
   28. Primeiro acesso — guia de passos
   O sistema recem-instalado ensina o caminho em vez de exibir zeros.
   ========================================================================== */
.boas-vindas {
  border-color: var(--marca-300);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--marca-500) 7%, transparent) 0%,
      transparent 180px),
    var(--superficie);
}

.boas-vindas__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e8);
  flex-wrap: wrap;
  margin-bottom: var(--e6);
}
.boas-vindas__titulo {
  font-size: var(--txt-2xl);
  font-weight: var(--peso-forte);
  letter-spacing: -0.02em;
}
.boas-vindas__texto {
  margin-top: var(--e2);
  max-width: 62ch;
  color: var(--texto-2);
}
.boas-vindas__progresso { min-width: 160px; }
.boas-vindas__contador {
  font-size: var(--txt-2xl);
  font-weight: var(--peso-forte);
  text-align: right;
  margin-bottom: var(--e2);
}

/* --- Lista de passos --- */
.passos { display: flex; flex-direction: column; gap: var(--e2); counter-reset: passo; }

.passo {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  padding: var(--e4);
  border: 1px solid var(--borda-suave);
  border-radius: var(--raio-lg);
  background: var(--superficie);
  transition: border-color var(--transicao), background var(--transicao);
}

/* O passo atual e o unico com destaque: dois destaques nao guiam ninguem. */
.passo--atual {
  border-color: var(--marca-400);
  background: var(--marca-50);
}
[data-theme="dark"] .passo--atual { background: var(--marca-100); }

.passo--feito { opacity: 0.62; }
.passo--feito .passo__titulo { text-decoration: line-through; text-decoration-color: var(--texto-4); }

.passo__marca {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--superficie-3);
  color: var(--texto-3);
  font-size: var(--txt-xs);
  font-weight: var(--peso-forte);
}
.passo--atual .passo__marca { background: var(--marca-400); color: var(--cinza-900); }
.passo--feito .passo__marca { background: var(--sucesso-bg); color: var(--sucesso-txt); }
.passo__marca svg { width: 14px; height: 14px; }

.passo__corpo { flex: 1 1 auto; min-width: 0; }
.passo__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  font-weight: var(--peso-semi);
}
.passo__porque {
  margin-top: var(--e1);
  font-size: var(--txt-sm);
  color: var(--texto-3);
  max-width: 74ch;
}

@media (max-width: 700px) {
  .passo { flex-wrap: wrap; }
  .passo .btn { width: 100%; }
  .boas-vindas__progresso { min-width: 100%; }
  .boas-vindas__contador { text-align: left; }
}