/* D33: identidade "Planta" (docs/marca). Os nomes são os legados: --azul é o vermelho Carimbo, --gelo é a
   Água-régua e --grafite é o Nanquim. Toda cor sai destas variáveis. */
:root {
    --grafite: #242422;
    --grafite-2: #3A3934;
    --azul: #D7261E;
    --azul-escuro: #A31812;
    --gelo: #A8D5C9;
    --gelo-claro: #DCEEE8;
    --fundo: #F3EFE4;
    --superficie: #FFFDF8;
    --linha: #D6CFBB;
    --linha-suave: #E7E1D0;
    --texto: #3D3B35;
    --texto-forte: #242422;
    --apagado: #6B675B;
    --sucesso: #1E7A46;
    --alerta: #9C6500;
    --perigo: #A3155A;
    --fase-orcamento: #5B4FC4;
    --fase-instalacao: #0B6E8A;
    --fase-conferencia: #242422;
    --fase-fim: #77736A;
    /* Derivados para fundos de aviso; o texto sobre eles usa a cor escura do mesmo estado. */
    --sucesso-claro: #E0EFE3;
    --sucesso-escuro: #155A33;
    --alerta-claro: #F7EBD3;
    --alerta-escuro: #6E4700;
    --perigo-claro: #F6E1EA;
    --perigo-escuro: #7E1045;
    --parede-negativa: #EFEADB;
    --texto-da-barra: #D6D0BF;
    --texto-da-barra-apagado: #B9B3A2;
    --titulo: "Chivo Mono", ui-monospace, monospace;
    --raio: 0;
    --raio-cartao: 0;
    --sombra: none;
}

html, body { min-height: 100%; }
body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: "Chivo", system-ui, sans-serif;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .numero strong {
    font-family: var(--titulo);
    font-weight: 800;
    color: var(--texto-forte);
    letter-spacing: -.06em;
}
:focus-visible { outline: 2px solid var(--grafite); outline-offset: 2px; }
a { color: var(--azul); }
a:hover { color: var(--azul-escuro); }

/* Barra do topo */
.barra {
    display: flex; align-items: center; gap: 32px;
    padding: 0 24px; height: 60px;
    background: var(--grafite); color: #fff;
    position: sticky; top: 0; z-index: 100;
}
.marca { display: flex; align-items: center; color: var(--parede-negativa); text-decoration: none; flex: none; }
.marca:hover { color: var(--parede-negativa); }
.logotipo { display: block; height: 24px; width: auto; flex: none; }
.simbolo { display: block; width: 32px; height: 32px; flex: none; }
.navegacao { display: flex; gap: 2px; flex: 1; align-self: stretch; }
.navegacao a {
    display: flex; align-items: center;
    color: var(--texto-da-barra); text-decoration: none; font-weight: 500; font-size: 14px;
    padding: 0 11px; white-space: nowrap;
}
.navegacao a:hover { color: #fff; background: var(--grafite-2); }
.navegacao a.ativo { color: #fff; font-weight: 700; box-shadow: inset 0 -3px 0 var(--azul); }
.usuario-logado { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.usuario-logado .nome { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.usuario-logado > * { flex: none; }
.usuario-logado .nome { flex: 0 1 auto; }
.link-discreto { color: var(--texto-da-barra-apagado); text-decoration: none; font-weight: 600; }
.link-discreto:hover { color: #fff; }

.conteudo { max-width: 1180px; margin: 0 auto; padding: 32px 28px 48px; }
.rodape-do-painel { text-align: center; padding: 0 0 28px; font-size: 13px; }
.rodape-do-painel a { color: var(--apagado); text-decoration: none; }

/* Cabeçalho de cada tela */
.cabecalho-da-tela { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.cabecalho-da-tela h1 { font-size: 34px; font-weight: 800; margin: 0; line-height: 1.1; }
.kicker { margin: 0 0 6px; font-family: var(--titulo); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); }
.apoio { color: var(--apagado); margin: 6px 0 0; max-width: 680px; }
.aviso {
    background: var(--alerta-claro); border: 1px solid var(--alerta); color: var(--alerta-escuro);
    border-radius: 0; padding: 12px 16px; font-weight: 600;
}

/* Cartões e grades */
.cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 0; padding: 24px; }
.cartao h2 { font-size: 18px; margin: 0 0 16px; }
.cartao-tabela { padding: 8px 16px; }
.cartao-em-destaque { border: 1.5px solid var(--grafite); }
.acoes-do-cartao { display: flex; justify-content: flex-end; border-top: 1px solid var(--linha-suave); padding-top: 16px; margin-top: 8px; }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: start; }

.grade-de-numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.numero {
    background: var(--superficie); border: 1px solid var(--linha); border-radius: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 2px;
    border-top: 3px solid var(--azul);
}
.numero .rotulo { font-family: var(--titulo); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); }
.numero strong { font-size: 34px; font-weight: 800; line-height: 1.15; }
.numero small { color: var(--apagado); font-size: 13px; }
.numero-alerta { border-top-color: var(--alerta); }
.numero-alerta small { color: var(--alerta); font-weight: 600; }

.numero { color: var(--texto); text-decoration: none; }
a.numero:hover { border-color: var(--grafite); color: var(--texto); }

/* Listas com filtro */
.filtros-da-lista { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtros-da-lista .busca { flex: 1 1 280px; }
.filtros-da-lista .form-select { flex: 0 1 210px; }
.filtro-marcado, .campo-marcado label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.filtro-marcado input, .campo-marcado input { width: 18px; height: 18px; accent-color: var(--azul); }
.linha-de-campos > .campo-marcado { justify-content: flex-end; align-items: flex-start; padding-bottom: 10px; }
.alternador { display: inline-flex; background: var(--fundo); border: 1px solid var(--linha-suave); border-radius: 0; padding: 3px; }
.alternador button { border: 0; background: transparent; border-radius: 0; padding: 6px 12px; font-weight: 600; font-size: 13px; color: var(--apagado); }
.alternador button.ativo { background: var(--superficie); color: var(--texto-forte); }
.rolagem-da-tabela { overflow-x: auto; }
.vazio-da-lista, .vazio { color: var(--apagado); }
.vazio-da-lista { padding: 12px 0; margin: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: var(--gelo-claro); }
.numero-da-tabela { text-align: right; }
.texto-alerta { color: var(--perigo); font-weight: 700; }

.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 16px 0 0; padding: 0; }
.pagination .page-link { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--linha); border-radius: 0 !important; background: var(--superficie); color: var(--texto); font-weight: 600; font-size: 14px; margin: 0 !important; }
.pagination .page-link:hover { background: var(--fundo); color: var(--texto-forte); }
.pagination .page-item.active .page-link { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.pagination .page-item.disabled .page-link { color: #A9A391; background: transparent; border-color: transparent; }

/* Ficha do cliente */
.voltar { display: inline-block; margin-bottom: 12px; font-weight: 600; font-size: 14px; text-decoration: none; }
.acoes-do-cabecalho { display: flex; gap: 8px; flex-wrap: wrap; }
.dados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; }
.dados dt { font-family: var(--titulo); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); }
.dados dd { margin: 2px 0 0; font-weight: 600; color: var(--texto-forte); overflow-wrap: anywhere; }
.observacoes { margin: 14px 0 0; padding: 10px 14px; background: var(--fundo); border-radius: 0; white-space: pre-line; color: var(--texto); }
.cabecalho-da-secao { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 12px; }
.cabecalho-da-secao h2 { font-size: 22px; margin: 0; }
.grade-de-unidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cabecalho-do-cartao { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.unidade h3 { font-size: 17px; font-weight: 800; margin: 0; }
.unidade h4 { font-family: var(--titulo); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); margin: 18px 0 6px; }
.endereco { color: var(--apagado); margin: 4px 0 0; font-size: 14px; }
.lista-de-ambientes { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-de-ambientes li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--linha-suave); }
.lista-de-ambientes small { color: var(--apagado); }
.link-de-acao { border: 0; background: none; padding: 0; color: var(--azul-escuro); font-weight: 600; font-size: 13px; }
.link-de-acao.perigo { color: var(--perigo); }
.link-de-acao + .link-de-acao { margin-left: 12px; }
.lista-de-marcas { margin: 12px 0; }
.lista-de-marcas small { color: var(--apagado); }
.nova-marca { display: flex; gap: 8px; }

/* Serviços (§11, D14) */
.abas-de-fase { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.abas-de-fase button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--linha); background: var(--superficie); border-radius: 0; padding: 9px 12px; font-weight: 600; font-size: 13px; color: var(--texto); }
.abas-de-fase button:hover { border-color: var(--grafite); }
.abas-de-fase button.ativo { background: var(--grafite); border-color: var(--grafite); color: #fff; }
.abas-de-fase .ponto, .chip-de-status .ponto { width: 8px; height: 8px; border-radius: 0; background: var(--cor); flex: none; }
.chip-de-status { display: inline-flex; align-items: center; gap: 7px; padding: 0; border-radius: 0; font-size: 13px; font-weight: 600; white-space: nowrap; background: none; color: var(--cor); }
.dados-em-coluna { grid-template-columns: 1fr; gap: 12px; }
.dados-em-coluna dd small { font-weight: 500; color: var(--apagado); }
.linha-do-tempo { list-style: none; margin: 0; padding: 0; }
.linha-do-tempo > li { display: flex; gap: 12px; padding: 0 0 16px; position: relative; }
.linha-do-tempo > li:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 0; width: 2px; background: var(--linha-suave); }
.linha-do-tempo .ponto { width: 10px; height: 10px; border-radius: 0; background: var(--cor); flex: none; margin-top: 5px; }
.linha-do-tempo small { color: var(--apagado); }
.nota { margin: 6px 0 0; padding: 8px 12px; background: var(--fundo); border-radius: 0; font-size: 14px; white-space: pre-line; }
.sugestoes { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--linha); border-radius: 0; max-height: 240px; overflow-y: auto; }
.sugestoes button { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 0; }
.sugestoes button:hover { background: var(--fundo); }
.sugestoes small { color: var(--apagado); }
.escolhido { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 0; background: var(--fundo); }
.escolhas.uma-coluna { grid-template-columns: 1fr; }
.ciclo li a { display: flex; align-items: center; gap: 12px; flex: 1; color: inherit; text-decoration: none; }
.ciclo li a:hover .nome-do-status { color: var(--azul-escuro); }

/* Cálculo (§7, D15) */
.abas-da-pagina { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin: -8px 0 20px; }
.abas-da-pagina a { white-space: nowrap; padding: 10px 16px; font-weight: 600; color: var(--apagado); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas-da-pagina a.ativo { color: var(--texto-forte); border-bottom: 3px solid var(--azul); }
.simulador { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.formulario-do-simulador h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); margin: 22px 0 8px; }
.formulario-do-simulador .linha-de-campos { margin-top: 10px; }
.formulario-do-simulador .item-repetido { margin-top: 6px; }
.formulario-do-simulador .link-de-acao { margin-top: 8px; }
.com-acao { flex-direction: row !important; align-items: center; gap: 8px; }
.com-acao .link-de-acao { margin: 0; font-size: 18px; }
.acao-da-parte { justify-content: flex-end; padding-bottom: 10px; }
.resultado-do-simulador { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
.destaque-da-carga .rotulo { font-family: var(--titulo); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); }
.destaque-da-carga strong { display: block; font-family: var(--titulo); letter-spacing: -.07em; font-size: 52px; font-weight: 800; color: var(--texto-forte); line-height: 1.1; }
.destaque-da-carga strong small { font-size: 18px; color: var(--apagado); }
.aviso-erro { background: var(--perigo-claro); border-color: var(--perigo); color: var(--perigo-escuro); margin: 0; }
.memoria td { font-size: 14px; }
.memoria .grupo { display: block; font-family: var(--titulo); font-weight: 600; color: var(--apagado); font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.memoria tr.total td { font-weight: 800; color: var(--texto-forte); border-top: 1px solid var(--linha); }
.opcoes-de-maquina { list-style: none; margin: 0; padding: 0; }
.opcoes-de-maquina li { padding: 10px 0; border-bottom: 1px solid var(--linha-suave); }
.opcoes-de-maquina li:last-child { border-bottom: 0; }
.opcoes-de-maquina .cabeca { display: flex; align-items: center; gap: 8px; }
.opcoes-de-maquina small { color: var(--apagado); }
.opcoes-de-maquina .justificativa { margin-top: 2px; }
.opcoes-de-maquina .fora-da-margem b { color: var(--perigo); }
fieldset.parametros { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
fieldset.parametros .duas-colunas { margin-top: 0; }
.tabela-de-parametros input { max-width: 140px; padding: 6px 10px; }
.tabela-de-parametros td { padding: 6px 10px; }
.tabela-de-parametros + .tabela-de-parametros { margin-top: 12px; }
.ajuda { color: var(--apagado); font-size: 12px; margin-top: 4px; }
.versao-vigente { margin: 0 0 16px; }
.barra-de-gravacao { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 10px; align-items: center; margin: 20px 0; padding: 12px 16px; background: var(--grafite); border-radius: 0; }
.barra-de-gravacao .estado { color: var(--parede-negativa); font-weight: 600; white-space: nowrap; font-size: 14px; }
.barra-de-gravacao input { flex: 1; }
.mudancas { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }

/* Vistoria na ficha do serviço (D16) */
.vistoria { margin-top: 8px; }
.ambiente-da-vistoria + .ambiente-da-vistoria { margin-top: 12px; }
.ambiente-da-vistoria h3 { font-size: 17px; font-weight: 800; margin: 0; }
.carga-do-ambiente { text-align: right; }
.carga-do-ambiente strong { display: block; font-family: var(--titulo); letter-spacing: -.06em; font-size: 22px; font-weight: 800; color: var(--texto-forte); }
.carga-do-ambiente small { color: var(--apagado); }
.fator { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 0; background: var(--fundo); }
.fator.aprovacao-2 { background: var(--alerta-claro); border: 1px solid var(--alerta); }
.fator.aprovacao-4 { background: var(--perigo-claro); }
.fator small { color: var(--apagado); margin-top: 2px; }
.ambiente-da-vistoria details { margin-top: 12px; }
.ambiente-da-vistoria summary { cursor: pointer; font-weight: 600; color: var(--azul-escuro); font-size: 14px; }
.detalhes-do-ambiente { margin-top: 12px; }
.levantamento dd { font-weight: 500; }
.aviso-de-acao { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px; text-decoration: none; }
.aviso-de-acao:hover { color: var(--alerta-escuro); border-color: var(--alerta); }

/* Fotos e pendências da vistoria (RN05, RN06, D17) */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.fotos a { display: block; aspect-ratio: 4 / 3; border-radius: 0; overflow: hidden; background: var(--fundo); }
.fotos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.fotos a:hover img { transform: scale(1.04); }
.pendencias { margin: 12px 0 0; padding: 8px 12px; border-radius: 0; background: var(--alerta-claro); color: var(--alerta-escuro); font-size: 14px; font-weight: 600; }
.lista-de-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lista-de-campos .escolha { flex-direction: row; align-items: flex-start; gap: 10px; }
.lista-de-campos .escolha input { position: static; opacity: 1; pointer-events: auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--azul); }

/* Importação de planilha (RN04) */
.passos-da-importacao { margin: 16px 0; padding-left: 20px; line-height: 1.8; }
.resumo-da-importacao { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.previa-da-importacao { max-height: 46vh; overflow-y: auto; border: 1px solid var(--linha-suave); border-radius: 0; margin-top: 8px; }
.previa-da-importacao .tabela th { position: sticky; top: 0; background: var(--superficie); }
.erro-da-linha { display: block; color: var(--perigo); font-size: 13px; margin-top: 4px; }
.tabela tr.acao-3 td { color: var(--apagado); }

/* Ciclo de status (§11) */
.ciclo { list-style: none; margin: 0; padding: 0; }
.ciclo li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linha-suave); }
.ciclo li:last-child { border-bottom: 0; }
.ciclo .ponto { width: 10px; height: 10px; border-radius: 0; background: var(--cor); flex: none; }
.ciclo .nome-do-status { flex: 1; }
.ciclo b { font-family: var(--titulo); letter-spacing: -.06em; font-weight: 800; font-size: 16px; }
.ciclo b.zero { color: #A9A391; font-weight: 600; }
.fase-1 { --cor: var(--fase-orcamento); }
.fase-2 { --cor: var(--fase-instalacao); }
.fase-3 { --cor: var(--fase-conferencia); }
.fase-4 { --cor: var(--fase-fim); }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--linha-suave); }
.lista-simples li:last-child { border-bottom: 0; }

/* Tabela */
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
.tabela th { font-family: var(--titulo); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--apagado); padding: 12px 10px; border-bottom: 1.5px solid var(--grafite); }
.tabela td { padding: 12px 10px; border-bottom: 1px solid var(--linha-suave); vertical-align: middle; font-size: 14px; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td small { color: var(--apagado); }
.tabela tr.inativo td { opacity: .55; }
.tabela .sem-quebra { white-space: nowrap; }
.acoes-da-linha { text-align: right; white-space: nowrap; }
.acoes-da-linha > * + * { margin-left: 6px; }

/* Chips */
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 0; font-family: var(--titulo); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .02em;
    background: var(--linha-suave); color: var(--texto);
}
.chip-escuro { background: var(--grafite-2); color: var(--texto-da-barra); }
.chip-azul { background: var(--gelo-claro); color: var(--azul-escuro); }
.chip-sucesso { background: var(--sucesso-claro); color: var(--sucesso-escuro); }
.chip-alerta { background: var(--perigo-claro); color: var(--perigo-escuro); }
.chip-perfil-1 { background: var(--gelo-claro); color: var(--azul-escuro); }
.chip-perfil-2 { background: #E6E3F6; color: var(--fase-orcamento); }
.chip-perfil-3 { background: #DCECF0; color: var(--fase-instalacao); }
.chip-perfil-4 { background: var(--grafite); color: var(--parede-negativa); }

/* Botões */
.botao-primario, .botao-secundario, .botao-perigo {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 0; font-weight: 600; font-size: 14px; padding: 9px 16px;
    text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s;
}
.botao-primario { background: var(--azul); color: #fff; }
.botao-primario:hover, .botao-primario:focus { background: var(--azul-escuro); color: #fff; }
.botao-primario:disabled { opacity: .6; cursor: default; }
.botao-primario:active { background: var(--azul-escuro); }
.botao-primario.pequeno, .botao-secundario.pequeno, .botao-perigo.pequeno { padding: 5px 10px; font-size: 13px; border-radius: 0; }
.botao-secundario { background: var(--superficie); color: var(--texto); border-color: var(--linha); }
.botao-secundario:hover { background: var(--fundo); color: var(--texto); border-color: var(--grafite); }
.botao-perigo { background: var(--superficie); color: var(--perigo); border-color: var(--perigo); }
.botao-perigo:hover { background: var(--perigo-claro); color: var(--perigo); }

/* Formulários */
.form-label { font-weight: 600; font-size: 13px; color: var(--texto-forte); margin-bottom: 4px; }
.form-label small { color: var(--apagado); font-weight: 500; }
.form-control, .form-select { border-radius: 0; border-color: var(--linha); padding: 9px 12px; font-size: 15px; }
.form-control:focus, .form-select:focus { border-color: var(--grafite); box-shadow: none; outline: 2px solid var(--grafite); outline-offset: 2px; }
.campos { display: flex; flex-direction: column; gap: 4px; margin: 16px 0; }
.campos .form-label { margin-top: 10px; }
.campos .alternador { align-self: flex-start; }
.linha-de-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.linha-de-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linha-de-campos.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.linha-de-campos .dobro { grid-column: span 2; }
.linha-de-campos > div { display: flex; flex-direction: column; min-width: 0; }
.apoio.margem { margin: 8px 0 0; font-weight: 600; }
.escolhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.escolha {
    display: flex; flex-direction: column; gap: 2px; cursor: pointer;
    border: 1px solid var(--linha); border-radius: 0; padding: 10px 12px; background: var(--superficie);
}
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha small { color: var(--apagado); font-size: 12px; line-height: 1.35; }
.escolha.escolhida { border-color: var(--grafite); box-shadow: inset 0 0 0 1px var(--grafite); background: var(--gelo-claro); }

/* Janelas */
.janela { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 16px; }
.janela-fundo { position: absolute; inset: 0; background: rgba(36, 36, 34, .55); }
.janela-conteudo {
    position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--superficie); border-radius: 0; border: 1.5px solid var(--grafite); padding: 28px;
}
.janela-conteudo.estreita { max-width: 460px; }
.janela-conteudo.larga { max-width: 820px; }
.janela-conteudo h2 { font-size: 20px; font-weight: 800; margin: 0; }
.janela-acoes { display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--linha-suave); padding-top: 16px; margin-top: 16px; }
.espaco { flex: 1; }
.senha-provisoria { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 14px 18px; background: var(--gelo-claro); border-radius: 0; }
.senha-provisoria code { flex: 1; font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--texto-forte); }

/* Confirmação e avisos do smoke (wwwroot/lib não é editado). O smoke anima o "top" do cartão em linha;
   o !important segura o cartão no centro. */
.smk-confirm-back { background: rgba(36, 36, 34, .55); }
.smk-confirm-back .smk-confirm {
    top: 50% !important; transform: translateY(-50%);
    width: calc(100% - 32px); max-width: 440px; padding: 28px;
    border: 1.5px solid var(--grafite); border-radius: 0; background: var(--superficie); color: var(--texto);
}
.smk-confirm .card-body { padding: 0 0 20px; font-size: 16px; line-height: 1.5; color: var(--texto-forte); }
.smk-confirm .text-end { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--linha-suave); padding-top: 16px; }
.smk-confirm .btn { border-radius: 0; font-weight: 600; font-size: 14px; padding: 9px 16px; }
.smk-confirm .smk-cancel { background: var(--superficie); border: 1px solid var(--linha); color: var(--texto); }
.smk-confirm .smk-accept { background: var(--azul); border: 0; color: #fff; }
.smk-confirm .smk-accept:hover { background: var(--azul-escuro); color: #fff; }
.smk-alert-content .alert {
    border: 0; border-left: 5px solid var(--apagado); border-radius: 0;
    background: var(--superficie); color: var(--texto); font-weight: 600; outline: 1px solid var(--linha);
}
.smk-alert-content .alert-success { border-left-color: var(--sucesso); }
.smk-alert-content .alert-danger { border-left-color: var(--perigo); }
.smk-alert-content .alert-warning { border-left-color: var(--alerta); }
.smk-alert-content .alert-info { border-left-color: var(--azul); }

/* Login */
.fundo-escuro {
    background:
        linear-gradient(rgba(239, 234, 219, .05) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(239, 234, 219, .05) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--grafite);
}
.tela-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 28px; }
.cartao-login { width: 100%; max-width: 400px; background: var(--superficie); border-radius: 0; padding: 36px 32px; }
.cartao-login h1 { font-size: 28px; margin: 32px 0 0; }
.cartao-login .apoio { margin-bottom: 24px; }
.marca-grande { color: var(--grafite); }
.marca-grande .logotipo { height: 32px; }
.rodape-login a { display: inline-flex; align-items: center; gap: 10px; color: var(--texto-da-barra-apagado); text-decoration: none; font-size: 13px; }

/* §8: o orçamento do serviço — itens à esquerda, totais e margem à direita. */
.grade-do-orcamento { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; margin-top: 20px; }
.grade-do-orcamento > div, .grade-do-orcamento > aside { display: flex; flex-direction: column; gap: 20px; }
.grade-do-orcamento aside { position: sticky; top: 20px; }
.grupo-do-orcamento .cabecalho-do-cartao strong { font-size: 17px; color: var(--texto-forte); }
.itens-do-orcamento td { vertical-align: top; }
.itens-do-orcamento td:first-child { width: 100%; min-width: 240px; }
.itens-do-orcamento td:first-child .form-control { width: 100%; }
.itens-do-orcamento td small { color: var(--apagado); margin-top: 4px; }
.itens-do-orcamento .form-control { min-width: 0; }
.form-control.numero { width: 104px; text-align: right; display: inline-block; }
.com-unidade .form-control.numero { width: 84px; }
.form-control.numero.pequeno { width: 72px; padding: 4px 8px; }
.com-unidade { display: inline-flex; align-items: center; gap: 6px; }
.botao-icone { border: 0; background: transparent; color: var(--apagado); font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 0; cursor: pointer; }
.botao-icone:hover { background: var(--perigo-claro); color: var(--perigo); }
.grupo-do-orcamento > .botao-secundario { margin-top: 12px; }
.totais { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.totais > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.totais dt { font-weight: 500; color: var(--texto); }
.totais dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totais .subtotal { border-top: 1px solid var(--linha-suave); padding-top: 8px; }
.totais .total { border-top: 1px solid var(--linha); padding-top: 10px; font-weight: 800; font-size: 18px; color: var(--texto-forte); }
.totais .total dt { font-weight: 800; color: var(--texto-forte); }
.interno-do-orcamento { background: var(--fundo); box-shadow: none; }
.interno-do-orcamento .totais .total { font-size: 15px; }
.interno-do-orcamento.margem-baixa { border-color: var(--perigo); background: var(--perigo-claro); }
.interno-do-orcamento.margem-baixa .total dd, .interno-do-orcamento.margem-baixa > .apoio { color: var(--perigo); font-weight: 700; }
.vazio-do-orcamento, .resumo-do-orcamento { margin-top: 20px; }
.resumo-do-orcamento h2 { margin-bottom: 4px; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

/* D25: a instalação na ficha do serviço. */
.duas-colunas.sem-margem { margin-top: 0; }
.instalacao { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.instalacao .duas-colunas { margin-top: 0; }
.checklist { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--apagado); }
.checklist li.feito { color: var(--texto); }
.checklist .marca { flex: none; width: 20px; height: 20px; border-radius: 0; border: 1.5px solid var(--linha); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; }
.checklist li.feito .marca { background: var(--sucesso); border-color: var(--sucesso); }
tr.divergente td { background: var(--alerta-claro); }
tr.divergente td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.fotos-por-categoria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.fotos-por-categoria > div > b { display: block; font-size: 13px; margin-bottom: 6px; }
.sem-foto { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border: 1.5px dashed var(--linha); border-radius: 0; color: var(--apagado); font-size: 12px; }
.assinatura-do-cliente { margin-top: 18px; border-top: 1px solid var(--linha-suave); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.assinatura-do-cliente img { width: 320px; max-width: 100%; height: 160px; object-fit: contain; background: #fff; border: 1px solid var(--linha-suave); border-radius: 0; }

/* RN21 e D30: a auditoria. */
.tabela-de-auditoria tbody + tbody { border-top: 0; }
.tabela-de-auditoria tr.aberto td { background: var(--fundo); }
.tabela-de-auditoria .apagado, .detalhe-da-auditoria .apagado { color: var(--apagado); }
.acao-de-auditoria { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 0; background: var(--linha-suave); color: var(--texto); }
.acao-de-auditoria.acao-1 { background: var(--sucesso-claro); color: var(--sucesso-escuro); }
.acao-de-auditoria.acao-2 { background: var(--gelo-claro); color: var(--texto-forte); }
.acao-de-auditoria.acao-3 { background: var(--perigo-claro); color: var(--perigo-escuro); }
.detalhe-da-auditoria > td { background: var(--fundo); padding: 4px 16px 16px !important; }
.campos-auditados { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 13px; }
.campos-auditados th { font-family: var(--titulo); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--apagado); text-align: left; padding: 6px 8px; }
.campos-auditados td { padding: 6px 8px; border-top: 1px solid var(--linha-suave); vertical-align: top; }
.valor-auditado { max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--titulo); font-size: 12px; }
.valor-auditado.antes { color: var(--apagado); text-decoration: line-through; text-decoration-color: var(--linha); }

/* §12 e D29: os indicadores. */
.periodo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.atalhos-de-periodo { display: inline-flex; background: var(--superficie, #fff); border: 1px solid var(--linha); border-radius: 0; padding: 3px; gap: 2px; margin-right: auto; }
.atalhos-de-periodo button { border: 0; background: transparent; padding: 6px 12px; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--apagado); }
.atalhos-de-periodo button.ativo { background: var(--grafite); color: #fff; }
.campo-de-data { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: var(--apagado); margin: 0; }
.campo-de-data .form-control { width: 160px; }
.titulo-da-secao { font-family: var(--titulo); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); margin: 28px 0 12px; }
.numero.fase-1, .numero.fase-2, .numero.fase-3 { border-top-color: var(--cor); }
.indicadores-em-linha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.indicadores-em-linha.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.indicadores-em-linha > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.indicadores-em-linha .rotulo { font-family: var(--titulo); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); }
.indicadores-em-linha strong { font-family: var(--titulo); letter-spacing: -.06em; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--texto-forte); overflow-wrap: anywhere; }
.indicadores-em-linha strong.destaque { color: var(--azul-escuro); }
.indicadores-em-linha strong.alerta { color: var(--alerta); }
.indicadores-em-linha small { color: var(--apagado); font-size: 13px; }
.barras { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.barra-de-valor { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; font-size: 13px; color: var(--apagado); }
.barra-de-valor .trilho { height: 10px; background: var(--linha-suave); border-radius: 0; overflow: hidden; }
.barra-de-valor .trilho i { display: block; height: 100%; background: var(--fase-fim); border-radius: 0; }
.barra-de-valor.vendido .trilho i { background: var(--azul); }
td.divergente { color: var(--alerta); font-weight: 700; }
tr.linha-de-total td { font-weight: 700; border-top: 2px solid var(--linha); }
.cartao-solto { margin-top: 20px; }
.coluna-de-cartoes { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* RN19 e D27: a conferência do supervisor. */
.conferencia { border-left: 4px solid var(--fase-conferencia); }
.divergencias { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.divergencias li { background: var(--alerta-claro); border-radius: 0; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.divergencias small { color: var(--alerta-escuro); width: 100%; }
.acoes-da-conferencia { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.conferencias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.conferencias li { border-left: 3px solid var(--sucesso); padding: 2px 0 2px 12px; }
.conferencias li.resultado-2 { border-left-color: var(--alerta); }
.conferencias li.resultado-3 { border-left-color: var(--perigo); }
.conferencias small { color: var(--apagado); }
.conferencias .nota { margin: 4px 0 0; }

/* D4: a página do orçamento que o cliente abre pelo link, pensada primeiro para o celular. */
.pagina-do-cliente { background: var(--fundo); color: var(--texto); font-family: "Chivo", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pagina-do-cliente .miolo { max-width: 760px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.topo-do-cliente { background: var(--grafite); color: #fff; padding: 18px 0; }
.topo-do-cliente .miolo { display: flex; align-items: center; gap: 12px; }
.topo-do-cliente .simbolo { width: 34px; height: 34px; color: var(--parede-negativa); flex: none; }
.topo-do-cliente strong { display: block; font-size: 17px; }
.topo-do-cliente small { display: block; color: var(--texto-da-barra-apagado); font-size: 13px; }
.proposta { padding-top: 24px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
.proposta h1 { font-family: var(--titulo); letter-spacing: -.07em; font-weight: 800; font-size: 28px; margin: 0; color: var(--texto-forte); }
.proposta h2 { font-size: 16px; font-weight: 700; margin: 0; }
.cabecalho-da-proposta .apoio { margin: 4px 0 0; }
.proposta .cartao { padding: 18px; }
.proposta .rotulo { font-family: var(--titulo); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado); margin: 0 0 4px; }
.proposta .cartao p:last-child { margin-bottom: 0; }
.faixa { background: var(--alerta-claro); border: 1px solid var(--alerta); color: var(--alerta-escuro); border-radius: 0; padding: 12px 14px; }
.faixa-sucesso { background: var(--sucesso-claro); border-color: var(--sucesso); color: var(--sucesso-escuro); }
.dados-da-proposta { display: grid; gap: 16px; }
.dados-da-proposta b { display: block; color: var(--texto-forte); }
.dados-da-proposta span { color: var(--apagado); }
.ambientes-da-proposta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ambientes-da-proposta li { display: flex; flex-direction: column; }
.grupo-da-proposta header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.grupo-da-proposta ul { list-style: none; margin: 0; padding: 0; }
.grupo-da-proposta li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha-suave); }
.grupo-da-proposta li .descricao { font-weight: 600; color: var(--texto-forte); }
.grupo-da-proposta li small { display: block; color: var(--apagado); font-size: 13px; }
.grupo-da-proposta li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.totais-da-proposta { background: var(--gelo-claro); border-color: var(--gelo); display: flex; flex-direction: column; gap: 6px; }
.totais-da-proposta div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.totais-da-proposta .total { border-top: 1px solid var(--gelo); padding-top: 10px; margin-top: 4px; font-size: 20px; font-weight: 800; color: var(--texto-forte); }
.totais-da-proposta .total span:last-child { font-family: var(--titulo); letter-spacing: -.06em; }
.baixar-pdf { margin: 0; text-align: center; }
.resposta-da-proposta { display: flex; flex-direction: column; gap: 8px; }
.resposta-da-proposta .apoio { margin: 0; }
.resposta-da-proposta .pequeno { font-size: 12px; }
.botoes-da-resposta { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.botoes-da-resposta button { min-height: 48px; padding-left: 20px; padding-right: 20px; }
.erro-da-resposta { background: var(--perigo-claro); border: 1px solid var(--perigo); color: var(--perigo-escuro); border-radius: 0; padding: 10px 12px; margin: 0; }
.rodape-do-cliente { color: var(--apagado); font-size: 12px; padding-bottom: 32px; text-align: center; }
/* D34: as páginas públicas (privacidade, termos, exclusão de conta e suporte). */
.topo-do-cliente .marca { color: var(--parede-negativa); }
.abas-publicas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linha); margin-top: 8px; }
.abas-publicas a { white-space: nowrap; padding: 12px 12px 10px; font-weight: 600; font-size: 14px; color: var(--apagado); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.abas-publicas a:hover { color: var(--texto-forte); }
.abas-publicas a.ativo { color: var(--texto-forte); border-bottom-color: var(--azul); }
.pagina-publica { padding-top: 28px; padding-bottom: 28px; line-height: 1.6; }
.pagina-publica h1 { font-size: 30px; line-height: 1.15; margin: 0 0 10px; }
.pagina-publica > .apoio { max-width: none; font-size: 16px; }
.pagina-publica section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linha); }
.pagina-publica h2 { font-size: 18px; margin: 0 0 10px; }
.pagina-publica h3 { font-family: "Chivo", system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0; margin: 16px 0 6px; }
.pagina-publica ul, .pagina-publica ol { padding-left: 20px; margin: 0 0 10px; }
.pagina-publica li + li { margin-top: 4px; }
.pagina-publica a { color: var(--azul-escuro); font-weight: 600; }
.pagina-publica .dados > div { min-width: 0; }
.links-legais { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; font-size: 13px; }
.links-legais a { color: var(--texto-da-barra-apagado); text-decoration: none; }
.links-legais a:hover { color: #fff; }
.rodape-do-cliente .links-legais a { color: var(--apagado); }
.rodape-do-cliente .links-legais a:hover { color: var(--texto-forte); }

@media (max-width: 520px) {
    .botoes-da-resposta { flex-direction: column-reverse; }
    .botoes-da-resposta button { width: 100%; }
}

@media (max-width: 1200px) {
    .grade-do-orcamento { grid-template-columns: 1fr; }
    .grade-do-orcamento aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* Com os dez itens do menu do Administrador, o topo passa a ter a navegação numa linha própria abaixo de 1440 px. */
@media (max-width: 1439px) {
    .barra { height: auto; flex-wrap: wrap; padding: 12px 24px 0; gap: 8px 16px; }
    .barra .usuario-logado { margin-left: auto; }
    .navegacao { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; min-height: 44px; }
}

@media (max-width: 900px) {
    .abas-da-pagina { overflow-x: auto; scrollbar-width: none; }
    .abas-da-pagina a { margin-bottom: 0; }
    .indicadores-em-linha, .indicadores-em-linha.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .campo-de-data { flex: 1 1 140px; }
    .campo-de-data .form-control { width: 100%; }
    .atalhos-de-periodo { margin-right: 0; width: 100%; overflow-x: auto; }
    .barra { padding: 10px 16px 0; }
    .conteudo { padding: 24px 16px 40px; }
    .grade-de-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .duas-colunas, .grade-de-unidades, .simulador, .grade-do-orcamento, .grade-do-orcamento aside { grid-template-columns: minmax(0, 1fr); }
    .resultado-do-simulador { position: static; }
    .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cabecalho-da-tela { flex-direction: column; align-items: flex-start; }
    .cartao-tabela { overflow-x: auto; }
}
@media (max-width: 520px) {
    .grade-de-numeros, .escolhas, .linha-de-campos, .linha-de-campos.tres, .linha-de-campos.quatro { grid-template-columns: 1fr; }
    .linha-de-campos .dobro { grid-column: auto; }
}