/* Mavify Gestão v2: visual interno (vidro, brilho suave e luz verde-teal valem só aqui; ver CLAUDE.md do projeto).
   Fontes servidas daqui mesmo (a CSP só permite 'self'). Sem animação contínua: tudo roda uma vez.
   Desempenho (PC de 8 GB): backdrop-filter SÓ no menu e no painel do grupo, nas janelas, na busca Ctrl+K e no painel de alertas.
   Cartões, listas e quadros usam fundo sólido levemente translúcido, sem blur. Animações só em transform e opacity. */
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'General Sans'; src: url('fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: italic; }

/* ================================================================ tokens */
:root {
  /* tema claro: versão sólida (sem vidro, sem blur) */
  color-scheme: light;
  --bg: #F4F4F2; --tx: #0E0E0E; --mu: #5B6064; --mu2: #6C7276;
  --vidro: #FFFFFF; --vidro-2: #0E0E0E; --vidro-3: #FFFFFF; --cd-aninhado: #F4F4F2;
  --borda: #E2E0D8; --borda-forte: #CFCCC1; --realce: inset 0 1px 0 #fff;
  --sombra: 0 1px 2px rgba(14,14,14,.05), 0 16px 34px -22px rgba(14,14,14,.24);
  --verde: #2F6B55; --em: #2E4B3F; --foco: #1C2B2A; --creme: #E8E4D9;
  --verde-esc: #1C2B2A; --verde-med: #2E4B3F; --degrade: linear-gradient(135deg, #1C2B2A, #2E4B3F);
  --fill: rgba(14,14,14,.04); --fill-h: rgba(14,14,14,.07); --ctl: #FFFFFF; --grade: rgba(14,14,14,.09);
  --overlay: rgba(14,14,14,.46); --luz: rgba(46,75,63,.10);
  --btn-p-bg: #0E0E0E; --btn-p-tx: #F4F4F2; --btn-p-bg-h: #2a2d31;
  --bad: #8a3b32; --ok: #2f5d4b; --am: #7a5a00; --amf: #efdf9e; --amb: #b8962e;
  --t-bad-bg: #f1d6d1; --t-bad-tx: #5b1f17; --t-ok-bg: #d3e8dc; --t-ok-tx: #14392b; --t-am-bg: #efdf9e; --t-am-tx: #3d2e00; --t-n-bg: #E8E4D9; --t-n-tx: #0E0E0E; --t-mu-bg: #ecebe6; --t-mu-tx: #5B6064;
  --err-bg: #f3dcd7; --err-tx: #5b1f17; --ok-bg: #d8eadf; --ok-tx: #1d4636;
  --aviso-bg: #8a3b32; --aviso-tx: #fff; --toast-bg: #1A1D21;
  --blur: none; --blur-forte: none;
  --r-g: 22px; --r-p: 14px; --r-pil: 999px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    color-scheme: dark;
    --bg: #0B0D0D; --tx: #F4F4F2; --mu: #A5ABA8; --mu2: #8B918E;
    --vidro: rgba(24,27,30,.8); --vidro-2: rgba(12,14,15,.78); --vidro-3: rgba(18,21,23,.9); --cd-aninhado: rgba(244,244,242,.035);
    --borda: rgba(244,244,242,.08); --borda-forte: rgba(244,244,242,.16); --realce: inset 0 1px 0 rgba(244,244,242,.07);
    --sombra: 0 24px 48px -30px rgba(0,0,0,.7);
    --verde: #8CC5AE; --em: #CFE6DC; --foco: #8CC5AE;
    --fill: rgba(244,244,242,.05); --fill-h: rgba(244,244,242,.09); --ctl: rgba(244,244,242,.04); --grade: rgba(244,244,242,.07);
    --overlay: rgba(4,6,6,.62); --luz: rgba(46,75,63,.35);
    --btn-p-bg: #F4F4F2; --btn-p-tx: #0E0E0E; --btn-p-bg-h: #ffffff;
    --bad: #E8A196; --ok: #9AD9A8; --am: #E6C565; --amf: #6b5517; --amb: #c9a227;
    --t-bad-bg: rgba(226,154,143,.15); --t-bad-tx: #F0B3A9; --t-ok-bg: rgba(154,217,168,.14); --t-ok-tx: #A9E3B5; --t-am-bg: rgba(230,197,101,.15); --t-am-tx: #EBCF7C; --t-n-bg: rgba(232,228,217,.12); --t-n-tx: #E8E4D9; --t-mu-bg: rgba(244,244,242,.07); --t-mu-tx: #A5ABA8;
    --err-bg: #3a1f1b; --err-tx: #f0c4bc; --ok-bg: #1b3027; --ok-tx: #bfe3d2;
    --aviso-bg: #5a2620; --toast-bg: rgba(18,21,23,.92);
    --blur: none; --blur-forte: blur(20px) saturate(140%);
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #0B0D0D; --tx: #F4F4F2; --mu: #A5ABA8; --mu2: #8B918E;
  --vidro: rgba(24,27,30,.8); --vidro-2: rgba(12,14,15,.78); --vidro-3: rgba(18,21,23,.9); --cd-aninhado: rgba(244,244,242,.035);
  --borda: rgba(244,244,242,.08); --borda-forte: rgba(244,244,242,.16); --realce: inset 0 1px 0 rgba(244,244,242,.07);
  --sombra: 0 24px 48px -30px rgba(0,0,0,.7);
  --verde: #8CC5AE; --em: #CFE6DC; --foco: #8CC5AE;
  --fill: rgba(244,244,242,.05); --fill-h: rgba(244,244,242,.09); --ctl: rgba(244,244,242,.04); --grade: rgba(244,244,242,.07);
  --overlay: rgba(4,6,6,.62); --luz: rgba(46,75,63,.35);
  --btn-p-bg: #F4F4F2; --btn-p-tx: #0E0E0E; --btn-p-bg-h: #ffffff;
  --bad: #E8A196; --ok: #9AD9A8; --am: #E6C565; --amf: #6b5517; --amb: #c9a227;
  --t-bad-bg: rgba(226,154,143,.15); --t-bad-tx: #F0B3A9; --t-ok-bg: rgba(154,217,168,.14); --t-ok-tx: #A9E3B5; --t-am-bg: rgba(230,197,101,.15); --t-am-tx: #EBCF7C; --t-n-bg: rgba(232,228,217,.12); --t-n-tx: #E8E4D9; --t-mu-bg: rgba(244,244,242,.07); --t-mu-tx: #A5ABA8;
  --err-bg: #3a1f1b; --err-tx: #f0c4bc; --ok-bg: #1b3027; --ok-tx: #bfe3d2;
  --aviso-bg: #5a2620; --toast-bg: rgba(18,21,23,.92);
  --blur: none; --blur-forte: blur(20px) saturate(140%);
}

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 14px/1.45 'General Sans', Inter, Arial, sans-serif; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; }
body.modal-aberto { overflow: hidden; }
h1, h2, h3, b, th, .sb { font-weight: 600; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 20px; margin: 0; letter-spacing: -.02em; }
h3 { font-size: 15px; margin: 22px 0 10px; letter-spacing: -.01em; }
p { margin: 8px 0; }
a[data-a] { cursor: pointer; color: inherit; }
.mu { color: var(--mu); }
.peq { font-size: 12px; }
.esp { flex: 1; }
.warn { color: var(--bad); font-weight: 600; }
.ic { vertical-align: -3px; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
aside :focus-visible, .flyout :focus-visible { outline-color: #E8E4D9; }
kbd { font: 500 11px/1 var(--mono); letter-spacing: .04em; padding: 4px 7px; border-radius: 8px; border: 1px solid var(--borda-forte); background: var(--fill); color: var(--mu); }
em { font-style: italic; }

/* fundo: luz teal no topo, grade fina e círculos concêntricos. Tudo fixo, sem animação. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { background: radial-gradient(68% 52% at 50% -10%, var(--luz), transparent 72%), radial-gradient(220px 80px at 50% 0, rgba(140,197,174,.16), transparent 75%); }
body::after {
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px),
    radial-gradient(circle at 50% -6%, transparent 0 18vmax, rgba(244,244,242,.06) 18vmax calc(18vmax + 1.5px), transparent calc(18vmax + 1.5px)),
    radial-gradient(circle at 50% -6%, transparent 0 33vmax, rgba(244,244,242,.05) 33vmax calc(33vmax + 1.5px), transparent calc(33vmax + 1.5px)),
    radial-gradient(circle at 50% -6%, transparent 0 49vmax, rgba(244,244,242,.04) 49vmax calc(49vmax + 1.5px), transparent calc(49vmax + 1.5px));
  background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%, 100% 100%;
  opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 0%, transparent 80%); mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 0%, transparent 80%);
}
@media (prefers-color-scheme: light) { :root:not([data-theme=dark]) body::after { background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); background-size: 56px 56px; opacity: .45; } }
:root[data-theme=light] body::after { background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); background-size: 56px 56px; opacity: .45; }

/* ================================================================ tipografia de tela */
.etq { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.etq::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--verde); box-shadow: 0 0 10px var(--verde); flex: none; }
.hd h1, .hero h1, .titulo { font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
.titulo em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.12em; letter-spacing: -.01em; color: var(--em); padding-right: .04em; }
.grande, .k b, .ind b, .kpi b, .res-valor b, .cx-saldo b, .trio b, .vr-l span { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ================================================================ estrutura */
#app { min-height: 100vh; min-height: 100dvh; }
.coluna { margin-left: 92px; min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; padding: 6px 28px 64px; width: 100%; max-width: 1380px; min-width: 0; }
.faixa-local { background: var(--t-n-bg); color: var(--t-n-tx); border: 1px solid var(--borda); border-radius: var(--r-pil); padding: 8px 16px; margin: 0 0 18px; font-size: 13px; }
.selo-local { display: inline-block; background: #E8E4D9; color: #0E0E0E; border-radius: 99px; padding: 2px 9px; font-size: 11px; font-weight: 600; margin-left: 6px; white-space: nowrap; }

/* menu lateral: trilho estreito só de ícones (vidro). Cada grupo abre um painel de vidro ao lado; no celular vira gaveta com seções. */
aside { position: fixed; left: 12px; top: 12px; bottom: 12px; width: 64px; z-index: 35; display: flex; flex-direction: column; align-items: center; padding: 10px 0 12px; border-radius: var(--r-g); background: var(--vidro-2); -webkit-backdrop-filter: var(--blur-forte); backdrop-filter: var(--blur-forte); border: 1px solid var(--borda); box-shadow: var(--realce), 0 30px 70px -30px rgba(0,0,0,.85); color: #F4F4F2; }
:root:not([data-theme=dark]) aside, :root:not([data-theme=dark]) .flyout { border-color: #26292d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) aside, :root:not([data-theme=light]) .flyout { border-color: var(--borda); } }
:root[data-theme=dark] aside, :root[data-theme=dark] .flyout { border-color: var(--borda); }
.lg { height: 44px; display: grid; place-items: center; margin-bottom: 10px; flex: none; }
.lg-simbolo { display: block; width: 30px; height: auto; }
.lg-lateral { display: none; height: 24px; width: auto; max-width: 100%; }
#trilho { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.gr-b, .rail-b { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #A7ADAA; cursor: pointer; text-decoration: none; border: 0; padding: 0; background: transparent; transition: transform .1s; }
.gr-b:hover, .rail-b:hover { background: rgba(244,244,242,.1); color: #F4F4F2; }
.gr-b.aberto:not(.on) { background: rgba(244,244,242,.16); color: #F4F4F2; }
.gr-b.on { background: #E8E4D9; color: #0E0E0E; box-shadow: 0 6px 18px -8px rgba(232,228,217,.55); }
.gr-b:active, .rail-b:active { transform: scale(.94); }
.nl { position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap; font: 500 13px/1 'General Sans', sans-serif; padding: 8px 12px; border-radius: 10px; background: #15181B; color: #F4F4F2; border: 1px solid rgba(244,244,242,.14); box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); transition: opacity .14s, transform .14s; z-index: 5; }
.gr-b:hover .nl, .gr-b:focus-visible .nl, .rail-b:hover .nl, .rail-b:focus-visible .nl { opacity: 1; transform: translate(0, -50%); }
.gr-b.aberto .nl { display: none; }
.pe { display: grid; gap: 4px; justify-items: center; padding-top: 10px; margin-top: 8px; border-top: 1px solid rgba(244,244,242,.1); width: 44px; }
.quem { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--degrade); color: #F4F4F2; font-weight: 600; font-size: 14px; box-shadow: inset 0 1px 0 rgba(244,244,242,.2), 0 0 0 1px rgba(140,197,174,.3); flex: none; }
.veu { display: none; }
/* painel do grupo (computador): lista os itens do grupo ao lado do trilho */
.flyout { position: fixed; left: 88px; top: 12px; z-index: 36; width: 252px; padding: 12px; border-radius: var(--r-g); background: var(--vidro-2); -webkit-backdrop-filter: var(--blur-forte); backdrop-filter: var(--blur-forte); border: 1px solid var(--borda); box-shadow: var(--realce), 0 30px 70px -30px rgba(0,0,0,.85); color: #F4F4F2; animation: fly-in .16s var(--ease); }
.flyout[hidden] { display: none; }
.flyout .etq { display: flex; padding: 6px 10px 10px; color: rgba(244,244,242,.62); }
.flyout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fo-i, .sec-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #D6DAD8; text-decoration: none; font-weight: 500; cursor: pointer; }
.fo-i:hover, .sec-i:hover { background: rgba(244,244,242,.1); color: #fff; }
.fo-i.on, .sec-i.on { background: #E8E4D9; color: #0E0E0E; }
.fo-n { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center; background: var(--verde); color: #0B0D0D; font: 600 11px/1 'General Sans', sans-serif; }
.fo-i.on .fo-n, .sec-i.on .fo-n { background: #0E0E0E; color: #E8E4D9; }
.sec { display: block; }
.sec-h { display: none; }
.sec-l { list-style: none; margin: 0; padding: 0; }

/* barra superior */
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 14px 28px 12px; background: color-mix(in srgb, var(--bg) 93%, transparent); }
.topo .menu-btn { display: none; }
.busca-pill { flex: 1 1 auto; min-width: 0; overflow: hidden; max-width: 600px; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 9px 0 16px; border-radius: var(--r-pil); background: var(--vidro); border: 1px solid var(--borda); box-shadow: var(--realce); color: var(--mu); text-align: left; font-weight: 400; }
.busca-pill:hover { border-color: var(--borda-forte); background: var(--vidro); color: var(--tx); }
.bp-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ic-btn { padding: 6px; border-color: transparent; background: transparent; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.ic-btn.redondo { position: relative; width: 46px; height: 46px; padding: 0; background: var(--vidro); border: 1px solid var(--borda); box-shadow: var(--realce); color: var(--tx); }
.ic-btn.redondo:hover { border-color: var(--borda-forte); background: var(--vidro); }
.ic-btn.acesa { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 55%, transparent); box-shadow: var(--realce), 0 0 0 3px color-mix(in srgb, var(--verde) 14%, transparent), 0 0 26px -4px color-mix(in srgb, var(--verde) 60%, transparent); }
.badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; background: var(--verde); color: #0B0D0D; font: 600 11px/1 'General Sans', sans-serif; box-shadow: 0 0 0 2px var(--bg); }
:root:not([data-theme=dark]) .badge { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .badge { color: #0B0D0D; } }
:root[data-theme=dark] .badge { color: #0B0D0D; }
.avatar-chip { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 6px; border-radius: var(--r-pil); background: var(--vidro); border: 1px solid var(--borda); box-shadow: var(--realce); font-weight: 500; }
.av-nome { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-wrap { position: relative; }
.al-pop { position: absolute; right: 0; top: calc(100% + 12px); width: min(390px, 92vw); max-height: min(70vh, 560px); overflow: auto; padding: 16px; border-radius: var(--r-g); background: var(--vidro-3); -webkit-backdrop-filter: var(--blur-forte); backdrop-filter: var(--blur-forte); border: 1px solid var(--borda-forte); box-shadow: var(--realce), 0 36px 70px -24px rgba(0,0,0,.75); z-index: 45; transform-origin: calc(100% - 22px) -10px; animation: pop-in .18s var(--ease); }
.al-pop[hidden] { display: none; }
.al-pop h3 { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px; font-size: 13px; }
.al-pop h3 span { font: 500 11px var(--mono); padding: 2px 8px; border-radius: 99px; background: var(--t-bad-bg); color: var(--t-bad-tx); }
.al-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.al-pop li button { width: 100%; display: grid; gap: 2px; text-align: left; border: 0; border-radius: var(--r-p); padding: 10px 12px; background: var(--fill); }
.al-pop li button:hover { background: var(--fill-h); }
.al-pop small { color: var(--mu); }
.al-mais { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--mu); text-decoration: underline; }
.al-vazio { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 14px 8px; color: var(--mu); }
.al-vazio p { margin: 8px 0 0; color: var(--tx); font-weight: 500; }

/* ================================================================ vidro, cartões e cabeçalhos */
.cd { background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--r-g); padding: 18px; overflow-x: auto; box-shadow: var(--realce); }
.cd.vidro, .cd.k { overflow: visible; }
.vidro .cd, .detalhes .cd { background: var(--cd-aninhado); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.cd.k { border-radius: var(--r-p); padding: 14px 16px; }
.k small { color: var(--mu); display: block; }
.k b { font-size: 22px; display: block; margin-top: 2px; }
.k.b b { color: var(--bad); }
.g { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
.g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-bottom: 14px; }
.empty { color: var(--mu); padding: 16px 4px; font-size: 12px; }
.cd .empty { padding: 14px 4px; text-align: center; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.filtros input[type=search] { flex: 1 1 240px; max-width: 380px; width: auto; }
.filtros select, .filtros input:not([type=search]) { width: auto; max-width: 100%; }
.nota { margin: 0 2px 14px; }

.abas-f { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.aba { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; white-space: nowrap; }
.aba .cont { font: 500 11px/1 var(--mono); padding: 4px 8px; border-radius: 99px; background: var(--fill-h); color: var(--mu); letter-spacing: .02em; }
.aba.bad .cont { color: var(--t-bad-tx); background: var(--t-bad-bg); }
.aba.am .cont { color: var(--t-am-tx); background: var(--t-am-bg); }
.aba.on { background: var(--degrade); border-color: color-mix(in srgb, var(--verde) 45%, transparent); color: #F4F4F2; box-shadow: inset 0 1px 0 rgba(244,244,242,.18), 0 8px 22px -10px color-mix(in srgb, var(--verde) 55%, transparent); }
.aba.on .cont { background: rgba(244,244,242,.18); color: #F4F4F2; }
.aba.on:hover { background: var(--degrade); }

.vazio { background: transparent; border: 1px dashed var(--borda-forte); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; padding: 44px 20px; display: grid; justify-items: center; gap: 16px; color: var(--mu); overflow: visible; }
.vazio p { margin: 0; max-width: 48ch; }
.vazio-in { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 20px 8px; color: var(--mu); border: 1px dashed var(--borda-forte); border-radius: var(--r-p); margin-top: 10px; }
.vazio-in p { margin: 0; max-width: 40ch; }

/* ================================================================ controles */
button, select, input, textarea { font: inherit; color: inherit; }
button { background: var(--fill); border: 1px solid var(--borda); border-radius: var(--r-pil); padding: 8px 16px; cursor: pointer; font-weight: 500; transition: transform .1s ease-out; }
button:hover { background: var(--fill-h); border-color: var(--borda-forte); }
button:active { transform: scale(.97); transition-duration: .1s; }
button.p { background: var(--btn-p-bg); color: var(--btn-p-tx); border-color: var(--btn-p-bg); font-weight: 600; }
button.p:hover { background: var(--btn-p-bg-h); border-color: var(--btn-p-bg-h); box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--btn-p-bg) 60%, transparent); }
button.r { color: var(--bad); }
button:disabled { opacity: .55; cursor: wait; }
button.link { border: 0; padding: 4px 0; text-decoration: underline; color: var(--mu); background: transparent; }
button.link:hover { background: transparent; color: var(--tx); }
.ic-btn:hover { background: var(--fill-h); }
.hero-a button, .hd-a button, .vazio button { padding: 11px 20px; }
.pil { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 13px 18px; background: var(--vidro); box-shadow: var(--realce); }
input, select, textarea { width: 100%; background: var(--ctl); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; }
input:hover, select:hover, textarea:hover { border-color: var(--borda-forte); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: transparent; }
input[type=search], .filtros input[type=search] { border-radius: var(--r-pil); padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239aa09d' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px 50%; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa09d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; }
.filtros select, td select { border-radius: var(--r-pil); }
option { background: #14171A; color: #F4F4F2; }
:root:not([data-theme=dark]) option { background: #fff; color: #0E0E0E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) option { background: #14171A; color: #F4F4F2; } }
:root[data-theme=dark] option { background: #14171A; color: #F4F4F2; }
textarea { resize: vertical; border-radius: 14px; }
::placeholder { color: var(--mu2); opacity: 1; }
input[type=checkbox] { width: auto; accent-color: var(--verde); }
.btn-arq { display: inline-block; border-radius: var(--r-pil); padding: 10px 20px; cursor: pointer; background: var(--btn-p-bg); color: var(--btn-p-tx); font-weight: 600; transition: transform .1s ease-out; }
.btn-arq:active { transform: scale(.97); }
.btn-arq:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; vertical-align: middle; }
th { color: var(--mu); font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding-top: 4px; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--fill); }
td select { min-width: 150px; padding-top: 6px; padding-bottom: 6px; }
td button { padding: 5px 12px; font-size: 13px; }
tr.atraso td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
tr.aviso td:first-child { box-shadow: inset 3px 0 0 var(--amb); }

.tag { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--t-n-bg); color: var(--t-n-tx); font-size: 12px; font-weight: 500; }
.tag.bad { background: var(--t-bad-bg); color: var(--t-bad-tx); }
.tag.ok { background: var(--t-ok-bg); color: var(--t-ok-tx); }
.tag.am { background: var(--t-am-bg); color: var(--t-am-tx); }
.tag.mu { background: var(--t-mu-bg); color: var(--t-mu-tx); }

.erro { background: var(--err-bg); color: var(--err-tx); border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 13px; }
.erro[hidden], .okmsg[hidden] { display: none; }
.okmsg { background: var(--ok-bg); color: var(--ok-tx); border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 13px; }

/* ================================================================ Dashboard */
.hero-dash { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; padding: 10px 4px 28px; }
.hero-d-l { min-width: 0; }
.titulo { margin: 14px 0 0; font-size: clamp(40px, 5.6vw, 72px); }
.data-ext { margin: 14px 0 0; font-size: 16px; color: var(--mu); }
.data-ext::first-letter { text-transform: uppercase; }
.chips-hero { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: var(--r-pil); background: var(--fill); border: 1px solid var(--borda); font-size: 13px; color: var(--tx); }
.chip b { font-variant-numeric: tabular-nums; }
.chip.bad { color: var(--t-bad-tx); background: var(--t-bad-bg); border-color: transparent; }
.relogio { font-size: clamp(64px, 10vw, 136px); font-weight: 500; letter-spacing: -.055em; line-height: .84; font-variant-numeric: tabular-nums; color: var(--tx); }
:root:not([data-theme=light]) .relogio { text-shadow: 0 0 70px rgba(140,197,174,.2); }
@media (prefers-color-scheme: light) { :root:not([data-theme=dark]) .relogio { text-shadow: none; } }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 392px); gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-baixo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.dash-grid .cd.vidro { overflow: visible; }

.res { padding: 24px 26px 22px; }
.res-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.seg-wrap { max-width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pil); background: var(--fill); border: 1px solid var(--borda); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { border: 0; background: transparent; padding: 7px 14px; font-size: 13px; color: var(--mu); white-space: nowrap; }
.seg button:hover { background: var(--fill-h); color: var(--tx); }
.seg button.on { background: var(--degrade); color: #F4F4F2; box-shadow: inset 0 1px 0 rgba(244,244,242,.18), 0 0 0 1px color-mix(in srgb, var(--verde) 40%, transparent), 0 6px 20px -8px color-mix(in srgb, var(--verde) 60%, transparent); }
.seg-datas { display: flex; gap: 8px; }
.seg-datas input { width: auto; border-radius: var(--r-pil); padding: 7px 12px; }
.res-valor { margin-top: 22px; }
.res-valor small { color: var(--mu); }
.res-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.res-valor .grande { font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
.grande.neg, .neg { color: var(--bad); }
.var { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--r-pil); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.var small { font-weight: 400; margin-left: 6px; opacity: .85; }
.var.sobe { background: var(--t-ok-bg); color: var(--t-ok-tx); }
.var.desce { background: var(--t-bad-bg); color: var(--t-bad-tx); }
.var.neutro { background: var(--t-mu-bg); color: var(--t-mu-tx); font-weight: 500; }
.legenda { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 18px 0 8px; }
.lg-pil { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--r-pil); background: var(--fill); border: 1px solid var(--borda); font-size: 12px; }
.lg-pil::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.lg-pil.s-b::before { background: var(--creme); box-shadow: none; }
:root:not([data-theme=dark]) .lg-pil.s-b::before { background: #8b8678; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .lg-pil.s-b::before { background: var(--creme); } }
:root[data-theme=dark] .lg-pil.s-b::before { background: var(--creme); }
.graf-svg { position: relative; height: 210px; }
.graf-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graf-max { position: absolute; left: 0; top: -2px; font: 500 10px var(--mono); color: var(--mu2); letter-spacing: .06em; z-index: 1; }
.gr, .gz, .ln { vector-effect: non-scaling-stroke; }
.gr { stroke: var(--grade); stroke-width: 1; }
.gz { stroke: var(--borda-forte); stroke-width: 1; stroke-dasharray: 4 4; }
.ln { stroke-linecap: round; stroke-linejoin: round; }
.ln.s-a { stroke: var(--verde); stroke-width: 2.4; }
.ln.s-b { stroke: #8b8678; stroke-width: 1.8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .ln.s-b { stroke: var(--creme); } }
:root[data-theme=dark] .ln.s-b { stroke: var(--creme); }
.ga-0 { stop-color: var(--verde); stop-opacity: .3; }
.ga-1 { stop-color: var(--verde); stop-opacity: 0; }
.pt-g { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--bg); border: 2px solid var(--verde); }
.pt-g.s-a { background: var(--verde); box-shadow: 0 0 0 5px color-mix(in srgb, var(--verde) 18%, transparent), 0 0 16px color-mix(in srgb, var(--verde) 70%, transparent); }
.pt-g.s-b { border-color: #8b8678; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .pt-g.s-b { border-color: var(--creme); } }
:root[data-theme=dark] .pt-g.s-b { border-color: var(--creme); }
.graf-x { position: relative; height: 22px; margin-top: 8px; }
.graf-x span { position: absolute; top: 0; transform: translateX(-50%); font: 500 11px var(--mono); color: var(--mu); letter-spacing: .04em; white-space: nowrap; }
.graf-vazio { display: grid; place-items: center; height: 150px; margin-top: 8px; border: 1px dashed var(--borda-forte); border-radius: var(--r-p); color: var(--mu); }
.chips-rodape { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borda); }

.indic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { position: relative; overflow: hidden; padding: 16px 16px 14px; min-height: 112px; border-radius: var(--r-p); background: var(--vidro); border: 1px solid var(--borda); box-shadow: var(--realce), var(--sombra); }
.kpi small { display: block; color: var(--mu); font-size: 12px; }
.kpi b { display: block; font-size: 24px; margin-top: 4px; }
.kpi-s { display: block; color: var(--mu); font-size: 12px; margin-top: 2px; }
.kpi.neg b { color: var(--bad); }
.spark { position: absolute; right: 8px; bottom: 6px; width: 46%; height: 36px; color: var(--verde); opacity: .95; }

.carteira { display: flex; flex-direction: column; gap: 14px; }
.cartao-cx { position: relative; overflow: hidden; min-height: 196px; padding: 22px 24px; border-radius: var(--r-g); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; color: #F4F4F2; background: radial-gradient(280px 170px at 100% 0%, rgba(140,197,174,.3), transparent 72%), linear-gradient(135deg, #1C2B2A, #2E4B3F); border: 1px solid rgba(244,244,242,.16); box-shadow: inset 0 1px 0 rgba(244,244,242,.16), 0 28px 56px -28px rgba(0,0,0,.75); }
.cartao-cx::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 104% 118%, transparent 0 38px, rgba(244,244,242,.07) 38px 39px); -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 72%); mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 72%); }
.cartao-cx::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(244,244,242,.07) 50%, transparent 62%); }
.cartao-cx > * { position: relative; z-index: 1; }
.cx-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cx-topo .etq { color: rgba(244,244,242,.75); }
.cx-m { display: block; width: 38px; height: auto; }
.cx-saldo small { display: block; color: rgba(244,244,242,.72); font-size: 12px; }
.cx-saldo b { display: block; margin-top: 4px; font-size: clamp(32px, 3.4vw, 42px); letter-spacing: -.035em; line-height: 1.05; }
.cx-saldo b.neg { color: #F3B7AD; }
.cx-pe { display: flex; justify-content: space-between; gap: 12px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(244,244,242,.7); }
.acoes-rapidas { display: flex; gap: 10px; }

.meta { padding: 20px 22px; }
.mh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mh h2 { flex: 1; min-width: 0; }
.mh a { color: var(--mu); text-decoration: underline; font-size: 12px; }
.meta .mv { margin-top: 2px; }
.meta .grande { font-size: 28px; font-weight: 600; }
.trilho { position: relative; height: 12px; border-radius: 99px; background: var(--fill-h); margin: 14px 0 12px; }
.trilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #2E4B3F, var(--verde)); box-shadow: 0 0 18px color-mix(in srgb, var(--verde) 55%, transparent); min-width: 4px; }
.trilho s { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--tx); opacity: .45; text-decoration: none; border-radius: 2px; }
.faltam { margin: 4px 0 8px; }
.marcos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.marcos li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--borda); }
.marcos li small { color: var(--mu); }
.marcos li.feito span { text-decoration: line-through; opacity: .7; }

.funil { padding: 20px 22px; }
.funil-l { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 11px; }
.funil-l li { display: grid; grid-template-columns: minmax(120px, 1.05fr) minmax(0, 2fr) 30px 44px; align-items: center; gap: 12px; }
.fn { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb { height: 10px; border-radius: 99px; background: var(--fill-h); overflow: hidden; }
.fb i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2E4B3F, var(--verde)); box-shadow: 0 0 14px color-mix(in srgb, var(--verde) 45%, transparent); }
.funil-l b { text-align: right; font-variant-numeric: tabular-nums; }
.conv { color: var(--verde); font: 500 11px var(--mono); text-align: right; }

#vendas-recentes, #ultimas, #bloco-projetos { padding: 20px 22px; }
.vr-l { list-style: none; margin: 4px 0 0; padding: 0; }
.vr-l li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--borda); }
.vr-l li:first-child { border-top: 0; }
.vr-l b { display: block; }
.vr-l small { color: var(--mu); }
.vr-l span { font-weight: 600; white-space: nowrap; }
.linha-tempo { list-style: none; margin: 6px 0 0; padding: 0 0 0 20px; position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: var(--borda-forte); }
.linha-tempo li { position: relative; padding: 8px 0; }
.linha-tempo li::before { content: ""; position: absolute; left: -20px; top: 14px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--verde); box-shadow: 0 0 10px color-mix(in srgb, var(--verde) 45%, transparent); }
.linha-tempo small { display: block; color: var(--mu); font: 500 11px var(--mono); letter-spacing: .04em; margin-top: 2px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.trio > div { background: var(--fill); border: 1px solid var(--borda); border-radius: var(--r-p); padding: 12px 14px; }
.trio small { color: var(--mu); display: block; font-size: 12px; }
.trio b { font-size: 26px; }
.trio .bad b { color: var(--bad); }
.trio .am b { color: var(--am); }
.lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.lista li { padding: 4px 0 4px 12px; border-left: 3px solid var(--borda-forte); display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.lista li.atraso { border-left-color: var(--bad); }
.lista li.aviso { border-left-color: var(--amb); }

.detalhes { margin-top: 16px; padding: 18px 22px; }
.detalhes summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; border-radius: 12px; }
.detalhes summary::-webkit-details-marker { display: none; }
.detalhes summary .ic { margin-left: auto; transition: transform .22s var(--ease); }
.detalhes[open] summary .ic { transform: rotate(180deg); }
.det-corpo { margin-top: 18px; }

/* ================================================================ Configurações (só o que se edita) */
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cfg-grid .cd.vidro { padding: 22px; }
.cfg-grid .mh { margin-bottom: 14px; }
.rodape-l { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.cfg-acoes { display: flex; gap: 14px 18px; flex-wrap: wrap; align-items: center; margin: 16px 2px; }
.cfg-acoes .link { font-size: 13px; }
.cfg-lix { padding: 16px 22px; }
.cfg-lix .mh { margin-bottom: 6px; }
.lix-vazia { margin: 4px 0 2px; }

/* ================================================================ kanban, barras */
.kb { display: flex; gap: 12px; overflow-x: auto; align-items: stretch; padding-bottom: 8px; scroll-snap-type: x proximity; }
.col { min-width: 262px; width: 262px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--r-g); padding: 10px 10px 4px; scroll-snap-align: start; }
.col h3 { display: flex; align-items: center; justify-content: space-between; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin: 4px 6px 10px; }
.col h3 .cont { font: 500 11px/1 var(--mono); padding: 4px 8px; border-radius: 99px; background: var(--fill-h); letter-spacing: .02em; }
.col-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px 6px; scrollbar-width: thin; }
.lc { background: var(--cd-aninhado); border: 1px solid var(--borda); border-radius: var(--r-p); padding: 10px 11px; margin-bottom: 8px; font-size: 13px; cursor: grab; }
.lc:hover { border-color: var(--borda-forte); }
.lc.atraso { border-left: 3px solid var(--bad); }
.lc.aviso, .lc.ret { border-left: 3px solid var(--amb); }
.lc-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lc-t b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-e { display: block; opacity: .88; }
.lc small { color: var(--mu); }
.lc select { margin-top: 8px; padding: 5px 30px 5px 12px; font-size: 12px; }
.lc .tag { margin: 6px 0; }
.lc button { margin-top: 6px; font-size: 12px; padding: 5px 12px; }
.lc-a { display: flex; gap: 6px; flex-wrap: wrap; }
main:has(> .kb) { display: flex; flex-direction: column; height: calc(100dvh - 72px); max-width: none; padding-bottom: 14px; }
main:has(> .kb) > .kb { flex: 1; min-height: 0; }
main:has(> .kb) > .nota { display: none; }

.bars { display: flex; gap: 8px; align-items: flex-end; height: 140px; margin-top: 14px; }
.bc { flex: 1; text-align: center; font: 500 10px var(--mono); color: var(--mu); min-width: 28px; }
.bc div.pr { display: flex; gap: 3px; align-items: flex-end; height: 110px; margin-bottom: 4px; }
.bc i { flex: 1; background: linear-gradient(180deg, var(--verde), #2E4B3F); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.bc i.s2, .leg .pt.s2 { background: #8b8678; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .bc i.s2, :root:not([data-theme=light]) .leg .pt.s2 { background: var(--creme); } }
:root[data-theme=dark] .bc i.s2, :root[data-theme=dark] .leg .pt.s2 { background: var(--creme); }
.leg { color: var(--mu); display: block; margin-top: 4px; }
.leg .pt { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--verde); vertical-align: -1px; margin-left: 8px; }

/* ================================================================ janelas (modal denso) */
.ov { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 14px; z-index: 50; }
.ov:not([hidden]) { animation: ov-in .22s ease-out; }
.ov[hidden] { display: none; }
.ov.saindo { animation: ov-out .2s ease-in forwards; pointer-events: none; }
.mb, .mb-fantasma { position: relative; background: var(--vidro-3); -webkit-backdrop-filter: var(--blur-forte); backdrop-filter: var(--blur-forte); border: 1px solid var(--borda-forte); border-radius: var(--r-g); box-shadow: var(--realce), 0 40px 90px -30px rgba(0,0,0,.8); padding: 22px; width: min(640px, 100%); max-height: 92vh; max-height: 92dvh; overflow: auto; transform-origin: var(--ox, 50%) var(--oy, 50%); }
.mb { animation: mb-in .28s var(--ease); }
.mb-fantasma { animation: mb-out .2s cubic-bezier(.4, 0, 1, 1) forwards; }
.mb.largo, .ov.largo .mb, .ov.largo .mb-fantasma { width: min(900px, 100%); }
.mb .mh h2, .mb-fantasma .mh h2 { font-size: 22px; }
.mb .rodape { position: sticky; bottom: -22px; background: var(--vidro-3); padding: 14px 0 2px; margin-top: 14px; border-top: 1px solid var(--borda); }
.rodape { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
.fm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fm.um { grid-template-columns: 1fr; }
.fm label, label.rot { display: block; font-size: 12px; color: var(--mu); margin-bottom: 4px; }
.fm .w { grid-column: 1 / -1; }
.hint { grid-column: 1 / -1; background: var(--fill); border: 1px dashed var(--borda-forte); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.hint:empty { display: none; }
.abas { display: flex; gap: 6px; margin-bottom: 14px; padding: 4px; border-radius: var(--r-pil); background: var(--fill); border: 1px solid var(--borda); }
.abas button { flex: 1; border: 0; background: transparent; }
.abas button.on { background: var(--degrade); color: #F4F4F2; box-shadow: inset 0 1px 0 rgba(244,244,242,.18); }
.painel[hidden] { display: none; }
.pend, .marcos-ed { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.pend li, .marco-l { display: flex; gap: 8px; align-items: center; }
.marco-l .mt { flex: 2; } .marco-l .mvl { flex: 1; min-width: 110px; }

/* busca (Ctrl+K) */
.ov.pal { align-items: flex-start; padding-top: min(13vh, 120px); z-index: 55; }
.pal-caixa { width: min(660px, 100%); border-radius: var(--r-g); overflow: hidden; background: var(--vidro-3); -webkit-backdrop-filter: var(--blur-forte); backdrop-filter: var(--blur-forte); border: 1px solid var(--borda-forte); box-shadow: var(--realce), 0 40px 90px -30px rgba(0,0,0,.8); transform-origin: 50% 0; animation: mb-in .24s var(--ease); }
.ov.saindo .pal-caixa { animation: mb-out .18s cubic-bezier(.4, 0, 1, 1) forwards; }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--borda); color: var(--mu); }
.pal-in input { flex: 1; border: 0; background: transparent; padding: 8px 0; font-size: 17px; color: var(--tx); border-radius: 0; }
.pal-in input:focus { outline: none; }
#pal-res { max-height: min(54vh, 430px); overflow: auto; padding: 8px; }
.pal-g { display: grid; gap: 2px; padding-bottom: 6px; }
.pal-g .etq { padding: 10px 12px 6px; }
.pal-i { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; border-radius: var(--r-p); padding: 10px 12px; background: transparent; color: var(--tx); }
.pal-i.sel, .pal-i:hover { background: var(--fill-h); }
.pal-i .ic { color: var(--verde); }
.pal-t { display: grid; min-width: 0; }
.pal-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-t small { color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-vazio { color: var(--mu); text-align: center; padding: 28px 16px; margin: 0; }
.pal-pe { display: flex; gap: 18px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--borda); color: var(--mu); font-size: 12px; }
.pal-pe kbd { margin-right: 4px; }

/* ================================================================ entrada (login) */
.central { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 20px; max-width: none; width: 100%; }
.caixa { background: var(--vidro-3); border: 1px solid var(--borda-forte); border-radius: var(--r-g); padding: 30px; width: min(420px, 100%); box-shadow: var(--realce), 0 40px 90px -36px rgba(0,0,0,.8); }
.caixa img { display: block; height: 26px; width: auto; max-width: 100%; margin-bottom: 22px; }
.caixa h1 { margin-bottom: 10px; font-size: 34px; letter-spacing: -.03em; }
.caixa .modo-local { background: var(--t-n-bg); color: var(--t-n-tx); border-radius: 12px; padding: 10px 12px; font-size: 12px; }
.lg-escuro { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .caixa .lg-claro { display: none; } :root:not([data-theme=light]) .caixa .lg-escuro { display: block !important; } }
:root[data-theme=dark] .caixa .lg-claro { display: none; }
:root[data-theme=dark] .caixa .lg-escuro { display: block !important; }

/* ================================================================ avisos */
#avisos { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 70; display: grid; gap: 8px; width: min(380px, calc(100vw - 28px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--toast-bg); color: #F4F4F2; border-radius: var(--r-p); padding: 12px 16px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.6); font-size: 13px; border: 1px solid rgba(244,244,242,.14); animation: toast-in .24s var(--ease); }
.toast.sai { animation: toast-out .2s ease-in forwards; }
.toast.erro { background: var(--aviso-bg); color: var(--aviso-tx); }
.toast.aviso { background: var(--amf); color: #3d2e00; }
:root[data-theme=dark] .toast.aviso { color: #fff3cf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .toast.aviso { color: #fff3cf; } }
#faixa { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; width: min(640px, calc(100vw - 24px)); background: var(--aviso-bg); color: var(--aviso-tx); border-radius: var(--r-p); padding: 12px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: 13px; box-shadow: 0 16px 44px -12px rgba(0,0,0,.65); }
#faixa[hidden] { display: none; }
#faixa button { color: inherit; border-color: #ffffff66; white-space: nowrap; }

/* ================================================================ movimento (uma vez, curto) */
@keyframes ov-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ov-out { to { opacity: 0; } }
@keyframes mb-in { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: none; } }
@keyframes mb-out { to { opacity: 0; transform: scale(.94); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes gaveta-in { from { transform: translateX(-104%); } to { transform: none; } }
@keyframes gaveta-out { to { transform: translateX(-104%); } }
@keyframes materializa { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes so-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fly-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

main.entra > :is(.cab, .md-topo, .md-grid, .fin-painel, .cli-md, .prod-grid, .gr-grid, .tl-g, .ch-l, .linha-num, .abas-f, .kb, .nota, .vazio, .cd, .g, .g2, .detalhes, .hero-dash), main.entra .dash-grid .cd, main.entra .dash-grid .cartao-cx, main.entra .kpi { animation: materializa .3s var(--ease) backwards; animation-delay: calc(var(--n, 0) * 40ms - var(--ja, 0ms)); }
main.entra > :nth-child(2) { --n: 1; } main.entra > :nth-child(3) { --n: 2; } main.entra > :nth-child(4) { --n: 3; } main.entra > :nth-child(5) { --n: 4; } main.entra > :nth-child(n+6) { --n: 5; }
main.entra .dash-esq > :nth-child(1) { --n: 2; } main.entra .dash-esq > :nth-child(2) { --n: 3; } main.entra .dash-esq > :nth-child(3) { --n: 4; }
main.entra .dash-dir > :nth-child(1) { --n: 3; } main.entra .dash-dir > :nth-child(2) { --n: 5; }
main.entra .dash-baixo > :nth-child(1) { --n: 5; } main.entra .dash-baixo > :nth-child(2) { --n: 6; }

/* ================================================================ telas intermediárias */
@media (max-width: 1120px) {
  .dash-grid { display: flex; flex-direction: column; align-items: stretch; }
  .dash-col { display: contents; }
  .dash-baixo { display: contents; }
  #bloco-resultado { order: 1; } #carteira { order: 2; } #indicadores { order: 3; } #vendas-recentes { order: 4; } #funil { order: 5; } #bloco-projetos { order: 6; } #ultimas { order: 7; }
  .carteira { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .carteira .acoes-rapidas { grid-column: 1 / -1; }
  .indic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .av-nome { display: none; }
  .avatar-chip { padding: 0 6px; }
}
@media (max-width: 900px) {
  .cfg-grid { grid-template-columns: 1fr; }
  .carteira { grid-template-columns: 1fr; }
  .indic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 720px) and (min-width: 801px) {
  aside { padding-top: 8px; } .lg { height: 36px; margin-bottom: 4px; }
  #trilho { gap: 2px; } .gr-b, .rail-b { width: 40px; height: 38px; border-radius: 12px; } .pe { width: 40px; margin-top: 4px; padding-top: 6px; }
}

/* ================================================================ celular */
@media (max-width: 800px) {
  :root { --blur: none; --topo-h: calc(64px + env(safe-area-inset-top)); }
  html { scroll-padding-top: 76px; }
  .coluna { margin-left: 0; }
  main { padding: 4px 14px 56px; }
  .topo { z-index: 62; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; gap: 8px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topo .menu-btn { display: inline-flex; }
  .busca-pill { height: 44px; padding: 0 14px; }
  .busca-pill kbd { display: none; }
  .ic-btn.redondo, .avatar-chip { width: 44px; height: 44px; flex: none; }
  .avatar-chip { padding: 0; justify-content: center; border-radius: 50%; }
  .topo-acoes { gap: 8px; }
  .topo .selo-local { display: none; }
  .al-wrap { position: static; }
  .al-pop { left: 12px; right: 12px; top: calc(100% + 4px); width: auto; transform-origin: 90% -6px; }
  .veu:not([hidden]) { display: block; position: fixed; inset: var(--topo-h) 0 0 0; z-index: 58; background: var(--overlay); animation: ov-in .2s ease-out; }
  aside, .gaveta-fantasma { position: fixed; left: 0; top: var(--topo-h); bottom: 0; width: min(300px, 86vw); z-index: 60; flex-direction: column; align-items: stretch; padding: 14px 14px 16px; border-radius: 0 var(--r-g) var(--r-g) 0; overflow-y: auto; background: var(--vidro-2); -webkit-backdrop-filter: var(--blur-forte); backdrop-filter: var(--blur-forte); color: #F4F4F2; border: 1px solid var(--borda); border-left: 0; }
  aside { transform: translateX(-104%); visibility: hidden; }
  aside.aberto { transform: none; visibility: visible; animation: gaveta-in .3s var(--ease); }
  .gaveta-fantasma { animation: gaveta-out .24s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
  aside .lg, .gaveta-fantasma .lg { height: auto; display: flex; justify-content: flex-start; margin: 0 0 8px; padding: 4px 14px 10px; }
  .lg-simbolo { display: none; } .lg-lateral { display: block; }
  #trilho { align-items: stretch; flex: 1; gap: 2px; }
  .flyout { display: none !important; }
  .sec-h { display: flex; align-items: center; gap: 14px; width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: transparent; color: #D6DAD8; font-size: 16px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
  .sec-h:hover { background: rgba(244,244,242,.08); }
  .sec-h.on { color: #fff; }
  .sec-h.solo.on { background: #E8E4D9; color: #0E0E0E; }
  .sec-seta { margin-left: auto; display: inline-grid; transition: transform .16s; }
  .sec.aberta .sec-seta { transform: rotate(180deg); }
  .sec-l { display: grid; gap: 2px; margin: 2px 0 8px 22px; padding-left: 12px; border-left: 1px solid rgba(244,244,242,.16); }
  .sec-l[hidden] { display: none; }
  .sec-i { height: 44px; padding: 0 12px; font-size: 15px; color: #C4C8CB; }
  .rail-b { width: auto; height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 14px; font-size: 16px; justify-content: flex-start; }
  .nl { position: static; transform: none; opacity: 1; background: none; border: 0; box-shadow: none; padding: 0; font-size: 16px; pointer-events: auto; color: inherit; }
  .pe { width: auto; justify-items: stretch; gap: 2px; }
  .quem { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px 12px; color: #c4c8cb; white-space: normal; }
  .quem .av { width: 36px; height: 36px; }
  .fm { grid-template-columns: 1fr; }
  .ov { align-items: flex-end; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ov.pal { align-items: flex-start; padding: 8px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .mb, .mb-fantasma, .mb.largo { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: var(--r-g) var(--r-g) 0 0; padding: 18px; transform-origin: 50% 100%; }
  .mb { animation: mb-sheet-in .3s var(--ease); }
  .mb-fantasma { animation: mb-sheet-out .22s cubic-bezier(.4, 0, 1, 1) forwards; }
  .mb .rodape { bottom: -18px; }
  input, select, textarea { font-size: 16px; }
  button { min-height: 40px; }
  .filtros input[type=search] { flex: 1 1 100%; max-width: none; }
  .abas-f { flex-wrap: nowrap; overflow-x: auto; margin-left: -2px; padding-bottom: 4px; scrollbar-width: none; max-width: 100%; }
  .abas-f::-webkit-scrollbar { display: none; }
  .col { min-width: 82vw; width: 82vw; }
  main:has(> .kb) { height: calc(100dvh - var(--topo-h)); }
  .hero-dash { padding: 6px 2px 20px; align-items: flex-start; }
  .titulo { font-size: 42px; }
  .relogio { font-size: 76px; }
  .data-ext { font-size: 15px; }
  .res { padding: 20px 18px; }
  .seg-wrap { width: 100%; align-items: stretch; }
  .res-valor .grande { font-size: 42px; }
  .graf-svg { height: 170px; }
  .graf.densa .graf-x span:nth-child(even) { visibility: hidden; }
  .indic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartao-cx { min-height: 178px; padding: 18px 20px; }
  .funil-l li { grid-template-columns: minmax(96px, 1fr) minmax(0, 1.2fr) 26px 40px; gap: 8px; }
  .trio b { font-size: 22px; }
  #vendas-recentes, #ultimas, #bloco-projetos, .funil, .meta { padding: 18px; }
  td select { min-width: 140px; }
  #faixa { flex-direction: column; align-items: stretch; text-align: left; }
  .central .caixa { padding: 24px; }
}
@keyframes mb-sheet-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes mb-sheet-out { to { opacity: 0; transform: translateY(32px); } }

/* ================================================================ preferências do sistema */
/* Menos movimento: só esmaecer, sem deslocar, escalar nem borrar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  main.entra > :is(.cab, .md-topo, .md-grid, .fin-painel, .cli-md, .prod-grid, .gr-grid, .tl-g, .ch-l, .linha-num, .abas-f, .kb, .nota, .vazio, .cd, .g, .g2, .detalhes, .hero-dash), main.entra .dash-grid .cd, main.entra .dash-grid .cartao-cx, main.entra .kpi { animation: so-fade .2s ease-out backwards !important; animation-delay: 0s !important; }
  .mb, .pal-caixa, .al-pop, .flyout, .toast, aside.aberto, .veu:not([hidden]), .ov:not([hidden]) { animation: so-fade .15s ease-out !important; }
  .mb-fantasma, .ov.saindo .pal-caixa, .toast.sai, .gaveta-fantasma, .ov.saindo { animation: ov-out .12s ease-in forwards !important; }
  button:active, .gr-b:active, .rail-b:active, .btn-arq:active { transform: none; }
  .nl { transform: translate(0, -50%); }
}
/* Menos transparência: sólido, sem blur. */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme], :root:not([data-theme=light]) { --blur: none; --blur-forte: none; }
  .topo, .busca-pill, .avatar-chip, .ic-btn.redondo, .cd, .kpi, .col, aside, .flyout, .mb, .pal-caixa, .al-pop, .caixa, .toast, .ov, .seg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .topo { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) { --vidro: #15181B; --vidro-2: #0C0E0F; --vidro-3: #101315; --cd-aninhado: #1B1F23; --overlay: rgba(4,6,6,.82); --toast-bg: #121517; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme=dark] { --vidro: #15181B; --vidro-2: #0C0E0F; --vidro-3: #101315; --cd-aninhado: #1B1F23; --overlay: rgba(4,6,6,.82); --toast-bg: #121517; }
}
/* Mais contraste: bordas fortes e texto secundário mais claro. */
@media (prefers-contrast: more) {
  :root, :root[data-theme], :root:not([data-theme=light]) { --borda: color-mix(in srgb, var(--tx) 55%, transparent); --borda-forte: color-mix(in srgb, var(--tx) 85%, transparent); --mu: color-mix(in srgb, var(--tx) 88%, var(--bg)); --mu2: color-mix(in srgb, var(--tx) 80%, var(--bg)); --grade: color-mix(in srgb, var(--tx) 22%, transparent); }
  button, input, select, textarea, .tag, .chip, .lg-pil { border-width: 2px; }
  :focus-visible { outline-width: 3px; }
  .gr-b.on, .fo-i.on, .sec-i.on { outline: 2px solid #fff; }
}
@media print {
  body::before, body::after, aside, .flyout, .topo, .veu, #avisos, #faixa, #pal, button, .faixa-local, .seg-wrap, .dica-ios { display: none !important; }
  body, main { background: #fff !important; color: #000 !important; }
  .coluna { margin: 0; } main { padding: 0; max-width: none; }
  .cd, .kpi, .md-card, .prod, .ex-i { background: #fff !important; color: #000 !important; border-color: #bbb !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; break-inside: avoid; }
  .mu, small, th, .etq { color: #333 !important; }
}

/* ================================================================ RODADA 2: cada tela com o formato do seu uso ================================================================ */

/* ---------- cabeçalho fino (uma linha) das telas de lista ---------- */
.cab { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 8px 0 14px; min-height: 44px; }
.cab h1 { font-size: 19px; letter-spacing: -.015em; margin: 0 4px 0 0; white-space: nowrap; }
.cab .abas-f { margin: 0; gap: 4px; flex-wrap: wrap; }
.cab .aba { padding: 6px 6px 6px 13px; font-size: 13px; }
.cab input[type=search] { flex: 0 1 230px; width: 230px; height: 38px; padding: 6px 12px 6px 38px; }
.cab select.cab-sel { width: auto; height: 38px; padding-top: 6px; padding-bottom: 6px; border-radius: var(--r-pil); }
.cab-a { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cab-a button { padding: 8px 16px; }
.cab > select, .cab > input:not([type=search]) { width: auto; height: 38px; padding-top: 6px; padding-bottom: 6px; border-radius: var(--r-pil); }

.vista { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pil); background: var(--fill); border: 1px solid var(--borda); }
.vista button { border: 0; background: transparent; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--mu); font-size: 13px; }
.vista button:hover { background: var(--fill-h); color: var(--tx); }
.vista button.on { background: var(--degrade); color: #F4F4F2; box-shadow: inset 0 1px 0 rgba(244,244,242,.18); }

.linha-num { display: flex; gap: 6px 26px; flex-wrap: wrap; margin: 0 2px 12px; color: var(--mu); font-size: 13px; }
.linha-num b { color: var(--tx); font-variant-numeric: tabular-nums; margin-left: 6px; font-weight: 600; }
table.densa th { padding: 4px 8px; }
table.densa td { padding: 6px 8px; font-size: 13px; }
table.densa td button { padding: 3px 11px; font-size: 12px; }
table.densa td select { padding-top: 4px; padding-bottom: 4px; }
.cd table.densa { margin: 0; }

/* ---------- WhatsApp ---------- */
.wa { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pil); background: var(--t-ok-bg); color: var(--t-ok-tx); font-weight: 500; font-size: 13px; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.wa:hover { border-color: var(--ok); }
.wa.off { background: var(--fill); color: var(--mu); cursor: default; }
.wa.off:hover { border-color: transparent; }
.lc .wa { padding: 4px 6px; flex: none; }
td .wa { padding: 3px 10px; font-size: 12px; }

/* ---------- Meu dia ---------- */
.md-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap; padding: 10px 2px 22px; }
.md-topo-l { min-width: 0; }
.md-topo .titulo { font-size: clamp(34px, 4.4vw, 58px); margin-top: 12px; }
.md-topo .data-ext { margin-top: 10px; }
.md-topo-r { display: grid; gap: 6px; justify-items: end; }
.md-seg button { font-size: 13px; }
.md-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 360px); gap: 16px; align-items: start; }
.md-col { display: grid; gap: 14px; min-width: 0; }
.md-lado { display: grid; gap: 14px; position: sticky; top: 84px; min-width: 0; }
.md-card { background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--r-g); padding: 16px 18px 12px; min-width: 0; }
.md-card > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.md-card h2 { margin: 0; letter-spacing: .12em; font-weight: 500; }
.md-n { font: 600 11px/1 var(--mono); padding: 4px 9px; border-radius: 99px; background: var(--fill-h); color: var(--tx); }
.md-l { list-style: none; margin: 0; padding: 0; }
.md-i { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--borda); }
.md-i:first-child { border-top: 0; }
.md-i.atraso { box-shadow: inset 3px 0 0 var(--bad); padding-left: 12px; }
.md-i.hoje { box-shadow: inset 3px 0 0 var(--amb); padding-left: 12px; }
.md-t { min-width: 0; display: grid; }
.md-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-t small, .md-d small { color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-d { display: grid; justify-items: end; gap: 3px; text-align: right; }
.md-v { font-variant-numeric: tabular-nums; }
.md-a { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.md-a button { padding: 5px 13px; font-size: 13px; }
.md-card > footer { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--borda); font-size: 12px; display: flex; justify-content: space-between; gap: 10px; }
.md-card > footer a { color: var(--mu); text-decoration: underline; }
.md-alerta { color: var(--bad); font-weight: 600; }
.md-vazio { color: var(--mu); display: flex; gap: 8px; align-items: center; padding: 8px 0 12px; margin: 0; }
.md-vazio .ic { color: var(--verde); }
.md-mais { margin: 6px 0 2px; font-size: 12px; color: var(--mu); }
.prog { margin: 8px 0 14px; }
.prog-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.prog-t b { font-variant-numeric: tabular-nums; } .prog-t b small { color: var(--mu); font-weight: 400; }
.prog .trilho { margin: 8px 0 2px; }
.md-juntos { display: grid; gap: 16px; }
.md-juntos small { color: var(--mu); display: block; }
.mj-v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mj-v b { font-size: 28px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mj-meta .trilho { margin: 10px 0 8px; }
.mj-ult .linha-tempo { margin-top: 8px; }
.mj-ult .linha-tempo li { padding: 6px 0; font-size: 13px; }

/* ---------- Clientes: lista + ficha ---------- */
.cli-md { display: grid; grid-template-columns: minmax(290px, 370px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cli-lista { position: sticky; top: 84px; max-height: calc(100dvh - 150px); overflow-y: auto; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--r-g); padding: 6px; scrollbar-width: thin; }
.cli-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cli-i { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; border-radius: 14px; padding: 9px 10px; background: transparent; font-weight: 400; }
.cli-i:hover { background: var(--fill); }
.cli-i.on { background: var(--fill-h); box-shadow: inset 3px 0 0 var(--verde); }
.cli-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--degrade); color: #F4F4F2; font-weight: 600; box-shadow: 0 0 0 1px rgba(140,197,174,.25); }
.cli-t { display: grid; min-width: 0; }
.cli-t b, .cli-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-t small, .cli-s small { color: var(--mu); }
.cli-s { display: grid; justify-items: end; gap: 3px; }
.cli-s .tag { font-size: 11px; padding: 2px 9px; }
.cli-s small { font-size: 11px; font-variant-numeric: tabular-nums; }
.cli-ficha { background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--r-g); padding: 22px 24px; min-width: 0; }
.cli-ficha[hidden] { display: none; }
.cli-nada { display: grid; place-items: center; min-height: 240px; border: 1px dashed var(--borda-forte); border-radius: var(--r-g); }
.fc-h { display: flex; align-items: center; gap: 12px 14px; flex-wrap: wrap; }
.fc-voltar { display: none; }
.fc-nome h2 { font-size: 24px; }
.fc-nome p { margin: 2px 0 0; }
.fc-a { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fc-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 20px; margin: 20px 0 14px; }
.fc-dados dt { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin-bottom: 3px; }
.fc-dados dd { margin: 0; overflow-wrap: anywhere; }
.fc-prod, .fc-obs { margin: 8px 0; }
.cli-ficha h3 { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin: 22px 0 8px; }

/* ---------- Financeiro ---------- */
.fin-abas { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pil); background: var(--fill); border: 1px solid var(--borda); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fin-abas::-webkit-scrollbar { display: none; }
.fin-abas button { border: 0; background: transparent; padding: 7px 16px; color: var(--mu); white-space: nowrap; }
.fin-abas button:hover { background: var(--fill-h); color: var(--tx); }
.fin-abas button.on { background: var(--degrade); color: #F4F4F2; box-shadow: inset 0 1px 0 rgba(244,244,242,.18); }
.cab-fin { margin-bottom: 18px; }
.fin-resumo { display: flex; align-items: flex-end; gap: 14px 38px; flex-wrap: wrap; padding: 2px 2px 14px; }
.fin-saldo small { display: block; color: var(--mu); font-size: 12px; }
.fin-saldo b { display: block; font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fin-saldo b.neg { color: var(--bad); }
.fin-nums { display: flex; gap: 8px 30px; flex-wrap: wrap; margin: 0; }
.fin-nums dt { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin-bottom: 3px; }
.fin-nums dd { margin: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-nums dd.pos, .ex-v b.pos, .ex-liq.pos { color: var(--ok); }
.fin-per { margin-left: auto; }
.fin-per select { width: auto; height: 38px; padding-top: 6px; padding-bottom: 6px; }
.fin-filtros { margin: 4px 0 8px; }
.fin-filtros .abas-f { margin: 0; }
.ex { max-width: 920px; }
.ex-dia { margin-bottom: 18px; }
.ex-dia > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 4px 6px; border-bottom: 1px solid var(--borda-forte); }
.ex-dia h3 { margin: 0; font-size: 14px; display: flex; align-items: baseline; gap: 10px; }
.ex-dia h3 small { color: var(--mu); font: 500 11px var(--mono); letter-spacing: .04em; }
.ex-liq { font: 600 13px var(--mono); color: var(--mu); font-variant-numeric: tabular-nums; }
.ex-l { list-style: none; margin: 0; padding: 0; }
.ex-i { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto 34px; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--borda); }
.ex-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--fill-h); color: var(--mu); }
.ex-i.in .ex-ic { background: var(--t-ok-bg); color: var(--t-ok-tx); }
.ex-i.pend .ex-ic { background: transparent; border: 1px dashed var(--borda-forte); }
.ex-main { text-align: left; background: none; border: 0; padding: 4px 6px; margin: -4px -6px; border-radius: 10px; display: grid; min-width: 0; font-weight: 400; }
button.ex-main:hover { background: var(--fill); }
.ex-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ex-main small { color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-v { text-align: right; display: grid; }
.ex-v b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ex-v small { color: var(--mu); font: 500 11px var(--mono); font-variant-numeric: tabular-nums; }
.ex-del { opacity: 0; }
.ex-i:hover .ex-del, .ex-del:focus-visible { opacity: 1; }
.ex-trava { color: var(--mu); display: inline-grid; place-items: center; }
.ex-mais { text-align: center; padding: 8px 0 20px; }
.soc .soc-t { display: flex; align-items: center; gap: 10px; }
.soc .soc-t h3 { margin: 0 0 10px; }
.soc.meu { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde) 35%, transparent); }
.trava-nota { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; color: var(--mu); font-size: 13px; }
.trava-nota .ic { margin-top: 2px; }
td button:disabled, .ex-trava { cursor: not-allowed; }

/* ---------- Projetos: linha do tempo ---------- */
.tl-g { margin: 0 0 22px; }
.tl-g > h3, .tl-g summary h3 { display: flex; align-items: center; gap: 10px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); margin: 0 0 10px; }
.tl-g.bad > h3 { color: var(--bad); } .tl-g.am > h3 { color: var(--am); }
.tl-g .cont { font: 500 11px/1 var(--mono); padding: 4px 8px; border-radius: 99px; background: var(--fill-h); color: var(--mu); }
.tl-enc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.tl-enc summary::-webkit-details-marker { display: none; }
.tl-enc summary h3 { margin: 0; }
.tl-enc summary .ic { margin-left: auto; color: var(--mu); }
.tl-enc[open] summary { margin-bottom: 10px; }
.tl { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 8px; }
.tl::before { content: ""; position: absolute; left: 66px; top: 10px; bottom: 10px; width: 1px; background: var(--borda-forte); }
.tl-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 22px; align-items: stretch; position: relative; }
.tl-item::before { content: ""; position: absolute; left: 62px; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--verde); z-index: 1; }
.tl-item.atraso::before { border-color: var(--bad); } .tl-item.aviso::before { border-color: var(--amb); }
.tl-d { text-align: right; padding-top: 10px; }
.tl-d b { display: block; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tl-d small { color: var(--mu); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tl-c { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, auto) 176px auto; gap: 8px 14px; align-items: center; padding: 11px 14px; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--r-p); }
.tl-item.atraso .tl-c { box-shadow: inset 3px 0 0 var(--bad); } .tl-item.aviso .tl-c { box-shadow: inset 3px 0 0 var(--amb); }
.tl-l { display: grid; min-width: 0; } .tl-l small, .tl-m small { color: var(--mu); }
.tl-l a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-m { display: grid; justify-items: start; gap: 3px; }
.tl-c select { padding-top: 6px; padding-bottom: 6px; border-radius: var(--r-pil); }
.tl-a { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tl-a button { padding: 5px 12px; font-size: 12px; }

/* ---------- Suporte ---------- */
.ch-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 980px; }
.ch-i { display: grid; grid-template-columns: minmax(0, 1fr) auto 176px; gap: 10px 14px; align-items: center; padding: 11px 14px; background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--r-p); }
.ch-i.prio-alta { box-shadow: inset 3px 0 0 var(--bad); } .ch-i.prio-média { box-shadow: inset 3px 0 0 var(--amb); }
.ch-i.feito { opacity: .72; }
.ch-main { text-align: left; background: none; border: 0; padding: 4px 6px; margin: -4px -6px; border-radius: 10px; display: grid; min-width: 0; font-weight: 400; }
.ch-main:hover { background: var(--fill); }
.ch-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ch-main small { color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-i select { padding-top: 6px; padding-bottom: 6px; border-radius: var(--r-pil); }
.notas { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.notas li { background: var(--fill); border-radius: 12px; padding: 8px 12px; }
.notas small { color: var(--mu); } .notas p { margin: 2px 0 0; white-space: pre-wrap; }

/* ---------- Produtos e Serviços ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; margin-bottom: 8px; }
.prod { background: var(--vidro); border: 1px solid var(--borda); border-radius: var(--r-g); padding: 18px; display: grid; gap: 6px; align-content: start; }
.prod.off { opacity: .65; }
.prod-t { display: flex; gap: 6px; flex-wrap: wrap; }
.prod h2 { font-size: 17px; margin: 6px 0 0; }
.prod-p { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.prod-p small { display: block; font-size: 12px; font-weight: 400; color: var(--mu); letter-spacing: 0; }
.prod-m { margin: 0; color: var(--mu); font-size: 13px; } .prod-m b { color: var(--tx); font-variant-numeric: tabular-nums; }
.prod-a { display: flex; gap: 6px; margin-top: 8px; } .prod-a button { padding: 5px 13px; font-size: 13px; }

/* ---------- Relatórios ---------- */
.gr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.gr-c { overflow: visible; min-width: 0; }
.gr-c.larga { grid-column: 1 / -1; }
.gr-c > h2.etq { margin-bottom: 8px; }
.gr-c .bars { margin-top: 10px; }
.hb { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.hb li { display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(0, 2.2fr) auto; gap: 12px; align-items: center; padding: 5px 0; }
.hb-r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.hb-b { height: 10px; border-radius: 99px; background: var(--fill-h); overflow: hidden; }
.hb-b i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2E4B3F, var(--verde)); }
.hb b { font-variant-numeric: tabular-nums; font-size: 13px; min-width: 2ch; text-align: right; }
.rc-num { margin: 4px 0 0; font-size: 15px; } .rc-num b { font-size: 24px; letter-spacing: -.02em; }

/* ---------- Configurações ---------- */
.cfg-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pessoas-ed { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.pe-l { display: flex; gap: 8px; align-items: center; } .pe-l .pn { flex: 2; } .pe-l .pa { flex: 1.2; }
#cfg-modelos { margin-top: 16px; padding: 22px; }
.mod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin-top: 12px; }
.mod label { display: block; font-size: 12px; color: var(--mu); margin-bottom: 4px; }
.mod .link { font-size: 12px; margin-top: 2px; }
code { font: 500 12px var(--mono); background: var(--fill); padding: 2px 6px; border-radius: 6px; }
#cfg-app h3 { margin: 16px 0 6px; font-size: 14px; }
.dica-ios-t { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--fill); }

/* ---------- app no celular: instalar, sem conexão, dica do iPhone ---------- */
.btn-instalar { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: var(--r-pil); background: var(--btn-p-bg); color: var(--btn-p-tx); border-color: var(--btn-p-bg); font-weight: 600; }
.btn-instalar:hover { background: var(--btn-p-bg-h); border-color: var(--btn-p-bg-h); }
.selo-off { display: inline-block; background: var(--aviso-bg); color: var(--aviso-tx); border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dica-ios { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-p); background: var(--t-n-bg); color: var(--t-n-tx); font-size: 13px; }
.dica-ios button { flex: none; padding: 6px 14px; }

/* ---------- telas intermediárias e celular ---------- */
@media (max-width: 1180px) {
  .tl-c { grid-template-columns: minmax(0, 1fr) 176px; }
  .tl-m { grid-column: 1; } .tl-a { grid-column: 1 / -1; justify-content: flex-start; }
  .gr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .md-grid { grid-template-columns: 1fr; }
  .md-lado { position: static; order: -1; }
  .mod-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .cab { gap: 8px; margin-top: 4px; }
  .cab h1 { font-size: 18px; }
  .cab input[type=search] { flex: 1 1 100%; width: auto; max-width: none; }
  .cab .vista, .cab .cab-a { flex: none; }
  .cab .esp { display: none; }
  .md-topo { padding-bottom: 16px; }
  .md-topo-r { justify-items: start; width: 100%; }
  .md-i { grid-template-columns: minmax(0, 1fr) auto; }
  .md-i .md-a { grid-column: 1 / -1; justify-content: flex-start; }
  .md-card { padding: 14px 14px 10px; }
  .cli-md { grid-template-columns: 1fr; }
  .cli-lista { position: static; max-height: none; }
  .cli-ficha { display: none; }
  .cli-md.ficha-aberta .cli-ficha { display: block; position: fixed; inset: var(--topo-h) 0 0 0; z-index: 40; overflow: auto; border-radius: 0; border: 0; background: var(--bg); padding: 16px 16px 40px; }
  .fc-voltar { display: inline-flex; width: 44px; height: 44px; flex: none; background: var(--fill); border-radius: 50%; }
  .fc-a { margin-left: 0; width: 100%; }
  .cli-nada { display: none; }
  .fin-per { margin-left: 0; width: 100%; } .fin-per select { width: 100%; }
  .fin-resumo { padding-bottom: 8px; }
  .fin-nums { gap: 8px 20px; }
  .ex-i { grid-template-columns: 30px minmax(0, 1fr) auto 30px; gap: 8px 10px; }
  .ex-st { grid-column: 2 / 4; grid-row: 2; } .ex-st:empty { display: none; }
  .ex-del { opacity: 1; }
  .tl::before { left: 40px; } .tl-item { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; } .tl-item::before { left: 36px; }
  .tl-d b { font-size: 17px; } .tl-d small { font-size: 9px; }
  .tl-c { grid-template-columns: 1fr; padding: 11px 12px; }
  .tl-m, .tl-a { grid-column: 1; }
  .ch-i { grid-template-columns: minmax(0, 1fr) auto; }
  .ch-i select { grid-column: 1 / -1; }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .prod { padding: 14px; } .prod-p { font-size: 22px; }
  .gr-c { padding: 16px; }
  .hb li { grid-template-columns: minmax(70px, 1fr) minmax(0, 1.4fr) auto; gap: 8px; }
  .pe-l { flex-wrap: wrap; } .pe-l .pn { flex: 1 1 100%; }
  .btn-instalar span { display: none; } .btn-instalar { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .topo .selo-off { display: none; }
}