/* Identidade de mutuaconsultoria.com.br, adaptada a uso diario (secao 14).
   Tokens extraidos do site em 01/10/2026. Texto e links usam --brand-deep:
   o --brand do site tem contraste ~3:1 sobre fundo claro, insuficiente para
   texto pequeno, e fica para destaques. */

@font-face{font-family:"Funnel Display";font-weight:500;font-display:swap;src:url(fonts/funnel-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Display";font-weight:600;font-display:swap;src:url(fonts/funnel-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Sans";font-weight:400;font-display:swap;src:url(fonts/funnel-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Sans";font-weight:500;font-display:swap;src:url(fonts/funnel-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Sans";font-weight:600;font-display:swap;src:url(fonts/funnel-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url(fonts/geist-mono-latin-500-normal.woff2) format("woff2")}

:root{
  color-scheme:only light;
  --bg:#ECEEF0;
  --surface:#F7F8F9;
  --paper:#FFFFFF;
  --ink:#111518;
  --muted:#687078;
  --faint:#A3AAB0;
  --line:#D6DADE;
  --brand:#1E9BD7;
  --brand-deep:#0C5F8F;
  --ok:#22A89A;
  --warn:#E0A032;
  --risk:#D9534F;
  --accent:#8A78DE;
  --night:#0B0F12;
  --sans:"Funnel Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --display:"Funnel Display","Funnel Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --raio:18px;
  --sombra:0 24px 48px -28px rgba(10,20,30,.35),0 2px 6px -2px rgba(10,20,30,.08);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(26px,3.2vw,36px);line-height:1.08}
h2{font-size:20px;line-height:1.2}
h3{font-size:16px;font-family:var(--sans);font-weight:600;letter-spacing:0}
p{margin:0 0 10px}
a{color:var(--brand-deep);text-decoration:none}
a:hover{text-decoration:underline}
small,.mudo{color:var(--muted)}
code,.mono{font-family:var(--mono);font-size:.92em}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}

/* ---------- Estrutura ---------- */
.nav{position:sticky;top:0;z-index:20;padding:12px clamp(12px,3vw,28px);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-pill{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:8px 10px 8px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px -22px rgba(0,0,0,.35)}
.logo img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.nav-links a{padding:7px 12px;border-radius:999px;color:var(--ink);font-weight:500;font-size:14px}
.nav-links a:hover{background:var(--bg);text-decoration:none}
.nav-links a.atual{background:var(--ink);color:var(--bg)}
.nav-user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap}
.nav-user a{font-weight:500}
main{max-width:1240px;margin:0 auto;padding:18px clamp(16px,3vw,28px) 64px}
.cabecalho{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:18px 0 22px}
.cabecalho .acoes{display:flex;gap:8px;flex-wrap:wrap}
.rotulo{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;display:block}
.grade{display:grid;gap:16px}
.grade.dois{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grade.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.rodape{max-width:1240px;margin:0 auto;padding:24px clamp(16px,3vw,28px) 40px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Cartoes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--raio);box-shadow:var(--sombra);padding:20px 22px;margin-bottom:16px}
.card > h2,.card > h3{margin-bottom:12px}
.card.fino{box-shadow:none}
.card.estreito{max-width:520px;margin-left:auto;margin-right:auto}
.kpi .num{font:500 38px/1 var(--display);letter-spacing:-.03em;display:block;margin:6px 0 2px}
.kpi .num.ok{color:var(--ok)}
.kpi .num.atencao{color:color-mix(in srgb,var(--warn) 70%,var(--ink))}

/* ---------- Marcadores de status ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);padding:6px 9px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:color-mix(in srgb,var(--ok) 70%,var(--ink));background:color-mix(in srgb,var(--ok) 14%,transparent)}
.pill.atencao{color:color-mix(in srgb,var(--warn) 62%,var(--ink));background:color-mix(in srgb,var(--warn) 20%,transparent)}
.pill.risco{color:color-mix(in srgb,var(--risk) 80%,var(--ink));background:color-mix(in srgb,var(--risk) 13%,transparent)}
.pill.novo{color:var(--brand-deep);background:color-mix(in srgb,var(--brand) 14%,transparent)}
.pill.inativa{color:var(--muted);background:color-mix(in srgb,var(--muted) 13%,transparent)}
.pill.roxo{color:color-mix(in srgb,var(--accent) 70%,var(--ink));background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pill.sem-ponto::before{display:none}

/* ---------- Tabelas ---------- */
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tabela td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tabela tr:last-child td{border-bottom:0}
.tabela td.num{text-align:right;font-family:var(--mono)}
.rolagem{overflow-x:auto}

/* ---------- Formularios ---------- */
label{display:block;font-weight:500;font-size:13px;margin:0 0 4px}
input[type=text],input[type=email],input[type=date],input[type=number],input[type=search],select,textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
input[type=file]{font-size:13px;max-width:100%}
.campo{margin-bottom:12px}
.linha-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer}
.check input{margin-top:3px}
.check small{display:block;margin-top:2px}
.opcoes{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.ajuda{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---------- Botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.72em 1.2em;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font:500 14px/1 var(--sans);cursor:pointer;text-decoration:none;transition:transform .15s}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn.secundario{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.secundario:hover{border-color:var(--ink)}
.btn.perigo{background:transparent;color:color-mix(in srgb,var(--risk) 85%,var(--ink));border-color:color-mix(in srgb,var(--risk) 45%,var(--line))}
.btn.pequeno{padding:.5em .9em;font-size:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--brand-deep);cursor:pointer}
.link-btn:hover{text-decoration:underline}
form.inline{display:inline}

/* ---------- Avisos ---------- */
.aviso{border-radius:14px;padding:12px 16px;margin:0 0 16px;font-size:14px;border:1px solid}
.aviso.erro{background:color-mix(in srgb,var(--risk) 9%,var(--paper));border-color:color-mix(in srgb,var(--risk) 35%,var(--line));color:color-mix(in srgb,var(--risk) 70%,var(--ink))}
.aviso.ok{background:color-mix(in srgb,var(--ok) 9%,var(--paper));border-color:color-mix(in srgb,var(--ok) 35%,var(--line));color:color-mix(in srgb,var(--ok) 55%,var(--ink))}
.aviso.info{background:color-mix(in srgb,var(--brand) 8%,var(--paper));border-color:color-mix(in srgb,var(--brand) 30%,var(--line));color:var(--ink)}
.aviso.atencao{background:color-mix(in srgb,var(--warn) 12%,var(--paper));border-color:color-mix(in srgb,var(--warn) 40%,var(--line));color:var(--ink)}

/* ---------- Listas e itens ---------- */
.lista{list-style:none;margin:0;padding:0}
.lista > li{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.lista > li:last-child{border-bottom:0}
.lista .principal{flex:1;min-width:0}
.lista b{font-weight:600;display:block}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px;flex:none;margin-top:7px}
.dot.atencao{background:var(--warn)}.dot.risco{background:var(--risk)}.dot.novo{background:var(--brand)}.dot.inativa{background:var(--faint)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink)}

/* ---------- Checklist do processo ---------- */
.exigencia{border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:14px 16px;margin-bottom:10px}
.exigencia.essencial{border-left:4px solid var(--ink)}
.exigencia .topo{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.exigencia .nome{font-weight:600}
.exigencia .detalhes{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px}
details > summary{cursor:pointer;color:var(--brand-deep);font-weight:500;font-size:13.5px;margin-top:8px}
details[open] > summary{margin-bottom:10px}
.etapas{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0}
.etapa{font:500 11px/1 var(--mono);padding:7px 10px;border-radius:999px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.etapa.atual{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.etapa.feita{color:var(--ink)}

/* ---------- Primeiros passos ---------- */
.primeiros-passos{border-color:color-mix(in srgb,var(--brand) 35%,var(--line));background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.topo-cartao{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.passos{margin:0 0 10px;padding-left:22px;display:grid;gap:8px;font-size:14px}
.passos b{font-weight:600}

/* ---------- Pagina de entrada ---------- */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.entrada .card{width:100%;max-width:440px;padding:32px 30px}
.entrada .logo img{height:40px;margin-bottom:26px}
.entrada h1{font-size:30px;margin-bottom:8px}
.termos-texto{max-height:52vh;overflow:auto;padding:4px 18px 4px 4px;font-size:14px}
.termos-texto h2{font-size:22px;margin:4px 0 12px}
.termos-texto h3{margin:18px 0 8px}
.termos-texto p{line-height:1.6}
.termos-texto p.alinea{margin:-4px 0 6px 20px}
.termos-texto ul{margin:0 0 12px;padding-left:20px}
.termos-texto li{margin-bottom:6px;line-height:1.55}
.termos-texto .nota{font-size:13px;color:var(--muted);border-left:3px solid var(--warn);padding-left:10px}

@media (max-width:760px){
  .nav-pill{border-radius:20px;flex-wrap:wrap;padding:10px 14px}
  .nav-links{order:3;width:100%}
  .tabela.responsiva thead{display:none}
  .tabela.responsiva tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .tabela.responsiva td{display:block;border:0;padding:3px 0}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}