/* Manual da Marca Macedo Henriques (03/11/2026): paleta e tipografia únicas.
   Marrom Café #3B2F28 · Bronze Antigo #6E5746 · Taupe #8A7A6B · Areia Mineral #C8B59C · Off-white Quente #F2ECE3 · fonte Jost. */
@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/Jost-300-latin.928f4210aa48.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Jost"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/Jost-300-latin-ext.7f44f6fd229b.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/Jost-400-latin.928f4210aa48.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Jost"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/Jost-400-latin-ext.7f44f6fd229b.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/Jost-500-latin.928f4210aa48.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/Jost-500-latin-ext.7f44f6fd229b.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ground: #F2ECE3;          /* Off-white Quente: fundo principal (substitui o branco) */
  --paper: #F2ECE3;
  --ink: #3B2F28;             /* Marrom Café Profundo: textos e logo */
  --muted: #6E5746;           /* Bronze Antigo: textos de apoio (contraste suficiente sobre o off-white) */
  --line: rgba(138, 122, 107, .38);   /* Taupe: linhas finas */
  --line-forte: #C8B59C;      /* Areia Mineral */
  --accent: #6E5746;
  --accent-ink: #F2ECE3;
  --accent-soft: rgba(200, 181, 156, .32);
  --ok: #4F6A43;
  --ok-soft: rgba(79, 106, 67, .13);
  --warn: #8B5E1A;
  --warn-soft: rgba(200, 181, 156, .42);
  --erro: #9B3A2B;
  --erro-soft: rgba(155, 58, 43, .11);
  --side: #3B2F28;
  --side-ink: #F2ECE3;
  --side-muted: #C8B59C;
  --radius: 3px;
  --font: "Jost", "Segoe UI", system-ui, sans-serif;
  --mono: "Jost", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.55 var(--font);
}
a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Estrutura */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral {
  background: var(--side);
  color: var(--side-ink);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.marca { padding: 4px 6px 0; display: grid; gap: 10px; text-decoration: none; color: inherit; justify-items: center; }
.marca img { width: 200px; max-width: 100%; height: auto; display: block; }
.marca span { font: 300 .78rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--side-muted); }
.menu { display: grid; gap: 2px; }
.menu-titulo {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--side-muted); padding: 0 10px 6px;
}
.menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius);
  color: var(--side-ink); text-decoration: none; font-size: .92rem;
}
.menu a:hover { background: rgba(200, 181, 156, .12); }
.menu a[aria-current="page"] { background: rgba(200, 181, 156, .2); color: var(--side-ink); box-shadow: inset 3px 0 0 var(--line-forte); }
.menu a.em-breve { color: var(--side-muted); }
.menu .fase { font: 300 .7rem/1 var(--font); letter-spacing: .06em; color: var(--side-muted); }
.lateral .rodape { margin-top: auto; padding: 0 10px; display: grid; gap: 6px; font-size: .85rem; }
.lateral .rodape a { color: var(--side-ink); }
.lateral .rodape form button {
  background: none; border: 0; padding: 0; color: var(--side-ink);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.usuario-atual { color: var(--side-muted); font-size: .8rem; }

.conteudo { padding: 32px clamp(16px, 4vw, 48px) 64px; display: grid; gap: 28px; align-content: start; max-width: 1180px; }
.cabecalho { display: grid; gap: 4px; }
.cabecalho h1 { font-size: 1.9rem; font-weight: 500; letter-spacing: .005em; }
.cabecalho p { color: var(--muted); }

/* Blocos */
.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.cartao {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: grid; gap: 8px; align-content: start;
  color: inherit; text-decoration: none;
}
a.cartao:hover { border-color: var(--line-forte); background: var(--accent-soft); }
.cartao h3 { font-size: 1.02rem; font-weight: 500; }
.cartao p { color: var(--muted); font-size: .9rem; }
.selo {
  justify-self: start; font: 500 .72rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent);
}
.selo.alerta { background: var(--warn-soft); color: var(--warn); }
.selo.erro { background: var(--erro-soft); color: var(--erro); }
.selo.ok { background: var(--ok-soft); color: var(--ok); }

.secao { display: grid; gap: 12px; }
.secao h2 { font-size: 1.1rem; font-weight: 500; }
.duas-colunas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.tabela-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
th { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line-forte); }
.num { font-variant-numeric: tabular-nums; }

.aviso { border-radius: var(--radius); padding: 12px 16px; font-size: .92rem; }
.aviso.sucesso { background: var(--ok-soft); color: var(--ok); }
.aviso.erro { background: var(--erro-soft); color: var(--erro); }
.aviso.info { background: var(--accent-soft); color: var(--accent); }

/* Formulários */
.pagina-acesso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.caixa-acesso {
  width: 100%; max-width: 400px; background: var(--paper); border: 1px solid var(--line-forte);
  border-radius: var(--radius); padding: 40px 34px 34px; display: grid; gap: 24px;
}
.caixa-acesso .marca-acesso { justify-items: center; text-align: center; gap: 14px; }
.caixa-acesso .marca-acesso img { width: 240px; max-width: 100%; height: auto; }

.caixa-acesso .marca-acesso { display: grid; gap: 2px; }
.caixa-acesso .marca-acesso span { color: var(--muted); font: 300 .8rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
form.campos { display: grid; gap: 14px; }
.campo { display: grid; gap: 5px; }
.campo label { font-size: .85rem; font-weight: 500; }
.campo input {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; width: 100%;
}
.campo input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.campo .ajuda { font-size: .8rem; color: var(--muted); }
.campo .ajuda ul { margin: 4px 0 0; padding-left: 18px; }
.campo .erro-campo { font-size: .82rem; color: var(--erro); }
.botao {
  font: 500 .95rem/1 var(--font); background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius); padding: 11px 16px; cursor: pointer;
}
.botao:hover { background: var(--ink); }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .lateral { gap: 14px; }
  .menu { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .menu-titulo { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Fase 2 — cadastros */
a.botao { display: inline-block; text-decoration: none; }
.botao.secundario { background: var(--paper); color: var(--accent); border: 1px solid var(--line); }
.botao.secundario:hover { border-color: var(--accent); filter: none; }
.linha-titulo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trilha { font-size: .85rem; color: var(--muted); margin-bottom: -18px; }
.trilha a { color: var(--muted); }
.discreto { color: var(--muted); font-weight: 400; }
th.num, td.num { text-align: right; }
td.quebra, .quebra { white-space: normal; overflow-wrap: anywhere; }
td { vertical-align: top; }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
td .selo { margin-left: 6px; vertical-align: 1px; }

.situacao { font-size: .8rem; font-weight: 500; }
.situacao-ativo { color: var(--ok); }
.situacao-prospect { color: var(--warn); }
.situacao-encerrado { color: var(--muted); }

.filtros {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.filtros .campo { min-width: 150px; }
.filtros .campo-busca { flex: 1 1 260px; }
.campo select, .campo textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; width: 100%;
}
.campo select:focus, .campo textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.campo select[multiple] { padding: 4px; }
.link-aviso { display: block; text-decoration: none; }

.ficha { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.ficha dt, .ficha dd { padding: 9px 14px; border-bottom: 1px solid var(--line); margin: 0; }
.ficha dt { color: var(--muted); font-size: .85rem; }
.ficha dt:last-of-type, .ficha dd:last-of-type { border-bottom: 0; }
.caminho { font: 400 .82rem/1.4 var(--font); color: var(--muted); overflow-wrap: anywhere; }
table.compacta td { padding: 5px 0; border-bottom: 1px solid var(--line); }
table.compacta tr.total td { font-weight: 500; border-bottom: 0; }

.aviso-conferencia {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 14px;
  background: var(--warn-soft); color: var(--ink); border-radius: var(--radius); padding: 14px 18px;
}
.aviso-conferencia strong { color: var(--warn); }
.stack-curto { display: grid; gap: 6px; flex: 1 1 320px; }
.stack-curto ul { margin: 0; padding-left: 18px; }

.cartao.caso { gap: 6px; }
.lista-processos { margin: 0; padding-left: 18px; font-size: .9rem; display: grid; gap: 2px; }
.paginacao { display: flex; gap: 16px; align-items: center; justify-content: center; font-size: .9rem; }

.formulario { display: grid; gap: 20px; max-width: 920px; }
.grade-campos { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grade-campos .largo { grid-column: 1 / -1; }

/* Sincronização */
.regras { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .92rem; }
.resumo-sinc h3 { font-size: 1.5rem; }

/* Ficha completa do cliente */
.qualificacao { gap: 10px; }
.texto-qualificacao { color: var(--ink); font-size: .95rem; line-height: 1.6; max-width: 95ch; }
.ficha .titulo-bloco { background: var(--accent-soft); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.secao .ficha + .ficha { margin-top: 10px; }
.secao-form { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 14px 18px 18px; margin: 0; display: grid; gap: 12px; }
.secao-form legend { font-weight: 500; padding: 0 6px; }
.ajuda-secao { font-size: .85rem; color: var(--muted); }
.pessoa-vinculada { border-top: 1px dashed var(--line); padding-top: 12px; display: grid; gap: 10px; }
.pessoa-vinculada:first-of-type { border-top: 0; padding-top: 0; }
.remover { font-size: .85rem; color: var(--erro); display: flex; gap: 6px; align-items: center; }
.remover input { width: auto; }

/* Conflito de edição simultânea */
.aviso-conflito { background: var(--erro-soft); border-radius: var(--radius); padding: 14px 18px; display: grid; gap: 8px; }
.aviso-conflito strong:first-child { color: var(--erro); }
.aviso-conflito ul { margin: 0; padding-left: 18px; }


/* Detalhes da marca */
body { -webkit-font-smoothing: antialiased; }
.conteudo { background: var(--ground); }
.selo { background: var(--accent-soft); color: var(--muted); }
::selection { background: var(--line-forte); color: var(--ink); }
.campo input, .campo select, .campo textarea { background: #F7F2EA; border-color: var(--line-forte); }
.menu a { font-weight: 400; letter-spacing: .01em; }

.caixa-acesso .marca-acesso span { margin-top: 14px; }
.marca span { margin-top: 4px; }
.conteudo .cabecalho h1 { color: var(--ink); }

/* Dois passos */
.qr { justify-self: center; width: 210px; padding: 10px; background: #F7F2EA; border: 1px solid var(--line-forte); border-radius: var(--radius); }
.qr svg { width: 100%; height: auto; display: block; }
#id_codigo { font-size: 1.4rem; letter-spacing: .35em; text-align: center; }

/* Funil de atendimento */
.funil { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.coluna { background: var(--accent-soft); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; align-content: start; min-height: 140px; }
.coluna header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.coluna h2 { font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.coluna .contagem { font-weight: 500; color: var(--ink); }
.ficha-funil { display: grid; gap: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: inherit; text-decoration: none; }
.ficha-funil:hover { border-color: var(--accent); }
.ficha-funil strong { font-weight: 500; }
.ficha-funil .horario { color: var(--accent); font-size: .85rem; font-weight: 500; }
.coluna .vazio { color: var(--muted); font-size: .85rem; font-weight: 300; }
.coluna .mais { font-size: .85rem; color: var(--muted); }
.coluna.etapa-conferir { box-shadow: inset 0 3px 0 var(--warn); }
.coluna.etapa-agendada, .coluna.etapa-contratou { box-shadow: inset 0 3px 0 var(--ok); }
.coluna.etapa-equipe { box-shadow: inset 0 3px 0 var(--erro); }

/* Funil: etapas em grade que quebra em linhas (sem rolagem lateral) */
.resumo-funil { display: flex; flex-wrap: wrap; gap: 8px; }
.resumo-item { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-forte); border-radius: 99px; color: var(--ink); text-decoration: none; background: var(--paper); }
.resumo-item strong { font-size: 1.05rem; font-weight: 500; }
.resumo-item span { font-size: .85rem; color: var(--muted); }
.resumo-item:hover { background: var(--accent-soft); }
.resumo-item.zerado { opacity: .55; }
.grupo-funil { display: grid; gap: 10px; }
.grupo-funil > h2 { font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-forte); padding-bottom: 6px; }
.funil { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 12px; align-items: start; padding-bottom: 0; }
.coluna.vazia { background: transparent; border: 1px dashed var(--line-forte); min-height: 0; }
.coluna.vazia header h3 { color: var(--taupe, #8A7A6B); }
.coluna h3 { font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }