/* Identidade visual Costa Company: preto, cinzas e dourado (aprovada em 27/09/2026).
   Tokens de design: alterar cores e espaçamentos aqui reflete no sistema inteiro.
   Modo claro fixo, por decisão de identidade: a marca aparece sempre igual. */

/* Montserrat (licença OFL, arquivos locais em /fonts): a fonte gratuita mais próxima da logo. */
@font-face { font-family: Montserrat; font-weight: 500; font-display: swap; src: url("/fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 600; font-display: swap; src: url("/fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url("/fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 800; font-display: swap; src: url("/fonts/montserrat-800.woff2") format("woff2"); }

:root {
  /* Paleta da marca */
  --preto: #0e0e10;
  --grafite: #1f1f23;
  --cinza-escuro: #4a4a52;
  --cinza-texto: #6b6b73;
  --cinza-medio: #9a9aa2;
  --cinza-borda: #e2e2e6;
  --cinza-claro: #f4f4f6;
  --branco: #ffffff;
  --dourado: #c9a227;           /* linhas, realces e foco: nunca em texto sobre branco */
  --dourado-texto: #8c6b12;     /* dourado com contraste suficiente para texto */
  --dourado-suave: #f7efd6;

  /* Papéis (o que os componentes usam) */
  --fundo: var(--cinza-claro);
  --superficie: var(--branco);
  --borda: var(--cinza-borda);
  --borda-forte: #cfcfd4;
  --texto: #1c1c1f;
  --texto-suave: var(--cinza-texto);
  --destaque: var(--dourado);
  --perigo: #b42318;
  --perigo-suave: #fdecea;
  --sucesso: #11704a;
  --sucesso-suave: #e3f5ec;

  --raio: 6px;
  --raio-cartao: 10px;
  --sombra: 0 1px 2px rgb(14 14 16 / 5%), 0 1px 3px rgb(14 14 16 / 8%);
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fonte-marca: Montserrat, "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.5; background: var(--fundo); color: var(--texto); }
h1, h2 { font-family: var(--fonte-marca); color: var(--preto); }
h1 { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: .005em; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .75rem; }
a { color: var(--texto); text-decoration-color: var(--dourado); text-underline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Foco visível para quem navega pelo teclado */
:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

/* Rótulo acima do título da página (ex.: "CADASTROS") */
.rotulo-secao { font-family: var(--fonte-marca); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dourado-texto); }

/* ---------- Marca (símbolo + nome) ---------- */
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--branco); text-decoration: none; }
.marca img { height: 34px; width: auto; }
.marca__nome { font-family: var(--fonte-marca); line-height: 1; }
.marca__nome strong { display: block; font-weight: 800; font-size: 1.05rem; letter-spacing: .05em; }
.marca__nome span { display: block; font-weight: 700; font-size: .6rem; letter-spacing: .34em; margin-top: 3px; }

/* ---------- Cabeçalho ---------- */
.cabecalho { background: var(--preto); color: var(--branco); border-bottom: 2px solid var(--dourado); }
.cabecalho__conteudo { max-width: 1280px; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cabecalho nav { display: flex; gap: .25rem; flex-wrap: wrap; margin-right: auto; }
.cabecalho nav a { font-family: var(--fonte-marca); font-weight: 600; font-size: .88rem; color: var(--cinza-medio); text-decoration: none;
  padding: .55rem .8rem; border-bottom: 2px solid transparent; }
.cabecalho nav a:hover { color: var(--branco); }
.cabecalho nav a[aria-current="page"] { color: var(--branco); border-bottom-color: var(--dourado); }
.cabecalho__usuario { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: #d5d5da; }
.cabecalho__usuario .botao { color: #d5d5da; border-color: #3a3a41; background: transparent; }
.cabecalho__usuario .botao:hover { color: var(--branco); border-color: var(--dourado); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--grafite); border: 1px solid var(--dourado); color: var(--dourado);
  font-family: var(--fonte-marca); font-weight: 700; font-size: .72rem; }

/* ---------- Layout ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.barra-titulo { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.barra-titulo > div:first-child { margin-right: auto; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra); }
.cartao--padding { padding: 1.25rem; }

/* ---------- Cartões de resumo ---------- */
.resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 720px) { .resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.resumo__item { font: inherit; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  padding: .7rem 1rem; color: var(--texto); }
button.resumo__item { cursor: pointer; }
button.resumo__item:hover { border-color: var(--dourado); }
.resumo__item--alerta { border-left: 3px solid var(--dourado); }
.resumo__rotulo { font-size: .8rem; color: var(--texto-suave); }
.resumo__valor { font-family: var(--fonte-marca); font-weight: 800; font-size: 1.45rem; color: var(--preto); line-height: 1.2; }
.resumo__item--alerta .resumo__valor { color: var(--dourado-texto); }

/* ---------- Botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: var(--fonte-marca); font-size: .85rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: var(--raio); border: 1px solid var(--borda-forte); background: var(--superficie);
  color: var(--texto); cursor: pointer; text-decoration: none; white-space: nowrap; }
.botao:hover { border-color: var(--preto); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao--primario { background: var(--preto); border-color: var(--preto); color: var(--branco); }
.botao--primario:hover { background: var(--grafite); border-color: var(--dourado); }
.botao--pequeno { padding: .28rem .65rem; font-size: .78rem; }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo label, .campo legend, .campo__titulo { font-size: .82rem; font-weight: 600; color: var(--cinza-escuro); }
.campo--obrigatorio label::after { content: " *"; color: var(--dourado-texto); }
.campo--expandir { flex: 1; min-width: 220px; }
input, select, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: var(--raio); padding: .5rem .65rem; width: 100%; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--dourado); box-shadow: 0 0 0 3px rgb(201 162 39 / 22%); }
input:disabled, select:disabled, textarea:disabled { background: var(--cinza-claro); color: var(--cinza-escuro); }
input[type="checkbox"] { accent-color: var(--preto); }
[aria-invalid="true"] { border-color: var(--perigo); }
.erro-campo { color: var(--perigo); font-size: .8rem; }
.grade { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.span-total { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 1rem; margin: 0 0 1rem; }
fieldset > legend { padding: 0 .4rem; font-family: var(--fonte-marca); font-weight: 700; font-size: .9rem; color: var(--preto); }
.opcoes-marcar { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .35rem .9rem; }
.opcoes-marcar label { display: flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 400; color: var(--texto); cursor: pointer; }
.opcoes-marcar input { width: auto; }
.opcoes-marcar--compacta { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }

/* ---------- Filtros ---------- */
.filtros { display: grid; gap: .75rem; grid-template-columns: 2fr repeat(4, 1fr); padding: 1rem; margin-bottom: 1rem; align-items: end; }
@media (max-width: 900px) { .filtros { grid-template-columns: 1fr 1fr; } .filtros .campo:first-child { grid-column: 1 / -1; } }

/* ---------- Tabela ---------- */
.tabela-container { overflow-x: auto; }
/* Dentro das janelas (grade com rolagem), a tabela não pode encolher até sumir. */
.dialogo__corpo > .tabela-container { min-height: fit-content; }
/* Janela com muito conteúdo: as linhas do grid não encolhem (senão a tabela some atrás do que vem depois). */
.dialogo__corpo.grade { grid-auto-rows: max-content; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-family: var(--fonte-marca); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cinza-texto); background: var(--cinza-claro); position: sticky; top: 0; }
tbody tr { cursor: pointer; }
tbody tr:nth-child(even) { background: #fafafb; }
tbody tr:hover { background: #f1eee4; }
td.acoes { text-align: right; white-space: nowrap; }
.sem-quebra { white-space: nowrap; }
.texto-suave { color: var(--texto-suave); font-size: .85rem; }
.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--texto-suave); }

/* Em telas pequenas (celular na obra), cada linha vira um cartão. */
@media (max-width: 720px) {
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { padding: .6rem .25rem; border-bottom: 1px solid var(--borda); }
  td { border: none; padding: .15rem .75rem; }
  td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--texto-suave); font-size: .8rem; }
  td.acoes { text-align: left; }
  .sem-quebra { white-space: normal; }
}

.paginacao { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; flex-wrap: wrap; }

/* ---------- Etiquetas ---------- */
.etiqueta { display: inline-block; font-size: .74rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; }
.etiqueta--ativo { background: #ededf0; color: var(--grafite); }
.etiqueta--inativo { background: var(--superficie); color: var(--cinza-texto); border: 1px solid var(--borda-forte); }
.etiqueta--bloqueado { background: var(--perigo-suave); color: var(--perigo); }
.etiqueta--incompleto { background: var(--dourado-suave); color: #6e520a; }
.etiqueta--admin { background: var(--preto); color: var(--dourado); }

/* ---------- Diálogos ---------- */
dialog { border: none; border-radius: 12px; padding: 0; width: min(880px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  background: var(--superficie); color: var(--texto); box-shadow: 0 24px 60px rgb(14 14 16 / 35%); }
dialog::backdrop { background: rgb(14 14 16 / 60%); }
dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.dialogo__topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  background: var(--preto); border-bottom: 2px solid var(--dourado); border-radius: 12px 12px 0 0; }
.dialogo__topo h2 { color: var(--branco); margin: 0; }
.dialogo__corpo { padding: 1.25rem; overflow-y: auto; }
.dialogo__rodape { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--borda); flex-wrap: wrap; background: var(--cinza-claro); border-radius: 0 0 12px 12px; }
.dialogo__rodape .texto-suave { margin-right: auto; align-self: center; }
.dialogo--pequeno { width: min(460px, calc(100vw - 2rem)); }

/* ---------- Avisos ---------- */
.aviso { padding: .7rem .9rem; border-radius: var(--raio); margin-bottom: 1rem; font-size: .9rem; }
.aviso--erro { background: var(--perigo-suave); color: var(--perigo); }
.aviso--alerta { background: var(--dourado-suave); color: #6e520a; border-left: 3px solid var(--dourado); border-radius: 0; }
.aviso--info { background: var(--cinza-claro); color: var(--cinza-escuro); border-left: 3px solid var(--dourado); border-radius: 0; }
.notificacoes { position: fixed; bottom: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; max-width: calc(100vw - 2rem); }
/* Como popover, a área de avisos fica acima das janelas; tira o visual padrão do navegador (centralizado, com borda). */
.notificacoes[popover] { inset: auto 1rem 1rem auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; }
.dialogo__erro { margin: 0 1.25rem .75rem; padding: .65rem .85rem; border-radius: var(--raio); background: var(--perigo-suave); color: var(--perigo);
  border-left: 3px solid var(--perigo); font-size: .88rem; font-weight: 600; }
.dialogo__erro[hidden] { display: none; }
.notificacao { background: var(--preto); color: var(--branco); padding: .75rem 1rem; border-radius: var(--raio); box-shadow: var(--sombra); border-left: 3px solid var(--dourado); }
.notificacao--erro { background: var(--perigo); border-left-color: #7a1810; }

/* ---------- Telas de acesso (login e configuração inicial) ---------- */
.tela-acesso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; padding: 0; }
.tela-acesso__marca { background: var(--preto); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--branco); }
.tela-acesso__marca img { width: 150px; height: auto; }
.tela-acesso__marca .marca__nome { text-align: center; margin-top: 1.4rem; }
.tela-acesso__marca .marca__nome strong { font-size: 2.2rem; }
.tela-acesso__marca .marca__nome span { font-size: 1.05rem; margin-top: .45rem; }
.tela-acesso__marca .filete { width: 48px; height: 2px; background: var(--dourado); margin-top: 1.5rem; }
.tela-acesso__form { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.tela-acesso__form > div { width: min(380px, 100%); }
.tela-acesso h1 { margin: .15rem 0 .25rem; }
.tela-acesso form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 800px) {
  .tela-acesso { grid-template-columns: 1fr; }
  .tela-acesso__marca { padding: 2rem 1rem 1.5rem; }
  .tela-acesso__marca img { width: 70px; }
  .tela-acesso__marca .marca__nome strong { font-size: 1.5rem; }
  .tela-acesso__marca .marca__nome span { font-size: .75rem; }
}

/* ---------- Submenu (ex.: Configurações) ---------- */
.submenu { background: var(--branco); border-bottom: 1px solid var(--borda); }
.submenu__conteudo { max-width: 1280px; margin: 0 auto; padding: 0 1rem; display: flex; gap: .25rem; flex-wrap: wrap; }
.submenu a { font-family: var(--fonte-marca); font-weight: 600; font-size: .82rem; color: var(--cinza-texto); text-decoration: none;
  padding: .7rem .8rem; border-bottom: 2px solid transparent; }
.submenu a:hover { color: var(--preto); }
.submenu a[aria-current="page"] { color: var(--preto); border-bottom-color: var(--dourado); }

/* ---------- Campo de busca com sugestões (autocomplete) ---------- */
.busca-sugestoes { position: relative; }
.busca-sugestoes__lista { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0; margin: 0; padding: .25rem 0; list-style: none;
  background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio); box-shadow: 0 8px 24px rgb(14 14 16 / 15%);
  max-height: 280px; overflow-y: auto; }
.busca-sugestoes__lista li { padding: .45rem .7rem; cursor: pointer; }
.busca-sugestoes__lista li[aria-selected="true"], .busca-sugestoes__lista li:hover { background: #f1eee4; }
.busca-sugestoes__lista small { display: block; color: var(--texto-suave); font-size: .78rem; }
.busca-sugestoes__vazio { color: var(--texto-suave); cursor: default !important; }
.campo__ajuda { font-size: .78rem; color: var(--texto-suave); }

/* ---------- Chamados: prazo, criticidade e status ---------- */
.prazo { display: inline-block; font-size: .76rem; font-weight: 700; padding: .14rem .55rem; border-radius: 999px; white-space: nowrap; }
.prazo--ok { background: var(--sucesso-suave); color: var(--sucesso); }
.prazo--atencao { background: var(--dourado-suave); color: #6e520a; }
.prazo--atrasado { background: var(--perigo-suave); color: var(--perigo); }
.prazo--encerrado { color: var(--cinza-medio); }
.criticidade { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; white-space: nowrap; }
.criticidade::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cinza-medio); }
.criticidade--emergencial::before { background: var(--perigo); }
.criticidade--alta::before { background: var(--dourado); }
.criticidade--media::before { background: var(--cinza-escuro); }
.etiqueta--aguardando_atendimento { background: var(--dourado); color: var(--preto); }
.resumo--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.resumo--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .resumo--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .resumo--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .resumo--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Abas dentro do chamado ---------- */
.abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borda); margin: 0 0 1rem; }
.abas__aba { font-family: var(--fonte-marca); font-weight: 600; font-size: .88rem; color: var(--cinza-texto); background: none; border: none;
  border-bottom: 2px solid transparent; padding: .6rem .9rem; margin-bottom: -1px; cursor: pointer; }
.abas__aba:hover { color: var(--preto); }
.abas__aba[aria-selected="true"] { color: var(--preto); border-bottom-color: var(--dourado); }
.abas__contagem { color: var(--cinza-texto); font-weight: 500; }
.abas__contagem--alerta { color: #6e520a; font-weight: 700; }
.historico .historico__lista { max-height: none; }
/* Altura estável ao alternar entre as abas do chamado (evita a janela "pular"). */
#dialogo-chamado > form { height: min(calc(100vh - 2rem), 860px); }
#dialogo-chamado .dialogo__corpo { flex: 1; }

/* ---------- Atividades (agenda) ---------- */
.menu__contador { display: inline-block; min-width: 1.3rem; margin-left: .35rem; padding: 0 .35rem; border-radius: 999px; text-align: center;
  background: var(--dourado); color: var(--preto); font-size: .7rem; font-weight: 800; line-height: 1.3rem; }
.menu__contador--atrasado { background: var(--perigo); color: var(--branco); }
.agenda { padding: .25rem 0 .5rem; }
.agenda__grupo + .agenda__grupo { border-top: 1px solid var(--borda); }
.agenda__titulo { font-family: var(--fonte-marca); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cinza-escuro); margin: 0; padding: .9rem 1rem .3rem; }
.agenda__grupo--atrasadas .agenda__titulo { color: var(--perigo); }
.agenda__grupo--hoje .agenda__titulo { color: var(--dourado-texto); }
.agenda__lista { list-style: none; margin: 0; padding: 0; }
.atividade { display: grid; grid-template-columns: 20px 92px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem 1rem; }
.atividade + .atividade { border-top: 1px solid var(--borda); }
.atividade input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.atividade__corpo { min-width: 0; }
.atividade__acoes { display: flex; gap: .35rem; }
.atividade--concluida { opacity: .8; }
.atividade__feita { color: var(--sucesso); font-weight: 800; }
@media (max-width: 720px) {
  .atividade { grid-template-columns: 20px minmax(0, 1fr); }
  .atividade > .prazo { grid-column: 2; justify-self: start; }
  .atividade__corpo, .atividade__acoes { grid-column: 2; }
}
.botao--link { background: none; border: none; padding: 0; font: inherit; color: var(--texto); text-decoration: underline;
  text-decoration-color: var(--dourado); text-underline-offset: 3px; cursor: pointer; }
.atividades-chamado { margin-bottom: .75rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.atividades-chamado__titulo { font-family: var(--fonte-marca); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dourado-texto); padding: .6rem 1rem 0; }
.atividades-chamado .atividade { grid-template-columns: 20px 92px minmax(0, 1fr) auto; }

/* ---------- Histórico de ações do chamado ---------- */
.historico__registro { background: var(--cinza-claro); border-radius: var(--raio); padding: .75rem; margin-bottom: .75rem; }
.historico__linha { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: .5rem; }
@media (max-width: 700px) { .historico__linha { grid-template-columns: 1fr; } }
.historico__agenda { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .85rem; }
.historico__agenda input[type="date"] { width: auto; }
.historico__agenda #acao-proxima-descricao { width: min(320px, 100%); }
.historico__marcar { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.historico__marcar input { width: auto; }
#acao-agenda-campos { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
#acao-agenda-campos[hidden] { display: none; }
.historico__proxima { padding: .55rem .8rem; margin-bottom: .5rem; background: var(--dourado-suave); color: #6e520a; border-radius: var(--raio); font-size: .88rem; }
.historico__lista { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.historico__item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--borda); }
.historico__item:last-child { border-bottom: none; }
.historico__icone { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #ededf0; color: var(--grafite); font-size: .75rem; font-weight: 700; font-family: var(--fonte-marca); }
.historico__item--sistema .historico__icone { background: var(--superficie); border: 1px solid var(--borda-forte); color: var(--cinza-medio); }
.historico__item--sistema .historico__texto { color: var(--cinza-texto); font-size: .88rem; }
.historico__tipo { font-weight: 700; font-size: .88rem; }
.historico__texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.historico__meta { font-size: .76rem; color: var(--texto-suave); }
.historico__meta button { margin-left: .4rem; }
.historico__vazio { color: var(--texto-suave); padding: .6rem 0; }
.movimento { display: block; font-size: .76rem; color: var(--texto-suave); margin-top: .2rem; }
.movimento--parado { color: #6e520a; font-weight: 700; }
.etiqueta--em_orcamento { background: var(--preto); color: var(--branco); }
.etiqueta--enviado { background: #ededf0; color: var(--grafite); }
.etiqueta--revisao { background: var(--dourado-suave); color: #6e520a; }
.etiqueta--cancelado { background: var(--superficie); color: var(--cinza-texto); border: 1px solid var(--borda-forte); text-decoration: line-through; }
.etiqueta--ativa { background: #ededf0; color: var(--grafite); }
.etiqueta--encerrada { background: var(--superficie); color: var(--cinza-texto); border: 1px solid var(--borda-forte); }
.etiqueta--a_confirmar { background: var(--dourado-suave); color: #6e520a; }
.numero-chamado { font-family: var(--fonte-marca); font-weight: 800; white-space: nowrap; }
.resumo-texto { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 380px; }
.painel-andamento { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .8rem 1rem; margin-bottom: 1rem;
  background: var(--cinza-claro); border-left: 3px solid var(--dourado); }
.painel-andamento__texto { flex: 1 1 260px; display: flex; flex-direction: column; gap: .2rem; }
.painel-andamento__detalhe { font-size: .84rem; color: var(--cinza-escuro); }
.painel-andamento__detalhe:empty, #alertas-andamento:empty { display: none; }
.painel-andamento__botoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.painel-andamento--aprovacao { border-left-color: var(--preto); background: var(--dourado-suave); }
.filtros--chamados { grid-template-columns: 2fr repeat(5, 1fr); }
.filtros--3 { grid-template-columns: 2fr 1fr 1fr; }
.filtros--filiais { grid-template-columns: 2fr repeat(4, 1fr); }
@media (max-width: 1000px) { .filtros--chamados, .filtros--filiais { grid-template-columns: 1fr 1fr; } .filtros--chamados .campo:first-child, .filtros--filiais .campo:first-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .filtros--3 { grid-template-columns: 1fr; } }
.resumo__item--perigo { border-left: 3px solid var(--perigo); }
.resumo__item--perigo .resumo__valor { color: var(--perigo); }
.valor-calculado { padding: .5rem .65rem; background: var(--cinza-claro); border-radius: var(--raio); border: 1px dashed var(--borda-forte); min-height: 2.4rem; }

/* ---------- Resultado do orçamento (D014) ---------- */
/* Botões de resultado: verde = aprovado, vermelho = perdido (cor + texto, nunca só a cor). */
.botao--sucesso { background: var(--sucesso); border-color: var(--sucesso); color: var(--branco); }
.botao--sucesso:hover { background: #0c5a3b; border-color: #0c5a3b; }
.botao--perigo { background: var(--superficie); border-color: var(--perigo); color: var(--perigo); }
.botao--perigo:hover { background: var(--perigo); border-color: var(--perigo); color: var(--branco); }
.botao--perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: var(--branco); }
.botao--perigo-cheio:hover { background: #8f1c13; border-color: #8f1c13; }
.etiqueta--aguardando_aprovacao { background: var(--dourado-suave); color: #6e520a; border: 1px solid var(--dourado); }
.etiqueta--aprovado { background: var(--sucesso-suave); color: var(--sucesso); }
.etiqueta--perdido { background: var(--perigo-suave); color: var(--perigo); }
.alerta-chamado { display: inline-block; font-size: .76rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; margin: .2rem .3rem 0 0;
  background: var(--dourado-suave); color: #6e520a; }
.alerta-chamado--sem_pedido { background: var(--perigo-suave); color: var(--perigo); }
.margem { padding: .6rem .75rem; border-radius: var(--raio); background: var(--cinza-claro); font-size: .88rem; }
.margem--ok { background: var(--sucesso-suave); color: var(--sucesso); }
.margem--baixa { background: var(--dourado-suave); color: #6e520a; border-left: 3px solid var(--dourado); border-radius: 0; }
.margem strong { font-weight: 800; }
.campo-valor { text-align: right; font-variant-numeric: tabular-nums; }
.marcar-linha { display: flex; gap: .5rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--borda-forte); border-radius: var(--raio); cursor: pointer; }
.marcar-linha input { width: auto; margin-top: .2rem; }

/* Comemoração de orçamento aprovado (celebracao.js) */
.celebracao { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.celebracao::backdrop { background: transparent; }
.celebracao__confete { position: absolute; inset: 0; width: 100%; height: 100%; }
.celebracao__selo { position: relative; text-align: center; background: var(--preto); color: var(--branco); border: 2px solid var(--dourado);
  border-radius: 16px; padding: 1.4rem 2.2rem; box-shadow: 0 20px 60px rgb(14 14 16 / 35%); animation: selo-entra .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.celebracao__icone { width: 56px; height: 56px; margin: 0 auto .6rem; border-radius: 50%; background: var(--dourado); color: var(--preto);
  display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; }
.celebracao__titulo { font-family: var(--fonte-marca); font-weight: 800; font-size: 1.5rem; letter-spacing: .01em; }
.celebracao__detalhe { color: #e0c25a; font-family: var(--fonte-marca); font-weight: 600; margin-top: .25rem; }
.celebracao--saindo { opacity: 0; transition: opacity .4s; }
@keyframes selo-entra { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .celebracao__selo { animation: none; } }

/* ---------- Ordenação pelo cabeçalho da lista ---------- */
.ordenar { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: none; padding: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; text-align: left; }
.ordenar:hover { color: var(--preto); }
.ordenar__seta { font-size: .7rem; color: var(--cinza-medio); }
th[aria-sort="ascending"] .ordenar, th[aria-sort="descending"] .ordenar { color: var(--preto); }
th[aria-sort="ascending"] .ordenar__seta, th[aria-sort="descending"] .ordenar__seta { color: var(--dourado-texto); }
.historico__registro--agendar #acao-descricao, .historico__registro--agendar #acao-tipo { opacity: .55; }
.lista-duplicados { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); border-radius: var(--raio); }
.lista-duplicados li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .8rem; }
.lista-duplicados li + li { border-top: 1px solid var(--borda); }
.lista-duplicados small { display: block; color: var(--texto-suave); }

/* ---------- Obras (D016) ---------- */
.etiqueta--obra-planejamento { background: #ededf0; color: var(--grafite); margin-top: .25rem; }
.etiqueta--obra-execucao { background: var(--preto); color: var(--dourado); margin-top: .25rem; }
.etiqueta--obra-paralisada { background: var(--dourado-suave); color: #6e520a; margin-top: .25rem; }
.etiqueta--obra-concluida { background: var(--sucesso-suave); color: var(--sucesso); margin-top: .25rem; }
.etiqueta--obra-entregue { background: var(--superficie); color: var(--sucesso); border: 1px solid var(--sucesso); margin-top: .25rem; }
#bloco-escopo textarea { width: 100%; }
.bloco-escopo__acoes { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; margin-top: .5rem; }
.bloco-escopo__acoes .erro-campo { margin-right: auto; }
.obra-escopo { white-space: pre-wrap; padding: .6rem .75rem; background: var(--cinza-claro); border-radius: var(--raio); font-size: .92rem; }
.obra-parceiros { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.obra-parceiro { display: grid; grid-template-columns: auto minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr) auto; gap: .5rem; align-items: center; }
.obra-parceiro__principal { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; white-space: nowrap; }
.obra-parceiro__principal input { width: auto; }
@media (max-width: 760px) { .obra-parceiro { grid-template-columns: 1fr 1fr; } }
.obra-tipos { display: flex; flex-wrap: wrap; gap: .35rem .6rem; }
.obra-tipo { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; padding: .2rem .55rem; border: 1px solid var(--borda); border-radius: 999px; cursor: pointer; }
.obra-tipo input { width: auto; }
.obra-tipo:has(input:checked) { border-color: var(--dourado); background: var(--dourado-suave); }
.obra-rodape { display: flex; justify-content: flex-end; }

/* Tela de Obras: quadro por fase */
.alternador { display: inline-flex; }
.alternador .botao { border-radius: 0; }
.alternador .botao:first-child { border-radius: var(--raio) 0 0 var(--raio); }
.alternador .botao:last-child { border-radius: 0 var(--raio) var(--raio) 0; margin-left: -1px; }
.alternador .botao[aria-pressed="true"] { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; align-items: start; }
.quadro__coluna { background: #ebebef; border-radius: var(--raio-cartao); padding: .6rem; min-height: 120px; border-top: 3px solid var(--cinza-medio); }
.quadro__coluna--execucao { border-top-color: var(--preto); }
.quadro__coluna--paralisada { border-top-color: var(--dourado); }
.quadro__coluna--concluida, .quadro__coluna--entregue { border-top-color: var(--sucesso); }
.quadro__titulo { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; margin: .1rem .2rem .6rem; }
.quadro__contagem { font-family: var(--fonte); font-weight: 600; color: var(--cinza-texto); }
.quadro__card { display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: left; font: inherit; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio); padding: .55rem .65rem; margin-bottom: .5rem; cursor: pointer; box-shadow: var(--sombra); }
.quadro__card:hover { border-color: var(--dourado); }
.quadro__loja { font-weight: 600; font-size: .88rem; }
.quadro__meta { font-size: .78rem; color: var(--texto-suave); }
.quadro__emergencial { color: var(--perigo); font-size: .78rem; }
.quadro__vazio { font-size: .82rem; color: var(--texto-suave); margin: .2rem; }

/* ---------- Cronograma (D018) ---------- */
.cronograma__topo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: .75rem; }
.cronograma__botoes { display: inline-flex; gap: .4rem; margin-left: auto; }
.avanco { display: inline-flex; align-items: center; gap: .45rem; }
.avanco strong { font-family: var(--fonte-marca); font-size: 1.1rem; }
.avanco__barra { display: inline-block; width: 140px; height: 8px; border-radius: 999px; background: #e6e6ea; overflow: hidden; }
.avanco__preenchido { display: block; height: 100%; background: var(--dourado); }
.avanco--pequeno { font-size: .76rem; color: var(--texto-suave); gap: .35rem; }
.avanco--pequeno .avanco__barra { width: 70px; height: 6px; }
.gantt { border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem .6rem .4rem; margin-bottom: .9rem; background: var(--superficie); overflow-x: auto; }
.gantt__vazio { color: var(--texto-suave); margin: .4rem; font-size: .88rem; }
.gantt__linha { display: grid; grid-template-columns: 170px minmax(380px, 1fr); align-items: center; min-height: 26px; }
.gantt__linha + .gantt__linha { border-top: 1px solid #f0f0f2; }
.gantt__linha--regua { min-height: 20px; }
.gantt__linha--atrasada .gantt__nome { color: var(--perigo); font-weight: 700; }
.gantt__nome { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .5rem; }
.gantt__nome small { color: var(--texto-suave); }
.gantt__regua, .gantt__faixa { position: relative; height: 24px; }
.gantt__regua { height: 18px; }
.gantt__dia { position: absolute; top: 2px; font-size: .68rem; color: var(--texto-suave); transform: translateX(2px); white-space: nowrap; }
.gantt__fds { position: absolute; top: 0; bottom: 0; background: #f4f4f6; }
.gantt__hoje { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--perigo); z-index: 3; }
.gantt__contrato { position: absolute; top: -2px; bottom: -2px; border-left: 2px dashed var(--preto); z-index: 3; }
.gantt__previsto { position: absolute; top: 3px; height: 9px; border-radius: 3px; background: #dcdce1; border: 1px solid #b9b9c0; overflow: hidden; z-index: 1; }
.gantt__pct { display: block; height: 100%; background: #8f8f98; }
.gantt__real { position: absolute; top: 14px; height: 7px; border-radius: 3px; z-index: 2; }
.gantt__real--andamento { background: var(--dourado); }
.gantt__real--concluida { background: var(--sucesso); }
.gantt__real--atrasada { background: var(--perigo); }
.gantt__legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .74rem; color: var(--texto-suave); margin-top: .45rem; }
.gantt__amostra { position: static; display: inline-block; width: 18px; height: 8px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }
.gantt__amostra--hoje { width: 2px; height: 12px; background: var(--perigo); }
.gantt__amostra--contrato { width: 0; height: 12px; border-left: 2px dashed var(--preto); border-radius: 0; }
.cronograma__tabela td { padding: .3rem .3rem; vertical-align: middle; }
.cronograma__tabela input, .cronograma__tabela select { font-size: .82rem; padding: .3rem .35rem; }
.cronograma__tabela input[type="date"] { width: 132px; }
.cronograma__tabela td:nth-child(2) input { min-width: 170px; }
.cronograma__ordem { white-space: nowrap; }
.cronograma__ordem .botao { padding: .1rem .4rem; }
/* O card ganhou abas de obra e cronograma: janela mais larga em telas grandes. */
#dialogo-chamado { width: min(1100px, calc(100vw - 2rem)); }
.cronograma__tabela td:nth-child(5) select { min-width: 72px; }
.cronograma__tabela td:nth-child(8) select { max-width: 160px; }
.obra-observacoes { min-height: 0; height: 4.2rem; }
/* Aba Obra: documentos à esquerda e "Salvar obra" à direita, na mesma linha. */
.obra-form > .obra-rodape { justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.obra-rodape__documentos { display: inline-flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- Almoxarifado: estoque (D020) e contratos ---------- */
.dialogo--medio { width: min(720px, calc(100vw - 2rem)); }
.barra-titulo__acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.barra-secao { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.barra-secao input[type="search"] { max-width: 360px; }
.filtros--estoque { grid-template-columns: 2fr 1fr 1fr auto; }
.filtros--movimentos { grid-template-columns: 1.5fr repeat(5, 1fr) auto; }
@media (max-width: 1000px) { .filtros--estoque, .filtros--movimentos { grid-template-columns: 1fr 1fr; } }
.campo--botao { justify-content: flex-end; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha--estornada td { color: var(--cinza-medio); text-decoration: line-through; }
.linha--estornada td:last-child, .linha--estornada td:nth-child(2) { text-decoration: none; }
.linha--inativa td { color: var(--cinza-medio); }
.etiqueta--mov-entrada { background: var(--sucesso-suave); color: var(--sucesso); }
.etiqueta--mov-saida { background: var(--preto); color: var(--branco); }
.etiqueta--mov-transferencia { background: #ededf0; color: var(--grafite); }
.etiqueta--mov-ajuste { background: var(--dourado-suave); color: #6e520a; }
.etiqueta--mov-estorno { background: var(--perigo-suave); color: var(--perigo); }
.contagem { max-height: 320px; overflow-y: auto; border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem; }
.contagem__tabela { width: 100%; font-size: .88rem; }
.contagem__tabela td, .contagem__tabela th { padding: .3rem .4rem; }
.contagem__tabela input { width: 100px; }

/* ---------- Almoxarifado: patrimônio (D021) ---------- */
.resumo--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .resumo--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filtros--patrimonio { grid-template-columns: 2fr 1fr 1fr 1.3fr auto; }
.filtros--emprestimos { grid-template-columns: 2fr 1fr; max-width: 640px; }
@media (max-width: 1000px) { .filtros--patrimonio { grid-template-columns: 1fr 1fr; } }
.col-marcar { width: 2.2rem; text-align: center; }
.col-marcar input { width: auto; }
.plaqueta { font-family: var(--fonte-marca); letter-spacing: .02em; white-space: nowrap; }
.barra-selecao { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .9rem; margin-bottom: .75rem;
  background: var(--preto); color: var(--branco); border-radius: var(--raio-cartao); }
.barra-selecao span { margin-right: auto; font-weight: 600; }
.etiqueta--bem-disponivel { background: var(--sucesso-suave); color: var(--sucesso); }
.etiqueta--bem-emprestado { background: var(--preto); color: var(--dourado); }
.etiqueta--bem-manutencao { background: var(--dourado-suave); color: #6e520a; }
.etiqueta--bem-baixado { background: var(--superficie); color: var(--cinza-texto); border: 1px solid var(--borda-forte); }
.etiqueta--bem-vencido { background: var(--perigo-suave); color: var(--perigo); }
.ficha-bem { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .55rem 1rem; margin: 0; }
.ficha-bem dt { font-size: .74rem; color: var(--texto-suave); }
.ficha-bem dd { margin: 0; font-weight: 600; }
.ficha-bem__acoes { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.ficha-bem__titulo { font-size: .95rem; margin: .2rem 0 .5rem; }
.historico-bem { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--dourado); max-height: 260px; overflow-y: auto; }
.historico-bem li { padding: .3rem 0 .5rem; font-size: .88rem; }
.lista-bens-emprestimo { list-style: none; margin: 0 0 .4rem; padding: .4rem .6rem; border: 1px solid var(--borda); border-radius: var(--raio); max-height: 160px; overflow-y: auto; }
.lista-bens-emprestimo li { padding: .2rem 0; display: flex; gap: .4rem; align-items: baseline; }
.lista-bens-emprestimo .botao-link { margin-left: auto; }
.botao-link { background: none; border: 0; padding: 0; color: var(--perigo); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; }
.acoes-linha { white-space: nowrap; }
.acoes-linha .botao + .botao { margin-left: .3rem; }

/* Etiquetas de patrimônio: folha A4 com 21 etiquetas de 63,5 × 38,1 mm (3 × 7). */
.etiquetas-controles { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.etiquetas-controles .campo { max-width: 200px; }
.etiquetas-controles p { flex: 1 1 320px; margin: 0; }
.folhas-etiquetas { overflow-x: auto; }
.folha-etiquetas { width: 210mm; min-height: 297mm; padding: 15.15mm 0 0 7.2mm; background: #fff; box-shadow: var(--sombra); margin: 0 auto 1rem;
  display: grid; grid-template-columns: repeat(3, 63.5mm); grid-auto-rows: 38.1mm; column-gap: 2.5mm; align-content: start; box-sizing: border-box; }
.etiqueta-bem { box-sizing: border-box; padding: 2.5mm 3mm; display: flex; gap: 2.5mm; align-items: center; overflow: hidden; outline: 1px dashed #d6d6dc; }
.etiqueta-bem__qr { width: 25mm; height: 25mm; flex: none; }
.etiqueta-bem__qr svg { width: 100%; height: 100%; display: block; }
.etiqueta-bem__texto { min-width: 0; display: flex; flex-direction: column; gap: .6mm; }
.etiqueta-bem__marca { font-size: 6.5pt; font-weight: 700; letter-spacing: .08em; color: #8C6B12; }
.etiqueta-bem__plaqueta { font-family: var(--fonte-marca); font-size: 15pt; font-weight: 800; color: #0E0E10; line-height: 1.05; }
.etiqueta-bem__descricao { font-size: 6.5pt; color: #3a3a40; line-height: 1.2; max-height: 3.6em; overflow: hidden; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .cabecalho, .lateral, .topo, .submenu, .etiquetas-controles, .notificacoes, .nao-imprimir { display: none !important; }
  body.com-lateral { padding-left: 0; }
  main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .folha-etiquetas { box-shadow: none; margin: 0; break-after: page; }
  .etiqueta-bem { outline: none; }
}

/* ---------- Checklist de encerramento e financeiro da obra (D023) ---------- */
.checklist--pendente { border-color: var(--dourado); background: var(--dourado-suave); }
.checklist__lista { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.checklist__item { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .35rem .5rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.checklist__nome { font-weight: 600; margin-right: auto; }
.checklist__quem { font-size: .78rem; }
.checklist__situacao { width: auto; min-width: 150px; }
.checklist__situacao--ok, .checklist__situacao--na { border-color: var(--sucesso); color: var(--sucesso); }
.financeiro-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.resumo__valor--menor { font-size: 1.15rem; }
.financeiro-bloco { margin: 1rem 0 1.25rem; }
.financeiro-bloco .barra-secao { margin-bottom: .4rem; }
.financeiro-bloco .painel-titulo { margin: 0; }
.financeiro-bloco table { font-size: .86rem; }
.financeiro-bloco .acoes-linha { white-space: normal; min-width: 150px; }
.financeiro-bloco .acoes-linha .botao { margin: .15rem .3rem .15rem 0; }
.financeiro-bloco .acoes-linha .botao + .botao { margin-left: 0; }
.etiqueta--fatura-a_faturar { background: var(--dourado-suave); color: #6e520a; }
.etiqueta--fatura-faturada { background: var(--preto); color: var(--dourado); }
.etiqueta--fatura-recebida { background: var(--sucesso-suave); color: var(--sucesso); }
.etiqueta--fatura-cancelada { background: var(--superficie); color: var(--cinza-texto); border: 1px solid var(--borda-forte); }
.etiqueta--fin-a_faturar { background: var(--dourado-suave); color: #6e520a; }
.etiqueta--fin-a_receber { background: var(--preto); color: var(--dourado); }
.etiqueta--fin-vencida { background: var(--perigo-suave); color: var(--perigo); }
.etiqueta--fin-quitada { background: var(--sucesso-suave); color: var(--sucesso); }
.etiqueta--fin-em_andamento { background: #ededf0; color: var(--grafite); }
.filtros--faturamento { grid-template-columns: 2fr 1fr 1fr; }

/* ---------- Ordens de compra (D024) ---------- */
.compras-fluxo { margin: -.6rem 0 1rem; font-size: .88rem; }
.filtros--compras { grid-template-columns: 2fr 1fr 1fr auto; }
@media (max-width: 900px) { .filtros--compras { grid-template-columns: 1fr; } }
.etiqueta--oc-aguardando_aprovacao { background: var(--dourado-suave); color: #6e520a; border: 1px solid var(--dourado); }
.etiqueta--oc-aprovada { background: var(--preto); color: var(--dourado); }
.etiqueta--oc-reprovada { background: var(--perigo-suave); color: var(--perigo); }
.etiqueta--oc-paga { background: var(--sucesso-suave); color: var(--sucesso); }
.etiqueta--oc-cancelada { background: var(--superficie); color: var(--cinza-texto); border: 1px solid var(--borda-forte); }
.oc-itens .contagem__tabela input, .oc-itens .contagem__tabela select { width: 100%; min-width: 70px; }
.oc-itens .contagem__tabela td:first-child { min-width: 220px; }
.oc-itens__rodape { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; gap: .6rem; flex-wrap: wrap; }

/* Pagamento a parceiro (D025) */
.resumo--compras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .resumo--compras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.etiqueta--oc-provisionada { background: #ededf0; color: var(--grafite); border: 1px dashed var(--borda-forte); }
.etiqueta--oc-aguardando_diretor { background: var(--dourado-suave); color: #6e520a; border: 1px solid #8C6B12; }
.etiqueta--pagamento { background: var(--preto); color: var(--dourado); font-size: .68rem; }
.linha--extra td { background: var(--dourado-suave); }
.oc-extra { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; }
@media (max-width: 700px) { .oc-extra { grid-template-columns: 1fr; } }
.sugestoes-parceiro { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; font-size: .82rem; margin-top: .3rem; }
.sugestoes-parceiro:empty { display: none; }
.analise-pagamento { display: grid; gap: .45rem; padding: .7rem .8rem; border: 1px solid var(--borda-forte); border-radius: 6px; background: var(--superficie); }
.analise-pagamento .aviso { margin: 0; }
.analise-pagamento__numeros { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .9rem; }
.texto-perigo { color: var(--perigo); }

/* ---------- Painel de indicadores (D022) ---------- */
.painel-filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.painel-filtros .campo { min-width: 150px; }
.painel-periodo { margin: -.6rem 0 .8rem; font-size: .85rem; }
.painel-secao { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dourado-texto); margin: 1.2rem 0 .5rem; }
.painel-nota { font-size: .75rem; color: var(--texto-suave); margin-top: .15rem; }
.painel-titulo { font-size: 1rem; margin: 0 0 .75rem; }
.painel-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .75rem; margin: 1rem 0; }
@media (max-width: 900px) { .painel-grade { grid-template-columns: minmax(0, 1fr); } }
.painel-tabela { margin: 1rem 0; padding-top: 1rem; }
.painel-tabela > .painel-titulo, .painel-tabela > .painel-nota { padding: 0 1rem; }
.painel-tabela > .painel-nota { margin: -.5rem 0 .5rem; }
.painel-link { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--dourado); text-underline-offset: 3px; }
.texto-perigo { color: var(--perigo); }
.grafico-meses { display: flex; gap: .35rem; align-items: stretch; height: 190px; }
.grafico-meses__mes { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.grafico-meses__barras { flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--borda-forte); }
.grafico-meses__barra { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.grafico-meses__barra--recebidos, .legenda--recebidos::before { background: #b9b9c0; }
.grafico-meses__barra--enviados, .legenda--enviados::before { background: var(--dourado); }
.grafico-meses__rotulo { font-size: .7rem; text-align: center; padding-top: .25rem; line-height: 1.2; }
.grafico-legenda { display: flex; gap: 1rem; font-size: .78rem; margin-top: .6rem; color: var(--texto-suave); }
.legenda::before { content: ''; display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.barra-motivo { margin-bottom: .6rem; font-size: .85rem; }
.barra-motivo__topo { display: flex; justify-content: space-between; gap: .5rem; }
.barra-motivo__trilho { height: 6px; background: var(--superficie-2, #ededf0); border-radius: 3px; margin-top: .2rem; overflow: hidden; }
.barra-motivo__valor { height: 100%; background: var(--perigo); }
/* Indicadores semanais (D033). */
.barra-motivo__valor--dourado { background: var(--dourado); }
.painel-grade--metades { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .painel-grade--metades { grid-template-columns: minmax(0, 1fr); } }
.painel-grade > .painel-tabela { margin: 0; }
.painel-pilha { display: grid; gap: .75rem; margin: 1rem 0; }
.grafico-meses--semanas { height: 160px; gap: .2rem; }
.grafico-meses--semanas .grafico-meses__rotulo { font-size: .62rem; }
.painel-rolagem { max-height: 340px; overflow-y: auto; padding-right: .4rem; }
.tabela-compacta th, .tabela-compacta td { padding: .35rem .5rem; white-space: nowrap; }
.linha-total td { border-top: 2px solid var(--borda-forte); background: var(--superficie-2, #f5f5f7); }
.painel-lista { margin: 0; display: grid; gap: .1rem; }
.painel-lista > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--borda); }
.painel-lista > div:last-child { border-bottom: 0; }
.painel-lista dt { color: var(--texto-suave); }
.painel-lista dd { margin: 0; font-weight: 700; }
.linha--grupo td { background: var(--cinza-claro); }
.texto-dourado { color: #8C6B12; }
.financeiro-parceiros { margin: .2rem 0 .6rem; font-size: .88rem; }

/* ---------- Menu lateral e barra do topo (v0.17.0) ---------- */
:root { --largura-lateral: 232px; }
body.com-lateral { padding-left: var(--largura-lateral); }
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--largura-lateral); background: var(--preto); color: var(--branco);
  border-right: 2px solid var(--dourado); display: flex; flex-direction: column; overflow-y: auto; z-index: 40; }
.lateral__marca { padding: 1.1rem 1.2rem 1.3rem; }
.lateral__nav { display: flex; flex-direction: column; padding: 0 .6rem 1.5rem; gap: .1rem; }
.lateral__item, .lateral__filho { font-family: var(--fonte-marca); font-weight: 600; font-size: .9rem; color: var(--cinza-medio); text-decoration: none;
  padding: .6rem .75rem; border-radius: 6px; border-left: 3px solid transparent; display: flex; align-items: center; justify-content: space-between; }
.lateral__item:hover, .lateral__filho:hover { color: var(--branco); background: var(--grafite); }
.lateral__item[aria-current="page"], .lateral__filho[aria-current="page"] { color: var(--branco); background: var(--grafite); border-left-color: var(--dourado); }
.lateral__grupo { display: flex; flex-direction: column; }
.lateral__grupo-titulo { font-family: var(--fonte-marca); font-weight: 600; font-size: .9rem; color: var(--cinza-medio); padding: .6rem .75rem;
  background: none; border: 0; border-left: 3px solid transparent; border-radius: 6px; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; }
.lateral__grupo-titulo:hover { color: var(--branco); background: var(--grafite); }
.lateral__seta { font-size: .9rem; transition: transform .15s ease; }
.lateral__grupo-titulo[aria-expanded="false"] .lateral__seta { transform: rotate(-90deg); }
.lateral__filhos { display: flex; flex-direction: column; gap: .1rem; }
.lateral__filhos[hidden] { display: none; }
.lateral__grupo-titulo--ativo { color: var(--branco); }
.lateral__filho { font-size: .84rem; padding-left: 1.6rem; }
.lateral__fundo { display: none; }

.topo { position: sticky; top: 0; z-index: 30; background: var(--branco); border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; padding: .45rem 1.2rem; min-height: 56px; }
.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.topo__icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--cinza-escuro); text-decoration: none; }
.topo__icone:hover, .topo__icone--ativo { color: #8C6B12; background: var(--dourado-suave); }
.topo__usuario { position: relative; }
.topo__avatar { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; display: inline-flex; }
.topo__avatar:hover .avatar, .topo__avatar[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--dourado); }
.topo .avatar { width: 38px; height: 38px; font-size: .8rem; background: var(--preto); }
.avatar--foto { object-fit: cover; padding: 0; }
.avatar--grande { width: 44px; height: 44px; font-size: .9rem; }
.topo__menu-usuario { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--branco);
  border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); padding: .4rem; z-index: 50; }
.topo__menu-cabecalho { display: flex; gap: .7rem; align-items: center; padding: .6rem .6rem .7rem; border-bottom: 1px solid var(--borda); margin-bottom: .3rem; font-size: .85rem; }
.topo__menu-usuario a, .topo__menu-usuario button { display: block; width: 100%; text-align: left; padding: .55rem .7rem; border: 0; background: none;
  border-radius: 6px; font: inherit; font-size: .88rem; color: var(--texto); text-decoration: none; cursor: pointer; }
.topo__menu-usuario a:hover, .topo__menu-usuario button:hover { background: var(--cinza-claro); }
.topo__abrir-menu { display: none; border: 1px solid var(--borda-forte); background: var(--branco); border-radius: 6px; font-size: 1.2rem; width: 40px; height: 40px; cursor: pointer; }

/* Celular e tela estreita: o menu lateral vira uma gaveta aberta pelo botão ☰. */
@media (max-width: 900px) {
  body.com-lateral { padding-left: 0; }
  .lateral { transform: translateX(-100%); transition: transform .2s ease; }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .lateral__fundo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 35; }
  .topo__abrir-menu { display: inline-flex; align-items: center; justify-content: center; }
}

/* Meu perfil */
.perfil { display: grid; gap: 1rem; max-width: 720px; }
.perfil__foto { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.perfil__foto .avatar { width: 96px; height: 96px; font-size: 1.8rem; }
.perfil__acoes { display: flex; gap: .5rem; flex-wrap: wrap; }