/* ===========================================================================
   EVERY SOCIAL MEDIA OS — Design System (dark / blue dashboard)
   =========================================================================== */
:root {
  --bg: #0a0d13;
  --surface: #131824;
  --surface-2: #182030;
  --surface-3: #202939;
  --card: #1b2333;   /* superfície elevada (menus, caixas) — precisa existir nos 2 temas p/ ter contraste */
  --border: #38465d;
  --border-strong: #4d5f7d;

  --text: #eef1f7;
  --ink-soft: #ccd3e0;
  --muted: #99a3b5;
  --faint: #6b7688;

  --blue: #2f6bff;
  --blue-2: #5488ff;
  --blue-ink: #7ba4ff;
  --blue-soft: rgba(47, 107, 255, .12);
  --purple: #9a7bf0;
  --green: #3ddc97;
  --amber: #f0b429;
  --red: #f26a76;
  --red-soft: rgba(242, 106, 118, .12);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.22), 0 8px 24px -18px rgba(0,0,0,.42);
  --shadow-lg: 0 24px 60px -28px rgba(0,0,0,.6);
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Tema CLARO (light) — sobrescreve os tokens ---- */
:root[data-theme="light"] {
  --bg: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #eef2f8;
  --card: #ffffff;
  --border: #c5d0e2;
  --border-strong: #a8b6cd;

  --text: #141a24;
  --ink-soft: #33404f;
  --muted: #5f6b7e;
  --faint: #8b97a8;

  --blue-soft: rgba(47, 107, 255, .10);
  --red-soft: rgba(242, 106, 118, .10);
  --shadow: 0 1px 2px rgba(20,30,50,.06), 0 12px 28px -18px rgba(20,30,50,.28);
  --shadow-lg: 0 30px 70px -28px rgba(20,30,50,.30);
}
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 820px at 88% -12%, rgba(47,107,255,.07), transparent 58%),
    radial-gradient(1000px 760px at -12% 112%, rgba(47,107,255,.05), transparent 55%),
    var(--page-bg, #e9edf5);
}
:root[data-theme="light"] .bg-fx { opacity: .05; }
:root[data-theme="light"] .brand-img { filter: none; }  /* tema claro: azul escuro direto */
:root[data-theme="light"] .topbar {
  background: linear-gradient(var(--bg) 72%, rgba(233,237,245,0));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  /* --page-bg é a cor de fundo da página; ela escolhe em Configurações → Aparência.
     Os brilhos ficam por cima, então qualquer cor continua com a mesma profundidade. */
  background:
    radial-gradient(1200px 820px at 88% -12%, rgba(47,107,255,.10), transparent 58%),
    radial-gradient(1000px 760px at -12% 112%, rgba(47,107,255,.07), transparent 55%),
    var(--page-bg, #070a10);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  transition: background .25s ease, color .25s ease;
}
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .14; }
.bg-fx svg { width: 100%; height: 100%; display: block; }
.app { position: relative; z-index: 1; }
button { font-family: inherit; }
/* ícones SVG minimalistas (substituem os emojis do sistema) */
.ic { display: inline-flex; align-items: center; margin-right: 5px; flex-shrink: 0; }
.ic svg { width: 1.05em; height: 1.05em; }
.ic:only-child { margin-right: 0; }
.empty-ic { display: flex; justify-content: center; color: var(--faint); margin-bottom: 4px; }
.fnc-ic { display: inline-flex; align-items: center; }
.attn-ic, .pwa-ic, .portal-theme-btn, .kpi-badge, .pkpi-ic, .mat-ic,
.ct-ic, .exec-ic, .he-ic, .uh-ic, .pn-ic, .fnc-ic, .welcome-emoji, .mat-empty-ic, .pside-empty-ic { display: inline-flex; align-items: center; justify-content: center; }
.mat-empty-ic, .welcome-emoji { color: var(--faint); }
::selection { background: var(--blue-soft); }

.app { display: grid; grid-template-columns: 250px 1fr; height: 100vh; }

/* ------------------------------- SIDEBAR -------------------------------- */
.sidebar {
  position: relative;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 24px 16px 18px;
  /* sem isto a barra cresce até o tamanho do menu e estica a página inteira */
  min-height: 0;
}
/* botão de recolher / expandir a barra lateral */
.nav-collapse { position: absolute; top: 16px; right: -13px; z-index: 6; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); transition: color .15s, border-color .15s; }
.nav-collapse:hover { color: var(--text); border-color: var(--border-strong); }
.nav-collapse svg { width: 15px; height: 15px; transition: transform .2s; }
.nav-collapsed .nav-collapse svg { transform: rotate(180deg); }
/* estado recolhido: só ícones */
.app.nav-collapsed { grid-template-columns: 72px 1fr; }
.nav-collapsed .sidebar { padding: 24px 10px 18px; }
.nav-collapsed .brand { align-items: center; padding: 2px 0 18px; }
.nav-collapsed .brand-img, .nav-collapsed .brand-sub, .nav-collapsed .nav-label { display: none; }
.nav-collapsed .brand-mark { display: block; width: 34px; height: 34px; }
.nav-collapsed .nav-item { justify-content: center; gap: 0; padding: 11px 0; font-size: 0; }
.nav-collapsed .nav-ic { width: 24px; height: 24px; }
.nav-collapsed .nav-ic svg { width: 20px; height: 20px; }
.nav-collapsed .nav-context { align-items: stretch; }
/* tooltip flutuante com o nome (barra recolhida) */
.nav-tip { position: fixed; z-index: 9999; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(15, 23, 42, .16); padding: 7px 14px; border-radius: 11px; font-size: 13.5px; font-weight: 600; white-space: nowrap; pointer-events: none; animation: navTipIn .12s ease; }
.pw-with-gen { display: flex; gap: 8px; align-items: stretch; }
.pw-with-gen input { flex: 1; min-width: 0; }
.pw-with-gen .btn { white-space: nowrap; flex: none; }
.pw-with-gen .pw-eye-wrap { flex: 1; min-width: 0; }
/* Olhinho 👁 pra ver a senha enquanto digita */
.pw-eye-wrap { position: relative; display: block; width: 100%; }
.pw-eye-wrap input { width: 100%; padding-right: 42px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; opacity: .75; }
.pw-eye:hover { opacity: 1; }
/* Somente leitura pra equipe (toggle no Cérebro) */
.ro-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.ro-toggle.on { border-color: color-mix(in srgb, #e8890c 50%, transparent); background: color-mix(in srgb, #e8890c 7%, transparent); }
.ro-t { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ro-t svg { width: 16px; height: 16px; }
.ro-s { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; max-width: 640px; }
.ro-switch { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; cursor: pointer; transition: background .15s; }
.ro-switch.on { background: #e8890c; border-color: #e8890c; }
.ro-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ro-switch.on .ro-knob { left: 22px; }
/* Busca global (topbar + paleta de comando) */
.gsearch-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; font-size: 13px; color: var(--muted); cursor: pointer; }
.gsearch-btn:hover { border-color: var(--blue); color: var(--text); }
.gsearch-btn svg { width: 15px; height: 15px; }
.gsearch-btn kbd { font-size: 10.5px; font-weight: 700; background: var(--surface-3); color: var(--muted); padding: 1px 6px; border-radius: 5px; }
@media (max-width: 640px) { .gsearch-btn span, .gsearch-btn kbd { display: none; } }
.gsearch-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(10, 14, 22, .5); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: navTipIn .12s ease; }
.gsearch-box { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.28); overflow: hidden; }
.gsearch-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.gsearch-ic { color: var(--faint); display: flex; }
.gsearch-ic svg { width: 20px; height: 20px; }
.gsearch-inp { flex: 1; border: none; background: none; font-size: 16px; color: var(--text); outline: none; padding: 0; }
.gsearch-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.gsearch-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13.5px; }
.gsearch-grp { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 10px 12px 4px; }
.gsearch-item { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; border-radius: 10px; padding: 9px 12px; cursor: pointer; text-align: left; }
.gsearch-item:hover { background: var(--surface-2); }
.gsearch-av { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.gsearch-doc { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.gsearch-txt { min-width: 0; }
.gsearch-nm { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lightbox de foto (abrir anexo em tela cheia) */
.img-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(10, 14, 22, .82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; animation: navTipIn .12s ease; }
.img-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
.img-lightbox-x { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 20px; cursor: pointer; }
.img-lightbox-x:hover { background: rgba(255,255,255,.28); }
.img-lightbox video { border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; background: #000; }
.img-lightbox-dl { position: fixed; top: 18px; right: 74px; height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; background: rgba(255,255,255,.15); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.img-lightbox-dl:hover { background: rgba(255,255,255,.28); }

/* ---- Chat da equipe (widget flutuante) ---- */
.tchat { position: fixed; right: 20px; bottom: 20px; z-index: 9500; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.tchat-fab { position: relative; width: 50px; height: 50px; border-radius: 50%; border: none; background: var(--blue); color: #fff; box-shadow: 0 10px 26px -8px rgba(47,107,255,.7); cursor: pointer; display: grid; place-items: center; opacity: .93; transition: opacity .12s; }
.tchat-fab:hover, .tchat-fab.on { opacity: 1; }
.tchat-fab:hover { filter: brightness(1.06); }
.tchat-fab.on { background: var(--surface-3); }
.tchat-fab-ic { font-size: 24px; line-height: 1; }
.tchat-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #f26a76; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg, #0b0f17); }
.tchat-panel { width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 120px); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; }
.tchat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tchat-head b { font-size: 14.5px; }
.tchat-online { font-size: 11.5px; color: #12b886; font-weight: 700; }
.tchat-online-wrap { min-height: 15px; }
.tchat-head-actions { display: flex; align-items: center; gap: 4px; }
.tchat-eye { background: none; border: none; font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.tchat-eye:hover { background: var(--surface-3); }
.tchat-min { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
.tchat-seen-pop { position: absolute; inset: 52px 10px auto 10px; max-height: 70%; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.35); z-index: 5; }
.tchat-seen-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.tchat-seen-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.tchat-seen-body { padding: 6px; }
.tchat-seen-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; }
.tchat-seen-av { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; background-size: cover; background-position: center; }
.tchat-seen-nm { font-size: 13px; font-weight: 600; }
.tchat-seen-st { font-size: 11px; margin-top: 1px; }
.tchat-seen-st.ok { color: #12b886; }
.tchat-seen-st.partial { color: #e8890c; }
.tchat-seen-st.none { color: var(--muted); }
.tchat-seen-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 12.5px; }
.tchat-nudge { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--blue-soft); border-bottom: 1px solid var(--border); font-size: 12px; }
.tchat-nudge-txt { flex: 1; color: var(--text); }
.tchat-nudge-btn { flex: none; background: var(--blue); color: #fff; border: none; border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.tchat-nudge-x { flex: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.tchat-list { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 8px; }
.tchat-msg { display: flex; align-items: flex-end; gap: 7px; }
.tchat-msg.mine { justify-content: flex-end; }
.tchat-av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; background-size: cover; background-position: center; }
.tchat-bubble { position: relative; max-width: 82%; background: var(--surface-3); border-radius: 11px; padding: 5px 9px 5px; }
.tchat-msg.mine .tchat-bubble { background: var(--blue); color: #fff; }
.tchat-who { font-size: 10.5px; font-weight: 800; color: var(--blue-ink); margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid var(--border); }
.tchat-msg.mine .tchat-who { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
.tchat-txt { font-size: 13px; line-height: 1.32; white-space: pre-wrap; word-break: break-word; }
.tchat-time-space { display: inline-block; width: 42px; height: 1px; }   /* reserva o lugar do horário na última linha */
.tchat-time { position: absolute; right: 9px; bottom: 4px; font-size: 9.5px; opacity: .6; line-height: 1; }
.tchat-del { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #f26a76; color: #fff; font-size: 10px; cursor: pointer; display: none; align-items: center; justify-content: center; }
.tchat-bubble:hover .tchat-del { display: flex; }
.tchat-seenbtn { position: absolute; bottom: 1px; left: 4px; background: rgba(0,0,0,.18); border: none; border-radius: 8px; font-size: 10px; opacity: 0; cursor: pointer; padding: 1px 4px; line-height: 1.2; transition: opacity .12s; }
.tchat-bubble:hover .tchat-seenbtn { opacity: 1; }
.tchat-foot { position: relative; display: flex; gap: 8px; align-items: flex-end; padding: 10px; border-top: 1px solid var(--border); }
/* @menção: destaque no texto + mensagem que marcou você + dropdown de autocomplete */
.tchat-at { background: var(--blue-soft); color: var(--blue-ink); font-weight: 700; border-radius: 5px; padding: 0 3px; }
.tchat-msg.mine .tchat-at { background: rgba(255,255,255,.25); color: #fff; }
.tchat-at.me { background: #12b886; color: #fff; }
.tchat-msg.mentioned .tchat-bubble { box-shadow: 0 0 0 2px #12b886; }
.tchat-mentions { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 2px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 -8px 24px rgba(0,0,0,.25); overflow: hidden; max-height: 200px; overflow-y: auto; }
.tchat-mention { display: flex; align-items: baseline; gap: 8px; padding: 8px 11px; cursor: pointer; font-size: 13px; }
.tchat-mention b { color: var(--blue-ink); }
.tchat-mention span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchat-mention.on, .tchat-mention:hover { background: var(--blue-soft); }
.tchat-input { flex: 1; resize: none; min-height: 38px; max-height: 96px; border-radius: 10px; padding: 9px 11px; font-size: 13.5px; font-family: inherit; }
.tchat-send { flex: none; width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--blue); color: #fff; font-size: 15px; cursor: pointer; }
.tchat-send:hover { filter: brightness(1.06); }
@media (max-width: 560px) { .tchat-panel { height: 60vh; } }
/* Pop-up "nova versão disponível" (canto inferior) */
.update-pop { position: fixed; z-index: 10001; right: 22px; bottom: 22px; max-width: 340px; display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 44px rgba(15, 23, 42, .22); border-radius: 16px; padding: 16px; animation: updatePopIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes updatePopIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.update-pop-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
.update-pop-body { flex: 1; min-width: 0; }
.update-pop-t { font-weight: 800; font-size: 14.5px; }
.update-pop-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.update-pop-acts { display: flex; gap: 8px; margin-top: 12px; }
.update-pop-later { background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 8px 6px; }
.update-pop-btn { background: var(--blue); color: #fff; border: none; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.update-pop-btn:hover { filter: brightness(1.06); }
@media (max-width: 560px) { .update-pop { left: 14px; right: 14px; bottom: 14px; max-width: none; } }
@keyframes navTipIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.nav-collapsed .active-chip { justify-content: center; padding: 8px 0; }
.nav-collapsed .ac-txt, .nav-collapsed .ac-chevron, .nav-collapsed .uc-info, .nav-collapsed .uc-out { display: none; }
.nav-collapsed .user-chip { justify-content: center; padding: 8px 0; }
/* barra recolhida: o "Trocar de cliente" mostra SÓ as logos (sem título nem nomes cortados) */
.nav-collapsed .client-switch-pop { padding: 6px; }
.nav-collapsed .client-switch-pop .csp-head { display: none; }
.nav-collapsed .client-switch-pop .csp-txt { display: none; }
.nav-collapsed .client-switch-pop .csp-item { justify-content: center; gap: 0; padding: 6px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 2px 10px 22px; }
/* logo azul escuro (#17346e): no tema ESCURO clareia pra ficar legível na sidebar */
.brand-img { width: 100%; max-width: 178px; height: auto; display: block; filter: brightness(2.6) saturate(1.15); }
.brand-sub { font-size: 9px; letter-spacing: 3px; color: var(--faint); font-weight: 600; padding-left: 2px; }
.brand-mark { display: none; }

.nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px; font-weight: 500;
  padding: 11px 13px; border-radius: 11px; transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--surface); color: var(--text); }
.nav-item.active { background: var(--blue); color: #fff; box-shadow: 0 6px 16px -10px rgba(47,107,255,.5); }
.nav-item.active .nav-ic { color: #fff; }
.nav-item:hover .nav-ic { color: var(--ink-soft); }
.nav-ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.nav-ic svg { width: 18px; height: 18px; }

.nav-context { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.nav-label { font-size: 10px; letter-spacing: 1.5px; color: var(--faint); font-weight: 600; padding: 0 13px 8px; }
.active-chip { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0 2px 10px; }
.active-chip .ac-avatar { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.active-chip .ac-name { color: var(--text); font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.active-chip .ac-niche { color: var(--faint); font-size: 11px; }

.sidebar-foot { margin-top: auto; padding-top: 12px; }

/* -------------------------------- MAIN ---------------------------------- */
.main { overflow-y: auto; height: 100vh; padding-bottom: 84px; }  /* espaço pro chat flutuante não cobrir o conteúdo */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 26px 36px 18px;
  background: linear-gradient(var(--bg) 72%, rgba(10,13,19,0));
}
.topbar h1 { margin: 0; font-weight: 700; font-size: 25px; letter-spacing: -.5px; color: var(--text); }
.view-sub { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-client { width: auto; min-width: 150px; max-width: 240px; padding: 9px 12px; font-size: 13.5px; font-weight: 600; border-radius: 11px; }
/* menu de conta (canto superior direito, estilo Facebook) */
.topbar-user { display: flex; align-items: center; }
.tbu { position: relative; }
.tbu-btn { border: none; background: none; cursor: pointer; padding: 2px; border-radius: 50%; display: flex; transition: box-shadow .12s; }
.tbu-btn:hover { box-shadow: 0 0 0 2px var(--border-strong); }
.tbu-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.tbu-av.has-photo { background-size: cover; background-position: center; color: transparent; }
.tbu-av2 { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
.tbu-av2.has-photo { background-size: cover; background-position: center; color: transparent; }
.tbu-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 252px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 120; animation: fade .12s ease; }
.tbu-head { display: flex; align-items: center; gap: 11px; padding: 8px 8px 10px; }
.tbu-hd { min-width: 0; }
.tbu-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbu-role { font-size: 12px; color: var(--muted); }
.tbu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.tbu-item { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 10px; border-radius: 9px; cursor: pointer; text-align: left; }
.tbu-item:hover { background: var(--surface-2); }
.tbu-item.danger { color: var(--red); }
.tbu-ic { display: flex; color: var(--muted); flex: 0 0 auto; }
.tbu-ic svg { width: 18px; height: 18px; }
.tbu-item.danger .tbu-ic { color: var(--red); }
.tbu-switch { width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); position: relative; transition: background .15s; flex: 0 0 auto; }
.tbu-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.tbu-switch.on { background: var(--blue); }
.tbu-switch.on::after { transform: translateX(16px); }
/* abas internas (ex.: Relatório & Redes) */
.hub-tabs { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 3px; margin-bottom: 20px; }
.hub-tab { min-width: 150px; text-align: center; background: transparent; border: none; color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.hub-tab:hover { color: var(--text); }
.hub-tab.on { background: var(--blue); color: #fff; box-shadow: 0 4px 12px -6px rgba(47,107,255,.5); }
.client-select-wrap { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px 8px 6px 14px; }
.client-select-wrap span { font-size: 13px; color: var(--muted); }
.client-select-wrap select { background: transparent; border: none; color: var(--text); font-weight: 600; font-size: 14px; padding: 6px 8px; cursor: pointer; }
.client-select-wrap select:focus { outline: none; }
.view-root { padding: 6px 36px 64px; }

/* ------------------------------- BOTÕES --------------------------------- */
.btn { border: none; border-radius: 12px; padding: 11px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .08s, background .15s, box-shadow .15s; display: inline-flex; align-items: center; gap: 8px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px -12px rgba(47,107,255,.55); }
.btn-primary:hover { background: var(--blue-2); }
.btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { border-color: var(--blue); }
.btn-dark { background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); }
.btn-dark:hover { border-color: var(--blue); }
.btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red-soft); }
.btn-danger:hover { background: var(--red-soft); }
.btn-sm { padding: 8px 13px; font-size: 13px; border-radius: 10px; }
.btn:disabled { opacity: .68; cursor: not-allowed; box-shadow: none; }
/* botão escuro desabilitado (ex.: "Aprimorar com IA" sem chave) — texto continua legível */
.btn-dark:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--border-strong); opacity: 1; }
.icon-btn { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px; border-radius: 8px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.link-btn { background: none; border: none; color: var(--blue-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* ------------------------------- CARDS ---------------------------------- */
.panel, .section-card, .hero, .insight-panel, .kpi, .rep-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { padding: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.2px; color: var(--text); }

/* ------------------------------ DASHBOARD ------------------------------- */
.dash { display: flex; flex-direction: column; gap: 18px; }
/* Cabeçalho do cliente: logo + nome + score (limpo, sem capa) */
.dash-hero { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 20px; }
.dash-hero-logo { width: 60px; height: 60px; border-radius: 14px; flex: none; font-size: 20px; }
.dash-hero-logo.has-logo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.dash-hero-id { min-width: 0; }
.dash-hero-nm { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.dash-hero-sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.dash-hero-score { flex: none; }
@media (max-width: 560px) { .dash-hero { flex-wrap: wrap; } }
.kpi-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-row { grid-template-columns: 1fr; } }
.kpi { padding: 20px; display: flex; flex-direction: column; min-height: 124px; border-radius: 18px; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kpi-name { min-width: 0; overflow-wrap: anywhere; font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; line-height: 1.35; min-height: 2.7em; }
.kpi-name-detail { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); line-height: 1.3; }
.kpi-badge { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); font-size: 16px; flex-shrink: 0; }
.kpi-val { font-size: 29px; font-weight: 700; letter-spacing: -.7px; line-height: 1.1; margin-top: auto; color: var(--text); overflow-wrap: anywhere; }
.kpi-val.empty { font-size: 14px; font-weight: 500; color: var(--faint); letter-spacing: 0; }
.kpi-val.longo { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpi-delta { font-size: 12px; font-weight: 600; color: var(--green); margin-top: 7px; }
.kpi-delta.neg { color: var(--red); }
.kpi-delta.flat { color: var(--muted); }

.dash-3 { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 18px; }
.dash-3b { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.dash-2 { display: grid; grid-template-columns: 1.9fr 1fr; gap: 18px; }

/* chart */
.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: 210px; display: block; }
.chart-empty { height: 210px; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 13.5px; padding: 20px; }

/* content list (destaque / próximos) */
.clist { display: flex; flex-direction: column; gap: 12px; }
.citem { display: flex; gap: 12px; align-items: center; }
.cthumb { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-size: 18px; }
.citem .ct-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text); }
.citem .ct-tag { font-size: 10.5px; font-weight: 600; color: var(--blue-ink); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; }
.citem .ct-metrics { margin-left: auto; text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; }

.next-item { display: flex; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.next-item:last-child { border-bottom: none; }
.next-date { text-align: center; min-width: 38px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 6px 4px; flex-shrink: 0; }
.next-date .d { font-size: 18px; font-weight: 700; line-height: 1; color: var(--text); }
.next-date .m { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.next-info { min-width: 0; }
.next-info .ni-fmt { font-size: 10.5px; font-weight: 600; color: var(--blue-ink); text-transform: uppercase; letter-spacing: .5px; }
.next-info .ni-title { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.35; margin-top: 2px; }
.next-time { margin-left: auto; font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; }

/* insights list */
.ins-list { display: flex; flex-direction: column; gap: 16px; }
.ins-item { display: flex; gap: 12px; }
.ins-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-ink); display: grid; place-items: center; flex-shrink: 0; font-size: 16px; border: 1px solid rgba(47,107,255,.22); }
.ins-item h5 { margin: 0 0 3px; font-size: 13.5px; }
.ins-item p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* funnel donut */
.funnel { display: flex; align-items: center; gap: 20px; }
.donut { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.donut .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; }
.donut .center .n { font-size: 26px; font-weight: 700; line-height: 1; }
.donut .center .l { font-size: 10.5px; color: var(--muted); line-height: 1.1; margin-top: 3px; }
.legend { display: flex; flex-direction: column; gap: 12px; }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; }
.legend-item .lg-name { color: var(--ink-soft); }
.legend-item .lg-val { color: var(--muted); margin-left: 4px; }

/* plan checklist */
.plan-list { display: flex; flex-direction: column; gap: 14px; }
.plan-item { display: flex; gap: 12px; align-items: flex-start; }
.plan-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); flex-shrink: 0; display: grid; place-items: center; font-size: 12px; color: transparent; margin-top: 1px; }
.plan-item.done .plan-check { background: var(--blue); border-color: var(--blue); color: #fff; }
.plan-item .pl-title { font-size: 13.5px; }
.plan-item.done .pl-title { color: var(--muted); }
.plan-item .pl-status { font-size: 11.5px; color: var(--faint); }

/* exec summary + priority */
.exec { display: flex; gap: 16px; align-items: flex-start; }
.exec-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-ink); display: grid; place-items: center; flex-shrink: 0; font-size: 20px; }
.exec p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.priority-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; }
.priority-card .pc-top { display: flex; align-items: center; gap: 10px; color: var(--blue-ink); font-weight: 600; }
.priority-card p { margin: 10px 0 16px; font-size: 14px; color: var(--ink-soft); }

.empty-mini { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* -------------------------- CLIENTES (grid) ----------------------------- */
.clients-toolbar { display: flex; gap: 12px; margin-bottom: 22px; }
.search { flex: 1; max-width: 380px; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.client-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; cursor: pointer; transition: transform .12s, border-color .2s, box-shadow .2s; box-shadow: var(--shadow); }
.client-card:hover { transform: translateY(-3px); border-color: var(--blue); }
.cc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.avatar { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px; flex-shrink: 0; }
.cc-name { font-weight: 700; font-size: 17px; }
.cc-niche { color: var(--muted); font-size: 13px; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12px; padding: 5px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft); }
.chip.cc-cost { background: rgba(240,180,41,.12); border-color: rgba(240,180,41,.35); color: var(--amber); font-weight: 600; }
.card-add { border: 2px dashed var(--border-strong); background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); min-height: 150px; text-align: center; }
.card-add:hover { border-color: var(--blue); color: var(--blue-ink); }
.card-add .plus { font-size: 30px; }

/* ------------------------------- FORM ----------------------------------- */
.section-card { padding: 24px; margin-bottom: 18px; }
.section-title {
  font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.2px;
  margin: 0 0 6px; line-height: 1.3;
}
.section-desc { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.train-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 18px; }
.train-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.train-title { font-weight: 700; font-size: 16px; }
.train-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; max-width: 640px; }
.train-pct { font-size: 26px; font-weight: 700; color: var(--blue-ink); }
.train-bar { height: 8px; background: var(--surface-3); border-radius: 20px; margin-top: 14px; overflow: hidden; }
.train-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--purple)); border-radius: 20px; transition: width .4s ease; }
/* Cérebro do cliente — barra de acesso rápido "Ir para" (fica fixa e rola até a seção) */
.brain-nav { position: sticky; top: 84px; z-index: 4; display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.brain-nav-label { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.brain-nav-label .ic { width: 15px; height: 15px; }
.brain-nav-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.brain-pill { flex: none; cursor: pointer; white-space: nowrap; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; font-family: inherit; transition: background .12s, border-color .12s, color .12s; }
.brain-pill:hover { border-color: var(--blue); color: var(--blue); }
.brain-pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.brain-anchor { scroll-margin-top: 150px; }
.brain-flash { animation: brainflash 1.1s ease; }
@keyframes brainflash { 0% { box-shadow: 0 0 0 3px rgba(47,107,255,.55); } 100% { box-shadow: 0 0 0 3px rgba(47,107,255,0); } }
.client-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
/* abas do modal "Novo cliente" */
.ctab-bar { display: flex; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.ctab-btn { flex: 1; padding: 9px 12px; border: none; background: transparent; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; }
.ctab-btn:hover { color: var(--text); }
.ctab-btn.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.ctab-panel { display: none; }
.ctab-panel.on { display: block; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
input, textarea, select {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text); padding: 11px 13px; font-family: inherit; font-size: 14px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
/* checkbox/radio não devem herdar o width:100%/padding dos inputs de texto */
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; margin: 0; box-shadow: none; accent-color: var(--blue); }
textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* ----------------------- VISÃO GERAL / INSIGHTS ------------------------- */
.hero { padding: 24px 26px; margin-bottom: 20px; display: flex; align-items: center; gap: 20px; }
.hero .avatar { width: 62px; height: 62px; border-radius: 18px; font-size: 25px; }
.hero-info h2 { margin: 0; font-weight: 700; font-size: 24px; }

/* Avatar com logo enviada (mostra a logo inteira sobre fundo branco) */
.avatar.has-logo, .ac-avatar.has-logo {
  background-color: #fff; background-size: contain; background-repeat: no-repeat;
  background-position: center; color: transparent; border: 1px solid var(--border);
}

/* Uploader de logo no Cérebro do cliente */
.logo-uploader { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo-preview {
  width: 88px; height: 88px; border-radius: 20px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 28px;
}
.logo-preview.has-logo {
  background-color: #fff; background-size: contain; background-repeat: no-repeat;
  background-position: center; color: transparent; border: 1px solid var(--border);
}
.logo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Editor de ajuste da logo (crop/zoom) */
.crop-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(4,7,12,.72); display: grid; place-items: center; padding: 20px; animation: wi-in .2s ease; }
.crop-box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px; width: min(360px, 94vw); }
.crop-title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.crop-sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.crop-stage { position: relative; width: 300px; max-width: 100%; height: 300px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #fff; }
.crop-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 0 0 2000px rgba(0,0,0,0); }
.crop-zoom-row { display: flex; align-items: center; gap: 12px; margin: 18px 2px 4px; color: var(--muted); font-weight: 700; }
.crop-zoom { flex: 1; accent-color: var(--blue); }
.crop-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Segurança: form de definir/alterar senha */
.sec-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.sec-form input { flex: 1; min-width: 160px; }
.sec-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Modal de senha antes de excluir algo permanente */
.pin-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(4,7,12,.72); display: grid; place-items: center; padding: 20px; animation: wi-in .2s ease; }
.pin-box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px; width: min(380px, 94vw); }
.pin-title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.pin-sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pin-box input { width: 100%; margin-bottom: 10px; }
.pin-error { background: var(--red-soft); color: var(--red); border: 1px solid rgba(242,106,118,.35); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.pin-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }

/* Modal de detalhe individual do post (clicar num card do calendário) */
.post-modal-overlay { position: fixed; inset: 0; z-index: 85; background: rgba(4,7,12,.72); display: grid; place-items: center; padding: 24px; animation: wi-in .2s ease; overflow-y: auto; }
.post-modal-box { position: relative; background: var(--surface); border: 1px solid var(--border-strong); border-top: 4px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 28px 32px; width: min(920px, 96vw); max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.post-modal-close { position: absolute; top: 14px; right: 14px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 9px; width: 30px; height: 30px; cursor: pointer; font-size: 14px; }
.post-modal-close:hover { color: var(--text); border-color: var(--border-strong); }
/* editor de conteúdo em tela cheia (folha grande) */
.post-modal-overlay:has(.post-modal-full) { padding: 0; }
.post-modal-full { width: 100vw; max-width: 1100px; max-height: 100vh; min-height: 100vh; border-radius: 0; border-top-width: 4px; padding: 32px clamp(20px, 5vw, 64px); }
@media (min-width: 1140px) { .post-modal-full { width: 92vw; min-height: 92vh; max-height: 92vh; border-radius: 20px; } }
/* indicador de salvamento automático */
.cm-autosave { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 10px; }
.cm-autosave.saving { color: var(--blue-ink); }
.cm-autosave.ok { color: var(--green); }
.cm-autosave.err { color: var(--red); }
.post-modal-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.2px; color: var(--text); padding-right: 34px; }
.hero-info p { margin: 3px 0 0; color: var(--muted); }
.hero-stats { margin-left: auto; display: flex; gap: 26px; }
.stat { text-align: right; }
.stat .num { font-size: 22px; font-weight: 700; }
.stat .lbl { font-size: 11px; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; }

.insight-panel { padding: 26px; }
.insight-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.insight-head h3 { margin: 0; font-weight: 600; font-size: 19px; }
.insight-head p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.diag-box { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius); padding: 18px 22px; margin: 20px 0; }
.diag-box .diag-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-ink); font-weight: 700; }
.diag-box p { margin: 6px 0 0; font-size: 15px; }
.insight-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.insight-cols.two { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.insight-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
.insight-col h4 { margin: 0 0 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.insight-col.opp h4 { color: var(--blue-ink); }
.insight-col.risk h4 { color: var(--red); }
.insight-col.test h4 { color: var(--amber); }
.insight-col ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--ink-soft); }
.ideas { margin-top: 18px; }
.ideas h4 { font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.idea { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px; }
.idea .idea-fmt { font-size: 11px; color: var(--blue-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.idea .idea-title { font-weight: 600; margin: 4px 0 6px; }
.idea .idea-desc { font-size: 13px; color: var(--muted); }
.priority { margin-top: 18px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 16px 20px; display: flex; gap: 14px; align-items: center; }
.priority .p-tag { background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 6px 11px; border-radius: 20px; white-space: nowrap; text-transform: uppercase; }
.priority .p-text { font-size: 15px; }

/* --------------------------- RELATÓRIO ---------------------------------- */
.report { display: flex; flex-direction: column; gap: 0; animation: fade .3s ease; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin: 18px 0; }
.kpi-name2 { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.kpi-val2 { font-size: 24px; font-weight: 700; margin: 6px 0 2px; }
.kpi-var { font-size: 12.5px; color: var(--green); font-weight: 600; }
.rep-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.rep-block { padding: 18px 20px; }
.rep-block h4 { margin: 0 0 10px; font-size: 15px; }
.rep-block p { margin: 0; color: var(--ink-soft); }
.rep-block ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-soft); font-size: 14px; }
.rep-block.plan { border-left: 4px solid var(--blue); margin: 16px 0; }
.rep-pairs { display: flex; flex-direction: column; gap: 11px; }
.rep-pair { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.rep-pair b { color: var(--text); }
.rep-pair span { color: var(--muted); }

/* --------------------------- PLANEJAMENTO ------------------------------- */
.gen-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.gen-controls .grow { flex: 1; min-width: 240px; }
.gen-controls label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.hint.warn { color: var(--amber); }

/* organizador por mês */
.org-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.year-nav { display: flex; align-items: center; gap: 6px; }
.yr-btn { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); font-size: 18px; cursor: pointer; }
.yr-btn:hover { border-color: var(--blue); color: var(--blue-ink); }
.yr { font-weight: 700; font-size: 16px; min-width: 54px; text-align: center; }
.month-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.month-chip { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 6px 10px; cursor: pointer; transition: border-color .15s, background .15s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.month-chip:hover { border-color: var(--border-strong); }
.month-chip.now { border-color: rgba(47,107,255,.4); }
.month-chip.active { background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 20px -10px rgba(47,107,255,.9); }
.mc-name { font-size: 13px; font-weight: 600; }
.month-chip.active .mc-name { color: #fff; }
.mc-dots { display: flex; gap: 4px; height: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.gen { background: var(--blue-ink); }
.dot.item { background: var(--amber); }
.month-chip.active .dot.gen { background: #fff; }

.month-panel { margin-top: 0; }
.mp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.mp-badges { display: flex; gap: 8px; }
.mp-sub { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.1px; margin: 18px 0 12px; }
.mp-divider { border-top: 1px solid var(--border); margin: 24px 0 20px; }
.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-item { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 11px 14px; }
.todo-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); background: transparent; color: transparent; cursor: pointer; flex-shrink: 0; font-size: 12px; display: grid; place-items: center; }
.todo-item.done .todo-check { background: var(--blue); border-color: var(--blue); color: #fff; }
.todo-text { flex: 1; font-size: 14px; }
.todo-item.done .todo-text { color: var(--muted); text-decoration: line-through; }
.todo-del { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 14px; }
.todo-del:hover { color: var(--red); }
.todo-add { display: flex; gap: 10px; margin-top: 12px; }
.todo-add input { flex: 1; }
.month-gens { display: flex; flex-direction: column; gap: 8px; }
.mg-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; }
.mg-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Integrações (caixas de conexão — usadas pela Meta) */
.cu-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 16px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13.5px; }
.cu-bar select { width: auto; min-width: 260px; padding: 7px 10px; }
.cu-muted { color: var(--muted); }
.cu-form { display: flex; gap: 10px; margin: 4px 0 6px; }
.cu-form input { flex: 1; max-width: 480px; }
.cu-connected { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cu-status { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.cu-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52,211,153,.15); }

/* Organizar material (autofill) */
.autofill-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.file-input { display: none; }
.file-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink-soft); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 500; }
.file-btn:hover { border-color: var(--blue); color: var(--blue-ink); }
.meta-pull { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.meta-pull input { width: auto; }
.meta-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.meta-pick select { width: auto; min-width: 200px; }
.meta-brain-status { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); margin: 8px 0 2px; }
.meta-brain-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.meta-brain-picker { margin-top: 12px; }
.loading { text-align: center; padding: 60px 20px; color: var(--muted); }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border-strong); border-top-color: var(--blue); border-radius: 50%; margin: 0 auto 16px; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.strategy-box { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin: 22px 0 18px; animation: fade .3s ease; }
.strategy-box h3 { margin: 0 0 8px; font-weight: 600; font-size: 19px; }
.strategy-box p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.week-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.week-chip b { color: var(--blue-ink); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; display: block; margin-bottom: 4px; }
.week-chip span { font-size: 13.5px; color: var(--ink-soft); }
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.cal-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* abas de rede social */
.net-tabs { display: inline-flex; gap: 6px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; flex-wrap: wrap; }
.net-tab { background: none; border: none; color: var(--muted); padding: 9px 16px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 500; }
.net-tab:hover:not(.active) { color: var(--text); }
.net-tab.active { background: var(--blue); color: #fff; }
.cal-toolbar .count { color: var(--muted); font-size: 13.5px; font-weight: 500; }
.fmt-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 22px; }
.fmt-nav-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft); border-radius: 999px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.fmt-nav-chip:hover { background: var(--blue-soft); border-color: rgba(47,107,255,.4); color: var(--text); transform: translateY(-1px); }
.fmt-nav-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 6px 14px -8px rgba(47,107,255,.6); }
.fmt-nav-chip.on .fnc-count { background: rgba(255,255,255,.22); color: #fff; }
.fmt-nav-chip .fnc-ic { font-size: 15px; }
.fmt-nav-chip .fnc-count { background: var(--surface-3); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.fmt-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; padding-left: 13px; position: relative; scroll-margin-top: 96px; }
.fmt-head:first-of-type { margin-top: 6px; }
.fmt-head::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 4px; border-radius: 3px; background: var(--blue); }
.fmt-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.1px; }
.fmt-count { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; margin-bottom: 6px; }
.post-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; animation: fade .3s ease; }
.post-card.clickable { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.post-card.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.post-card.editing.clickable { cursor: default; }
.post-card.editing.clickable:hover { transform: none; box-shadow: var(--shadow); }
.post-card.obj-atrair { border-left-color: var(--blue); }
.post-card.obj-engajar { border-left-color: var(--amber); }
.post-card.obj-nutrir { border-left-color: var(--purple); }
.post-card.obj-converter { border-left-color: var(--green); }
.post-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.badge.dia { background: var(--blue); color: #fff; }
.badge.plat { background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-soft); }
.badge.formato { background: var(--blue-soft); color: var(--blue-ink); }
.badge.obj { background: rgba(240,180,41,.16); color: var(--amber); }
.badge.pilar { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.post-card h4 { margin: 2px 0 0; font-size: 17px; font-weight: 700; }
.post-hook { font-style: italic; color: var(--blue-ink); font-size: 14px; }
.post-legenda { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 14px; line-height: 1.6; }

/* estrutura por formato (carrossel / roteiro / arte) */
.post-struct { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; background: rgba(47,107,255,.05); }
.ps-label { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--blue-ink); font-weight: 700; margin-bottom: 10px; }
.ps-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--border); }
.ps-item:first-of-type { border-top: none; }
.ps-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.ps-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.ps-arte { font-size: 14.5px; font-weight: 600; white-space: pre-wrap; }

/* mix do mês */
.mix-label { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.idea-pick-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.idea-pick { display: flex; align-items: flex-start; gap: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.idea-pick:hover { border-color: var(--border-strong); }
.idea-pick.on { border-color: var(--blue); background: var(--blue-soft); }
.idea-check { width: 17px !important; height: 17px; margin-top: 2px !important; flex-shrink: 0; cursor: pointer; }
.idea-pick .ip-body { flex: 1; min-width: 0; }
.idea-pick .ip-title { font-weight: 600; font-size: 13.5px; color: var(--text); line-height: 1.35; }
.idea-pick .ip-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mix-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mix-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink-soft); }
.mix-field input { width: 92px; padding: 8px 10px; text-align: center; }

/* Pop-up de geração (mix + pautas + contexto) */
.gen-overlay { position: fixed; inset: 0; z-index: 88; background: rgba(4,7,12,.72); display: grid; place-items: center; padding: 24px; animation: wi-in .2s ease; overflow-y: auto; }
.gen-modal { position: relative; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px 28px; width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; }
.gen-modal-title { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.2px; color: var(--text); padding-right: 30px; }
.gen-modal-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; }
.gen-modal-extra { width: 100%; min-height: 72px; resize: vertical; }
.gen-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* Navegação de mês (aba Calendário) */
.cal-monthnav { display: flex; align-items: center; gap: 10px; }
.cal-navbtn { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.cal-navbtn:hover { border-color: var(--blue); color: var(--blue-ink); }
.cal-navtitle { font-size: 17px; font-weight: 700; color: var(--text); min-width: 150px; text-align: center; text-transform: capitalize; }

/* Anexos do conteúdo */
.files-sec { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.files-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 10px; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.file-item { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.file-thumb { display: block; width: 100%; height: 96px; object-fit: cover; background: #000; }
.file-thumb.file-generic { display: grid; place-items: center; font-size: 34px; text-decoration: none; background: var(--surface-3); }
.file-thumb-wrap { display: block; position: relative; cursor: zoom-in; }
.file-thumb-wrap:hover .file-thumb { opacity: .9; }
.file-thumb-video { cursor: pointer; }
.file-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; font-size: 16px; pointer-events: none; }
.file-name { font-size: 11px; color: var(--ink-soft); padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-del { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 6px; border: none; background: rgba(4,7,12,.72); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
.file-del:hover { background: var(--red); }
.files-add { display: inline-flex; }

/* Alternador Calendário / Trello */
.cal-viewtoggle { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 3px; }
.cal-viewtoggle .vt-btn { min-width: 78px; text-align: center; background: transparent; border: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.cal-viewtoggle .vt-btn:hover { color: var(--text); }
.cal-viewtoggle .vt-btn.on { background: var(--blue); color: #fff; box-shadow: 0 4px 12px -6px rgba(47,107,255,.5); }

/* Visão Trello / Kanban por status */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.kb-col { flex: 0 0 270px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.kb-col.drop { border-color: var(--blue); background: var(--blue-soft); }
.kb-col-head { display: flex; align-items: center; gap: 8px; border-top: 3px solid var(--blue); padding-top: 8px; }
.kb-col-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text); flex: 1; min-width: 0; }
.kb-col-count { font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 1px 8px; }
.kb-list { display: flex; flex-direction: column; gap: 8px; min-height: 30px; }
.kb-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 9px; padding: 10px 12px; cursor: pointer; transition: box-shadow .12s, transform .12s; }
.kb-card:hover { box-shadow: var(--shadow); }
.kb-card.dragging { opacity: .5; }
.kb-card-fmt { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.kb-card-t { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; margin: 3px 0; }
.kb-card-day { font-size: 11px; color: var(--muted); }

/* Grade do mês (estilo calendário) */
/* ---- visão Semanal (colunas por semana) ---- */
.week-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: start; }
.week-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.week-title { font-weight: 700; color: var(--text); font-size: 14px; }
.week-range { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.week-add { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.week-add:hover { color: var(--blue-ink); border-color: var(--blue); }
.week-empty { font-size: 12.5px; color: var(--faint); text-align: center; padding: 18px 6px; }
.week-card { width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 10px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.week-card:hover { border-color: var(--border-strong); background: var(--surface-3); }
.week-card-top { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.week-card-day { color: var(--muted); font-weight: 600; }
.week-card-fmt { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-left: auto; }
.week-card-t { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.week-card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; }

/* ---- visão Feed (grade estilo Instagram) ---- */
/* feed estilo Instagram: 3 colunas por linha, quadrados, gap fininho */
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 640px; }
.feed-tile { position: relative; aspect-ratio: 1 / 1; border: none; padding: 0; border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--surface-2); }
.feed-tile:hover { filter: brightness(1.05); outline: 2px solid var(--blue); outline-offset: -2px; }
.feed-img { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.feed-img.ph { padding: 12px; }
.feed-ph-t { color: #fff; font-weight: 700; font-size: 14px; line-height: 1.25; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.35); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.feed-badge { position: absolute; top: 6px; left: 6px; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.feed-day { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.62); color: #fff; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }

/* calendário limpo: células separadas por respiro, bordas finas, cabeçalho leve */
/* células grandes e confortáveis (estilo agenda), com altura mínima generosa por linha —
   antes o grid era espremido em (100vh − 330px) e ficava pequeno/feio em telas mais baixas */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(150px, auto); gap: 8px; }
.cal-grid.portal-grid { grid-auto-rows: minmax(110px, auto); }
.cal-wd { padding: 2px 6px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); text-align: center; }
.cal-cell { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; min-height: 0; overflow: hidden; padding: 8px; display: flex; flex-direction: column; gap: 6px; transition: border-color .12s, box-shadow .12s; }
.cal-cell.creatable { cursor: pointer; }
.cal-cell.creatable:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.cal-cell.empty { background: var(--surface); opacity: .35; margin: 0; max-width: none; }
.cal-cell.empty .cal-dnum { opacity: .6; }
/* dias do mês vizinho, agora clicáveis: menos apagados e com o botão + no hover */
.cal-cell.empty.adj { opacity: .6; cursor: pointer; transition: opacity .12s, border-color .12s, box-shadow .12s; }
.cal-cell.empty.adj:hover { opacity: 1; border-color: var(--border-strong); box-shadow: var(--shadow); }
.cal-addbtn { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; }
.cal-cell.empty.adj:hover .cal-addbtn { opacity: 1; }
.cal-addbtn:hover { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue); }
/* célula do mês vizinho que TEM conteúdo: menos apagada, pra dar pra ler */
.cal-cell.empty.adj.has-spill { opacity: .92; }
/* chip de conteúdo que pertence ao mês vizinho (mostrado por transbordo na grade atual) */
.cal-post.spill { opacity: .8; border-style: dashed; }
.cal-post.spill:hover { opacity: 1; }
.cal-cell.cal-drop { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue), var(--shadow); }
/* dia de HOJE: borda destacada pra achar rápido no calendário */
.cal-cell.today { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); opacity: 1; }
.cal-cell.today .cal-dnum { color: var(--blue); font-weight: 800; }
.cal-post[draggable="true"] { cursor: grab; }
.cal-post.dragging { opacity: .4; }
.cal-dnum { font-size: 12.5px; font-weight: 700; color: var(--muted); align-self: flex-start; }
.cal-add { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, border-color .12s; }
.cal-cell:hover .cal-add { opacity: 1; }
.cal-add:hover { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue); }
.cal-post { display: flex; flex-direction: row; align-items: center; gap: 7px; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--blue); border-radius: 10px; padding: 6px 9px; cursor: pointer; width: 100%; transition: box-shadow .12s, transform .08s; }
.cal-post:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.cal-post-top { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.cal-post-fmt { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.cal-post-t { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cal-post .cal-post-meta { display: none !important; }
@media (max-width: 820px) {
  .cal-grid { gap: 5px; }
  .cal-cell { min-height: 72px; padding: 7px; border-radius: 10px; }
  .cal-post-t { -webkit-line-clamp: 1; }
}

/* Status do conteúdo (pill + dropdown) */
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
/* STATUS sempre visível: fixa no topo do modal ao rolar (nunca some) */
.cm-status-row { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 6; background: var(--surface); padding: 10px 0; margin-bottom: 0; }
.cm-status-row-novo { position: static; padding: 14px 26px 2px; }
.recover-box { max-width: 460px; }
.recover-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.recover-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.06)); }
.recover-dot { width: 8px; height: 8px; border-radius: 50%; background: #12b886; flex: none; }
.recover-t { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recover-meta { font-size: 12px; color: var(--muted); flex: none; }
.pend-age { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pend-age.alert { color: #e5484d; }
.pend-row.done .pend-age { display: none; }
.cm-status-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.status-dd { position: relative; }
.status-dd-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); border-radius: 9px; padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer; }
.status-dd-btn .status-caret { color: var(--muted); font-size: 10px; margin-left: 2px; }
.status-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 240px; max-height: 340px; overflow-y: auto; }
.status-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); padding: 8px 8px 4px; }
.status-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-size: 13px; font-weight: 500; padding: 8px 9px; border-radius: 8px; cursor: pointer; }
.status-opt:hover { background: var(--surface-2); }
.status-opt.on { background: var(--surface-2); font-weight: 700; }
.status-opt.on::after { content: "✓"; margin-left: auto; color: var(--blue-ink); font-weight: 700; }
.post-line { font-size: 13.5px; }
.post-line b { color: var(--muted); font-weight: 600; }
.hashtags { display: flex; flex-wrap: wrap; gap: 6px; }
.hashtag { font-size: 12.5px; color: var(--blue-ink); font-weight: 500; }
.post-rate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 2px; }
.post-rate-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.post-rate-hint { font-size: 11.5px; color: var(--muted); opacity: .8; }
.post-stars { display: inline-flex; gap: 1px; }
.star { background: none; border: none; padding: 0 1px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--border-strong); transition: color .12s, transform .08s; }
.star:hover { color: var(--amber); transform: scale(1.12); }
.star.on { color: var(--amber); }
.post-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.copy-btn { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.copy-btn:hover { border-color: var(--blue); color: var(--blue-ink); }

/* edição inline de post */
.post-card.editing { border-left-color: var(--blue) !important; gap: 16px; }
.post-card.editing .edit-field label { font-weight: 600; }
.edit-head { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--blue-ink); font-weight: 600; }
.edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.edit-field { display: flex; flex-direction: column; gap: 5px; }
.edit-field label { font-size: 11.5px; color: var(--muted); }
.edit-field input, .edit-field textarea, .edit-field select { padding: 8px 10px; font-size: 13px; }
.edit-field textarea { min-height: 110px; resize: vertical; }
/* caixa principal de escrita livre (menos engessado) */
.edit-field textarea.edit-main-box { min-height: 360px; font-size: 15px; line-height: 1.7; padding: 16px 18px; border-radius: 12px; }
/* estrutura por formato = recolhível (abre sozinha quando já tem conteúdo) */
.edit-struct { margin-top: 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.edit-struct > summary { cursor: pointer; padding: 12px 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); list-style: none; user-select: none; }
.edit-struct > summary::-webkit-details-marker { display: none; }
.edit-struct > summary::before { content: "▸"; margin-right: 8px; color: var(--faint); font-size: 10px; }
.edit-struct[open] > summary::before { content: "▾"; }
.edit-struct > summary:hover { color: var(--text); }
.edit-struct-body { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 12px; }

.past-gens { margin-top: 34px; }
.past-gens h3 { font-weight: 600; font-size: 18px; margin: 0 0 12px; }
.gen-list { list-style: none; padding: 0; margin: 0; }
.gen-list li { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
.gen-open { cursor: pointer; font-weight: 500; }
.gen-open:hover { color: var(--blue-ink); }
.link-danger { background: none; border: none; color: var(--red); cursor: pointer; font-size: 13px; }

/* ----------------------------- EMPTY STATE ------------------------------ */
.empty { text-align: center; max-width: 440px; margin: 8vh auto 0; color: var(--muted); }
.empty-emoji { font-size: 46px; }
.empty h2 { color: var(--text); font-weight: 700; margin: 12px 0 6px; }

/* -------------------------------- MODAL --------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 60; padding: 24px; animation: fade .2s ease; }
.modal-box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 22px; width: min(820px, 100%); max-height: 90vh; overflow-y: auto; padding: 28px; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.modal-head h2 { margin: 0; font-weight: 700; font-size: 24px; }
.modal-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; max-width: 90%; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

/* -------------------------------- TOAST --------------------------------- */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: #171f2e; border: 1px solid rgba(255,255,255,.1); color: #fff; padding: 13px 22px; border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 100; font-size: 14px; font-weight: 500; animation: fade .2s ease; max-width: min(520px, 90vw); line-height: 1.45; text-align: center; }
.toast.error { background: #3a1720; border-color: rgba(242,106,118,.5); color: #ffdde0; }
.toast.has-undo { display: inline-flex; align-items: center; gap: 14px; text-align: left; padding: 11px 12px 11px 20px; }
.toast-msg { font-weight: 500; }
.toast-undo { background: var(--blue); color: #fff; border: none; padding: 7px 15px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.toast-undo:hover { filter: brightness(1.08); }

/* Histórico / desfazer */
.history-view { max-width: 820px; }
.history-bar { margin-bottom: 16px; }
.history-hint { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.history-hint kbd { background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 12px; font-family: inherit; }
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-row { display: flex; align-items: center; gap: 13px; padding: 12px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.history-row.is-del { border-color: rgba(242,106,118,.35); }
.hr-ic-wrap { display: flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 9px; background: var(--surface-3); color: var(--muted); }
.history-row.is-del .hr-ic-wrap { background: rgba(242,106,118,.12); color: #f26a76; }
.hr-main { flex: 1; min-width: 0; }
.hr-label { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.hr-btn { flex: 0 0 auto; }
.history-list .muted { color: var(--muted); }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; }
.empty-state p { margin: 8px auto 0; max-width: 440px; line-height: 1.55; }

/* Auditoria da equipe (só admin) */
.audit-view { max-width: 860px; }
.audit-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.audit-flabel { color: var(--muted); font-size: 13px; }
.audit-sel, .audit-date { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 13px; }
.audit-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.audit-count { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--muted); }
.audit-count b { color: var(--text); }
.audit-list { display: flex; flex-direction: column; }
.audit-day { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 18px 0 8px; }
.audit-day:first-child { margin-top: 0; }
.audit-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.au-time { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 4px; flex: 0 0 38px; }
.au-avatar { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.au-body { flex: 1; min-width: 0; }
.au-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.au-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.au-role.admin { background: rgba(47,107,255,.16); color: var(--blue-ink); }
.au-role.cliente { background: rgba(18,184,134,.14); color: #3ddc97; }
.au-act { color: var(--text); }
.au-cli { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ===== Controle / Auditoria (painel premium) ===== */
.audit2 { max-width: 1180px; }
.aud-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.aud-kpi { flex: 1 1 156px; min-width: 148px; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; transition: border-color .15s; }
.aud-kpi.clickable { cursor: pointer; }
.aud-kpi.clickable:hover { border-color: var(--blue); }
.aud-kpi.on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.aud-kpi-ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.aud-kpi-num { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.aud-kpi-lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* Modal de elogios / reclamações do dia (texto + fotos) */
.cs-fb-card { border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.cs-fb-card.good { border-left-color: #12b886; }
.cs-fb-card.bad { border-left-color: #f26a76; }
.cs-fb-nome { font-weight: 700; font-size: 14px; }
.cs-fb-meta { font-size: 12px; color: var(--muted); margin-top: 2px; text-transform: capitalize; }
.cs-fb-txt { font-size: 13.5px; color: var(--text); margin-top: 6px; line-height: 1.5; white-space: pre-wrap; }
.cs-fb-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cs-fb-fotos img { width: 76px; height: 76px; object-fit: cover; border-radius: 9px; border: 1px solid var(--border); }
.aud-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.aud-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.aud-filter-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.aud-spring { flex: 1 1 0; min-width: 0; }
.aud-search { flex: 2 1 240px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 13px; color: var(--text); font: inherit; font-size: 13.5px; }
.aud-clear { background: none; border: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.aud-clear:hover { color: var(--text); }
.aud-pills { display: flex; gap: 8px; flex-wrap: wrap; }
/* flex:0 0 auto + nowrap: a pill não encolhe nem quebra o texto (senão virava círculo/oval feio) */
.aud-pill { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.aud-pill:hover { color: var(--text); }
.aud-pill.on { border-color: var(--blue); color: var(--blue-ink); box-shadow: inset 0 0 0 1px var(--blue); }

/* aba Contrato do cadastro */
.ct-block { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface-2); }
.ct-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.ct-del { background: none; border: none; color: var(--red); font: inherit; font-size: 13px; cursor: pointer; }
.ct-del:hover { text-decoration: underline; }
.ct-money { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.ct-money-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.ct-money-head svg { width: 16px; height: 16px; }
.ct-split { margin-top: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.ct-split-h { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.ct-split-hint { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.ct-split-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ct-split-item { flex: 1 1 140px; min-width: 130px; }
.ct-split-item label { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.ct-split-total { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--blue-ink, var(--blue)); }
/* Fases do contrato (periodicidade personalizada) */
.ct-fases { margin-top: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.ct-fase-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ct-fase-n { font-size: 12px; font-weight: 700; color: var(--muted); align-self: center; min-width: 52px; }
.ct-fase-f { display: flex; flex-direction: column; gap: 4px; }
.ct-fase-f > span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ct-fase-f input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: 13.5px; }
.ct-fase-meses { width: 74px; }
.ct-fase-resumo { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--blue-ink, var(--blue)); }
/* aba Visualização (quem vê o cliente) */
.vis-note { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.vis-q { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.vis-opt { display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.vis-opt:hover { border-color: var(--blue); }
.vis-opt input { margin-top: 3px; accent-color: var(--blue); }
.vis-opt-t { font-weight: 600; font-size: 14px; }
.vis-opt-d { font-size: 13px; color: var(--muted); margin-top: 2px; }
.vis-members { display: flex; flex-direction: column; gap: 9px; padding: 6px 4px 4px 34px; }
.vis-member { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.vis-member input { accent-color: var(--blue); }
/* Prompt do cliente (Cérebro, só admin) */
.prompt-title { display: flex; align-items: center; gap: 8px; }
.prompt-lock { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-3); padding: 3px 9px; border-radius: 999px; }
.prompt-lock svg { width: 13px; height: 13px; }
.prompt-box { width: 100%; min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; color: var(--text); resize: vertical; }
.prompt-actions { margin-top: 12px; }

/* Gravações (calendário da equipe) */
.rec-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rec-monthnav { display: flex; align-items: center; gap: 8px; }
.rec-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); gap: 8px; height: calc(100vh - 200px); min-height: 360px; }
.rec-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); text-align: center; padding-bottom: 4px; }
.rec-cell { min-height: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 4px; }
.rec-cell.empty { background: var(--surface); opacity: .35; margin: 0; max-width: none; }
.rec-cell.today { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.rec-cell-head { display: flex; align-items: center; justify-content: space-between; }
.rec-daynum { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rec-add { width: 20px; height: 20px; border: none; background: var(--surface-2); color: var(--muted); border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .1s; }
.rec-cell:hover .rec-add { opacity: 1; }
.rec-add:hover { background: var(--blue); color: #fff; }
.rec-chip { display: block; width: 100%; text-align: left; border: none; border-radius: 8px; padding: 6px 8px; cursor: pointer; background: var(--blue-soft); color: var(--text); }
/* reunião no calendário de Agendamentos: verde, pra distinguir da gravação (azul) */
/* cores do calendário: gravação = azul · reunião = roxo · confirmadas viram verde
   (gravação → verde CLARO · reunião → verde ESCURO) */
.rec-chip.reuniao { background: color-mix(in srgb, #7c5cff 16%, transparent); box-shadow: inset 3px 0 0 #7c5cff; }
.rec-chip.reuniao .rec-chip-tag { color: #7c5cff; }
.rec-chip.reuniao .ic { width: 13px; height: 13px; vertical-align: -2px; }
.rec-chip-tag { font-size: 10px; font-weight: 700; color: #12b886; text-transform: uppercase; letter-spacing: .03em; }
/* menu do "+" (escolher Gravação ou Reunião) */
.ag-choose { position: fixed; z-index: 3000; min-width: 160px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.ag-choose-it { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; padding: 9px 10px; border-radius: 8px; }
.ag-choose-it:hover { background: rgba(127,127,127,.14); }
.ag-choose-it .ic { flex: 0 0 auto; opacity: .85; }
/* dias com várias gravações: encolhe os chips pra caberem todos */
.rec-cell.dense2 { gap: 3px; }
.rec-cell.dense2 .rec-chip { padding: 4px 7px; border-radius: 7px; }
.rec-cell.dense2 .rec-chip-t { font-size: 11px; }
.rec-cell.dense3 { gap: 2px; }
.rec-cell.dense3 .rec-chip { padding: 2px 6px; border-radius: 6px; }
.rec-cell.dense3 .rec-chip-t { font-size: 10.5px; line-height: 1.2; }
.rec-cell.dense3 .rec-chip-m { display: none; }
.rec-cell.dense4 { gap: 2px; }
.rec-cell.dense4 .rec-chip { padding: 1px 6px; border-radius: 5px; }
.rec-cell.dense4 .rec-chip-t { font-size: 9.5px; line-height: 1.15; }
.rec-cell.dense4 .rec-chip-m { display: none; }
/* 5+ no mesmo dia: chips mínimos (ainda mostra todos) */
.rec-cell.dense4 .rec-daynum { font-size: 11px; }
.rec-chip:hover { filter: brightness(1.05); outline: 1px solid var(--blue); }
/* gravação CONFIRMADA = verde no calendário */
/* gravação confirmada = verde CLARO */
.rec-chip.confirmed { background: color-mix(in srgb, #3ddc97 24%, transparent); box-shadow: inset 3px 0 0 #3ddc97; }
.rec-chip.confirmed .rec-chip-t { color: #12b886; }
/* reunião confirmada = verde ESCURO (mais específico, sobrepõe as duas regras acima) */
.rec-chip.reuniao.confirmed { background: color-mix(in srgb, #0b7a5a 26%, transparent); box-shadow: inset 3px 0 0 #0b7a5a; }
.rec-chip.reuniao.confirmed .rec-chip-t { color: #0b7a5a; }
.rec-chip.reuniao.confirmed .rec-chip-tag { color: #0b7a5a; }
.rec-day-item.confirmed { border-color: rgba(18,184,134,.5); background: rgba(18,184,134,.07); }
.rec-day-item.confirmed .rec-day-t { color: var(--green); }
.rec-conf-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.rec-confirm { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 16px; border-radius: 11px; cursor: pointer; transition: all .15s; }
.rec-confirm:hover { border-color: var(--green); color: var(--green); }
.rec-confirm.on { background: var(--green); border-color: var(--green); color: #fff; }
.rec-script { min-height: 96px; resize: vertical; }
.rec-chip-t { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-chip-m { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.rec-chip-r { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-chip-ck { font-size: 10px; font-weight: 700; background: rgba(127,127,127,.2); padding: 0 5px; border-radius: 999px; color: var(--muted); margin-left: auto; flex: 0 0 auto; }
.rec-modal { width: min(620px, 96vw); }
.rec-title { font-size: 19px; font-weight: 700; }
.rec-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.rec-field { display: flex; flex-direction: column; gap: 5px; }
.rec-field.full { grid-column: 1 / -1; }
/* Quem irá gravar: várias pessoas (chips) */
.rec-multi { display: flex; flex-direction: column; gap: 6px; }
.rec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-chips:empty { display: none; }
.rec-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-soft); color: var(--blue-ink); font-size: 12.5px; font-weight: 600; padding: 4px 6px 4px 10px; border-radius: 20px; }
.rec-chip-x { background: rgba(0,0,0,.12); border: none; color: inherit; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; font-size: 10px; display: grid; place-items: center; }
.rec-chip-x:hover { background: rgba(0,0,0,.25); }
.rec-add-sel { width: 100%; }
.rec-field > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rec-field input, .rec-field select, .rec-field textarea { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text); font: inherit; font-size: 14px; width: 100%; }
.rec-field textarea { min-height: 70px; resize: vertical; }
.rec-cl-wrap { margin: 6px 0 2px; }
.rec-cl-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.rec-checklist { display: flex; flex-direction: column; gap: 6px; }
.rec-cl-row { display: flex; align-items: center; gap: 9px; }
.rec-cl-row input[type=checkbox] { accent-color: var(--blue); flex: 0 0 auto; }
.rec-cl-txt { flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 13.5px; }
.rec-cl-del { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 13px; }
.rec-cl-del:hover { color: var(--red); }
.rec-cl-add { width: 100%; background: transparent; border: 1px dashed var(--border); border-radius: 8px; padding: 7px 10px; color: var(--muted); font: inherit; font-size: 13.5px; }
.rec-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.rec-daynum { border: none; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.rec-daynum:hover { background: var(--surface-3); color: var(--text); }
.rec-daymodal { width: min(560px, 96vw); }
.rec-day-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.rec-day-empty { color: var(--muted); font-size: 13.5px; padding: 18px; text-align: center; }
.rec-day-item { display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; cursor: pointer; }
.rec-day-item:hover { border-color: var(--blue); }
.rec-day-time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue-ink); flex: 0 0 46px; }
.rec-day-t { font-weight: 600; font-size: 14px; }
.rec-day-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rec-wa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rec-wa-btn { display: inline-flex; align-items: center; gap: 8px; background: #12b886; color: #fff; border: none; border-radius: 10px; padding: 9px 15px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.rec-wa-btn:hover { filter: brightness(1.06); }
.rec-wa-btn svg { width: 16px; height: 16px; }
.rec-wa-hint { font-size: 12px; color: var(--muted); }
.team-fn { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; color: var(--text); font: inherit; font-size: 13px; width: 190px; flex: 0 0 auto; }
.team-role { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; color: var(--text); font: inherit; font-size: 13px; flex: 0 0 auto; width: auto; min-width: 150px; }

/* Diário do CS */
.cs-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cs-datetitle { font-size: 15px; font-weight: 700; min-width: 220px; text-align: center; }
.cs-clients { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cs-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 12px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.cs-card:hover { border-color: var(--blue); }
.cs-card.filled { border-left: 3px solid var(--green); }
.cs-check { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; }
.cs-check.on { background: var(--green); border-color: var(--green); }
.cs-av { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background-size: cover; background-position: center; }
.cs-card-main { flex: 1; min-width: 0; }
.cs-card-name { font-weight: 600; font-size: 14.5px; }
.cs-card-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.cs-card-mood { font-size: 22px; flex: 0 0 auto; }
/* modal do diário */
.cs-modal { width: min(640px, 96vw); }
.cs-modal-title { font-size: 19px; font-weight: 700; }
.cs-modal-date { color: var(--muted); font-size: 13px; margin: 2px 0 6px; }
.cs-sect { padding: 14px 0; border-top: 1px solid var(--border); }
.cs-sect-t { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.cs-sub-label { font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 6px; }
.cs-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.cs-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-pill { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cs-pill:hover { color: var(--text); }
.cs-pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cs-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cs-checks.hidden, .cs-cond.hidden, .cs-sect .hidden { display: none; }
.cs-checks .cs-check { width: auto; height: auto; border: none; border-radius: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text); font-weight: 400; cursor: pointer; }
.cs-checks .cs-check input { accent-color: var(--blue); }
.cs-moods { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-mood { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; cursor: pointer; min-width: 78px; }
.cs-mood:hover { border-color: var(--blue); }
.cs-mood.on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue-soft); }
.cs-mood-emo { font-size: 24px; }
.cs-mood-l { font-size: 10.5px; color: var(--muted); text-align: center; }
.cs-inp { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text); font: inherit; font-size: 14px; }
textarea.cs-inp { min-height: 64px; resize: vertical; }
.cs-cond { display: flex; flex-direction: column; }
.cs-pend { display: flex; flex-direction: column; gap: 10px; }
.cs-pend-block { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.cs-pend-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; }
.cs-pend-acts { display: flex; align-items: center; gap: 8px; }
.cs-pend-send { display: inline-flex; align-items: center; gap: 5px; background: var(--blue); color: #fff; border: none; border-radius: 8px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cs-pend-send:hover { filter: brightness(1.06); }
.cs-pend-send svg { width: 14px; height: 14px; }
.cs-cl-del { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 13px; }
.cs-cl-del:hover { color: var(--red); }
.cs-pend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cs-pf { display: flex; flex-direction: column; gap: 5px; }
.cs-pf.full { grid-column: 1 / -1; }
.cs-pf > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.cs-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.cs-modebar { margin-bottom: 16px; }
.cs-rep-block { margin-top: 20px; }
.cs-rep-t { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--faint); margin-bottom: 10px; }
.cs-moodbar { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-moodpill { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; font-size: 14px; }
.cs-rep-list { display: flex; flex-direction: column; gap: 8px; }
.cs-rep-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; }
.cs-rep-item.is-bad { border-left: 3px solid var(--red); }
.cs-rep-item.is-good { border-left: 3px solid var(--green); }
.cs-rep-tag { font-size: 12px; color: var(--muted); background: var(--surface-3); padding: 2px 9px; border-radius: 999px; }
.cs-rep-desc { font-size: 12.5px; color: var(--muted); }
.cs-rep-clients { display: flex; flex-direction: column; gap: 8px; }
.cs-rep-client { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; }
.cs-rep-client.muted-row { opacity: .7; }
.cs-rep-cname { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.cs-rep-none { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #e8890c; background: rgba(232,137,12,.14); padding: 2px 8px; border-radius: 999px; }
.cs-rep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-rep-chip { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.cs-rep-chip.bad { color: var(--red); border-color: rgba(242,106,118,.35); }
.cs-rep-chip.good { color: var(--green); border-color: rgba(18,184,134,.35); }
/* config admin do diário + extras */
.cs-headrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cs-cfg-btn { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.cs-cfg-btn svg { width: 15px; height: 15px; }
.cs-stale { font-size: 11px; font-weight: 700; color: #f26a76; background: rgba(242,106,118,.13); border-radius: 999px; padding: 3px 9px; white-space: nowrap; flex: 0 0 auto; }
.cs-cf-list, .cs-ar-list { display: flex; flex-direction: column; gap: 8px; }
.cs-cf-row { display: flex; gap: 8px; align-items: center; }
.cs-cf-row .cs-inp:first-child { flex: 1; }
.cs-cf-row select.cs-inp { flex: 0 0 130px; }
.cs-ar-row { display: flex; gap: 8px; align-items: center; }
.cs-ar-row .cs-inp { flex: 1; }
.cs-goal-default { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cs-goals { display: flex; flex-direction: column; gap: 8px; }
.cs-goal-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-goal-name { flex: 1 1 140px; font-weight: 600; font-size: 13.5px; min-width: 120px; }
.cs-goal-lbl { font-size: 12.5px; color: var(--muted); }
.cs-goal-row select.cs-inp { flex: 0 1 180px; }
.cs-custom { display: flex; flex-direction: column; gap: 12px; }
.cs-custom-item .cs-sub-label { margin: 0 0 6px; }
/* Pendências */
.pend-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pend-donechk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.pend-donechk input { accent-color: var(--blue); }
.pend-list { display: flex; flex-direction: column; gap: 8px; }
.pend-row { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 15px; }
.pend-row.done { opacity: .6; }
.pend-prio { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pend-main { flex: 1; min-width: 0; }
.pend-title { font-weight: 600; font-size: 14px; }
.pend-row.done .pend-title { text-decoration: line-through; }
.pend-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pend-done-tag { font-size: 12px; font-weight: 700; color: var(--green); flex: 0 0 auto; }
.pend-solution { margin-top: 6px; font-size: 12.5px; color: var(--text); background: rgba(18,184,134,.08); border: 1px solid rgba(18,184,134,.22); border-radius: 8px; padding: 6px 9px; line-height: 1.45; }
.pend-solution b { color: var(--green); font-weight: 700; }
.pend-sol-by { color: var(--muted); font-style: italic; }
/* modal resolver */
.pend-resolve { max-width: 460px; }
.pend-resolve h3 { margin: 0 0 4px; }
.pend-resolve-what { font-weight: 600; font-size: 15px; margin: 0 0 2px; }
.pend-resolve-meta { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }
.pend-resolve-lbl { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.pend-resolve-ta { width: 100%; box-sizing: border-box; resize: vertical; min-height: 88px; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.pend-resolve-ta:focus { outline: none; border-color: var(--blue); }
.pend-resolve-err { color: var(--rose, #e5397f); font-size: 12.5px; margin-top: 8px; }
/* painel de notificações do cliente */
.pend-notif-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.pend-notif-bell { display: inline-flex; color: var(--blue); }
.pend-notif-count { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: #f26a76; color: #3a0d12; font-size: 11px; font-weight: 800; border-radius: 10px; }
.pend-list.as-notif .pend-row { border-left: 3px solid var(--blue); }
.pend-list.as-notif .pend-row.done { border-left-color: var(--green); }
@media (max-width: 700px) { .cs-pend-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .rec-form { grid-template-columns: 1fr; } .rec-grid { gap: 4px; height: auto; } .rec-cell { min-height: 84px; } .cal-grid { height: auto; } .team-fn { width: 100%; } }
.aud-sel, .aud-date { width: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; color: var(--text); font: inherit; font-size: 13px; }
.aud-sel { flex: 1 1 170px; min-width: 150px; max-width: 230px; }
.aud-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 2px; }
.aud-segbtn { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.aud-segbtn.on { background: var(--blue); color: #fff; }
.aud-export { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.aud-export:hover { border-color: var(--blue); }
.aud-export .ic svg { width: 15px; height: 15px; }
.aud-checks { display: flex; flex-wrap: wrap; gap: 14px; }
.aud-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.aud-check input { accent-color: var(--blue); }
.aud-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.aud-view-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 2px; }
.avt-btn { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.avt-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.aud-day { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 20px 0 8px; }
.aud-day:first-child { margin-top: 0; }
.aud-card { display: flex; align-items: center; gap: 13px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; cursor: pointer; transition: border-color .12s; }
.aud-card:hover { border-color: var(--blue); }
.aud-time { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; flex: 0 0 40px; }
.aud-cat { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.aud-av { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: 0 0 auto; }
.aud-av.lg { width: 40px; height: 40px; font-size: 14px; background: var(--blue); color: #fff; }
.aud-av.sm { width: 22px; height: 22px; font-size: 10px; }
.aud-main { flex: 1; min-width: 0; }
.aud-l1 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.aud-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-3); padding: 1px 7px; border-radius: 999px; }
.aud-l2 { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-act { color: var(--text); }
.aud-open { border: none; background: transparent; color: var(--faint); cursor: pointer; padding: 6px; border-radius: 8px; flex: 0 0 auto; display: flex; }
.aud-open:hover { background: var(--surface-2); color: var(--text); }
.aud-group { margin-bottom: 22px; }
.aud-ghead { display: flex; align-items: center; gap: 12px; padding: 8px 4px 12px; }
.aud-gname { font-size: 15px; font-weight: 700; }
.aud-gsub { font-size: 12.5px; color: var(--muted); }
.aud-gcount { font-size: 18px; font-weight: 800; color: var(--blue-ink); }
.aud-gtime { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #7c5cff; background: #7c5cff14; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.aud-gtime svg { width: 13px; height: 13px; }
.aud-gmore { font-size: 12px; color: var(--muted); padding: 8px 12px; font-style: italic; }
.aud-idle { margin-top: 14px; padding: 14px 16px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 12px; }
.aud-idle-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-bottom: 10px; }
.aud-idle-list { display: flex; flex-wrap: wrap; gap: 8px; }
.aud-idle-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: 12.5px; color: var(--muted); }
.aud-drawer-ov { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; opacity: 0; transition: opacity .2s; }
.aud-drawer-ov.open { opacity: 1; }
.aud-drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.aud-drawer-ov.open .aud-drawer { transform: translateX(0); }
.adr-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.adr-ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.adr-htxt { flex: 1; min-width: 0; }
.adr-title { font-size: 15px; font-weight: 700; }
.adr-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.adr-body { padding: 8px 22px 22px; overflow-y: auto; }
.adr-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.adr-actions .btn { width: 100%; justify-content: center; }
.adr-field { padding: 13px 0; border-bottom: 1px solid var(--border); }
.adr-field:last-child { border-bottom: none; }
.adr-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-bottom: 4px; }
.adr-v { font-size: 14px; color: var(--text); word-break: break-word; }
@media (max-width: 820px) { .aud-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Confirmação de exclusão (sempre explica o que será apagado) */
.confirm-del { max-width: 450px; text-align: left; }
.confirm-del-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.confirm-del-head h3 { font-size: 18px; font-weight: 700; margin: 0; }
.confirm-del-ic { color: #f0a833; display: flex; flex: 0 0 auto; }
.confirm-del .confirm-msg { margin: 0; text-align: left; }
.confirm-note { margin-top: 12px; font-size: 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; line-height: 1.45; }
.confirm-note.danger { color: #ffb3ba; background: rgba(242,106,118,.1); border-color: rgba(242,106,118,.3); }
.confirm-del .confirm-actions { justify-content: flex-end; margin-top: 16px; }
.pin-what { color: var(--text) !important; font-weight: 600; }

/* ----------------------------- RESPONSIVO ------------------------------- */
@media (max-width: 1100px) {
  .dash-3, .dash-3b, .dash-2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; align-items: center; padding: 10px 14px; overflow-x: auto; gap: 12px; }
  .brand { padding: 0; }
  .brand-img { max-width: 128px; }
  .brand-sub { display: none; }
  /* aqui a barra é horizontal: quem rola é a .sidebar, não a .nav */
  .nav { flex-direction: row; flex: 0 1 auto; min-height: auto; overflow-y: visible; }
  .nav-context { flex-direction: row; border: none; margin: 0; padding: 0; }
  .nav-label, .active-chip, .sidebar-foot { display: none; }
  .client-form, .insight-cols, .insight-cols.two, .weeks, .rep-two { grid-template-columns: 1fr; }
  .view-root, .topbar { padding-left: 18px; padding-right: 18px; }
}

@media print {
  .sidebar, .topbar, .gen-controls, .past-gens, .post-actions, .cal-toolbar > div:last-child, .insight-head button { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .post-card, .strategy-box, .week-chip, .insight-col, .idea, .panel, .kpi { break-inside: avoid; box-shadow: none; }
}

/* ============================ CONFIGURAÇÕES ============================= */
.settings-wrap { max-width: 860px; }
.set-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 18px; }
.set-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.set-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-ink); flex-shrink: 0; }
.set-ic svg { width: 19px; height: 19px; }
.set-card-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.set-card-desc { margin: 2px 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.set-row { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border); }
.set-row:first-of-type { border-top: none; }
.set-row-info { min-width: 0; }
.set-row-info .lbl { font-weight: 600; font-size: 14px; }
.set-row-info .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.set-row-control { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }

/* segmented control (tema) */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px; }
.seg button { display: flex; align-items: center; gap: 7px; background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; transition: background .15s, color .15s; }
.seg button svg { width: 15px; height: 15px; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--blue); color: #fff; box-shadow: 0 6px 14px -8px rgba(47,107,255,.6); }

/* swatches de acento */
.swatches { display: flex; gap: 10px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; position: relative; transition: transform .1s; }
.swatch:hover { transform: scale(1.1); }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }

/* status pill */
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill.ok { color: var(--green); border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08); }
.pill.ok .dot { background: var(--green); }
.pill.warn { color: var(--amber); border-color: rgba(240,180,41,.35); background: rgba(240,180,41,.08); }
.pill.warn .dot { background: var(--amber); }

/* stats grid (sobre) */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.stat .n { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }

.about-list { list-style: none; padding: 0; margin: 0; }
.about-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.about-list li:first-child { border-top: none; }
.about-list li .k { color: var(--muted); }
.about-list li .v { font-weight: 600; text-align: right; word-break: break-word; }

/* danger zone */
.danger-zone { border-color: rgba(242,106,118,.35); }
.danger-zone .set-ic { background: var(--red-soft); color: var(--red); }
.btn-danger { background: var(--red-soft); color: var(--red); border: 1px solid rgba(242,106,118,.4); border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-danger:hover { background: var(--red); color: #fff; }

@media (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .set-row { flex-direction: column; align-items: flex-start; }
}

/* Uso & custos de IA */
.usage-period { display: flex; gap: 8px; margin-bottom: 18px; }
.usage-body { min-height: 40px; }

.usage-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
@media (max-width: 900px) { .usage-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.usage-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.usage-stat .us-n { font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: var(--text); line-height: 1.2; }
.usage-stat .us-l { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; }
.usage-stat .us-sub { font-size: 12px; color: var(--faint); margin-top: 6px; }

.usage-block-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 22px 0 10px; }

/* barra dividida: tokens vs busca web */
.usage-split-track { height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; }
.usp-tokens { height: 100%; background: var(--blue); }
.usp-search { height: 100%; background: var(--amber); }
.usage-split-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.usl-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.usl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.usl-dot.tokens { background: var(--blue); }
.usl-dot.search { background: var(--amber); }

.usage-chart { margin-top: 4px; }

.usage-highlight { display: flex; align-items: center; gap: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; }
.uh-ic { font-size: 22px; flex-shrink: 0; }
.uh-title { font-weight: 600; font-size: 13.5px; color: var(--text); }
.uh-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.uh-cost { margin-left: auto; font-size: 17px; font-weight: 700; color: var(--red); flex-shrink: 0; }

.usage-bars { display: flex; flex-direction: column; gap: 16px; }
.usage-bar-row { display: flex; flex-direction: column; gap: 5px; }
.ubr-top { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ubr-label { color: var(--ink-soft); font-weight: 600; flex: 1; min-width: 0; }
.ubr-pct { color: var(--muted); font-weight: 600; font-size: 11.5px; background: var(--surface-2); border-radius: 999px; padding: 1px 8px; flex-shrink: 0; }
.ubr-val { color: var(--text); font-weight: 700; white-space: nowrap; flex-shrink: 0; min-width: 62px; text-align: right; }
.ubr-track { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ubr-fill { height: 100%; border-radius: 999px; background: var(--blue); }
.ubr-fill.client { background: var(--purple); }
.ubr-sub { font-size: 11.5px; color: var(--faint); }

.usage-model-row { display: flex; gap: 10px; flex-wrap: wrap; }
.usage-model-chip { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; }
.usage-model-chip b { font-size: 13px; color: var(--text); }
.usage-model-chip span { font-size: 11.5px; color: var(--muted); }

/* Custo de IA no Dashboard do cliente */
.client-cost { display: flex; flex-direction: column; gap: 8px; }
.cc-cost-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cc-cost-n { font-size: 26px; font-weight: 700; letter-spacing: -.4px; color: var(--text); }
.cc-cost-l { font-size: 13px; color: var(--muted); }
.cc-cost-sub { font-size: 12.5px; color: var(--faint); }

/* ============================ PAUTAS QUENTES ============================ */
.hot-card { border: 1px solid var(--border); position: relative; overflow: hidden; }
.hot-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #f0912b, #e5397f, #9a7bf0); }
.hot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.hot-when { color: var(--faint); font-weight: 500; }
.hot-limit { background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.hot-summary { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 15px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 14px; }
.hot-summary .hs-lbl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); margin-bottom: 4px; }
.hot-count { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.hot-filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.hot-chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.hot-chip:hover { color: var(--text); border-color: var(--border-strong); }
.hot-chip.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.hot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .hot-grid { grid-template-columns: 1fr; } }
.hot-item { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: var(--radius-sm); padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; }
.hot-item.oport { background: linear-gradient(180deg, rgba(229,57,127,.05), transparent 60%); }
.hot-item-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hot-rel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; }
.hot-rel.ni { background: var(--surface-3); color: var(--muted); }
.hot-rel.op { background: rgba(229,57,127,.14); color: #e5397f; border: 1px solid rgba(229,57,127,.4); }
.hot-type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; }
.hot-where { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.ant-when { font-size: 11.5px; font-weight: 700; color: #4bb8c9; background: rgba(75,184,201,.12); border: 1px solid rgba(75,184,201,.4); border-radius: 999px; padding: 3px 10px; }
.hot-item.antecipe { background: linear-gradient(180deg, rgba(75,184,201,.05), transparent 60%); }
.hot-urg { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: auto; }
.hot-urg.hi { color: var(--red); }
.hot-urg.mid { color: var(--amber); }
.hot-foot-r { display: flex; align-items: center; gap: 8px; }
.hot-fmt { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 7px; padding: 2px 8px; }
.hot-save { background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--ink-soft); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hot-save:hover { border-color: var(--amber); color: var(--amber); }
.hot-save.on { background: rgba(240,180,41,.14); border-color: rgba(240,180,41,.5); color: var(--amber); }
.hot-item h4 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
.hot-resumo { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.hot-line { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.hot-line b { color: var(--text); }
.hot-angle { background: var(--blue-soft); border: 1px solid rgba(47,107,255,.2); border-radius: 9px; padding: 9px 12px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.hot-angle-lbl { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--blue-ink); margin-bottom: 3px; }
.hot-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.hot-srcwrap { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 66%; }
.hot-srcwrap .hot-src { max-width: none; min-width: 0; }
/* data da fonte — deixa a idade da pauta conferível de bate-pronto */
.hot-date { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.hot-src { font-size: 12px; color: var(--muted); text-decoration: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-src.muted { color: var(--faint); font-style: italic; }
a.hot-src.is-link { color: var(--blue-ink); font-weight: 600; }
a.hot-src.is-link:hover { text-decoration: underline; }
.hot-empty { text-align: center; padding: 24px 16px; }
.hot-empty .he-ic { font-size: 30px; }
.hot-empty .he-title { font-weight: 700; font-size: 15px; margin-top: 6px; }
.hot-empty .he-sub { color: var(--muted); font-size: 13px; margin: 6px 0 14px; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ============================ CORREÇÕES ================================ */
.correction-card { border-style: dashed; border-color: var(--border-strong); margin-top: 24px; }
.corr-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.corr-thanks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.corr-thanks .ct-ic { font-size: 26px; flex-shrink: 0; }
.corr-thanks .ct-title { font-weight: 700; font-size: 15.5px; color: var(--text); }
.corr-thanks .ct-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.corr-thanks .btn { margin-left: auto; }

/* ============================ LOGIN / CONTAS ============================ */
/* Aviso de disco (só admin): barra no topo quando o volume do servidor está enchendo */
.disk-warn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  font-size: 13.5px; font-weight: 600; color: #3a2a00;
  background: #ffd666; border-bottom: 1px solid #e0ab00;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,.4);
}
.disk-warn.critico { background: #ff6b6b; color: #fff; border-bottom-color: #d93636; }
.disk-warn .dw-msg { flex: 1; line-height: 1.4; }
.disk-warn .dw-x {
  background: rgba(0,0,0,.12); border: none; color: inherit; cursor: pointer;
  width: 26px; height: 26px; border-radius: 7px; font-size: 15px; line-height: 1; flex-shrink: 0;
}
.disk-warn .dw-x:hover { background: rgba(0,0,0,.22); }
body.has-disk-warn .app { padding-top: 46px; }
.auth-overlay {
  position: fixed; inset: 0; z-index: 300;
  background:
    radial-gradient(1200px 820px at 88% -12%, rgba(47,107,255,.12), transparent 58%),
    radial-gradient(1000px 760px at -12% 112%, rgba(47,107,255,.08), transparent 55%),
    #070a10;
  display: grid; place-items: center; padding: 24px;
}
.auth-box {
  background: #131824; border: 1px solid #4d5f7d; border-radius: 18px;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.75);
  padding: 38px 36px; width: min(400px, 94vw); text-align: center;
}
.auth-logo { width: 150px; height: auto; margin: 0 auto 18px; display: block; filter: brightness(2.6) saturate(1.15); }
.auth-title { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: #eef1f7; letter-spacing: -.3px; }
.auth-sub { margin: 0 0 22px; font-size: 13px; color: #99a3b5; line-height: 1.5; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form input {
  background: #182030; border: 1px solid #4d5f7d; color: #eef1f7;
  border-radius: 11px; padding: 12px 14px; font-size: 14px; font-family: inherit;
}
.auth-form input:focus { outline: none; border-color: #2f6bff; }
.auth-submit { margin-top: 6px; padding: 12px; font-size: 14.5px; }
.auth-error { background: rgba(242,106,118,.12); color: #f9b4bb; border: 1px solid rgba(242,106,118,.35); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; }
.auth-forgot { align-self: center; margin-top: 4px; background: none; border: none; color: #99a3b5; font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.auth-forgot:hover { color: #cdd5e2; }
.auth-forgot-info { margin: 2px 0 0; font-size: 12px; color: #99a3b5; line-height: 1.5; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 9px 12px; }
.auth-forgot-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; width: 100%; }
/* login em tela dividida (esquerda: marca · direita: formulário) — com a logo Every */
.auth-overlay.auth-split { display: flex; padding: 0; align-items: stretch; }
.auth-brand { flex: 1.1; display: none; align-items: center; justify-content: center; padding: 40px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #2f6bff 0%, #1c3fb0 50%, #0a1a52 100%); }
.auth-brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 420px at 82% 8%, rgba(255,255,255,.10), transparent 60%); }
.auth-brand-inner { position: relative; text-align: center; max-width: 460px; }
.auth-brand-logo { width: 260px; max-width: 72%; height: auto; filter: brightness(0) invert(1); margin: 0 auto 26px; display: block; }
.auth-brand-tag { color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.55; font-weight: 500; }
.auth-panel { flex: 1; display: grid; place-items: center; padding: 32px; }
.auth-card { width: min(400px, 94vw); text-align: center; }
.auth-card-mark { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 18px; display: block; }
@media (min-width: 900px) { .auth-brand { display: flex; } }

/* chip do usuário logado (sidebar) */
.user-chip { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; margin-bottom: 10px; }
.user-chip .uc-av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.user-chip .uc-info { flex: 1; min-width: 0; }
.user-chip .uc-name { color: var(--text); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .uc-role { color: var(--faint); font-size: 10.5px; }
.user-chip .uc-out { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 4px 9px; font-size: 11.5px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.user-chip .uc-out:hover { color: var(--red); border-color: rgba(242,106,118,.4); }
.user-chip.clickable { cursor: pointer; transition: border-color .15s, background .15s; }
.user-chip.clickable:hover { border-color: var(--border-strong); background: var(--surface-2); }
.uc-av.has-photo { background-size: cover; background-position: center; color: transparent; }

/* Modal "Minha conta" (área do membro) */
.account-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(4,7,12,.72); display: grid; place-items: center; padding: 24px; animation: wi-in .2s ease; overflow-y: auto; }
.account-box { position: relative; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 26px 28px; width: min(460px, 94vw); max-height: 90vh; overflow-y: auto; }
.acc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.acc-photo { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 22px; flex-shrink: 0; }
.acc-photo.has-photo { background-size: cover; background-position: center; color: transparent; }
.acc-title { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.2px; color: var(--text); }
.acc-role { font-size: 12.5px; color: var(--muted); margin: 2px 0 8px; }
.acc-photo-btn { display: inline-flex; }
.acc-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.acc-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 12px; }
.acc-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.acc-field span { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.acc-field input { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 10px 13px; font-size: 14px; font-family: inherit; }
.acc-field input:focus { outline: none; border-color: var(--blue); }
.acc-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.acc-foot { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px; display: flex; justify-content: flex-end; }

/* equipe (configurações) */
.team-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.team-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; }
.team-item .team-info { flex: 1 1 200px; }
.team-item .uc-av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12.5px; flex-shrink: 0; }
.team-info { flex: 1; min-width: 0; }
.team-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.team-you { color: var(--faint); font-weight: 500; font-size: 12px; }
.team-sub { font-size: 12px; color: var(--muted); }
.team-add { display: grid; grid-template-columns: repeat(4, 1fr) auto auto; gap: 8px; align-items: center; }
@media (max-width: 1000px) { .team-add { grid-template-columns: 1fr 1fr; } }
.team-pass { margin-top: 4px; }

/* indicador de tarefa em segundo plano (sobrevive à troca de aba) */
.work-indicator {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); border-radius: 999px; padding: 10px 16px 10px 13px;
  font-size: 13px; font-weight: 600; color: var(--text);
  animation: wi-in .25s ease;
}
@keyframes wi-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wi-spin {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--blue-soft); border-top-color: var(--blue);
  animation: wi-rot .7s linear infinite;
}
@keyframes wi-rot { to { transform: rotate(360deg); } }
.wi-text { white-space: nowrap; }

/* ---------------- Portal do cliente (área de aprovação) ---------------- */
.portal-screen { position: fixed; inset: 0; overflow-y: auto; background: var(--bg); z-index: 60; }
.portal-loading { max-width: 760px; margin: 80px auto; text-align: center; color: var(--muted); }
.portal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.portal-brand { display: flex; align-items: center; gap: 12px; }
.portal-logo { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; background: #fff; padding: 3px; }
.portal-logo-fallback { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-weight: 700; }
.portal-client { font-weight: 700; font-size: 16px; color: var(--text); }
.portal-agency { font-size: 12.5px; color: var(--muted); }
.portal-body { max-width: 780px; margin: 0 auto; padding: 26px 22px 80px; }
.portal-h1 { font-size: 22px; font-weight: 700; color: var(--text); margin: 4px 0 6px; }
.portal-h2 { font-size: 15px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; margin: 34px 0 12px; }
.portal-intro { color: var(--muted); margin: 0 0 22px; }
/* Seu pacote (portal) — card de crescimento, chamativo e persuasivo */
.pside-card.ppkg-card { background: linear-gradient(135deg, #2f6bff 0%, #7c5cff 100%); border: none; color: #fff; box-shadow: 0 10px 30px rgba(47,107,255,.35); }
.ppkg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ppkg-ic { display: inline-flex; color: #ffe27a; }
.ppkg-title { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; color: #fff; }
.ppkg-pitch { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.92); margin: 0 0 14px; }
.ppkg-pitch b { color: #fff; }
.ppkg-btns { display: flex; flex-direction: column; gap: 8px; }
.ppkg-cta { width: 100%; border: none; border-radius: 11px; padding: 12px 14px; background: #fff; color: #2547c4; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .12s, box-shadow .12s; }
.ppkg-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.24); }
.ppkg-alt { width: 100%; border: 1px solid rgba(255,255,255,.45); border-radius: 11px; padding: 10px 14px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ppkg-alt:hover { background: rgba(255,255,255,.16); }
.ppkg-trust { margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.75); text-align: center; }
.ppkg-card .ppkg-item { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.ppkg-card .ppkg-dot { background: #ffe27a; }
.ppkg-card .ppkg-item-t { color: #fff; }
.ppkg-card .ppkg-item-s { color: rgba(255,255,255,.8); }
.ppkg-modal { max-width: 440px; }
.ppkg-modal-sub { font-size: 13px; color: var(--muted); margin: 4px 0 12px; line-height: 1.5; }
.ppkg-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ppkg-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; background: rgba(47,107,255,.07); border: 1px solid rgba(47,107,255,.2); border-radius: 10px; }
.ppkg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-top: 5px; flex: 0 0 auto; }
.ppkg-item-t { font-size: 12.5px; font-weight: 700; }
.ppkg-item-s { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* Pedidos de orçamento (equipe, dashboard do cliente) */
.pkg-card .section-title { display: flex; align-items: center; gap: 8px; }
.pkg-ic { color: var(--green); }
.pkg-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.pkg-row:first-of-type { border-top: none; }
.pkg-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--green); background: rgba(18,184,134,.12); border: 1px solid rgba(18,184,134,.3); padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.pkg-tag.roxo { color: #7c5cff; background: rgba(124,92,255,.12); border-color: rgba(124,92,255,.35); }
.pkg-mid { flex: 1; min-width: 0; }
.pkg-msg { font-size: 13.5px; line-height: 1.5; }
.pkg-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* Materiais na barra lateral do portal (estilo Atividade recente) */
.pmat-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); }
.pmat-row:first-of-type { border-top: none; }
.pmat-row.nolink { cursor: default; }
.pmat-row-ic { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(47,107,255,.12); color: var(--blue); }
.pmat-row-body { flex: 1; min-width: 0; }
.pmat-row-label { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmat-row-note { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmat-row-open { flex: 0 0 auto; color: var(--blue); display: inline-flex; }
.pmat-row:hover .pmat-row-label { color: var(--blue); }
/* Contrato na barra lateral do portal */
.pside-ctr-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin: 8px 0 10px; }
.pside-ctr-tab { flex: 1; padding: 7px 8px; border: none; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 600; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.pside-ctr-tab:hover { color: var(--text); }
.pside-ctr-tab.on { background: var(--blue); color: #fff; }
.pside-ctr-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.pside-ctr-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pside-ctr-list li { font-size: 12.5px; line-height: 1.45; }
/* modal de aprovação GRANDE (2 colunas: mídia | conteúdo) */
.portal-approve { position: relative; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow-lg); width: min(1080px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.pa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.pa-head-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pa-close { position: static; }
.pa-grid { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
.pa-media { padding: 20px; border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.pa-media-grid { display: flex; flex-direction: column; gap: 10px; }
.pa-media-item { width: 100%; border-radius: 12px; display: block; }
.pa-file { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 13px; }
.pa-nomedia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--faint); min-height: 240px; text-align: center; }
.pa-nomedia-ic { font-size: 30px; opacity: .6; }
.pa-attach { align-self: flex-start; }
.pa-content { padding: 22px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.pa-title { font-size: 19px; font-weight: 700; margin: 0; }
.pa-slides { display: flex; flex-direction: column; gap: 8px; }
.pa-slide { display: flex; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.pa-slide-n { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.pa-slide-t { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.pa-caption { white-space: pre-wrap; font-size: 14.5px; line-height: 1.65; }
.pa-arte { white-space: pre-wrap; font-size: 15px; line-height: 1.6; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.pa-fix { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.pa-fix-note { font-size: 12.5px; color: var(--muted); }
.pa-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 0 0 auto; }
.pa-status { font-weight: 700; font-size: 14px; }
@media (max-width: 760px) {
  .pa-grid { grid-template-columns: 1fr; }
  .pa-media { border-right: none; border-bottom: 1px solid var(--border); }
}
.portal-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue);
  border-radius: 16px; padding: 18px 18px 16px; margin-bottom: 16px; }
.portal-card.done { opacity: .82; }
.portal-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.portal-month { font-size: 12px; color: var(--muted); margin-left: auto; }
.portal-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 2px 0 8px; }
.portal-files { margin-top: 12px; }
.portal-actions { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.portal-actions .btn { flex: 1; }
.portal-fix { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.portal-comment { width: 100%; min-height: 84px; }
/* aviso "mande tudo de uma vez" + contador de rodadas de ajuste */
.portal-fix-note { width: 100%; background: rgba(232,137,12,.1); border: 1px solid rgba(232,137,12,.35); border-radius: 12px; padding: 11px 13px; }
.pfn-title { font-weight: 700; color: #e8890c; font-size: 13.5px; }
.pfn-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.portal-adj-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; background: rgba(232,137,12,.1); border: 1px solid rgba(232,137,12,.35); border-radius: 12px; padding: 10px 13px; }
.pab-count { font-weight: 700; color: #e8890c; font-size: 13px; white-space: nowrap; }
.pab-txt { font-size: 12.5px; color: var(--muted); line-height: 1.4; flex: 1; min-width: 160px; }
.pcard-adj { font-size: 10.5px; font-weight: 700; color: #e8890c; background: rgba(232,137,12,.14); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.pcard-adj.maxed { color: var(--red); background: var(--red-soft); }
.pcard-top-badges { display: inline-flex; align-items: center; gap: 6px; }
.portal-adj-banner.maxed { background: var(--red-soft); border-color: rgba(229,57,127,.4); }
.portal-adj-banner.maxed .pab-count { color: var(--red); }
.portal-decision { margin-top: 14px; padding: 11px 13px; border-radius: 11px; font-weight: 600; font-size: 14px; }
.portal-decision.ok { background: var(--green-soft, #12b8861f); color: var(--green, #12b886); }
.portal-decision.fix { background: #e8890c1f; color: #e8890c; }
/* admin: gestão de acessos do cliente */
.portal-access-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.portal-access-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; }
.portal-access-form { border-top: 1px dashed var(--border-strong); padding-top: 14px; }
.paf-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 620px) { .paf-fields { grid-template-columns: 1fr; } }

/* Portal do cliente — painel de atenção, calendário mensal, lista de pendentes */
.portal-attention { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--border)); margin-bottom: 20px; }
.portal-attention.clear { background: var(--surface); border-color: var(--border); }
.portal-attention .pa-ic { font-size: 26px; line-height: 1; }
.pa-title { font-weight: 700; font-size: 16px; color: var(--text); }
.pa-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.portal-monthnav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.portal-monthnav .cal-navtitle { font-weight: 700; font-size: 16px; color: var(--text); min-width: 150px; }
.portal-monthnav .btn { margin-left: auto; }
.portal-cal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
/* Aba Agenda do portal do cliente */
/* (removido: CSS órfã da aba "Agenda" do portal — o `.pa-grid` de 7 colunas estava sobrescrevendo
   o `.pa-grid` de 2 colunas do modal de conteúdo do cliente e espremia toda a visualização.) */
/* gravação/reunião DENTRO do calendário de conteúdos do portal */
.cal-agenda { font-size: 10.5px; font-weight: 700; color: #fff; border-radius: 6px; padding: 2px 6px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-agenda.grav { background: #12b886; }
.cal-agenda.reun { background: #7c5cff; }
.portal-grid .cal-cell { cursor: default; min-height: 92px; }
.portal-chip { cursor: pointer; width: 100%; }
.portal-nodate-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 14px 0 8px; }
.portal-pend-list { display: flex; flex-direction: column; gap: 8px; }
.portal-pend-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, transform .05s; }
.portal-pend-item:hover { border-color: var(--blue); }
.portal-pend-item:active { transform: translateY(1px); }
.ppi-main { flex: 1; min-width: 0; }
.ppi-title { font-weight: 600; color: var(--text); font-size: 14.5px; }
.ppi-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ppi-go { font-size: 13px; color: var(--blue); font-weight: 600; white-space: nowrap; }
.portal-modal-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }

/* Feedback do cliente no modal interno (aprovação / pedido de ajuste vindo do portal) */
.cm-feedback { border-radius: 12px; padding: 11px 13px; margin: 10px 0 4px; font-size: 13.5px; }
.cm-feedback.fix { background: #e8890c1a; border: 1px solid #e8890c55; }
.cm-feedback.ok { background: color-mix(in srgb, var(--green) 15%, transparent); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.cm-fb-head { font-weight: 700; color: var(--text); margin-bottom: 3px; }
.cm-feedback.fix .cm-fb-head { color: #e8890c; }
.cm-fb-body { color: var(--text); line-height: 1.45; white-space: pre-wrap; }

/* Prazo + responsável nos cards (Trello / calendário) */
.kb-card-meta, .cal-post-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; }
.kb-card-meta .pm-resp, .kb-card-meta .pm-prazo,
.cal-post-meta .pm-resp, .cal-post-meta .pm-prazo { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pm-prazo.late { color: var(--red); font-weight: 700; }
.portal-head-actions { display: flex; gap: 8px; }

/* Painel "precisa da sua atenção" (dashboard da agência) */
.attn-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px;
  border-left: 4px solid var(--blue); }
.attn-card.clear { border-left-color: var(--green); }
.attn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.attn-ic { font-size: 24px; }
.attn-title { font-weight: 700; font-size: 16px; color: var(--text); }
.attn-sub { font-size: 13px; color: var(--muted); }
.attn-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.attn-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 11px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); transition: border-color .15s, transform .05s; }
.attn-chip:hover { border-color: var(--blue); }
.attn-chip:active { transform: translateY(1px); }
.attn-chip .attn-n { font-weight: 700; font-size: 17px; color: var(--text); }
.attn-chip .attn-lbl { font-size: 13px; color: var(--muted); }
.attn-chip.red .attn-n { color: var(--red); }
.attn-chip.blue .attn-n { color: var(--blue); }
.attn-chip.amber .attn-n { color: #e8890c; }
.attn-chip.green .attn-n { color: var(--green); }
.attn-list { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.attn-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; background: transparent; border: 1px solid transparent; border-radius: 10px; }
.attn-item:hover { background: var(--surface-2); border-color: var(--border); }
.attn-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.attn-dot.red { background: var(--red); } .attn-dot.blue { background: var(--blue); } .attn-dot.amber { background: #e8890c; }
.attn-item-main { flex: 1; min-width: 0; }
.attn-item-t { font-weight: 600; color: var(--text); font-size: 14px; }
.attn-item-sub { font-size: 12px; color: var(--muted); }
.attn-item-tag { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.attn-item-tag.red { color: var(--red); } .attn-item-tag.blue { color: var(--blue); } .attn-item-tag.amber { color: #e8890c; }
.attn-due { font-size: 11px; font-weight: 700; white-space: nowrap; padding: 2px 8px; border-radius: 20px; background: rgba(127,127,127,.14); color: var(--muted); }
.attn-due.amber { color: #e8890c; background: rgba(232,137,12,.14); }
.attn-due.red { color: var(--red); background: rgba(242,106,118,.15); }
/* Log de atividade no modal do conteúdo */
.activity-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.activity-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.activity-item { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.activity-who { font-weight: 700; color: var(--text); }
.activity-txt { flex: 1; }
.activity-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* NPS — card no portal do cliente */
.portal-nps { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-radius: 16px; margin-bottom: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border)); }
.portal-nps.done { background: var(--surface); border-color: var(--border); }
.portal-nps .pn-ic { font-size: 24px; }
.portal-nps .pn-main { flex: 1; }
.portal-nps .pn-title { font-weight: 700; color: var(--text); font-size: 15px; }
.portal-nps .pn-sub { font-size: 13px; color: var(--muted); }
/* NPS — modal de resposta */
.nps-box .nps-q { margin: 16px 0; }
.nps-box .nps-q > label { display: block; font-weight: 600; color: var(--text); font-size: 14px; margin-bottom: 10px; }
.nps-scale { display: flex; flex-wrap: wrap; gap: 6px; }
.nps-num { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); font-weight: 700; cursor: pointer; transition: all .12s; }
.nps-num:hover { border-color: var(--blue); }
.nps-num.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.nps-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.nps-stars { display: flex; gap: 6px; }
.nps-star { font-size: 26px; line-height: 1; background: none; border: none; cursor: pointer; color: var(--border-strong); padding: 0; }
.nps-star.on, .nps-star:hover { color: #f0b429; }
.nps-comment { width: 100%; min-height: 70px; }
/* NPS — painel no dashboard da agência */
.nps-panel { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; }
/* editor do questionário (Configurações) */
#npsConfigBox { display: flex; flex-direction: column; align-items: stretch; }
.nps-cfg-label { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 8px 0 6px; }
.nps-qlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.nps-qrow { display: flex; gap: 8px; align-items: center; }
.nps-qrow input { flex: 1; }
.nps-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.nps-panel-title { font-weight: 700; font-size: 15px; color: var(--text); }
.nps-panel-sub { font-size: 12.5px; color: var(--muted); }
.nps-metrics { display: flex; gap: 26px; flex-wrap: wrap; }
.nps-metric-v { font-size: 26px; font-weight: 700; color: var(--text); }
.nps-metric-s { font-size: 14px; font-weight: 600; color: var(--muted); }
.nps-metric-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.nps-comments { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.nps-ci-top { display: flex; gap: 8px; align-items: baseline; }
.nps-ci-score { font-weight: 700; color: var(--blue); font-size: 13px; }
.nps-ci-meta { font-size: 12px; color: var(--muted); }
.nps-ci-text { color: var(--text); font-size: 13.5px; font-style: italic; margin-top: 2px; }

/* Sugestões de conteúdo (portal + agência) */
.portal-suggest { margin-top: 8px; }
.portal-suggest-form { margin-top: 6px; }
.sug-mine-head { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px; }
.sug-list { display: flex; flex-direction: column; gap: 8px; }
.sug-item { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.sug-item.admin { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.sug-main { flex: 1; min-width: 0; }
.sug-text { color: var(--text); font-size: 14px; line-height: 1.45; }
.sug-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.sug-status { width: auto; padding: 6px 10px; }
/* Aba Satisfação do cliente */
.sat-stars { display: inline-flex; gap: 2px; }
.sat-star { color: var(--border-strong); font-size: 15px; }
.sat-star.on { color: #f0b429; }
.sat-dims { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sat-dim { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sat-dim b { color: var(--text); }
.sat-analysis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .sat-analysis { grid-template-columns: 1fr; } }
.sat-col { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.sat-col.good { border-left: 4px solid var(--green); }
.sat-col.bad { border-left: 4px solid #e8890c; }
.sat-col-h { font-weight: 700; color: var(--text); margin-bottom: 8px; }
.sat-ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; display: flex; flex-direction: column; gap: 3px; }
.sat-quotes-h { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 6px; }
.sat-quote { font-size: 13px; font-style: italic; color: var(--text); padding: 7px 10px; border-radius: 9px; margin-bottom: 5px; }
.sat-quote.pos { background: color-mix(in srgb, var(--green) 12%, transparent); }
.sat-quote.neg { background: #e8890c14; }
.sat-resp-list { display: flex; flex-direction: column; gap: 8px; }
.sat-resp { padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; border-left: 3px solid var(--muted); }
.sat-resp.pos { border-left-color: var(--green); } .sat-resp.neg { border-left-color: #e8890c; } .sat-resp.neu { border-left-color: var(--blue); }
.sat-resp-top { display: flex; gap: 10px; align-items: baseline; }
.sat-resp-score { font-weight: 700; color: var(--text); }
.sat-resp-meta { font-size: 12.5px; color: var(--muted); }
.sat-resp-cmt { font-style: italic; color: var(--text); font-size: 13.5px; margin-top: 4px; }

/* Painel do cliente (prévia do portal, visão da agência) */
.preview-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--blue) 40%, var(--border)); }
.preview-banner .pv-ic { font-size: 22px; }
.preview-banner .pv-title { font-weight: 700; color: var(--text); }
.preview-banner .pv-sub { font-size: 12.5px; color: var(--muted); }
.pv-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.pv-link:hover { text-decoration: underline; }
.portal-decision.info { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }

/* Aba Materiais */
/* ---- Materiais: abas ---- */
.mat-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.mat-tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mat-tab .ic { width: 16px; height: 16px; }
.mat-tab:hover { color: var(--text); }
.mat-tab.on { color: var(--blue); border-bottom-color: var(--blue); }

/* ---- Identidade Visual ---- */
.iv-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px 8px; box-shadow: var(--shadow); }
.iv-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.iv-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(154,123,240,.15); color: #9a7bf0; }
.iv-title { margin: 0; font-size: 17px; font-weight: 800; }
.iv-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); max-width: 640px; }
.iv-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.iv-sec { padding: 16px 0; border-top: 1px solid var(--border); }
.iv-sec:nth-child(1), .iv-sec:nth-child(2) { border-top: none; }
.iv-sec.iv-full { grid-column: 1 / -1; }
.iv-sec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.iv-sec-head h4 { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.iv-sec-dica { font-size: 11.5px; color: var(--faint); }
/* logos / moodboard */
.iv-logos { display: flex; flex-wrap: wrap; gap: 12px; }
.iv-logo { position: relative; width: 104px; display: flex; flex-direction: column; gap: 5px; }
.iv-logo-vis { position: relative; width: 104px; height: 104px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background-color: #fff; background-image: linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%); background-size: 14px 14px; background-position: 0 0,0 7px,7px -7px,-7px 0; }
.iv-logo-vis img { max-width: 88%; max-height: 88%; object-fit: contain; }
.iv-logo-file { display: flex; align-items: center; justify-content: center; color: #666; width: 100%; height: 100%; }
.iv-logo-acts { position: absolute; inset: auto 0 0 0; display: flex; gap: 4px; justify-content: center; padding: 5px; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .12s; }
.iv-logo-vis:hover .iv-logo-acts { opacity: 1; }
.iv-logo-papel { width: 104px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); font: inherit; font-size: 11px; font-weight: 600; text-align: center; padding: 0 4px; }
.iv-logo.iv-add { width: 104px; height: 104px; border: 1px dashed var(--border-strong); border-radius: 12px; cursor: pointer; align-items: center; justify-content: center; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.iv-logo.iv-add:hover { border-color: var(--blue); color: var(--blue); }
.iv-mini { border: none; background: rgba(255,255,255,.92); color: #333; font: inherit; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.iv-mini.danger { background: rgba(230,80,70,.94); color: #fff; }
/* paleta */
.iv-paleta { display: flex; flex-wrap: wrap; gap: 14px; }
.iv-cor { width: 92px; display: flex; flex-direction: column; gap: 4px; }
.iv-cor-amostra { position: relative; width: 92px; height: 80px; border-radius: 12px; border: 1px solid rgba(0,0,0,.12); cursor: pointer; padding: 0; }
.iv-cor-amostra.add { display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px dashed var(--border-strong); color: var(--muted); font-size: 24px; }
.iv-cor.iv-add:hover .iv-cor-amostra.add { border-color: var(--blue); color: var(--blue); }
.iv-cor-x { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 10px; cursor: pointer; opacity: 0; transition: opacity .12s; display: flex; align-items: center; justify-content: center; }
.iv-cor-amostra:hover .iv-cor-x { opacity: 1; }
.iv-cor-nome { width: 92px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--text); font: inherit; font-size: 11px; font-weight: 700; text-align: center; padding: 0 4px; }
.iv-cor-hex { font-size: 11px; font-weight: 800; color: var(--text); text-align: center; cursor: pointer; letter-spacing: .02em; }
.iv-cor-hex:hover { color: var(--blue); }
.iv-cor-rgb { font-size: 10px; color: var(--faint); text-align: center; }
.iv-cor-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* tipografia */
.iv-tipos { display: flex; flex-direction: column; gap: 10px; }
.iv-tipo { display: flex; gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--card); }
.iv-tipo-prev { flex: 0 0 130px; font-size: 26px; font-weight: 700; line-height: 1; color: var(--text); overflow: hidden; white-space: nowrap; }
.iv-tipo-campos { flex: 1; display: flex; gap: 8px; min-width: 0; }
.iv-tipo-nome, .iv-tipo-uso { height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; min-width: 0; }
.iv-tipo-nome { flex: 1.2; font-weight: 700; }
.iv-tipo-uso { flex: 1; }
/* pode / não pode */
.iv-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.iv-col-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }
.iv-col-h.sim { color: #12b886; }
.iv-col-h.nao { color: #e5533d; }
.iv-checks { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.iv-check { display: flex; align-items: center; gap: 8px; width: 100%; }
.iv-check-ic { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.iv-check.sim .iv-check-ic { background: rgba(18,184,134,.15); color: #12b886; }
.iv-check.nao .iv-check-ic { background: rgba(229,83,61,.15); color: #e5533d; }
.iv-check-inp { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; }
/* diretrizes / arquivos / add */
.iv-addrow { align-self: flex-start; border: 1px dashed var(--border-strong); background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 9px; cursor: pointer; position: relative; overflow: hidden; }
.iv-addrow.sm { padding: 6px 10px; font-size: 12px; }
.iv-addrow:hover { border-color: var(--blue); color: var(--blue); }
.iv-addrow input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.iv-dir { width: 100%; min-height: 92px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; padding: 11px 13px; resize: vertical; line-height: 1.5; }
.iv-arqs { display: flex; flex-direction: column; gap: 7px; }
.iv-arq { display: flex; align-items: center; gap: 8px; }
.iv-arq-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; overflow: hidden; }
.iv-arq-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-arq-link:hover { color: var(--blue); }
@media (max-width: 760px) { .iv-body { grid-template-columns: 1fr; } .iv-sec:nth-child(2) { border-top: 1px solid var(--border); } .iv-dois { grid-template-columns: 1fr; } }
/* ---- Materiais (grid premium) ---- */
.mat-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.mat-addform { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow); }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(282px, 1fr)); gap: 14px; }
.mat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; min-height: 120px; transition: border-color .12s, box-shadow .12s, transform .08s; }
.mat-card.clickable { cursor: pointer; }
.mat-card.clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.mat-card-top { display: flex; align-items: center; gap: 12px; }
.mat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.mat-card-id { min-width: 0; flex: 1; }
.mat-card-label { font-weight: 700; color: var(--text); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-card-note { font-size: 13px; color: var(--muted); line-height: 1.45; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mat-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 2px; }
.mat-open { font-size: 13px; font-weight: 600; color: var(--blue-ink); }
.mat-actions { display: flex; gap: 4px; }
.mat-act { background: none; border: none; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 9px; border-radius: 7px; }
.mat-act:hover { background: var(--surface-2); color: var(--text); }
.mat-act.danger:hover { background: var(--red-soft); color: var(--red); }
.mat-empty { grid-column: 1 / -1; text-align: center; padding: 46px 20px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mat-empty-ic { font-size: 34px; }
.mat-empty-t { font-weight: 700; color: var(--text); font-size: 16px; }
.mat-empty-s { color: var(--muted); font-size: 13.5px; max-width: 360px; margin-bottom: 6px; }
.mat-form { display: flex; flex-direction: column; gap: 10px; }
.mat-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.mat-presets-lbl { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.mat-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mat-preset { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 13px; cursor: pointer; }
.mat-preset:hover { border-color: var(--blue); color: var(--blue-ink); }

/* Tela de boas-vindas do cliente (1º acesso) */
.welcome-box { text-align: center; max-width: 520px; }
.welcome-emoji { font-size: 40px; margin-bottom: 6px; }
.welcome-title { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.welcome-sub { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.welcome-field { display: flex; flex-direction: column; gap: 6px; text-align: left; max-width: 300px; margin: 0 auto 6px; }
.welcome-field > span { font-size: 13px; color: var(--muted); }
.welcome-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

/* Portal do cliente — filtros por situação */
.portal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13px; transition: all .12s; }
.pf-chip:hover { border-color: var(--blue); }
.pf-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pf-chip.on .pf-n { background: rgba(255,255,255,.25); color: #fff; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pf-n { font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center; }
/* Portal responsivo (celular) */
@media (max-width: 640px) {
  .portal-head { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .portal-body { padding: 18px 14px 70px; }
  .portal-cal-card { padding: 8px; overflow-x: auto; }
  .portal-grid { min-width: 520px; }
  .portal-monthnav { flex-wrap: wrap; }
  .portal-attention { flex-wrap: wrap; }
  .portal-attention .btn { width: 100%; }
  .post-modal-box { padding: 18px 16px; }
}

/* Confirmação estilizada (sem confirm() nativo) */
.confirm-box { max-width: 400px; text-align: center; }
.confirm-msg { font-size: 15px; color: var(--text); margin: 6px 0 18px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }

/* Logo clicável → página inicial */
.brand-clickable { cursor: pointer; }
.brand-clickable:hover { opacity: .85; }

/* ===== Portal do cliente — visão em CARDS (estilo aprovação) ===== */
.portal-body.wide { max-width: 1180px; }
.portal-sub2 { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.portal-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.portal-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pt-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: -1px; }
.pt-tab:hover { color: var(--text); }
.pt-tab.on { color: var(--blue); border-bottom-color: var(--blue); }
.pt-n { font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 1px 8px; }
.pt-tab.on .pt-n { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); }
.portal-view-toggle { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; }
.pv-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pv-btn:hover { color: var(--text); }
.pv-btn.on { background: var(--blue); color: #fff; box-shadow: 0 4px 12px -6px rgba(47,107,255,.5); }
.pv-btn .ic { margin-right: 0; }
.pv-btn .ic svg { width: 15px; height: 15px; }
.portal-main { display: grid; grid-template-columns: 1fr 290px; gap: 22px; align-items: start; }
.portal-content-col { min-width: 0; }
.portal-empty { text-align: center; color: var(--muted); padding: 50px 20px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 16px; }
.portal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.pcard-click { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
.pcard-click:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; }
.pcard-fmt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pcard-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.pcard-preview { height: 150px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.pcard-preview.placeholder { padding: 16px; }
.pcard-preview-txt { color: #fff; font-weight: 700; font-size: 17px; line-height: 1.25; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.pcard-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 12px 14px 4px; }
.pcard-desc { font-size: 13px; color: var(--muted); margin: 0 14px 10px; line-height: 1.45; }
.pcard-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); margin: auto 14px 12px; }
.pcard-time { white-space: nowrap; }
.pcard-actions { display: flex; gap: 7px; padding: 0 14px 14px; }
.pcard-btn { flex: 1; padding: 9px 8px; border-radius: 10px; border: none; font-size: 13px; font-weight: 700; cursor: pointer; }
.pcard-btn.approve { background: var(--green); color: #06231a; }
.pcard-btn.approve:hover { filter: brightness(1.06); }
.pcard-btn.reject { background: transparent; border: 1px solid var(--red-soft); color: var(--red); flex: 1; }
.pcard-btn.reject:hover { background: var(--red-soft); }
.pcard-btn.icon { flex: 0 0 auto; background: var(--surface-2); }
.pcard-btn.ghost { background: var(--surface-2); color: var(--text); }
/* Atividades (barra lateral do portal) */
.portal-activity { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; position: sticky; top: 16px; }
.pact-head { font-weight: 700; color: var(--text); margin-bottom: 12px; }
.pact-empty { color: var(--muted); font-size: 13px; }
.pact-item { display: flex; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 4px; border-radius: 8px; }
.pact-item:hover { background: var(--surface-2); }
.pact-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--muted); }
.pact-dot.ok { background: var(--green); } .pact-dot.fix { background: #e8890c; } .pact-dot.new { background: var(--blue); } .pact-dot.pub { background: #7c5cff; }
.pact-main { min-width: 0; flex: 1; }
.pact-txt { font-size: 13px; color: var(--text); line-height: 1.4; }
.pact-time { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 820px) { .portal-main { grid-template-columns: 1fr; } .portal-activity, .pside { position: static; } }

/* KPIs do portal (estilo painel) */
.portal-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.pkpi { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.pkpi-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.pkpi-body { min-width: 0; }
.pkpi-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pkpi-num { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -.5px; margin: 1px 0; }
.pkpi-sub { font-size: 11.5px; font-weight: 600; }
/* telas menores: 3+2 (sem card órfão sozinho); bem pequenas: empilha */
@media (max-width: 1150px) { .portal-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .portal-kpis { grid-template-columns: 1fr; } }

/* Barra lateral do portal (Aprovações pendentes + Atividade recente) */
.pside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.pside-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.pside-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.pside-title { font-weight: 700; color: var(--text); font-size: 14.5px; }
.pside-count { background: var(--red); color: #fff; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; }
.pside-empty { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 13px; padding: 4px 2px; }
.pside-empty-ic { font-size: 22px; line-height: 1; }
.pside-empty b { color: var(--text); }
.pside-empty-sub { margin-top: 3px; line-height: 1.45; }
.papp-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 6px; border-radius: 11px; }
.papp-item:hover { background: var(--surface-2); }
.papp-item + .papp-item { border-top: 1px solid var(--border); }
.papp-thumb { width: 42px; height: 42px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.papp-thumb.ph { display: grid; place-items: center; }
.papp-body { min-width: 0; flex: 1; }
.papp-title { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.papp-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.papp-tag { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.pside-all { width: 100%; margin-top: 10px; padding: 9px; border: none; border-radius: 10px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.pside-all:hover { filter: brightness(1.06); }
.pact-dot.stat { background: #7c5cff; } .pact-dot.edit { background: var(--muted); } .pact-dot.file { background: var(--blue); }
.pact-txt i { font-style: normal; font-weight: 600; }

/* ===== Home da agência (aba Clientes) — estilo painel ===== */
.chome-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.chome-toolbar .search { flex: 1 1 240px; min-width: 200px; max-width: 420px; }
.chome-sort { width: auto; flex: 0 0 auto; min-width: 170px; padding: 10px 12px; }
.chome-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
@media (max-width: 1040px) { .chome-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chome-kpis { grid-template-columns: 1fr; } }
.chome-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; margin-bottom: 16px; }
/* tudo numa linha só: não quebra; se faltar espaço, rola na horizontal */
.chome-tabs { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 2px; scrollbar-width: thin; }
.chome-tabs::-webkit-scrollbar { height: 6px; }
.chome-tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.chome-vtoggle { flex: 0 0 auto; }
.chome-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.chome-tab:hover { border-color: var(--border-strong); }
.chome-tab.on { border-color: var(--blue); color: var(--blue-ink); background: var(--blue-soft); }
.chome-tab-n { font-size: 11.5px; font-weight: 700; background: var(--surface-3); color: var(--muted); border-radius: 999px; padding: 1px 8px; }
.chome-tab.on .chome-tab-n { background: var(--blue); color: #fff; }
.chome-vtoggle { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.chome-vbtn { width: 32px; height: 30px; border: none; background: none; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 15px; }
.chome-vbtn.on { background: var(--blue-soft); color: var(--blue-ink); }
.chome-main { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.chome-list-col { min-width: 0; }
.chome-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.chome-empty { text-align: center; color: var(--muted); padding: 48px 20px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 16px; }
.crow-list { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.crow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 70px 70px 116px auto auto 14px; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 14px 16px; }
.crow + .crow { border-top: 1px solid var(--border); }
.crow:hover { background: var(--surface-2); }
.crow-av { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px; background-size: cover; background-position: center; }
.crow-id { flex: 1; min-width: 0; }
.crow-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crow-name { font-weight: 700; color: var(--text); font-size: 15px; }
.crow-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.crow-tag.green { color: var(--green); background: rgba(61,220,151,.14); }
.crow-tag.amber { color: #e8890c; background: rgba(232,137,12,.14); }
.crow-tag.muted { color: var(--muted); background: var(--surface-3); }
.crow-niche { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.crow-plats { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.crow-plat { font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--surface-3); border-radius: 999px; padding: 2px 8px; }
.crow-metric { text-align: center; flex-shrink: 0; min-width: 74px; }
.crow-metric b { display: block; color: var(--text); font-size: 15px; font-weight: 700; }
.crow-metric span { font-size: 11px; color: var(--muted); }
.crow-status { justify-self: center; text-align: center; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.crow-status.green { color: var(--green); background: rgba(61,220,151,.13); }
.crow-status.blue { color: var(--blue-ink); background: var(--blue-soft); }
.crow-status.amber { color: #e8890c; background: rgba(232,137,12,.13); }
.crow-status.red { color: var(--red); background: var(--red-soft); }
.crow-status.muted { color: var(--muted); background: var(--surface-3); }
.crow-chevron { color: var(--faint); font-size: 20px; flex-shrink: 0; }
@media (max-width: 940px) { .chome-main { grid-template-columns: 1fr; } .chome-side { position: static; } }

/* ===== Panorama geral (planilha) ===== */
.pano-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.pano-kpi { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.pano-kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue-ink); flex-shrink: 0; }
.pano-kpi-num { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.4px; line-height: 1.1; }
.pano-kpi-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
@media (max-width: 900px) { .pano-kpis { grid-template-columns: repeat(2, 1fr); } }
.pano-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.pano-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; background: var(--surface); }
.pano-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.pano-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.pano-table tbody tr:last-child td { border-bottom: none; }
.pano-row { cursor: pointer; transition: background .1s; }
.pano-row:hover td { background: var(--surface-2); }
.pano-cli { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pano-av { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; background-size: cover; background-position: center; }
.pano-num { text-align: right; font-variant-numeric: tabular-nums; }
.pano-muted { color: var(--muted); }
.pano-hot { font-weight: 800; }
.pano-hot.blue { color: var(--blue-ink); }
.pano-hot.red { color: var(--red); }
.pano-zero { color: var(--faint); }
.pano-empty { text-align: center; color: var(--muted); padding: 48px 20px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 14px; }
/* na planilha, as tags de status ficam inline */
.pano-table .crow-status { font-size: 11px; padding: 3px 9px; }
/* grade clientes × meses (entrega) */
.pano-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.pano-yearnav { display: flex; align-items: center; gap: 6px; }
.pano-year { font-weight: 700; font-size: 16px; min-width: 64px; text-align: center; color: var(--text); }
.pano-legend { display: flex; gap: 16px; font-size: 12px; flex-wrap: wrap; }
.pl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.pl::before { content: ""; width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.pl.ok::before { background: var(--green); } .pl.warn::before { background: #e8890c; } .pl.bad::before { background: var(--red); }
.pl.done::before { background: #38bdf8; }
.pl.cli-done::before { background: #38bdf8; }
/* quadro Credenciados (topo do Panorama) */
.cred-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 6px 10px; margin-bottom: 18px; }
.cred-card.open { padding: 6px 18px 16px; }
.cred-headbtn { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: transparent; color: var(--text); font: inherit; padding: 10px 8px; border-radius: 10px; cursor: pointer; text-align: left; }
.cred-headbtn:hover { background: rgba(127,127,127,.07); }
.cred-title-t { font-size: 15px; font-weight: 700; }
.cred-summary { font-size: 12px; color: var(--muted); margin-left: 4px; }
.cred-chev { color: var(--faint); font-size: 12px; flex: 0 0 auto; }
.cred-ic { color: var(--blue); }
.cred-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; line-height: 1.5; }
.cred-live-ic { color: var(--green); vertical-align: -2px; margin-right: 4px; }
/* o botão de salvar É o estado: some o texto solto que ficava ao lado */
.cred-save { flex: 0 0 auto; height: 32px; min-width: 84px; white-space: nowrap; }
.cred-save.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.cred-save:disabled { cursor: default; opacity: 1; }
.cred-body { display: flex; flex-direction: column; }
/* teto de altura: com a agência cheia, a lista aberta não pode empurrar o resto da página
   pra fora da tela. Ela rola por dentro do card. */
.cred-lista { display: flex; flex-direction: column; max-height: 44vh; overflow-y: auto; }
.cred-busca { box-sizing: border-box; width: 100%; height: 34px; margin: 0 0 8px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.cred-busca:focus { outline: none; border-color: var(--blue); }
.cred-mais { align-self: flex-start; margin: 8px 0 2px; background: none; border: none; padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cred-mais:hover { color: var(--blue); }
.cred-grupo { position: sticky; top: 0; z-index: 1; background: var(--card); border-top: 1px solid var(--border); padding: 8px 12px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); }
/* no macOS a barra de rolagem some sozinha e a lista parecia ter só as primeiras linhas.
   Aqui ela fica sempre à vista quando há mais gente embaixo. */
.cred-lista::-webkit-scrollbar { width: 10px; }
.cred-lista::-webkit-scrollbar-track { background: transparent; }
.cred-lista::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.cred-lista::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
/* Todas as linhas com a MESMA geometria. Antes, a linha de quem estava logado tinha padding,
   borda e avatar maiores, e um campo de 38px onde os outros tinham texto de 19px — por isso os
   tamanhos saíam desiguais. Quem é você muda de COR, não de tamanho. */
.cred-linha { border-top: 1px solid var(--border); }
.cred-linha:first-child { border-top: none; }
.cred-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.cred-row.me { background: rgba(47,107,255,.06); }
.cred-when { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; background: var(--surface); border: 1px solid var(--border); padding: 3px 9px; border-radius: 20px; }
.cred-when.off { opacity: .4; border-color: transparent; background: transparent; }
.cred-row-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cred-row-edit { display: flex; gap: 8px; align-items: center; }
/* campo e texto com a MESMA altura: é o que mantinha as linhas desalinhadas */
.cred-input { flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 32px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.cred-input:focus { outline: none; border-color: var(--blue); }
.cred-av { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12.5px; }
.cred-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cred-youtag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--blue); background: rgba(47,107,255,.14); padding: 1px 7px; border-radius: 20px; }
.cred-fn { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 1px 8px; border-radius: 20px; }
.cred-dem { display: flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--text); line-height: 1.45; }
/* ".empty" global (linha ~806) é a tela-vazia de página inteira: margin 8vh auto + centralizado.
   Ela pegava esta linha sem ninguém pedir e empurrava o texto 54px pra baixo — era ISSO que
   deixava as linhas com alturas diferentes. Aqui a regra local tem que vencer. */
.cred-dem.empty { color: var(--faint); font-style: italic; margin: 0; max-width: none; text-align: left; }
/* histórico de 72h */
.cred-hist-btn { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; cursor: pointer; }
.cred-hist-btn:hover { border-color: var(--blue); color: var(--blue); }
.cred-hist-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cred-hist-btn svg { width: 13px; height: 13px; }
.cred-hist { margin: 0 12px 10px 60px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.cred-hist-top { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cred-hist-load, .cred-hist-vazio { font-size: 12px; color: var(--faint); font-style: italic; }
.cred-hist-row { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: 12.5px; }
/* a bolinha marca a demanda ATUAL; as anteriores ficam apagadas */
.cred-hist-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--border-strong); margin-top: 6px; }
.cred-hist-dot.agora { background: #12b886; }
.cred-hist-a { flex: 1; min-width: 0; line-height: 1.45; }
.cred-hist-a i { color: var(--muted); font-style: normal; }
.cred-hist-n { font-size: 11px; font-weight: 800; color: var(--blue); background: var(--blue-soft); border-radius: 20px; padding: 1px 6px; }
.cred-hist-q { font-size: 11px; color: var(--faint); white-space: nowrap; }
/* painel de credenciados no Controle (só admin) */
.cred-ctrl { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin: 0 0 18px; }
.cred-ctrl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cred-ctrl-toggle { cursor: pointer; align-items: center; flex-wrap: nowrap; user-select: none; margin-bottom: 0; }
.cred-ctrl-toggle:hover .cred-ctrl-title { color: var(--blue); }
.cred-ctrl-chev { color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.cred-ctrl.collapsed { padding-bottom: 8px; }
.cred-ctrl-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin: 0; }
.cred-ctrl-sub { font-size: 12px; color: var(--muted); }
.cred-ctrl-body { display: flex; flex-direction: column; }
.cred-ctrl-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--border); }
.cred-ctrl-row:first-child { border-top: none; }
.cred-ctrl-mid { flex: 1; min-width: 0; }
.cred-ctrl-when { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; background: var(--surface); border: 1px solid var(--border); padding: 3px 10px; border-radius: 20px; }
.cred-ctrl-row.idle { opacity: .55; }
.cred-ctrl-refresh { align-self: flex-start; margin-top: 12px; }
/* aba Contrato: escopo + manual */
.ct-extra { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ct-extra-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; }
/* painel Contrato & manual na área do cliente (em abas) */
.cc-title-ic { color: var(--blue); }
.cc-card .section-title { display: flex; align-items: center; gap: 8px; }
.cc-tabbar { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; margin: 8px 0 16px; flex-wrap: wrap; }
.cc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: none; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; border-radius: 9px; cursor: pointer; }
.cc-tab:hover { color: var(--text); }
.cc-tab.on { background: var(--blue); color: #fff; }
.cc-tab-ic { display: inline-flex; }
.cc-actions { display: flex; align-items: center; margin-bottom: 12px; }
.cc-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.cc-list li { font-size: 13.5px; line-height: 1.55; }
.cc-empty { font-size: 13px; color: var(--faint); font-style: italic; margin: 0; }
.cc-ta { width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.55; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.cc-ta:focus { outline: none; border-color: var(--blue); }
.pano-grid td, .pano-grid th { border-right: 1px solid var(--border); }
.pano-grid td:last-child, .pano-grid th:last-child { border-right: none; }
.pano-cell { text-align: center; font-weight: 600; font-size: 12.5px; }
.pano-cell.ok { background: rgba(61,220,151,.14); color: var(--green); }
.pano-cell.warn { background: rgba(232,137,12,.16); color: #e8890c; }
.pano-cell.bad { background: var(--red-soft); color: var(--red); }
.pano-sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 2; box-shadow: 1px 0 0 var(--border); }
.pano-table th.pano-sticky-col { z-index: 3; background: var(--surface-2); }
.pano-row:hover .pano-sticky-col { background: var(--surface-2); }
/* Panorama editável (abas + planilha da equipe) */
.pano-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.pano-tab { background: none; border: 1px solid transparent; border-bottom: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 10px 10px 0 0; cursor: pointer; margin-bottom: -1px; }
.pano-tab:hover { color: var(--text); }
.pano-tab.on { background: var(--surface); border-color: var(--border); color: var(--blue-ink); }
.pano-tab.add { color: var(--muted); font-size: 17px; padding: 7px 13px; }
.pano-sheetbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.pano-sheetname { width: auto; min-width: 180px; max-width: 300px; font-weight: 700; font-size: 15px; }
.pano-edit td { padding: 0; }
.pano-edit th { padding: 10px 12px; }
.pano-inp { width: 100%; min-width: 96px; border: none; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; padding: 9px 11px; }
.pano-sticky-col .pano-inp { min-width: 150px; }
.pano-inp:focus { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--surface); }
.pano-inp.mo { text-align: center; font-weight: 600; }
.pano-inp.mo.ok { background: rgba(61,220,151,.14); color: var(--green); }
.pano-inp.mo.warn { background: rgba(232,137,12,.16); color: #e8890c; }
.pano-inp.mo.bad { background: var(--red-soft); color: var(--red); }
.pano-delcol { width: 36px; text-align: center; }
.pano-delrow { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 13px; padding: 6px; border-radius: 6px; }
.pano-delrow:hover { color: var(--red); background: var(--red-soft); }
/* célula de mês = contador com − e + */
.pano-edit td.pano-num { padding: 4px 5px; }
.pano-step { display: flex; align-items: center; justify-content: space-between; gap: 1px; min-width: 0; height: 32px; border-radius: 8px; padding: 0 2px; background: var(--surface-2); border: 1px solid var(--border); }
.pano-step.ok { background: rgba(18,184,134,.14); border-color: rgba(18,184,134,.4); }
.pano-step.warn { background: rgba(232,137,12,.14); border-color: rgba(232,137,12,.4); }
.pano-step.bad { background: rgba(242,106,118,.14); border-color: rgba(242,106,118,.45); }
.pano-step.done { background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.55); }
.pano-stepnum { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 20px; text-align: center; color: var(--faint); }
.pano-step.ok .pano-stepnum { color: var(--green); }
.pano-step.warn .pano-stepnum { color: #e8890c; }
.pano-step.bad .pano-stepnum { color: var(--red); }
/* célula 2 em 1: feito (verde) / faltam (editável) */
.pano-vals { display: inline-flex; align-items: center; gap: 2px; min-width: 0; justify-content: center; font-size: 12px; }
/* o número FEITO acompanha o status (não fica verde fixo): vermelho → âmbar → azul */
.pano-feito { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 14px; text-align: right; }
.pano-step.bad .pano-feito { color: #f26a76; }
.pano-step.warn .pano-feito { color: #e8890c; }
.pano-step.done .pano-feito { color: #38bdf8; }
.pano-sep { color: var(--faint); font-size: 12px; }
.pano-step.done .pano-metaedit { color: #38bdf8; }
.pano-stepbtn { width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: var(--muted); font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 auto; }
.pano-stepbtn:hover { background: rgba(127,127,127,.18); color: var(--text); }
.pano-stepbtn.off { opacity: .28; cursor: default; }
.pano-stepbtn.off:hover { background: transparent; color: var(--muted); }
.pano-foot td { border-top: 2px solid var(--border); padding-top: 8px; }
.pano-foot .pano-sticky-col { font-weight: 700; font-size: 12.5px; color: var(--muted); }
.pano-foot-num { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green); }
/* v2: cliente vinculado, definir quantos, editor de meta */
.pano-cli { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 3px 4px; border-radius: 8px; }
.pano-cli:hover { background: rgba(127,127,127,.1); }
.pano-cli-av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 11px; }
.pano-cli-av.sm { width: 26px; height: 26px; font-size: 11px; }
.pano-cli-av.has-logo { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* cabeçalho do mês vira botão (abre menu: duplicar coluna anterior / limpar) */
.pano-mes-btn { border: none; background: none; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.pano-mes-btn:hover { background: rgba(127,127,127,.14); color: var(--blue); }
/* mês recolhido: coluna fininha, nome do mês na vertical (clicar abre) */
.pano-col-fechada { padding: 0 !important; text-align: center; background: rgba(127,127,127,.05); }
.pano-mes-btn.fechada { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 2px; font-size: 11px; color: var(--muted); }
.pano-mes-btn.fechada:hover { color: var(--blue); }
.pano-foot-num.mini { font-size: 11px; }
.pano-fechada-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.pano-fechada-dot.done { background: #2f6bff; }
.pano-fechada-dot.warn { background: #f0b429; }
.pano-fechada-dot.bad { background: #e5533d; }
.pano-colmenu { position: fixed; z-index: 3000; min-width: 230px; background: var(--card, #fff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.pano-colmenu-it { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; padding: 9px 10px; border-radius: 8px; }
.pano-colmenu-it:hover { background: rgba(127,127,127,.12); }
.pano-colmenu-it .ic { flex: 0 0 auto; opacity: .8; }
.pano-colmenu-it.danger { color: var(--red); }
.pano-colmenu-it.danger:hover { background: var(--red-soft); }
.pano-colmenu-note { padding: 8px 10px; font-size: 12px; color: var(--faint); }
.pano-cli-nm { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pano-cli-link { color: var(--blue); font-weight: 600; }
.pano-cli.free { cursor: default; }
.pano-freename { flex: 1; min-width: 0; height: 30px; border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 0 6px; border-radius: 7px; }
.pano-freename:hover { border-color: var(--border); }
.pano-freename:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.pano-linkbtn { flex: 0 0 auto; border: none; background: transparent; color: var(--blue); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 5px; opacity: 0; }
.pano-cli.free:hover .pano-linkbtn { opacity: 1; }
.pano-linkbtn:hover { background: rgba(47,107,255,.1); }
.pano-cli.done { background: rgba(56,189,248,.12); }
.pano-cli-done { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #38bdf8; background: rgba(56,189,248,.16); padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.pano-edit tr.pano-row-done .pano-sticky-col { box-shadow: inset 3px 0 0 #38bdf8; }
.pano-addcli { height: 34px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; padding: 0 10px; cursor: pointer; }
.pano-addcli:hover { border-color: var(--blue); }
.pano-addcli:disabled { opacity: .55; cursor: default; }
.pano-emptyrow { padding: 22px 8px; color: var(--muted); font-size: 13px; text-align: center; }
.pano-add { width: 100%; min-width: 100px; height: 34px; border: 1px dashed var(--border); background: transparent; border-radius: 8px; color: var(--faint); font-size: 15px; cursor: pointer; }
.pano-add:hover { border-color: var(--blue); color: var(--blue); background: rgba(47,107,255,.06); }
.pano-metaedit { background: transparent; border: none; color: var(--faint); font: inherit; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0 3px; border-radius: 4px; }
.pano-metaedit:hover { color: var(--text); background: rgba(127,127,127,.18); }
.pano-metabox { display: flex; align-items: center; gap: 4px; min-width: 100px; height: 34px; justify-content: center; }
.pano-metainp { width: 46px; height: 30px; text-align: center; border: 1px solid var(--blue); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; }
.pano-metainp:focus { outline: none; }
.pano-metaok { width: 28px; height: 30px; border: none; border-radius: 7px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.pano-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; margin: 8px 0; }
.pano-picker-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.pano-picker-item:hover { border-color: var(--blue); }
.pano-picker-item.on { border-color: var(--blue); background: rgba(47,107,255,.1); }
/* botão de histórico inline (em tudo que é editável) */
.hist-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); border-radius: 10px; padding: 8px 13px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hist-btn:hover { color: var(--text); border-color: var(--blue); }
.hist-btn .ic svg, .hist-btn svg { width: 15px; height: 15px; }
/* modal de histórico de um item */
.hist-modal { max-width: 470px; width: 100%; }
.hist-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.hist-modal-head h3 { font-size: 18px; font-weight: 700; margin: 0; }
.hist-close { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.hist-modal-sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; line-height: 1.45; }
.hist-modal .history-list { max-height: 52vh; overflow-y: auto; }
@media (max-width: 620px) { .crow { display: flex; } .crow-metric { display: none; } .crow-plats { display: none; } }

/* Chip do cliente ativo = trocador rápido de cliente */
.active-chip { position: relative; }
.active-chip.ac-clickable { cursor: pointer; transition: border-color .15s; }
.active-chip.ac-clickable:hover { border-color: var(--blue); }
.active-chip .ac-txt { flex: 1; min-width: 0; }
.active-chip .ac-chevron { color: var(--muted); font-size: 15px; flex-shrink: 0; }
.client-switch-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; max-height: 360px; overflow-y: auto; }
.csp-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 8px 8px; }
.csp-list { display: flex; flex-direction: column; gap: 2px; }
.csp-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px; border-radius: 9px; }
.csp-item:hover { background: var(--surface-2); }
.csp-item.on { background: color-mix(in srgb, var(--blue) 12%, transparent); }
.csp-av { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.csp-txt { flex: 1; min-width: 0; }
.csp-name { color: var(--text); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csp-niche { color: var(--muted); font-size: 11px; }
.csp-check { color: var(--blue); font-weight: 700; }
.csp-all { width: 100%; text-align: left; margin-top: 6px; padding: 9px 8px; border: none; border-top: 1px solid var(--border); background: none; color: var(--blue); font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 0 0 9px 9px; }
.csp-all:hover { background: var(--surface-2); }

/* Portal — botão de tema + WhatsApp flutuante do CS */
.portal-theme-btn { font-size: 15px; }
.portal-wa { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; gap: 8px;
  background: #25d366; color: #fff; text-decoration: none; padding: 12px 16px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(37,211,102,.4); font-weight: 700; font-size: 14px; }
.portal-wa:hover { filter: brightness(1.05); transform: translateY(-1px); transition: all .15s; }
.portal-wa .pwa-ic { font-size: 18px; }
@media (max-width: 640px) { .portal-wa .pwa-txt { display: none; } .portal-wa { padding: 14px; } }

/* grade mensal: chip mostra o título (o formato fica na cor/tooltip) */
.cal-cell .cal-post-fmt { display: none; }

/* ===== INÍCIO (central de operações) ===== */
.ini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ini-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--ini, var(--blue)); border-radius: 14px; padding: 16px 18px; }
.ini-card.click { cursor: pointer; } .ini-card.click:hover { border-color: var(--ini); }
.ini-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.ini-ic { color: var(--ini); display: inline-flex; }
.ini-title { font-weight: 700; font-size: 14px; flex: 1; }
.ini-n { min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 800; }
.ini-n.has { background: var(--ini); color: #fff; }
.ini-item { padding: 7px 0; border-top: 1px solid var(--border); cursor: pointer; }
.ini-item:hover .ini-item-t { color: var(--blue); }
.ini-item-t { font-size: 13px; font-weight: 600; }
.ini-item-s { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.ini-empty { font-size: 12.5px; color: var(--faint); padding: 8px 0; }
.ini-more { font-size: 11.5px; color: var(--muted); padding-top: 6px; }
.ini-quick { display: flex; gap: 10px; margin-top: 18px; }
.ini-accept { margin-top: 6px; }
.ini-aceita { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 800; color: var(--green); }
.ini-aguarda { display: inline-block; margin-top: 4px; font-size: 11.5px; color: var(--faint); }
.ini-donuts { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-end; margin: 16px 0 26px; }
.ini-donut { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 100px; }
.ini-donut-l { font-size: 14px; font-weight: 700; margin-top: 6px; max-width: 160px; text-align: center; }
.ini-donut-s { font-size: 12px; color: var(--muted); }
.ini-donut.big .ini-donut-l { font-size: 15px; }
.ini-donut-s.ok { color: #38bdf8; font-weight: 700; }
.rec-aceita { font-size: 13px; font-weight: 800; color: var(--green); }
.attn-accept { flex: 0 0 auto; display: inline-flex; align-items: center; margin-right: 4px; }
.attn-accept-btn { font-size: 11.5px; padding: 5px 10px; }

/* ===== EQUIPE & FINANCEIRO ===== */
.sec-pills { margin-bottom: 16px; }
.prio-badge { font-weight: 700; }
.churn-chip.verde { color: var(--green); border-color: rgba(18,184,134,.4); }
.churn-chip.amarelo { color: #e8890c; border-color: rgba(232,137,12,.4); }
.churn-chip.vermelho { color: var(--red); border-color: rgba(242,106,118,.5); }
.clics-date { flex: 0 0 74px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.staff-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.staff-mid { flex: 1; min-width: 0; }
.staff-inativo { font-size: 11px; font-weight: 700; color: #f26a76; background: color-mix(in srgb, #f26a76 12%, transparent); border: 1px solid color-mix(in srgb, #f26a76 40%, transparent); padding: 1px 9px; border-radius: 20px; margin-left: 6px; }
.staff-desativar { color: #f26a76 !important; border-color: color-mix(in srgb, #f26a76 45%, transparent) !important; }
.portal-access-item2 { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.portal-access-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-access-item2 .sess-box { margin-top: 10px; padding-top: 10px; }
.sess-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.sess-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sess-head b { font-size: 13px; }
.sess-list { display: flex; flex-direction: column; gap: 6px; }
.sess-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.sess-dev { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sess-now { font-size: 10.5px; font-weight: 700; color: #12b886; background: color-mix(in srgb, #12b886 12%, transparent); padding: 1px 7px; border-radius: 20px; }
.sess-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.link-danger { background: none; border: none; color: #f26a76; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.staff-account-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.staff-account-actions .hint { flex: 1; min-width: 180px; margin: 0; }
.rp-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.staff-prod { font-size: 12px; color: var(--muted); }
/* --------------------------- TERMOS DE USO E ACEITE ---------------------- */
/* Pop-up por cima do sistema desfocado (estilo dos avisos de rede social). O sistema aparece
   atrás só como contexto: a camada cobre a tela inteira, então nenhum clique chega nele — e o
   servidor recusa tudo de qualquer forma enquanto não houver aceite. */
.termos-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(7px) saturate(.8); -webkit-backdrop-filter: blur(7px) saturate(.8); overflow-y: auto; }
.termos-box { width: 100%; max-width: 720px; position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 30px 30px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.termos-ic { font-size: 40px; line-height: 1; text-align: center; }
.termos-title { margin: 10px 0 6px; text-align: center; font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
.termos-sub { margin: 0 auto 12px; max-width: 520px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.termos-versao { text-align: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); margin-bottom: 14px; }
.termos-scroll { max-height: 42vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; background: var(--surface); }
.termos-scroll::-webkit-scrollbar { width: 10px; }
.termos-scroll::-webkit-scrollbar-track { background: transparent; }
.termos-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
.termos-h { margin: 18px 0 7px; font-size: 13.5px; font-weight: 800; color: var(--text); }
.termos-h:first-child { margin-top: 0; }
.termos-p { margin: 0 0 8px; font-size: 13px; line-height: 1.62; color: var(--muted); }
.termos-ul { margin: 0 0 10px; padding-left: 20px; }
.termos-ul li { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 3px; }
.termos-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-size: 13.5px; line-height: 1.5; }
.termos-check:hover { border-color: var(--blue); }
.termos-check input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer; }
.termos-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.termos-btn { flex: 1; height: 44px; font-size: 15px; }
.termos-btn:disabled { opacity: .5; cursor: not-allowed; }
.termos-rodape { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--faint); text-align: center; }
/* quadro de assinatura */
.assin-wrap { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.assin-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.assin-tit { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--text); }
.assin-limpar { background: none; border: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.assin-limpar:hover { color: var(--blue); text-decoration: underline; }
.assin-corpo { display: block; }
.assin-painel { position: relative; height: 170px; padding: 14px 22px 0; }
.assin-canvas { display: block; width: 100%; height: 118px; touch-action: none; cursor: crosshair; background: transparent; }
.assin-linha { position: absolute; left: 22px; right: 22px; bottom: 34px; border-bottom: 1.5px solid var(--border); }
.assin-dica { position: absolute; left: 22px; bottom: 12px; font-size: 11px; color: var(--faint); }
/* a assinatura é gravada em traço preto: num fundo escuro ela sumiria */
.termos-assin { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.termos-assin-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #6b7280; }
.termos-assin-img { display: block; max-width: 320px; width: 100%; height: auto; margin: 4px 0; }
.termos-assin-n { font-size: 11.5px; color: #6b7280; border-top: 1px solid #e5e7eb; padding-top: 5px; }

/* painel de auditoria (Configurações) */
.termos-resumo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.termos-pend-tag { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.termos-resumo.pend .termos-pend-tag { background: color-mix(in srgb, #e8890c 13%, transparent); color: #e8890c; border-color: color-mix(in srgb, #e8890c 40%, transparent); }
.termos-lista { display: flex; flex-direction: column; }
.termos-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 4px; border-top: 1px solid var(--border); }
.termos-linha:first-child { border-top: none; }
.termos-mid { flex: 1; min-width: 0; }
.termos-status { font-size: 12px; font-weight: 700; color: #e8890c; white-space: nowrap; }
.termos-status.ok { color: var(--green); }
.termos-reg { flex: 1 0 100%; margin: 4px 0 0 48px; }
.termos-reg > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.termos-reg-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 18px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.termos-reg-l { display: flex; gap: 8px; font-size: 12px; min-width: 0; }
.termos-reg-k { flex: 0 0 44%; color: var(--faint); }
.termos-reg-v { flex: 1; min-width: 0; color: var(--text); word-break: break-word; }

/* ------------------------------ ANIVERSÁRIOS ---------------------------- */
.aniv-box { max-width: 520px; }
.aniv-title { margin: 0 0 2px; font-size: 18px; font-weight: 800; }
.aniv-lista { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; }
.aniv-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border); }
.aniv-item:first-child { border-top: none; }
.aniv-item.click { cursor: pointer; border-radius: 10px; }
.aniv-item.click:hover { background: var(--surface); }
.aniv-item.hoje { background: color-mix(in srgb, #e8890c 9%, transparent); border-radius: 10px; }
.aniv-mid { flex: 1; min-width: 0; }
.aniv-nome { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cred-fn.aniv-cli { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 40%, transparent); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.aniv-quando { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.aniv-quando.hoje { color: #e8890c; }

.staff-del { flex: 0 0 auto; font-weight: 600; opacity: .75; }
.staff-del:hover { opacity: 1; text-decoration: underline; }
/* freela tem selo próprio pra ela bater o olho e saber de quem é a ficha curta */
.cred-fn.freela { color: var(--orange, #e8890c); border-color: color-mix(in srgb, #e8890c 40%, transparent); background: color-mix(in srgb, #e8890c 12%, transparent); }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.staff-sec { border-top: 1px solid var(--border); padding: 8px 0; }
.staff-sec > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); list-style: none; }
.staff-sec > summary::before { content: "▸ "; color: var(--faint); font-size: 10px; }
.staff-sec[open] > summary::before { content: "▾ "; }
.staff-sec.ok > summary { color: var(--green); }
.staff-list { padding: 8px 0 2px; }
.staff-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.staff-item-t { flex: 1; }
.staff-add { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
/* contratos & documentos da pessoa */
.staff-file { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.staff-file:last-child { border-bottom: none; }
.sfile-ic { display: flex; color: var(--muted); flex: none; }
.sfile-ic svg { width: 16px; height: 16px; }
.sfile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.sfile-name:hover { text-decoration: underline; }
.sfile-meta { flex: none; font-size: 11px; color: var(--faint); white-space: nowrap; }
/* clipe pra anexar arquivo direto num registro (Avaliações, Certificações, PDI...) */
.staff-clip { flex: none; display: flex; align-items: center; gap: 3px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; padding: 2px 6px; cursor: pointer; font-size: 11px; font-weight: 700; }
.staff-clip:hover { border-color: var(--blue); color: var(--blue); }
.staff-clip svg { width: 13px; height: 13px; }
.staff-item-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 6px 62px; }
.sfile-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 5px 2px 9px; font-size: 11px; }
.sfile-chip a { color: var(--blue-ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfile-chip a:hover { text-decoration: underline; }
.sfile-chip-x { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 11px; line-height: 1; padding: 2px; }
.sfile-chip-x:hover { color: var(--red); }
.onb-topbar { display: flex; gap: 10px; margin-bottom: 16px; }
.onb-head { display: flex; align-items: center; gap: 12px; }
.onb-pct { font-weight: 800; font-size: 18px; color: var(--blue-ink); }
.onb-bar-track { height: 8px; border-radius: 6px; background: var(--surface-2); margin: 12px 0; overflow: hidden; }
.onb-bar-track.big { height: 14px; }
.onb-bar-fill { height: 100%; border-radius: 6px; background: var(--blue); transition: width .3s; }
.onb-bar-fill.done { background: var(--green); }
.onb-step { display: flex; align-items: center; gap: 9px; padding: 5px 0 5px 6px; font-size: 13px; cursor: pointer; }
.onb-step input { width: auto; }
.fin-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 720px) { .fin-kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin-kpi { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--fk, var(--blue)); border-radius: 13px; padding: 13px 14px; min-width: 0; }
.fin-kpi-body { min-width: 0; flex: 1; }
/* ícone em quadrado tingido com a cor do indicador — dá o que é sem precisar ler o rótulo */
.fin-kpi-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--fk, var(--blue)); background: color-mix(in srgb, var(--fk, var(--blue)) 12%, transparent); }
.fin-kpi-ic svg { width: 17px; height: 17px; }
.fin-kpi-v { overflow-wrap: anywhere; }
.fin-kpi-l { font-size: 12px; color: var(--muted); font-weight: 600; }
.fin-kpi-v { font-size: 21px; font-weight: 800; margin-top: 2px; overflow-wrap: anywhere; }
.fin-kpi-s { font-size: 11.5px; color: var(--faint); margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere; }
.fin-saldo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.fin-saldo-l { font-size: 13px; color: var(--muted); font-weight: 600; }
.fin-saldo-inp { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.fin-saldo-inp input { width: 140px; }
.fin-aging-h { font-size: 13px; font-weight: 700; margin: 16px 0 10px; }
.fin-aging { margin-bottom: 10px; }
.fin-aging-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.fin-aging-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.fin-aging-fill { height: 100%; border-radius: 4px; }
.fin-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.fin-prev { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.fin-aviso-x { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; }
.fin-aviso-x:hover { border-color: var(--red); color: var(--red); }
/* Aba Gravações (relatórios) no Status do cliente */
.grav-rel-list { display: flex; flex-direction: column; gap: 8px; }
.grav-rel-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.grav-rel-item:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.grav-rel-item.done { border-left: 3px solid var(--green); }
.grav-rel-date { flex: 0 0 auto; font-weight: 800; color: var(--muted); font-size: 13px; min-width: 44px; }
.grav-rel-main { flex: 1; min-width: 0; }
.grav-rel-t { font-weight: 700; font-size: 14.5px; }
.grav-rel-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.grav-rel-tag { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; }
.grav-rel-ok { color: var(--green); }
.grav-rel-pend { color: var(--muted); }
.grav-rel-pend.late { color: #e8890c; }

/* ===== Modais de AGENDAMENTO (gravação / reunião) — layout em cards ===== */
.sched-box { max-width: 640px; width: 100%; }
.sched-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.sched-head-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; background: var(--blue-soft); color: var(--blue-ink); display: flex; align-items: center; justify-content: center; }
.sched-head-ic .ic, .sched-head-ic svg { width: 24px; height: 24px; }
.sched-head-tt { flex: 1; min-width: 0; }
.sched-head-tt h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.sched-head-tt p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.sched-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 15px; cursor: pointer; }
.sched-close:hover { border-color: var(--border-strong); color: var(--text); }
.sched-field { display: block; margin-bottom: 14px; }
.sched-field > span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.sched-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* controle com ícone à esquerda; funciona pra input, select e o date picker custom */
.sched-inp { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 0 12px; transition: border-color .12s, box-shadow .12s; }
.sched-inp:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.sched-inp > .ic, .sched-inp > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--faint); }
.sched-inp > input, .sched-inp > select, .sched-inp > textarea, .sched-inp > .datebr, .sched-inp > .datebr input {
  border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  flex: 1; min-width: 0; padding: 11px 0; font-size: 14.5px; color: var(--text); width: 100%; }
.sched-inp > select { cursor: pointer; appearance: none; -webkit-appearance: none; }
.sched-inp.area { align-items: flex-start; }
.sched-inp.area > textarea { padding: 11px 0; resize: vertical; min-height: 76px; }
.sched-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 14px; }
.sched-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--surface); }
.sched-card-t { font-size: 13.5px; font-weight: 700; margin-bottom: 12px; }
.sched-status { display: flex; align-items: center; gap: 8px; }
.sched-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.sched-pill.ok { color: #0f9d63; background: rgba(18,184,134,.13); }
.sched-pill.off { color: var(--muted); background: var(--surface-3, var(--bg)); }
.sched-status-sub { font-size: 12px; color: var(--muted); margin-top: 8px; }
.sched-notif { display: flex; align-items: flex-start; gap: 10px; }
.sched-notif-tx { font-size: 13px; }
.sched-notif-tx i { display: block; font-style: normal; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
/* toggle (switch) */
.sched-switch { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; border: none; background: var(--surface-3, #d6dbe6); cursor: pointer; position: relative; transition: background .15s; padding: 0; }
.sched-switch.on { background: var(--blue); }
.sched-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sched-switch.on::after { left: 21px; }
/* card CTA (ata / relatório) */
.sched-cta { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--surface); margin-bottom: 4px; }
.sched-cta-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-ink); display: flex; align-items: center; justify-content: center; }
.sched-cta-tx { flex: 1; min-width: 0; }
.sched-cta-tx b { font-size: 14.5px; }
.sched-cta-tx p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.sched-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.sched-foot .sched-foot-sp { flex: 1; }
.sched-del { background: none; border: none; color: #f26a76; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sched-del:hover { text-decoration: underline; }
@media (max-width: 560px) { .sched-2col, .sched-row { grid-template-columns: 1fr; } }

/* ===== Relatório da gravação (rico) ===== */
.rr-box { max-width: 860px; }
.rr-head { position: sticky; top: -22px; background: var(--surface); z-index: 3; padding-top: 4px; margin: -4px 0 16px; }
.rr-head-btns { display: flex; gap: 8px; }
.rr-exec { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.rr-tile-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.rr-tile-h .ic { width: 15px; height: 15px; }
.rr-tile-main b { font-size: 19px; font-weight: 800; }
.rr-tile-main i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rr-tile-times { display: flex; gap: 6px; }
.rr-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; background: var(--surface); }
.rr-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rr-card-h h4 { margin: 0; font-size: 15px; font-weight: 800; }
.rr-card-h .ic { color: var(--blue-ink); }
.rr-grid4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rr-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rr-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.rr-checks { display: flex; flex-direction: column; gap: 9px; }
.rr-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.rr-check input { width: 17px; height: 17px; accent-color: var(--blue); }
.rr-qtd { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.rr-qtd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.rr-qtd-row:last-child { border-bottom: none; }
.rr-qtd-total { background: var(--bg); font-weight: 800; }
.rr-qtd-inp { width: 62px; text-align: right; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13.5px; }
.rr-qual-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.rr-stars { display: inline-flex; gap: 3px; }
.rr-star { background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--border-strong); padding: 0; transition: color .1s; }
.rr-star.on { color: #f5b301; }
.rr-radios { display: flex; flex-direction: column; gap: 9px; }
.rr-radio { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.rr-radio input { width: 17px; height: 17px; accent-color: var(--blue); }
.rr-hint { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
@media (max-width: 720px) { .rr-exec { grid-template-columns: 1fr 1fr; } .rr-grid4, .rr-2col { grid-template-columns: 1fr; } }
.fin-pays { display: flex; flex-direction: column; margin-top: 6px; }
.fin-pay { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.fin-pay-cli { font-weight: 600; }
.fin-pay-st { font-weight: 700; font-size: 12px; text-transform: uppercase; }
/* ---- Panorama anual (aba Ano do Financeiro) ---- */
.ano-chart { display: flex; align-items: flex-end; gap: 6px; padding: 14px 0 2px; overflow-x: auto; }
.ano-col { flex: 1 1 0; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ano-col.vazio { opacity: .45; }
.ano-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 130px; width: 100%; }
.ano-bar { width: 12px; border-radius: 4px 4px 0 0; min-height: 0; transition: height .2s; }
.ano-bar.rec { background: #12b886; }
.ano-bar.des { background: #f26a76; }
.ano-col-l { font-size: 11px; font-weight: 700; color: var(--muted); }
.ano-col-r { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.ano-col-r.pos { color: #12b886; }
.ano-col-r.neg { color: #f26a76; }
.ano-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.ano-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ano-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.ano-dot.rec { background: #12b886; }
.ano-dot.des { background: #f26a76; }
.ano-table .ano-clic { cursor: pointer; }
.ano-table .ano-clic:hover { background: var(--bg); }
.ano-table .ano-row-vazia td { color: var(--faint); }
.ano-table .ano-pos { color: #12b886; font-weight: 700; }
.ano-table .ano-neg { color: #f26a76; font-weight: 700; }
.ano-table .ano-total td { border-top: 2px solid var(--border); border-bottom: none; background: var(--bg); }

/* ---- Análise financeira da IA ---- */
.ia-quando { font-size: 11.5px; color: var(--faint); }
.ia-saude { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--sc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); }
.ia-saude-tag { flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--sc); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.ia-diag { margin: 0; font-size: 13.5px; line-height: 1.55; }
.ia-item { padding: 11px 0; border-bottom: 1px solid var(--border); }
.ia-item:last-child { border-bottom: none; }
.ia-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ia-item-top b { font-size: 13.5px; }
.ia-item p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ia-grav, .ia-esf { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--faint); white-space: nowrap; }
.ia-item.risco.g-alta .ia-grav { color: #f26a76; }
.ia-item.risco.g-media .ia-grav { color: #e8890c; }
.ia-como { display: flex; gap: 8px; margin-top: 7px; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
.ia-como-l { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; color: var(--blue); padding-top: 2px; }
.ia-falta { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* aviso honesto: sem receita lançada a tela mostraria só zeros */
.plan-aviso { background: rgba(232,137,12,.1); border: 1px solid rgba(232,137,12,.3); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--text); margin-bottom: 14px; line-height: 1.5; }
.plan-aviso a { color: var(--blue); font-weight: 700; }

/* ---- Bloco do mês: dois cartões (faturamentos x custos) com total em fundo tingido ---- */
.bm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bm-col { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.bm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 18px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; }
.bm-head-v { color: var(--faint); font-weight: 700; }
.bm-in .bm-head-t { color: #12b886; }
.bm-out .bm-head-t { color: #f26a76; }
.bm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; font-size: 13.5px; border-top: 1px solid var(--border); }
.bm-l { color: var(--text); }
.bm-v { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; font-weight: 700; font-size: 14.5px; }
.bm-v i { display: block; font-size: 10.5px; font-weight: 500; font-style: normal; color: var(--faint); margin-top: 2px; }
/* o total fecha o cartão com um fundo tingido de leve — destaque sem virar parede */
.bm-tot .bm-l { font-weight: 700; }
.bm-in .bm-tot { background: rgba(18,184,134,.08); }
.bm-out .bm-tot { background: rgba(242,106,118,.08); }
.bm-in .bm-tot .bm-l, .bm-in .bm-tot .bm-v, .bm-in .bm-tot .bm-v i { color: #0d8f68; }
.bm-out .bm-tot .bm-l, .bm-out .bm-tot .bm-v, .bm-out .bm-tot .bm-v i { color: #d4485a; }
.bm-tot .bm-v i { opacity: .85; }
.bm-baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 640px) { .bm-grid, .bm-baixo { grid-template-columns: 1fr; } }

/* linha das abas + baixar planilha (o botão serve pra qualquer aba, então vive ao lado delas).
   As abas ficam num container só, com divisórias — leem como UM controle, não como 8 botões. */
.fin-topline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-topline .sec-pills { margin-bottom: 0; flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 5px; gap: 0; }
.fin-topline .sec-pills .aud-pill { border: none; background: none; border-radius: 999px; box-shadow: none; position: relative; }
.fin-topline .sec-pills .aud-pill + .aud-pill::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 15px; width: 1px; background: var(--border); }
.fin-topline .sec-pills .aud-pill.on { background: var(--blue); color: #fff; }
.fin-topline .sec-pills .aud-pill.on::before, .fin-topline .sec-pills .aud-pill.on + .aud-pill::before { display: none; }
.fin-export-btn { flex: none; white-space: nowrap; border-radius: 999px; }
/* o mês ganha o ícone de calendário: diz que dá pra navegar */
.fin-month-ic { display: inline-flex; vertical-align: -3px; margin-right: 8px; color: var(--muted); }
.fin-month-ic svg { width: 16px; height: 16px; }
/* baixar planilha: atalhos + calendário */
.exp-atalhos { display: flex; flex-wrap: wrap; gap: 7px; }
.exp-atalho { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.exp-atalho:hover { border-color: var(--blue); color: var(--blue); }
.exp-atalho.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.exp-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.exp-resumo { margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--blue); }
@media (max-width: 520px) { .exp-datas { grid-template-columns: 1fr; } }

/* escolher a cor de fundo da página */
.bgpick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bgpick-extra { display: flex; align-items: center; gap: 8px; }
.bg-custom { width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 9px; background: none; cursor: pointer; }
.bg-custom::-webkit-color-swatch-wrapper { padding: 3px; }
.bg-custom::-webkit-color-swatch { border: none; border-radius: 6px; }

/* seletor compacto pra dentro de cabeçalho — troca pílulas que comiam uma linha inteira */
.mini-sel { height: 30px; padding: 0 26px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; width: auto; min-width: 0; }
.mini-sel:hover { border-color: var(--blue); color: var(--blue); }

/* ---- Planejamento: a cascata em barras (o tamanho de cada coisa se lê de longe) ---- */
.casc2 { padding: 9px 0; }
.casc2-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 5px; }
.casc2-l { font-size: 13.5px; color: var(--text); }
.casc2-l i { display: block; font-size: 11px; color: var(--faint); font-style: normal; margin-top: 1px; }
.casc2-v { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.casc2-track { height: 9px; border-radius: 5px; background: var(--surface-3, var(--bg)); overflow: hidden; }
.casc2-fill { height: 100%; border-radius: 5px; transition: width .25s; }
/* entrada verde, saída vermelha, subtotal azul — a cor diz o que é sem precisar ler */
.casc2-in .casc2-v { color: #12b886; font-weight: 800; }
.casc2-in .casc2-fill { background: #12b886; }
.casc2-out { padding-left: 14px; }
.casc2-out .casc2-l { color: var(--muted); }
.casc2-out .casc2-v { color: #f26a76; }
.casc2-out .casc2-fill { background: #f26a76; opacity: .75; }
.casc2-sub { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 4px 0; }
.casc2-sub .casc2-l, .casc2-sub .casc2-v { font-weight: 800; }
.casc2-sub .casc2-fill { background: var(--blue); }
.casc2-sub .casc2-v.neg { color: #f26a76; }
.casc2-sub .casc2-fill.neg { background: #f26a76; }
/* o número que importa */
.casc2-fim { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(18,184,134,.12), rgba(18,184,134,.04)); border: 1px solid rgba(18,184,134,.3); }
.casc2-fim.neg { background: linear-gradient(135deg, rgba(242,106,118,.12), rgba(242,106,118,.04)); border-color: rgba(242,106,118,.3); }
.casc2-fim-l { font-size: 15px; font-weight: 800; }
.casc2-fim-s { display: block; font-size: 11.5px; color: var(--muted); font-style: normal; margin-top: 2px; }
.casc2-fim-v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: #12b886; white-space: nowrap; }
.casc2-fim.neg .casc2-fim-v { color: #f26a76; }
@media (max-width: 620px) { .casc2-fim-v { font-size: 20px; } }

/* ===== "Como o mês fecha" — barra de composição + demonstrativo limpo ===== */
.fecha-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.fecha-topo-l { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.fecha-topo-v { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: #12b886; white-space: nowrap; }
.fecha-bar { display: flex; height: 20px; border-radius: 8px; overflow: hidden; background: var(--bg); }
.fecha-seg { height: 100%; transition: width .3s; min-width: 2px; }
.fecha-seg + .fecha-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.5); }
.fecha-leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 4px; }
.fecha-leg-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.fecha-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fecha-leg-t { color: var(--muted); }
.fecha-leg-item b { font-variant-numeric: tabular-nums; }
.fecha-leg-item i { color: var(--faint); font-style: normal; font-size: 11.5px; }
.fecha-dem { margin-top: 14px; border-top: 1px solid var(--border); }
.fecha-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.fecha-row-l { font-size: 13.5px; color: var(--text); }
.fecha-row-l i { display: block; font-size: 11px; color: var(--faint); font-style: normal; margin-top: 1px; }
.fecha-row-v { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.fecha-row-v.neg { color: #f26a76; }
.fecha-in .fecha-row-v { color: #12b886; font-weight: 800; }
.fecha-out { padding-left: 16px; }
.fecha-out .fecha-row-l span { color: var(--muted); }
.fecha-tot { background: var(--bg); border-radius: 10px; padding: 11px 12px; margin: 6px 0; border-bottom: none; }
.fecha-tot .fecha-row-l span, .fecha-tot .fecha-row-v { font-weight: 800; }
.fecha-fim { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(18,184,134,.12), rgba(18,184,134,.04)); border: 1px solid rgba(18,184,134,.3); }
.fecha-fim.neg { background: linear-gradient(135deg, rgba(242,106,118,.12), rgba(242,106,118,.04)); border-color: rgba(242,106,118,.3); }
.fecha-fim-l { font-size: 15px; font-weight: 800; }
.fecha-fim-s { display: block; font-size: 11.5px; color: var(--muted); font-style: normal; margin-top: 2px; }
.fecha-fim-v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: #12b886; white-space: nowrap; }
.fecha-fim.neg .fecha-fim-v { color: #f26a76; }
@media (max-width: 620px) { .fecha-fim-v { font-size: 20px; } .fecha-topo-v { font-size: 20px; } }
/* provisões */
.prov-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.prov-nome { flex: 1; min-width: 0; font-weight: 700; }
.prov-obs { display: block; font-size: 11px; color: var(--faint); font-style: normal; font-weight: 400; }
.prov-regra { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.prov-val { min-width: 96px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prov-total { display: flex; justify-content: space-between; padding: 10px 0 0; margin-top: 4px; border-top: 2px solid var(--border); font-size: 13.5px; }
/* meta e plano de ação */
.meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.meta-diag { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #e8890c; }
.meta-diag.ok { color: #12b886; }
.pa-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; }
.pa-txt { flex: 1; min-width: 0; }
.pa-txt.feito { text-decoration: line-through; color: var(--faint); }

/* contas a pagar (usa a data de vencimento) */
.venc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.venc-row:last-child { border-bottom: none; }
.venc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.venc-dot.late { background: #f26a76; }
.venc-dot.soon { background: #e8890c; }
.venc-dot.ok { background: #12b886; }
.venc-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venc-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.venc-when.late { color: #f26a76; font-weight: 700; }

.fin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fin-table th { text-align: left; color: var(--muted); font-size: 11.5px; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.fin-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.fin-pay-val { font-weight: 700; }
@media (max-width: 760px) { .fin-two { grid-template-columns: 1fr; } }
/* Financeiro robusto — navegação de mês, DRE, despesas e custos de equipe */
.fin-monthnav { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.fin-mnav-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fin-mnav-btn:hover { border-color: var(--blue); color: var(--blue); }
.fin-month-label { font-size: 18px; font-weight: 800; letter-spacing: -.3px; min-width: 150px; text-align: center; }
.fin-body { margin-top: 4px; }
.dre-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 14px; border-top: 1px solid var(--border); }
.dre-line:first-of-type { border-top: none; }
.dre-line.in b { color: #12b886; }
.dre-line.out b { color: #f26a76; }
.dre-line.profit { font-size: 16px; } .dre-line.profit b { color: #2f6bff; font-size: 20px; }
.dre-line.loss { font-size: 16px; } .dre-line.loss b { color: #f26a76; font-size: 20px; }
.dre-sep { height: 2px; background: var(--border-strong); margin: 2px 0; border-radius: 2px; }
.exp-add { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: 8px; align-items: center; margin-top: 12px; }
@media (max-width: 820px) { .exp-add { grid-template-columns: 1fr 1fr; } }
.exp-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.exp-rec input { width: auto; }
.exp-cat { font-size: 12px; color: var(--muted); }
.exp-tag { display: inline-block; margin-left: 7px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--blue-ink); background: rgba(47,107,255,.12); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
/* pizza (gastos por categoria) */
.pie-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 14px; }
.pie-svg { flex: 0 0 auto; }
.pie-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.pie-leg-item { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.pie-leg-item:first-child { border-top: none; }
.pie-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.pie-leg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-leg-item b { font-variant-numeric: tabular-nums; }
.pie-leg-pct { color: var(--muted); font-size: 12px; min-width: 38px; text-align: right; }
.exp-catrow { padding: 9px 0; border-top: 1px solid var(--border); }
.exp-catrow:first-of-type { border-top: none; }
.exp-catrow-top { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 6px; }
.staffcost-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.staffcost-row:first-of-type { border-top: none; }
.staffcost-mid { min-width: 0; }
.staffcost-total { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--border-strong); font-size: 14px; }
.staffcost-total b { font-size: 16px; }
/* Financeiro — cabeçalho de seção com botão, lançamentos ricos e modal Nova Entrada/Saída */
.fin-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fin-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* Equipamentos (patrimônio + depreciação) */
/* busca com lupa (listas do financeiro) */
.fin-search { position: relative; max-width: 420px; margin: 12px 0 2px; }
.fin-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--muted); pointer-events: none; }
.fin-search-ic svg { width: 17px; height: 17px; }
.fin-search input { width: 100%; padding: 10px 12px 10px 38px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 14px; font-family: inherit; }
.fin-search input:focus { outline: none; border-color: var(--blue); }
.equip-list { display: flex; flex-direction: column; margin-top: 12px; }
.equip-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--border); }
.equip-row:first-child { border-top: none; }
.equip-row.off { opacity: .55; }
.equip-row.prob { background: rgba(232,137,12,.05); }
.equip-tag-prob { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; color: #b9660a; background: rgba(232,137,12,.15); border-radius: 6px; padding: 1px 7px; }
.equip-alert { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #b9660a; background: rgba(232,137,12,.1); border: 1px solid rgba(232,137,12,.3); }
/* Precificação (calculadora de preço) */
.price-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .price-wrap { grid-template-columns: 1fr; } }
.price-hint { display: block; font-size: 11px; color: var(--faint); margin-top: 3px; }
.price-result { position: sticky; top: 92px; border-top: 4px solid #12b886; }
.price-big-l { font-size: 13px; color: var(--muted); font-weight: 600; }
.price-big { font-size: 34px; font-weight: 800; letter-spacing: -.5px; color: #12b886; margin: 2px 0 14px; }
.price-line { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; border-top: 1px solid var(--border); }
.price-line:first-of-type { border-top: none; }
.price-line.out b { color: #f26a76; }
.price-line.profit { font-size: 15px; } .price-line.profit b { color: #12b886; font-size: 18px; }
/* Esteira de produtos */
.prod-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
@media (max-width: 720px) { .prod-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; }
.prod-kpi b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.prod-kpi span { font-size: 11.5px; color: var(--muted); }
.prod-tier-h { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 18px 0 4px; }
.prod-list { display: flex; flex-direction: column; }
.prod-step { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--muted); font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.prod-tier-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; border-radius: 6px; padding: 1px 7px; }
.prod-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); }
.prod-row:first-child { border-top: none; }
.prod-row.off { opacity: .5; }
.prod-main { flex: 1 1 220px; min-width: 0; cursor: pointer; }
.prod-main:hover .prod-name { color: var(--blue-ink); }
.prod-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.prod-desc { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-price { text-align: right; white-space: nowrap; }
.prod-price b { font-size: 15px; font-weight: 800; color: #12b886; }
.prod-rec { font-size: 12px; color: var(--muted); }
.prod-margin { font-size: 11.5px; color: var(--muted); white-space: nowrap; min-width: 90px; text-align: right; }
@media (max-width: 640px) { .prod-row { flex-wrap: wrap; } .prod-main { flex: 1 1 100%; } .prod-margin { display: none; } }
.chome-tab-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
/* Card do cliente: foto + nome + nicho + NÍVEL (classificação) + status. Sem capa. */
.ccard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s, border-color .2s, box-shadow .2s; }
.ccard:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow-lg); }
.ccard.off { opacity: .62; }
.ccard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ccard-acts { display: flex; align-items: center; gap: 6px; }
.ccard-edit { width: 26px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--surface-3); color: var(--muted); font-size: 12px; cursor: pointer; }
.ccard-edit:hover { background: var(--blue); color: #fff; }
.ccard-av { line-height: 0; }
.ccard-av .avatar { width: 52px; height: 52px; border-radius: 13px; font-size: 18px; }
.ccard-status { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.ccard-status.green { color: var(--green); background: rgba(61,220,151,.13); }
.ccard-status.amber { color: #e8890c; background: rgba(232,137,12,.13); }
.ccard-body { margin-top: 12px; }
.ccard-name { font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard-niche { font-size: 12px; color: var(--muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ccard-plano { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; color: var(--blue-ink); background: var(--blue-soft); }
.ccard-plano.none { color: var(--faint); background: var(--surface-3); }
.ccard-nivel { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 3px 10px; border-radius: 999px; }
.ccard-nivel.none { color: var(--faint); background: var(--surface-3); }
.ccard-alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ccard-alert { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 7px; }
.ccard-alert.pend { color: var(--red); background: var(--red-soft); }
.ccard-alert.corr { color: #e8890c; background: rgba(232,137,12,.13); }
/* inativar/reativar cliente direto na lista */
.crow-act { flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 7px; padding: 4px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s; }
.crow-act:hover { border-color: var(--red); color: var(--red); }
.crow-act.on { color: var(--green); border-color: rgba(18,184,134,.4); }
.crow-act.on:hover { border-color: var(--green); }
/* campo pra colar a chave da IA nas Configurações */
.aikey-box { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.aikey-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* LTV — faixa discreta de acompanhamento no perfil do cliente */
.ltv-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 9px 14px; margin-bottom: 14px; }
/* quando mora dentro do card de atenção, vira rodapé (sem card dentro de card) */
.attn-card .ltv-strip { background: none; border: none; border-top: 1px solid var(--border); border-radius: 0; margin: 14px -18px -4px; padding: 11px 18px 0; }
/* aviso enxuto no lugar de um card vazio gigante */
.mini-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.mini-empty b { color: var(--text); }
.mini-empty-ic { display: inline-flex; color: var(--faint); }
.ltv-strip b { color: var(--text); font-weight: 700; }
.ltv-strip b.ltv-strip-v { color: #12b886; }
.ltv-sep { color: var(--faint); }
/* LTV */
.ltv-table td { vertical-align: middle; }
.ltv-date { width: 138px !important; padding: 6px 8px !important; font-size: 12.5px !important; }
.ltv-off { opacity: .6; }

/* LTV: tabela COMPACTA pra caber tudo sem rolar pro lado */
.ltv-table { font-size: 12px; width: 100%; }
.ltv-table th { font-size: 10.5px; padding: 8px 8px; }
.ltv-table td { padding: 7px 8px; }
.ltv-table .ltv-date { width: 112px !important; padding: 4px 5px !important; font-size: 11px !important; }
.ltv-table .ltv-av { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.ltv-table .ltv-cli { gap: 8px; }
.ltv-table .ltv-cli-nm { font-size: 12px; }
.ltv-table .ltv-cli-st { font-size: 10px; }
.ltv-table .ltv-nicho { font-size: 10.5px; padding: 2px 8px; }
.ltv-table .ltv-ago { font-size: 10px; margin-top: 1px; }
.ltv-table .ltv-marcar-saida { font-size: 10.5px; margin-left: 6px; }
.ltv-table .ltv-cell { min-width: 84px; gap: 4px; }
.ltv-table .ltv-mes { font-size: 10.5px; }
.ltv-table .exp-tag { font-size: 10px; }

/* ===== LTV dashboard (KPIs, tabela rica, aside) ===== */
.ltv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1180px) { .ltv-layout { grid-template-columns: 1fr; } }
.ltv-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ltv-aside { display: flex; flex-direction: column; gap: 16px; }
.ltv-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .ltv-kpis { grid-template-columns: 1fr; } }
.ltv-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.ltv-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ltv-kpi-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--k); background: color-mix(in srgb, var(--k) 13%, transparent); }
.ltv-kpi-ic svg { width: 16px; height: 16px; }
.ltv-kpi-l { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ltv-kpi-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ltv-kpi-txt { min-width: 0; }
.ltv-kpi-v { font-size: 27px; font-weight: 800; letter-spacing: -.5px; line-height: 1.05; }
.ltv-kpi-trend { font-size: 11.5px; font-weight: 600; margin-top: 5px; }
.ltv-kpi-trend.up { color: #12b886; }
.ltv-kpi-trend.down { color: #f26a76; }
.ltv-kpi-sub { font-size: 11.5px; color: var(--faint); margin-top: 5px; }
.ltv-spark { flex: none; width: 104px; height: 44px; display: block; }
.ltv-spark svg { width: 100%; height: 100%; display: block; }
.ltv-tablehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.ltv-search { margin: 0; min-width: 240px; }
.ltv-cli { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.ltv-av { width: 34px; height: 34px; border-radius: 9px; flex: none; font-size: 12px; }
.ltv-cli-nm { font-weight: 700; font-size: 13.5px; color: var(--text); }
.ltv-cli-st { font-size: 11px; margin-top: 1px; }
.ltv-cli-st.on { color: #12b886; }
.ltv-cli-st.off { color: var(--faint); }
.ltv-nicho { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--nc); background: color-mix(in srgb, var(--nc) 13%, transparent); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ltv-muted { color: var(--faint); }
.ltv-ago { font-size: 11px; color: var(--faint); margin-top: 2px; }
.ltv-mes { color: var(--faint); font-weight: 500; margin-left: 1px; }
.ltv-cell { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.ltv-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ltv-bar-fill { height: 100%; border-radius: 3px; }
.ltv-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.ltv-pager-info { font-size: 12.5px; color: var(--muted); }
.ltv-pager-nav { display: flex; gap: 5px; }
.ltv-pg { min-width: 32px; height: 32px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--text); cursor: pointer; }
.ltv-pg.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.ltv-pg:disabled { opacity: .4; cursor: default; }
.ltv-pg-dots { align-self: center; color: var(--faint); padding: 0 2px; }
/* aside cards */
.ltv-side { padding: 16px; }
.ltv-side-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.ltv-side-h .ic svg { width: 17px; height: 17px; color: var(--blue); }
.ltv-side-t { font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.ltv-ins { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border); }
.ltv-ins:first-of-type { border-top: none; }
.ltv-ins-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.ltv-ins-ic svg { width: 15px; height: 15px; }
.ltv-ins-txt { min-width: 0; }
.ltv-ins-l { font-size: 11.5px; font-weight: 700; }
.ltv-ins-nm { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 1px; }
.ltv-ins-v { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.ltv-verlista { background: none; border: none; color: var(--blue); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.ltv-donut-wrap { display: flex; align-items: center; gap: 14px; }
.ltv-donut { flex: none; width: 108px; height: 108px; }
.ltv-donut-svg { width: 108px; height: 108px; }
.ltv-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.ltv-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ltv-leg-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.ltv-leg-nm { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltv-leg-pct { font-weight: 700; color: var(--text); }
.ltv-dist { margin-bottom: 12px; }
.ltv-dist:last-child { margin-bottom: 0; }
.ltv-dist-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.ltv-dist-pct { font-weight: 700; color: var(--text); }
.ltv-dist-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.ltv-dist-fill { height: 100%; border-radius: 4px; }
.ltv-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; border: 1px solid var(--border); width: 100%; }
.ltv-cta:hover { border-color: var(--blue); }
.ltv-cta-t { font-weight: 700; font-size: 13.5px; }
.ltv-cta-s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ltv-cta-arrow { font-size: 22px; color: var(--blue); font-weight: 700; }
.ltv-lista { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.ltv-lista-i { padding: 7px 10px; border-radius: 8px; font-size: 13.5px; }
.ltv-lista-i:nth-child(odd) { background: var(--bg); }
.ltv-nums { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 12px; }
.ltv-num b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.4px; }
.ltv-num.big b { font-size: 30px; color: #12b886; }
.ltv-num span { font-size: 12px; color: var(--muted); }
/* famílias/linhas de serviço na esteira */
.fam-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--border-strong); }
.fam-title { margin: 0; font-size: 16px; font-weight: 800; display: flex; align-items: baseline; gap: 10px; }
.fam-count { font-size: 12px; font-weight: 600; color: var(--muted); }
/* Esteira em cards de catálogo */
.prodc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; margin-top: 8px; margin-bottom: 6px; }
.prodc { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.prodc:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-2px); }
.prodc.off { opacity: .55; }
.prodc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prodc-tier { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; border-radius: 6px; padding: 2px 8px; }
.prodc-inativo { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.prodc-name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.prodc-price { font-size: 24px; font-weight: 800; color: #12b886; letter-spacing: -.5px; }
.prodc-rec { font-size: 13px; font-weight: 600; color: var(--muted); }
.prodc-incl { margin: 2px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.prodc-incl li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.prodc-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.prodc-margin { font-size: 11.5px; color: var(--muted); }
.prodc-edit { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.prodc-edit:hover { border-color: var(--blue); color: var(--blue); }
.prodc-del { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }
.prodc-del:hover { color: var(--red); }
.equip-main { flex: 1 1 200px; min-width: 0; cursor: pointer; }
.equip-main:hover .equip-name { color: var(--blue-ink); }
.equip-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.equip-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.equip-dep { flex: 1 1 200px; min-width: 140px; }
.equip-dep-top { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.equip-dep-rem { color: var(--faint); }
.equip-vals { text-align: right; white-space: nowrap; }
.equip-atual { font-weight: 800; font-size: 15px; color: #12b886; }
.equip-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
@media (max-width: 680px) { .equip-row { flex-wrap: wrap; } .equip-main { flex: 1 1 100%; } .equip-vals { text-align: left; } }
.cat-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cat-row { display: flex; align-items: center; gap: 8px; }
.cat-row input { flex: 1; }
.fin-lanc-list { display: flex; flex-direction: column; margin-top: 12px; }
.fin-lanc { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.fin-lanc:first-child { border-top: none; }
.fin-lanc-main { flex: 1; min-width: 0; cursor: pointer; }
.fin-lanc-main:hover .fin-lanc-desc { color: var(--blue-ink); }
.fin-lanc-editbtn { white-space: nowrap; }
.fin-lanc-desc { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-lanc-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fin-lanc-val { font-weight: 700; font-size: 14px; white-space: nowrap; }
.fin-lanc-acts { display: flex; align-items: center; gap: 6px; }
.fin-lanc-edit { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 13px; }
.fin-lanc-edit:hover { border-color: var(--blue); color: var(--blue); }
.fin-nf { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: #12b886; background: rgba(18,184,134,.12); border-radius: 6px; padding: 1px 6px; text-decoration: none; }
@media (max-width: 620px) { .fin-lanc { flex-wrap: wrap; } .fin-lanc-main { flex: 1 1 100%; } }
/* modal Nova Entrada/Saída */
.fin-modal { width: min(620px, 96vw); }
.fin-modal-title { font-size: 20px; font-weight: 800; margin: 2px 0 4px; }
.fin-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.fin-modal-grid .full { grid-column: 1 / -1; }
.fin-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fin-f > span { font-size: 13px; font-weight: 600; color: var(--text); }
.fin-f .req { color: #f26a76; font-style: normal; }
.fin-modal input, .fin-modal select, .fin-modal textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: inherit; }
.fin-modal input:focus, .fin-modal select:focus, .fin-modal textarea:focus { outline: none; border-color: var(--blue); }
/* campo de dinheiro com moeda (R$/US$) */
.cur-field { display: flex; flex-direction: column; gap: 5px; }
.cur-row { display: flex; align-items: center; gap: 6px; }
.cur-sel { width: auto !important; flex: 0 0 auto; font-weight: 700; }
.cur-row > input[inputmode="decimal"] { flex: 1; min-width: 0; }
.cur-below { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cur-x { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cur-rate { width: 72px !important; text-align: right; padding: 7px 9px !important; }
.cur-refresh { width: 30px; height: 32px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 14px; flex: 0 0 auto; }
.cur-refresh:hover { border-color: var(--blue); color: var(--blue); }
.cur-hint { font-size: 12.5px; color: #12b886; font-weight: 700; }
.fin-modal textarea { min-height: 84px; resize: vertical; }
.fin-file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-file { display: inline-flex; align-items: center; gap: 4px; padding: 11px 14px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--muted); font-size: 13.5px; cursor: pointer; background: var(--surface-2); }
.fin-file:hover { border-color: var(--blue); color: var(--blue); }
.fin-file-view { font-size: 13px; color: var(--blue-ink); }
.fin-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
@media (max-width: 560px) { .fin-modal-grid { grid-template-columns: 1fr; } }
.ini-sheetpick { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.ini-schip { border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; cursor: pointer; }
.ini-schip:hover { border-color: var(--blue); }
.ini-schip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.plano-badge { font-weight: 700; }
.crow-plano { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 20px; }
/* Início: alternador de visualização do andamento do mês */
.ini-pano-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 2px 0 4px; }
/* seletor de mês do andamento — mesmo desenho da navegação de mês do Financeiro, em escala menor */
.ini-pano-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ini-mesnav { display: flex; align-items: center; gap: 6px; }
.ini-mesnav .fin-mnav-btn { width: 28px; height: 28px; border-radius: 8px; font-size: 17px; }
.ini-mes-label { font-size: 15px; font-weight: 800; letter-spacing: -.2px; min-width: 84px; text-align: center; }
.ini-modebar { flex: 0 0 auto; }
.ini-bars { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 26px; }
.ini-bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.ini-bar-name { font-size: 13.5px; font-weight: 700; }
.ini-bar.geral .ini-bar-name { color: var(--blue-ink); }
.ini-bar-val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ini-bar-track { height: 12px; border-radius: 7px; background: var(--surface-2); overflow: hidden; }
.ini-bar-fill { height: 100%; border-radius: 7px; background: var(--blue); transition: width .3s; }
.ini-bar-fill.done { background: #38bdf8; }
.ini-bar.geral .ini-bar-track { height: 16px; }
.ini-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 26px; }
.ini-num { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 14px 16px; text-align: center; }
.ini-num.geral { border-color: var(--blue); }
.ini-num.done { border-color: #38bdf8; }
.ini-num-name { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ini-num-big { font-size: 30px; font-weight: 800; margin: 4px 0 2px; }
.ini-num.done .ini-num-big { color: #38bdf8; }
.ini-num-sub { font-size: 11.5px; color: var(--faint); }

/* ===== PROTÓTIPO: área de Tráfego pago ===== */
.traf-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.traf-row:first-of-type { border-top: none; }
.traf-st { flex: none; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--sc); border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent); background: color-mix(in srgb, var(--sc) 10%, transparent); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.traf-row-mid { flex: 1; min-width: 0; }
.traf-nome { font-weight: 700; font-size: 14px; }
.traf-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.traf-nums { display: flex; gap: 20px; flex: none; }
.traf-nums > div { text-align: right; }
.traf-nums b { font-size: 14px; font-variant-numeric: tabular-nums; }
.traf-nums i { display: block; font-size: 10px; color: var(--faint); font-style: normal; text-transform: uppercase; letter-spacing: .3px; }
.nav-trafego { color: var(--blue-ink); }
@media (max-width: 720px) { .traf-nums { gap: 12px; } .traf-nums i { display: none; } }

/* ===== PROTÓTIPO: quadro de demandas (Pede Aqui) — estilo Trello ===== */
.dem-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.dem-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.dem-col { flex: 0 0 270px; width: 270px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 10px 10px 12px; }
.dem-col.dragover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--bg)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue) 28%, transparent); }
.dem-col-head { display: flex; align-items: center; gap: 6px; padding: 2px 2px 12px; }
.dem-col-nome { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--text); background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; }
.dem-col-nome:hover { background: var(--surface); }
.dem-col-nome:focus { background: var(--surface); border-color: var(--blue); outline: none; }
.dem-count { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.dem-col-del { flex: none; border: none; background: none; color: var(--faint); cursor: pointer; font-size: 12px; line-height: 1; padding: 4px; border-radius: 6px; opacity: 0; transition: opacity .15s; }
.dem-col-head:hover .dem-col-del { opacity: 1; }
.dem-col-del:hover { color: var(--red); background: var(--surface); }
.dem-drop { display: flex; flex-direction: column; gap: 9px; min-height: 48px; }
/* card limpo: prioridade + excluir no topo, título, e meta numa linha só */
.dem-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--pc); border-radius: 11px; padding: 10px 12px; box-shadow: var(--shadow); cursor: pointer; }
.dem-card.dragging { opacity: .4; }
.dem-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dem-prio { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--pc); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); background: color-mix(in srgb, var(--pc) 10%, transparent); border-radius: 999px; padding: 2px 7px; }
.dem-card-x { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 11px; line-height: 1; padding: 2px; opacity: 0; }
.dem-card:hover .dem-card-x { opacity: 1; }
.dem-card-x:hover { color: var(--red); }
.dem-card-t { font-size: 13px; font-weight: 700; line-height: 1.35; }
.dem-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 7px; font-size: 11px; color: var(--muted); }
.dem-cli { color: var(--blue-ink); font-weight: 600; }
.dem-prazo, .dem-solic { color: var(--muted); }
.dem-addcol { flex: 0 0 auto; align-self: flex-start; background: none; border: 1.5px dashed var(--border); color: var(--muted); border-radius: 12px; padding: 12px 20px; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.dem-addcol:hover { border-color: var(--blue); color: var(--blue); }
/* modal de demanda — compacto, com ícones e prioridade em linha */
.dem-modal { max-width: 720px; }
.dem-form { display: flex; flex-direction: column; gap: 15px; }
.dem-form .rec-field { display: flex; flex-direction: column; gap: 5px; }
.dem-grid3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.dem-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dem-inp-ic { position: relative; display: flex; align-items: center; }
.dem-inp-ic > svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.dem-inp-ic > input { padding-left: 34px; width: 100%; }
.dem-prio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dem-prio-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.dem-prio-card.on { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 8%, transparent); box-shadow: inset 0 0 0 1px var(--pc); }
.dem-prio-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--pc); background: color-mix(in srgb, var(--pc) 12%, transparent); margin-bottom: 2px; }
.dem-prio-ic svg { width: 16px; height: 16px; }
.dem-prio-card b { font-size: 12.5px; color: var(--pc); }
.dem-prio-exp { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
@media (max-width: 640px) { .dem-grid3, .dem-grid2, .dem-prio-grid { grid-template-columns: 1fr; } }

/* Cliente/conta vinculado a um cliente real: confirma visualmente */
.dem-inp-ic > input.cli-vinc { border-color: #12b886; }

/* Panorama estilo Excel: largura fixa e colunas menores + handle de redimensionar */
/* min-width:100% = a tabela nunca fica mais estreita que o card (some o vazio à direita quando há
   meses recolhidos); mas ainda cresce e rola quando as colunas somam mais que a largura visível */
.pano-fixed { table-layout: fixed; width: auto; min-width: 100%; }
.pano-fixed th, .pano-fixed td { padding: 9px 10px; overflow: hidden; text-overflow: ellipsis; }
.pano-fixed th { position: relative; }
.pano-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 4; }
.pano-resize:hover { background: color-mix(in srgb, var(--blue) 40%, transparent); }
body.pano-resizing { cursor: col-resize; user-select: none; }
body.pano-resizing * { cursor: col-resize !important; }

/* Seletor de cliente pesquisável (demanda de tráfego) — vincula pelo client_id */
.cli-sel { position: relative; }
.cli-sel-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; cursor: pointer; font-size: 13.5px; }
.cli-sel.open .cli-sel-btn { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.cli-sel-btn > svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.cli-sel-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-sel-txt.ph { color: var(--faint); }
.cli-sel-arrow { color: var(--faint); font-size: 12px; }
.cli-sel-pop { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; }
.cli-sel-search { width: 100%; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 11px 13px; font-size: 13px; background: var(--surface-2); }
.cli-sel-search:focus { outline: none; }
.cli-sel-list { max-height: 260px; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.cli-sel-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; border-radius: 9px; padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--text); }
.cli-sel-item:hover { background: var(--surface-2); }
.cli-sel-item.on { background: var(--blue-soft); color: var(--blue-ink); font-weight: 600; }
.cli-sel-item.livre { color: var(--muted); font-style: italic; }
.cli-sel-av { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; flex: none; }
.cli-sel-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-sel-check { color: var(--blue); font-weight: 700; }
.cli-sel-vazio { padding: 14px; text-align: center; font-size: 12.5px; color: var(--faint); }

/* Copy de anúncio (IA) — área de tráfego */
.tcopy-form { display: flex; flex-direction: column; gap: 12px; }
.tcopy-card { border-left: 3px solid var(--blue); }
.tcopy-date { font-size: 11.5px; color: var(--faint); }
.tcopy-oferta { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.tcopy-estrat { font-size: 13px; color: var(--text); line-height: 1.5; background: var(--bg); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.tcopy-anuncio { border-top: 1px solid var(--border); padding: 12px 0; }
.tcopy-anuncio:first-of-type { border-top: none; }
.tcopy-ang { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.tcopy-ang span { color: var(--blue-ink); font-weight: 600; }
.tcopy-lbl { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); margin: 8px 0 4px; display: flex; align-items: center; gap: 6px; }
.tcopy-titulos { display: flex; flex-direction: column; gap: 4px; }
.tcopy-tit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tcopy-txt { font-size: 13px; line-height: 1.55; white-space: pre-wrap; color: var(--text); }
.tcopy-rod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.tcopy-cta { font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: 3px 12px; }
.tcopy-extra { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.tcopy-dicas { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.tcopy-copybtn { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 6px; }
.tcopy-copybtn:hover { color: var(--blue); background: var(--bg); }

/* correção com prazo estourado no Início */
.ini-late .ini-item-t { color: var(--red); }
.ini-late .ini-item-s { color: var(--red); font-weight: 600; }

/* ===================== EDITOR DE CONTEÚDO (formato do exemplo) ============ */
.post-modal-box:has(.ed2) { max-width: 1120px; width: 96vw; }
/* flex-shrink:0 — sem isto o flex do modal encolhia o .ed2 abaixo do conteúdo, o corpo
   transbordava e a Atividade subia por cima (timestamp na área de mídia, layout quebrado) */
.ed2 { display: flex; flex-direction: column; flex-shrink: 0; }
.ed2-top { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--border); }
.ed2-titulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.ed-modo { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); }
.ed-modo-b { display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border: none; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ed-modo-b:hover { color: var(--text); }
.ed-modo-b.on { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.ed-modo-ic { font-size: 11px; }

.ed2-corpo2 { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; padding: 16px 0; align-items: start; }
.ed2-corpo2:has(.ed2-chatflut:not([hidden])) { grid-template-columns: 300px minmax(0, 1fr) 300px; }

/* prévia da mídia (esquerda) */
.ed2-preview-col { position: sticky; top: 0; }
/* MÍDIA na lateral: uploader completo (arrastar/clicar + miniaturas) numa coluna só */
.ed2-midia-lateral .mz-drop { min-height: 220px; }
.ed2-midia-lateral .files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.ed2-midia-lateral .mz-vazio { color: var(--muted); font-size: 13px; padding: 24px 12px; text-align: center; border: 1px dashed var(--border); border-radius: 14px; }
.ed2-preview { aspect-ratio: 4 / 5; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; }
.ed2-preview-img { width: 100%; height: 100%; object-fit: cover; }
.ed2-preview-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ed2-preview-ph:hover { color: var(--blue); }
.ed2-preview-ic { color: var(--faint); }
.ed2-preview-ic svg { width: 40px; height: 40px; }
.ed2-preview-n { position: absolute; bottom: 8px; right: 8px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 20px; }

/* abas grandes (Tema · Conteúdos · Mídia · Legenda) */
.ed2-paineis-wrap { min-width: 0; }
.ed2-abas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.ed2-abas[hidden] { display: none; }
.ed2-aba { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 8px; border: 1.5px solid var(--border); border-radius: 11px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.ed2-aba:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.ed2-aba.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.ed2-aba-l { font-size: 13px; font-weight: 700; }
.ed2-aba-chip { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 2px 11px; border-radius: 20px; }
.ed2-aba-chip.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); }
.ed2-painel[hidden] { display: none; }
.ed2-painel { display: flex; flex-direction: column; gap: 10px; }

.ed2-campo > span, .ed2-campo-t { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); margin-bottom: 5px; margin-top: 4px; }
.ed2-campo input { box-sizing: border-box; width: 100%; height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.ed2-campo input:focus { outline: none; border-color: var(--blue); }
.ed2-detalhes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.ed2-detalhes .edit-field { margin: 0; }
.ed2-detalhes label { font-size: 11px; font-weight: 700; color: var(--faint); }
.ed2-detalhes input, .ed2-detalhes select { width: 100%; box-sizing: border-box; }
.ed2-dica { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.ed2-painel .edit-main-box { min-height: 240px; }
.ed2-painel-acts { display: flex; gap: 8px; }

/* Expresso: sem abas, painéis empilhados numa rolagem */
.ed2-paineis { display: flex; flex-direction: column; gap: 22px; }

/* chat flutuante */
.ed2-chatflut { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; max-height: 66vh; }
.ed2-chatflut[hidden] { display: none; }
.ed2-chat-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ed2-chat-t { flex: 1; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.ed2-chat-x { position: static; }

/* rodapé */
.ed2-rodape { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--border); }
.ed2-nav { border: none; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; padding: 8px 6px; }
.ed2-nav:hover:not(:disabled) { color: var(--blue); }
.ed2-nav:disabled { color: var(--faint); cursor: default; }
.ed2-ico { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border: 1.5px solid var(--border); border-radius: 22px; background: var(--card); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ed2-ico:hover { color: var(--text); border-color: var(--blue); }
.ed2-ico.on { color: var(--blue); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.ed2-ico-n { font-size: 11px; font-weight: 800; }
.ed2 .post-actions { margin: 0; }

@media (max-width: 900px) {
  .ed2-corpo2, .ed2-corpo2:has(.ed2-chatflut:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .ed2-abas { grid-template-columns: repeat(2, 1fr); }
}


/* --------------- LISTAS EDITÁVEIS (lápis na tela onde se usa) ------------- */
.lista-lapis { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px; border: none; background: none; color: var(--faint); cursor: pointer; vertical-align: -3px; }
.lista-lapis:hover { color: var(--blue); }
.lista-lapis svg { width: 13px; height: 13px; }
.kb-editar { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 8px; flex: 1 0 100%; }
.kb-editar .lista-lapis { margin: 0; }
.lista-box { max-width: 620px; }
.lista-itens { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lista-l { display: flex; align-items: center; gap: 7px; }
.lista-l .cs-inp { flex: 1; min-width: 0; }
.lista-mv { width: 24px; height: 28px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; }
.lista-mv:hover { color: var(--blue); border-color: var(--blue); }
.lista-cor { width: 34px; height: 30px; flex: 0 0 auto; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.lista-grp { flex: 0 0 130px; }
.lista-lock { flex: 0 0 auto; font-size: 13px; cursor: help; opacity: .7; }

/* Aviso de dados em risco (servidor sem disco permanente) — fixo, não é um toast que some */
.aviso-dados { position: sticky; top: 0; z-index: 8000; display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; background: #7c2d12; color: #fff7ed; font-size: 13px; line-height: 1.5; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.aviso-ic { flex: 0 0 auto; font-size: 15px; }
.aviso-txt { flex: 1; min-width: 0; }
.aviso-txt b { color: #fff; }
.aviso-x { flex: 0 0 auto; border: none; background: none; color: #fed7aa; font-size: 15px; cursor: pointer; padding: 0 4px; }
.aviso-x:hover { color: #fff; }

/* Barra de formatação da legenda */
.fmt-bar { display: flex; align-items: center; gap: 2px; padding: 5px 7px; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--surface); }
.fmt-b { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 7px; border: none; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.fmt-b:hover { background: var(--card); color: var(--text); }
.fmt-b svg { width: 15px; height: 15px; }
.fmt-neg { font-weight: 800; }
.fmt-ita { font-style: italic; font-family: Georgia, serif; }
.fmt-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.fmt-emo-wrap { position: relative; display: inline-flex; }
.fmt-emojis { position: absolute; top: 32px; left: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.fmt-emojis[hidden] { display: none; }
.fmt-emo { width: 30px; height: 30px; border: none; border-radius: 7px; background: none; font-size: 17px; cursor: pointer; }
.fmt-emo:hover { background: var(--surface); }
.fmt-clr { font-size: 13px; }
.fmt-copiar { min-width: auto; padding: 0 12px; font-weight: 700; color: var(--blue); }
.fmt-copiar:hover { background: var(--blue); color: #fff; }
/* CAIXA DE ESCRITA ÚNICA (legenda): barra + textarea + contador numa moldura só, sem emendas */
.leg-box { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--card); overflow: hidden; transition: border-color .12s, box-shadow .12s; }
.leg-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
.leg-box .fmt-bar { border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.leg-box textarea.edit-main-box { border: none !important; border-radius: 0 !important; background: transparent; min-height: 320px; box-shadow: none !important; }
.leg-box textarea.edit-main-box:focus { outline: none; }
.leg-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 11px; border: none; border-top: 1px solid var(--border); border-radius: 0; background: var(--surface); font-size: 12px; color: var(--muted); }
.leg-c { font-weight: 700; color: var(--text); }
.leg-c small { font-weight: 500; color: var(--muted); }
.leg-c.over { color: var(--red); }
.leg-sep { color: var(--border); font-weight: 700; }
.leg-primeira { flex-basis: 100%; margin-top: 2px; color: var(--faint); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a caixa encaixa embaixo da barra, sem borda dupla */
.ed2-escrita .edit-main-box { border-radius: 0 0 10px 10px; }
.ed2-estrut { border-top: 1px solid var(--border); padding-top: 12px; }
.ed2-estrut > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); }
.ed2-estrut > summary::before { content: "▸ "; font-size: 9px; }
.ed2-estrut[open] > summary::before { content: "▾ "; }
.ed2-estrut > summary:hover { color: var(--blue); }
.ed2-estrut-s { font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); }
.ed2-estrut > .edit-struct-body { margin-top: 12px; }
/* arrastar gravação pra outro dia */
.rec-chip[draggable="true"] { cursor: grab; }
.rec-chip.arrastando { opacity: .45; cursor: grabbing; }
.rec-cell.solta { outline: 2px dashed var(--blue); outline-offset: -3px; background: color-mix(in srgb, var(--blue) 8%, transparent); }

/* Conferência de formato da mídia (bate com story/carrossel/estático?) */
/* Área de anexar mídia (dropzone) — a caixa tracejada clicável/arrastável */
.mz { display: flex; flex-direction: column; gap: 12px; }
.mz-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px 22px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: var(--card); cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.mz-drop:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, var(--card)); }
.mz-drop.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.mz-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 10%, var(--surface)); color: var(--blue); }
.mz-ic svg { width: 22px; height: 22px; }
.mz-t { font-size: 14.5px; font-weight: 700; color: var(--text); }
.mz-s { font-size: 12px; color: var(--muted); max-width: 360px; line-height: 1.45; }
.mz-vazio { font-size: 13px; color: var(--muted); padding: 6px 2px; }
.mz-regra { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 2px 0 10px; padding: 8px 11px; border-radius: 9px; background: color-mix(in srgb, var(--blue) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border)); }
.mz-regra.dim { background: var(--surface); border-color: var(--border); color: var(--faint); }
.mz-fmt { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; cursor: help; }
.mz-fmt.checando { color: var(--faint); background: var(--surface); border: 1px solid var(--border); font-weight: 500; }
.mz-fmt.ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.mz-fmt.warn { color: #e8890c; background: color-mix(in srgb, #e8890c 12%, transparent); border: 1px solid color-mix(in srgb, #e8890c 45%, transparent); }
/* botão de histórico só com o relógio (sem o "72h" escrito) */
.cred-hist-btn.so-icone { gap: 0; padding: 6px; border-radius: 50%; }
.cred-hist-btn.so-icone svg { width: 15px; height: 15px; }
/* fotos de evidência no Diário (reclamação/elogio) */
.cs-fotos { margin-top: 6px; }
.cs-fotos-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cs-foto { position: relative; width: 72px; height: 72px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); }
.cs-foto img { width: 100%; height: 100%; object-fit: cover; }
.cs-foto-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.cs-foto-add { width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1.5px dashed var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.cs-foto-add:hover { border-color: var(--blue); color: var(--blue); }
.cs-foto-add svg { width: 18px; height: 18px; }
/* Formato de conteúdo em cards (editor) */
.ed2-fmtcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ed2-fmtcard { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 8px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.ed2-fmtcard:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); }
.ed2-fmtcard.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--card)); }
.ed2-fmtcard-ic { color: var(--muted); }
.ed2-fmtcard.on .ed2-fmtcard-ic { color: var(--blue); }
.ed2-fmtcard-ic svg { width: 18px; height: 18px; }
.ed2-fmtcard-t { font-size: 13px; font-weight: 700; }
.ed2-fmtcard-s { font-size: 11px; color: var(--muted); line-height: 1.3; }
.nps-cfg-bloco { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.nps-cfg-bloco:first-of-type { border-top: none; padding-top: 0; }
/* arrastar clientes pra reordenar no Panorama */
.pano-cli.arrastavel { cursor: grab; }
.pano-cli.arrastavel:active { cursor: grabbing; }
.pano-cli.arrastavel input, .pano-cli.arrastavel button { cursor: auto; }
tr.pano-arrastando { opacity: .45; }
tr.pano-drop > .pano-sticky-col { box-shadow: inset 0 2px 0 var(--blue); }

.ed2-sug { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ed2-sug:hover { color: var(--blue); border-color: var(--blue); }
.ed2-sug svg { width: 14px; height: 14px; }
/* Importar lista de clientes */
.imp-ta { width: 100%; min-height: 220px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; line-height: 1.6; padding: 11px 13px; resize: vertical; }
.imp-resumo { font-size: 12.5px; font-weight: 700; color: var(--blue); margin: 8px 2px 0; }
.imp-check { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }

.cal-edmodo-lbl { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.ed2-escrita-sempre { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.imp-lbl { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.imp-mes { height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; padding: 0 10px; }
/* linha informativa da equipe na tela de Saídas (não soma no total, só visualização) */
.fin-equipe-info { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 10px; border: 1px dashed var(--border-strong); border-radius: 12px; background: color-mix(in srgb, var(--muted) 6%, var(--surface)); }
.fin-equipe-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #e8890c; background: color-mix(in srgb, #e8890c 14%, transparent); padding: 3px 8px; border-radius: 999px; }
.fin-equipe-txt { flex: 1; min-width: 0; }
.fin-equipe-desc { font-size: 13.5px; font-weight: 700; color: var(--text); }
.fin-equipe-note { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.fin-equipe-val { font-size: 14.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
/* avatar (logo do cliente) na Atividade recente */
.pact-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.pact-av.has-logo { background-size: cover; background-position: center; }
/* LTV: botão "Ativo" / marcar saída na coluna Saída */
.ltv-ativo-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #12b886; }
.ltv-marcar-saida, .ltv-cancel { display: inline-block; margin-left: 8px; border: none; background: none; color: var(--muted); font: inherit; font-size: 11.5px; text-decoration: underline; cursor: pointer; }
.ltv-marcar-saida:hover, .ltv-cancel:hover { color: var(--blue); }
.ltv-ativo-btn { margin-left: 8px; border: 1px solid var(--border); background: var(--surface); color: #12b886; font: inherit; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.ltv-ativo-btn:hover { border-color: #12b886; }
/* Tipo de serviço do contrato = checkboxes (marcar os que tiver) */
.ct-servicos { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-serv-ck { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--card); }
.ct-serv-ck:hover { border-color: var(--blue); }
.ct-serv-ck input { accent-color: var(--blue); }
/* anexo de roteiro na gravação */
.rec-anexos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-anexo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); max-width: 260px; }
.rec-anexo-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-size: 12.5px; font-weight: 600; min-width: 0; }
.rec-anexo-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-anexo-link:hover { color: var(--blue); }
.rec-anexo-add { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); position: relative; }
.rec-anexo-add:hover { border-color: var(--blue); color: var(--blue); }
.rec-anexo-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Aba Reuniões (atas) do Diário do cliente */
.reu-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.reu-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.reu-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.reu-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.reu-av.has-logo { background-size: cover; background-position: center; }
.reu-id { flex: 1; min-width: 0; }
.reu-nm { font-weight: 700; font-size: 14px; }
.reu-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.reu-badge { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.reu-badge.ok { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.reu-badge.warn { color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
.reu-atas { border-top: 1px solid var(--border); padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--muted) 4%, var(--surface)); }
.reu-ata { padding-top: 8px; }
.reu-ata-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.reu-ata-txt { font-size: 13px; color: var(--ink-soft); white-space: pre-wrap; margin-top: 3px; line-height: 1.45; }
.reu-ata-txt.dim { color: var(--faint); font-style: italic; }
.reu-ata-input { min-height: 140px; }
/* ---- Modal rico de reunião ---- */
.reu-modal { max-width: 1040px; width: calc(100vw - 40px); max-height: 92vh; overflow-y: auto; padding: 22px 24px; }
.reu-modal-top { display: flex; align-items: center; gap: 10px; position: sticky; top: -22px; background: var(--surface); padding: 8px 0 12px; margin: -6px 0 6px; z-index: 4; border-bottom: 1px solid var(--border); }
.reu-modal .req { color: #f26a76; }
.reu-sec { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 14px; background: var(--card); }
.reu-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.reu-sec-head .ic { color: var(--muted); }
.reu-sec-head h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
.reu-f { display: flex; flex-direction: column; gap: 5px; }
.reu-f > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.reu-f input, .reu-f select, .reu-modal .dataBR { height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; padding: 0 11px; width: 100%; }
.reu-ta { width: 100%; min-height: 92px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; padding: 10px 12px; resize: vertical; }
.reu-ta-grande { min-height: 120px; }
.reu-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.reu-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reu-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.reu-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.reu-2col .reu-sec, .reu-3col .reu-sec { margin-top: 0; }
.reu-assuntos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.reu-ass { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.reu-ass input[type=checkbox] { accent-color: var(--blue); }
.reu-ass input[type=text] { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; padding: 0 8px; }
.reu-pend-head, .reu-pend-row { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr 34px; gap: 8px; align-items: center; }
.reu-pend-head { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 6px; }
.reu-pend-row { margin-bottom: 8px; }
.reu-pend-row input, .reu-pend-row select, .reu-pend-row .dataBR { height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; padding: 0 9px; width: 100%; }
.reu-pend-del { border: none; background: none; color: #f26a76; cursor: pointer; display: grid; place-items: center; }
.reu-addrow { align-self: flex-start; border: none; background: none; color: var(--blue); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 0; }
@media (max-width: 820px) { .reu-grid4, .reu-grid3, .reu-2col, .reu-3col, .reu-assuntos { grid-template-columns: 1fr; } .reu-pend-head { display: none; } .reu-pend-row { grid-template-columns: 1fr; } }
.rec-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rec-confirm { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; }
.rec-confirm input { accent-color: #12b886; }

.ini-sugestao { opacity: .95; }
.ini-sugestao .ini-row-sub { color: #12b886; font-weight: 600; }
/* ---- Dashboard: cards Relacionamento / Produção / Listas ---- */
.dpx-list { display: flex; flex-direction: column; gap: 9px; }
.dpx-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.dpx-lbl { color: var(--muted); }
.dpx-line b { font-weight: 700; }
.dpx-ok { color: #12b886; }
.dpx-warn { color: #e8890c; }
.dpx-dim { color: var(--faint); font-size: 13px; }
.dpx-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.dpx-tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.dpx-tag.ok { color: #12b886; background: color-mix(in srgb, #12b886 14%, transparent); }
.dpx-tag.bad { color: #f26a76; background: color-mix(in srgb, #f26a76 14%, transparent); }
.dpx-prod-num { font-size: 15px; margin-bottom: 6px; }
.dpx-prod-num b { font-size: 20px; font-weight: 800; }
.dpx-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dpx-bar-fill { height: 100%; background: linear-gradient(90deg, #2f6bff, #12b886); border-radius: 999px; }
.dpx-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 12px 0 5px; }
.dpx-grav { font-size: 13px; padding: 3px 0; border-top: 1px solid var(--border); }
.dtar-list { display: flex; flex-direction: column; gap: 6px; }
.dtar-row { display: flex; align-items: center; gap: 7px; }
.dtar-row input[type=checkbox] { accent-color: #12b886; flex: 0 0 auto; }
.dtar-txt { flex: 1; min-width: 0; height: 32px; border: 1px solid transparent; border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; padding: 0 9px; }
.dtar-txt:focus { border-color: var(--blue); background: var(--surface); outline: none; }
.dtar-txt.done { text-decoration: line-through; color: var(--faint); }
.dtar-pessoa { flex: 0 0 108px; width: 108px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--blue); font: inherit; font-size: 12px; font-weight: 600; padding: 0 8px; }
.dtar-del { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 13px; flex: 0 0 auto; }
.dtar-del:hover { color: #f26a76; }
.dtar-add { align-self: flex-start; border: none; background: none; color: var(--blue); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 0; margin-top: 2px; }
/* Portal: carrossel de mídia (uma foto por vez, navegável) */
.pa-slider { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.pa-slider .pa-media-item { width: 100%; display: block; }
.pa-slide-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.pa-slide-nav:hover { background: rgba(0,0,0,.72); }
.pa-slide-nav.prev { left: 10px; }
.pa-slide-nav.next { right: 10px; }
.pa-slide-count { position: absolute; top: 10px; right: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pa-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pa-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--border-strong); cursor: pointer; padding: 0; }
.pa-dot.on { background: var(--blue); }
.aud-gtoggle { cursor: pointer; user-select: none; }
.aud-gtoggle:hover .aud-gname { color: var(--blue); }
.aud-gchev { color: var(--muted); font-size: 13px; margin-left: 6px; flex: 0 0 auto; }
/* Início em 2 colunas quando há a coluna lateral de upsell */
.inicio.has-aside { display: flex; gap: 20px; align-items: flex-start; }
.inicio.has-aside .ini-main { flex: 1; min-width: 0; }
.ini-aside { flex: 0 0 400px; position: sticky; top: 12px; }
.ini-aside .opp-card { margin-top: 0; }
@media (max-width: 1200px) { .inicio.has-aside { flex-direction: column; } .ini-aside { flex: none; width: 100%; position: static; } }
/* Início: painel Oportunidades de up-sell (estilo cartão premium, acento rosa) */
.opp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); margin-top: 18px; }
.opp-head { display: flex; align-items: center; gap: 10px; }
.opp-head h3 { margin: 0; font-size: 20px; font-weight: 800; }
.opp-novo { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--blue); padding: 3px 10px; border-radius: 999px; }
.opp-sub { margin: 5px 0 16px; font-size: 13.5px; color: var(--muted); max-width: 640px; }
/* meta de vendas */
.opp-meta { background: color-mix(in srgb, var(--blue) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--border)); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.opp-meta-lbl { font-size: 12px; color: var(--muted); }
.opp-meta-val { font-size: 22px; margin: 2px 0 8px; }
.opp-meta-val b { font-weight: 800; }
.opp-meta-val span { color: var(--muted); font-size: 16px; font-weight: 600; }
.opp-meta-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 15%, var(--surface-2)); overflow: hidden; }
.opp-meta-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-2, var(--blue))); border-radius: 999px; }
.opp-meta-pct { font-size: 12px; color: var(--muted); margin-top: 6px; }
/* serviços (uma linha cada, com Ver detalhes) */
.opp-serv2 { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--border); }
.opp-serv2:first-of-type { border-top: none; }
.opp-serv-ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; }
.opp-serv2:nth-child(6n+1) .opp-serv-ic { background: color-mix(in srgb, #12b886 14%, transparent); color: #12b886; }
.opp-serv2:nth-child(6n+2) .opp-serv-ic { background: color-mix(in srgb, #7c5cff 14%, transparent); color: #7c5cff; }
.opp-serv2:nth-child(6n+3) .opp-serv-ic { background: color-mix(in srgb, #e8890c 14%, transparent); color: #e8890c; }
.opp-serv2:nth-child(6n+4) .opp-serv-ic { background: color-mix(in srgb, #2f6bff 14%, transparent); color: #2f6bff; }
.opp-serv2:nth-child(6n+5) .opp-serv-ic { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.opp-serv-txt { flex: 1; min-width: 0; }
.opp-serv-nm { font-weight: 700; font-size: 15px; }
.opp-serv-desc { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.opp-serv-r { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.opp-serv-ap { font-size: 10.5px; color: var(--faint); }
.opp-serv-pr { font-size: 16px; font-weight: 800; color: var(--blue); }
.opp-ver { margin-top: 4px; border: none; background: var(--blue); color: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.opp-ver:hover { background: var(--blue-ink, var(--blue)); }
.opp-all2 { width: 100%; margin-top: 14px; border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--border)); background: none; color: var(--blue); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 11px; border-radius: 12px; }
.opp-all2:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.opp-rank-h2 { margin: 22px 0 6px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.opp-rank-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 11px 4px; border-top: 1px solid var(--border); font: inherit; }
.opp-rank-row:hover { background: var(--surface-2); }
.opp-av { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; background-size: cover; background-position: center; }
.opp-av.has-logo { background-size: cover; background-position: center; }
.opp-rank-id { flex: 1; min-width: 0; }
.opp-rank-nm { font-weight: 700; font-size: 14.5px; }
.opp-rank-motivo { font-size: 12.5px; color: var(--muted); }
.opp-pot-wrap { text-align: right; flex: 0 0 auto; }
.opp-pot-wrap small { display: block; font-size: 10.5px; color: var(--faint); margin-bottom: 3px; }
.opp-pot { font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; }
.opp-pot.alto { color: #12b886; background: color-mix(in srgb, #12b886 15%, transparent); }
.opp-pot.medio { color: #e8890c; background: color-mix(in srgb, #e8890c 15%, transparent); }
/* Reuniões: card compacto clicável + histórico por mês (atas fechadas) */
.reu-head-click { cursor: pointer; }
.reu-head-click:hover { background: var(--surface-2); border-radius: 12px; }
.reu-mes-card { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.reu-mes-head { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.reu-mes-head b { font-size: 14px; text-transform: capitalize; }
.reu-mes-n { font-size: 12px; color: var(--muted); }
.reu-ata2 { border-top: 1px solid var(--border); }
.reu-ata2:first-child { border-top: none; }
.reu-ata2-head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; cursor: pointer; }
.reu-ata2-head:hover { background: var(--surface-2); }
.reu-ata2-chev { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.reu-ata2-prev { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reu-ata2-txt { padding: 0 14px 14px 34px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.55; color: var(--text); }
/* meta de up-sell (topo do painel) + link "Ver todas" */
.opp-meta-top { display: flex; align-items: center; justify-content: space-between; }
.opp-meta-edit { border: none; background: none; color: var(--blue); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.opp-meta-val.dim { color: var(--faint); font-size: 13px; font-weight: 600; }
.opp-rank-h2b { display: flex; align-items: center; justify-content: space-between; }
.opp-verrank { border: none; background: none; color: var(--blue); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; }
.opp-area-list { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
/* Aba Upsell (Diário do cliente) */
.ups-meta { max-width: 420px; }
.ups-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ups-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); flex-wrap: wrap; }
.ups-row.ups-fechado { opacity: .7; }
.ups-row.ups-fechado .opp-rank-nm { text-decoration: line-through; }
.ups-cli { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; border: none; background: none; text-align: left; cursor: pointer; font: inherit; padding: 0; }
.ups-cli:hover .opp-rank-nm { color: var(--blue); }
.ups-ctl { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 260px; }
.ups-status { height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 0 8px; flex: 0 0 auto; }
.ups-note { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; padding: 0 10px; }
/* Aba Upsell — tabela estilo CRM + valor em aberto (urgência) */
.ups-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 14px 0; }
.ups-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ups-kpi-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; }
.ups-kpi-n { font-size: 22px; font-weight: 800; line-height: 1; }
.ups-kpi-l { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ups-perdido { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, #f26a76 40%, var(--border)); background: color-mix(in srgb, #f26a76 8%, var(--surface)); }
.ups-perdido-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #f26a76 16%, transparent); color: #f26a76; }
.ups-perdido-n { font-size: 26px; font-weight: 900; color: #f26a76; line-height: 1.05; }
.ups-perdido-l { font-size: 13px; color: var(--muted); margin-top: 2px; max-width: 720px; }
.ups-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.ups-table th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ups-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ups-table tr.ups-fechado td { opacity: .6; }
.ups-table tr.ups-fechado .opp-rank-nm { text-decoration: line-through; }
.ups-cli2 { display: flex; align-items: center; gap: 11px; border: none; background: none; text-align: left; cursor: pointer; font: inherit; padding: 0; }
.ups-cli2:hover .opp-rank-nm { color: var(--blue); }
.ups-niche { font-size: 12.5px; color: var(--muted); }
.ups-atual b { font-size: 13.5px; font-weight: 700; }
.ups-desde { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.ups-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); }
.ups-valor { font-size: 13px; font-weight: 800; color: #12b886; margin-top: 5px; }
.ups-valor.dim { color: var(--faint); font-weight: 500; }
.ups-valor.uni { color: #7c5cff; }
.ups-score { display: flex; align-items: center; gap: 9px; }
.ups-gauge { width: 40px; height: 40px; flex: 0 0 auto; }
.ups-score-n { font-size: 16px; font-weight: 800; line-height: 1; }
.ups-score-l { font-size: 11.5px; color: var(--muted); }
.ups-score:hover .ups-score-l { text-decoration: underline; }
.score-explain-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.score-explain-big { font-size: 40px; font-weight: 800; line-height: 1; }
.score-explain-lbl { font-size: 15px; font-weight: 700; }
.score-explain-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.score-rows { display: flex; flex-direction: column; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.score-row:last-child { border-bottom: none; }
.score-row-l { font-size: 13px; }
.score-row-d { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-row-d.pos { color: #12b886; }
.score-row-d.neg { color: #f26a76; }
.score-row-d.zero { color: var(--muted); }
.score-explain-foot { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
.ups-next { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.ups-next .ups-status { height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 0 8px; }
.ups-next .ups-note { height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 12px; padding: 0 8px; }
/* Upsell: dois quadrados (Meta | Valor parado) */
.ups-2cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.ups-bigcard { border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; background: var(--surface); }
.ups-bigcard.ups-perd { border-color: color-mix(in srgb, #f26a76 40%, var(--border)); background: color-mix(in srgb, #f26a76 7%, var(--surface)); }
.ups-bc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ups-bc-lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ups-bc-n { font-size: 30px; font-weight: 900; line-height: 1.1; }
.ups-bc-n.neg { color: #f26a76; }
.ups-bc-n.dim { font-size: 16px; color: var(--faint); font-weight: 600; }
.ups-bc-sub { font-size: 16px; font-weight: 600; color: var(--muted); }
.ups-bc-foot { font-size: 12px; color: var(--muted); margin-top: 8px; }
.ups-bc-ano { font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 4px; }
@media (max-width: 720px) { .ups-2cards { grid-template-columns: 1fr; } }
/* Potencial editável: badges com remover + dropdown de serviços */
.ups-pot { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ups-badge-x { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; }
.ups-bx { opacity: .6; font-size: 10px; }
.ups-badge-x:hover .ups-bx { opacity: 1; }
.ups-addserv { height: 28px; border: 1px dashed var(--border-strong); border-radius: 999px; background: var(--card); color: var(--blue); font: inherit; font-size: 12px; font-weight: 600; padding: 0 8px; cursor: pointer; }

/* Aviso de recuperação de conteúdos (versões anteriores do mês) */
.gen-recover { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(242,106,118,.10); border: 1px solid rgba(242,106,118,.35); color: var(--text); padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 13.5px; }
.gen-recover span { flex: 1; min-width: 200px; }

/* Marca de conteúdo gerado por IA (cor diferente do que é feito à mão) */
.ia-badge { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 800; color: #7c5cff; background: rgba(124,92,255,.14); border: 1px solid rgba(124,92,255,.35); padding: 0 5px; border-radius: 8px; vertical-align: middle; white-space: nowrap; }
.kb-card.ia { background: linear-gradient(0deg, rgba(124,92,255,.06), rgba(124,92,255,.06)); }

/* Lista de correções do cliente (modal + item no Início) */
.corr-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.corr-card.late { border-color: rgba(242,106,118,.5); background: rgba(242,106,118,.06); }
.corr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.corr-info { min-width: 0; }
.corr-info b { font-size: 14.5px; }
.corr-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.corr-pedido { margin-top: 8px; font-size: 13px; line-height: 1.4; background: var(--surface-2); border-left: 3px solid #e5397f; border-radius: 8px; padding: 8px 11px; white-space: pre-wrap; }
.corr-pedido.dim { color: var(--muted); font-style: italic; border-left-color: var(--border); }
.ini-corr-pedido { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 3px; line-height: 1.35; }
/* sinal de correção pedida no calendário */
.cal-post.corr { box-shadow: inset 0 0 0 1.5px #e5397f; }
.cal-post-corr { color: #e5397f; font-weight: 800; font-size: 10px; }

/* Correção pedida pelo cliente — caixa em destaque no topo do conteúdo */
.cm-corr-callout { background: rgba(229,57,127,.08); border: 1px solid rgba(229,57,127,.4); border-left: 4px solid #e5397f; border-radius: 12px; padding: 12px 14px; margin: 6px 0 14px; }
.cm-corr-head { font-size: 13px; font-weight: 800; color: #e5397f; margin-bottom: 5px; }
.cm-corr-body { font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
/* destaque da correção na lista de Atividade */
.activity-item.corr { background: rgba(229,57,127,.06); border-radius: 8px; padding: 6px 8px; }
.activity-corr-txt { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; color: var(--text); border-left: 3px solid #e5397f; padding-left: 9px; }

/* Portal: o que o cliente escreveu ao pedir correção (exatamente como colocou) */
.pcard-corr { margin: 4px 0 2px; font-size: 12.5px; line-height: 1.4; background: rgba(242,106,118,.08); border-left: 3px solid #f26a76; border-radius: 8px; padding: 7px 10px; }
.pcard-corr-lbl { font-weight: 800; color: #f26a76; }
.pcard-corr-txt { white-space: pre-wrap; }

.corr-tag { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 10px; vertical-align: middle; }
.corr-tag.pend { color: #e5397f; background: rgba(229,57,127,.14); }
.corr-tag.done { color: #12b886; background: rgba(18,184,134,.14); }
.corr-card.done { opacity: .82; }
.cm-corr-callout.done { border-color: rgba(139,155,180,.4); border-left-color: #8b9bb4; background: rgba(139,155,180,.08); }
.cm-corr-callout.done .cm-corr-head { color: #8b9bb4; }

/* Pendência atribuída a você — botões Aceitar / Não aceitar no Início */
.ini-atrib-acts { display: inline-flex; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.ini-item:has(.ini-atrib-acts) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ini-atrib-acts .btn { padding: 5px 12px; font-size: 12.5px; }