/* =====================================================================
   Maneng · Compras & Orçamentos — design system
   Azul-marinho (marca) + laranja (destaque), tipografia Plus Jakarta Sans
   ===================================================================== */
:root {
  color-scheme: light;
  --navy-950: #0c1a33; --navy-900: #13254a; --navy-800: #1a3160; --navy-700: #1f3a6b; --navy-600: #2c4d86;
  --navy-100: #e6ecf6; --navy-50: #f2f5fb;
  --laranja: #f47b20; --laranja-600: #e06612; --laranja-100: #fee9d8; --laranja-50: #fff5ec;

  --marca: var(--navy-700); --destaque: var(--laranja);
  --plano: #f4f6fa; --superficie: #ffffff; --superficie-2: #f8fafd; --superficie-3: #eef2f8;
  --txt: #0f1b33; --txt-2: #4a5873; --muted: #8592a8; --borda: #e3e8f1; --borda-forte: #d2d9e6;
  --grade: #e6eaf1;
  --bom: #16a34a; --bom-fundo: #e8f7ee; --alerta: #d97706; --alerta-fundo: #fff4e0; --critico: #dc2626; --critico-fundo: #fdecec;
  --info: #2563eb; --info-fundo: #e9f0ff;

  --raio: 14px; --raio-sm: 10px; --raio-xs: 7px;
  --sombra-1: 0 1px 2px rgba(16, 32, 64, .06), 0 1px 3px rgba(16, 32, 64, .05);
  --sombra-2: 0 4px 6px -2px rgba(16, 32, 64, .05), 0 12px 24px -6px rgba(16, 32, 64, .10);
  --sombra-3: 0 24px 48px -12px rgba(12, 26, 51, .28);
  --anel: 0 0 0 3px rgba(244, 123, 32, .25);
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sidebar: 256px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --marca: #8fb0ea; --plano: #0b1220; --superficie: #121b2e; --superficie-2: #16213a; --superficie-3: #1c2945;
  --txt: #eef2fa; --txt-2: #b4c0d6; --muted: #7d8aa3; --borda: #23304d; --borda-forte: #2e3d5f; --grade: #22304c;
  --bom-fundo: rgba(22, 163, 74, .16); --alerta-fundo: rgba(217, 119, 6, .18); --critico-fundo: rgba(220, 38, 38, .18); --info-fundo: rgba(37, 99, 235, .2);
  --laranja-50: rgba(244, 123, 32, .12); --laranja-100: rgba(244, 123, 32, .22); --navy-50: #16213a; --navy-100: #1f2d4d;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --sombra-2: 0 10px 24px -8px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--fonte); background: var(--plano); color: var(--txt); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 24px; font-weight: 800; } h2 { font-size: 16px; font-weight: 700; } h3 { font-size: 14px; font-weight: 700; }
svg.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .txt2 { color: var(--txt-2); } .pequeno { font-size: 12px; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .espaco { flex: 1; }
.oculto { display: none !important; }
::selection { background: var(--laranja-100); }

/* ------------------------------ estrutura ------------------------------ */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar); flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: radial-gradient(120% 60% at 0% 0%, #24457d 0%, transparent 60%), linear-gradient(180deg, var(--navy-900), var(--navy-950));
  color: #c9d5ec; padding: 18px 14px; overflow-y: auto; z-index: 30;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
.marca .logo-img { width: 40px; height: 40px; border-radius: 10px; background: #fff; object-fit: contain; padding: 4px; }
.marca .wordmark { font-size: 26px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.wordmark .m1 { color: #fff; } .wordmark .m2 { color: var(--laranja); }
.marca small { display: block; font-size: 11px; color: #8ea2c7; font-weight: 600; letter-spacing: .3px; margin-top: 4px; }
.nav-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #6f84ad; padding: 14px 12px 6px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border-radius: 10px; color: #c9d5ec;
  font-weight: 600; font-size: 13.5px; text-decoration: none; position: relative; transition: background .15s, color .15s;
}
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.ativo { background: rgba(255, 255, 255, .10); color: #fff; }
.nav a.ativo::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--laranja); }
.nav a.ativo svg { color: var(--laranja); }
.nav .contador { margin-left: auto; background: var(--laranja); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.sidebar-rodape { margin-top: auto; padding-top: 16px; }
.cartao-ia { background: linear-gradient(135deg, rgba(244, 123, 32, .22), rgba(244, 123, 32, .06)); border: 1px solid rgba(244, 123, 32, .35);
  border-radius: 12px; padding: 12px; font-size: 12px; color: #f3d6bf; }
.cartao-ia b { color: #fff; display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 2px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 28px;
  background: color-mix(in srgb, var(--plano) 82%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--borda);
}
.busca { position: relative; flex: 1; max-width: 460px; }
.busca svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.busca input { padding-left: 38px; background: var(--superficie); border-radius: 999px; }
.busca kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--fonte); font-size: 11px; color: var(--muted);
  border: 1px solid var(--borda); border-radius: 6px; padding: 0 6px; background: var(--superficie-2); }
.icone-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--borda); background: var(--superficie); color: var(--txt-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: .15s; }
.icone-btn:hover { color: var(--txt); border-color: var(--borda-forte); box-shadow: var(--sombra-1); }
.icone-btn .ponto { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--critico); color: #fff;
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid var(--plano); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  color: #fff; background: linear-gradient(135deg, var(--navy-600), var(--navy-800)); flex: none; }
.avatar.p { width: 26px; height: 26px; font-size: 10.5px; }
.usuario-btn { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--txt); font: inherit; }
.usuario-btn:hover { border-color: var(--borda); background: var(--superficie); }
.usuario-btn .nome { font-weight: 700; font-size: 13px; text-align: left; line-height: 1.2; }
.usuario-btn .papel { font-size: 11px; color: var(--muted); }
.menu-mobile { display: none; }
.pagina { padding: 26px 28px 60px; max-width: 1480px; width: 100%; margin: 0 auto; }

/* Dropdown */
.dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra-3); padding: 6px; z-index: 60; animation: surgir .14s ease-out; }
.dropdown.largo { width: 360px; }
.dropdown a, .dropdown button.item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--txt);
  font: inherit; font-weight: 600; border: 0; background: none; cursor: pointer; text-align: left; text-decoration: none; }
.dropdown a:hover, .dropdown button.item:hover { background: var(--superficie-3); }
.dropdown .cab-drop { padding: 10px 10px 8px; border-bottom: 1px solid var(--borda); margin-bottom: 4px; }
.alerta-item { display: block !important; }
.alerta-item .t { font-weight: 700; font-size: 13px; } .alerta-item .s { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ------------------------------ cabeçalho de página ------------------------------ */
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cab .sobre { font-size: 12px; font-weight: 700; color: var(--destaque); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.cab p { margin: 6px 0 0; color: var(--txt-2); }
.voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--txt-2); margin-bottom: 10px; }
.voltar:hover { color: var(--marca); text-decoration: none; }

/* ------------------------------ componentes ------------------------------ */
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); padding: 20px; margin-bottom: 18px; }
.card-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.card-cab .sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid > .card { margin-bottom: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--borda-forte);
  background: var(--superficie); color: var(--txt); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; text-decoration: none !important;
}
.btn:hover { background: var(--superficie-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--anel); border-color: var(--laranja); }
.btn.pri { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn.pri:hover { background: var(--navy-800); }
.btn.destaque { background: linear-gradient(180deg, #f8892f, var(--laranja-600)); border-color: var(--laranja-600); color: #fff; box-shadow: 0 6px 16px -6px rgba(244, 123, 32, .6); }
.btn.destaque:hover { filter: brightness(1.05); }
.btn.ok { background: var(--bom); border-color: var(--bom); color: #fff; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--txt-2); }
.btn.fantasma:hover { background: var(--superficie-3); color: var(--txt); }
.btn.perigo { color: var(--critico); }
.btn.perigo:hover { background: var(--critico-fundo); border-color: var(--critico); }
.btn.mini { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; gap: 6px; }
.btn.mini svg.ic { width: 15px; height: 15px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
:root[data-theme="dark"] .btn.pri { background: var(--navy-600); border-color: var(--navy-600); }

input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--superficie); color: var(--txt);
  font: inherit; font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 96px; resize: vertical; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--laranja); flex: none; }
label { display: block; font-size: 12.5px; font-weight: 700; color: var(--txt-2); margin: 12px 0 6px; }
label .muted { font-weight: 500; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--txt); margin: 8px 0; cursor: pointer; }

/* Pílulas de status */
.pill { --c: var(--muted); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.prioridade { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.prioridade.URGENTE { background: var(--critico-fundo); color: var(--critico); }
.prioridade.ALTA { background: var(--alerta-fundo); color: var(--alerta); }
.prioridade svg.ic { width: 12px; height: 12px; }
.chip-sla { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--bom-fundo); color: var(--bom); white-space: nowrap; }
.chip-sla.perto { background: var(--alerta-fundo); color: var(--alerta); }
.chip-sla.estourado { background: var(--critico-fundo); color: var(--critico); }
.chip-sla svg.ic { width: 13px; height: 13px; }

/* Tabelas */
.tabela-wrap { overflow-x: auto; margin: 0 -20px -20px; }
table.tab { width: 100%; border-collapse: separate; border-spacing: 0; }
.tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; padding: 10px 20px;
  background: var(--superficie-2); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tab td { padding: 14px 20px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tab tr:last-child td { border-bottom: 0; }
.tab tr.clicavel { cursor: pointer; transition: background .12s; }
.tab tr.clicavel:hover td { background: var(--navy-50); }
.tab .dir { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tab .forte { font-weight: 700; }
.tab input, .tab select { padding: 7px 9px; font-size: 13px; }
.id-mono { font-weight: 800; color: var(--marca); font-size: 13px; letter-spacing: .2px; white-space: nowrap; }
.vazio { text-align: center; padding: 42px 20px; color: var(--muted); }
.vazio svg.ic { width: 36px; height: 36px; color: var(--borda-forte); margin-bottom: 8px; }
.vazio b { display: block; color: var(--txt-2); font-size: 15px; margin-bottom: 4px; }

/* KPIs */
.kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra-1); position: relative; overflow: hidden; }
.kpi .ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--navy-50); color: var(--marca); margin-bottom: 14px; }
.kpi .ico.laranja { background: var(--laranja-50); color: var(--laranja-600); }
.kpi .ico.verde { background: var(--bom-fundo); color: var(--bom); }
.kpi .ico.vermelho { background: var(--critico-fundo); color: var(--critico); }
.kpi .ico svg.ic { width: 21px; height: 21px; }
.kpi .rot { font-size: 12.5px; color: var(--txt-2); font-weight: 600; }
.kpi .val { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .det { font-size: 12px; color: var(--muted); margin-top: 4px; }
.kpi.hero { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); color: #fff; border: 0; }
.kpi.hero .rot, .kpi.hero .det { color: #c3d0ea; }
.kpi.hero .ico { background: rgba(255, 255, 255, .12); color: var(--laranja); }
.kpi.hero::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(244,123,32,.35), transparent 70%); }

/* Segmentado */
.segmento { display: inline-flex; background: var(--superficie-3); border-radius: 10px; padding: 3px; gap: 2px; }
.segmento button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--txt-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.segmento button.on { background: var(--superficie); color: var(--txt); box-shadow: var(--sombra-1); }
.segmento svg.ic { width: 15px; height: 15px; }

/* Pipeline (funil) */
.pipeline { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 10px; overflow-x: auto; }
.pipe { --c: var(--marca); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; cursor: pointer; background: var(--superficie); position: relative; overflow: hidden; transition: .15s; }
.pipe::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--c); }
.pipe:hover { border-color: var(--c); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.pipe .n { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pipe .t { font-size: 12px; font-weight: 600; color: var(--txt-2); min-height: 34px; }

/* Ranking */
.ranking { display: flex; flex-direction: column; gap: 14px; }
.rk { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; }
.rk .pos { width: 28px; height: 28px; border-radius: 8px; background: var(--superficie-3); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--txt-2); }
.rk:first-child .pos { background: var(--laranja-100); color: var(--laranja-600); }
.rk .nome { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk .det { font-size: 11.5px; color: var(--muted); }
.rk .trilho { height: 6px; border-radius: 999px; background: var(--superficie-3); margin-top: 6px; overflow: hidden; }
.rk .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-600), var(--navy-700)); }
.rk:first-child .fill { background: linear-gradient(90deg, #f8a35f, var(--laranja)); }
.rk .val { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.barra-sla { height: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; flex: 1; min-width: 80px; }
.barra-sla > div { height: 100%; border-radius: 999px; background: var(--bom); }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.coluna { --c: var(--marca); background: var(--superficie-3); border-radius: var(--raio); padding: 10px; min-height: 220px; transition: background .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: -2px; }
:root[data-theme="dark"] .coluna { background: #0f182b; }
.coluna.sobre { outline-color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--superficie-3)); }
.coluna-cab { display: flex; align-items: center; gap: 8px; padding: 6px 6px 12px; font-weight: 800; font-size: 13px; }
.coluna-cab .bolinha { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.coluna-cab .qtd { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--txt-2); background: var(--superficie); border-radius: 999px; padding: 1px 9px; }
.coluna .vazia { text-align: center; font-size: 12px; color: var(--muted); padding: 24px 6px; border: 1px dashed var(--borda-forte); border-radius: 10px; }
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 13px; margin-bottom: 10px; cursor: grab; box-shadow: var(--sombra-1); transition: .15s; }
.cartao:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); border-color: var(--borda-forte); }
.cartao.arrastando { opacity: .45; }
.cartao .topo { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cartao .resumo { font-weight: 600; font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartao .obra { font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao .rodape { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--borda); font-size: 12px; color: var(--txt-2); }
.cartao.atrasado { box-shadow: inset 3px 0 0 var(--critico), var(--sombra-1); }

/* Stepper de etapas */
.stepper { display: flex; align-items: flex-start; overflow-x: auto; padding: 4px 2px 2px; }
.passo { flex: 1; min-width: 104px; text-align: center; position: relative; }
.passo::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--borda); z-index: 0; }
.passo:first-child::before { display: none; }
.passo.feito::before, .passo.atual::before { background: var(--navy-700); }
:root[data-theme="dark"] .passo.feito::before, :root[data-theme="dark"] .passo.atual::before { background: var(--marca); }
.passo .bola { width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
  background: var(--superficie); border: 2px solid var(--borda-forte); color: var(--muted); font-weight: 800; font-size: 12px; }
.passo .bola svg.ic { width: 16px; height: 16px; stroke-width: 3; }
.passo.feito .bola { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.passo.atual .bola { background: var(--laranja); border-color: var(--laranja); color: #fff; animation: pulso 2s infinite; }
.passo.cancelado .bola { background: var(--critico); border-color: var(--critico); color: #fff; }
.passo .nome { font-size: 12px; font-weight: 700; color: var(--txt-2); padding: 0 4px; }
.passo.atual .nome { color: var(--txt); }
.passo .quando { font-size: 11px; color: var(--muted); margin-top: 2px; }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 5px var(--laranja-100); } 50% { box-shadow: 0 0 0 9px transparent; } }

/* Cabeçalho da solicitação */
.sol-cab { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.sol-cab h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sol-cab .titulo { font-size: 17px; font-weight: 700; margin-top: 8px; color: var(--txt); }
.metas { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 12.5px; color: var(--txt-2); }
.metas span { display: inline-flex; align-items: center; gap: 6px; }
.metas svg.ic { width: 15px; height: 15px; color: var(--muted); }
@media (max-width: 960px) { .sol-cab { grid-template-columns: 1fr; } }

/* Abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin: 6px 0 20px; overflow-x: auto; }
.abas button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--txt-2); padding: 11px 14px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.abas button:hover { color: var(--txt); }
.abas button.on { color: var(--txt); border-bottom-color: var(--laranja); }
.abas .cont { background: var(--superficie-3); color: var(--txt-2); border-radius: 999px; font-size: 11px; padding: 0 7px; }
.abas .cont.alerta { background: var(--critico-fundo); color: var(--critico); }
.painel { display: none; } .painel.on { display: block; animation: surgir .18s ease-out; }

/* Itens */
.item-linha { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--borda); align-items: start; }
.item-linha:last-child { border-bottom: 0; }
.item-linha .qtd { min-width: 54px; text-align: center; background: var(--navy-50); color: var(--marca); border-radius: 10px; padding: 8px 6px; font-weight: 800; font-size: 15px; line-height: 1.1; }
.item-linha .qtd small { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.item-linha .desc { font-weight: 700; }
.item-linha .spec { font-size: 12.5px; color: var(--txt-2); margin-top: 2px; }
.faltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.falta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--critico); background: var(--critico-fundo); padding: 3px 9px; border-radius: 999px; }
.completo { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--bom); background: var(--bom-fundo); padding: 3px 9px; border-radius: 999px; }
.falta svg.ic, .completo svg.ic { width: 13px; height: 13px; }

/* Conversa / perguntas */
.conversa { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 640px; }
.msg.eles { margin-left: auto; }
.msg .meta { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.msg.eles .meta { justify-content: flex-end; }
.bolha { padding: 12px 14px; border-radius: 14px; font-size: 13.5px; white-space: pre-wrap; line-height: 1.5; }
.msg.nos .bolha { background: var(--navy-50); border: 1px solid var(--navy-100); border-top-left-radius: 4px; }
.msg.eles .bolha { background: var(--bom-fundo); border-top-right-radius: 4px; }
.original { background: var(--superficie-2); border: 1px dashed var(--borda-forte); border-radius: 12px; padding: 14px; white-space: pre-wrap; font-size: 13.5px; }
.anexos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Cotações */
.cot-item { border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; margin-bottom: 14px; background: var(--superficie-2); }
.cot-item-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cot { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 14px; position: relative; transition: .15s; }
.cot:hover { box-shadow: var(--sombra-2); }
.cot.escolhida { border: 2px solid var(--bom); box-shadow: 0 0 0 4px var(--bom-fundo); }
.cot.referencia { border-style: dashed; }
.selo-melhor { position: absolute; top: -10px; right: 12px; background: var(--laranja); color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 999px; letter-spacing: .3px; display: inline-flex; gap: 4px; align-items: center; }
.selo-melhor svg.ic { width: 12px; height: 12px; }
.cot .forn { font-weight: 800; font-size: 13.5px; }
.cot .preco { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.cot .riscado { text-decoration: line-through; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-left: 6px; }
.cot .economia { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--bom); background: var(--bom-fundo); border-radius: 6px; padding: 1px 7px; }
.cot .info { font-size: 12px; color: var(--txt-2); display: grid; gap: 2px; margin-top: 8px; }
.cot .acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.barra-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Orçamentos */
.orc { border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; margin-bottom: 14px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.orc.APROVADO { border-color: color-mix(in srgb, var(--bom) 45%, var(--borda)); background: linear-gradient(90deg, var(--bom-fundo), transparent 60%); }
.orc .total { font-size: 26px; font-weight: 800; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; }
.orc .linha-tempo { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--txt-2); margin-top: 6px; }
.orc .linha-tempo span { display: inline-flex; align-items: center; gap: 5px; }
.orc .linha-tempo svg.ic { width: 14px; height: 14px; }
.orc .acoes { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.previa-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.previa-valores > div { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 12px; padding: 12px; }
.previa-valores .r { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.previa-valores .v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.previa-valores .venda { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.previa-valores .venda .r { color: #c3d0ea; }

/* Linha do tempo */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--borda); }
.ev { position: relative; padding-bottom: 18px; }
.ev::before { content: ""; position: absolute; left: -23px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--navy-600); }
.ev.etapa::before { border-color: var(--laranja); }
.ev .t { font-weight: 700; font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ev .m { font-size: 12px; color: var(--muted); }
.ev .d { font-size: 12.5px; color: var(--txt-2); margin-top: 2px; }

/* Nova solicitação */
.drop { border: 2px dashed var(--borda-forte); border-radius: var(--raio); padding: 26px; text-align: center; color: var(--txt-2); cursor: pointer; transition: .15s; background: var(--superficie-2); }
.drop:hover, .drop.sobre { border-color: var(--laranja); background: var(--laranja-50); color: var(--txt); }
.drop svg.ic { width: 28px; height: 28px; color: var(--laranja); margin-bottom: 6px; }
.drop b { display: block; color: var(--txt); }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.thumbs img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borda); }
.ia-cab { display: flex; align-items: center; gap: 12px; }
.ia-icone { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--laranja), #ff9d4d); box-shadow: 0 8px 18px -8px rgba(244, 123, 32, .7); }
.ia-icone svg.ic { width: 22px; height: 22px; }
.pergunta-ia { background: var(--laranja-50); border: 1px solid var(--laranja-100); border-radius: 12px; padding: 14px; margin-top: 14px; }

/* Login */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-marca { position: relative; overflow: hidden; color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  background: radial-gradient(90% 70% at 100% 0%, rgba(244,123,32,.35), transparent 60%), radial-gradient(80% 80% at 0% 100%, #2a4f8f 0%, transparent 60%), linear-gradient(160deg, var(--navy-800), var(--navy-950)); }
.login-marca .tri { position: absolute; right: -90px; bottom: -60px; width: 460px; height: 420px; opacity: .08; background: #fff; clip-path: polygon(50% 0, 100% 100%, 64% 100%, 50% 62%, 36% 100%, 0 100%); }
.login-marca .wordmark { font-size: 44px; font-weight: 800; letter-spacing: -2px; position: relative; }
.login-marca h2 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; max-width: 480px; margin-top: 18px; position: relative; }
.login-marca h2 em { font-style: normal; color: var(--laranja); }
.login-marca ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; max-width: 460px; position: relative; }
.login-marca li { display: flex; gap: 12px; align-items: flex-start; color: #d3ddf0; font-size: 13.5px; }
.login-marca li .b { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: var(--laranja); flex: none; }
.login-marca li b { color: #fff; display: block; font-size: 14px; }
.login-marca .rodape { font-size: 12px; color: #8ea2c7; position: relative; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--superficie); }
.login-form .caixa { width: 100%; max-width: 380px; }
.login-form .logo-login { height: 56px; margin-bottom: 26px; display: block; }
.login-form h1 { font-size: 28px; }
.login-form .btn { width: 100%; padding: 12px; margin-top: 18px; font-size: 15px; }
.erro-form { color: var(--critico); font-size: 13px; font-weight: 600; margin-top: 10px; min-height: 18px; }
@media (max-width: 900px) { .login { grid-template-columns: 1fr; } .login-marca { padding: 30px 24px; } .login-marca h2 { font-size: 24px; } .login-marca ul, .login-marca .rodape { display: none; } }

/* Modal, toast, carregamento */
.modal-fundo { position: fixed; inset: 0; background: rgba(8, 17, 34, .5); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; z-index: 100; overflow-y: auto; animation: fade .15s; }
.modal { background: var(--superficie); border-radius: 18px; width: 100%; max-width: 620px; box-shadow: var(--sombra-3); animation: subir .2s ease-out; border: 1px solid var(--borda); }
.modal.largo { max-width: 920px; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--borda); }
.modal-cab h2 { font-size: 17px; }
.modal-corpo { padding: 6px 22px 20px; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 18px 18px; flex-wrap: wrap; }
.modal-rodape .perigo { margin-right: auto; }
.lista-check { max-height: 340px; overflow: auto; border: 1px solid var(--borda); border-radius: 12px; padding: 4px 12px; }
.lista-check .check { padding: 8px 0; border-bottom: 1px solid var(--borda); margin: 0; }
.lista-check .check:last-child { border-bottom: 0; }
.toasts { position: fixed; top: 18px; right: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, 92vw); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--superficie); color: var(--txt); border: 1px solid var(--borda); border-left: 4px solid var(--bom);
  border-radius: 12px; padding: 12px 14px; box-shadow: var(--sombra-3); font-weight: 600; font-size: 13.5px; animation: entrar .22s ease-out; }
.toast svg.ic { color: var(--bom); margin-top: 1px; }
.toast.erro { border-left-color: var(--critico); } .toast.erro svg.ic { color: var(--critico); }
.toast.saindo { animation: sair .2s ease-in forwards; }
.carregando { width: 18px; height: 18px; border: 2.5px solid var(--borda); border-top-color: var(--laranja); border-radius: 50%; animation: gira .7s linear infinite; display: inline-block; flex: none; }
.bloqueio { position: fixed; inset: 0; z-index: 200; background: rgba(8, 17, 34, .35); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; animation: fade .15s; }
.bloqueio .caixa { background: var(--superficie); border-radius: 16px; padding: 18px 24px; display: flex; gap: 14px; align-items: center; box-shadow: var(--sombra-3); font-weight: 700; max-width: 90vw; }
.skeleton { background: linear-gradient(90deg, var(--superficie-3) 25%, var(--superficie-2) 50%, var(--superficie-3) 75%); background-size: 200% 100%; animation: brilho 1.2s infinite; border-radius: 12px; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes surgir { from { opacity: 0; transform: translateY(4px); } }
@keyframes subir { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes entrar { from { opacity: 0; transform: translateX(24px); } }
@keyframes sair { to { opacity: 0; transform: translateX(24px); } }
@keyframes brilho { to { background-position: -200% 0; } }

/* Responsivo */
@media (max-width: 1100px) { .pipeline { grid-template-columns: repeat(4, minmax(120px, 1fr)); } }
@media (max-width: 960px) {
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra-3); }
  .sidebar.aberto { transform: none; }
  .menu-mobile { display: inline-flex; }
  .topbar { padding: 10px 16px; }
  .pagina { padding: 18px 16px 50px; }
  .usuario-btn .nome, .usuario-btn .papel, .busca kbd, .btn-nova span { display: none; }
  .g2 { grid-template-columns: 1fr; }
  .previa-valores { grid-template-columns: 1fr; }
  .orc { grid-template-columns: 1fr; } .orc .total { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* =====================================================================
   Financeiro — relógios de corte, cartões por tipo de OS, calendário
   ===================================================================== */
.relogio { display: flex; gap: 8px; align-items: stretch; }
.relogio .bloco { min-width: 58px; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: 12px; padding: 8px 6px 6px; text-align: center; }
.relogio .n { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.relogio .u { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-top: 4px; }
.relogio.grande .bloco { min-width: 74px; padding: 12px 8px 8px; }
.relogio.grande .n { font-size: 38px; }
.relogio.alerta .bloco { background: var(--alerta-fundo); border-color: color-mix(in srgb, var(--alerta) 35%, transparent); color: var(--alerta); }
.relogio.critico .bloco { background: var(--critico-fundo); border-color: color-mix(in srgb, var(--critico) 40%, transparent); color: var(--critico); animation: pisca 1s steps(2) infinite; }
.relogio.encerrado .bloco { opacity: .5; }
.kpi.hero .relogio .bloco { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); color: #fff; }
.kpi.hero .relogio .u { color: #c3d0ea; }
.kpi.hero .relogio.critico .bloco { background: rgba(220,38,38,.35); }
.kpi.hero .relogio.alerta .bloco { background: rgba(244,123,32,.3); }
@keyframes pisca { 50% { box-shadow: 0 0 0 3px rgba(220,38,38,.18); } }
.mini-relogio { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums;
  background: var(--navy-50); color: var(--marca); white-space: nowrap; }
.mini-relogio.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.mini-relogio.critico { background: var(--critico-fundo); color: var(--critico); }
.mini-relogio.encerrado { background: var(--superficie-3); color: var(--muted); }
.mini-relogio svg.ic { width: 13px; height: 13px; }

.tipos-os { display: grid; grid-template-columns: repeat(6, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; overflow-x: auto; }
.tipo-card { --c: var(--marca); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; cursor: pointer; position: relative; overflow: hidden; box-shadow: var(--sombra-1); transition: .15s; }
.tipo-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.tipo-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--c); }
.tipo-card .sigla { display: inline-flex; font-size: 12px; font-weight: 800; color: #fff; background: var(--c); border-radius: 7px; padding: 2px 8px; letter-spacing: .5px; }
.tipo-card .nome { font-size: 12.5px; font-weight: 700; color: var(--txt-2); margin-top: 8px; }
.tipo-card .valor { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tipo-card .det { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 1200px) { .tipos-os { grid-template-columns: repeat(3, minmax(160px, 1fr)); } }

.corte-card { --c: var(--marca); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra-1); position: relative; overflow: hidden; }
.corte-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c); }
.corte-card .topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.corte-card h3 { font-size: 15px; }
.corte-card .quando { font-size: 12.5px; color: var(--txt-2); margin-top: 2px; }
.corte-card .ciclo { height: 6px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; margin: 14px 0 8px; }
.corte-card .ciclo > div { height: 100%; background: var(--c); border-radius: 999px; }
.corte-card .pend { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.corte-card .pend b { font-size: 17px; font-variant-numeric: tabular-nums; }

.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendario .dsem { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; padding-bottom: 4px; }
.calendario .dia { min-height: 64px; border: 1px solid var(--borda); border-radius: 10px; padding: 6px; font-size: 12px; font-weight: 700; color: var(--txt-2); background: var(--superficie); }
.calendario .dia.fora { opacity: .35; }
.calendario .dia.hoje { border-color: var(--laranja); box-shadow: inset 0 0 0 1px var(--laranja); color: var(--laranja-600); }
.calendario .marca-corte { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; color: #fff; border-radius: 5px; padding: 1px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.barra-lote { position: sticky; bottom: 16px; z-index: 15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--navy-900); color: #fff; border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--sombra-3); margin-top: 16px; animation: subir .18s ease-out; }
.barra-lote b { font-size: 15px; }
.barra-lote .btn { border-color: rgba(255,255,255,.2); }
.barra-lote .btn.fantasma { color: #c9d5ec; }
.cartao .sel { width: 18px; height: 18px; margin: 0; }
.cartao.selecionado { border-color: var(--laranja); box-shadow: 0 0 0 3px var(--laranja-100); }
.cartao .valor { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 8px; }
.cartao .valor.zero { color: var(--critico); font-size: 13px; }
.filtros-os { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros-os button { --c: var(--marca); border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--txt-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.filtros-os button .q { font-size: 11px; background: var(--superficie-3); border-radius: 999px; padding: 0 6px; }
.filtros-os button.on { background: var(--c); border-color: var(--c); color: #fff; }
.filtros-os button.on .q { background: rgba(255,255,255,.25); color: #fff; }
.alerta-faixa { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.alerta-faixa.erro { background: var(--critico-fundo); color: var(--critico); } .alerta-faixa.aviso { background: var(--alerta-fundo); color: var(--alerta); } .alerta-faixa.info { background: var(--info-fundo); color: var(--info); }
.alerta-faixa .btn { margin-left: auto; }
.origem { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }

/* ---------- navegador de mês e preventivas ---------- */
.faixa-mes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nav-mes { display: inline-flex; align-items: center; gap: 4px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 4px; box-shadow: var(--sombra-1); }
.nav-mes .mes-atual { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; margin: 0; border-radius: 9px; cursor: pointer; font-size: 15px; min-width: 190px; justify-content: center; color: var(--txt); }
.nav-mes .mes-atual:hover { background: var(--navy-50); }
.nav-mes .mes-atual svg.ic { width: 17px; height: 17px; color: var(--destaque); }
.nav-mes .mes-atual input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; padding: 0; border: 0; }
.nav-mes .mes-atual input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.resumo-mes { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--txt-2); }
.resumo-mes b { color: var(--txt); }
.q-bt { background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 1px 8px; font-size: 12px; margin-left: 4px; }
.kpi .trilho, .cli-prev .trilho { height: 6px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.kpi .trilho .fill, .cli-prev .trilho .fill { height: 100%; background: linear-gradient(90deg, var(--laranja), var(--laranja-600)); border-radius: 999px; }
.kpi.hero .trilho { background: rgba(255, 255, 255, .2); }
.cli-prev { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); margin-bottom: 10px; overflow: hidden; }
.cli-prev-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; flex-wrap: wrap; }
.cli-prev-cab:hover { background: var(--superficie-2); }
.cli-prev-cab .chev svg.ic { width: 16px; height: 16px; color: var(--muted); transition: transform .18s; }
.cli-prev.aberto .chev svg.ic { transform: rotate(90deg); }
.cli-prev-cab .nome { flex: 1; min-width: 180px; }
.cli-prev-cab .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cli-prev-cab .valor { text-align: right; min-width: 170px; }
.cli-prev-cab .valor .trilho { margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--txt-2); background: var(--superficie-3); border-radius: 999px; padding: 4px 10px; }
.chip svg.ic { width: 13px; height: 13px; }
.chip.falta { color: var(--critico); background: var(--critico-fundo); }
.cli-prev-corpo { border-top: 1px solid var(--borda); }
.cli-prev-corpo:empty { display: none; }
.cli-prev:not(.aberto) .cli-prev-corpo { display: none; }
.cli-prev-corpo .tabela-wrap { max-height: 520px; overflow: auto; }
.cli-prev-corpo .tab th { position: sticky; top: 0; background: var(--superficie-2); z-index: 1; }
.tab tr.apagada td { opacity: .55; }
.per { display: inline-block; font-size: 12px; font-weight: 700; color: var(--marca); background: var(--navy-50); border-radius: 6px; padding: 2px 8px; text-transform: capitalize; }
.per.herda { color: var(--muted); background: none; border: 1px dashed var(--borda-forte); }
.visita { display: inline-flex; margin-left: 6px; vertical-align: middle; color: var(--bom); }
.visita svg.ic { width: 15px; height: 15px; }
.lista-avisos { max-height: 220px; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio-sm); padding: 8px 12px; font-size: 12.5px; color: var(--txt-2); background: var(--superficie-2); }
.lista-avisos div { padding: 4px 0; border-bottom: 1px dashed var(--borda); }
.lista-avisos div:last-child { border: 0; }
.val-moeda { font-size: clamp(18px, 1.9vw, 26px) !important; white-space: nowrap; display: block; }
@media (max-width: 760px) {
  .cli-prev-cab .valor { text-align: left; min-width: 0; width: 100%; }
  .nav-mes .mes-atual { min-width: 0; }
}