/* Central Plannex. Mesmas cores do site; gráficos com as cores validadas para o fundo escuro. */
:root {
  --bg: #0b1422;
  --surface: #111e30;
  --surface-2: #162741;
  --surface-3: #1c3150;
  --ink: #eef3f8;
  --muted: #b1bed0;
  --subtle: #8495ad;
  --line: #2a3b53;
  --line-forte: #3a4f6c;
  /* Destaque da interface: o laranja do site (botões, menu ativo, focos, etapas). */
  --destaque: #f29a63;
  --destaque-forte: #f6b083;
  --destaque-fundo: #3a2618;
  --destaque-claro: #f6c9a8;
  --sobre-destaque: #101925;
  /* Azul: só identifica Automação, como no site. */
  --automacao: #65aaf5;
  --azul: var(--destaque);
  --azul-forte: var(--destaque-forte);
  --laranja: #f29a63;
  /* Cores de gráfico (validate_palette: passa em fundo escuro, inclusive daltonismo) */
  --graf-calculos: #d4793f;
  --graf-automacao: #4f97e3;
  /* Estados: sempre com ícone e texto, nunca só cor */
  --ok: #8de0b4;
  --alerta: #f2c46b;
  --critico: #ff8f8f;
  --ok-fundo: #12302a;
  --alerta-fundo: #33291a;
  --critico-fundo: #3a1c24;
  --whatsapp: #25d366;
  --radius: 14px;
  --radius-sm: 10px;
  --sombra: 0 18px 50px #02060dcc;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icone { width: 18px; height: 18px; flex: none; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line-forte); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); cursor: pointer;
  white-space: nowrap; text-decoration: none; font-weight: 500;
}
.botao:hover { border-color: #557195; background: var(--surface-3); }
.botao:disabled { opacity: .55; cursor: progress; }
.botao--primario { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); font-weight: 700; }
.botao--primario:hover { background: var(--azul-forte); border-color: var(--azul-forte); }
.botao--fantasma { background: transparent; border-color: transparent; color: var(--muted); }
.botao--fantasma:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.botao--perigo { background: transparent; border-color: #6b3a44; color: var(--critico); }
.botao--perigo:hover, .botao--perigo.is-confirmando { background: var(--critico-fundo); border-color: var(--critico); }
.botao--whatsapp { background: #0f3324; border-color: #1d6b45; color: #b9f5d2; }
.botao--whatsapp:hover { background: #134330; border-color: var(--whatsapp); }
.botao--pequeno { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.botao--icone { min-width: 38px; padding: 0; }
.botao--pequeno.botao--icone { min-width: 30px; min-height: 30px; }
.botao--pequeno .icone { width: 16px; height: 16px; }
.botao--largo { width: 100%; min-height: 44px; }

/* ---------- Campos ---------- */
.campo { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
.campo > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line-forte); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 400;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #6f809a; }
input:focus, select:focus, textarea:focus { border-color: #f29a63b3; outline: none; box-shadow: 0 0 0 3px #f29a6326; }
input[type="date"] { color-scheme: dark; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--azul); width: 16px; height: 16px; }
.campos-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aviso { min-height: 1.2em; color: var(--critico); font-size: 13px; }
.aviso.is-ok { color: var(--ok); }
fieldset.campo { border: 0; margin: 0; padding: 0; }
fieldset.campo legend { padding: 0; margin-bottom: 6px; }

/* ---------- Etiquetas ---------- */
.servico {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 2px 9px 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); white-space: nowrap;
}
.servico::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.servico--calculos::before { background: var(--laranja); }
.servico--automacao::before { background: var(--automacao); }
.origem { padding: 1px 8px; border-radius: 999px; border: 1px dashed var(--line-forte); color: var(--muted); font-size: 12px; white-space: nowrap; }
.etapa-pill { padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.etapa-pill--caixa { background: var(--destaque-fundo); color: var(--destaque-claro); }
.etapa-pill--ok { background: var(--ok-fundo); color: var(--ok); }

.chip-prazo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip-prazo .icone { width: 13px; height: 13px; }
.chip-prazo--critico { background: var(--critico-fundo); color: var(--critico); }
.chip-prazo--alerta { background: var(--alerta-fundo); color: var(--alerta); }
.chip-prazo--neutro { background: var(--surface-3); color: var(--muted); }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #24436b, #1a2f4c); border: 1px solid var(--line-forte);
  color: #dbe8f7; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.avatar--pequeno { width: 26px; height: 26px; font-size: 10px; }
.avatar--medio { width: 42px; height: 42px; font-size: 14px; }
.avatar--grande { width: 52px; height: 52px; font-size: 17px; }

/* ---------- Login ---------- */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1000px 600px at 20% 0%, #15335a66, transparent 60%), radial-gradient(800px 500px at 100% 100%, #5a331566, transparent 60%), var(--bg);
}
.login-cartao {
  width: min(400px, 100%); display: grid; gap: 18px; padding: 32px;
  border: 1px solid var(--line); border-radius: 20px; background: #111e30e6; box-shadow: var(--sombra);
}
.login-logo { width: 150px; height: auto; }
.login-cartao h1 { font-size: 22px; }
.login-cartao p { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- Estrutura ---------- */
.app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px;
  padding: 22px 14px 16px; border-right: 1px solid var(--line); background: #0d1828;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--muted); text-decoration: none; }
.marca img { width: 112px; height: auto; }
.marca span { padding-left: 10px; border-left: 1px solid var(--line-forte); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.nav { display: grid; gap: 14px; }
.nav-grupo { display: grid; gap: 3px; }
/* O traço só aparece depois de um bloco visível (o funcionário não tem a Visão geral). */
.nav-grupo:not([hidden]) ~ .nav-grupo { padding-top: 14px; border-top: 1px solid var(--line); }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; text-align: left; font-weight: 500;
}
.nav-item:hover { background: var(--surface); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 3px 0 0 var(--azul); }
.nav-item .icone { width: 19px; height: 19px; }
.nav-rotulo { flex: 1; }
.nav-contagem:empty { display: none; }
.nav-contagem { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.nav-contagem.is-novo { background: var(--destaque); color: var(--sobre-destaque); }
.lateral-rodape { margin-top: auto; display: grid; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.eu { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eu-texto { display: grid; min-width: 0; }
.eu-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-texto small { color: var(--subtle); font-size: 12px; }
#sair { justify-self: start; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 12px 28px; border-bottom: 1px solid var(--line); background: #0b1422ee; backdrop-filter: blur(8px);
}
.busca { position: relative; flex: 1; max-width: 520px; }
.busca-campo { position: relative; display: block; }
.busca-campo input { padding-left: 38px; padding-right: 36px; min-height: 40px; background: var(--surface); }
.busca-campo::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
  background: currentColor; color: var(--subtle);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.busca kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 0 6px; border: 1px solid var(--line-forte); border-radius: 5px; color: var(--subtle); font: 12px/18px ui-monospace, monospace; }
.busca-campo input:focus + kbd { display: none; }
.busca-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--line-forte); border-radius: var(--radius); background: var(--surface); box-shadow: var(--sombra);
}
.resultado { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; }
.resultado-texto { display: grid; flex: 1; min-width: 0; }
.resultado-texto strong, .resultado-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado-texto small { color: var(--subtle); font-size: 12px; }
[aria-selected="true"] > .resultado, .resultado:hover { background: var(--surface-2); }
.resultado-vazio { padding: 10px; color: var(--muted); }
.atualizado { margin-left: auto; color: var(--subtle); font-size: 12px; white-space: nowrap; }
#atualizar.is-girando .icone { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.tela { padding: 28px 28px 56px; outline: none; }
.tela-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tela-topo h1 { font-size: 24px; letter-spacing: -.01em; }
.tela-topo p { margin-top: 4px; color: var(--muted); max-width: 680px; }

.ferramentas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.segmentado { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.segmento { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; font-size: 14px; }
.segmento b { padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 11px; color: var(--muted); }
.segmento[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); }
.segmento[aria-pressed="true"] b { background: var(--destaque); color: var(--sobre-destaque); }
.campo-filtro { position: relative; display: flex; align-items: center; flex: 1 1 220px; max-width: 340px; }
.campo-filtro .icone { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--subtle); pointer-events: none; }
.campo-filtro input { padding-left: 34px; min-height: 38px; background: var(--surface); }

/* ---------- Visão geral ---------- */
.visao-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.visao-data { color: var(--subtle); font-size: 13px; }
.visao-titulo { font-size: 28px; letter-spacing: -.02em; margin: 2px 0 4px; }
.visao-resumo { color: var(--muted); }

.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile {
  display: grid; gap: 6px; align-content: start; padding: 18px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.tile:hover { border-color: var(--line-forte); background: #13223a; }
.tile-rotulo { color: var(--muted); font-size: 13px; font-weight: 500; }
.tile-rotulo small { color: var(--subtle); font-size: 12px; font-weight: 400; }
.tile-valor { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile-detalhe { color: var(--subtle); font-size: 12px; }

.grade-visao { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.cartao-visao { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.cartao-visao > header h2 { font-size: 15px; }
.cartao-visao > header p { color: var(--subtle); font-size: 12px; margin-top: 2px; }
.grade-visao > :nth-child(1) { grid-column: span 8; }
.grade-visao > :nth-child(2) { grid-column: span 4; }
.grade-visao > :nth-child(3) { grid-column: span 4; }
.grade-visao > :nth-child(4) { grid-column: span 4; }
.grade-visao > :nth-child(5) { grid-column: span 4; }

/* Gráfico de barras */
.grafico { display: grid; gap: 10px; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.amostra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.amostra--calculos { background: var(--graf-calculos); }
.amostra--automacao { background: var(--graf-automacao); }
.grafico-area { position: relative; min-height: 210px; }
.grafico-area svg { display: block; overflow: visible; }
.grade { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.eixo-base { stroke: var(--line-forte); stroke-width: 1; }
.eixo-texto { fill: var(--subtle); font-size: 11px; font-variant-numeric: tabular-nums; }
.valor-texto { fill: var(--ink); font-size: 12px; font-weight: 700; }
.alvo { fill: transparent; cursor: pointer; }
.alvo.is-ativo { fill: #ffffff08; }
.dica {
  position: absolute; z-index: 2; display: grid; gap: 3px; min-width: 140px; padding: 9px 11px; pointer-events: none;
  border: 1px solid var(--line-forte); border-radius: 10px; background: #0d1828f2; box-shadow: var(--sombra); font-size: 12px; color: var(--muted);
}
.dica strong { color: var(--ink); font-size: 12px; }
.dica span { display: flex; align-items: center; gap: 6px; }
.dica-total { color: var(--ink); font-weight: 600; }
.ver-dados summary { color: var(--subtle); font-size: 12px; cursor: pointer; }
.tabela-dados { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.tabela-dados th, .tabela-dados td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.tabela-dados th:first-child, .tabela-dados td:first-child { text-align: left; }
.tabela-dados th { color: var(--muted); font-weight: 500; }

/* Divisão por serviço */
.divisao-caixa { display: grid; gap: 14px; }
.divisao { display: flex; gap: 2px; height: 14px; }
.divisao-parte { min-width: 6px; flex-basis: 0; }
.divisao-parte:first-child { border-radius: 4px 0 0 4px; }
.divisao-parte:last-child { border-radius: 0 4px 4px 0; }
.divisao-parte:only-child { border-radius: 4px; }
.divisao-parte--calculos { background: var(--graf-calculos); }
.divisao-parte--automacao { background: var(--graf-automacao); }
.divisao-legenda { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.divisao-legenda li { display: grid; grid-template-columns: auto 1fr auto 44px; align-items: center; gap: 8px; font-size: 14px; }
.divisao-legenda strong { font-variant-numeric: tabular-nums; }
.divisao-legenda small { color: var(--subtle); text-align: right; font-variant-numeric: tabular-nums; }
.conversao { display: flex; align-items: baseline; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.conversao strong { font-size: 26px; letter-spacing: -.02em; }
.conversao span { color: var(--muted); font-size: 13px; }

/* Funil */
.funil { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.funil-linha { display: grid; grid-template-columns: 128px 1fr 30px; align-items: center; gap: 10px; width: 100%; padding: 5px 6px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; }
.funil-linha:hover { background: var(--surface-2); }
.funil-nome { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funil-trilho { height: 10px; border-radius: 4px; background: #0b1422; overflow: hidden; }
.funil-barra { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--graf-automacao); }
.funil li:first-child .funil-barra { background: #3d6fa8; }
.funil-valor { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }

/* Pendências */
.pendencias { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pendencia { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; text-align: left; }
.pendencia:hover { border-color: var(--line-forte); }
.pendencia-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.pendencia-icone .icone { width: 16px; height: 16px; }
.pendencia-texto { display: grid; min-width: 0; }
.pendencia-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendencia-texto span { color: var(--muted); font-size: 12px; }
.pendencia-nivel { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pendencia--critico .pendencia-icone, .pendencia--critico .pendencia-nivel { background: var(--critico-fundo); color: var(--critico); }
.pendencia--alerta .pendencia-icone, .pendencia--alerta .pendencia-nivel { background: var(--alerta-fundo); color: var(--alerta); }
.pendencia--neutro .pendencia-icone, .pendencia--neutro .pendencia-nivel { background: var(--surface-3); color: var(--muted); }
.tudo-certo { display: flex; align-items: center; gap: 10px; color: var(--ok); font-size: 14px; }
.mais-itens { margin-top: 8px; color: var(--subtle); font-size: 12px; }
.vazio-mini { color: var(--subtle); font-size: 13px; }

/* Atividade */
.atividade { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.atividade li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.atividade p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.atividade q { display: block; margin-top: 2px; color: var(--ink); font-style: italic; quotes: "“" "”"; }
.atividade time { color: var(--subtle); font-size: 11px; }
.atividade-icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.atividade-icone .icone { width: 15px; height: 15px; }
.atividade-icone--chegada { background: var(--destaque-fundo); color: var(--destaque); }
.atividade-icone--nota { background: #3a2a1a; color: var(--laranja); }
.link-contato { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-forte); text-underline-offset: 3px; }
.link-contato:hover { text-decoration-color: var(--azul); }

/* ---------- Caixa de entrada ---------- */
.grupos { display: grid; gap: 22px; }
.grupo-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--subtle); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.grupo-titulo small { color: var(--subtle); font-weight: 400; }
.lista-contatos { position: relative; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.contato { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 12px; border-bottom: 1px solid var(--line); }
.contato:last-child { border-bottom: 0; }
.contato:hover { background: #13223a; }
.contato-principal { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 12px 6px 12px 0; border: 0; background: none; cursor: pointer; text-align: left; }
.contato-marcador { display: grid; place-items: center; width: 18px; flex: none; }
.ponto-novo { width: 8px; height: 8px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 0 3px #f29a6333; }
.contato-texto { display: grid; gap: 3px; flex: 1; min-width: 0; }
.contato-linha1 { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.contato-nome { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.contato.is-novo .contato-nome { color: #fff; }
.contato:not(.is-novo) .contato-nome { font-weight: 500; }
.contato-previa { color: var(--subtle); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Colunas fixas à direita de cada linha: o mesmo dado sempre na mesma posição. */
.contato-colunas { display: grid; align-items: center; column-gap: 14px; flex: none; }
.contato-colunas--entrada { grid-template-columns: 150px 150px 34px 28px 172px; }
.contato-colunas--arquivo { grid-template-columns: 150px 34px 28px 158px; }
.contato-colunas--entrada-func { grid-template-columns: 150px 34px 172px; }
.botao--avancar { width: 100%; }
.celula--mover .mover-para { width: 100%; }
.contato-colunas--concluidos { grid-template-columns: 150px 28px 112px 104px; }
.contato-colunas--concluidos-func { grid-template-columns: 150px; }
.celula { display: flex; align-items: center; min-width: 0; }
.celula--situacao { flex-direction: column; align-items: flex-end; gap: 5px; cursor: pointer; }
.celula--situacao time { color: var(--subtle); font-size: 12px; white-space: nowrap; }
.celula--icone { justify-content: center; }
.celula--icone .botao--icone { color: #7fe0a8; }
.celula--valor { justify-content: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.celula--valor.is-vazio { color: var(--subtle); font-weight: 400; }
.celula--acao { justify-content: flex-end; }
.mover-para {
  width: 100%; min-height: 32px; padding: 0 30px 0 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  border-color: #405773; background-color: #0a1625; color: var(--ink);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f29a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 15px;
}
.mover-para:hover { border-color: var(--azul); }
.mover-para option { background: var(--surface); color: var(--ink); font-weight: 400; }
.vazio { display: grid; justify-items: center; gap: 12px; padding: 56px 16px; border: 1px dashed var(--line-forte); border-radius: var(--radius); color: var(--muted); text-align: center; }
.vazio-icone { width: 36px; height: 36px; color: var(--subtle); }

/* ---------- Andamento ---------- */
.quadro { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; scroll-padding-inline: 0; }
.coluna { display: flex; flex-direction: column; min-width: 0; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: #0f1b2c; scroll-snap-align: start; }
.coluna.is-alvo { border-color: var(--destaque); background: #1c1a1d; }
.coluna-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--line); }
.coluna-nome { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.coluna-passo { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 11px; }
.coluna--entregue .coluna-passo { background: var(--ok-fundo); color: var(--ok); }
.coluna-info { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.coluna-info small { color: var(--subtle); font-size: 11px; }
.coluna-cartoes { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 10px; flex: 1; }
.coluna-cartoes > .botao { white-space: normal; height: auto; padding: 6px 10px; line-height: 1.3; }
.coluna-vazia { margin: 6px 2px; padding: 16px 8px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: #6f809a; font-size: 12px; text-align: center; }

.cartao { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.cartao:hover { border-color: var(--line-forte); background: #142540; }
.cartao.is-novo { box-shadow: inset 3px 0 0 var(--azul); }
.cartao.is-arrastando { opacity: .4; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.cartao-nome { font-size: 15px; overflow-wrap: anywhere; }
.cartao-detalhes { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cartao-valor { color: var(--ink); font-weight: 600; }
.cartao-valor.is-pago small { color: var(--ok); font-weight: 600; }
.cartao-rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.sem-responsavel { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--line-forte); color: var(--subtle); }
.sem-responsavel .icone { width: 13px; height: 13px; }
.cartao-notas { display: inline-flex; align-items: center; gap: 3px; color: var(--subtle); font-size: 12px; }
.cartao-notas .icone { width: 14px; height: 14px; }
.cartao-tempo { color: var(--subtle); font-size: 11px; }
.cartao-setas { display: flex; gap: 4px; margin-left: auto; }

/* ---------- Agenda ---------- */
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.calendario-caixa { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.agenda-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.agenda-mes { min-width: 170px; text-align: center; font-size: 17px; }
.agenda-resumo { display: flex; gap: 14px; margin-left: auto; color: var(--muted); font-size: 13px; }
.agenda-resumo span { display: inline-flex; align-items: center; gap: 6px; }
.ponto-evento { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ponto-evento--prazo { background: var(--alerta); }
.ponto-evento--pagamento { background: var(--ok); }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendario-semana { padding: 4px 6px; color: var(--subtle); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.dia { display: flex; flex-direction: column; gap: 4px; min-height: 96px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); min-width: 0; }
.dia--fora { opacity: .4; }
.dia--hoje { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.dia-numero { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dia--hoje .dia-numero { color: var(--azul); font-weight: 700; }
.dia-eventos { display: grid; gap: 3px; }
.evento { display: flex; align-items: center; gap: 5px; width: 100%; padding: 2px 6px; border: 0; border-radius: 5px; background: var(--surface-2); font-size: 11px; text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.evento:hover { background: var(--surface-3); }
.evento.is-feito { opacity: .55; text-decoration: line-through; }
.evento.is-atrasado { background: var(--critico-fundo); color: var(--critico); }
.dia-mais { color: var(--subtle); font-size: 11px; padding-left: 4px; }
.dia-pontos { display: none; gap: 3px; }
.proximos { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.proximos h2 { font-size: 15px; }
.proximos-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; align-content: start; overflow-y: auto; }
/* Ao lado do calendário, a lista não dita a altura: acompanha o calendário e rola por dentro. */
@media (min-width: 981px) {
  .proximos { contain: size; }
}
.proximo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; text-align: left; }
.proximo:hover { border-color: var(--line-forte); }
.proximo-data { display: grid; justify-items: center; width: 42px; padding: 4px 0; border-radius: 8px; background: var(--surface-2); line-height: 1.1; }
.proximo-data b { font-size: 17px; }
.proximo-data small { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.proximo--critico .proximo-data { background: var(--critico-fundo); color: var(--critico); }
.proximo--alerta .proximo-data { background: var(--alerta-fundo); color: var(--alerta); }
.proximo-texto { display: grid; min-width: 0; }
.proximo-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proximo-texto span { color: var(--muted); font-size: 12px; }

/* ---------- Equipe ---------- */
.equipe-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.equipe-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.equipe-lado > :last-child { flex: 1; }
.bloco { display: grid; gap: 14px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.bloco-topo h2, .bloco-topo h3 { font-size: 15px; }
.equipe { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pessoa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.pessoa-texto { display: grid; gap: 2px; flex: 1; min-width: 180px; }
.pessoa-texto span { color: var(--subtle); font-size: 12px; }
.voce { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 600; }
.pessoa-acoes { display: flex; gap: 6px; }
.pessoa-senha { display: flex; gap: 8px; width: 100%; }
.form-equipe { align-content: start; }
.form-acoes { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Ficha ---------- */
.ficha {
  /* Ocupa quase a tela toda e deixa uma faixa estreita da lista à esquerda, para não perder o contexto. */
  position: fixed; inset: 0 0 0 auto; width: min(1600px, 93vw); height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line-forte);
  background: var(--bg); color: var(--ink); box-shadow: var(--sombra);
}
.ficha[open] { display: flex; flex-direction: column; }
.ficha::backdrop, .janela::backdrop { background: #03070ecc; backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) {
  .ficha[open] { animation: entrar-lado .22s cubic-bezier(.2, .8, .2, 1); }
  .janela[open] { animation: surgir .18s ease-out; }
}
@keyframes entrar-lado { from { transform: translateX(40px); opacity: 0; } }
@keyframes surgir { from { transform: translateY(8px); opacity: 0; } }
.ficha-topo { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ficha-topo--simples { justify-content: space-between; }
.ficha-titulo { flex: 1; min-width: 0; }
.ficha-titulo h2 { font-size: 20px; overflow-wrap: anywhere; }
.ficha-titulo p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; color: var(--muted); font-size: 13px; }
.ficha-corpo { flex: 1; overflow-y: auto; padding: 20px 28px 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.ficha-etapas { position: relative; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ficha-etapas-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.ficha-etapas-topo h3 { font-size: 15px; }
.concluido { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; font-size: 14px; }
.trilha { display: grid; grid-template-columns: repeat(8, minmax(74px, 1fr)); margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.trilha li { position: relative; }
.trilha li + li::before { content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 2px; background: var(--line-forte); }
.trilha li:has(.trilha-passo--feito)::before, .trilha li:has(.trilha-passo--atual)::before { background: var(--azul); }
.trilha-passo { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; width: 100%; padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--subtle); }
.trilha-ponto { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-forte); background: var(--bg); font-size: 12px; font-weight: 700; }
.trilha-ponto .icone { width: 16px; height: 16px; }
.trilha-nome { font-size: 11px; line-height: 1.25; text-align: center; }
.trilha-passo:hover .trilha-ponto { border-color: var(--azul); }
.trilha-passo--feito { color: var(--muted); }
.trilha-passo--feito .trilha-ponto { border-color: var(--destaque); background: var(--destaque-fundo); color: var(--destaque); }
.trilha-passo--atual { color: var(--ink); font-weight: 600; }
.trilha-passo--atual .trilha-ponto { border-color: var(--destaque); background: var(--destaque); color: var(--sobre-destaque); box-shadow: 0 0 0 4px #f29a6333; }
.ficha-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-acoes .botao--perigo { margin-left: auto; }
/* Cartões lado a lado sempre com a mesma altura: a coluna estica e o último cartão ocupa a sobra. */
.ficha-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ficha-coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ficha-coluna > :last-child { flex: 1; }
/* Dados lado a lado: cabem quantos couberem na largura; textos longos usam a linha toda. */
.dados { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.dado { min-width: 0; max-width: 100%; }
.dado--largo { flex-basis: 100%; }
.dado dt { color: var(--subtle); font-size: 12px; font-weight: 500; margin-bottom: 2px; }
.dado dd { margin: 0; overflow-wrap: anywhere; }
.dados--texto dd { white-space: pre-wrap; line-height: 1.55; }
.com-acao { display: inline-flex; align-items: center; gap: 4px; }
.form-dados { display: grid; gap: 12px; }
.negocio { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.prefixo { position: relative; display: block; }
.prefixo i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--subtle); font-style: normal; font-size: 14px; }
.prefixo input { padding-left: 38px; font-variant-numeric: tabular-nums; }
.salvo { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 12px; font-weight: 600; }
.salvo .icone { width: 15px; height: 15px; }
.negocio-resumo { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--alerta-fundo); color: var(--alerta); font-size: 14px; font-weight: 500; }
.negocio-resumo.is-pago { background: var(--ok-fundo); color: var(--ok); }
.anotar { display: grid; gap: 8px; justify-items: end; }
.linha-tempo { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.evento-linha { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 8px 0; }
.evento-linha + .evento-linha::before { content: ""; position: absolute; left: 13px; top: -10px; height: 18px; width: 2px; background: var(--line); }
.evento-icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.evento-icone .icone { width: 14px; height: 14px; }
.evento-linha--nota .evento-icone { background: #3a2a1a; color: var(--laranja); }
.evento-linha--chegada .evento-icone { background: var(--destaque-fundo); color: var(--destaque); }
.evento-linha--etapa .evento-icone { background: var(--destaque-fundo); color: var(--destaque-forte); }
.evento-conteudo { min-width: 0; font-size: 13px; color: var(--muted); }
.evento-conteudo strong { color: var(--ink); }
.evento-conteudo time { display: block; color: var(--subtle); font-size: 11px; margin-top: 2px; }
.nota-texto { padding: 10px 12px; border: 1px solid #4a3622; border-radius: 4px 12px 12px 12px; background: #1d1912; }
.nota-texto p { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 3px; line-height: 1.5; }
.apagar-nota { opacity: 0; }
.evento-linha:hover .apagar-nota, .apagar-nota:focus-visible { opacity: 1; }
.carregando { color: var(--subtle); font-size: 13px; padding: 8px 0; }

/* ---------- Cadastro ---------- */
.janela {
  width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden;
  border: 1px solid var(--line-forte); border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: var(--sombra);
}
.form-novo { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.form-novo .ficha-topo h2 { font-size: 18px; }
.novo-corpo { display: grid; gap: 14px; padding: 18px 22px; overflow-y: auto; }
.form-novo footer { padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.escolha-servico { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcao-servico { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line-forte); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 14px; }
.opcao-servico:has(input:checked) { border-color: var(--destaque); background: var(--destaque-fundo); }
.caixa-marcar { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; cursor: pointer; }
.caixa-marcar strong { color: var(--ink); }

/* ---------- Avisos ---------- */
.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: grid; gap: 8px; width: min(420px, calc(100% - 32px)); }
.aviso-flutuante {
  display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px;
  border: 1px solid var(--line-forte); border-radius: 12px; background: var(--surface-2); box-shadow: var(--sombra); font-size: 14px;
}
.aviso-flutuante > span { flex: 1; }
.aviso-flutuante > .icone { color: var(--ok); }
.aviso-flutuante--erro { border-color: #6b3a44; }
.aviso-flutuante--erro > .icone { color: var(--critico); }
.aviso-flutuante--novo { border-color: #f29a6366; background: #241c1a; }
.aviso-flutuante--novo > .icone { color: var(--azul); }
@media (prefers-reduced-motion: no-preference) {
  .aviso-flutuante { animation: surgir .2s ease-out; }
}

/* ---------- Telas médias ---------- */
@media (max-width: 1240px) {
  .grade-visao > :nth-child(n) { grid-column: span 6; }
  .grade-visao > :nth-child(1) { grid-column: span 12; }
  .grade-visao > :nth-child(5) { grid-column: span 12; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral, .nav { min-width: 0; }
  .lateral {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px;
    padding: 12px 16px 0; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .marca img { width: 96px; }
  .lateral-rodape { order: 2; margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; }
  .eu-texto { display: none; }
  .nav { order: 3; width: 100%; display: flex; gap: 2px; overflow-x: auto; margin: 0 -4px; padding-bottom: 2px; scrollbar-width: none; }
  .nav-grupo { display: flex; gap: 2px; flex: none; }
  .nav-grupo:not([hidden]) ~ .nav-grupo { padding: 0 0 0 4px; margin-left: 2px; border-top: 0; border-left: 1px solid var(--line); }
  .nav-item { width: auto; min-height: 44px; padding: 0 12px; border-radius: 10px 10px 0 0; white-space: nowrap; }
  .nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--azul); background: transparent; }
  .barra { padding: 10px 16px; }
  .atualizado { display: none; }
  .tela { padding: 20px 16px 48px; }
  .agenda { grid-template-columns: 1fr; }
  .equipe-grade { grid-template-columns: 1fr; }
  .ficha-grade { grid-template-columns: 1fr; }
  .ficha { width: 100%; }
}

/* ---------- Celular ---------- */
@media (max-width: 680px) {
  .some-no-celular { display: none; }
  #novo-contato { min-width: 40px; padding: 0 10px; }
  .grade-visao > :nth-child(n) { grid-column: span 12; }
  .visao-topo { flex-direction: column; align-items: stretch; }
  .visao-titulo { font-size: 24px; }
  .tile { padding: 14px; }
  .tile-valor { font-size: 24px; }
  .tela-topo { flex-direction: column; align-items: stretch; }
  .tela-topo h1 { font-size: 21px; }
  .ferramentas .segmentado { max-width: 100%; overflow-x: auto; }
  .campo-filtro { max-width: none; }
  .contato { flex-wrap: wrap; padding: 0 12px 10px 12px; }
  .contato-principal { flex-basis: 100%; padding-bottom: 6px; }
  /* No celular, as colunas descem para baixo do nome, lado a lado. */
  .contato-colunas { width: 100%; padding-left: 30px; column-gap: 10px; }
  .contato-colunas--entrada { grid-template-columns: minmax(0, 1fr) 34px 28px auto; }
  .contato-colunas--entrada .celula--mover { grid-column: 1 / -1; order: 9; margin-top: 6px; }
  .contato-colunas--arquivo { grid-template-columns: 1fr 34px 28px auto; }
  .botao--avancar { width: auto; }
  .contato-colunas--entrada-func { grid-template-columns: 1fr 34px auto; }
  .contato-colunas--concluidos { grid-template-columns: 1fr 28px auto auto; }
  .contato-colunas--concluidos-func { grid-template-columns: 1fr; }
  .celula--situacao { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
  .quadro { grid-auto-columns: 84%; }
  .dia { min-height: 46px; padding: 4px; align-items: center; }
  .dia-eventos { display: none; }
  .dia-pontos { display: flex; }
  .agenda-resumo { margin-left: 0; width: 100%; }
  .agenda-mes { min-width: 0; flex: 1; }
  .calendario-caixa { padding: 10px; }
  .calendario { gap: 2px; }
  .funil-linha { grid-template-columns: 104px 1fr 26px; }
  .ficha-topo { padding: 14px 16px; }
  .ficha-corpo { padding: 14px 16px 32px; }
  .ficha-acoes .botao--perigo { margin-left: 0; }
  .negocio, .campos-lado { grid-template-columns: 1fr; }
  .avisos { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* ---------- Cor do serviço nos cartões (como no site: laranja = cálculos, azul = automação) ---------- */
.cartao--calculos { border-color: #f29a6340; background: linear-gradient(160deg, #2a1d17 0%, #17202f 55%); box-shadow: inset 3px 0 0 var(--laranja); }
.cartao--automacao { border-color: #65aaf540; background: linear-gradient(160deg, #13284a 0%, #121f33 55%); box-shadow: inset 3px 0 0 var(--automacao); }
.cartao--calculos:hover { border-color: #f29a6380; background: linear-gradient(160deg, #32221a 0%, #182335 55%); }
.cartao--automacao:hover { border-color: #65aaf580; background: linear-gradient(160deg, #16305a 0%, #142439 55%); }
.cartao--calculos .cartao-rodape { border-top-color: #f29a6326; }
.cartao--automacao .cartao-rodape { border-top-color: #65aaf526; }
.cartao.is-novo { outline: 1px solid var(--azul); outline-offset: -1px; }
.contato--calculos { box-shadow: inset 3px 0 0 #f29a63b3; }
.contato--automacao { box-shadow: inset 3px 0 0 #65aaf5b3; }
.ficha--calculos .ficha-topo { background: linear-gradient(120deg, #2a1d17, var(--surface) 60%); border-bottom-color: #f29a6340; }
.ficha--automacao .ficha-topo { background: linear-gradient(120deg, #13284a, var(--surface) 60%); border-bottom-color: #65aaf540; }

/* ---------- Filtros em lista ---------- */
.lista-suspensa { position: relative; display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lista-suspensa.is-ativa { border-color: var(--azul); }
.lista-suspensa-rotulo { padding: 0 2px 0 12px; color: var(--subtle); font-size: 12px; font-weight: 600; white-space: nowrap; }
.lista-suspensa select {
  min-height: 36px; width: auto; min-width: 150px; padding: 0 34px 0 8px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 14px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238495ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
.lista-suspensa select:focus { box-shadow: none; }
.lista-suspensa:focus-within { border-color: #f29a63b3; box-shadow: 0 0 0 3px #f29a6326; }
.lista-suspensa option { background: var(--surface); color: var(--ink); }

/* ---------- Documentos ---------- */
.titulo-icone { display: inline-flex; align-items: center; gap: 8px; }
.titulo-icone .icone { width: 17px; height: 17px; color: var(--muted); }
.bloco--documentos-anexados { gap: 10px; }
.bloco--documentos-anexados .documento { padding: 7px 10px; }
.bloco--documentos.is-destaque { border-color: #f29a6366; box-shadow: 0 0 0 3px #f29a6314; }
.dica-etapa { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--destaque-fundo); color: var(--destaque-claro); font-size: 13px; }
.documentos { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.documento { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.documento-nome { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.documento-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.documento-nome:hover span { text-decoration: underline; text-underline-offset: 3px; }
.documento-nome .icone { color: var(--muted); }
.documento-info { grid-column: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--subtle); font-size: 12px; }
.documento .botao { grid-column: 2; grid-row: 1 / span 2; }
.botao.is-confirmando { color: var(--critico); background: var(--critico-fundo); }
.categoria { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-3); color: var(--muted); }
.categoria--nota { background: #12302a; color: var(--ok); }
.categoria--ordem { background: #213a5c; color: #cfe3fb; }
.envio { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: end; }
.zona-envio {
  display: grid; justify-items: center; gap: 2px; padding: 12px; border: 1px dashed var(--line-forte); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--muted); font-size: 13px; text-align: center; cursor: pointer;
}
.zona-envio .icone { color: var(--azul); }
.zona-envio strong { color: var(--ink); }
.zona-envio small { color: var(--subtle); font-size: 11px; }
.zona-envio:hover, .zona-envio.is-alvo { border-color: var(--destaque); background: #1c1a1d; }
.zona-envio.is-enviando { opacity: .6; pointer-events: none; }
#documento-arquivo:focus-visible + .zona-envio { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------- Acessos ---------- */
.papel { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.papel .icone { width: 14px; height: 14px; }
.papel--admin { background: #2a1d17; color: var(--laranja); }
.papel--funcionario { background: #13284a; color: var(--automacao); }
.papel-select { width: auto; min-height: 32px; padding: 0 10px; font-size: 13px; }
.escolha-papel { display: grid; gap: 8px; }
.opcao-papel { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-forte); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; }
.opcao-papel input { margin-top: 3px; }
.opcao-papel span { display: grid; gap: 2px; }
.opcao-papel strong { color: var(--ink); font-size: 14px; }
.opcao-papel small { color: var(--subtle); font-size: 12px; font-weight: 400; }
.opcao-papel:has(input:checked) { border-color: var(--destaque); background: var(--destaque-fundo); }
.explicacao-papeis { gap: 12px; }
.papel-linha { display: grid; gap: 6px; justify-items: start; }
.papel-linha p { color: var(--muted); font-size: 13px; }
.lateral-botoes { display: flex; gap: 4px; flex-wrap: wrap; }
.janela--pequena { width: min(420px, calc(100% - 32px)); }
.form-senha { display: grid; gap: 14px; padding: 22px; }
.form-senha h2 { font-size: 18px; }

@media (max-width: 680px) {
  .envio { grid-template-columns: 1fr; }
  .lista-suspensa { flex: 1 1 100%; }
  .lista-suspensa select { flex: 1; min-width: 0; }
  .lateral-botoes .botao span { display: none; }
}

/* ---------- Concluídos e etapas do administrador ---------- */
.aviso-concluida { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #1d6b45; border-radius: var(--radius); background: var(--ok-fundo); color: #c9f2dc; font-size: 14px; }
.aviso-concluida .icone { color: var(--ok); width: 20px; height: 20px; }
.aviso-concluida strong { color: var(--ok); }
.trilha-passo.is-travado { cursor: default; opacity: .55; }
.trilha-passo.is-travado:hover .trilha-ponto { border-color: var(--line-forte); }
.trilha-passo--feito.is-travado .trilha-ponto { border-color: var(--azul); }
.aguardando-liberacao { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.aguardando-liberacao .icone { width: 16px; height: 16px; }
.contato.is-concluido .contato-nome { font-weight: 500; }
.etapa-pill .icone { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.nav-contagem--neutra { background: var(--ok-fundo); color: var(--ok); }

/* ---------- Ficha em abas ---------- */
.trilha-passo.is-aberta .trilha-nome { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--azul); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.trilha-passo.is-aberta .trilha-ponto { box-shadow: 0 0 0 4px #f29a6340; }
.trilha-passo.is-bloqueado { cursor: not-allowed; opacity: 1; }
.trilha-passo.is-bloqueado .trilha-ponto { border-color: var(--critico); background: var(--critico-fundo); color: var(--critico); }
.trilha-passo.is-bloqueado .trilha-ponto .icone { width: 15px; height: 15px; }
.trilha-passo.is-bloqueado .trilha-nome { color: var(--critico); }
.trilha-passo.is-bloqueado:hover .trilha-ponto { border-color: var(--critico); }
.ficha-painel { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--line-forte); border-radius: var(--radius); background: #0d1828; min-width: 0; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.painel-topo h3 { font-size: 17px; }
.estado-aba { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.estado-aba--atual { background: var(--destaque-fundo); color: var(--destaque-claro); }
.estado-aba--feito { background: var(--ok-fundo); color: var(--ok); }
.estado-aba--futuro { background: var(--surface-3); color: var(--muted); }
.painel-rodape { display: flex; justify-content: flex-end; }
.painel-rodape--destaque { padding-top: 4px; }
.bloco-dica { color: var(--subtle); font-size: 12px; margin-top: -6px; }
.dica-etapa { display: flex; align-items: center; gap: 8px; }
.dica-etapa .icone { width: 16px; height: 16px; flex: none; }
.campo--largo { grid-column: 1 / -1; }
.envio--simples { grid-template-columns: 1fr; }
.comentarios { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.comentario { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.comentario-corpo { padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; background: var(--bg); min-width: 0; }
.comentario-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.comentario-topo time { color: var(--subtle); font-size: 11px; }
.comentario-corpo p { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: 14px; }
.comentario:hover .apagar-nota { opacity: 1; }
.bloco--comentarios.is-destaque { border-color: #f2c46b66; background: linear-gradient(160deg, #2a2414, var(--surface) 55%); }
.bloco--comentarios.is-destaque .titulo-icone .icone { color: var(--alerta); }
.chamada-entrega { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid #f29a6352; border-radius: var(--radius); background: linear-gradient(145deg, #f29a631f, #f29a6309); color: var(--destaque-claro); font-size: 14px; line-height: 1.5; }
.chamada-entrega .icone { flex: none; margin-top: 2px; color: var(--azul); }
.chamada-entrega.is-feita { border-color: #1d6b45; background: var(--ok-fundo); color: #c9f2dc; }
.chamada-entrega.is-feita .icone, .chamada-entrega.is-feita strong { color: var(--ok); }
.historico-completo { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.historico-completo summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--muted); font-weight: 600; cursor: pointer; }
.historico-completo summary .icone { width: 16px; height: 16px; }
.historico-completo[open] summary { border-bottom: 1px solid var(--line); }
.historico-completo .linha-tempo { padding: 8px 16px 14px; }
.nota-texto small { color: var(--subtle); font-weight: 400; }

/* ---------- Cartão compacto do andamento ---------- */
.cartao { gap: 6px; padding: 10px 11px; }
.cartao-linha1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.cartao-linha1 .cartao-nome { font-size: 14px; line-height: 1.3; min-width: 0; }
.cartao-linha1 .cartao-valor { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cartao-valor.is-pago { color: var(--ok); }
.cartao-valor .icone { width: 13px; height: 13px; }
.cartao-meta { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cartao-meta .chip-prazo { padding: 1px 7px; font-size: 11px; }
.cartao-meta .cartao-nf { color: var(--subtle); }
.servico-mini { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 600; }
.servico-mini::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.servico-mini--calculos::before { background: var(--laranja); }
.servico-mini--automacao::before { background: var(--automacao); }
.cartao .cartao-rodape { padding-top: 6px; gap: 4px 6px; }
.cartao .avatar--pequeno, .cartao .sem-responsavel { width: 22px; height: 22px; font-size: 9px; }
.cartao .botao--pequeno.botao--icone { min-width: 26px; min-height: 26px; }
.cartao .cartao-setas .botao--primario:not(.botao--icone) { min-height: 26px; padding: 0 8px; font-size: 12px; }

/* Botões de etapa da ficha (voltar e avançar) */
.acoes-etapa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Confirmação de etapa ---------- */
.confirmar-texto { color: var(--muted); }
.confirmar-etapas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.confirmar-etapas .icone { color: var(--subtle); }
.etapa-pill--destino { background: var(--destaque); color: var(--sobre-destaque); font-weight: 700; }

/* ---------- Demonstração ---------- */
.faixa-demo {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap;
  min-height: 40px; padding: 5px 16px; background: #f2c46b; color: #1d1404; font-size: 13px;
}
.faixa-demo-texto { display: inline-flex; align-items: center; gap: 6px; }
.faixa-demo-texto .icone { width: 16px; height: 16px; }
.faixa-demo-texto strong { text-transform: uppercase; letter-spacing: .05em; font-size: 12px; }
.faixa-demo-perfil { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.faixa-demo-perfil select { width: auto; min-height: 30px; padding: 2px 30px 2px 10px; border: 1px solid #1d140433; border-radius: 8px; background: #fff7e6; color: #1d1404; font-weight: 600; font-size: 13px; }
.faixa-demo-botao { min-height: 30px; padding: 0 10px; border-color: #1d140433; background: #fff7e6; color: #1d1404; font-size: 13px; }
.faixa-demo-botao:hover { background: #fff; border-color: #1d140466; }
.faixa-demo-botao .icone { width: 15px; height: 15px; }
body.com-demo .lateral { top: 40px; height: calc(100vh - 40px); }
body.com-demo .barra { top: 40px; }

.demo-entrada { display: grid; gap: 18px; width: min(880px, 100%); }
.demo-topo { display: grid; justify-items: center; gap: 8px; text-align: center; }
.demo-topo h1 { font-size: 26px; letter-spacing: -.01em; }
.demo-topo > p:last-child { max-width: 620px; color: var(--muted); }
.demo-selo { padding: 3px 12px; border-radius: 999px; background: #f2c46b; color: #1d1404; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo-cartao { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #111e30e6; box-shadow: var(--sombra); }
.demo-grupo h2 { margin-bottom: 10px; color: var(--subtle); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo-perfis { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.demo-perfil {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-forte); border-radius: var(--radius); background: var(--bg); color: var(--ink);
}
.demo-perfil:hover { border-color: var(--destaque); background: #1c1a1d; }
.demo-perfil > .icone { margin-left: auto; color: var(--subtle); }
.demo-perfil.is-entrando { opacity: .6; cursor: progress; }
.demo-perfil-texto { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.demo-perfil-texto strong { font-size: 15px; }
.demo-perfil-texto small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.demo-roteiro h2 { font-size: 16px; }
.demo-roteiro ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.demo-roteiro b { color: var(--ink); }

@media (max-width: 980px) {
  body.com-demo .lateral { top: auto; height: auto; }
}
@media (max-width: 680px) {
  .demo-perfis { grid-template-columns: 1fr; }
  .demo-topo h1 { font-size: 21px; }
  .faixa-demo { justify-content: space-between; }
  .faixa-demo-botao span { display: none; }
  body.com-demo .barra { top: 0; }
  .faixa-demo { position: static; }
}


/* =====================================================================
   Etiquetas pessoais, miniaturas de arquivo, Preferências e carga da equipe
   ===================================================================== */

/* Lateral: Preferências logo acima da divisória do usuário; "Sair" ao lado do nome. */
.nav { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.nav-grupo.nav-grupo--fim { margin-top: auto; padding-top: 0; border-top: 0; }
.lateral-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lateral-rodape .eu { flex: 1; }
#sair { flex: none; }

/* Etiquetas: a de serviço é fixa; as pessoais têm cor escolhida e um "×" para tirar. */
.etiquetas { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.etiqueta {
  --cor: #8495ad;
  display: inline-flex; align-items: center; gap: 2px; max-width: 160px; padding: 1px 3px 1px 8px;
  border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--cor) 16%, transparent); color: color-mix(in srgb, var(--cor) 70%, var(--ink));
  font-size: 11.5px; font-weight: 650; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiqueta--laranja { --cor: #f29a63; }
.etiqueta--azul { --cor: #65aaf5; }
.etiqueta--verde { --cor: #5fcf95; }
.etiqueta--roxo { --cor: #b394f5; }
.etiqueta--rosa { --cor: #f08bb8; }
.etiqueta--amarelo { --cor: #ecc25a; }
.etiqueta--cinza { --cor: #9aa8bb; }
.etiqueta-tirar, .etiqueta-mais {
  display: inline-grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
}
.etiqueta-tirar { width: 16px; height: 16px; opacity: .6; }
.etiqueta-tirar:hover, .etiqueta-tirar:focus-visible { opacity: 1; background: #ffffff1a; }
.etiqueta-tirar .icone { width: 10px; height: 10px; }
.etiqueta-mais { width: 20px; height: 20px; border: 1px dashed var(--line-forte); color: var(--subtle); }
.etiqueta-mais:hover, .etiqueta-mais:focus-visible { border-color: var(--destaque); color: var(--destaque); }
.etiqueta-mais .icone { width: 12px; height: 12px; }
.etiqueta-caixa {
  position: fixed; inset: auto; margin: 0; z-index: 60; display: grid; gap: 10px; width: 236px; padding: 14px;
  border: 1px solid var(--line-forte); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--sombra);
}
.etiqueta-caixa:not(:popover-open) { display: none; }
.etiqueta-caixa strong { font-size: 13px; }
.etiqueta-cores { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta-cor {
  width: 24px; height: 24px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer;
  background: var(--cor); box-shadow: inset 0 0 0 2px var(--surface);
}
.etiqueta-cor.is-escolhida { border-color: var(--ink); }
.etiqueta-caixa-acoes { display: flex; justify-content: flex-end; }
.ficha-titulo .etiquetas { margin-top: 6px; }
.contato-principal { cursor: pointer; }
.contato-principal:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; border-radius: var(--radius-sm); }

/* Miniatura do arquivo: uma folhinha com a sigla, na cor do tipo. */
.miniatura {
  --cor: #8495ad;
  position: relative; display: inline-grid; place-items: end center; flex: none; width: 30px; height: 38px; padding-bottom: 5px;
  border-radius: 4px 9px 4px 4px; background: linear-gradient(var(--surface-3), var(--surface-2)); border: 1px solid var(--line-forte);
}
.miniatura::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px;
  border-bottom-left-radius: 3px; background: linear-gradient(225deg, var(--bg) 50%, var(--line-forte) 50%);
}
.miniatura-sigla { padding: 1px 3px; border-radius: 3px; background: var(--cor); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; line-height: 1.2; }
.miniatura--pdf { --cor: #d9443b; }
.miniatura--word { --cor: #2f6fd6; }
.miniatura--excel { --cor: #1e8a4c; }
.miniatura--imagem { --cor: #8a5cd6; }
.miniatura--outro { --cor: #5b6b80; }
.documentos--miniaturas .documento { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 10px; }
.documentos--miniaturas .documento-nome { gap: 10px; }
.documentos--miniaturas .documento-info { padding-left: 40px; margin-top: -14px; }
.bloco--solicitacao .documentos { margin-top: 8px; }
.bloco--solicitacao dd .resposta { display: block; }
.envio--simples { display: block; }

/* Data com o botão "Hoje". */
.data-com-hoje { display: flex; align-items: center; gap: 6px; }
.data-com-hoje input { flex: 1; min-width: 0; }
.campo-rotulo { display: block; }

/* Preferências */
.preferencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.preferencias-lado { display: grid; gap: 16px; }
.pref-quem { display: flex; align-items: center; gap: 14px; }
.pref-quem-texto { display: grid; gap: 6px; justify-items: start; }
.pref-quem-texto strong { font-size: 18px; }
.pref-nota { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; color: var(--subtle); font-size: 12px; }
.pref-nota .icone { width: 13px; height: 13px; }
.pref-apelido { display: flex; align-items: flex-end; gap: 10px; }
.pref-apelido .campo { flex: 1; }
.pref-chave { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; font-weight: 600; font-size: 14px; }
.pref-chave > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.pref-chave > span:first-child .icone { color: var(--destaque); }
.pref-chave input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chave-trilho { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-forte); transition: background .15s; }
.chave-bolinha { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.pref-chave input:checked ~ .chave-trilho { background: var(--destaque); border-color: var(--destaque); }
.pref-chave input:checked ~ .chave-trilho .chave-bolinha { transform: translateX(18px); background: var(--sobre-destaque); }
.pref-chave input:focus-visible ~ .chave-trilho { outline: 2px solid var(--destaque); outline-offset: 2px; }
.form-senha-pref { align-content: start; }

/* Carga da equipe */
.carga { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.carga th { padding: 0 8px 8px; color: var(--subtle); font-size: 11.5px; font-weight: 650; text-align: left; white-space: nowrap; }
.carga td { padding: 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.carga th:first-child, .carga td:first-child { padding-left: 0; }
.carga-pessoa { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.carga-pessoa .avatar { width: 26px; height: 26px; font-size: 10px; }
.carga-andamento { display: flex; align-items: center; gap: 8px; min-width: 90px; }
.carga-andamento strong { min-width: 14px; }
.carga-trilho { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.carga-barra { display: block; height: 100%; border-radius: 3px; background: var(--destaque); }
.carga-atrasadas span { display: inline-flex; align-items: center; gap: 4px; color: var(--critico); font-weight: 700; }
.carga-atrasadas .icone { width: 14px; height: 14px; }
.carga-sem { justify-self: start; color: var(--alerta); }

@media (max-width: 860px) {
  .preferencias { grid-template-columns: minmax(0, 1fr); }
  .nav { flex: none; flex-direction: row; }
  .nav-grupo.nav-grupo--fim { margin-top: 0; }
  .pref-apelido { flex-direction: column; align-items: stretch; }
}


/* =====================================================================
   Modo claro (Preferências > Modo noturno desligado)
   ===================================================================== */
:root[data-tema="claro"] {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --surface-3: #e2e8f0;
  --ink: #142032;
  --muted: #45556b;
  --subtle: #66768b;
  --line: #d8dfe9;
  --line-forte: #c2ccd9;
  --destaque: #d96f2e;
  --destaque-forte: #c25f22;
  --destaque-fundo: #fdeee3;
  --destaque-claro: #8a4416;
  --sobre-destaque: #101925;
  --automacao: #2f6fc0;
  --laranja: #c8642a;
  --graf-calculos: #d06a2c;
  --graf-automacao: #2f74c9;
  --ok: #17804a;
  --alerta: #8a5a00;
  --critico: #c0392b;
  --ok-fundo: #e3f5ea;
  --alerta-fundo: #fbf1dc;
  --critico-fundo: #fbe6e6;
  --sombra: 0 18px 50px #1b2a4026;
  color-scheme: light;
}
[data-tema="claro"] body::before {
  background:
    radial-gradient(560px 560px at -4% -6%, #f29a632e, transparent 70%),
    radial-gradient(520px 520px at 92% 104%, #4f7cff1a, transparent 70%);
}
[data-tema="claro"] .marca img, [data-tema="claro"] .login-logo { filter: invert(1) hue-rotate(180deg) saturate(1.4); }
[data-tema="claro"] .lateral { background: #ffffffc7; border-right-color: var(--line); }
[data-tema="claro"] .barra { background: #f3f5f9e0; border-bottom-color: var(--line); }
[data-tema="claro"] .nav-item[aria-current="page"] { background: #f29a6324; }
[data-tema="claro"] .nav-grupo:not([hidden]) ~ .nav-grupo:not(.nav-grupo--fim) { border-top-color: var(--line); }
[data-tema="claro"] :is(.bloco, .cartao-visao, .tile, .lista-contatos, .calendario-caixa, .proximos, .ficha-etapas,
  .ficha-painel, .historico-completo, .login-cartao, .demo-cartao, .segmentado, .lista-suspensa) {
  background: #ffffff; border-color: #d3dbe6; box-shadow: 0 10px 30px #1b2a400f;
}
[data-tema="claro"] .tile:hover { background: #fff8f3; border-color: #f29a6380; }
[data-tema="claro"] .coluna { background: #eaeef4; border-color: var(--line); }
[data-tema="claro"] .ficha { background: var(--bg); }
[data-tema="claro"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { background-color: #ffffff; border-color: var(--line-forte); color: var(--ink); }
[data-tema="claro"] input::placeholder, [data-tema="claro"] textarea::placeholder { color: #8a98ab; }
[data-tema="claro"] .campo { color: #34455b; }
[data-tema="claro"] .botao:hover { border-color: #aab6c6; }
[data-tema="claro"] .botao--whatsapp { background: #e5f7ec; border-color: #9fd8b6; color: #146b3a; }
[data-tema="claro"] .botao--perigo { border-color: #e8b4b4; }
[data-tema="claro"] .avatar { background: linear-gradient(135deg, #dde7f4, #cbd9ec); color: #1d3557; }
[data-tema="claro"] .dica { background: #fffffff5; }
[data-tema="claro"] .funil-trilho { background: var(--surface-3); }
[data-tema="claro"] :is(.atividade-icone--nota, .evento-linha--nota .evento-icone) { background: var(--destaque-fundo); }
[data-tema="claro"] :is(.contato:hover, .cartao:hover) { background: #f6f8fb; }
[data-tema="claro"] .contato.is-novo .contato-nome { color: var(--ink); }
[data-tema="claro"] .celula--icone .botao--icone { color: var(--ok); }
[data-tema="claro"] :is(.coluna.is-alvo, .zona-envio:hover, .zona-envio.is-alvo, .demo-perfil:hover, .aviso-flutuante--novo) { background: #fff4ec; }
[data-tema="claro"] .coluna-vazia { color: #7a889b; }
[data-tema="claro"] .nota-texto { background: #fff8ef; border-color: #f0d9bf; }
[data-tema="claro"] .cartao--calculos { background: linear-gradient(160deg, #fff1e7 0%, #ffffff 55%); }
[data-tema="claro"] .cartao--automacao { background: linear-gradient(160deg, #e8f1fd 0%, #ffffff 55%); }
[data-tema="claro"] .cartao--calculos:hover { background: linear-gradient(160deg, #ffe8d8 0%, #fbfcfe 55%); }
[data-tema="claro"] .cartao--automacao:hover { background: linear-gradient(160deg, #dde9fb 0%, #fbfcfe 55%); }
[data-tema="claro"] .ficha--calculos .ficha-topo { background: linear-gradient(120deg, #fff1e7, var(--surface) 60%); }
[data-tema="claro"] .ficha--automacao .ficha-topo { background: linear-gradient(120deg, #e8f1fd, var(--surface) 60%); }
[data-tema="claro"] .papel--admin { background: var(--destaque-fundo); color: #a14d16; }
[data-tema="claro"] .papel--funcionario { background: #e6f0fc; color: #2459a0; }
[data-tema="claro"] :is(.aviso-concluida, .chamada-entrega.is-feita) { border-color: #9fd8b6; color: #145c36; }
[data-tema="claro"] .chamada-entrega { color: var(--destaque-claro); }
[data-tema="claro"] .bloco--comentarios.is-destaque { background: linear-gradient(160deg, #fdf5df, var(--surface) 55%); }
[data-tema="claro"] .ficha::backdrop, [data-tema="claro"] .janela::backdrop { background: #14203266; }
[data-tema="claro"] .alvo.is-ativo { fill: #14203208; }
[data-tema="claro"] :is(.visao-data, .grupo-titulo, .demo-grupo h2, .calendario-semana, .coluna-nome, .marca span) { color: #b4551a; }
[data-tema="claro"] .etiqueta { color: color-mix(in srgb, var(--cor) 55%, #000); background: color-mix(in srgb, var(--cor) 18%, #fff); }
[data-tema="claro"] .etiqueta-tirar:hover { background: #0000000f; }
[data-tema="claro"] .miniatura::before { background: linear-gradient(225deg, var(--surface) 50%, var(--line-forte) 50%); }

/* Na lista, nome, serviço e etiquetas numa linha só; o nome encurta primeiro. O "+" aparece ao passar o mouse. */
.contato-linha1 { flex-wrap: nowrap; overflow: hidden; }
.contato-linha1 .contato-nome { flex: 0 1 auto; min-width: 5ch; }
.contato-linha1 > :not(.contato-nome):not(.etiquetas) { flex: none; }
.contato-linha1 .etiquetas { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }
@media (hover: hover) {
  .contato .etiqueta-mais { opacity: 0; transition: opacity .12s; }
  .contato:hover .etiqueta-mais, .contato:focus-within .etiqueta-mais { opacity: 1; }
}

.carga-pessoa { white-space: nowrap; }
.carga th { white-space: normal; }

/* Moldes em branco (Notas e ordens) */
.moldes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.molde { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.molde.is-vazio { border-style: dashed; }
.molde.is-vazio .miniatura { opacity: .55; }
.molde-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.molde-texto strong { font-size: 14px; }
.molde-texto small { color: var(--subtle); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.molde-acoes { display: flex; gap: 6px; flex: none; }
.molde-acoes a.botao { text-decoration: none; }
.ficha-coluna > .bloco--moldes { flex: none; }
.ficha-coluna:has(> .bloco--moldes) > .bloco--negocio { flex: 1; }

/* Preferências: linha com rótulo e opções (Visual). */
.pref-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-weight: 600; font-size: 14px; }
.pref-linha > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.pref-linha > span:first-child .icone { color: var(--destaque); }