/* ==========================================================================
   SARAIVA CRM — Design System (seção 3 do Documento Técnico Mestre)
   Um único arquivo, carregado por TODA tela do sistema.
   Visual plano: sem degradê, sem sombra pesada. Paleta por status.
   Regra de ouro: ícone NUNCA aparece sozinho — sempre com texto ao lado.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Do documento, literalmente: */
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --primary: #0284c7;
  --primary-bg: #e0f2fe;
  --success: #16a34a;
  --success-bg: #dcfce7;
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --danger: #dc2626;
  --danger-bg: #fee2e2;

  /* Extras (não mudam os de cima): textos mais escuros para ler bem sobre os fundos claros */
  --primary-texto: #075985;
  --success-texto: #166534;
  --warning-texto: #92400e;
  --danger-texto: #991b1b;
  --cabecalho-tabela: #f1f5f9;
  --sobre-primario: #ffffff;
  --fundo-janela: rgba(15, 23, 42, .5);

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --raio-cartao: 12px;
  --raio-campo: 8px;
  --raio-pilula: 9999px;
  --altura-toque: 44px;
}

/* Tema escuro: escolhido pelo aparelho, ou pelo botão "Tema escuro" (data-tema) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #0b1220; --card-bg: #131c2e; --text: #f1f5f9; --text-muted: #94a3b8; --border: #263247;
    --primary: #38bdf8; --primary-bg: #0c3a55; --success: #4ade80; --success-bg: #123524;
    --warning: #fbbf24; --warning-bg: #3d2c0a; --danger: #f87171; --danger-bg: #421616;
    --primary-texto: #7dd3fc; --success-texto: #86efac; --warning-texto: #fcd34d; --danger-texto: #fca5a5;
    --cabecalho-tabela: #1a2438; --sobre-primario: #04121c; --fundo-janela: rgba(0, 0, 0, .65);
  }
}
:root[data-tema="escuro"] {
  --bg: #0b1220; --card-bg: #131c2e; --text: #f1f5f9; --text-muted: #94a3b8; --border: #263247;
  --primary: #38bdf8; --primary-bg: #0c3a55; --success: #4ade80; --success-bg: #123524;
  --warning: #fbbf24; --warning-bg: #3d2c0a; --danger: #f87171; --danger-bg: #421616;
  --primary-texto: #7dd3fc; --success-texto: #86efac; --warning-texto: #fcd34d; --danger-texto: #fca5a5;
  --cabecalho-tabela: #1a2438; --sobre-primario: #04121c; --fundo-janela: rgba(0, 0, 0, .65);
}

/* ---- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* "escondido" é escondido em qualquer tela, ganhando de qualquer outro estilo */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--fonte);
}
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--primary); }
.texto-suave { color: var(--text-muted); font-size: .875rem; }
.numero { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.so-leitor-de-tela { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 3. Ícones (sempre acompanhados de texto — use .rotulo) -------------- */
.icone {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.rotulo { display: inline-flex; align-items: center; gap: .45em; }
.i-painel   { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1'/><rect x='14' y='3' width='7' height='5' rx='1'/><rect x='14' y='12' width='7' height='9' rx='1'/><rect x='3' y='16' width='7' height='5' rx='1'/></svg>"); }
.i-poco     { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/></svg>"); }
.i-orcamento{ --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/></svg>"); }
.i-kanban   { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='6' height='18' rx='1'/><rect x='10.5' y='3' width='6' height='11' rx='1'/><rect x='18' y='3' width='3' height='7' rx='1'/></svg>"); }
.i-proposta { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-7 20-4-9-9-4z'/><path d='M22 2 11 13'/></svg>"); }
.i-cliente  { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.i-empresa  { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='2' width='16' height='20' rx='2'/><path d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/></svg>"); }
.i-executor { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94z'/></svg>"); }
.i-buscar   { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>"); }
.i-mais     { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5v14'/></svg>"); }
.i-fechar   { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>"); }
.i-alerta   { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/><path d='M12 9v4M12 17h.01'/></svg>"); }
.i-ok       { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }
.i-menu     { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M4 6h16M4 18h16'/></svg>"); }
.i-lua      { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z'/></svg>"); }
.i-config   { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/></svg>"); }
.i-local    { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.i-outorga  { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.5 9-.3.1-.7.1-1 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.79 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>"); }
.i-documento{ --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z'/><path d='M14 2v6h6'/></svg>"); }

/* ---- 4. Estrutura da página: menu lateral + conteúdo -------------------- */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.menu-lateral {
  background: var(--card-bg); border-right: 1px solid var(--border);
  padding: 1rem .75rem; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
}
.menu-lateral__marca { font-weight: 700; font-size: 1.05rem; padding: .25rem .75rem 1rem; }
.menu-lateral__secao { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: 1rem .75rem .35rem; }
.menu-lateral a {
  display: flex; align-items: center; gap: .6rem; min-height: var(--altura-toque);
  padding: 0 .75rem; border-radius: var(--raio-campo); color: var(--text); text-decoration: none; font-weight: 500;
}
.menu-lateral a:hover { background: var(--cabecalho-tabela); }
.menu-lateral a[aria-current="page"] { background: var(--primary-bg); color: var(--primary-texto); font-weight: 600; }

.menu-fundo { display: none; } /* só existe no celular; fora da grade para não ocupar lugar */
.conteudo { min-width: 0; }
.barra-topo {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding: .75rem 1.25rem; background: var(--card-bg); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.barra-topo__titulo { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.barra-topo h1 { margin: 0; font-size: 1.2rem; }
.botao.botao-menu { display: none; } /* "Menu" só aparece no celular */
.pagina { padding: 1.25rem; max-width: 1180px; }
.pagina > * + * { margin-top: 1.25rem; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu-lateral {
    position: fixed; inset: 0 auto 0 0; width: min(84vw, 300px); z-index: 60; height: 100dvh;
    transform: translateX(-102%); transition: transform .2s ease; border-right: 1px solid var(--border);
  }
  .menu-lateral.aberto { transform: none; }
  .menu-fundo { position: fixed; inset: 0; background: var(--fundo-janela); z-index: 50; }
  .menu-fundo.aberto { display: block; }
  .botao.botao-menu { display: inline-flex; }
  .pagina { padding: 1rem; }
  .barra-topo { padding: .6rem 1rem; }
}

/* ---- 5. Cartões e indicadores ------------------------------------------ */
.cartao { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-cartao); padding: 1.1rem 1.25rem; }
.cartao__titulo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.cartao__titulo h2 { margin: 0; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.indicador { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-cartao); padding: 1rem 1.25rem; }
.indicador__rotulo { color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.indicador__valor { font-size: 1.6rem; font-weight: 700; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.indicador__nota { color: var(--text-muted); font-size: .85rem; }
.indicador--link { display: block; text-decoration: none; color: inherit; transition: transform .1s, border-color .1s; }
.indicador--link:hover { border-color: var(--primary); transform: translateY(-1px); }
.indicador--perigo  { border-color: var(--danger); }
.indicador--perigo  .indicador__valor { color: var(--danger); }
.indicador--aviso   { border-color: var(--warning); }
.indicador--aviso   .indicador__valor { color: var(--warning); }
.indicador--sucesso { border-color: var(--success); }
.indicador--sucesso .indicador__valor { color: var(--success); }

/* ---- Painel inicial (Dashboard) ----------------------------------------- */
.grafico-barras { display: flex; align-items: flex-end; gap: .75rem; height: 160px; padding-top: 1rem; }
.grafico-barras__coluna { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .35rem; }
.grafico-barras__valor { font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.grafico-barras__barra { width: 100%; max-width: 44px; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 3px; }
.grafico-barras__rotulo { font-size: .74rem; color: var(--text-muted); text-transform: uppercase; }
.painel-2col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 899px) { .painel-2col { grid-template-columns: 1fr; } }

/* ---- 6. Botões ---------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--altura-toque); padding: 0 1.1rem; border-radius: var(--raio-campo);
  border: 1px solid var(--primary); background: var(--primary); color: var(--sobre-primario);
  font: 600 .95rem/1 var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.botao:hover { filter: brightness(.94); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.botao--secundario { background: transparent; color: var(--primary-texto); border-color: var(--border); }
.botao--secundario:hover { background: var(--cabecalho-tabela); filter: none; }
.botao--perigo { background: var(--danger); border-color: var(--danger); color: #fff; }
.botao--pequeno { min-height: 34px; padding: 0 .75rem; font-size: .85rem; }
.botao--bloco { width: 100%; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---- 7. Etiquetas (pílula) — o rótulo em texto é obrigatório ------------- */
.pilula {
  display: inline-flex; align-items: center; gap: .4em; padding: .2rem .7rem; border-radius: var(--raio-pilula);
  font-size: .8rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--cabecalho-tabela); color: var(--text-muted);
}
.pilula::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.pilula--primaria { background: var(--primary-bg); color: var(--primary-texto); }
.pilula--sucesso  { background: var(--success-bg); color: var(--success-texto); }
.pilula--aviso    { background: var(--warning-bg); color: var(--warning-texto); }
.pilula--perigo   { background: var(--danger-bg);  color: var(--danger-texto); }

/* Trecho de nome que bateu com a busca (listas com campo de busca) */
mark { background: var(--warning-bg); color: var(--warning-texto); font-weight: 700; border-radius: 3px; padding: 0 .1em; }

/* ---- 8. Formulários ----------------------------------------------------- */
.formulario { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: .9rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: var(--altura-toque); padding: .55rem .75rem; font: inherit; font-size: 1rem;
  color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-campo);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--primary); outline: 3px solid var(--primary-bg); }
.campo__ajuda { color: var(--text-muted); font-size: .82rem; }
/* Marcar várias opções de uma lista curta ("Serviços que presta", "O que faz"): etiquetas lado a lado que quebram a linha sozinhas */
.escolhas { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.escolha { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; cursor: pointer; }
.escolha:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); color: var(--primary-texto); }
.escolha input[type=checkbox], .molde .campo .escolha input[type=checkbox] { width: 15px; height: 15px; min-height: 0; padding: 0; margin: 0; flex: none; }
.campo__erro { color: var(--danger-texto); font-size: .85rem; font-weight: 600; }
.campo--erro input, .campo--erro select { border-color: var(--danger); }
/* Campo de escolha com o "+ Novo" ao lado (cadastro rápido, sem sair da tela) */
.campo-com-novo { display: flex; gap: .5rem; align-items: stretch; }
.campo-com-novo > :first-child { flex: 1; min-width: 0; }

/* Sugestões que aparecem embaixo de um campo de busca (cliente, executor...) */
.campo-com-novo { position: relative; }
.sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-campo);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .16); max-height: 320px; overflow-y: auto;
}
.sugestao {
  display: flex; flex-direction: column; gap: .1rem; width: 100%; min-height: var(--altura-toque);
  text-align: left; padding: .6rem .85rem; background: transparent; border: 0; border-bottom: 1px solid var(--border);
  color: var(--text); font: inherit; cursor: pointer;
}
.sugestao:last-child { border-bottom: 0; }
.sugestao:hover, .sugestao[aria-selected="true"] { background: var(--primary-bg); }
.sugestao__titulo { font-weight: 600; }
.sugestao__detalhe { color: var(--text-muted); font-size: .85rem; }
.sugestoes__vazio { padding: .8rem .9rem; color: var(--text-muted); font-size: .9rem; }
/* Aviso de erro dentro de uma janela ou formulário (fica junto do que a pessoa está fazendo) */
.mensagem-erro {
  background: var(--danger-bg); color: var(--danger-texto); border: 1px solid var(--danger);
  border-radius: var(--raio-campo); padding: .7rem .9rem; margin-bottom: 1rem; font-weight: 600;
}
.mensagem-erro .icone { vertical-align: -.2em; margin-right: .4em; }

/* ---- 9. Tabelas — no celular cada linha vira um cartão ------------------ */
.tabela-envolta { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--raio-cartao); background: var(--card-bg); }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th {
  background: var(--cabecalho-tabela); color: var(--text-muted); text-transform: uppercase;
  font-size: .72rem; letter-spacing: .05em; text-align: left; padding: .7rem 1rem; white-space: nowrap;
}
.tabela td { padding: .8rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tabela tbody tr:hover { background: var(--cabecalho-tabela); }
.tabela .direita { text-align: right; }
.tabela .nao-quebra { white-space: nowrap; } /* números de documento e valores em dinheiro nunca partem em duas linhas */
@media (max-width: 640px) {
  .tabela--cartoes thead { display: none; }
  .tabela--cartoes, .tabela--cartoes tbody, .tabela--cartoes tr, .tabela--cartoes td { display: block; width: 100%; }
  .tabela--cartoes tr { border-top: 1px solid var(--border); padding: .6rem 0; }
  .tabela--cartoes tr:first-child { border-top: 0; }
  .tabela--cartoes td { border: 0; padding: .3rem 1rem; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .tabela--cartoes td::before { content: attr(data-rotulo); color: var(--text-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: none; padding-top: .15rem; }
}

/* ---- 10. Janela (usada no cadastro rápido) ------------------------------ */
.janela-fundo { position: fixed; inset: 0; background: var(--fundo-janela); display: none; align-items: center; justify-content: center; padding: 1rem; z-index: 100; }
.janela-fundo.aberta { display: flex; }
.janela { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-cartao); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; }
.janela__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.janela__cabeca h2 { margin: 0; }
.janela__corpo { padding: 1.25rem; }
.janela__rodape { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .janela-fundo { align-items: flex-end; padding: 0; }
  .janela { max-width: none; border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; max-height: 94dvh; }
  .janela__rodape .botao { flex: 1; }
}

/* ---- 11. Avisos (aparecem e somem sozinhos) ----------------------------- */
.avisos { position: fixed; right: 1rem; top: 1rem; display: grid; gap: .5rem; z-index: 200; max-width: min(92vw, 400px); pointer-events: none; } /* no topo, onde o olho está; o clique passa por baixo (nunca tapa um botão) */
.avisos .aviso { pointer-events: none; }
.aviso { display: flex; gap: .6rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: var(--raio-campo); border: 1px solid var(--border); background: var(--card-bg); font-weight: 600; box-shadow: 0 4px 14px rgba(15, 23, 42, .18); }
.aviso--sucesso { background: var(--success-bg); color: var(--success-texto); border-color: var(--success); }
.aviso--aviso   { background: var(--warning-bg); color: var(--warning-texto); border-color: var(--warning); }
.aviso--erro    { background: var(--danger-bg);  color: var(--danger-texto);  border-color: var(--danger); }
@media (max-width: 640px) { .avisos { left: 1rem; right: 1rem; max-width: none; } }

/* ---- 12a. Telas de orçamento: lista, filtros, ações por linha, itens e resumo --------------- */
.menu-lateral a.em-breve { color: var(--text-muted); cursor: not-allowed; font-weight: 400; }
.menu-lateral a.em-breve:hover { background: transparent; }
.menu-lateral a.em-breve { gap: .5rem; }
.menu-lateral a.em-breve small { font-size: .68rem; border: 1px solid var(--border); border-radius: var(--raio-pilula); padding: 0 .4rem; margin-left: auto; white-space: nowrap; flex: none; }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filtros .campo { flex: 1; min-width: 220px; max-width: 360px; margin-left: auto; }
.filtro { min-height: 38px; padding: 0 .9rem; border-radius: var(--raio-pilula); border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font: 600 .88rem var(--fonte); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-texto); border-color: var(--primary); }
.filtro .contagem { color: var(--text-muted); font-weight: 500; margin-left: .3rem; }
.filtro-select { min-height: 38px; height: 38px; padding: 0 .6rem; border-radius: var(--raio-campo); border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font: 500 .85rem var(--fonte); min-width: 150px; }
.tabela-envolta.sem-corte { overflow: visible; }
.tabela-envolta.sem-corte thead th:first-child { border-top-left-radius: var(--raio-cartao); }
.tabela-envolta.sem-corte thead th:last-child { border-top-right-radius: var(--raio-cartao); }
.acoes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; }
.tabela--cartoes .acoes { justify-content: flex-start; }
.detalhe { display: block; color: var(--text-muted); font-size: .8rem; }
.mais { position: relative; display: inline-block; }
.mais > summary { list-style: none; }
.mais > summary::-webkit-details-marker { display: none; }
.mais .menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; flex-direction: column; gap: .1rem; min-width: 220px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-campo); box-shadow: 0 6px 18px rgba(15, 23, 42, .16); padding: .3rem; }
.mais[open] .menu { display: flex; }
.menu .botao { justify-content: flex-start; border: 0; background: transparent; color: var(--text); width: 100%; }
.menu .botao:hover { background: var(--cabecalho-tabela); filter: none; }
.menu .botao--perigo-texto { color: var(--danger-texto); }
.lista-vazia { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.celula { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
@media (max-width: 640px) { .tabela--cartoes td > .celula { align-items: flex-end; text-align: right; } }

.lista-passos { display: grid; gap: 1.25rem; }
.lista-passos > * { min-width: 0; } /* uma coluna de grade não pode ficar mais larga que a tela por causa do conteúdo */
.num { width: 100%; min-width: 0; max-width: 112px; min-height: 40px; display: block; margin-left: auto; text-align: right; padding: .3rem .55rem; font: inherit; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-campo); }
.num:focus { border-color: var(--primary); outline: 3px solid var(--primary-bg); }
.tabela--itens td, .tabela--itens th { padding: .5rem; }
.tabela--itens th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.tabela--itens td:first-child { width: 34%; min-width: 210px; }
.tabela--itens .grupo td { background: var(--cabecalho-tabela); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.tabela--itens .valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela--itens tr[hidden] { display: none; }
.faixa-progressiva td:first-child { border-left: 4px solid var(--warning); }
@media (max-width: 640px) {
  .tabela--itens td[data-rotulo="Item"] { display: block; text-align: left; padding-top: .8rem; font-weight: 600; }
  .tabela--itens td[data-rotulo="Item"]::before { display: none; }
  .tabela--itens td:first-child { width: auto; min-width: 0; }
  .tabela--itens .num { max-width: 150px; min-width: 7rem; flex: 0 0 7rem; }
  .tabela--itens td { flex-wrap: wrap; align-items: center; }
  .tabela--itens td::before { flex: 1 1 9rem; }
}
.bloco-progressivo { background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--raio-cartao); padding: 1rem 1.25rem; }
.bloco-progressivo label.marca { display: flex; gap: .7rem; align-items: flex-start; font-weight: 700; color: var(--warning-texto); cursor: pointer; }
.bloco-progressivo input[type=checkbox] { width: 22px; height: 22px; margin-top: .1rem; }
.bloco-progressivo .opcoes { display: none; margin-top: .9rem; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.bloco-progressivo.ligado .opcoes { display: grid; }
.resumo-fixo { position: sticky; bottom: 0; z-index: 40; background: var(--card-bg); border-top: 1px solid var(--border); margin: 1.25rem -1.25rem -1.25rem; padding: .8rem 1.25rem; display: flex; gap: 1rem 2rem; flex-wrap: wrap; align-items: center; }
.resumo-fixo .grupo-numeros { display: flex; gap: 1.5rem; flex-wrap: wrap; flex: 1; }
.resumo-fixo .n { display: flex; flex-direction: column; }
.resumo-fixo .n small { color: var(--text-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.resumo-fixo .n strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.resumo-fixo .sobra strong { color: var(--success-texto); }
.resumo-fixo .sobra.negativa strong { color: var(--danger-texto); }
@media (max-width: 860px) {
  .resumo-fixo { margin: 1rem -1rem -1rem; padding: .6rem 1rem; gap: .5rem 1rem; }
  .resumo-fixo .grupo-numeros { gap: .3rem 1rem; width: 100%; flex: none; }
  .resumo-fixo .n strong { font-size: .98rem; }
  .resumo-fixo .n small { font-size: .64rem; }
  .resumo-fixo .grupo-botoes { width: 100%; flex-wrap: nowrap; }
  .resumo-fixo .grupo-botoes > .botao { flex: 1; min-width: 0; padding: 0 .4rem; font-size: .85rem; white-space: normal; line-height: 1.15; }
  .resumo-fixo .grupo-botoes .mais { flex: 0 0 auto; }
  .resumo-fixo .grupo-botoes .mais > .botao { padding: 0 .6rem; font-size: .85rem; }
}
details.obs summary { cursor: pointer; font-weight: 700; padding: .2rem 0; }
details.obs .formulario { margin-top: 1rem; }

/* ---- 12b. Tela do fechamento da obra: quantidade real do executor, comparativo, fotos, contas ---------- */
.num.manual { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-texto); font-weight: 700; }
.tabela--itens .lado-executor { background: rgba(217, 119, 6, .06); }
.qtd-executor { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.qtd-executor .voltar { display: none; border: 0; background: transparent; color: var(--warning-texto); font: 600 .74rem var(--fonte); cursor: pointer; text-decoration: underline; padding: 0; text-align: right; }
.qtd-executor.mudou .voltar { display: inline; }
.comparativo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 700px) { .comparativo { grid-template-columns: minmax(0, 1fr); } }
.comp { border: 1px solid var(--border); border-radius: var(--raio-campo); padding: .8rem 1rem; }
.comp h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .5rem; }
.comp dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; font-size: .92rem; }
.comp dt { color: var(--text-muted); }
.comp dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dif.mais-que { color: var(--success-texto); }
.dif.menos-que { color: var(--danger-texto); }
.marca-linha { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; cursor: pointer; }
.marca-linha input { width: 22px; height: 22px; margin-top: .1rem; flex-shrink: 0; }
.caixa-extra { display: none; margin-top: .8rem; }
.caixa-extra.aberta { display: block; }
.grade-campos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.midias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
@media (max-width: 700px) { .midias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.midia { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio-campo); overflow: hidden; border: 1px solid var(--border); background: var(--cabecalho-tabela); display: flex; align-items: center; justify-content: center; }
.midia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.midia .tira { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, .7); color: #fff; font-size: .72rem; padding: .2rem .4rem; text-align: center; }
.midia .tirar { position: absolute; top: .3rem; right: .3rem; min-height: 28px; padding: 0 .5rem; border: 0; border-radius: 6px; background: var(--danger); color: #fff; font: 600 .72rem var(--fonte); cursor: pointer; }
.contas { display: grid; gap: .6rem; margin: 1rem 0; }
.conta-pagamento { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; border: 1px solid var(--border); border-radius: var(--raio-campo); padding: .7rem 1rem; }
.link-cliente { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.link-cliente input { flex: 1; min-width: 220px; }
.resumo-fixo .mais .menu { top: auto; bottom: calc(100% + 4px); }
.resumo-fixo .menu .botao { color: var(--danger-texto); }
.botao--quebra { max-width: 100%; white-space: normal; text-align: left; line-height: 1.2; padding-top: .45rem; padding-bottom: .45rem; } /* botão com texto longo (ex.: nome de empresa) quebra a linha em vez de sair da tela */
.aviso-bloco { border: 1px dashed var(--border); border-radius: var(--raio-campo); padding: .8rem 1rem; color: var(--text-muted); }

/* ---- 12. Folha de impressão (orçamento/PDF em papel) -------------------- */
@media print {
  .menu-lateral, .barra-topo, .botao, .avisos, .menu-fundo { display: none !important; }
  .app { display: block; }
  body { background: #fff; color: #000; }
  .cartao, .tabela-envolta { border-color: #999; }
}

/* ---- 12c. Formulário do Orçamento Geral: cartões de serviço, executor por serviço, itens livres -------- */
.servico { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--raio-cartao); background: var(--card-bg); padding: 1rem 1.1rem; }
.servico__topo { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .8rem; }
.servico__topo .campo { flex: 1; min-width: 200px; }
.servico__num { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-bg); color: var(--primary-texto); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.servico__rodape { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .7rem; }
.servico__rodape .subtotal { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: .9rem; }
.texto-item { width: 100%; min-height: 40px; padding: .3rem .55rem; font: inherit; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-campo); }
.texto-item:focus { border-color: var(--primary); outline: 3px solid var(--primary-bg); }
.sem-executor .lado-executor { display: none; }
.dica-executor { display: none; color: var(--text-muted); font-size: .82rem; margin: .4rem 0 0; }
.sem-executor .dica-executor { display: block; }
.sugestao--livre .sugestao__titulo { color: var(--primary-texto); }
#servicos { display: grid; gap: 1rem; }
@media (max-width: 640px) {
  .servico { padding: .8rem .8rem; }
  .servico__topo .campo { min-width: 0; flex-basis: 100%; }
}

/* Prazo e condição de pagamento de cada serviço (Orçamento Geral): duas caixas de texto lado a lado, uma embaixo da outra no celular. */
.servico__condicoes { display: grid; grid-template-columns: 1fr 2fr; gap: .75rem; margin-bottom: .8rem; }
@media (max-width: 640px) { .servico__condicoes { grid-template-columns: minmax(0, 1fr); } }

/* ---- 12d. Kanban: quadro de contatos por etapa (classes com prefixo kb-) --------------------------------- */
.kb-resumo { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; color: var(--text-muted); font-size: .9rem; margin-bottom: 1rem; }
.kb-resumo a.filtro { text-decoration: none; display: inline-flex; align-items: center; min-height: 34px; }
.kb-quadro { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: 1rem; align-items: stretch; }   /* colunas com a MESMA altura: a coluna inteira, até o fim, é área de soltar */
.kb-coluna { flex: 0 0 236px; display: flex; flex-direction: column; min-height: 60vh; background: var(--cabecalho-tabela); border: 1px solid var(--border); border-radius: var(--raio-cartao); }
.kb-coluna.kb-sobre { background: var(--primary-bg); border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.kb-coluna__topo { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .6rem .75rem; border-bottom: 1px solid var(--border); border-top: 4px solid var(--cor-coluna, var(--primary)); border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; }
.kb-coluna__topo h2 { margin: 0; font-size: .85rem; }
.kb-contagem { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--raio-pilula); padding: 0 .55rem; font-size: .78rem; font-weight: 700; }
.kb-coluna__cartoes { flex: 1 1 auto; padding: .5rem; display: grid; gap: .5rem; align-content: start; min-height: 90px; }
.kb-vazia { text-align: center; padding: 1rem .5rem; color: var(--text-muted); font-size: .8rem; border: 2px dashed var(--border); border-radius: var(--raio-campo); }
.kb-vazia[hidden] { display: none; }
.kb-grupo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .2rem .1rem 0; }
.kb-grupo--concluido { color: var(--success-texto); }
.kb-grupo--sem_retorno { color: var(--danger-texto); }
.kb-cartao { background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--cor-coluna, var(--primary)); border-radius: var(--raio-campo); padding: .6rem .65rem; display: grid; gap: .3rem; min-width: 0; }
.kb-cartao[draggable="true"] { cursor: grab; }
.kb-cartao--arrastando { opacity: .45; }
.kb-cartao--parado { outline: 2px solid var(--warning); }
.kb-nome { font-weight: 700; font-size: .85rem; text-transform: uppercase; line-height: 1.25; overflow-wrap: anywhere; }
.kb-apelido { color: var(--text-muted); font-size: .78rem; }
.kb-servico { font-weight: 600; font-size: .82rem; line-height: 1.25; }
.kb-info { color: var(--text-muted); font-size: .78rem; }
.kb-cartao a:not(.botao) { font-size: .8rem; overflow-wrap: anywhere; }
.kb-fotos { display: flex; gap: .3rem; }
.kb-fotos img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.kb-etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.kb-etiqueta { display: inline-block; padding: 0 .5rem; border-radius: var(--raio-pilula); background: var(--card-bg); border: 1px solid var(--border); font-size: .7rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.kb-etiqueta--aviso { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-texto); }
.kb-etiqueta--retorno { background: var(--primary-bg); border-color: var(--primary); color: var(--primary-texto); }
.kb-etiqueta--campanha { background: #fff7ed; border-color: #fb923c; color: #9a3412; }
.kb-acoes { display: flex; gap: .4rem; align-items: center; border-top: 1px solid var(--border); padding-top: .45rem; margin-top: .1rem; }
.kb-acoes .mais { margin-left: auto; }
.kb-nota-menu { padding: .4rem .7rem; font-size: .78rem; color: var(--success-texto); font-weight: 600; }
.kb-fichas { display: none; }
@media (max-width: 820px) {
  .kb-fichas { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .6rem; margin-bottom: .6rem; }
  .kb-ficha { flex: 0 0 auto; min-height: 38px; padding: 0 .8rem; border-radius: var(--raio-pilula); border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font: 600 .82rem var(--fonte); cursor: pointer; white-space: nowrap; border-bottom: 3px solid var(--cor-coluna, var(--primary)); }
  .kb-ficha[aria-pressed="true"] { background: var(--primary-bg); border-color: var(--primary); color: var(--primary-texto); }
  .kb-ficha .contagem { color: var(--text-muted); font-weight: 500; margin-left: .3rem; }
  .kb-quadro { display: block; overflow-x: visible; }
  .kb-coluna { display: none; width: 100%; min-height: 0; }
  .kb-coluna--ativa { display: block; }
}

/* Aviso de que falta algo no documento (CNPJ ou empresa emissora): aparece na tela de edição e na tela da folha, nunca no papel */
.aviso-documento { display: flex; gap: .55rem; align-items: flex-start; border: 1px solid var(--warning); background: var(--warning-bg); color: var(--warning-texto); border-radius: var(--raio-campo); padding: .7rem .9rem; margin: 0 0 1rem; font-size: .9rem; line-height: 1.4; }
.aviso-documento[hidden] { display: none; }
.aviso-documento .icone { flex-shrink: 0; margin-top: .15rem; }

/* PADRÃO DE CAIXA ALTA (regra do Nilton, 20/09/2026; ampliada em 30/09/2026 — agora é TODO campo, não só nome).
   Rótulos, botões, títulos, menus e cabeçalhos de tabela do SISTEMA (body.sistema) aparecem em maiúsculas só na
   tela (o texto guardado não muda). Campos de texto: mostram maiúsculas ENQUANTO digita (só a tela — é
   text-transform, não mexe no valor); nomes, além disso, o servidor converte de verdade ao salvar
   (normalizar_nome). Só ficam de fora (data-sem-caixa-alta/tipo já marcado abaixo): e-mail, site, senha, e
   observações/mensagens longas (ficam como digitadas, de propósito). As páginas do cliente (publico.css) ficam
   com texto normal; nelas só o nome do cliente/empresa (.nome-cliente) vai em maiúsculas + negrito. */
.sistema label, .sistema legend, .sistema h1, .sistema h2, .sistema h3, .sistema h4, .sistema .botao, .sistema button, .sistema summary,
.sistema th, .sistema .pilula, .sistema .menu-lateral a, .sistema .menu-lateral__marca, .sistema .filtros .botao { text-transform: uppercase; }
.sistema label, .sistema th { letter-spacing: .02em; }
input, select { text-transform: uppercase; }
textarea, input[type="email"], input[type="url"], input[type="password"], input[data-sem-caixa-alta] { text-transform: none; }
/* Nome de cliente e de empresa em qualquer lista, perfil, orçamento, folha e página: maiúsculas + negrito; o apelido vem entre aspas ao lado */
.nome-cliente { text-transform: uppercase; font-weight: 700; }
.apelido-cliente { font-weight: 400; text-transform: uppercase; color: var(--text-muted); }

/* ---- MOLDE ÚNICO DE FORMULÁRIO (regra inegociável 9.1: nenhuma tela de cadastro ou edição rola em 1366 x 640) --------------------------------
   Grade de 12 colunas (3 a 4 campos por linha), campo de 38 px, rótulo pequeno em cima, 12 px entre campos, observações com 2 linhas.
   Janela de cadastro: cerca de 900 px de largura, rodapé de ações FIXO. Formulário de página inteira: ver "tela fixa" logo abaixo. */
.molde { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.molde > * { grid-column: span 4; min-width: 0; }
.molde > .c-2 { grid-column: span 2; } .molde > .c-3 { grid-column: span 3; } .molde > .c-4 { grid-column: span 4; } .molde > .c-5 { grid-column: span 5; }
.molde > .c-6 { grid-column: span 6; } .molde > .c-8 { grid-column: span 8; } .molde > .c-9 { grid-column: span 9; } .molde > .c-12 { grid-column: 1 / -1; }
.molde .campo, .tela-fixa .campo { gap: 4px; }
.molde .campo label, .tela-fixa .campo label { font-size: .74rem; line-height: 1.2; }
.molde .campo input, .molde .campo select, .tela-fixa .campo input:not([type=checkbox]), .tela-fixa .campo select { height: 38px; min-height: 38px; padding: 0 .65rem; font-size: .95rem; }
.molde .campo textarea, .tela-fixa .campo textarea { min-height: 0; height: 62px; padding: .4rem .65rem; font-size: .95rem; resize: none; }   /* 2 linhas */
.molde .botao, .tela-fixa .botao { min-height: 38px; }
.molde .campo__ajuda, .tela-fixa .campo__ajuda { font-size: .74rem; line-height: 1.2; }
.janela--molde { max-width: 900px; display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 2rem); }
.janela--molde .janela__cabeca { flex: none; padding: .7rem 1.25rem; }
.janela--molde .janela__corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem; }
.janela--molde .janela__rodape { flex: none; padding: .7rem 1.25rem; }   /* o rodapé de ações fica sempre à vista */
@media (max-width: 720px) { .molde > * { grid-column: 1 / -1 !important; } }

/* TELA FIXA: formulário de página inteira que cabe na tela (computador). A página não rola: a barra de cima e o rodapé de ações ficam fixos,
   os cartões dividem o espaço do meio, e só uma LISTA comprida (itens, serviços) rola sozinha dentro do seu quadro de altura fixa. */
@media (min-width: 900px) {
  body.tela-fixa .app { height: 100vh; min-height: 0; }
  body.tela-fixa .conteudo { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
  body.tela-fixa .barra-topo { position: static; flex: none; padding: .35rem 1.25rem; }
  body.tela-fixa .barra-topo h1 { font-size: 1.05rem; }
  body.tela-fixa .pagina { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: .6rem 1.25rem 0; max-width: none; }
  body.tela-fixa .pagina > * + * { margin-top: 0; }
  body.tela-fixa .tela-fixa__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  body.tela-fixa .tela-fixa__miolo { flex: 1 1 auto; min-height: 0; display: grid; gap: 10px; }
  body.tela-fixa .tela-fixa__miolo > * { min-height: 0; min-width: 0; }
  body.tela-fixa .cartao { padding: .6rem .9rem; display: flex; flex-direction: column; min-height: 0; }
  body.tela-fixa .cartao__titulo { margin-bottom: .45rem; flex: none; }
  body.tela-fixa .cartao__titulo h2 { font-size: .95rem; }
  body.tela-fixa .quadro-rolavel { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--raio-campo); }
  body.tela-fixa .tela-fixa__rodape { flex: none; margin: 0 -1.25rem; padding: .5rem 1.25rem; background: var(--card-bg); border-top: 1px solid var(--border); display: flex; gap: 1rem 2rem; align-items: center; }
  body.tela-fixa .tela-fixa__rodape .grupo-numeros { display: flex; gap: 1.5rem; flex: 1; }
  body.tela-fixa .tela-fixa__rodape .n { display: flex; flex-direction: column; }
  body.tela-fixa .tela-fixa__rodape .n small { color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; }
  body.tela-fixa .tela-fixa__rodape .n strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
  body.tela-fixa .aviso-documento { margin: 0 0 8px; padding: .4rem .7rem; font-size: .82rem; flex: none; }
  body.tela-fixa .quadro-rolavel .tabela thead th { position: sticky; top: 0; z-index: 2; background: var(--cabecalho-tabela); }
}
@media (max-width: 899px) { .tela-fixa__rodape { position: sticky; bottom: 0; background: var(--card-bg); border-top: 1px solid var(--border); padding: .6rem 1rem; margin: 1rem -1rem -1rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; z-index: 40; } }
.tela-fixa__coluna { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
@media (max-width: 899px) { .tela-fixa__form, .tela-fixa__miolo, .tela-fixa__coluna { display: flex; flex-direction: column; gap: 1rem; } }
/* Serviços do orçamento geral dentro da tela fixa: tudo mais compacto, sem rolagem para os lados */
@media (min-width: 900px) {
  body.tela-fixa .servico { padding: .6rem .8rem; }
  body.tela-fixa .servico + .servico { margin-top: 10px; }
  body.tela-fixa .servico__topo { margin-bottom: .5rem; gap: .5rem; flex-wrap: nowrap; }
  body.tela-fixa .servico__topo .campo { min-width: 0; }
  body.tela-fixa .servico__condicoes { margin-bottom: .5rem; gap: .5rem; grid-template-columns: 1fr 1fr; }
  body.tela-fixa .servico .tabela-envolta { overflow-x: visible; }
  body.tela-fixa .tabela--itens td, body.tela-fixa .tabela--itens th { padding: .3rem .35rem; font-size: .8rem; }
  body.tela-fixa .tabela--itens td:first-child { width: auto; min-width: 0; }
  body.tela-fixa .tabela--itens .num { max-width: 84px; min-height: 34px; height: 34px; padding: .2rem .4rem; }
  body.tela-fixa .tabela--itens .texto-item { min-width: 0; width: 100%; height: 34px; min-height: 34px; }
  body.tela-fixa .tabela--itens th { text-transform: none; letter-spacing: 0; }
}
@media (min-width: 900px) {
  body.tela-fixa .tabela--itens td:first-child { min-width: 150px; width: 30%; }
  body.tela-fixa .tabela--itens .num { max-width: 82px; padding: .2rem .3rem; }
  body.tela-fixa .tabela--itens .botao { min-height: 32px; padding: 0 .5rem; font-size: .75rem; }
  body.tela-fixa .servico__topo .campo-com-novo .botao { padding: 0 .5rem; }
}
/* Metragem progressiva em uma faixa só (tela fixa) */
.bloco-compacto { padding: .45rem .75rem; }
.bloco-compacto label.marca { align-items: center; font-size: .85rem; line-height: 1.25; }
.bloco-compacto input[type=checkbox] { width: 18px; height: 18px; margin-top: 0; flex: none; }
.bloco-compacto .opcoes { grid-template-columns: 1fr 1fr auto; gap: .6rem; margin-top: .5rem; }
.bloco-compacto.ligado .opcoes { display: grid; }
.molde > .c-7 { grid-column: span 7; } .molde > .c-10 { grid-column: span 10; } .molde > .c-11 { grid-column: span 11; }
/* Fechamento da obra em tela fixa: duas abas (contas da obra / página do cliente), comparativo compacto */
.tela-fixa__rodape .mais .menu { top: auto; bottom: calc(100% + 4px); }
.fech-abas { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; flex: none; }
.fech-aba { min-height: 34px; padding: 0 .85rem; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: var(--raio-campo); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; }
.fech-aba[aria-selected="true"] { background: var(--primary-bg); color: var(--primary-texto); border-color: var(--primary); }
.fech-quem { margin-left: auto; font-size: .82rem; }
.comparativo-compacto { gap: .5rem; }
.comparativo-compacto .comp { padding: .35rem .7rem; }
.comparativo-compacto .comp h3 { margin: 0 0 .15rem; font-size: .72rem; }
.comparativo-compacto .comp dl { font-size: .82rem; gap: 0 .5rem; line-height: 1.35; }
.fech-marcas { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem; }
body.tela-fixa .marca-linha input { width: 18px; height: 18px; }
body.tela-fixa .marca-linha { font-size: .88rem; align-items: center; }
body.tela-fixa .caixa-extra { margin-top: .4rem; }
body.tela-fixa .midias { margin-top: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.tela-fixa .contas { margin: 0; }
body.tela-fixa .link-cliente input { height: 38px; }
/* Tela fixa: metragem progressiva numa linha só e linhas de item mais baixas */
@media (min-width: 900px) {
  body.tela-fixa .bloco-compacto.ligado { display: flex; align-items: center; gap: .75rem; flex-wrap: nowrap; }
  body.tela-fixa .bloco-compacto.ligado .opcoes { display: flex; margin: 0; gap: .5rem; align-items: flex-end; flex: none; }
  body.tela-fixa .bloco-compacto.ligado .opcoes .campo input { width: 78px; height: 32px; min-height: 32px; }
  body.tela-fixa .bloco-compacto.ligado .opcoes .campo label { font-size: .68rem; white-space: nowrap; }
  body.tela-fixa .bloco-compacto.ligado .opcoes .botao { min-height: 32px; }
  body.tela-fixa .tabela--itens td { padding: .2rem .35rem; }
  body.tela-fixa .tabela--itens td[data-rotulo="Item"] { line-height: 1.2; }
  body.tela-fixa .tabela--itens td .detalhe { display: inline; margin-left: .3rem; font-size: .7rem; color: var(--text-muted); }
  body.tela-fixa .tabela--itens td .detalhe::before { content: "· "; }
  body.tela-fixa .tabela--itens td[data-rotulo="Item"] > div { display: inline; }
  body.tela-fixa .tabela--itens .num { min-height: 30px; height: 30px; }
}
@media (min-width: 900px) { .barra-topo .fech-abas { flex-wrap: nowrap; } .barra-topo .grupo-botoes { flex-wrap: nowrap; align-items: center; } }
.fech-quem { white-space: nowrap; }
/* Quadro de lista comprida (itens, serviços): rola só ele, nunca a página; no celular também pode rolar para o lado */
.quadro-rolavel { overflow: auto; }
@media (max-width: 899px) { .tela-fixa__rodape .grupo-numeros { display: flex; flex-wrap: wrap; gap: .5rem 1rem; flex: 1 1 100%; } .fech-abas { flex-wrap: wrap; } .barra-topo .fech-abas { width: 100%; } .fech-painel[style] { grid-template-rows: none !important; } }
@media (min-width: 900px) { body.tela-fixa .tela-fixa__rodape .n-comp { font-size: .7rem; color: var(--text-muted); line-height: 1.1; white-space: nowrap; } body.tela-fixa .tela-fixa__rodape .grupo-numeros { gap: 1.1rem; } }
@media (min-width: 900px) {
  body.tela-fixa .tela-fixa__rodape { flex-wrap: nowrap; }
  body.tela-fixa .tela-fixa__rodape .grupo-botoes { flex-wrap: nowrap; flex: none; }
  body.tela-fixa .tabela--itens td:first-child { width: 24%; min-width: 130px; }
  body.tela-fixa .tabela--itens .num { max-width: 96px; font-size: .88rem; padding: .2rem .3rem; }
}
@media (min-width: 900px) {
  body.tela-fixa .tela-fixa__rodape .grupo-numeros { min-width: 0; gap: .8rem; }
  body.tela-fixa .tela-fixa__rodape .n-comp { font-size: .64rem; }
  body.tela-fixa .tela-fixa__rodape .n small { white-space: nowrap; }
  body.tela-fixa .tabela--itens td, body.tela-fixa .tabela--itens th { padding: .2rem .25rem; }
  body.tela-fixa .tabela--itens th { font-size: .72rem; }
  body.tela-fixa .tabela--itens .valor { font-size: .8rem; }
  body.tela-fixa .tabela--itens td:first-child { width: 22%; min-width: 120px; }
  body.tela-fixa .tabela--itens .num { padding: .15rem .25rem; font-size: .85rem; }
}
@media (min-width: 900px) { body.tela-fixa .tabela--itens td:nth-child(3) .num { min-width: 66px; } }
@media (min-width: 900px) {
  body.tela-fixa .servico { padding: .5rem .55rem; }
  body.tela-fixa .tabela--itens .botao { padding: 0 .35rem; font-size: .7rem; gap: .25rem; }
  body.tela-fixa .servico__num { display: none; }
}
@media (max-width: 899px) { .cartao__titulo .botao { max-width: 100%; white-space: normal; height: auto; padding-top: .4rem; padding-bottom: .4rem; } }

/* Configurações: as mensagens de WhatsApp preenchem o cartão inteiro */
.molde-mensagem { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.molde-mensagem .campo-mensagem { flex: 1 1 auto; min-height: 0; }
body.tela-fixa .campo .area-mensagem, .campo .area-mensagem { flex: 1 1 auto; height: auto; min-height: 0; resize: none; line-height: 1.35; font-size: .85rem; text-transform: none; }
.campo-mensagem .campo__ajuda { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
input[type=color] { padding: 2px !important; cursor: pointer; }
#painel-mensagens .tela-fixa__coluna > .cartao, #painel-observacoes .tela-fixa__coluna > .cartao, #painel-campo .tela-fixa__coluna > .cartao { flex: 1 1 auto; }

/* Kanban: janela "Enviar para o campo" */
.kb-opcoes { display: grid; gap: .4rem; }
.kb-opcao { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border); border-radius: var(--raio-campo); padding: .4rem .65rem; cursor: pointer; text-transform: none; font-weight: 600; }
.kb-opcao input { width: 18px; height: 18px; }
.kb-previa { white-space: pre-wrap; word-break: break-word; margin: 0 0 .5rem; font: inherit; font-size: .88rem; background: var(--cabecalho-tabela); border-radius: var(--raio-campo); padding: .7rem .85rem; max-height: 300px; overflow-y: auto; }

.kb-link-campo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; border: 1px dashed var(--border); border-radius: var(--raio-campo); padding: .35rem .5rem; margin-top: .4rem; font-size: .78rem; color: var(--text-muted); }
.kb-link-campo > span { flex: 1 1 12rem; min-width: 0; }
.kb-link-campo .botao { flex: none; }

/* Kanban: coordenadas de cada ponto de GPS no cartão */
.kb-pontos { border: 1px solid var(--border); border-radius: var(--raio-campo); margin-top: .4rem; padding: .25rem .5rem; font-size: .78rem; }
.kb-pontos > summary { cursor: pointer; font-weight: 700; color: var(--text-muted); }
.kb-ponto { border-top: 1px solid var(--border); padding: .4rem 0; display: grid; gap: .15rem; }
.kb-ponto:first-of-type { border-top: 0; }
.kb-ponto__quando { color: var(--text-muted); font-weight: 400; }
.kb-coord { font-variant-numeric: tabular-nums; user-select: all; font-weight: 600; }
.kb-prec { font-weight: 700; }
.kb-prec--boa { color: var(--success-texto); }
.kb-prec--razoavel { color: var(--warning-texto); }
.kb-prec--ruim { color: var(--danger-texto); }
.kb-prec--desconhecida { color: var(--text-muted); font-weight: 400; }
.kb-ponto__acoes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.kb-sem-coord { margin: .3rem 0 0; color: var(--warning-texto); background: var(--warning-bg); border-radius: var(--raio-campo); padding: .3rem .5rem; }

/* ACESSO (login): telas de entrar, esqueci a senha, senha nova, resgate e Minha conta */
.i-sair  { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/></svg>"); }
.i-chave { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='7.5' cy='15.5' r='4.5'/><path d='M10.7 12.3L21 2M16 7l3 3M14 9l2 2'/></svg>"); }
.menu-lateral__usuario { display: flex; align-items: center; gap: .4rem; padding: 0 .25rem .6rem; margin-bottom: .25rem; border-bottom: 1px solid var(--border); }
.menu-lateral .menu-lateral__usuario a { display: block; flex: 1; min-width: 0; min-height: 0; padding: .35rem .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 600; }
body.acesso { background: var(--bg); }
.acesso__centro { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.acesso__cartao { width: min(420px, 100%); display: grid; gap: .6rem; }
.acesso__marca { display: flex; align-items: center; gap: .6rem; }
.acesso__marca img { border-radius: 8px; }
.acesso__titulo { margin: 0; font-size: 1.15rem; }
.acesso__apoio { margin: 0; color: var(--text-muted); font-size: .9rem; }
.acesso__form { display: grid; gap: .7rem; }
.acesso__senha { display: flex; gap: .4rem; align-items: stretch; }
.acesso__senha input { flex: 1; min-width: 0; }
.acesso__aviso { margin: 0; padding: .55rem .7rem; border-radius: var(--raio-campo); background: var(--success-bg); color: var(--success-texto); font-size: .9rem; }
.acesso__aviso--atencao { background: var(--warning-bg); color: var(--warning-texto); }
.acesso__mais { border: 1px solid var(--border); border-radius: var(--raio-campo); padding: .5rem .7rem; }
.acesso__mais summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.acesso__mais[open] .acesso__form { margin-top: .6rem; }
.acesso__rodape { margin: 0; }
.acesso__codigo { font: 700 1.35rem/1.3 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-align: center; padding: .7rem; border: 2px dashed var(--border); border-radius: var(--raio-campo); user-select: all; word-break: break-all; }
.acesso__marca-guardei { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.acesso__marca-guardei input { width: 1.2rem; height: 1.2rem; }
.conta__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .conta__grade { grid-template-columns: 1fr; } }
.acesso__cartao--larga { width: min(860px, 100%); }
.acesso__duas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.acesso__coluna { display: grid; gap: .6rem; }
.acesso__coluna h2 { margin: 0; font-size: .95rem; }
@media (max-width: 760px) { .acesso__duas { grid-template-columns: 1fr; } }

/* Campos AUTOMÁTICOS do orçamento de poço (profundidade e quantidade do revestimento): só leitura, com o texto pequeno de onde vem */
.num--automatico, input.num--automatico { background: var(--cabecalho-tabela); color: var(--text); cursor: default; }
.auto-nota { display: block; font-size: .68rem; line-height: 1.15; color: var(--text-muted); margin-top: .15rem; text-align: right; }
.campo > .auto-nota { text-align: left; }
.aviso-documento--compacto { padding: .3rem .6rem; margin: 0 0 .4rem; font-size: .78rem; line-height: 1.25; }
.aviso-documento--compacto .icone { margin-top: .05rem; }
.campo > .auto-nota { white-space: nowrap; }

/* ---- Outorgas: wizard de importação de certidões (PDF) ---- */
.certidoes-lista { display: flex; flex-direction: column; gap: 10px; }
.certidao-item { border-left: 4px solid var(--border); }
.certidao-item--erro { border-left-color: var(--danger); }
.certidao-item--duplicado { border-left-color: var(--warning); }
.certidao-item--confirmada { border-left-color: var(--success); }
.certidao-item__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .7rem; }
.certidao-item__arquivo { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.certidao-item__sub { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.certidoes-vazio { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); }
.certidao-item__renovacao { border: 1px solid var(--border); border-radius: var(--raio-campo); padding: .6rem .75rem; margin-top: .6rem; background: var(--cabecalho-tabela); }
.certidao-item__renovacao legend { font-weight: 600; font-size: .82rem; padding: 0; }
.certidao-item__renovacao .marca { display: flex; align-items: center; gap: .4rem; font-size: .88rem; margin: .3rem 0; }
.certidao-item__rodape { position: sticky; bottom: -1px; background: var(--card-bg); margin: .8rem -1.25rem -1.1rem; padding: .6rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: .6rem; flex-wrap: wrap; }
body.tela-fixa .certidao-item__rodape { margin: .6rem -.9rem -.6rem; padding: .5rem .9rem; }