/* TEMA VISUAL do TechNC Marmorarias — carregado POR ÚLTIMO em todas as telas. Fonte: arquivo do Figma "TechNC Marmorarias — Sistema visual e telas"
   (docs/design/FIGMA.md). Os nomes --cor-*, --espaco-* e --raio-* são os mesmos das variáveis do Figma: trocar a paleta é trocar só este primeiro bloco.
   As folhas antigas continuam valendo para leiaute; aqui ficam as cores, a tipografia e a forma dos componentes comuns.
   Regra do sistema visual: estado nunca depende só de cor (selo tem ícone e texto; aba ativa tem traço e negrito). */
/* Fonte embutida: Inter (variável, pesos 100–900), licença SIL Open Font License 1.1 — https://rsms.me/inter/. Vai no pacote para todo aparelho mostrar
   a mesma letra, com ou sem a fonte instalada. font-display: swap = o texto aparece na hora com a fonte do sistema e troca quando a Inter carrega. */
@font-face { font-family: "Inter"; src: url("fontes/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --cor-fundo: #f4f5f7; --cor-superficie: #ffffff; --cor-texto: #14171a; --cor-texto-secundario: #4a525d;
  --cor-borda: #c8cfd8; --cor-borda-forte: #7a8494;
  --cor-primaria: #0f4c5c; --cor-primaria-hover: #093540; --cor-sobre-primaria: #ffffff; --cor-primaria-fundo: #e6eef0;
  --cor-sucesso: #166534; --cor-sucesso-fundo: #e8f3ec; --cor-alerta: #9a4d00; --cor-alerta-fundo: #fbf0e3;
  --cor-erro: #b91c1c; --cor-erro-fundo: #fbeaea; --cor-info: #1d4ed8; --cor-info-fundo: #e8eefc;
  --espaco-xs: 4px; --espaco-sm: 8px; --espaco-md: 12px; --espaco-lg: 16px; --espaco-xl: 24px; --espaco-2xl: 32px;
  --raio-sm: 6px; --raio-md: 10px; --raio-lg: 14px; --raio-pilula: 999px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-codigo: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* nomes antigos das folhas existentes, apontados para o tema */
  --ink: var(--cor-texto); --paper: var(--cor-fundo); --tile: var(--cor-superficie); --line: var(--cor-borda);
  --green: var(--cor-primaria); --amber: var(--cor-alerta); --red: var(--cor-erro); --soft: var(--cor-primaria-fundo);
}

body { font: 16px/1.5 var(--fonte); background: var(--cor-fundo); color: var(--cor-texto); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { letter-spacing: 0; font-weight: 600; }
.meta, .cartao .meta, .chapa .meta, header p, .exemplos, .vazio, .info-arco, details.legado summary { color: var(--cor-texto-secundario); }
:focus-visible { outline: 3px solid var(--cor-info); outline-offset: 2px; }

/* barra do sistema */
body > header { background: var(--cor-primaria); color: var(--cor-sobre-primaria); padding: var(--espaco-md) var(--espaco-xl); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-xs) var(--espaco-lg); }
body > header h1 { font-size: 20px; line-height: 26px; margin: 0; }
body > header p { margin: 0; color: var(--cor-sobre-primaria); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-sm) var(--espaco-md); }
body > header .sessao-info { font-weight: 400; margin: 0; }
body > header button, body > header button.secundario, body > header #btn-sair { min-height: 40px; margin: 0; padding: 0 var(--espaco-md); background: transparent; color: var(--cor-sobre-primaria); border: 1px solid var(--cor-sobre-primaria); border-radius: var(--raio-md); font: 600 15px var(--fonte); }
body > header button:hover { background: var(--cor-primaria-hover); }
main { padding: var(--espaco-xl) var(--espaco-lg); }
.aviso-prototipo { background: var(--cor-alerta); color: #fff; font-size: 14px; }

/* abas: a ativa tem traço e negrito, além da cor */
.abas { gap: var(--espaco-xs); border-bottom: 1px solid var(--cor-borda); margin-bottom: var(--espaco-lg); overflow-x: auto; }
.aba { flex: 0 0 auto; min-height: 48px; padding: 0 var(--espaco-lg); border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--cor-texto-secundario); font: 400 16px var(--fonte); cursor: pointer; }
.aba:hover { color: var(--cor-texto); }
.aba.ativa { background: none; border-color: transparent; border-bottom-color: var(--cor-primaria); color: var(--cor-primaria); font-weight: 600; }

/* botões */
button { font-family: var(--fonte); cursor: pointer; }
button:disabled { cursor: not-allowed; }
.form-entrada button, .acoes button.principal, button.principal-grande, #acoes > button.principal { background: var(--cor-primaria); color: var(--cor-sobre-primaria); border: 0; border-radius: var(--raio-md); font-weight: 600; }
.form-entrada button:hover, .acoes button.principal:hover, button.principal-grande:hover { background: var(--cor-primaria-hover); }
.acoes button.principal:disabled, button.principal-grande:disabled, .form-entrada button:disabled { background: var(--cor-borda-forte); }
.acoes button, .acoes-linha button, button.secundario, .acoes button.secundario, .chapa button, #acoes > button { background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); font-weight: 600; }
.acoes button:hover, .acoes-linha button:hover, button.secundario:hover, .chapa button:hover { background: var(--cor-fundo); }
.acoes button.principal, #acoes > button.principal { border: 0; color: var(--cor-sobre-primaria); background: var(--cor-primaria); }
button.perigo { border-color: var(--cor-erro); background: var(--cor-erro-fundo); color: var(--cor-erro); }

/* campos */
select, input, textarea, .form-entrada input, .grade-campos input { border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); background: var(--cor-superficie); color: var(--cor-texto); font-family: var(--fonte); }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: auto; }
select:focus, input:focus, textarea:focus { outline: 3px solid var(--cor-info); outline-offset: 1px; border-color: var(--cor-primaria); }
label { color: var(--cor-texto-secundario); }
.linha-entrada .erro input, .linha-entrada .erro select { border-color: var(--cor-erro); background: var(--cor-erro-fundo); }
#erro-login, .linha-entrada .msg-erro { color: var(--cor-erro); }

/* cartões e listas */
.cartao, .chapa, .cartao-form, .linha-entrada, .desenho { border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); }
.cartao, .cartao-form { padding: var(--espaco-lg) var(--espaco-xl); }
.cartao h2, .cartao h3, .chapa h3 { font-size: 20px; line-height: 26px; }
.cartao .medida, .chapa .grande, .chapa h3 { font-variant-numeric: tabular-nums; }
.vazio { border-color: var(--cor-borda); border-radius: var(--raio-lg); }
.tabela th, .tabela-fin th { background: var(--cor-fundo); color: var(--cor-texto-secundario); font-size: 13px; font-weight: 400; }
.tabela th, .tabela td, .tabela-fin th, .tabela-fin td { border-bottom: 1px solid var(--cor-borda); padding: var(--espaco-sm) var(--espaco-md); }
.tabela-fin .vencida td { background: var(--cor-erro-fundo); }
.resumo { gap: var(--espaco-md); }
.resumo div { background: var(--cor-fundo); border-radius: var(--raio-md); padding: var(--espaco-md) var(--espaco-lg); min-width: 160px; color: var(--cor-texto-secundario); font-size: 13px; }
.resumo strong { font-size: 26px; line-height: 32px; color: var(--cor-texto); font-weight: 600; }
.resumo .alerta strong { color: var(--cor-erro); }

/* selos: pílula com ícone, borda e texto */
.selo { display: inline-flex; align-items: center; gap: var(--espaco-xs); border: 1px solid currentColor; border-radius: var(--raio-pilula); padding: 3px var(--espaco-md); font-size: 13px; font-weight: 600; line-height: 16px; }
.selo::before { font-weight: 700; }
.selo.ok { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); } .selo.ok::before { content: "✓"; }
.selo.alerta { background: var(--cor-alerta-fundo); color: var(--cor-alerta); } .selo.alerta::before { content: "▲"; font-size: 10px; }
.selo.bloqueio { background: var(--cor-erro-fundo); color: var(--cor-erro); } .selo.bloqueio::before { content: "✕"; }
.banner-aviso, .g3d-aviso { background: var(--cor-alerta-fundo); color: var(--cor-alerta); border: 1px solid var(--cor-alerta); border-radius: var(--raio-md); }
.aviso-perfil { background: var(--cor-alerta-fundo); color: var(--cor-alerta); border-radius: var(--raio-md); }
#msg[data-tipo="ok"], .aviso-msg[data-tipo="ok"] { color: var(--cor-sucesso); }
#msg[data-tipo="erro"], .aviso-msg[data-tipo="erro"] { color: var(--cor-erro); }
.chip, .passo { border-color: var(--cor-borda); background: var(--cor-superficie); }
.passo.atual { border-color: var(--cor-primaria); color: var(--cor-primaria); }

/* desenhos (peça e chapa) */
.g-contorno { fill: var(--cor-info-fundo); stroke: var(--cor-texto); }
.g-recorte { fill: var(--cor-superficie); stroke: var(--cor-primaria); }
.g-cota { fill: var(--cor-texto); } .g-cota-leve { fill: var(--cor-texto-secundario); }
.desenho .chapa { stroke: var(--cor-borda-forte); border: 0; background: none; padding: 0; }
.desenho .peca { fill: var(--cor-info-fundo); stroke: var(--cor-primaria); stroke-width: 2; }
.desenho .peca.obsoleta { fill: var(--cor-erro-fundo); stroke: var(--cor-erro); }
.desenho .defeito { fill: var(--cor-erro); opacity: .45; }
.desenho text { fill: var(--cor-primaria); font-weight: 600; }

/* códigos e medidas em fonte de largura fixa */
.chapa h3, #lista-fila h3, .codigo { font-family: var(--fonte-codigo); }

/* página inicial: lista de módulos */
.item-chapa { display: block; padding: var(--espaco-lg) var(--espaco-xl); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); background: var(--cor-superficie); color: var(--cor-texto); text-decoration: none; }
.item-chapa:hover { border-color: var(--cor-primaria); }
.item-chapa strong { color: var(--cor-primaria); }

/* ajustes de encaixe: selo e código não quebram no meio */
.selo { white-space: nowrap; }
.chapa h3, #lista-fila h3 { font-size: 17px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapa .linha, .cartao .linha { flex-wrap: wrap; row-gap: var(--espaco-xs); }
.botoes.exportar { margin: 0 0 var(--espaco-sm); }

/* indicadores (resumo) fora de um cartão: em linha, cada um num bloco branco com borda; a linha de observação ocupa a largura toda */
.resumo { display: flex; flex-wrap: wrap; margin: var(--espaco-sm) 0 var(--espaco-lg); }
.resumo strong { display: block; }
.resumo div { background: var(--cor-superficie); border: 1px solid var(--cor-borda); flex: 1 1 180px; }
.cartao .resumo div, .chapa .resumo div { background: var(--cor-fundo); border: 0; flex: 0 1 auto; }
.resumo div.meta, .cartao .resumo div.meta { flex: 1 1 100%; background: none; border: 0; padding: 0; min-width: 0; }
/* item de lista que é botão (faturas, parceiros, planos recentes): alinhado à esquerda, com a segunda linha em destaque menor */
button.item-chapa { width: 100%; text-align: left; font: 16px/1.6 var(--fonte); cursor: pointer; }
button.item-chapa .meta { display: block; margin-top: var(--espaco-xs); }
button.item-chapa .selo { vertical-align: middle; }

/* link com cara de botão secundário (ex.: "Etiqueta e folha" na lista de peças do pedido) */
a.botao-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--espaco-md); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); background: var(--cor-superficie); color: var(--cor-texto); font-weight: 600; text-decoration: none; }
a.botao-link:hover { background: var(--cor-fundo); }