:root {
  --fundo: #f5f3ee;
  --superficie: #ffffff;
  --superficie-2: #f9f7f2;
  --borda: #e6e1d6;
  --texto: #1c1a15;
  --texto-2: #6d6759;
  --texto-3: #9a9384;
  --ouro: #b08a32;
  --ouro-forte: #8f6e22;
  --ouro-suave: #f4ecd8;
  --lateral: #141310;
  --lateral-2: #1f1d18;
  --lateral-texto: #c9c2b1;
  --lateral-texto-2: #8a8372;
  --verde: #2f7d4f;
  --verde-suave: #e2f0e7;
  --ambar: #a66a00;
  --ambar-suave: #fbefd5;
  --vermelho: #b3392f;
  --vermelho-suave: #f8e2df;
  --azul: #2c5d8f;
  --azul-suave: #e1ebf5;
  --raio: 12px;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 20px rgb(0 0 0 / 0.04);
  --largura-lateral: 248px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #100f0c;
    --superficie: #1a1915;
    --superficie-2: #211f1a;
    --borda: #312d25;
    --texto: #ece7da;
    --texto-2: #a8a08d;
    --texto-3: #7a7363;
    --ouro: #d4ab52;
    --ouro-forte: #e4bf6c;
    --ouro-suave: #352b17;
    --lateral: #0b0a08;
    --lateral-2: #1a1814;
    --verde: #6cc08c;
    --verde-suave: #18301f;
    --ambar: #e3a845;
    --ambar-suave: #372a12;
    --vermelho: #e3796f;
    --vermelho-suave: #3a1d19;
    --azul: #80b1e0;
    --azul-suave: #182838;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
h1 { font-size: 22px; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 0; }
p { margin: 0 0 8px; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- marca ---------- */
.marca { display: flex; flex-direction: column; line-height: 1.15; }
.marca-pro { font-weight: 800; letter-spacing: 0.16em; color: var(--ouro); font-size: 15px; }
.marca-sub { font-size: 10.5px; color: var(--lateral-texto-2); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.marca-grande .marca-pro { font-size: 22px; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at top, #2a2418, var(--lateral) 60%); }
.login-cartao { width: min(380px, 100%); display: grid; gap: 14px; background: var(--superficie); border-radius: 16px; padding: 32px 28px; box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); }
.login-texto { color: var(--texto-2); margin-bottom: 4px; }

/* ---------- estrutura ---------- */
.app { display: flex; min-height: 100vh; }
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--largura-lateral); background: var(--lateral); color: var(--lateral-texto); display: flex; flex-direction: column; z-index: 30; }
.lateral-topo { padding: 22px 20px 18px; border-bottom: 1px solid #ffffff10; }
.menu { flex: 1; overflow-y: auto; padding: 12px 10px; }
.menu-secao { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lateral-texto-2); padding: 14px 12px 6px; }
.menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 0; background: none; color: var(--lateral-texto); border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; position: relative; }
.menu-item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.menu-item:hover { background: var(--lateral-2); color: #fff; }
.menu-item.ativo { background: var(--lateral-2); color: var(--ouro); font-weight: 600; }
.menu-item.ativo::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ouro); }
.menu-item .contador { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--vermelho); color: #fff; border-radius: 999px; padding: 0 7px; min-width: 20px; text-align: center; }
.lateral-rodape { padding: 14px 16px 18px; border-top: 1px solid #ffffff10; display: grid; gap: 12px; font-size: 12.5px; }
.status-conexao { display: grid; gap: 6px; }
.status-linha { display: flex; align-items: center; gap: 8px; color: var(--lateral-texto); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--lateral-texto-2); flex: none; }
.ponto.ok { background: #5fbf84; box-shadow: 0 0 0 3px #5fbf8426; }
.ponto.ruim { background: #e3796f; box-shadow: 0 0 0 3px #e3796f26; }
.ponto.aviso { background: #e3a845; }
.usuario { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--lateral-texto-2); }
.nome-usuario { color: var(--lateral-texto); font-weight: 600; }
.papel-usuario { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ouro); }
.usuario-acoes { display: grid; justify-items: end; gap: 2px; }
.senha-temporaria { font: 600 22px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0.04em; background: var(--ouro-suave); color: var(--ouro-forte); border-radius: 10px; padding: 14px 16px; text-align: center; margin: 12px 0; user-select: all; }
.st-inativo { background: var(--superficie-2); color: var(--texto-3); }
.papel-admin { background: var(--ouro-suave); color: var(--ouro-forte); }
.papel-colaborador { background: var(--azul-suave); color: var(--azul); }
.link-sair { background: none; border: 0; color: var(--lateral-texto); cursor: pointer; padding: 4px 0; }
.link-sair:hover { color: var(--ouro); }

.principal { flex: 1; margin-left: var(--largura-lateral); min-width: 0; }
.barra-topo { display: flex; align-items: flex-end; gap: 16px; padding: 32px 32px 4px; max-width: 1400px; }
.barra-topo > div:nth-child(2) { flex: 1; min-width: 0; }
.trilha { font-size: 12px; color: var(--texto-3); margin-bottom: 4px; }
.sub { color: var(--texto-2); margin: 4px 0 0; }
.acoes-pagina { display: flex; gap: 8px; flex-wrap: wrap; }
.abrir-menu { display: none; }
.conteudo { padding: 24px 32px 64px; max-width: 1400px; }
.fundo-menu { position: fixed; inset: 0; background: rgb(0 0 0 / 0.45); z-index: 25; }

@media (max-width: 960px) {
  .lateral { transform: translateX(-100%); transition: transform 0.2s ease; }
  .lateral.aberta { transform: none; }
  .principal { margin-left: 0; }
  .abrir-menu { display: block; align-self: center; background: none; border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 18px; }
  .barra-topo { padding: 16px; align-items: center; flex-wrap: wrap; }
  .conteudo { padding: 16px 16px 48px; }
}

/* ---------- componentes ---------- */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.cartao-topo .dica { margin: 0; }
.cartao-corpo { padding: 0 18px 18px; }
.cartao-corpo.sem-margem { padding: 0; }
.grade { display: grid; gap: 16px; }
.colunas-iguais { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.colunas-iguais.uma { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) { .colunas-iguais { grid-template-columns: 1fr; } }
.feed { max-height: 70vh; overflow-y: auto; }
.problema-linha { max-width: 70ch; }
.colunas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .colunas { grid-template-columns: 1fr; } }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.atencao { border: 1px solid var(--vermelho); background: var(--vermelho-suave); border-radius: var(--raio); padding: 14px 18px 6px; margin-bottom: 16px; }
.atencao-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.atencao-topo h2 { color: var(--vermelho); }
.atencao-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--vermelho) 25%, transparent); }
.atencao-icone { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--vermelho); color: #fff; font-weight: 700; }
.atencao-titulo { font-weight: 700; }
.atencao-meta { font-size: 12px; color: var(--texto-2); margin-bottom: 4px; }
.atencao-corpo p { margin: 0; }
.atencao-acoes { display: grid; gap: 6px; justify-items: stretch; text-align: center; }
@media (max-width: 760px) { .atencao-item { grid-template-columns: auto minmax(0, 1fr); } .atencao-acoes { grid-column: 2; display: flex; } }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi .valor { font-size: 24px; } }
.kpi { padding: 16px 18px; display: grid; gap: 2px; }
.kpi .rotulo { color: var(--texto-2); font-size: 12.5px; }
.kpi .valor { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi .nota { font-size: 12px; color: var(--texto-3); }
.kpi.vermelho .valor { color: var(--vermelho); }
.kpi.ambar .valor { color: var(--ambar); }
.kpi.verde .valor { color: var(--verde); }

label { display: grid; gap: 5px; font-size: 12.5px; color: var(--texto-2); }
input, select, textarea { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: 8px 11px; width: 100%; color: var(--texto); }
textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ouro); outline-offset: 1px; }
button { cursor: pointer; border-radius: 8px; padding: 8px 14px; border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); }
button:hover { border-color: var(--ouro); }
button.primario { background: var(--ouro); border-color: var(--ouro); color: #17150f; font-weight: 600; }
button.primario:hover { background: var(--ouro-forte); border-color: var(--ouro-forte); }
button.perigo { color: var(--vermelho); }
button.discreto { background: none; border-color: transparent; color: var(--texto-2); }
button.discreto:hover { color: var(--ouro-forte); }
button.pequeno { padding: 4px 10px; font-size: 12.5px; }
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; padding: 16px 18px; }
.filtros label { min-width: 160px; flex: 1; max-width: 240px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.acoes-linha { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
td select { width: auto; min-width: 150px; padding: 5px 8px; }
.erro { color: var(--vermelho); min-height: 1em; margin: 6px 0 0; }
.dica { font-size: 12.5px; color: var(--texto-2); }
.form { display: grid; gap: 14px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-2 { grid-template-columns: 1fr; } }

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); font-weight: 600; padding: 10px 18px; border-bottom: 1px solid var(--borda); white-space: nowrap; background: var(--superficie-2); }
td { padding: 11px 18px; border-bottom: 1px solid var(--borda); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--superficie-2); }
td.num, th.num { text-align: right; }
td .secundario { font-size: 12.5px; color: var(--texto-2); }
.vazio { color: var(--texto-2); padding: 28px 18px; text-align: center; }
.vazio strong { display: block; color: var(--texto); margin-bottom: 4px; }

.pilula { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; font-weight: 500; }
.st-pendente { background: var(--vermelho-suave); color: var(--vermelho); }
.st-em_andamento { background: var(--azul-suave); color: var(--azul); }
.st-concluido { background: var(--verde-suave); color: var(--verde); }
.st-descartado { background: var(--superficie-2); color: var(--texto-3); }
.atrasado { background: var(--ambar-suave); color: var(--ambar); }
.papel-equipe { background: var(--ouro-suave); color: var(--ouro-forte); }
.papel-cliente { background: var(--azul-suave); color: var(--azul); }

/* atividade */
.feed { display: grid; }
.feed-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px 18px; border-top: 1px solid var(--borda); }
.feed-item:first-child { border-top: 0; }
.feed-icone { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; grid-row: span 4; background: var(--superficie-2); color: var(--texto-2); }
.feed-icone.novo_pedido { background: var(--vermelho-suave); color: var(--vermelho); }
.feed-icone.assumir { background: var(--azul-suave); color: var(--azul); }
.feed-icone.entregar { background: var(--verde-suave); color: var(--verde); }
.feed-icone.cancelar { background: var(--superficie-2); color: var(--texto-3); }
.feed-meta { font-size: 12.5px; color: var(--texto-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.feed-meta .quem { font-weight: 600; color: var(--texto); }
.feed-meta time { margin-left: auto; color: var(--texto-3); font-size: 12px; }
.feed-grupo { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-texto { overflow-wrap: anywhere; }
.feed-decisao { font-size: 12.5px; color: var(--texto-2); }
.feed-decisao b { color: var(--texto); font-weight: 600; }

.alerta-item { display: grid; gap: 2px; padding: 12px 18px; border-top: 1px solid var(--borda); font-size: 13px; border-left: 3px solid var(--ambar); }
.alerta-item:first-child { border-top: 0; }
.alerta-item.lido { opacity: 0.55; border-left-color: transparent; }
.alerta-item.clicavel { cursor: pointer; }
.alerta-item.clicavel:hover { background: var(--superficie-2); }
.alerta-item.alerta-ok { border-left-color: var(--verde); }
tr.linha-problema td { background: color-mix(in srgb, var(--vermelho-suave) 55%, transparent); }
tr.linha-problema td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
.problema-linha { margin-top: 6px; font-size: 12.5px; color: var(--vermelho); }
.problema-linha b { font-weight: 600; }
.link-chat { color: var(--ouro-forte); font-weight: 600; white-space: nowrap; text-decoration: none; }
.link-chat:hover { text-decoration: underline; }
.aviso-problema { border: 1px solid var(--vermelho); background: var(--vermelho-suave); border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.aviso-problema .aviso-titulo { font-weight: 700; color: var(--vermelho); margin-bottom: 6px; }
.aviso-problema p { margin: 0 0 8px; }
.aviso-ok { border: 1px solid var(--verde); background: var(--verde-suave); color: var(--verde); border-radius: 12px; padding: 10px 14px; margin: 14px 0; }
.botao-link { display: inline-block; background: var(--ouro); color: #17150f; font-weight: 600; border-radius: 8px; padding: 8px 14px; text-decoration: none; }
.msg.destaque { outline: 2px solid var(--verde); }
.msg.destaque-erro { outline: 2px solid var(--vermelho); }
.msg.destaque-foco { outline: 3px solid var(--ouro); animation: piscar 1.2s ease 2; }
@keyframes piscar { 50% { outline-color: transparent; } }
.alerta-item time { font-size: 11.5px; color: var(--texto-3); }

/* conversa */
.conversa { display: grid; gap: 10px; max-height: 64vh; overflow-y: auto; padding: 16px 18px; background: var(--superficie-2); border-radius: 0 0 var(--raio) var(--raio); }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borda); }
.msg.equipe { justify-self: end; background: var(--ouro-suave); border-color: transparent; }
.msg .autor { font-size: 12px; font-weight: 600; color: var(--ouro-forte); display: flex; gap: 6px; align-items: center; }
.msg .meta { font-size: 11px; color: var(--texto-3); margin-top: 3px; }
.msg .decisao { font-size: 11.5px; margin-top: 5px; color: var(--azul); }
.msg .anexo, .feed-texto .anexo { font-size: 12.5px; color: var(--texto-2); display: block; }
.anexo-link { display: block; margin-top: 6px; }
.anexo-img { display: block; max-width: min(260px, 100%); max-height: 260px; border-radius: 8px; border: 1px solid var(--borda); object-fit: cover; }
.caixa-texto { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; margin-top: 8px; }

/* chamado */
.etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.etapa { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; }
.etapa.feita { border-color: var(--ouro); background: var(--ouro-suave); }
.etapa .rot { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-3); }
.etapa .val { font-weight: 600; }
.etapa .qdo { font-size: 12px; color: var(--texto-2); }
.tempos { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; }
.tempos div { display: grid; }
.tempos b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tempos span { font-size: 12px; color: var(--texto-2); }
.justificativa { font-size: 12.5px; color: var(--texto-2); border-left: 2px solid var(--ouro); padding: 2px 0 2px 10px; margin: 8px 0; }
.secao-modal { margin-top: 20px; }
.secao-modal h2 { margin-bottom: 10px; }
@media (max-width: 640px) { .etapas { grid-template-columns: 1fr; } .msg { max-width: 95%; } }

.modal { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); display: grid; place-items: center; padding: 16px; z-index: 40; }
.modal-caixa { width: min(880px, 100%); max-height: 92vh; overflow-y: auto; position: relative; background: var(--superficie); border-radius: 16px; padding: 26px 28px; box-shadow: 0 24px 70px rgb(0 0 0 / 0.3); }
.fechar { position: absolute; top: 14px; right: 14px; background: none; border: 0; font-size: 16px; color: var(--texto-2); }

.qr { display: grid; place-items: center; gap: 12px; padding: 12px; }
.qr img { background: #fff; padding: 12px; border-radius: 12px; }
.chave { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--texto); font-size: 14px; }
.chave input { width: 18px; height: 18px; accent-color: var(--ouro); }
.barra { width: 100%; height: 8px; accent-color: var(--ouro); }
.info-linhas { display: grid; gap: 10px; }
.info-linhas div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--borda); padding-bottom: 8px; }
.info-linhas span { color: var(--texto-2); }
.grande { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }

.clientes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cliente-cartao { text-align: left; padding: 16px 18px; display: grid; gap: 6px; cursor: pointer; font: inherit; color: inherit; }
.cliente-cartao:hover { border-color: var(--ouro); }
.cliente-nome { font-weight: 700; font-size: 15px; }
.cliente-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cliente-grupo { font-size: 11.5px; color: var(--texto-3); border-top: 1px dashed var(--borda); padding-top: 6px; margin-top: 4px; }
.ficha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.ficha-secao { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; background: var(--superficie-2); }
.ficha-secao h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ouro-forte); }
.ficha-secao ul { margin: 6px 0 0; padding-left: 18px; }
.ficha-secao p { margin: 0 0 6px; }
.socio { margin-bottom: 8px; }
details summary { cursor: pointer; color: var(--texto-2); }
.status-celula { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.marca-atraso { font-size: 11.5px; color: var(--ambar); white-space: nowrap; }