/*
  Identidade visual da CaptaMais, compartilhada por todas as páginas (carregada depois do estilo de cada uma,
  então as cores e os componentes daqui valem para todas).
  Paleta: azul-marinho da marca no estrutural (barra do topo), azul da marca para links e seleção,
  laranja para as ações principais e fundo creme no lugar do cinza.
*/
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonte.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --marinho: #022a64; --marinho-2: #0a3a82;
  --acao: #f26b1d; --acao-hover: #d95a10; --acao-texto: #ffffff; --acao-suave: #fff0e6; --acao-forte: #b04a0c;
  --bg: #f7f5f1; --surface: #ffffff; --surface-2: #f3efe8; --border: #e8e2d8;
  --text: #1f2430; --muted: #6b6458;
  --accent: #0364ea; --accent-text: #ffffff; --accent-soft: #e8f0fe;
  --row-hover: #fbf9f5; --row-sel: #fff4ec;
  --shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 4px 14px rgba(60, 40, 10, .04);
  --raio: 12px;
}
/* tema escuro: os mesmos seletores de cada página (pelo sistema, se o usuário não escolheu o claro, ou pela escolha) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marinho: #0b1d3d; --marinho-2: #16305e;
    --acao: #ff8a3d; --acao-hover: #ff9f5f; --acao-texto: #1c0d02; --acao-suave: #3a2414; --acao-forte: #ffae73;
    --bg: #121419; --surface: #1a1d24; --surface-2: #22262f; --border: #2f343f;
    --text: #ece8e1; --muted: #a59e92;
    --accent: #5b9dff; --accent-text: #0b1020; --accent-soft: #1e2a44;
    --row-hover: #1f232b; --row-sel: #2a2118; --shadow: none;
  }
}
:root[data-theme="dark"] {
  --marinho: #0b1d3d; --marinho-2: #16305e;
  --acao: #ff8a3d; --acao-hover: #ff9f5f; --acao-texto: #1c0d02; --acao-suave: #3a2414; --acao-forte: #ffae73;
  --bg: #121419; --surface: #1a1d24; --surface-2: #22262f; --border: #2f343f;
  --text: #ece8e1; --muted: #a59e92;
  --accent: #5b9dff; --accent-text: #0b1020; --accent-soft: #1e2a44;
  --row-hover: #1f232b; --row-sel: #2a2118; --shadow: none;
}

body { font-family: var(--fonte); word-spacing: .05em; }
/* o espaço reservado para a barra de rolagem (todas as páginas reservam) acompanha a barra do topo */
html { background: linear-gradient(var(--marinho) 0 52px, var(--bg) 52px) no-repeat, var(--bg); }
input, select, textarea, button { font-family: inherit; }

/* ---------- barra do topo: azul-marinho, logo branca, navegação clara ---------- */
header {
  background: var(--marinho); color: #fff;
  padding-top: 10px !important; padding-bottom: 10px !important; margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(2, 42, 100, .18);
}
header .marca-logo { background: none !important; padding: 0 !important; }
header nav .botao-sec {
  background: transparent; border-color: transparent; color: rgba(255, 255, 255, .84);
  font-weight: 600; padding: 6px 12px; border-radius: 8px;
}
header nav .botao-sec:hover { background: rgba(255, 255, 255, .10); border-color: transparent; color: #fff; }
header nav .botao-sec[aria-current="page"] { background: rgba(255, 255, 255, .16); border-color: transparent; color: #fff; }
header .contador { background: var(--acao); color: var(--acao-texto); }
header .menu-usuario-botao { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
header .menu-usuario-botao:hover, header .menu-usuario-botao[aria-expanded="true"] { border-color: rgba(255, 255, 255, .55); }
header .menu-usuario-botao .avatar { background: var(--acao); color: var(--acao-texto); }
header .menu-usuario-painel { color: var(--text); }

/* ---------- botões: principal laranja (um por tela), secundário branco com borda ---------- */
.botao, #entrar, #enviar, #salvar {
  background: var(--acao) !important; color: var(--acao-texto) !important; border: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--acao) 30%, transparent); font-weight: 700;
}
.botao:hover:not(:disabled), #entrar:hover:not(:disabled), #enviar:hover:not(:disabled), #salvar:hover:not(:disabled) { background: var(--acao-hover) !important; }
.botao-sec { background: var(--surface); }
.botao-sec:hover { border-color: var(--accent); }

/* ---------- cards ---------- */
.card { border-radius: var(--raio); box-shadow: var(--shadow); }

/* ---------- telas de entrada (login, cadastro, senha): painel da marca à esquerda, formulário à direita ---------- */
body.entrada { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 1fr); grid-template-rows: 1fr; min-height: 100vh;
               padding: 0; place-items: stretch; }
body.entrada > form { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; margin: 32px 16px;
                      box-shadow: 0 10px 40px rgba(60, 40, 10, .08); border-radius: 16px; }
.painel-marca { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 56px;
                color: #fff; background: radial-gradient(120% 90% at 0% 0%, #0a4aa8 0%, transparent 55%), linear-gradient(160deg, #022a64 0%, #011a3f 100%); }
.painel-marca img { width: 214px; height: auto; }
.painel-marca h2 { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; margin: 0 0 22px; font-weight: 800; letter-spacing: -.01em; max-width: 14em; }
.painel-marca ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 30em; }
.painel-marca li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.painel-marca li svg { flex: none; margin-top: 2px; color: var(--acao); background: rgba(242, 107, 29, .16); border-radius: 50%; padding: 3px; box-sizing: content-box; }
.painel-marca small { color: rgba(255, 255, 255, .55); }
@media (max-width: 860px) {
  body.entrada { grid-template-columns: minmax(0, 1fr); }
  .painel-marca { display: none; }
  body.entrada > form { grid-column: 1; width: calc(100% - 32px); max-width: 380px; margin: 24px 0; }
}

/* ---------- etapas do funil de vendas (marcações): uma cor por etapa ---------- */
:root { --m-contatado: #0e7490; --m-contatado-soft: #e0f2f5; --m-interessado: #b45309; --m-interessado-soft: #fdf0dc; --m-proposta: #4338ca; --m-proposta-soft: #e8e7fb; --m-fechado: #15803d; --m-fechado-soft: #dcf3e3; --m-descartado: #64748b; --m-descartado-soft: #eef1f4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m-contatado: #5cc3d6; --m-contatado-soft: #12313a; --m-interessado: #f0b45c; --m-interessado-soft: #3a2b12; --m-proposta: #a5a1ff; --m-proposta-soft: #25234a; --m-fechado: #5cc98b; --m-fechado-soft: #173325; --m-descartado: #9aa4b2; --m-descartado-soft: #262b33; } }
:root[data-theme="dark"] { --m-contatado: #5cc3d6; --m-contatado-soft: #12313a; --m-interessado: #f0b45c; --m-interessado-soft: #3a2b12; --m-proposta: #a5a1ff; --m-proposta-soft: #25234a; --m-fechado: #5cc98b; --m-fechado-soft: #173325; --m-descartado: #9aa4b2; --m-descartado-soft: #262b33; }
.b-contatado { background: var(--m-contatado-soft); color: var(--m-contatado); }
tbody tr.m-contatado > td:first-child { box-shadow: inset 4px 0 0 var(--m-contatado); }
.faixa-marcacao.m-contatado { background: var(--m-contatado-soft); color: var(--m-contatado); }
.botao-marcar[data-ficha-marcar="contatado"] { color: var(--m-contatado); }
.botao-marcar[data-ficha-marcar="contatado"][aria-pressed="true"] { background: var(--m-contatado-soft); border-color: var(--m-contatado); }
.b-interessado { background: var(--m-interessado-soft); color: var(--m-interessado); }
tbody tr.m-interessado > td:first-child { box-shadow: inset 4px 0 0 var(--m-interessado); }
.faixa-marcacao.m-interessado { background: var(--m-interessado-soft); color: var(--m-interessado); }
.botao-marcar[data-ficha-marcar="interessado"] { color: var(--m-interessado); }
.botao-marcar[data-ficha-marcar="interessado"][aria-pressed="true"] { background: var(--m-interessado-soft); border-color: var(--m-interessado); }
.b-proposta { background: var(--m-proposta-soft); color: var(--m-proposta); }
tbody tr.m-proposta > td:first-child { box-shadow: inset 4px 0 0 var(--m-proposta); }
.faixa-marcacao.m-proposta { background: var(--m-proposta-soft); color: var(--m-proposta); }
.botao-marcar[data-ficha-marcar="proposta"] { color: var(--m-proposta); }
.botao-marcar[data-ficha-marcar="proposta"][aria-pressed="true"] { background: var(--m-proposta-soft); border-color: var(--m-proposta); }
.b-fechado { background: var(--m-fechado-soft); color: var(--m-fechado); }
tbody tr.m-fechado > td:first-child { box-shadow: inset 4px 0 0 var(--m-fechado); }
.faixa-marcacao.m-fechado { background: var(--m-fechado-soft); color: var(--m-fechado); }
.botao-marcar[data-ficha-marcar="fechado"] { color: var(--m-fechado); }
.botao-marcar[data-ficha-marcar="fechado"][aria-pressed="true"] { background: var(--m-fechado-soft); border-color: var(--m-fechado); }
.b-descartado { background: var(--m-descartado-soft); color: var(--m-descartado); }
tbody tr.m-descartado > td:first-child { box-shadow: inset 4px 0 0 var(--m-descartado); }
.faixa-marcacao.m-descartado { background: var(--m-descartado-soft); color: var(--m-descartado); }
.botao-marcar[data-ficha-marcar="descartado"] { color: var(--m-descartado); }
.botao-marcar[data-ficha-marcar="descartado"][aria-pressed="true"] { background: var(--m-descartado-soft); border-color: var(--m-descartado); }