/* X5 CRM — design system (Stripe-like: canvas frio, superfícies brancas,
   hairlines, Inter, navy como tinta; vermelho X5 reservado a marca e ação) */

:root {
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --ink: #1A1F36;
  --ink-2: #3C4257;
  --muted: #697386;
  --faint: #8792A2;
  --border: #E3E8EE;
  --border-strong: #D5DBE1;
  --brand: #D32F2F;
  --brand-dark: #B02525;
  --brand-soft: #FDF1F1;
  --blue: #175CD3;   --blue-soft: #EFF4FF;
  --amber: #B54708;  --amber-soft: #FFF6EA;
  --green: #067647;  --green-soft: #ECFDF3;
  --violet: #6941C6; --violet-soft: #F5F1FE;
  --zap: #1FA855;
  --shadow-sm: 0 1px 2px rgba(26,31,54,.05), 0 1px 3px rgba(26,31,54,.04);
  --shadow-md: 0 6px 16px rgba(26,31,54,.08), 0 2px 4px rgba(26,31,54,.04);
  --r: 10px;
  --r-lg: 14px;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.5;
  background: var(--bg); color: var(--ink);
  font-feature-settings: "cv11";
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- shell: sidebar (desktop) + conteúdo ---------- */
.shell { min-height: 100vh; }
.sidebar { display: none; }
.content { max-width: 760px; margin: 0 auto; padding: 0 16px 96px; }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 232px 1fr; }
  .sidebar {
    display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 0; height: 100vh;
    padding: 20px 12px; border-right: 1px solid var(--border);
    background: var(--surface);
  }
  .content { max-width: 860px; padding: 0 40px 64px; }
}

.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 22px; }
.brand-logo { height: 34px; width: auto; flex: none; }
.brand-logo-login { height: 60px; margin: 0 auto; display: block; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.brand-name small { display: block; font-size: 11px; font-weight: 500; color: var(--faint); }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--ink-2); font-weight: 500; font-size: 13.5px;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .12s;
}
.nav-item:hover { background: var(--bg); }
.nav-item.ativo { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.nav-item .conta { margin-left: auto; }
.sidebar-fim { margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------- topo mobile ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  margin: 0 -16px 0; padding: 12px 16px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand { padding: 0; }
.topbar .quem { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}
@media (min-width: 900px) { .topbar { display: none; } }

/* ---------- hero de progresso: a fila do dia ---------- */
.fila-hero {
  margin-top: 20px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.fila-hero .linha1 { display: flex; align-items: baseline; gap: 8px; }
.fila-hero h1 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.fila-hero .data { color: var(--faint); font-size: 12.5px; margin-left: auto; }
.fila-frase { color: var(--muted); font-size: 13px; margin-top: 2px; }
.progresso { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.progresso-barra {
  flex: 1; height: 6px; border-radius: 999px; background: var(--bg);
  overflow: hidden;
}
.progresso-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #E25555);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.progresso-num { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }

/* ---------- KPIs ---------- */
.kpis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 12px;
}
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: border-color .12s, transform .12s;
}
.kpi:hover { border-color: var(--border-strong); }
.kpi:active { transform: scale(.985); }
.kpi .rotulo {
  font-size: 10.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint);
}
.kpi .valor { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; }
.kpi .valor small { font-size: 13px; color: var(--faint); font-weight: 500; }
.kpi.alerta .valor { color: var(--brand-dark); }

/* ---------- tabs ---------- */
.tabs {
  display: flex; gap: 2px; margin: 20px 0 6px;
  background: #ECEFF3; border-radius: 9px; padding: 3px; width: fit-content;
}
.tab {
  border: 0; background: none; padding: 6px 16px; border-radius: 7px;
  font-weight: 550; font-size: 13px; color: var(--muted); cursor: pointer;
}
.tab.ativo { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 600; }
@media (min-width: 900px) { .tabs { display: none; } }

/* ---------- seções ---------- */
section.bloco { margin-top: 22px; }
.bloco-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bloco-cab h2 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.conta {
  font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px;
  background: #ECEFF3; color: var(--ink-2);
}
.conta.cheia { background: var(--brand); color: #fff; }
.bloco-cab .acao-cab { margin-left: auto; font-size: 12px; }

.vazio {
  padding: 18px 16px; border: 1px dashed var(--border-strong);
  border-radius: var(--r); color: var(--faint); font-size: 13px;
  background: transparent;
}

/* chips de categoria do retrabalho */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.chip {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 550;
  color: var(--ink-2); cursor: pointer; transition: all .12s;
}
.chip:hover { border-color: var(--border-strong); }
.chip.ativo { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- cards de lead ---------- */
.lista { display: flex; flex-direction: column; gap: 8px; }
.card {
  position: relative; display: flex; align-items: stretch; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 14px 12px 16px;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--border-strong);
}
.card.c-novo::before { background: var(--brand); }
.card.c-follow::before { background: var(--blue); }
.card.c-recontato::before, .card.c-vendido::before, .card.c-campanha::before { background: var(--amber); }
.card.c-preco::before, .card.c-similar::before { background: var(--amber); }
.card.c-pre_aprovado::before { background: var(--green); }
.card.c-ia::before { background: var(--violet); }
.card.atrasada { border-color: #F2C4C4; background: #FFFDFD; }

.card-info { flex: 1; min-width: 0; }
.card-nome { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card-carro { color: var(--ink-2); font-size: 12.5px; margin-top: 1px; }
.card-meta { color: var(--faint); font-size: 12px; margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
.card-meta .sep::before { content: "·"; }
.card-coment {
  margin-top: 6px; font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 2px solid var(--border); padding-left: 8px;
}
.card-titulo-acao { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; }
.card-acoes { display: flex; flex-direction: column; gap: 6px; justify-content: center; flex: none; }

/* badges */
.badge {
  font-size: 10.5px; font-weight: 650; padding: 2px 7px; border-radius: 5px;
  letter-spacing: .01em; white-space: nowrap;
}
.b-pre { background: var(--green-soft); color: var(--green); }
.b-atraso { background: var(--brand-soft); color: var(--brand-dark); }
.b-ia { background: var(--violet-soft); color: var(--violet); }
.b-cat { background: var(--amber-soft); color: var(--amber); }
.b-novo { background: var(--brand-soft); color: var(--brand-dark); }
.b-canal { background: #ECEFF3; color: var(--muted); font-weight: 550; }

/* ---------- botões ---------- */
.btn {
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: 8px; padding: 7px 13px; font-size: 13px; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s;
}
.btn:hover { background: var(--bg); }
.btn:active { transform: scale(.97); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); }
.btn-zap { background: var(--zap); border-color: var(--zap); color: #fff; }
.btn-zap:hover { filter: brightness(.95); background: var(--zap); }
.btn-ghost { border-color: transparent; background: none; color: var(--muted); }
.btn-ghost:hover { background: var(--bg); color: var(--ink-2); }
.btn-mini { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.btn-perigo { color: var(--brand-dark); border-color: #F2C4C4; }
.btn-perigo:hover { background: var(--brand-soft); }

/* ---------- drawer / modal de lead ---------- */
dialog.drawer {
  border: 0; padding: 0; background: var(--surface);
  width: 100%; max-width: 560px; max-height: 92vh;
  border-radius: 16px 16px 0 0; margin: auto auto 0;
  box-shadow: 0 -8px 40px rgba(26,31,54,.18);
}
@media (min-width: 900px) {
  dialog.drawer {
    margin: auto; border-radius: 14px; max-height: 86vh;
    box-shadow: 0 24px 60px rgba(26,31,54,.25);
  }
}
dialog.drawer::backdrop { background: rgba(26,31,54,.42); }
.drawer-corpo { padding: 20px 22px 26px; overflow-y: auto; max-height: inherit; }
.drawer-cab { display: flex; align-items: flex-start; gap: 10px; }
.drawer-cab h3 { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.drawer-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.fechar {
  margin-left: auto; border: 0; background: var(--bg); color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; font-size: 16px; cursor: pointer;
}
.fechar:hover { background: #ECEFF3; }
.drawer-acoes { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }

.composer { margin-top: 14px; }
.composer textarea {
  width: 100%; min-height: 84px; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: 10px 12px; font-size: 14px; background: var(--surface);
}
.composer textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.composer .rodape { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.composer .dica { font-size: 11.5px; color: var(--faint); }
.composer .rodape .btn { margin-left: auto; }

.sub-cab {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin: 20px 0 10px;
}

/* ações pendentes no drawer */
.acao-linha {
  display: flex; align-items: center; gap: 8px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.acao-linha:last-child { border-bottom: 0; }
.acao-linha .quando { color: var(--faint); font-size: 12px; white-space: nowrap; }
.acao-linha .titulo { flex: 1; min-width: 0; }
.acao-linha input[type="date"] {
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px;
  font-size: 12px; color: var(--ink-2);
}

/* timeline (activity feed) */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--border);
}
.evento { position: relative; padding: 0 0 16px; }
.evento::before {
  content: ""; position: absolute; left: -21px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
}
.evento.e-coment::before { border-color: var(--blue); }
.evento.e-sys::before { border-color: var(--border-strong); }
.evento .quando { font-size: 11.5px; color: var(--faint); }
.evento .texto { font-size: 13px; margin-top: 2px; }
.evento .ia { font-size: 12px; color: var(--violet); margin-top: 3px; }

/* finalizar */
details.finalizar { margin-top: 18px; }
details.finalizar summary {
  cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 550;
  list-style: none;
}
details.finalizar summary::before { content: "▸ "; }
details.finalizar[open] summary::before { content: "▾ "; }
.finalizar-form { display: flex; gap: 8px; margin-top: 10px; }
.finalizar-form select {
  flex: 1; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 10px; background: var(--surface); font-size: 13px;
}

/* ---------- carteira ---------- */
.busca {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); padding: 9px 12px;
}
.busca:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.busca input { border: 0; outline: none; flex: 1; font-size: 14px; background: none; }
.busca .lupa { color: var(--faint); }

/* ---------- tabelas (admin) ---------- */
.tabela-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow-x: auto; margin-top: 10px;
}
table.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); font-weight: 650;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: #FAFBFC; }

/* painéis genéricos */
.painel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 16px 18px; margin-top: 12px;
}
.painel h3 { font-size: 14px; font-weight: 650; margin-bottom: 10px; }
.campo { margin-bottom: 10px; }
.campo > label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.campo .check-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.campo .check-linha input { accent-color: var(--brand); width: 15px; height: 15px; }
.campo input, .campo select {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 10px; font-size: 13.5px; background: var(--surface);
}
.campo input:focus, .campo select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }

.banner-alerta {
  display: none; margin-top: 14px; padding: 11px 14px; border-radius: var(--r);
  background: var(--amber-soft); color: var(--amber); font-size: 13px;
  border: 1px solid #F5DEBB; font-weight: 550;
}

/* ---------- login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-md);
  width: min(92vw, 384px); padding: 36px 32px 28px;
}
.login-card .brand { justify-content: center; padding-bottom: 8px; }
.login-titulo { text-align: center; font-size: 15px; font-weight: 650; margin-bottom: 2px; }
.login-sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.login-card input {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 10px 12px; font-size: 14px; margin-bottom: 10px;
}
.login-card input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.login-card .btn-brand { width: 100%; padding: 10px; font-size: 14px; margin-top: 4px; }
.erro { color: var(--brand-dark); font-size: 12.5px; margin-top: 10px; text-align: center; }
.login-rodape { text-align: center; color: var(--faint); font-size: 11.5px; margin-top: 22px; }

/* ---------- skeleton + toast ---------- */
.skel {
  border-radius: var(--r); background: linear-gradient(90deg, #EEF1F4 25%, #F6F8FA 50%, #EEF1F4 75%);
  background-size: 400px 100%; animation: shimmer 1.2s infinite linear;
  height: 64px; border: 1px solid var(--border);
}
@keyframes shimmer { to { background-position: 400px 0; } }

#toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 550;
  padding: 9px 16px; border-radius: 999px; box-shadow: var(--shadow-md);
  animation: sobe .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes sobe { from { opacity: 0; transform: translateY(8px); } }

.dia-limpo { text-align: center; padding: 40px 20px; color: var(--muted); }
.dia-limpo .emoji { font-size: 34px; }
.dia-limpo strong { display: block; font-size: 15px; color: var(--ink); margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Tema "app X5" (ref. Pinterest aviação): a marca veste o topo —
   faixa vermelha com texto branco, cards brancos sobrepostos,
   corpo cinza-claro. Overrides sobre a base Stripe acima.
   ============================================================ */
:root {
  --brand-grad: linear-gradient(165deg, #A8151F 0%, #C8202B 45%, #E23744 100%);
}
body { background: #F2F4F6; }

/* faixa vermelha do topo */
.banda {
  background: var(--brand-grad);
  border-radius: 0 0 26px 26px;
  padding: 0 16px 40px;
  margin: 0 -16px;
  color: #fff;
}
@media (min-width: 900px) {
  .banda { margin: 22px 0 0; border-radius: 22px; padding: 6px 22px 42px; }
}

/* topo dentro da faixa */
.banda .topbar {
  background: none; border-bottom: 0; backdrop-filter: none;
  margin: 0; padding: 14px 0 4px; position: static;
}
.banda .topbar .btn-ghost { color: rgba(255,255,255,.85); }
.banda .topbar .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.banda .avatar { background: rgba(255,255,255,.22); }

/* hero vira parte da faixa, sem card */
.banda .fila-hero {
  background: none; border: 0; box-shadow: none;
  padding: 10px 0 0; margin-top: 0;
}
.banda .fila-hero h1 { color: #fff; font-size: 19px; letter-spacing: -.02em; }
.banda .fila-frase { color: rgba(255,255,255,.82); }
.banda .data { color: rgba(255,255,255,.72); }
.banda .progresso-barra { background: rgba(255,255,255,.22); }
.banda .progresso-fill { background: #fff; }
.banda .progresso-num { color: #fff; }

/* tabs em pill dentro da faixa (mobile) */
.banda .tabs {
  display: flex; background: rgba(255,255,255,.16);
  margin: 16px 0 0; padding: 3px;
}
.banda .tab { color: rgba(255,255,255,.9); }
.banda .tab.ativo { background: #fff; color: var(--brand-dark); }
@media (min-width: 900px) { .banda .tabs { display: none; } }

/* ações do hero (admin) em branco */
.banda .drawer-acoes .btn {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff;
}
.banda .drawer-acoes .btn:hover { background: rgba(255,255,255,.24); }

/* KPIs sobrepõem a faixa */
.kpis { margin-top: -28px; position: relative; z-index: 2; }
.kpi { border-radius: 14px; box-shadow: var(--shadow-md); border-color: transparent; }

/* seleções em vermelho */
.chip.ativo { background: var(--brand); border-color: var(--brand); color: #fff; }
.nav-item.ativo { background: var(--brand); color: #fff; }
.nav-item.ativo .conta { background: rgba(255,255,255,.25); color: #fff; }

/* login mergulhado na marca */
.login-body { background: var(--brand-grad); }
.login-card { border: 0; box-shadow: 0 24px 60px rgba(90,10,15,.4); border-radius: 20px; }
.login-rodape { color: var(--faint); }

/* cartões um tico mais redondos, corpo mais respirado */
.card { border-radius: 14px; }
dialog.drawer { border-radius: 20px 20px 0 0; }
@media (min-width: 900px) { dialog.drawer { border-radius: 20px; } }

/* ---------- painel do gestor: funil, série 14d, badges ---------- */
.tabs-scroll { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }

.funil {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px 14px 12px;
}
.funil-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.funil-num { font-size: 18px; font-weight: 700; }
.funil-barra {
  width: 100%; max-width: 54px; height: 84px; border-radius: 8px;
  background: var(--bg); display: flex; align-items: flex-end; overflow: hidden;
}
.funil-fill { width: 100%; border-radius: 8px 8px 0 0; min-height: 4px; }
.f-sem_contato { background: var(--brand); }
.f-negociacao { background: var(--blue); }
.f-aguardando { background: #F0A929; }
.f-visita { background: var(--green); }
.f-esfriando { background: #B3BAC5; }
.funil-rotulo { font-size: 11px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.2; }
.funil-valor { font-size: 11px; color: var(--faint); }

.serie { display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; padding: 4px 0 0; }
.serie-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 34px; }
.serie-barras { display: flex; gap: 2px; align-items: flex-end; height: 68px; }
.sb { width: 7px; border-radius: 3px 3px 0 0; display: inline-block; }
.d-novos { background: var(--brand); }
.d-registros { background: var(--blue); }
.d-finalizados { background: #B3BAC5; }
.serie-rotulo { font-size: 10px; color: var(--faint); }
.legenda { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legenda .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 6px; }

.pct { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.pct-ok { background: var(--green-soft); color: var(--green); }
.pct-medio { background: var(--amber-soft); color: var(--amber); }
.pct-ruim { background: var(--brand-soft); color: var(--brand-dark); }

.alertas { display: grid; gap: 6px; }
.alerta-linha {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--amber); border-radius: var(--r);
  padding: 10px 14px; font-size: 13px; box-shadow: var(--shadow-sm);
}

/* ============================================================
   Desktop dedicado (≥1100px): quadro de 3 colunas na agenda,
   carteira em grade, lead em painel lateral. O mobile fica intacto.
   ============================================================ */
@media (min-width: 1100px) {
  .content { max-width: 1300px; padding: 0 36px 64px; }

  /* agenda em quadro */
  #vista-hoje {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0 18px; align-items: start;
  }
  #vista-hoje section.bloco { min-width: 0; }
  #vista-hoje [data-bloco="sem_comentario"] { grid-column: 1 / 3; }
  #vista-hoje [data-bloco="checklists_vencidos"] { grid-column: 3; }
  #vista-hoje .dia-limpo { grid-column: 1 / -1; }
  #vista-hoje .card { flex-direction: column; align-items: stretch; }
  #vista-hoje .card-acoes { flex-direction: row; justify-content: flex-end; margin-top: 10px; }

  /* carteira em grade */
  #vista-carteira .lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }

  /* KPIs respiram */
  .kpis { gap: 14px; }
  .kpi .valor { font-size: 26px; }
}

/* lead vira painel lateral no desktop */
@media (min-width: 1100px) {
  dialog.drawer {
    margin: 0 0 0 auto; height: 100vh; max-height: 100vh;
    width: 560px; border-radius: 0;
    box-shadow: -16px 0 56px rgba(26,31,54,.28);
    animation: desliza .22s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes desliza { from { transform: translateX(40px); opacity: .6; } }
}

/* finalização visível */
.painel-fim {
  margin-top: 14px; padding: 12px 14px; border: 1px solid #F2C4C4;
  background: #FFF9F9; border-radius: var(--r);
}
.painel-fim .finalizar-form { margin-top: 0; }
.painel-fim .aviso { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* Anti-zoom mobile (31/08): iOS da zoom em input com fonte <16px; 
   touch-action mata o zoom do duplo-toque */
html, body { touch-action: manipulation; }
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
}