:root {
  --fundo: #f4f8f8;
  --cartao: #ffffff;
  --cartao-2: #f7fafa;
  --borda: #e1eaea;
  --texto: #10282c;
  --texto-2: #5b6b73;
  --texto-3: #8a989e;
  --marca: #008480;
  --marca-forte: #006b68;
  --marca-suave: #e3f4f2;
  --trilho: #0b1f24;
  --trilho-texto: #b7cacc;
  --ok: #0b7a43;
  --ok-suave: #e3f4ea;
  --alerta: #b26a00;
  --alerta-suave: #fdf3e3;
  --erro: #c0392b;
  --erro-suave: #fdeceb;
  --info-suave: #eaf1fb;
  --info: #2d5fa8;
  --sombra: 0 1px 2px rgba(16, 40, 44, .06), 0 4px 16px rgba(16, 40, 44, .05);
  --raio: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0a1416; --cartao: #101f22; --cartao-2: #132629; --borda: #1f3539; --texto: #e7f1f1;
    --texto-2: #9db0b3; --texto-3: #6f8487; --marca: #2bb3a8; --marca-forte: #5fd0c6; --marca-suave: #12332f;
    --trilho: #071012; --ok: #4cc38a; --ok-suave: #12301f; --alerta: #f0b04f; --alerta-suave: #33270f;
    --erro: #ff7a6b; --erro-suave: #3a1714; --info-suave: #142338; --info: #8fb5ef;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
:root[data-tema="escuro"] {
  --fundo: #0a1416; --cartao: #101f22; --cartao-2: #132629; --borda: #1f3539; --texto: #e7f1f1;
  --texto-2: #9db0b3; --texto-3: #6f8487; --marca: #2bb3a8; --marca-forte: #5fd0c6; --marca-suave: #12332f;
  --trilho: #071012; --ok: #4cc38a; --ok-suave: #12301f; --alerta: #f0b04f; --alerta-suave: #33270f;
  --erro: #ff7a6b; --erro-suave: #3a1714; --info-suave: #142338; --info: #8fb5ef;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--marca); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 16px; margin: 0 0 12px; }
h3 { font-size: 14px; margin: 0 0 8px; }
.num { font-variant-numeric: tabular-nums; }
.mudo { color: var(--texto-2); }
.fraco { color: var(--texto-3); font-size: 12px; }

/* ---------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 20% -10%, #12403f 0%, transparent 60%), var(--trilho); }
.login .caixa { width: 100%; max-width: 380px; background: var(--cartao); border-radius: 18px; padding: 32px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login .marca { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.login .marca img { width: 44px; height: 44px; }
.login .marca b { font-size: 20px; display: block; }
.login label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--texto-2); }
.login .btn { width: 100%; margin-top: 20px; justify-content: center; padding: 11px; }
.login .erro { color: var(--erro); font-size: 13px; margin-top: 12px; min-height: 18px; }

/* ---------- casca */
.casca { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.trilho { background: var(--trilho); color: var(--trilho-texto); padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; }
.trilho .marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; }
.trilho .marca img.ic { width: 34px; height: 34px; }
.trilho .marca b { font-size: 16px; display: block; letter-spacing: .01em; }
.trilho .marca small { font-size: 11px; color: var(--trilho-texto); }
.trilho .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #5f7a7d; padding: 14px 10px 6px; }
.trilho a.item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--trilho-texto); }
.trilho a.item:hover { background: rgba(255,255,255,.05); color: #fff; }
.trilho a.item.ativo { background: rgba(43,179,168,.16); color: #fff; }
.trilho a.item svg { width: 18px; height: 18px; flex: none; }
.trilho .pe { margin-top: auto; border-top: 1px solid rgba(255,255,255,.07); padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.trilho .pe .av { background: #1d3c40; color: #fff; }
.trilho .pe .quem { flex: 1; min-width: 0; }
.trilho .pe .quem b { color: #fff; font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilho .pe .quem small { font-size: 11px; }
.trilho .pe button { background: none; border: 0; color: var(--trilho-texto); cursor: pointer; padding: 6px; border-radius: 8px; }
.trilho .pe button:hover { background: rgba(255,255,255,.07); color: #fff; }
.trilho .logo-atem { height: 18px; opacity: .55; margin: 10px 8px 0; align-self: flex-start; }
main.conteudo { padding: 28px 32px 48px; min-width: 0; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.topo .sub { color: var(--texto-2); margin-top: 4px; }
.barra-mobile { display: none; }

/* ---------- peças */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--marca); }
.btn.pri { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.pri:hover { background: var(--marca-forte); }
.btn.peq { padding: 5px 10px; font-size: 13px; }
.btn.perigo { color: var(--erro); }
.btn:disabled { opacity: .5; cursor: default; }
input.campo, select.campo, textarea.campo { width: 100%; border: 1px solid var(--borda); background: var(--cartao); border-radius: 9px; padding: 9px 11px; outline: none; }
input.campo:focus, select.campo:focus, textarea.campo:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.cartao.p { padding: 18px 20px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 99px; background: var(--cartao-2); color: var(--texto-2); border: 1px solid var(--borda); white-space: nowrap; }
.chip.ok { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.chip.alerta { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.chip.erro { background: var(--erro-suave); color: var(--erro); border-color: transparent; }
.chip.info { background: var(--info-suave); color: var(--info); border-color: transparent; }
.chip.marca { background: var(--marca-suave); color: var(--marca-forte); border-color: transparent; }
.av { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex: none; color: #fff; }
.av.g { width: 56px; height: 56px; border-radius: 14px; font-size: 19px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros .busca { flex: 1; min-width: 220px; max-width: 420px; }
.filtros select.campo { width: auto; }
.seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 9px; overflow: hidden; background: var(--cartao); }
.seg button { border: 0; background: none; padding: 8px 12px; cursor: pointer; color: var(--texto-2); }
.seg button.ativo { background: var(--marca-suave); color: var(--marca-forte); font-weight: 600; }
.vazio { text-align: center; color: var(--texto-2); padding: 40px 16px; }

/* ---------- KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 16px 18px; }
.kpi .rot { font-size: 12px; color: var(--texto-2); font-weight: 500; }
.kpi .val { font-size: 24px; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
.kpi .det { font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.kpi.erro .val { color: var(--erro); }
.kpi.ok .val { color: var(--ok); }
.grade2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.barra { height: 8px; background: var(--cartao-2); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--marca); border-radius: 99px; }

/* ---------- carteira */
.carteira { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ccli { padding: 16px; cursor: pointer; transition: border-color .15s, transform .15s; display: flex; flex-direction: column; gap: 12px; }
.ccli:hover { border-color: var(--marca); transform: translateY(-1px); }
.ccli .lin { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ccli .nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccli .rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--borda); padding-top: 10px; font-size: 13px; }
.ccli.saiu { opacity: .6; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texto-2); padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; background: var(--cartao-2); }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.clica { cursor: pointer; }
table.t tr.clica:hover td { background: var(--cartao-2); }
table.t .d { text-align: right; }
.rolar { overflow-x: auto; }

/* ---------- ficha */
.ficha-topo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 20px; margin-bottom: 0; border-radius: var(--raio) var(--raio) 0 0; }
.ficha-topo .info { flex: 1; min-width: 220px; }
.ficha-topo .info .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.abas { display: flex; gap: 2px; padding: 0 12px; background: var(--cartao); border: 1px solid var(--borda); border-top: 0; border-radius: 0 0 var(--raio) var(--raio); margin-bottom: 18px; overflow-x: auto; box-shadow: var(--sombra); }
.abas a { padding: 12px 14px; color: var(--texto-2); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.abas a:hover { color: var(--texto); }
.abas a.ativo { color: var(--marca-forte); border-color: var(--marca); }
.abas a svg { width: 16px; height: 16px; }
.dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; }
.dados .k { font-size: 12px; color: var(--texto-2); }
.dados .v { font-weight: 500; margin-top: 2px; word-break: break-word; }
.titulo-linha td { background: var(--cartao); }
.baixas-linha td { background: var(--cartao-2); padding: 8px 12px 12px 36px !important; }
.baixa { display: flex; gap: 14px; align-items: center; font-size: 13px; padding: 4px 0; flex-wrap: wrap; }
.linha-tempo { display: flex; flex-direction: column; gap: 0; }
.evento { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.evento:last-child { border-bottom: 0; }
.evento .bola { width: 30px; height: 30px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-forte); display: grid; place-items: center; flex: none; }
.evento .bola svg { width: 15px; height: 15px; }
.evento.nota .bola { background: var(--info-suave); color: var(--info); }
.evento .txt { flex: 1; min-width: 0; }
.evento .quando { font-size: 12px; color: var(--texto-3); }
.mud { font-size: 12px; color: var(--texto-2); margin-top: 4px; }
.mud s { color: var(--texto-3); }

/* ---------- modal e toast */
.modal { position: fixed; inset: 0; background: rgba(5, 15, 17, .55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal .janela { background: var(--cartao); border-radius: 16px; width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.modal .janela.larga { max-width: 900px; }
.modal .cab { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--borda); }
.modal .cab h2 { margin: 0; }
.modal .corpo { padding: 18px 22px; }
.modal .acoes { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--borda); }
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 14px; }
.form .cheio { grid-column: 1 / -1; }
.form label { display: block; font-size: 12px; color: var(--texto-2); margin-bottom: 5px; font-weight: 500; }
.linhas-baixa .lb { display: grid; grid-template-columns: 1.1fr 1fr 1fr .9fr .8fr .6fr 1fr 32px; gap: 8px; align-items: end; padding: 10px 0; border-bottom: 1px dashed var(--borda); }
.linhas-baixa .lb label { font-size: 11px; color: var(--texto-2); display: block; margin-bottom: 4px; }
.soma { display: flex; justify-content: space-between; margin-top: 12px; padding: 10px 12px; background: var(--cartao-2); border-radius: 9px; font-weight: 500; }
.x { background: none; border: 0; cursor: pointer; color: var(--texto-3); padding: 6px; border-radius: 8px; }
.x:hover { color: var(--erro); background: var(--erro-suave); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--trilho); color: #fff; padding: 11px 18px; border-radius: 10px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,.3); max-width: calc(100vw - 32px); }
.toast.erro { background: var(--erro); }
.qr svg { width: 200px; height: 200px; display: block; margin: 8px auto; border-radius: 10px; }

/* ---------- celular */
@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .trilho { position: fixed; left: 0; top: 0; z-index: 40; width: 260px; transform: translateX(-100%); transition: transform .2s; }
  .casca.menu-aberto .trilho { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
  .barra-mobile { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--trilho); color: #fff; position: sticky; top: 0; z-index: 30; }
  .barra-mobile button { background: none; border: 0; color: #fff; padding: 4px; }
  .barra-mobile img { width: 26px; height: 26px; }
  main.conteudo { padding: 18px 16px 40px; }
  .grade2 { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .linhas-baixa .lb { grid-template-columns: 1fr 1fr; }
  .filtros .busca { max-width: none; }
}
.kpi .kico { width: 40px; height: 40px; border-radius: 11px; background: var(--marca-suave); color: var(--marca-forte); display: grid; place-items: center; flex: none; }
.kpi .kico svg { width: 19px; height: 19px; }

[hidden] { display: none !important; }

/* ---------- ficha do cliente como universo (05/11) */
.ficha-cab { display: flex; gap: 16px; align-items: center; padding: 20px 22px; margin-bottom: 14px; }
.ficha-cab > .info { flex: 1; min-width: 0; }
.ficha-cab h1 { margin: 0; }
.ficha-cab .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; font-size: 13px; }
.acoes-cab { display: flex; gap: 10px; }
.resumos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.resumo { display: flex; gap: 14px; align-items: center; padding: 16px 18px; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.resumo:hover { border-color: var(--marca); transform: translateY(-1px); }
.resumo .rico { width: 44px; height: 44px; border-radius: 12px; background: var(--marca-suave); color: var(--marca-forte); display: grid; place-items: center; flex: none; }
.resumo .rico svg { width: 21px; height: 21px; }
.resumo.erro .rico { background: var(--erro-suave); color: var(--erro); }
.resumo .seta { margin-left: auto; font-size: 22px; color: var(--texto-3); }
.resumo .fraco { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-corpo { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.contato h2 { margin-bottom: 14px; }
.contato hr { border: 0; border-top: 1px solid var(--borda); margin: 12px 0; }
.lc { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; word-break: break-word; }
.lc svg { width: 17px; height: 17px; color: var(--texto-3); flex: none; margin-top: 3px; }
.alerta-venc { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--erro-suave); color: var(--erro); text-decoration: none; }
.alerta-venc svg { width: 17px; height: 17px; }
.painel-abas { padding: 0; min-width: 0; }
.abas2 { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--borda); overflow-x: auto; }
.abas2 a { padding: 14px 12px 12px; color: var(--texto-2); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; display: flex; align-items: center; gap: 7px; text-decoration: none; }
.abas2 a:hover { color: var(--texto); }
.abas2 a.ativo { color: var(--marca-forte); border-color: var(--marca); }
.abas2 a svg { width: 16px; height: 16px; }
.abas2 .cont { font-size: 11px; background: var(--cartao-2); border: 1px solid var(--borda); border-radius: 99px; padding: 0 7px; color: var(--texto-2); }
.aba-corpo { padding: 20px; }
.aba-corpo > .cartao { box-shadow: none; }
.aba-corpo h3 { font-size: 14px; margin: 0 0 10px; }
.topo-aba { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mini-serv { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.ms { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px; color: inherit; text-decoration: none; }
.ms:hover { border-color: var(--marca); }
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.servs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.serv { border: 1px solid var(--borda); border-left: 4px solid var(--cor); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; background: var(--cartao); }
.serv.enc { opacity: .65; }
.serv-cab { display: flex; justify-content: space-between; gap: 12px; }
.serv-nome { font-size: 16px; font-weight: 700; }
.serv-chips { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.serv-val { font-size: 20px; font-weight: 700; }
.serv-dados { grid-template-columns: repeat(2, 1fr); }
.vig { display: flex; flex-direction: column; gap: 6px; }
.serv-num { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--cartao-2); border-radius: 10px; padding: 10px 12px; }
.serv-num > div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.serv-num b { font-size: 14px; }
.serv-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pilulas { display: flex; gap: 8px; flex-wrap: wrap; }
.pilula { display: inline-flex; gap: 7px; align-items: center; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); cursor: pointer; font: inherit; font-size: 13px; }
.pilula.ativo { border-color: var(--marca); background: var(--marca-suave); color: var(--marca-forte); }
.serv-tag { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }