/* Sistema visual v3 (referências Attio, Default e Ventriloc): folha de conteúdo
     sobre o papel do menu, ações em grafite, verde Linka só como acento. */
  :root {
    color-scheme: dark;
    --paper:       #0d0f0e;
    --bg:          #121514;
    --surface:     #181b1a;
    --surface-2:   #1e2221;
    --surface-3:   #262a29;
    --ink:         #eceeed;
    --ink-muted:   #979d9a;
    --ink-faint:   #636966;
    --line:        #252a28;
    --line-2:      #333836;
    --green:       #45c487;
    --green-strong:#38b077;
    --green-contrast: #06130c;
    --green-wash:  rgba(69,196,135,0.10);
    --green-wash-2:rgba(69,196,135,0.16);
    --action:       #eceeed;
    --action-ink:   #121514;
    --action-hover: #ffffff;
    --shadow-card: none;
    --shadow-raise: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-pop:  0 0 0 1px rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.5);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Inter Tight", "Inter", system-ui, sans-serif;
    --side-bg:        #0d0f0e;
    --side-line:      transparent;
    --side-ink:       #c9cecb;
    --side-muted:     #8e9491;
    --side-faint:     #5f6562;
    --side-strong:    #eceeed;
    --side-hover:     rgba(255,255,255,0.04);
    --side-active-bg: #1e2221;
    --side-active-ink:#eceeed;
    --date-icon-filter: invert(1);
    --ppo-piso: #e35d5d;
    --ppo-previsivel: #e8b84b;
    --status-critical: #e35d5d;
    --status-critical-wash: rgba(227,93,93,0.12);
    --status-warning: #e8b84b;
    --status-warning-wash: rgba(232,184,75,0.12);
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --paper:       #eef1ef;
    --bg:          #fafbfa;
    --surface:     #ffffff;
    --surface-2:   #f3f5f4;
    --surface-3:   #e9ecea;
    --ink:         #1b1e1d;
    --ink-muted:   #626866;
    --ink-faint:   #9aa09d;
    --line:        #e3e7e5;
    --line-2:      #d2d8d5;
    --green:       #0e7c47;
    --green-strong:#0a6a3c;
    --green-contrast: #ffffff;
    --green-wash:  rgba(14,124,71,0.07);
    --green-wash-2:rgba(14,124,71,0.12);
    --action:       #1b1e1d;
    --action-ink:   #ffffff;
    --action-hover: #33383a;
    --shadow-card: 0 1px 2px rgba(20,26,23,0.04);
    --shadow-raise: 0 0 0 1px rgba(20,26,23,0.05), 0 1px 2px rgba(20,26,23,0.08);
    --shadow-pop:  0 0 0 1px rgba(20,26,23,0.05), 0 12px 32px rgba(20,26,23,0.14);
    --side-bg:        #eef1ef;
    --side-line:      transparent;
    --side-ink:       #3a3e3c;
    --side-muted:     #5b605e;
    --side-faint:     #939996;
    --side-strong:    #1b1e1d;
    --side-hover:     rgba(27,30,29,0.05);
    --side-active-bg: #ffffff;
    --side-active-ink:#1b1e1d;
    --date-icon-filter: none;
    --ppo-piso: #c23f3f;
    --ppo-previsivel: #a87510;
    --status-critical: #c23f3f;
    --status-critical-wash: rgba(194,63,63,0.09);
    --status-warning: #a87510;
    --status-warning-wash: rgba(168,117,16,0.09);
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
  }
  button, input, select { font-family: var(--sans); }

  .app-shell { display: flex; min-height: 100vh; }

  /* ---------- Login (o layout em duas colunas fica no bloco "Login", no fim) ---------- */
  .password-field-wrap { position: relative; display: flex; }
  .password-field-wrap input { flex: 1; padding-right: 38px; }
  .password-toggle-btn {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: none; background: transparent; color: var(--ink-faint);
    cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px;
  }
  .password-toggle-btn:hover { color: var(--ink); background: var(--surface-3); }
  .password-toggle-btn svg { width: 16px; height: 16px; }
  .login-error {
    display: none; font-size: 12.5px; color: var(--status-critical); background: var(--status-critical-wash);
    border-radius: 8px; padding: 9px 12px;
  }
  .login-error.show { display: block; }
  .login-loading-screen {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg); color: var(--ink-faint); font-size: 12.5px; font-family: var(--mono);
  }

  /* ---------- Sidebar ---------- */
  .sidebar {
    width: 210px; flex-shrink: 0;
    background: var(--surface); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 18px 14px; transition: width 0.15s ease;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
  }
  .sidebar.collapsed { width: 68px; }
  .sidebar-top { display: flex; flex-direction: column; gap: 22px; }
  .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
  .node-mark { height: 22px; width: auto; flex-shrink: 0; display: block; }
  .sidebar-brand .name { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
  .sidebar-brand .name .dot { color: var(--green); }
  .sidebar.collapsed .name, .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-section-label, .sidebar.collapsed .foot-label,
  .sidebar.collapsed .client-nav-name { display: none; }

  .nav-section-label {
    font-size: 10px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint); font-family: var(--mono); padding: 0 8px; margin-bottom: 8px;
  }
  .client-nav-name {
    padding: 0 8px; margin-bottom: 10px; font-size: 13.5px; font-weight: 700;
    color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 10px; border-radius: 8px;
    border: none; background: transparent; color: var(--ink-muted);
    font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
  }
  .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
  .nav-item.active { background: var(--green-wash-2); color: var(--green); }
  .sidebar.collapsed .nav-item { justify-content: center; }
  .nav-item-expandable .nav-chevron { width: 12px; height: 12px; margin-left: auto; transition: transform 0.15s ease; }
  .nav-item-expandable.expanded .nav-chevron { transform: rotate(90deg); }
  .nav-subitems { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; margin-top: 2px; }
  .nav-subitem { font-size: 12.5px; padding: 8px 10px; }
  .sidebar.collapsed .nav-chevron, .sidebar.collapsed .nav-subitems { display: none !important; }

  .sidebar-foot { display: flex; flex-direction: column; gap: 10px; }
  .collapse-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink-muted); font-size: 12.5px; font-weight: 600;
    cursor: pointer; width: 100%;
  }
  .collapse-btn svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
  .sidebar.collapsed .collapse-btn svg { transform: rotate(180deg); }
  .sidebar.collapsed .collapse-btn { justify-content: center; }
  .version-tag { font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono); padding: 0 6px; }

  /* ---------- Main / topbar ---------- */
  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 24px; border-bottom: 1px solid var(--line);
    background: var(--surface); position: sticky; top: 0; z-index: 5;
  }
  .search-wrap {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 9px; padding: 8px 10px; width: 300px; max-width: 40vw;
  }
  .search-wrap svg { width: 15px; height: 15px; color: var(--ink-faint); flex-shrink: 0; }
  .search-wrap input {
    border: none; background: transparent; outline: none; color: var(--ink);
    font-size: 13px; width: 100%;
  }
  .search-wrap input::placeholder { color: var(--ink-faint); }
  .kbd-hint {
    font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
    border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; flex-shrink: 0;
  }
  .topbar-spacer { flex: 1; }

  .org-pill {
    display: flex; align-items: center; gap: 7px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 9px; padding: 7px 10px; font-size: 12.5px; font-weight: 650;
  }
  .org-pill svg { width: 14px; height: 14px; color: var(--ink-muted); }
  .org-pill .chev { width: 11px; height: 11px; color: var(--ink-faint); margin-left: 2px; }

  .icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink-muted); cursor: pointer; flex-shrink: 0;
  }
  .icon-btn svg { width: 15px; height: 15px; }
  .icon-btn:hover { color: var(--ink); }

  .icon-toggle {
    display: inline-flex; gap: 2px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 9px; padding: 3px;
  }
  .icon-toggle button {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    border: none; background: transparent; color: var(--ink-muted); cursor: pointer;
  }
  .icon-toggle button svg { width: 13px; height: 13px; }
  .icon-toggle button.active { background: var(--surface-3); color: var(--green); box-shadow: inset 0 0 0 1px var(--line-2); }

  .user-block { display: flex; align-items: center; gap: 8px; padding-left: 6px; border-left: 1px solid var(--line); }
  .user-block .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--green-wash-2); color: var(--green);
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; font-family: var(--mono);
  }
  .user-block .who { display: flex; flex-direction: column; line-height: 1.2; }
  .user-block .who strong { font-size: 12.5px; font-weight: 650; }
  .user-block .who span { font-size: 10.5px; color: var(--ink-muted); }

  /* ---------- Content ---------- */
  .content { max-width: 1360px; width: 100%; margin: 0 auto; padding: 24px 24px 64px; display: flex; flex-direction: column; gap: 20px; }

  .page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .page-header .title { display: flex; align-items: center; gap: 10px; }
  .page-header .title svg { width: 22px; height: 22px; color: var(--green); }
  .page-header h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
  .header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .btn-outline {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: 8px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 650;
    cursor: pointer; white-space: nowrap;
  }
  .btn-outline svg { width: 14px; height: 14px; }
  .btn-outline:hover { border-color: var(--line-2); }
  .btn-outline.btn-accent { border-color: var(--green-wash-2); background: var(--green-wash); color: var(--green); }
  .btn-outline.btn-accent:hover { background: var(--green-wash-2); }
  .btn-outline.btn-danger { border-color: var(--status-critical-wash); background: var(--status-critical-wash); color: var(--status-critical); }
  .btn-outline.btn-danger:hover { background: var(--status-critical); color: #fff; }
  .btn-outline:disabled { cursor: default; opacity: 0.7; }
  .btn-outline.is-loading svg { animation: spin 0.9s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .btn-outline.is-loading svg { animation: none; } }
  .refresh-note { font-size: 12px; color: var(--ink-muted); min-width: 0; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .refresh-note.is-error { color: var(--status-critical); }
  #page-client .page-header .header-actions { min-width: 0; max-width: 100%; }
  @media (max-width: 640px) { .refresh-note { white-space: normal; } }

  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
  }
  .modal-box {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 22px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px;
  }
  .modal-box-wide { max-width: 540px; max-height: 88vh; overflow-y: auto; }
  .modal-box h2 { margin: 0; font-size: 16px; font-weight: 800; }
  .modal-section-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-faint); font-family: var(--mono); margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line);
  }
  .modal-box-wide .modal-section-label:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
  .modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .modal-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .modal-checkbox-field { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 9px; }
  .modal-checkbox-field input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; }
  .modal-checkbox-field label { font-size: 13px; font-weight: 650; color: var(--ink); text-transform: none; letter-spacing: normal; cursor: pointer; }
  .modal-field { display: flex; flex-direction: column; gap: 6px; }
  .modal-field label { font-size: 11.5px; font-weight: 650; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--mono); }
  .modal-field input, .modal-field select {
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px;
    padding: 9px 12px; font-size: 13.5px; color: var(--ink); font-family: var(--sans);
  }
  .modal-field input:focus, .modal-field select:focus { outline: none; border-color: var(--green); }
  .modal-error { margin: 0; font-size: 12px; color: var(--status-critical); }
  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
  .btn-solid {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 8px; border: none; background: var(--green);
    color: var(--green-contrast); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  }
  .btn-solid svg { width: 14px; height: 14px; flex-shrink: 0; }
  .btn-solid:hover { filter: brightness(1.08); }
  .toast-note {
    font-size: 11.5px; color: var(--ink-muted); font-family: var(--mono);
    padding: 6px 0; opacity: 0; transition: opacity 0.15s ease;
  }
  .toast-note.show { opacity: 1; }

  /* Tabs */
  .tabs { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; width: fit-content; }
  .tab { padding: 7px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); cursor: pointer; border: none; background: transparent; }
  .tab.active { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }

  /* Filter bar */
  .filter-bar { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
  .filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .preset-pills { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
  .preset-btn { padding: 6px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); border: none; background: transparent; cursor: pointer; }
  .preset-btn.active { background: var(--green); color: var(--green-contrast); }
  .preset-btn:hover:not(.active) { color: var(--ink); }
  .date-picker-wrap {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
    padding: 6px 10px;
  }
  .date-picker-wrap svg { width: 14px; height: 14px; color: var(--ink-faint); flex-shrink: 0; }
  .date-input {
    border: none; background: transparent; outline: none; color: var(--ink);
    font-size: 12.5px; font-weight: 600; color-scheme: inherit;
  }
  .date-input::-webkit-calendar-picker-indicator { cursor: pointer; filter: var(--date-icon-filter); }
  .date-clear {
    border: none; background: transparent; color: var(--ink-muted); cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0 2px; display: none;
  }
  .date-clear:hover { color: var(--ink); }

  .select-pill {
    appearance: none; -webkit-appearance: none;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
    padding: 7px 26px 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa094' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
  }
  .select-pill:disabled, .preset-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .period-summary { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-muted); font-family: var(--mono); margin-left: auto; }
  .dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-wash); flex-shrink: 0; }

  /* KPI row */
  .kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; }
  button.kpi {
    appearance: none; -webkit-appearance: none; font-family: inherit; text-align: left;
    cursor: pointer; width: 100%; margin: 0; transition: border-color 0.15s ease, transform 0.05s ease;
  }
  button.kpi:hover { border-color: var(--line-2); }
  button.kpi:active { transform: translateY(1px); }
  .kpi-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--ink-muted); }
  .kpi-icon svg { width: 15px; height: 15px; }
  .kpi.accent .kpi-icon { background: var(--green-wash-2); color: var(--green); }
  .kpi-label { font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--mono); }
  .kpi-value-row { display: flex; align-items: baseline; gap: 8px; }
  .kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .kpi.accent .kpi-value { color: var(--green); }
  .kpi-delta { font-size: 11px; font-weight: 700; color: var(--green); font-family: var(--mono); }
  .kpi-delta.down { color: var(--status-critical); }
  .kpi-delta.neutral { color: var(--ink-muted); }
  .kpi-sub { font-size: 12px; color: var(--ink-muted); }
  .kpis-6 { grid-template-columns: repeat(6, 1fr); }

  .comparison-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
  .comparison-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; }
  .comparison-card-row { display: flex; align-items: baseline; gap: 16px; }
  .comparison-card-figure { display: flex; flex-direction: column; gap: 2px; }
  .comparison-card-figure.muted { opacity: 0.6; }
  .comparison-card-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .comparison-card-value-sm { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
  .comparison-card-tag { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--mono); }
  .marketing-demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .marketing-demo-block .kpi-sub { margin-top: 10px; }
  @media (max-width: 900px) {
    .comparison-cards, .marketing-demo-grid { grid-template-columns: 1fr; }
  }
  .kpis-4 { grid-template-columns: repeat(4, 1fr); }
  .kpis-5 { grid-template-columns: repeat(5, 1fr); }
  .kpis-7 { grid-template-columns: repeat(7, 1fr); }
  .kpi-value-row { display: flex; align-items: baseline; gap: 4px; }
  .kpi-value-row .affix { font-size: 15px; color: var(--ink-faint); font-weight: 700; }
  .kpi-edit-input {
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
    background: none; border: none; border-bottom: 1px dashed var(--line-2); color: var(--ink);
    width: 84px; padding: 0 0 2px; min-width: 0;
  }
  .kpi-edit-input:focus { outline: none; border-bottom: 1px solid var(--green); }

  /* Linka view: section head, alerts, performance, ranking */
  .section-head { margin-top: 4px; }
  .section-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
  .section-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-muted); }

  .alert-priority-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .alert-priority-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--status-critical); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease; text-align: left; width: 100%; }
  .alert-priority-card:hover { border-color: var(--status-critical); }
  .alert-priority-card:active { transform: scale(0.995); }
  .alert-priority-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .alert-priority-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--status-critical); }
  .alert-priority-title svg { width: 17px; height: 17px; flex-shrink: 0; }
  .alert-priority-count { font-size: 30px; font-weight: 800; color: var(--status-critical); font-variant-numeric: tabular-nums; }
  .alert-priority-sub { margin: 0; font-size: 12px; color: var(--ink-muted); }
  .alert-priority-list { display: flex; flex-direction: column; gap: 6px; }
  .alert-priority-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; }
  .alert-priority-row .name { font-weight: 600; color: var(--ink); }
  .alert-priority-row .metric { color: var(--status-critical); font-weight: 700; font-variant-numeric: tabular-nums; }
  .alert-priority-see-all { margin: 2px 0 0; font-size: 11.5px; font-weight: 650; color: var(--status-critical); }
  .alert-detail-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 13px; cursor: pointer; transition: background 0.12s ease; }
  .alert-detail-row:hover { background: var(--surface-3); }
  .alert-detail-row .name { font-weight: 650; color: var(--ink); }
  .alert-detail-row .metric { color: var(--status-critical); font-weight: 700; font-variant-numeric: tabular-nums; }
  .alert-detail-list { display: flex; flex-direction: column; gap: 7px; max-height: 50vh; overflow-y: auto; }

  .alert-secondary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .alert-secondary-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
  .alert-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .alert-dot.good { background: var(--green); }
  .alert-dot.warning { background: var(--status-warning); }
  .alert-dot.critical { background: var(--status-critical); }
  .alert-secondary-card div { display: flex; flex-direction: column; gap: 1px; }
  .alert-secondary-value { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .alert-secondary-label { font-size: 11.5px; color: var(--ink-muted); }

  .perf-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
  .perf-item { display: flex; flex-direction: column; gap: 5px; }
  .perf-label { font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--mono); }
  .perf-value { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .perf-value.accent { color: var(--green); }

  .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); font-size: 11px; font-weight: 800; font-family: var(--mono); }

  /* Métricas da pipeline (estilo Kommo) + pílulas de tarefas */
  .pipeline-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; }
  .perf-sub { font-size: 11px; color: var(--ink-muted); }
  .pipeline-task-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .task-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .task-pill b { font-weight: 800; font-variant-numeric: tabular-nums; }
  .task-pill:hover { border-color: var(--green); }
  .task-pill.active { background: var(--green-wash-2); border-color: var(--green); color: var(--green); }
  .task-pill.warn.active, .task-pill.warn:not(.zero) b { color: var(--status-critical); }
  .task-pill.static { cursor: default; }
  .task-pill.static:hover { border-color: var(--line); }
  .pill-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--status-critical); color: #fff; font-size: 10.5px; font-weight: 800; }

  /* Chevron dos links "Ver todos" / "Abrir" (no lugar da seta de texto) */
  .link-arrow { width: 12px; height: 12px; vertical-align: -1.5px; }

  /* Foco de teclado com a cor da marca (inputs já têm o próprio foco verde) */
  button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

  /* Layout dos cartões da pipeline */
  .card-layout-wrap { position: relative; }
  .card-layout-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); min-width: 200px; }
  .card-layout-pop strong { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--mono); }
  .card-layout-pop label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
  .card-layout-pop input { accent-color: var(--green); }

  /* Links rastreáveis */
  .tl-code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; }
  .tl-dest { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-muted); }
  .tl-acoes { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
  .tl-acoes .btn-outline { padding: 4px 10px; font-size: 11.5px; }

  /* Perfil e notificações */
  .user-block-btn { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; color: inherit; text-align: left; font: inherit; }
  .user-block-btn:hover .avatar { box-shadow: 0 0 0 2px var(--green); }
  #notify-btn { position: relative; }
  .notify-dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
  .profile-notify-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .profile-notify-row p { font-size: 12.5px; color: var(--ink-muted); margin: 0; }

  /* ROI */
  .roi-linhas { display: flex; flex-direction: column; gap: 10px; }
  .roi-linha { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-muted); border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
  .roi-linha b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }

  /* Calendário: faixa de eventos atrasados / hoje / amanhã */
  .event-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .event-col { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
  .event-col-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--mono); border-bottom: 2px solid var(--line); padding-bottom: 8px; }
  .event-col-head b { font-size: 14px; }
  .event-col-head.danger { border-bottom-color: var(--status-critical); }
  .event-col-head.danger b { color: var(--status-critical); }
  .event-col-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
  .event-card { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 9px; padding: 9px 11px; cursor: pointer; }
  .event-card:hover { border-color: var(--green); }
  .event-card.done .event-title { text-decoration: line-through; color: var(--ink-muted); }
  .event-check { margin-top: 2px; accent-color: var(--green); cursor: pointer; }
  .event-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .event-title { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .event-meta { font-size: 11.5px; color: var(--ink-muted); }
  .event-empty { font-size: 12.5px; color: var(--ink-muted); padding: 10px 2px; }
  @media (max-width: 900px) { .event-strip { grid-template-columns: 1fr; } }

  /* Modal de duplicatas */
  .modal-sub { font-size: 12.5px; color: var(--ink-muted); margin: -6px 0 14px; }
  .modal-box table { min-width: 0; }
  #profile-logins-body td:nth-child(2) { word-break: break-all; font-family: var(--mono); font-size: 11px; }
  .dup-list { display: flex; flex-direction: column; gap: 14px; max-height: 55vh; overflow-y: auto; }
  .dup-group { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .dup-group-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .dup-count { margin-left: auto; font-size: 11.5px; color: var(--ink-muted); font-family: var(--mono); }
  .dup-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); }
  .dup-lead:hover { border-color: var(--green); }
  .dup-lead-meta { font-size: 11.5px; font-weight: 500; color: var(--ink-muted); }

  @media (max-width: 1280px) {
    .pipeline-task-pills { justify-content: flex-start; grid-column: 1 / -1; }
    .pipeline-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 900px) {
    .pipeline-metrics { grid-template-columns: 1fr 1fr; }
  }

  /* Pipeline (Kanban). Cor quer dizer uma coisa só: verde = viável, âmbar = falta avaliar,
     vermelho = parado há mais de 7 dias na etapa. O cartão viável acende a borda esquerda
     (o "sinal"), e o topo de cada coluna mede quantos viáveis ela tem. */
  :root { --lane: var(--surface); --lane-card: var(--surface-2); }
  :root[data-theme="light"] { --lane: #eef2f0; --lane-card: #ffffff; }
  .pipeline-board {
    display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .pipeline-col {
    background: var(--lane); border: 1px solid var(--line); border-radius: 12px;
    min-width: 244px; flex: 1 1 244px; display: flex; flex-direction: column; max-height: 680px;
  }
  .pipeline-col-head { padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
  .pipeline-col-title { display: flex; align-items: center; gap: 7px; min-height: 20px; }
  .pipeline-col-head h3 {
    margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pipeline-col.is-won h3 { color: var(--green); }
  .pipeline-won-icon { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .pipeline-count { font-size: 12.5px; font-weight: 650; color: var(--ink-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .pipeline-meter { display: flex; gap: 2px; height: 4px; }
  .pipeline-meter span { border-radius: 2px; min-width: 4px; }
  .pipeline-meter .m-v1 { background: var(--green); }
  .pipeline-meter .m-vnull { background: var(--status-warning); opacity: 0.5; }
  .pipeline-meter .m-v0 { background: var(--line-2); }
  .pipeline-col-reading { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--ink-muted); }
  .pipeline-cards {
    padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 64px;
    border-radius: 0 0 12px 12px; transition: background 0.12s ease, box-shadow 0.12s ease;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .pipeline-cards.drag-over { background: var(--green-wash); box-shadow: inset 0 0 0 2px var(--green-wash-2); }
  .pipeline-card {
    position: relative; flex-shrink: 0; background: var(--lane-card); border: 1px solid var(--line); border-radius: 9px;
    padding: 10px 12px 10px 14px; display: flex; flex-direction: column; gap: 6px; cursor: grab;
    box-shadow: var(--shadow-card);
  }
  .pipeline-card::before {
    content: ""; position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px;
    border-radius: 0 3px 3px 0; background: transparent;
  }
  .pipeline-card.sig-v1::before { background: var(--green); }
  .pipeline-card.sig-v0::before { background: var(--line-2); }
  .pipeline-card:hover { border-color: var(--line-2); }
  /* Por dentro da borda: a coluna rola e cortaria um contorno por fora. */
  .pipeline-card:focus-visible { outline: 2px solid var(--green); outline-offset: -1px; }
  .pipeline-card:active { cursor: grabbing; }
  .pipeline-card.dragging { opacity: 0.4; }
  .pipeline-card.just-lit { animation: sinal-aceso 0.9s ease-out; }
  @keyframes sinal-aceso {
    from { box-shadow: 0 0 0 3px var(--green-wash-2), var(--shadow-card); border-color: var(--green); }
    to { box-shadow: var(--shadow-card); }
  }
  @media (prefers-reduced-motion: reduce) { .pipeline-card.just-lit { animation: none; } }
  .pipeline-card .lead-name {
    font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pipeline-card .lead-meta { font-size: 12px; color: var(--ink-muted); display: flex; gap: 8px; font-family: var(--sans); }
  .pipeline-card .lead-meta:empty { display: none; }
  .lead-local { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lead-date { margin-left: auto; flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .lead-phone-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .lead-phone-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .lead-phone { font-size: 12px; color: var(--ink-muted); font-family: var(--sans); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lead-origin-tag {
    display: inline-flex; align-items: center; flex-shrink: 0; padding: 2px 8px; border-radius: 100px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; background: var(--surface-3); color: var(--ink-muted);
    white-space: nowrap;
  }
  .lead-whatsapp-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 24px; height: 24px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--green-wash-2); color: var(--green); transition: background 0.15s ease, color 0.15s ease;
  }
  .lead-whatsapp-btn:hover { background: var(--green); color: var(--green-contrast); }
  .lead-whatsapp-btn svg { width: 13px; height: 13px; }
  /* Ficha do lead: atalho para a conversa na caixa do CRM (só aparece quando existe). */
  .lead-phone-rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .lead-conversa-link { padding: 0; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 500; color: var(--green); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
  .lead-conversa-link:hover { color: var(--ink); }
  .lead-conversa-link[hidden] { display: none; }
  .pipeline-list-wa-cell { width: 1%; white-space: nowrap; }
  .pipeline-list-wa-wrap { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
  .pipeline-empty { padding: 24px 14px; text-align: center; font-size: 12px; color: var(--ink-faint); }
  .pipeline-cards .pipeline-empty { padding: 18px 10px; border: 1px dashed var(--line-2); border-radius: 9px; color: var(--ink-muted); }

  /* Panels */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 18px; display: flex; flex-direction: column; }
  .panel-head { margin-bottom: 16px; }
  .panel-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .panel-head-row .icon-btn { flex-shrink: 0; }
  .panel-head-row .icon-btn svg { transition: transform 0.18s ease; }
  .panel-head-row .icon-btn.collapsed svg { transform: rotate(180deg); }
  .panel-head h2 { margin: 0; font-size: 13.5px; font-weight: 650; }
  .panel-head p { margin: 3px 0 0; font-size: 12px; color: var(--ink-muted); }

  /* Compare chart */
  .compare-chart { display: flex; gap: 32px; height: 170px; padding-top: 14px; flex: 1; align-items: flex-end; justify-content: center; }
  .compare-group { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
  .compare-bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; }
  .compare-bar { width: 30px; border-radius: 4px 4px 0 0; position: relative; min-height: 3px; }
  .compare-bar .val { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .compare-group-label { font-size: 12px; color: var(--ink-muted); font-weight: 600; }

  /* Evolution SVG chart */
  .evo-wrap { flex: 1; display: flex; flex-direction: column; }
  .evo-svg { width: 100%; height: 190px; overflow: visible; }
  .evo-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono); }

  .legend-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }
  .legend-item .swatch { width: 12px; height: 8px; border-radius: 2px; }

  /* result hbars */
  .hbars { display: flex; flex-direction: column; gap: 14px; }
  .hbar-row { display: grid; grid-template-columns: 148px 1fr 34px; align-items: center; gap: 10px; }
  .hbar-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-muted); }
  .hbar-label .swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
  .hbar-track { position: relative; height: 10px; background: var(--surface-3); border-radius: 5px; }
  .hbar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px; min-width: 4px; transition: width 0.2s ease, filter 0.15s ease; }
  .hbar-row:hover .hbar-fill { filter: brightness(1.2); }
  .hbar-value { font-size: 13px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }

  .fill-solid   { background: var(--green); }
  .fill-tone    { background: var(--ink-muted); opacity: 0.5; }
  .fill-outline { background: transparent; border: 1.5px solid var(--ink-muted); box-sizing: border-box; }
  .fill-dashed  { background-image: repeating-linear-gradient(90deg, var(--ink-muted) 0 6px, transparent 6px 10px); opacity: 0.75; }

  [data-tip] { position: relative; }
  [data-tip]:hover::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 6px;
    white-space: nowrap; z-index: 10; pointer-events: none;
  }
  [data-tip]:hover::before {
    content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--ink); z-index: 10; pointer-events: none;
  }

  /* Table */
  .table-panel { padding: 0; overflow: hidden; }
  .table-panel .panel-head { padding: 20px 20px 0; margin-bottom: 14px; }
  /* .table-wrap: o mesmo papel, com o nome que a Régua de cobrança e os Fluxos usam (antes não tinha regra e a
     tabela, que pede 640px, vazava do quadro). */
  .table-scroll, .table-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
  thead th {
    text-align: left; font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-muted); font-family: var(--mono); padding: 10px 20px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2);
  }
  tbody td { padding: 12px 20px; border-bottom: 1px solid var(--line); color: var(--ink-muted); }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: var(--surface-2); }
  tbody td.name { color: var(--ink); font-weight: 550; }
  td.date, th.date { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .empty-row td { text-align: center; color: var(--ink-faint); padding: 28px 20px; }
  .pipeline-list-row { cursor: pointer; }
  .pipeline-list-row:hover td { background: var(--surface-2); }

  .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 100px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink-muted); background: var(--surface-2); }
  .chip-mark { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
  .chip.good { background: var(--green-wash); color: var(--ink); }
  .chip.good .chip-mark { background: var(--green); }
  .chip.neutral .chip-mark { background: var(--ink-muted); opacity: 0.5; }
  .chip.critical .chip-mark { background: transparent; border: 1.5px solid var(--ink-muted); box-sizing: border-box; }
  .chip.warning .chip-mark { background-image: repeating-linear-gradient(90deg, var(--ink-muted) 0 2px, transparent 2px 3.4px); }

  .status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 100px; font-size: 12px; font-weight: 650; white-space: nowrap; }
  .status-chip .chip-mark { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .status-chip.urgent { background: var(--status-critical-wash); color: var(--status-critical); }
  .status-chip.urgent .chip-mark { background: var(--status-critical); }
  .status-chip.attention { background: var(--status-warning-wash); color: var(--status-warning); }
  .status-chip.attention .chip-mark { background: var(--status-warning); }
  .status-chip.ok { background: var(--green-wash); color: var(--green); }
  .status-chip.ok .chip-mark { background: var(--green); }
  .status-chip.neutral { background: var(--surface-3); color: var(--ink-muted); }
  .status-chip.neutral .chip-mark { background: var(--ink-faint); }

  /* Tráfego Pago: lista de tarefas agrupada por status */
  .priority-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 100px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
  .priority-chip.baixa, .priority-chip.media { background: var(--surface-2); color: var(--ink-muted); }
  .priority-chip.alta { background: var(--status-warning-wash); color: var(--status-warning); }
  .priority-chip.urgente { background: var(--status-critical-wash); color: var(--status-critical); }
  .comments-list { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow-y: auto; }
  .comment-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
  .comment-item-head { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
  .comment-item-head strong { color: var(--ink); font-weight: 700; }
  .comment-item-head span { color: var(--ink-faint); font-family: var(--mono); }
  .comment-item p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
  .comments-empty { text-align: center; font-size: 12px; color: var(--ink-faint); padding: 20px; }
  .comment-compose { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .comment-compose textarea {
    width: 100%; min-height: 64px; background: var(--surface-2); border: 1px solid var(--line-2);
    border-radius: 8px; padding: 9px 12px; color: var(--ink); font-family: var(--sans); font-size: 13px; resize: vertical;
  }
  .comment-compose textarea:focus { outline: none; border-color: var(--green); }

  /* Seletor de data rico (atalhos + calendário + recorrência) */
  .date-picker-trigger {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px;
    padding: 9px 12px; font-size: 13.5px; color: var(--ink); cursor: pointer; text-align: left; font-family: var(--sans);
  }
  .date-picker-trigger svg { width: 15px; height: 15px; color: var(--ink-faint); flex-shrink: 0; }
  .date-picker-popover {
    position: fixed; z-index: 70; display: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4); overflow: hidden; width: 480px; max-width: 92vw;
  }
  .date-picker-quick { display: flex; flex-direction: column; padding: 8px; border-right: 1px solid var(--line); width: 190px; flex-shrink: 0; gap: 1px; }
  .date-picker-quick button {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-radius: 7px; border: none; background: transparent;
    color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left;
  }
  .date-picker-quick button:hover { background: var(--surface-2); }
  .date-picker-quick button span { color: var(--ink-faint); font-size: 11px; font-family: var(--mono); }
  .date-picker-main { display: flex; flex-direction: column; flex: 1; padding: 14px 16px; gap: 10px; min-width: 0; }
  .date-picker-cal-head { display: flex; align-items: center; justify-content: space-between; }
  .date-picker-cal-head span { font-size: 13px; font-weight: 700; }
  .date-picker-cal-nav { display: flex; gap: 4px; }
  .date-picker-cal-nav button {
    width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .date-picker-cal-nav svg { width: 12px; height: 12px; }
  .date-picker-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10px; text-transform: uppercase; color: var(--ink-faint); font-family: var(--mono); text-align: center; }
  .date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .date-picker-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer;
    color: var(--ink); background: transparent; border: none; font-family: var(--sans);
  }
  .date-picker-day:hover { background: var(--surface-2); }
  .date-picker-day.other-month { color: var(--ink-faint); opacity: 0.4; }
  .date-picker-day.today { box-shadow: inset 0 0 0 1px var(--green-wash-2); color: var(--green); }
  .date-picker-day.selected { background: var(--green); color: var(--green-contrast); font-weight: 800; }
  .date-picker-recurrence { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .date-picker-recurrence label { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
  .date-picker-recurrence select { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 8px; font-size: 12px; color: var(--ink); }

  .ppo-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 650; white-space: nowrap; }
  .ppo-tag .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .ppo-tag.otimista { background: var(--green-wash); color: var(--green); }
  .ppo-tag.otimista .dot { background: var(--green); }
  .ppo-tag.previsivel { background: var(--status-warning-wash); color: var(--status-warning); }
  .ppo-tag.previsivel .dot { background: var(--status-warning); }
  .ppo-tag.piso { background: var(--status-critical-wash); color: var(--status-critical); }
  .ppo-tag.piso .dot { background: var(--status-critical); }
  .ppo-tag.sem-dados { background: var(--surface-2); color: var(--ink-faint); }
  .pill-neutral { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 650; background: var(--surface-2); color: var(--ink-muted); }
  .ppo-tag.sem-dados .dot { background: var(--ink-faint); }
  .ppo-tag.real { background: var(--green-wash); color: var(--green); }
  .ppo-tag.real .dot { background: var(--green); }

  .provider-row { cursor: pointer; }
  .provider-row:hover td { background: var(--surface-2); }
  .provider-row .chev { width: 15px; height: 15px; color: var(--ink-faint); }
  .row-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent;
    color: var(--ink-faint); cursor: pointer;
  }
  .row-menu-btn svg { width: 15px; height: 15px; }
  .row-menu-btn:hover { background: var(--surface-3); color: var(--ink); }

  /* Tarefas de follow-up + calendário */
  .tasks-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .tasks-filter-clear-btn { border: none; background: none; color: var(--ink-muted); font-size: 11.5px; text-decoration: underline; cursor: pointer; padding: 0; }
  .tasks-filter-clear-btn:hover { color: var(--ink); }
  .tasks-list { display: flex; flex-direction: column; gap: 8px; }
  .task-row { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
  .task-check { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
  .task-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); }
  .task-row.done .task-title { text-decoration: line-through; color: var(--ink-faint); }
  .task-meta { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--ink-muted); font-family: var(--mono); flex-shrink: 0; }
  .task-menu-btn { flex-shrink: 0; }

  /* Tabela de Planos: reordenar, ID + copiar, ações inline */
  .order-btns { display: flex; flex-direction: column; gap: 1px; }
  .order-btn {
    display: flex; align-items: center; justify-content: center; width: 20px; height: 15px;
    border: none; background: transparent; color: var(--ink-faint); cursor: pointer; padding: 0;
  }
  .order-btn svg { width: 13px; height: 13px; }
  .order-btn:hover:not(:disabled) { color: var(--ink); }
  .order-btn:disabled { opacity: 0.25; cursor: default; }
  .id-cell { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
  .copy-id-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 22px; height: 22px; border: none; background: transparent; border-radius: 5px;
    color: var(--ink-faint); cursor: pointer; padding: 0;
  }
  .copy-id-btn svg { width: 13px; height: 13px; }
  .copy-id-btn:hover { background: var(--surface-3); color: var(--ink); }
  .table-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent;
    color: var(--ink-faint); cursor: pointer;
  }
  .table-icon-btn svg { width: 15px; height: 15px; }
  .table-icon-btn:hover { background: var(--surface-3); color: var(--ink); }
  .table-icon-btn.danger:hover { background: var(--status-critical-wash); color: var(--status-critical); }
  .stage-label-input:hover, .stage-label-input:focus { border-bottom-color: var(--line-2) !important; outline: none; }
  .row-dropdown-menu {
    position: fixed; z-index: 60; display: none; flex-direction: column; gap: 2px;
    min-width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  }
  .row-dropdown-item {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 6px; border: none; background: transparent;
    color: var(--ink); font-size: 12.5px; font-weight: 600; cursor: pointer;
  }
  .row-dropdown-item svg { width: 14px; height: 14px; flex-shrink: 0; }
  .row-dropdown-item:hover { background: var(--surface-2); }
  .row-dropdown-item.danger { color: var(--status-critical); }
  .row-dropdown-item.danger:hover { background: var(--status-critical-wash); }

  .tasks-cal-nav { display: flex; gap: 6px; }
  .tasks-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--mono); text-align: center; padding-bottom: 6px; }
  .tasks-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .tasks-cal-day { position: relative; min-height: 84px; border-radius: 8px; background: var(--surface-2); border: 1px solid transparent; padding: 6px; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; }
  .tasks-cal-day:hover { border-color: var(--line-2); }
  .tasks-cal-day.other-month { background: transparent; cursor: default; }
  .tasks-cal-day .daynum { font-size: 12px; font-weight: 700; color: var(--ink-muted); flex-shrink: 0; }
  .tasks-cal-day.today { border-color: var(--green-wash-2); }
  .tasks-cal-day.today .daynum { color: var(--green); }
  .tasks-cal-day.selected { background: var(--green-wash); border-color: var(--green); }
  .task-day-chips { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; min-height: 0; }
  .task-day-chip { font-size: 9.5px; font-weight: 650; line-height: 1.4; padding: 1px 5px; border-radius: 4px; background: var(--green-wash-2); color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .task-day-chip.done { background: var(--surface-3); color: var(--ink-faint); text-decoration: line-through; }
  .task-day-chip.more { background: var(--surface-3); color: var(--ink-muted); text-align: center; }

  /* Menu lateral de Configurações */
  .settings-menu-panel { width: 260px; padding: 8px; }
  .settings-menu-panel-label {
    font-size: 10px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-faint); font-family: var(--mono); padding: 4px 8px 8px;
  }
  .settings-menu-item {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: transparent; border: none; border-radius: 8px;
    padding: 8px; cursor: pointer; font-family: var(--sans); transition: background 0.15s ease;
  }
  .settings-menu-item:hover { background: var(--surface-2); }
  .settings-menu-item .icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--green-wash-2); color: var(--green); display: flex; align-items: center; justify-content: center;
  }
  .settings-menu-item .icon svg { width: 16px; height: 16px; }
  .settings-menu-item-text { flex: 1; min-width: 0; }
  .settings-menu-item-title { font-size: 13px; font-weight: 700; color: var(--ink); }
  .settings-menu-item-desc { font-size: 11px; color: var(--ink-muted); margin-top: 2px; line-height: 1.4; }
  .callout { border: 1px dashed var(--line-2); border-radius: 14px; padding: 18px 20px; display: flex; gap: 14px; background: var(--surface); }
  .callout .icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: var(--green-wash-2); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: var(--mono); font-weight: 700; }
  .callout h3 { margin: 0 0 4px; font-size: 13px; font-weight: 650; color: var(--ink); }
  .callout p { margin: 0; font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
  .callout ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-muted); line-height: 1.6; }
  .callout li::marker { color: var(--green); }

  /* PPO page */
  .ppo-page-desc { margin: -8px 0 0; font-size: 13px; color: var(--ink-muted); line-height: 1.55; max-width: 68ch; }

  .ppo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }

  .ppo-budget-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .ppo-budget-label { font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--mono); }
  .ppo-budget-input { display: flex; align-items: baseline; gap: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px; width: fit-content; }
  .ppo-budget-input .affix { font-size: 13px; color: var(--ink-faint); font-weight: 600; }
  .ppo-budget-input input { border: none; background: none; outline: none; color: var(--ink); font-size: 18px; font-weight: 800; width: 110px; font-variant-numeric: tabular-nums; }
  .ppo-formula { font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono); line-height: 1.5; }

  .ppo-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 14px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
  .ppo-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--stripe-color); }
  .ppo-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 3px; }
  .ppo-card-label { font-size: 14.5px; font-weight: 800; }
  .ppo-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; background: color-mix(in srgb, var(--badge-color) 16%, var(--surface-2)); color: var(--badge-color); white-space: nowrap; }

  .ppo-range-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .ppo-range-label { font-size: 12px; color: var(--ink-muted); font-weight: 600; }
  .ppo-range-inputs { display: flex; align-items: center; gap: 6px; }
  .ppo-range-inputs .dash { color: var(--ink-faint); font-size: 12px; }
  .ppo-field-input { display: flex; align-items: center; gap: 4px; }
  .ppo-field-input .affix { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; }
  .ppo-num {
    width: 52px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px;
    padding: 5px 6px; font-size: 13px; font-weight: 700; color: var(--ink); text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .ppo-num:focus { outline: none; border-color: var(--stripe-color, var(--green)); }

  .ppo-result-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
  .ppo-result-label { font-size: 12px; color: var(--ink-muted); }
  .ppo-result-value { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--mono); }

  .ppo-vendas-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .ppo-vendas-block { display: flex; align-items: baseline; gap: 6px; }
  .ppo-vendas-value { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--mono); }
  .ppo-vendas-unit { font-size: 12px; color: var(--ink-muted); }
  .ppo-cpa { font-size: 11.5px; color: var(--ink-muted); }
  .ppo-cpa strong { color: var(--ink); font-variant-numeric: tabular-nums; }

  .ppo-reset { align-self: flex-start; border: none; background: none; color: var(--ink-faint); font-size: 11px; cursor: pointer; text-decoration: underline; padding: 0; }
  .ppo-reset:hover { color: var(--ink-muted); }

  :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

  @media (max-width: 1080px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .ppo-grid { grid-template-columns: 1fr 1fr; }
    .kpis-6 { grid-template-columns: repeat(3, 1fr); }
    .kpis-5 { grid-template-columns: repeat(3, 1fr); }
    .alert-secondary-grid { grid-template-columns: repeat(2, 1fr); }
    .alert-priority-grid { grid-template-columns: 1fr; }
    .perf-row { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  }
  @media (max-width: 860px) {
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; }
    .grid-2 { grid-template-columns: 1fr; }
    .ppo-grid { grid-template-columns: 1fr; }
    .ppo-budget-box { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 640px) {
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .kpis-6 { grid-template-columns: repeat(2, 1fr); }
    .kpis-5 { grid-template-columns: repeat(2, 1fr); }
    .kpis-4 { grid-template-columns: repeat(2, 1fr); }
    .alert-secondary-grid { grid-template-columns: 1fr; }
    .perf-row { grid-template-columns: repeat(2, 1fr); }
    .search-wrap { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Tela inicial ---------- */
.home-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.home-col { display: flex; flex-direction: column; gap: 16px; }
.home-brand-panel { padding: 22px 24px; }
.home-brand { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.home-brand .dot { color: var(--green); }
.home-brand-sub { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }
.home-news-list { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }
.home-news-empty { margin: 0; }
.home-news-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.home-news-top { display: flex; align-items: center; gap: 8px; }
.home-news-title { font-weight: 700; font-size: 14.5px; flex: 1; }
.home-news-body { margin: 0; color: var(--ink-muted); font-size: 13.5px; }
.home-news-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-faint); }
.home-news-meta a { color: var(--green); text-decoration: none; font-weight: 650; }
.home-news-actions { display: flex; gap: 4px; margin-left: auto; }
.home-news-actions .icon-btn { width: 26px; height: 26px; }
.home-welcome-panel { padding: 22px 24px; }
.home-welcome-panel h2 { margin: 0; font-size: 22px; }
.home-welcome-date { margin: 4px 0 0; color: var(--ink-muted); font-size: 13px; text-transform: capitalize; }
.home-today-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.home-today-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.home-info-body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.home-ia-sub { margin: 0; padding: 0 20px 20px; }
.modal-field textarea { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; color: var(--ink); font: inherit; resize: vertical; }
.modal-field textarea:focus { outline: none; border-color: var(--green); }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }

/* ---------- Dashboard (formato do Uply) ----------
   Cores dos gráficos em ordem fixa, validadas para daltonismo nos dois temas
   (skill dataviz). Amarelo, aqua e rosa têm pouco contraste no claro: por isso
   toda barra e fatia leva o número escrito ao lado. Texto nunca na cor da série. */
:root { --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181; --viz-6: #008300; }
:root[data-theme="light"] { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-5: #e87ba4; --viz-6: #008300; }

/* Cada painel é uma cópia de #tpl-dg-painel (página Dashboard e página do cliente) e empilha
   as peças como o .content faria se estivessem soltas nele. */
.dg-painel { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dg-topo [data-dg="cliente"] { max-width: 240px; }
.dg-topo .period-summary { margin-left: 0; }

.dg-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.dg-kpi {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; box-shadow: var(--shadow-card);
}
.dg-kpi-label { font-size: 12.5px; color: var(--ink-muted); }
.dg-kpi-valor {
  font-family: var(--display); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dg-kpi-delta, .dg-chip em { font-size: 12px; font-style: normal; font-weight: 500; color: var(--ink-muted); white-space: nowrap; min-height: 16px; }
.dg-kpi-delta.bom, .dg-chip em.bom { color: var(--green); }
.dg-kpi-delta.ruim, .dg-chip em.ruim { color: var(--status-critical); }
.dg-spark { position: absolute; right: 12px; bottom: 12px; width: 96px; height: 30px; overflow: visible; opacity: 0.9; }

.dg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dg-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; box-shadow: var(--shadow-card); white-space: nowrap;
}
.dg-chip-label { color: var(--ink-muted); }
.dg-chip b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dg-chip em:empty { display: none; }
.dg-chip em { min-height: 0; font-size: 11.5px; }
.dg-chip.alerta { border-color: var(--status-critical); background: var(--status-critical-wash); }
.dg-chip.alerta .dg-chip-label::before { content: "!"; display: inline-block; margin-right: 6px; font-weight: 700; color: var(--status-critical); }
.dg-chip.alerta b { color: var(--status-critical); }
/* Página do cliente: o chip "Ticket médio" é o campo do ticket dele. */
.dg-chip-campo { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 600; color: var(--ink); }
.dg-chip-campo input {
  width: 64px; min-width: 0; padding: 0 0 1px; border: none; border-bottom: 1px dashed var(--line-2); background: none;
  font: inherit; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.dg-chip-campo input::-webkit-outer-spin-button, .dg-chip-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-chip-campo input:focus { outline: none; border-bottom: 1px solid var(--green); }

.dg-evolucao-panel { margin-top: 16px; }
.dg-evolucao-panel .panel-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.dg-chart { width: 100%; min-width: 0; overflow: hidden; }
.dg-chart svg { display: block; }
.dg-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-muted); }
.dg-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.dg-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dg-legenda-topo { margin: 0 0 10px; }

.dg-grade { stroke: var(--line); stroke-width: 1; }
.dg-base { stroke: var(--line-2); stroke-width: 1; }
.dg-eixo { fill: var(--ink-muted); font-family: var(--sans); font-size: 11px; }
.dg-valor { fill: var(--ink); font-family: var(--sans); font-size: 11.5px; font-weight: 600; }
.dg-area { fill-opacity: 0.12; }
.dg-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dg-cruz { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.dg-ponto { stroke: var(--surface); stroke-width: 2; }
.dg-fatia, .dg-pizza circle { stroke: var(--surface); stroke-width: 2; }
.dg-chart g[data-dg-tip]:hover path { filter: brightness(1.08); }

.dg-tip {
  position: fixed; z-index: 90; pointer-events: none; display: flex; flex-direction: column; gap: 3px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  box-shadow: var(--shadow-pop); font-size: 12.5px; color: var(--ink); max-width: 240px;
}
.dg-tip b { font-weight: 600; }
.dg-tip span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dg-tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

.dg-abas { margin-top: 24px; align-self: flex-start; width: fit-content; }
.dg-tab { margin-top: 12px; }
.dg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.dg-panel { padding: 18px 20px; min-width: 0; }
.dg-panel h3 { margin: 0 0 14px; font-size: 15px; }
.dg-panel-wide { grid-column: 1 / -1; }
.dg-empty { margin: 0; color: var(--ink-muted); font-size: 13.5px; }

.dg-pizza { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dg-pizza svg { flex: 0 0 auto; }
.dg-pizza-legenda { list-style: none; margin: 0; padding: 0; flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dg-pizza-legenda li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; align-items: center; gap: 8px; font-size: 13px; }
.dg-pizza-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.dg-pizza-legenda span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-pizza-legenda b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-pizza-legenda em { font-style: normal; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }

.dg-comp-linha { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 5px 0; }
.dg-comp-nome { font-size: 13px; color: var(--ink-muted); }
.dg-comp-barra { display: flex; align-items: center; gap: 8px; height: 16px; padding-right: 96px; }
.dg-comp-barra i { flex: 0 0 auto; display: block; height: 10px; border-radius: 0 4px 4px 0; }
.dg-comp-barra.ant i { background: var(--line-2); }
.dg-comp-barra.atu i { background: var(--viz-1); }
.dg-comp-barra span { font-size: 12px; white-space: nowrap; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dg-comp-barra.atu span { color: var(--ink); font-weight: 600; }

.dg-hbarras { display: flex; flex-direction: column; gap: 10px; }
.dg-hb { display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.dg-hb-nome { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-hb-trilho { height: 12px; }
.dg-hb-trilho i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.dg-hb b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }

.dg-operacao-head { margin-top: 32px; }

@media (max-width: 1200px) { .dg-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .dg-grid { grid-template-columns: minmax(0, 1fr); }
  .dg-topo [data-dg="cliente"] { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .dg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dg-kpi-valor { font-size: 22px; }
  .dg-spark { display: none; }
  .dg-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dg-chip { font-size: 12px; padding: 5px 10px; }
}

/* ---------- Central de provedores, Tarefas e ficha do lead (enxugados em 28/09/2026) ---------- */
#page-provedores .kpis { margin-top: 4px; }
.central-abas { margin-top: 24px; align-self: flex-start; width: fit-content; }
.central-aba { margin-top: 12px; }
.tarefas-visao { flex-shrink: 0; }
.ficha-mais-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: none; border-radius: 6px;
  background: transparent; color: var(--ink-muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.ficha-mais-btn:hover { color: var(--ink); }
.ficha-mais-btn svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
.ficha-mais-btn.aberto svg { transform: rotate(90deg); }
.ficha-mais-dados { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.ficha-mais-dados > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 500; color: var(--ink-muted); padding: 4px 0;
}
.ficha-mais-dados > summary::-webkit-details-marker { display: none; }
.ficha-mais-dados > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s ease; margin-right: 2px;
}
.ficha-mais-dados[open] > summary::before { transform: rotate(45deg); }
.ficha-mais-dados > summary:hover { color: var(--ink); }
.ficha-mais-n { font-size: 12px; color: var(--ink-muted); font-weight: 400; }
.ficha-mais-n:not(:empty)::before { content: "· "; }
.ficha-mais-corpo { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
@media (max-width: 640px) { .central-abas { width: 100%; } }

/* ---------- Relatórios (Geral e Avançados, 28/09/2026) ---------- */
.rel-topo .filter-row { gap: 10px; }
.rel-datas { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); }
.rel-datas input {
  font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink);
}
.rel-abas { display: flex; gap: 2px; margin-top: 18px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.rel-abas[hidden] { display: none; }
.rel-abas button {
  border: none; background: none; padding: 10px 12px; font: inherit; font-size: 13.5px; color: var(--ink-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.rel-abas button:hover { color: var(--ink); }
.rel-abas button.active { color: var(--ink); border-bottom-color: var(--green); font-weight: 500; }
.rel-periodo { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.rel-avisos { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rel-avisos:empty { display: none; }
.rel-aviso {
  margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--status-warning-wash);
  color: var(--ink); font-size: 12.5px; line-height: 1.45;
}
.rel-aviso::before { content: "!"; display: inline-block; width: 16px; font-weight: 700; color: var(--status-warning); }
.rel-aba { margin-top: 14px; display: flex; flex-direction: column; gap: 16px; }
.rel-aba[hidden] { display: none; }
.rel-panel { padding: 18px 20px; gap: 12px; }
.rel-panel h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rel-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rel-panel-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.rel-nota { margin: 0; font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.rel-nota:empty { display: none; }
.rel-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rel-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rel-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rel-kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-card); min-width: 0;
}
.rel-panel .rel-kpi { background: var(--surface-2); border-color: transparent; box-shadow: none; }
.rel-kpi span { font-size: 12.5px; color: var(--ink-muted); }
.rel-kpi b { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel-tabela { width: 100%; }
.rel-tabela th.num, .rel-tabela td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rel-tabela .rel-total td { font-weight: 600; border-top: 1px solid var(--line-2); }
.rel-verde { color: var(--green); }
.rel-vermelho { color: var(--status-critical); }
.rel-cinza { color: var(--ink-muted); }
.rel-inativo td { opacity: 0.55; }
.rel-pct {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.rel-pct.bom { background: var(--green-wash-2); color: var(--green); }
.rel-pct.medio { background: var(--status-warning-wash); color: var(--ink); }
.rel-pct.ruim { background: var(--status-critical-wash); color: var(--status-critical); }
.rel-bolinha { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.rel-etapa { display: grid; grid-template-columns: 150px minmax(0, 1fr) 250px; gap: 12px; align-items: center; padding: 6px 0; }
.rel-etapa-nome { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.rel-etapa-nome i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rel-etapa-trilho { height: 14px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.rel-etapa-trilho div { height: 100%; border-radius: 0 4px 4px 0; }
.rel-etapa-extra { font-size: 12px; color: var(--ink-muted); text-align: right; }
.rel-etapa-extra b { color: var(--ink); font-weight: 600; }
.rel-filtro-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.rel-sub { display: block; font-size: 11.5px; color: var(--ink-muted); font-weight: 400; }
.rel-source {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-muted);
}
.rel-source.pago { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.rel-status-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rel-status-chip.good { background: var(--green-wash-2); color: var(--green); }
.rel-status-chip.critical { background: var(--status-critical-wash); color: var(--status-critical); }
.rel-status-chip.warn { background: var(--status-warning-wash); color: var(--ink); }
.rel-linha-lead { cursor: pointer; }
.rel-linha-lead:hover td { background: var(--surface-2); }
.rel-link { border: none; background: none; color: var(--green); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.rel-link:hover { text-decoration: underline; }
.rel-config { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.rel-config[hidden] { display: none; }
.rel-config-linha { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rel-config-linha .modal-field { margin: 0; min-width: 200px; }
.rel-status { font-size: 12.5px; color: var(--ink-muted); }
.rel-wl-linha { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 0; }
.rel-wl-nome { font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-wl-barra { display: flex; align-items: center; gap: 8px; height: 14px; padding-right: 40px; }
.rel-wl-barra i { flex: 0 0 auto; display: block; height: 9px; border-radius: 0 4px 4px 0; }
.rel-wl-barra span { font-size: 12px; font-variant-numeric: tabular-nums; }
.rel-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rel-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rel-lista li:last-child { border-bottom: none; }
.rel-lista-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.rel-lista-nome em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink-muted); }
.rel-lista-num { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.rel-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rel-h-bom { color: var(--green); }
.rel-h-ruim { color: var(--status-critical); }
@media (max-width: 1100px) {
  .rel-kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rel-colunas { grid-template-columns: minmax(0, 1fr); }
  .rel-etapa { grid-template-columns: 130px minmax(0, 1fr); }
  .rel-etapa-extra { grid-column: 2; text-align: left; }
}
@media (max-width: 700px) {
  .rel-kpis, .rel-kpis-4, .rel-kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-etapa { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rel-etapa-extra { grid-column: auto; }
  .rel-datas { flex: 1 1 100%; min-width: 0; }
  .rel-datas input { flex: 1 1 0; width: 0; min-width: 0; font-size: 16px; }
}
@media print {
  .rel-topo, .rel-abas, #rel-com-config-btn, #rel-exportar, .rel-config { display: none !important; }
}

/* ---------- Mapa da rede (KMZ, 28/09/2026) ---------- */
.mapa-importar { cursor: pointer; }
.mapa-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.mapa-status { font-size: 12.5px; color: var(--ink-muted); }
.mapa-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: start; }
.mapa-lateral { padding: 16px; gap: 12px; }
.mapa-lateral section { display: flex; flex-direction: column; gap: 12px; }
.mapa-lateral section[hidden] { display: none; }
.mapa-lateral .modal-field { margin: 0; }
.mapa-area { padding: 0; overflow: hidden; position: relative; }
#mapa-leaflet { height: calc(100vh - 290px); min-height: 460px; width: 100%; background: var(--surface-2); }
#mapa-leaflet.mapa-mira { cursor: crosshair; }
#mapa-leaflet.mapa-mira .leaflet-interactive { cursor: crosshair; }
.mapa-vazio {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 500; max-width: 380px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 13px; color: var(--ink-muted);
}
.mapa-vazio[hidden] { display: none; }
.mapa-vazio p { margin: 0; }
.mapa-vazio b { color: var(--ink); font-weight: 600; }
.mapa-vazio .btn-solid { align-self: center; cursor: pointer; }
.mapa-info { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.mapa-camadas { display: flex; flex-direction: column; gap: 8px; }
.mapa-camadas label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.mapa-camadas b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.mapa-leg { width: 14px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.mapa-leg.cobertura { background: color-mix(in srgb, var(--viz-3) 25%, transparent); box-shadow: inset 0 0 0 1.5px var(--viz-3); }
.mapa-leg.rota { height: 3px; background: var(--viz-1); }
.mapa-leg.caixa { width: 10px; border-radius: 50%; background: var(--viz-2); }
.mapa-leg.manut { width: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--viz-5); }
.mapa-busca-lista, .manut-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.mapa-busca-lista:empty { display: none; }
.mapa-busca-lista button, .manut-ver {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; border: none;
  background: none; padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.mapa-busca-lista button:hover, .manut-ver:hover { background: var(--surface-2); }
.mapa-busca-lista span, .manut-ver span { font-size: 11.5px; color: var(--ink-muted); }
.mapa-nada { font-size: 12.5px; color: var(--ink-muted); padding: 6px 8px; }
.mapa-viab-form { display: flex; gap: 8px; }
.mapa-viab-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
}
.mapa-local { align-self: flex-start; }
.mapa-viab-resultado { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mapa-viab-resultado[hidden] { display: none; }
.mapa-res-titulo { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 500; }
.mapa-res-titulo.bom { color: var(--green); }
.mapa-res-titulo.ruim { color: var(--status-critical); }
.mapa-res-titulo.neutro { color: var(--ink); }
.mapa-res-aprox { font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: var(--status-warning); background: var(--status-warning-wash); border-radius: 999px; padding: 2px 8px; vertical-align: middle; white-space: nowrap; }
.mapa-res-end { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.mapa-res { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 12.5px; }
.mapa-res dt { color: var(--ink-muted); }
.mapa-res dd { margin: 0; font-weight: 500; text-align: right; }
.mapa-raio { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); }
.mapa-raio input { width: 80px; font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.mapa-dica { margin: 0; font-size: 12.5px; color: var(--ink); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.mapa-botoes { display: flex; gap: 8px; }
.mapa-sub { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.manut-lista li { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.manut-lista li:last-child { border-bottom: none; }
.manut-lista li.feita .manut-ver b { text-decoration: line-through; color: var(--ink-muted); }
.manut-acoes { display: flex; gap: 12px; padding: 0 8px 4px; }
.manut-excluir { color: var(--status-critical); }
.leaflet-container { font-family: var(--sans); }
.leaflet-popup-content { font-size: 12.5px; line-height: 1.45; }
.leaflet-popup-content span { color: #626866; }
:root:not([data-theme="light"]) #mapa-leaflet .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9); }
@media (max-width: 1000px) {
  .mapa-layout { grid-template-columns: minmax(0, 1fr); }
  .mapa-area { order: -1; }
  #mapa-leaflet { height: 58vh; min-height: 320px; }
}
@media (max-width: 640px) {
  .mapa-viab-form input, .mapa-lateral input, .mapa-lateral textarea, .mapa-lateral select { font-size: 16px; }
}

/* ---------- Chat interno (28/09/2026) ---------- */
.chat-meu-status { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-muted); }
.chat-inbox {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); height: calc(100vh - 170px); min-height: 480px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card);
}
.chat-lista { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; padding: 12px; gap: 10px; }
.chat-abas { display: flex; }
.chat-abas .preset-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.chat-aba-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-critical); display: inline-block; }
.chat-aba-dot[hidden] { display: none; }
.chat-painel { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.chat-painel[hidden] { display: none; }
.chat-busca {
  font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box;
}
.chat-filtros { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-filtro {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 11.5px; color: var(--ink-muted); cursor: pointer;
}
.chat-filtro.active { border-color: var(--ink); color: var(--ink); }
.chat-itens { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.chat-grupo-rotulo { font-size: 11.5px; color: var(--ink-muted); padding: 10px 8px 4px; }
.chat-item {
  display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; text-align: left;
  padding: 8px; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer;
}
.chat-item:hover { background: var(--surface-2); }
.chat-item.ativa { background: var(--surface-3); }
.chat-avatar {
  position: relative; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; background: var(--surface-3); font-size: 12px; font-weight: 600; color: var(--ink);
}
.chat-avatar.grupo { border-radius: 9px; font-size: 15px; color: var(--ink-muted); }
.chat-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--line-2); }
.chat-avatar .chat-dot { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px var(--surface); }
.chat-dot.disponivel { background: var(--green); }
.chat-dot.ocupado { background: var(--status-critical); }
.chat-dot.ausente { background: var(--status-warning); }
.chat-dot.pausa { background: var(--ink-muted); }
.chat-dot.offline { background: var(--line-2); }
.chat-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-item-txt b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-txt span { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-nao { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--green); color: var(--green-contrast); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.chat-nada { font-size: 12.5px; color: var(--ink-muted); padding: 8px; margin: 0; }
.chat-novo { align-self: flex-start; }
.chat-conversa { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.chat-vazio { margin: auto; font-size: 13px; color: var(--ink-muted); padding: 24px; text-align: center; }
.chat-vazio[hidden] { display: none; }
.chat-thread { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-thread[hidden] { display: none; }
.chat-thread-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.chat-thread-head div { display: flex; flex-direction: column; min-width: 0; }
.chat-thread-head b { font-size: 14px; font-weight: 600; }
.chat-thread-head span { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-voltar { display: none; }
.chat-mensagens { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.chat-dia { text-align: center; margin: 8px 0; }
.chat-dia span { font-size: 11.5px; color: var(--ink-muted); background: var(--surface-2); padding: 3px 10px; border-radius: 999px; }
.chat-msg {
  align-self: flex-start; max-width: 70%; background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px; padding: 7px 10px 5px; display: flex; flex-direction: column; gap: 2px;
}
.chat-msg.minha { align-self: flex-end; background: var(--green-wash-2); border-color: transparent; border-radius: 12px 4px 12px 12px; }
.chat-msg p { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg time { align-self: flex-end; font-size: 10.5px; color: var(--ink-muted); }
.chat-autor { font-size: 11.5px; font-weight: 600; color: var(--viz-1); }
.chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-composer textarea {
  flex: 1; resize: none; font: inherit; font-size: 13.5px; line-height: 1.45; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); max-height: 140px;
}
.chat-grupo-pessoas { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.chat-grupo-pessoas label { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.chat-grupo-pessoas label:hover { background: var(--surface-2); }
.chat-grupo-pessoas em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ink-muted); }
@media (max-width: 900px) {
  .chat-inbox { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 150px); }
  .chat-lista { border-right: none; }
  .chat-inbox .chat-conversa { display: none; }
  .chat-inbox.thread-open .chat-lista { display: none; }
  .chat-inbox.thread-open .chat-conversa { display: flex; }
  .chat-voltar { display: inline-flex; }
  .chat-msg { max-width: 88%; }
  .chat-composer textarea, .chat-busca { font-size: 16px; }
}

/* ---------- Atendimentos: fila, aceitar e robô (28/09/2026) ---------- */
.wa-fila-pills { flex-wrap: wrap; }
.wa-fila-pills .preset-btn { padding: 6px 9px; }
.wa-aceitar-mini {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--green); padding: 1px 8px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--green); cursor: pointer; white-space: nowrap;
}
.wa-aceitar-mini:hover { background: var(--green-wash-2); }
.wa-item-meta { display: flex; align-items: center; gap: 4px; }
.wa-aceitar-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ink);
}
.wa-aceitar-box[hidden] { display: none; }
.wa-composer-row[hidden] { display: none; }
.wa-robo-btn { display: inline-flex; align-items: center; gap: 8px; }
.wa-robo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); display: inline-block; }
.wa-robo-dot.ligado { background: var(--green); }
.wa-robo-status { margin: 0; font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-robo-aviso { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); background: var(--status-warning-wash); border-radius: 8px; padding: 10px 12px; }
.wa-robo-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.wa-robo-check[hidden] { display: none; }
.wa-robo-audio { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.wa-robo-audio-titulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.wa-robo-audio-titulo .rel-cinza { font-weight: 400; margin-left: 6px; }
.wa-robo-audio .modal-field input[hidden] { display: none; }
.wa-robo-amostra-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .wa-robo-audio .modal-grid-2 { grid-template-columns: 1fr; } }

/* Rascunho do robô e viabilidade na ficha (29/09/2026) */
.wa-robo-rotulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ficha-viab { align-self: flex-start; margin: -2px 0 6px; }

/* ---------- Pipeline: cartão com ADS, vendedor e dias na etapa ---------- */
.lead-card-top { display: flex; align-items: flex-start; gap: 6px; }
.lead-card-top .lead-name { flex: 1; min-width: 0; }
.lead-ads-tag {
  font-size: 10px; font-weight: 700; line-height: 1.4; padding: 1px 6px; border-radius: 999px;
  background: var(--green-wash-2); color: var(--green); flex-shrink: 0; margin-top: 1px;
}
.lead-days {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; margin-top: 1px;
  font-size: 12px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lead-days svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.lead-days.sla { color: var(--status-critical); }
.lead-seller { font-size: 12px; color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chip de Viável: verde viável, âmbar tracejado "falta avaliar", cinza não viável. */
.lead-viavel-chip {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; white-space: nowrap;
  font: inherit; font-size: 12px; font-weight: 650; line-height: 1;
  padding: 5px 10px 5px 8px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
}
.lead-viavel-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lead-viavel-chip.v1 { background: var(--green-wash-2); color: var(--green); }
.lead-viavel-chip.vnull { background: var(--status-warning-wash); color: var(--status-warning); border: 1px dashed var(--status-warning); }
.lead-viavel-chip.v0 { background: var(--surface-3); color: var(--ink-muted); }
.lead-viavel-chip.v1:hover, .lead-viavel-chip.v0:hover { border-color: currentColor; }
.lead-viavel-chip.vnull:hover { border-style: solid; }
/* Sugestão da IA: ainda uma pergunta, então tracejado; verde porque o palpite é sobre Viável. */
.lead-viavel-chip.vsug { background: transparent; color: var(--green); border: 1px dashed var(--green); }
.lead-viavel-chip.vsug:hover { border-style: solid; background: var(--green-wash-2); }
.lead-viavel-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.viavel-ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; }
#pipeline-ads-toggle.active { border-color: var(--green); color: var(--green); background: var(--green-wash); }

/* ---------- Ficha da negociação (abas do modal do lead) ---------- */
.ficha-head { display: flex; align-items: center; gap: 10px; }
.ficha-head h2 { margin: 0; flex: 1; }
.ficha-id { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.ficha-tabs { flex-wrap: wrap; }
.ficha-pane { display: flex; flex-direction: column; gap: 12px; min-height: 220px; }
.ficha-form-row { display: flex; gap: 8px; align-items: center; }
.ficha-form-row input[type="text"], .ficha-form-row input[type="number"], .ficha-form-row input[type="date"] {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; color: var(--ink); font: inherit;
}
.ficha-form-row input:focus { outline: none; border-color: var(--green); }
.ficha-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.ficha-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.ficha-item-col { flex-direction: column; align-items: flex-start; gap: 4px; }
.ficha-item-main { flex: 1; min-width: 0; }
.ficha-item-meta { color: var(--ink-faint); font-size: 12px; white-space: nowrap; }
.ficha-done { text-decoration: line-through; color: var(--ink-faint); }
.ficha-total { margin: 0; text-align: right; color: var(--ink-muted); }
.ficha-total strong { color: var(--green); font-size: 16px; }
.ficha-ads-chips { display: flex; gap: 6px; }
.ficha-jornada-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* ---------- Configurações comerciais ---------- */
.cfg-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); white-space: nowrap; }
.cfg-ads-toggle { cursor: pointer; }
.cfg-ads-toggle.cfg-off { opacity: 0.35; border-color: var(--line); color: var(--ink-faint); background: transparent; }
.cfg-active-toggle { border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; padding: 3px 10px; }
.cfg-rename-input { background: var(--surface-2); border: 1px solid var(--green); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; }

/* ---------- Assistente IA ---------- */
.ai-chat-panel { display: flex; flex-direction: column; max-width: 760px; min-height: 480px; }
.ai-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px; overflow-y: auto; max-height: 55vh; }
.ai-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.ai-msg-bot { background: var(--surface-2); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-msg-user { background: var(--green-wash-2); border: 1px solid var(--green); align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-input-row { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.ai-input-row input { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; color: var(--ink); font: inherit; }
.ai-input-row input:focus { outline: none; border-color: var(--green); }
.lead-card-foot { display: flex; align-items: center; gap: 8px; }
.lead-card-foot .lead-seller { margin-left: auto; }

/* ===== Refino SaaS (direção Kommo/Pipedrive): tipografia de rótulos,
   sidebar escura fixa, sombras sutis e feedback de hover ===== */

/* Rótulos em sans e caixa normal (o mono fica só em código e IDs) */
.perf-label, .kpi-label, .modal-field label, .comparison-card-tag,
.event-col-head, .card-layout-pop strong, .ppo-budget-label, thead th {
  font-family: var(--sans); text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 600;
}
.tasks-cal-weekdays, .date-picker-weekdays { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.lead-meta, .lead-phone, .pipeline-count, .task-meta, .ttask-count, .ttask-comments-btn,
.comment-item-head span, .dup-count, .evo-labels, .period-summary, .kpi-delta,
.dg-comp-head, .ppo-formula, .ppo-result-value, .ppo-vendas-value,
.rank-badge, .callout .icon, .date-picker-quick button span, .version-tag,
.login-loading-screen, .alert-priority-see-all, .kpi-sub, .pill-neutral {
  font-family: var(--sans);
}
.nav-section-label { font-family: var(--sans); letter-spacing: 0.08em; }

/* Sidebar escura nos dois temas, com o verde da marca como destaque */
.sidebar { background: var(--side-bg); border-right-color: var(--side-line); }
.sidebar-brand .name, .client-nav-name { color: var(--side-strong); }
.sidebar .nav-section-label { color: var(--side-faint); }
.sidebar .nav-item { color: var(--side-muted); }
.sidebar .nav-item:hover { background: var(--side-hover); color: var(--side-ink); }
.sidebar .nav-item.active { background: var(--side-active-bg); color: var(--side-active-ink); }
.sidebar .collapse-btn { background: transparent; border-color: var(--side-line); color: var(--side-muted); }
.sidebar .collapse-btn:hover { color: var(--side-ink); border-color: var(--side-faint); }
.sidebar .version-tag { color: var(--side-faint); }

/* Profundidade discreta: uma elevação para cartões, outra para flutuantes */
.panel, .perf-row, .kpi, .event-col, .filter-bar, .home-card, .callout { box-shadow: var(--shadow-card); }
.modal-box, .card-layout-pop, .row-menu, .date-picker-pop { box-shadow: var(--shadow-pop); }

/* Meta do mês: o destaque do Dashboard */
.meta-hero {
  background: linear-gradient(135deg, var(--green-wash) 0%, var(--surface) 55%);
  border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: 14px; padding: 20px 24px; margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.meta-hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.meta-hero-kicker { font-size: 12px; font-weight: 700; color: var(--green); }
.meta-hero-head h2 { margin: 2px 0 0; font-size: 22px; letter-spacing: -0.01em; }
.meta-hero-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meta-hero-dias { font-size: 12.5px; color: var(--ink-muted); font-weight: 600; }
.meta-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.meta-hero-item { display: flex; flex-direction: column; gap: 7px; }
.meta-hero-label { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.meta-hero-num { display: flex; align-items: baseline; gap: 7px; }
.meta-hero-num b { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.meta-hero-num span { font-size: 15px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.meta-bar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meta-bar-fill { height: 100%; border-radius: 999px; background: var(--green); transition: width 0.5s ease; }
.meta-bar-fill.done { background: var(--green-strong); }
.meta-hero-pct { font-size: 12px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.meta-hero-pct.done { color: var(--green); }
.meta-hero-vazio { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.meta-hero-vazio p { margin: 0; font-size: 13.5px; color: var(--ink-muted); }

/* Placar dos vendedores (dashboard do cliente) */
.placar-row { display: grid; grid-template-columns: 160px 1fr 150px; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.placar-row:last-child { border-bottom: none; }
.placar-nome { font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placar-num { font-size: 13px; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.placar-num b { font-size: 17px; color: var(--ink); }
.placar-num em { font-style: normal; font-weight: 700; margin-left: 4px; }
.placar-num em.done { color: var(--green); }
.vend-meta { width: 80px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; color: var(--ink); font: inherit; text-align: right; }
.vend-meta:focus { outline: none; border-color: var(--green); }

/* Segmentos */
.segments-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.segment-item { display: flex; align-items: center; gap: 4px; }
.segment-apply { flex: 1; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.segment-apply:hover { border-color: var(--green); }
.segment-del { background: none; border: none; color: var(--ink-faint); font-size: 18px; cursor: pointer; padding: 0 6px; line-height: 1; }
.segment-del:hover { color: var(--status-critical); }
#segments-pop { min-width: 260px; left: 0; right: auto; }

/* Campos personalizados no modal do lead */
.lead-custom-fields:empty { display: none; }

/* Arquivos na ficha */
.file-item { position: relative; padding-right: 150px; cursor: default; }
.file-acoes { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; }
.file-acoes .btn-outline { padding: 4px 10px; font-size: 11.5px; }

/* Consolidado */
.cons-up { color: var(--green) !important; }
.cons-down { color: var(--status-critical) !important; }

@media (max-width: 700px) {
  .placar-row { grid-template-columns: 1fr; gap: 6px; }
  .placar-num { text-align: left; }
}

/* Ações respondem ao toque */
.btn-solid:hover { background: var(--green-strong); }
.btn-outline:hover { background: var(--surface-2); }

/* ===== Sistema visual v3: componentes =====
   Folha de conteúdo sobre o papel do menu; hierarquia por tamanho e peso
   leve, não por cor; verde só em estado ativo, progresso e sinal positivo. */

body { background: var(--paper); font-feature-settings: "cv11", "ss01"; letter-spacing: -0.006em; }
.app-shell { background: var(--paper); }

/* A folha: o conteúdo rola dentro dela, o menu fica parado ao lado */
@media (min-width: 901px) {
  .main {
    background: var(--bg); margin: 8px 8px 8px 0; height: calc(100vh - 16px);
    border: 1px solid var(--line); border-radius: 14px; overflow-y: auto; box-shadow: var(--shadow-card);
  }
  .topbar { border-radius: 14px 14px 0 0; }
}
@media (max-width: 900px) { .main { background: var(--bg); } }
@media print {
  .main { height: auto !important; overflow: visible !important; margin: 0 !important; border: none !important; box-shadow: none !important; }
  body, .app-shell { background: #fff !important; }
}

/* Menu lateral no papel: item ativo vira uma pequena folha branca */
.sidebar { background: var(--side-bg); border-right: none; }
.sidebar .nav-item { font-weight: 500; }
.sidebar .nav-item.active { box-shadow: var(--shadow-raise); }
.sidebar .nav-item.active svg { color: var(--green); }
.nav-section-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.sidebar .collapse-btn { background: transparent; border-color: var(--line-2); }

/* Barra do topo e busca */
.topbar { background: var(--bg); border-bottom-color: var(--line); padding: 10px 24px; }
.search-wrap { background: var(--surface); border-color: var(--line); border-radius: 8px; box-shadow: var(--shadow-card); }
.user-block .avatar { font-family: var(--sans); font-weight: 600; background: var(--surface-3); color: var(--ink); }

/* Títulos e números: Inter Tight em peso leve, a hierarquia vem do tamanho */
.page-header h1 { font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -0.022em; }
.panel-head h2, .dg-panel h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.012em; }
.modal-box h2 { font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.018em; }
.kpi-icon { display: none; }
.kpi { padding: 16px 18px 15px; gap: 6px; box-shadow: var(--shadow-card); }
.kpi-label { font-weight: 500; color: var(--ink-muted); }
.kpi-value { font-family: var(--display); font-size: 30px; font-weight: 500; letter-spacing: -0.03em; }
.kpi.accent .kpi-value, .perf-value.accent { color: var(--ink); }
.perf-value { font-family: var(--display); font-size: 21px; font-weight: 500; letter-spacing: -0.02em; }
.perf-label { font-weight: 500; }

/* Cartões e painéis: borda fina, sombra quase imperceptível */
.panel { border-radius: 12px; box-shadow: var(--shadow-card); }
.modal-box { border-radius: 14px; box-shadow: var(--shadow-pop); border-color: var(--line); }
.modal-section-label { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.modal-field label { color: var(--ink-muted); }
.modal-field input, .modal-field select, .modal-field textarea { border-radius: 8px; }
.modal-grid-2 > *, .modal-grid-3 > * { min-width: 0; }
.modal-field input, .modal-field select { width: 100%; min-width: 0; }

/* Botões: grafite para a ação principal, contorno para o resto */
.btn-solid { background: var(--action); color: var(--action-ink); font-weight: 500; border-radius: 8px; padding: 8px 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.08); }
.btn-solid:hover { background: var(--action-hover); }
.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-outline { background: var(--surface); border-color: var(--line-2); font-weight: 500; border-radius: 8px; box-shadow: var(--shadow-card); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--line-2); }

/* Controles segmentados: o selecionado sobe como uma folha, sem encher de verde */
.preset-pills, .tabs { background: var(--surface-2); border-color: transparent; border-radius: 9px; }
.preset-btn, .tab { font-weight: 500; }
.preset-btn.active, .tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-raise); }
.select-pill { background-color: var(--surface); border-color: var(--line-2); font-weight: 500; box-shadow: var(--shadow-card); }

/* Chips e selos */
.chip { font-weight: 500; border-radius: 6px; padding: 3px 9px 3px 7px; }
.pill-neutral { font-weight: 500; }

/* Tabelas: cabeçalho discreto, sem faixa cinza */
thead th { background: transparent; border-top: none; color: var(--ink-muted); font-weight: 500; font-size: 12px; }
tbody td.name { font-weight: 500; }

/* Meta do mês: o destaque da página. Números grandes e leves; a marca na
   barra mostra onde a meta deveria estar hoje. */
.meta-hero { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px 22px; box-shadow: var(--shadow-card); }
.meta-hero-kicker { color: var(--ink-muted); font-weight: 500; font-size: 13px; }
.meta-hero-head h2 { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; }
.meta-hero-grid { gap: 36px; }
.meta-hero-item { gap: 9px; }
.meta-hero-num b { font-family: var(--display); font-weight: 400; font-size: 48px; letter-spacing: -0.04em; line-height: 0.95; }
.meta-hero-num span { font-size: 16px; font-weight: 500; }
.meta-bar { position: relative; height: 6px; overflow: visible; }
.meta-bar-fill { background: var(--green); }
.meta-bar-fill.done { background: var(--green-strong); }
.meta-bar-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: 0.55; }
.meta-hero-pct { font-weight: 500; }
.meta-hero-legenda { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-muted); display: flex; align-items: center; gap: 7px; }
.meta-hero-legenda i { display: inline-block; width: 2px; height: 12px; border-radius: 1px; background: var(--ink); opacity: 0.55; }
.meta-hero-vazio p { color: var(--ink-muted); }

/* Ticket editável no mesmo peso dos outros números */
.kpi-edit-input { font-family: var(--display); font-size: 30px; font-weight: 500; letter-spacing: -0.03em; }
.kpi-value-row .affix { font-weight: 500; }

/* ---------- Menu lateral no celular ----------
   Até 900px a barra lateral vira gaveta: fica escondida, abre pelo botão ☰ do topo por cima
   do conteúdo, com fundo escurecido, e fecha tocando fora, escolhendo uma página ou com Esc.
   Substitui a antiga ".sidebar { position: fixed }", que deixava a barra sempre aberta em cima da página.
   Fechada, fica com visibility: hidden, e então ninguém chega nela pelo Tab. */
.menu-btn, .sidebar-backdrop { display: none; }
@media (max-width: 900px) {
  .menu-btn { display: flex; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(280px, 85vw); height: 100%;
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform 0.2s ease; box-shadow: var(--shadow-pop); }
  #collapse-btn { display: none; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.45);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  body.menu-aberto { overflow: hidden; }
}

/* ---------- Botões de período e abas no celular ----------
   Até 640px cada grupo (.preset-pills) ocupa a largura toda e quebra em linhas inteiras,
   com os botões esticando para preencher cada linha. Antes os grupos vazavam do quadro
   (Pipeline, Contatos) ou espremiam o texto em 2–3 linhas (Biblioteca, abas de Análises).
   Rolagem lateral foi descartada de propósito: esconderia opções como "Personalizado".
   A regra antiga ".search-wrap { display: none }" era para a busca do topo, mas escondia também
   as buscas da Central de Provedores, da Pipeline e de Contatos; aqui elas voltam, na largura toda. */
@media (max-width: 640px) {
  .preset-pills { display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; }
  .preset-pills .preset-btn { flex: 1 1 auto; white-space: nowrap; text-align: center; }
  .card-layout-wrap:has(> .preset-pills) { flex: 1 1 100%; min-width: 0; }
  .content .search-wrap { display: flex; width: 100% !important; max-width: 100%; }
}

/* Administração > Empresa */
.empresa-panel { max-width: 760px; gap: 12px; }
.empresa-panel .panel-head { margin-bottom: 4px; }
.empresa-links { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.empresa-links a { color: var(--green); text-underline-offset: 2px; }
.empresa-acoes { max-width: 760px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; }
.empresa-acoes .modal-error { margin: 0 auto 0 0; }
/* ---------- Carteira na tela Início (equipe) ----------
   Todos os clientes ativos numa tabela só: resumo do período, filtros, ordenação
   pelo cabeçalho e sinais de atenção. Código em src/front/29-carteira-inicio.js. */
.carteira-panel { padding: 0; overflow: hidden; }
.carteira-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 20px 20px 0; }
.carteira-head h2 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.018em; }
.carteira-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.carteira-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.carteira-acoes .refresh-note:empty { display: none; }
.carteira-resumo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  margin: 18px 20px 0; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.carteira-resumo > div { background: var(--surface); padding: 12px 16px 13px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.carteira-resumo span { font-size: 12px; color: var(--ink-muted); }
.carteira-resumo b { font-family: var(--display); font-size: 23px; font-weight: 500; letter-spacing: -0.025em; white-space: nowrap; }
.carteira-resumo small { font-size: 11.5px; color: var(--ink-faint); }
.carteira-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 16px 20px 12px; }
.carteira-barra .search-wrap { width: 240px; max-width: 100%; }
.carteira-cont { font-variant-numeric: tabular-nums; color: var(--ink-faint); margin-left: 2px; }
.preset-btn.active .carteira-cont { color: var(--ink-muted); }
.carteira-tabela { min-width: 1060px; }
.carteira-tabela thead th { padding: 8px 12px; white-space: nowrap; }
.carteira-tabela tbody td { padding: 11px 12px; vertical-align: middle; }
.carteira-tabela th:first-child, .carteira-tabela td:first-child { padding-left: 20px; }
.carteira-tabela th:last-child, .carteira-tabela td:last-child { padding-right: 20px; }
.carteira-tabela th.num, .carteira-tabela td.num { text-align: right; }
.carteira-tabela td.num { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.carteira-tabela td.name { white-space: nowrap; }
.carteira-row { cursor: pointer; }
.carteira-row:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.carteira-sort {
  appearance: none; border: none; background: none; padding: 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit;
}
.carteira-sort:hover, th[aria-sort] .carteira-sort { color: var(--ink); }
.carteira-sort:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 3px; }
.carteira-sort svg { width: 10px; height: 10px; }
.carteira-meta { min-width: 160px; }
.carteira-meta-txt { font-size: 12.5px; color: var(--ink-muted); margin-bottom: 7px; white-space: nowrap; }
.carteira-meta-txt b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.carteira-bar { height: 5px; }
.carteira-vazio { font-size: 12.5px; color: var(--ink-faint); }
.carteira-sinais { display: flex; flex-wrap: wrap; gap: 4px; max-width: 300px; }
.carteira-sinais .status-chip { font-size: 11.5px; padding: 2px 8px 2px 7px; }
@media (max-width: 640px) {
  .carteira-head { padding: 16px 16px 0; }
  .carteira-acoes { justify-content: flex-start; width: 100%; }
  .carteira-resumo { margin: 14px 16px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carteira-barra { padding: 14px 16px 10px; }
  .carteira-barra .search-wrap { width: 100%; }
  .carteira-tabela th:first-child, .carteira-tabela td:first-child { padding-left: 16px; }
}


/* ---------- Topo da Pipeline ----------
   Cabeçalho enxuto: as ações de uso eventual (funil, importar, exportar, duplicatas) moram no menu "⋯".
   Uma faixa de números sempre visível, liderada pelo Viável com o mesmo medidor das colunas.
   Filtros em duas linhas: em cima o que recorta a lista; embaixo os atalhos de tarefa, a origem e os segmentos. */
#page-client-pipeline { gap: 14px; }
.pl-more-btn { position: relative; padding: 8px 10px; }
.pl-more-btn svg { width: 16px; height: 16px; }
.pl-more-dot {
  position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--status-critical); box-shadow: 0 0 0 2px var(--surface);
}
.pl-more-dot[hidden] { display: none; }
.pl-menu { min-width: 220px; padding: 6px; gap: 2px; }
.pl-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: none; border-radius: 7px; background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.pl-menu-item svg { width: 15px; height: 15px; color: var(--ink-muted); flex-shrink: 0; }
.pl-menu-item:hover, .pl-menu-item:focus-visible { background: var(--surface-2); outline: none; }
.pl-menu-item .pill-badge { margin-left: auto; }

.pl-resumo {
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card);
}
.pl-stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; min-width: 0; }
.pl-stat + .pl-stat { border-left: 1px solid var(--line); }
.pl-stat-label { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.pl-stat-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.pl-stat-num b {
  font-family: var(--display); font-size: 24px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.pl-stat-viavel .pl-stat-num b { font-size: 30px; color: var(--green); }
.pl-meter { height: 5px; margin: 5px 0 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.pl-stat-sub { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; }

.pl-filtros { gap: 10px; }
.pl-filtros .filter-row { gap: 8px; }
.pl-busca { flex: 1 1 220px; max-width: 360px; }
.pl-filtros-2 { justify-content: space-between; }
.pl-atalhos, .pl-origem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-toggle { border: 1px solid var(--line-2); border-radius: 8px; }
.pl-limpar {
  border: none; background: none; padding: 6px 4px; font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pl-limpar[hidden] { display: none; }

@media (max-width: 1100px) {
  .pl-resumo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pl-stat-viavel { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .pl-stat-viavel + .pl-stat { border-left: none; }
}
@media (max-width: 640px) {
  .pl-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-stat { padding: 12px 14px; }
  .pl-stat:nth-child(4) { border-left: none; }
  .pl-stat:nth-child(n+4) { border-top: 1px solid var(--line); }
  .pl-busca { max-width: none; }
}

/* ---------- Relatório semanal: página ----------
   Período no topo, ajustes à esquerda, prévia (= PDF) à direita. */
.sr-rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rs-periodo { padding: 14px 16px; gap: 8px; }
.rs-periodo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rs-datas { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.rs-datas input, .rs-campo input, .rs-publico input, #report-proximos-passos {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 9px;
  font: inherit; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0;
}
.rs-datas input:focus, .rs-campo input:focus, .rs-publico input:focus, #report-proximos-passos:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash);
}
#report-refresh-btn { margin-left: auto; }
#report-refresh-btn:disabled { opacity: 0.6; cursor: default; }
.rs-status { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.rs-status.carregando { color: var(--ink); }
.rs-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.rs-editor { padding: 16px; gap: 0; position: sticky; top: 12px; max-height: calc(100vh - 100px); overflow-y: auto; }
.rs-editor-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.rs-editor-head p { margin: 2px 0 10px; font-size: 12.5px; color: var(--ink-muted); }
.rs-grupo { border-top: 1px solid var(--line); padding: 10px 0; }
.rs-grupo > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; padding: 2px 0;
}
.rs-grupo > summary::-webkit-details-marker { display: none; }
.rs-grupo > summary::after {
  content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 1.5px solid var(--ink-muted);
  border-bottom: 1.5px solid var(--ink-muted); transform: rotate(45deg);
}
.rs-grupo[open] > summary::after { transform: rotate(-135deg); }
.rs-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.rs-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-muted); }
.rs-campo input { width: 100%; }
.rs-dias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.rs-campo.mini { font-size: 11px; font-variant-numeric: tabular-nums; }
.rs-publico { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; }
.rs-publico input { width: 100%; }
.rs-publico-col { color: var(--ink-muted); font-size: 11.5px; }
.rs-publico-faixa { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rs-dica { margin: 8px 0 0; font-size: 12px; color: var(--ink-muted); line-height: 1.45; }
.rs-criativos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.rs-criativos:empty { display: none; }
.rs-criativo-op {
  display: flex; flex-direction: column; gap: 5px; padding: 4px; border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--surface); cursor: pointer; text-align: left; font: inherit; font-size: 11px; line-height: 1.3; color: var(--ink-muted);
}
.rs-criativo-op img, .rs-criativo-op-sem {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.rs-criativo-op b { display: block; color: var(--ink); font-weight: 600; }
.rs-criativo-op.sel { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-wash-2); }
.rs-criativo-op:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.rs-enviar { margin-top: 8px; width: 100%; justify-content: center; }
#report-proximos-passos { width: 100%; resize: vertical; min-height: 110px; margin-top: 10px; line-height: 1.5; }
.rs-previa-head { margin: 0 0 8px; font-size: 12.5px; color: var(--ink-muted); }
.rs-previa-slides { display: flex; flex-direction: column; gap: 14px; }
.rs-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #050604; box-shadow: var(--shadow-card); }
.rs-frame > .rs-slide { position: absolute; top: 0; left: 0; transform: scale(var(--rs-escala, 0.4)); transform-origin: 0 0; }
@media (max-width: 1100px) {
  .rs-layout { grid-template-columns: 1fr; }
  .rs-editor { position: static; max-height: none; }
}

/* ---------- Relatório semanal: slides (1920×1080) ----------
   Mesmas regras na prévia (escalada) e no PDF (html2canvas); por isso só px e cores fixas.
   Sem tabular-nums: no html2canvas o "1" de largura fixa vira "1 0.836" no PDF.
   Identidade da Linka: fundo verde-escuro com brilho no canto e verde-limão só no que importa.
   No funil, a cor clareia até o fim: viáveis (limão, a métrica principal) e vendas (branco). */
.rs-slide {
  position: relative; width: 1920px; height: 1080px; overflow: hidden; padding: 104px 128px 96px;
  display: flex; flex-direction: column; color: #f2f5f0; font-family: "Inter", system-ui, sans-serif;
  background: radial-gradient(1300px 760px at 94% -12%, rgba(0,255,0,0.13), rgba(0,255,0,0) 62%),
              linear-gradient(165deg, #0b1a0e 0%, #050b06 55%, #030503 100%);
}
.rs-marca { position: absolute; top: 56px; right: 128px; display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.rs-marca img { height: 34px; width: auto; }
.rs-pagina { position: absolute; bottom: 52px; right: 128px; font-size: 20px; color: rgba(242,245,240,0.4); }
.rs-cabeca { margin-bottom: 56px; flex-shrink: 0; }
.rs-cabeca h2 { margin: 0; font-family: "Inter Tight", "Inter", sans-serif; font-size: 68px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
.rs-cabeca p { margin: 14px 0 0; font-size: 26px; color: rgba(242,245,240,0.6); }
.rs-vazio { margin: 0; font-size: 28px; color: rgba(242,245,240,0.45); }

.rs-capa { justify-content: flex-end; padding-bottom: 150px; }
.rs-capa .rs-marca { left: 128px; right: auto; top: 96px; font-size: 34px; }
.rs-capa .rs-marca img { height: 46px; }
.rs-capa-cliente { margin: 0 0 18px; font-size: 34px; font-weight: 600; color: #00ff00; }
.rs-capa h1 { margin: 0; font-family: "Inter Tight", "Inter", sans-serif; font-size: 150px; font-weight: 500; letter-spacing: -0.035em; line-height: 0.95; }
.rs-capa-periodo { margin: 30px 0 0; font-size: 34px; color: rgba(242,245,240,0.62); }

.rs-funil { position: relative; width: 1664px; flex-shrink: 0; }
.rs-funil-svg, .rs-funil-guias { position: absolute; top: 0; left: 0; }
.rs-funil-etapa { position: absolute; left: 0; width: 1000px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.rs-funil-etapa b { font-family: "Inter Tight", "Inter", sans-serif; font-size: 54px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.rs-funil-etapa span { font-size: 24px; font-weight: 500; line-height: 1; opacity: 0.8; margin-top: 12px; }
.rs-funil-nota { position: absolute; left: 1064px; width: 600px; height: 96px; display: flex; flex-direction: column; justify-content: center; }
.rs-funil-taxa { margin: 0; font-size: 26px; color: rgba(242,245,240,0.7); }
.rs-funil-taxa b { font-family: "Inter Tight", "Inter", sans-serif; font-size: 38px; font-weight: 600; color: #f2f5f0; margin-right: 6px; }
.rs-funil-custo { margin: 4px 0 0; font-size: 22px; color: rgba(242,245,240,0.5); }
.rs-funil-nota.destaque .rs-funil-custo { color: #00ff00; font-size: 30px; font-weight: 600; }

.rs-kpis { display: flex; margin-bottom: 56px; flex-shrink: 0; }
.rs-kpi { display: flex; flex-direction: column; gap: 10px; padding-right: 72px; margin-right: 72px; border-right: 1px solid rgba(242,245,240,0.12); }
.rs-kpi:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.rs-kpi span { font-size: 24px; color: rgba(242,245,240,0.6); }
.rs-kpi b { font-family: "Inter Tight", "Inter", sans-serif; font-size: 72px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.rs-sub { margin: 0 0 20px; font-size: 26px; font-weight: 500; color: rgba(242,245,240,0.8); }
.rs-linha { position: relative; width: 1664px; flex-shrink: 0; }
.rs-linha svg { position: absolute; top: 0; left: 0; }
.rs-linha-valor { position: absolute; transform: translateX(-50%); font-size: 24px; font-weight: 600; white-space: nowrap; }
.rs-linha-dias { display: flex; justify-content: space-between; width: 1664px; padding: 14px 24px 0; font-size: 20px; color: rgba(242,245,240,0.5); }
.rs-linha-dias span { width: 0; display: flex; justify-content: center; white-space: nowrap; }

.rs-pub { display: flex; gap: 96px; align-items: flex-end; flex: 1; min-height: 0; padding-bottom: 70px; }
.rs-barras { display: flex; align-items: flex-end; justify-content: space-around; gap: 24px; flex: 1; border-bottom: 2px solid rgba(242,245,240,0.16); }
.rs-barras-grupo { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: -42px; }
.rs-barras-par { display: flex; align-items: flex-end; gap: 10px; height: 470px; }
.rs-barra { width: 64px; border-radius: 8px 8px 0 0; position: relative; }
.rs-barra.f { background: #00ff00; }
.rs-barra.m { background: #f2f5f0; }
.rs-barra span { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); font-size: 22px; font-weight: 600; white-space: nowrap; color: #f2f5f0; }
.rs-barras-grupo > span { height: 28px; line-height: 28px; font-size: 22px; color: rgba(242,245,240,0.6); white-space: nowrap; }
.rs-pub-lado { width: 520px; flex-shrink: 0; padding-bottom: 40px; }
.rs-rotulo-claro { margin: 0 0 12px; font-size: 24px; color: rgba(242,245,240,0.55); }
.rs-destaque { margin: 0; font-family: "Inter Tight", "Inter", sans-serif; font-size: 56px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; }
.rs-destaque-sub { margin: 12px 0 48px; font-size: 28px; color: #00ff00; }
.rs-divisao { display: flex; height: 18px; border-radius: 9px; overflow: hidden; }
.rs-divisao .f, .rs-legenda i.f { background: #00ff00; }
.rs-divisao .m, .rs-legenda i.m { background: #f2f5f0; }
.rs-legenda { display: flex; gap: 32px; margin-top: 16px; font-size: 22px; color: rgba(242,245,240,0.7); }
.rs-legenda i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; margin-right: 10px; vertical-align: -1px; }

.rs-criativo { display: flex; gap: 96px; align-items: flex-start; flex: 1; min-height: 0; }
.rs-criativo-img {
  width: 560px; height: 660px; flex-shrink: 0; border-radius: 20px; background-color: rgba(242,245,240,0.05);
  background-size: contain; background-position: center; background-repeat: no-repeat;
}
.rs-criativo-img.vazio { display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(242,245,240,0.2); font-size: 26px; color: rgba(242,245,240,0.45); }
.rs-criativo-dados { display: flex; flex-direction: column; gap: 44px; padding-top: 8px; flex: 1; }
.rs-criativo-dados .rs-kpi { border-right: none; padding-right: 0; margin-right: 0; }
.rs-criativo-dados .rs-kpi b { font-size: 60px; }
.rs-criativo-texto { margin: 0; padding-left: 28px; border-left: 4px solid #00ff00; font-size: 24px; line-height: 1.5; color: rgba(242,245,240,0.75); max-width: 860px; }

.rs-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 1480px; }
.rs-passos li { display: flex; align-items: flex-start; gap: 36px; padding: 30px 0; font-size: 40px; line-height: 1.3; border-bottom: 1px solid rgba(242,245,240,0.12); }
.rs-passos li:last-child { border-bottom: none; }
.rs-passo-n {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: #00ff00; color: #041006;
  font-family: "Inter Tight", "Inter", sans-serif; font-size: 30px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin-top: -8px;
}

/* Números dos cards: "R$" e o valor sempre na mesma linha. A grade de sete
   (Desempenho Meta Ads) encolhe o número e se reorganiza em telas menores. */
.kpi-value { white-space: nowrap; }
.kpis-7 .kpi-value { font-size: clamp(18px, 1.55vw, 24px); letter-spacing: -0.025em; }
@media (max-width: 1440px) { .kpis-7 { grid-template-columns: repeat(4, 1fr); } .kpis-7 .kpi-value { font-size: 24px; } }
@media (max-width: 700px)  { .kpis-7 { grid-template-columns: repeat(2, 1fr); } }

/* Conversas × viáveis e fechamento da semana (src/front/32-fechamento-semana.js).
   A faixa mostra o que falta registrar em vez de um zero; o formulário é o mesmo na faixa e no
   pop-up de resumo. Verde = viável, âmbar = a avaliar, cinza = não viável, trilho = sem registro. */
.registro-faixa { margin-top: 16px; padding: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.registro-resumo { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.registro-semana { padding: 20px 24px; border-left: 1px solid var(--line); background: var(--surface-2); min-width: 0; }
.registro-titulo { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.registro-numeros { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1.25; color: var(--ink); }
.registro-numeros b { font-weight: 500; }
.registro-barra { display: flex; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.registro-barra span { display: block; height: 100%; }
.registro-barra .rg-v, .registro-legenda .rg-v { background: var(--green); }
.registro-barra .rg-a, .registro-legenda .rg-a { background: var(--status-warning); }
.registro-barra .rg-n, .registro-legenda .rg-n { background: var(--ink-faint); }
.registro-legenda { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-muted); }
.registro-legenda span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.registro-legenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.registro-legenda .rg-s { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.registro-nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-muted); max-width: 72ch; }
.fs-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fs-cabeca h3 { margin: 0; font-size: 15px; font-weight: 500; }
.fs-semana { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); max-width: 62%; }
.fs-conv, .fs-quem, .fs-dica { margin: 0 0 10px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); }
.fs-conv b { color: var(--ink); font-weight: 600; }
.fs-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fs-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink); min-width: 0; }
.fs-campo input { font-family: var(--display); font-size: 18px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.fs-campo input:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.fs-campo small { font-size: 12px; font-weight: 400; line-height: 1.3; color: var(--ink-muted); }
.fs-dica { margin: 8px 0 0; }
.fs-aviso { margin: 8px 0 0; font-size: 13px; color: var(--status-critical); }
.fs-aviso:empty { display: none; }
.fs-acoes { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.fs-feito { margin: 0 0 6px; display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink); }
.fs-feito svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fs-link { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13px; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fs-link:hover { color: var(--ink); }
.fs-resumo { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface-2); }
@media (max-width: 900px) {
  .registro-faixa { grid-template-columns: 1fr; }
  .registro-semana { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .registro-resumo, .registro-semana { padding: 16px; }
  .registro-numeros { font-size: 19px; }
}

/* Resumo do dia do cliente (pop-up no formato do Uply) */
.resumo-box { max-width: 680px; position: relative; gap: 14px; padding: 24px 24px 20px; max-height: 90vh; overflow-y: auto; }
.resumo-box h2 { font-size: 22px; padding-right: 36px; }
.resumo-fechar { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--ink-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.resumo-fechar svg { width: 16px; height: 16px; }
.resumo-fechar:hover { background: var(--surface-2); color: var(--ink); }
.resumo-data { margin: -8px 0 2px; font-size: 13px; color: var(--ink-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.resumo-grid { display: grid; gap: 10px; }
.resumo-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.resumo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resumo-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); min-width: 0; }
.resumo-card-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.resumo-card-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.resumo-card-valor { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.resumo-card-valor span { white-space: nowrap; }
.resumo-card-valor .rs-dinheiro { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }
.resumo-card-valor.bom { color: var(--green); }
.resumo-card-valor.alerta { color: var(--status-critical); }
.resumo-funil-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-top: 4px; }
.resumo-funil-head span:last-child { color: var(--ink-muted); font-size: 12.5px; }
.resumo-funil { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.resumo-etapa { padding: 11px 14px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.resumo-etapa:last-child { border-bottom: none; }
.resumo-etapa-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.resumo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ink-faint); }
.resumo-etapa-nome { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resumo-parados { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--status-warning); background: var(--status-warning-wash); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.resumo-parados svg { width: 12px; height: 12px; }
.resumo-etapa-n { margin-left: auto; font-family: var(--display); font-weight: 600; font-size: 15px; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
.resumo-parados ~ .resumo-etapa-n { margin-left: 12px; }
.resumo-etapa-val { width: 96px; text-align: right; font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumo-barra { height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.resumo-barra div { height: 100%; border-radius: 999px; }
.resumo-box .modal-actions { justify-content: flex-end; }
@media (max-width: 640px) {
  .resumo-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo-etapa-val { width: auto; }
}

/* ---------- Conversas (WhatsApp) ----------
   Caixa de entrada do provedor: lista, conversa aberta e dados do lead lado a lado.
   Quase monocromática como o resto: saída em cinza mais escuro que a entrada, verde só
   em "lida", Viável e não lidas. Até 900px uma coluna por vez (lista → conversa, com
   "Voltar"); até 1200px os dados do lead abrem por cima, pelo botão "Lead".
   Código em src/front/31-conversas.js. */
.wa-content { padding-bottom: 16px; gap: 16px; }
.wa-nav-count {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--green); color: var(--green-contrast); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.wa-nav-count[hidden] { display: none; }
.wa-not-connected { max-width: 640px; gap: 10px; align-items: flex-start; }
.wa-not-connected h2 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.018em; }
.wa-not-connected p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; }
.wa-not-connected[hidden], .wa-inbox[hidden] { display: none; }

.wa-inbox {
  display: grid; grid-template-columns: 320px minmax(0, 1fr) 290px;
  height: calc(100dvh - 176px); min-height: 460px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card);
}
.wa-list-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.wa-list-tools { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.wa-list-tools .preset-pills { display: flex; width: 100%; }
.wa-list-tools .preset-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 6px; }
.wa-pill-n { font-size: 11px; color: var(--ink-muted); font-weight: 500; }
.wa-pill-n:empty { display: none; }
.wa-list-tools .search-wrap { width: 100%; max-width: 100%; }
.wa-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-muted); cursor: pointer; }
.wa-check input { width: 15px; height: 15px; accent-color: var(--green); }
.wa-notify-hint { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; background: var(--surface-2); font-size: 12px; color: var(--ink-muted); line-height: 1.4; }
.wa-notify-hint[hidden] { display: none; }
.wa-notify-hint .btn-outline { padding: 5px 10px; font-size: 12px; flex-shrink: 0; }
.wa-list { flex: 1; overflow-y: auto; min-height: 0; }
.wa-list-empty { margin: 0; padding: 22px 18px; font-size: 13px; color: var(--ink-muted); line-height: 1.5; }

.wa-item {
  display: flex; gap: 11px; width: 100%; padding: 11px 14px; border: none; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
}
.wa-item:hover { background: var(--surface-2); }
.wa-item.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--ink); }
.wa-item:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.wa-item.resolved { opacity: 0.62; }
.wa-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--ink); font-size: 12.5px; font-weight: 600;
}
.wa-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wa-item-top, .wa-item-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; }
.wa-item-top time { font-size: 11.5px; color: var(--ink-muted); flex-shrink: 0; }
.wa-item.unread .wa-item-top time { color: var(--green); font-weight: 600; }
.wa-item-preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink-muted); }
.wa-item.unread .wa-item-preview { color: var(--ink); }
.wa-unread {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; flex-shrink: 0;
  background: var(--green); color: var(--green-contrast); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.wa-item-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-sem-dono { color: var(--status-warning); }
.wa-vdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wa-vdot.v1 { background: var(--green); }
.wa-vdot.v0 { background: var(--ink-faint); }
.wa-vdot.vnull { border: 1.5px dashed var(--status-warning); width: 8px; height: 8px; }

.wa-thread-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.wa-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-muted); font-size: 13px; }
.wa-thread-empty svg { width: 34px; height: 34px; color: var(--ink-faint); }
.wa-thread-empty p { margin: 0; }
.wa-thread-empty[hidden], .wa-thread[hidden] { display: none; }
.wa-thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wa-thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.wa-thread-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-thread-who b { font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: -0.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-thread-who span { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-thread-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wa-thread-actions .select-pill { max-width: 170px; }
.wa-thread-actions .btn-outline { padding: 7px 12px; font-size: 12.5px; }
.wa-thread-head .wa-back { display: none; }
.wa-lead-toggle { display: none; }

.wa-icon-btn {
  width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.wa-icon-btn svg { width: 18px; height: 18px; }
.wa-icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.wa-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wa-icon-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

.wa-messages { flex: 1; overflow-y: auto; min-height: 0; padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 4px; }
.wa-thread-note { margin: 8px auto; font-size: 12px; color: var(--ink-muted); text-align: center; }
.wa-day { display: flex; justify-content: center; margin: 10px 0 6px; }
.wa-day span { font-size: 11.5px; color: var(--ink-muted); background: var(--surface-2); padding: 3px 10px; border-radius: 999px; }
.wa-msg { display: flex; align-items: flex-end; gap: 4px; max-width: min(78%, 560px); flex-wrap: wrap; }
.wa-msg.in { align-self: flex-start; }
.wa-msg.out { align-self: flex-end; flex-direction: row-reverse; }
.wa-bubble {
  position: relative; padding: 7px 10px 5px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  min-width: 64px; max-width: calc(100% - 30px); overflow-wrap: anywhere;
}
.wa-msg.in .wa-bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.wa-msg.out .wa-bubble { background: var(--surface-3); border-bottom-right-radius: 4px; }
.wa-msg.failed .wa-bubble { box-shadow: inset 0 0 0 1px var(--status-critical); }
.wa-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wa-muted { color: var(--ink-muted); font-style: italic; }
.wa-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: 2px; font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.wa-by.phone { color: var(--status-warning); }
.wa-tick { display: inline-flex; color: var(--ink-muted); }
.wa-tick svg { width: 15px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wa-tick.read { color: var(--green); }
.wa-tick.failed { color: var(--status-critical); font-weight: 700; font-size: 12px; }
.wa-error { flex-basis: 100%; text-align: right; font-size: 11.5px; color: var(--status-critical); margin: 1px 2px 4px; }
.wa-msg.in .wa-error { text-align: left; }
.wa-quote {
  margin: 0 0 5px; padding: 5px 8px; border-left: 2px solid var(--ink-muted);
  background: var(--surface-2); border-radius: 6px; font-size: 12px; color: var(--ink-muted);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.wa-quote span { font-weight: 600; color: var(--ink); margin-right: 5px; }
.wa-reply-btn {
  width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--ink-faint);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.12s;
}
.wa-reply-btn svg { width: 15px; height: 15px; }
.wa-msg:hover .wa-reply-btn, .wa-reply-btn:focus-visible { opacity: 1; }
.wa-reply-btn:hover { color: var(--ink); background: var(--surface-2); }
.wa-msg.reaction { align-self: center; max-width: none; }
.wa-reaction { font-size: 12px; color: var(--ink-muted); }
.wa-media { margin: -2px -5px 4px; min-height: 40px; }
.wa-media img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; }
.wa-media-img.sticker img { max-width: 140px; }
.wa-media video { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; }
.wa-media audio { display: block; width: 260px; max-width: 100%; height: 38px; }
.wa-transcricao { margin: 2px 0 4px; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.wa-transcricao span { display: block; font-size: 11px; color: var(--ink-muted); margin-bottom: 2px; }
.wa-transcricao.baixa { border-left: 3px solid var(--status-warning, #b7791f); }
.wa-transcricao em { color: var(--ink-muted); }
.wa-media-loading { display: block; padding: 10px 6px; font-size: 12px; color: var(--ink-muted); }
.wa-doc {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 4px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.wa-doc svg { width: 22px; height: 22px; color: var(--ink-muted); flex-shrink: 0; }
.wa-doc span { display: flex; flex-direction: column; min-width: 0; }
.wa-doc b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-doc small { font-size: 11.5px; color: var(--ink-muted); }

.wa-composer { border-top: 1px solid var(--line); background: var(--surface); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.wa-window-note { margin: 0; font-size: 11.5px; color: var(--ink-muted); }
.wa-window-note[hidden], .wa-window-closed[hidden], .wa-reply-preview[hidden], .wa-send-error[hidden] { display: none; }
.wa-window-closed {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px;
  background: var(--status-warning-wash); color: var(--ink); font-size: 12.5px; line-height: 1.45;
}
.wa-window-closed .btn-solid { flex-shrink: 0; padding: 7px 12px; }
.wa-reply-preview { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 10px; border-left: 2px solid var(--ink-muted); background: var(--surface-2); border-radius: 6px; font-size: 12px; color: var(--ink-muted); }
.wa-reply-preview span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-reply-preview .wa-icon-btn { width: 26px; height: 26px; }
.wa-composer-row { display: flex; align-items: flex-end; gap: 6px; }
.wa-composer-row textarea {
  flex: 1; min-width: 0; resize: none; max-height: 160px; padding: 8px 11px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.45;
}
.wa-composer-row textarea:focus { outline: none; border-color: var(--ink-muted); }
.wa-composer-row textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.wa-composer-row .btn-solid { height: 36px; }
.wa-send-error { margin: 0; }
/* Gravando áudio: a barra toma o lugar da caixa de texto até enviar ou descartar. */
.wa-rec { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 0 0 2px; }
.wa-rec[hidden] { display: none; }
.wa-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-critical); flex-shrink: 0; animation: wa-rec-pulso 1.2s ease-in-out infinite; }
.wa-rec-time { font-family: var(--display); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 38px; }
.wa-rec-label { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-rec .btn-solid { height: 36px; flex-shrink: 0; }
@keyframes wa-rec-pulso { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .wa-rec-dot { animation: none; } }

.wa-lead-pane { border-left: 1px solid var(--line); padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.wa-lead-pane:empty { display: none; }
.wa-lead-head { display: flex; align-items: flex-start; gap: 8px; }
.wa-lead-head h2 { flex: 1; margin: 0; font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.wa-lead-close { display: none; margin: -6px -6px 0 0; }
.wa-lead-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 12px; margin: 0; font-size: 12.5px; align-items: center; }
.wa-lead-rows dt { color: var(--ink-muted); }
.wa-lead-rows dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.wa-open-lead { align-self: flex-start; }
.wa-lead-note { margin: 0; font-size: 12.5px; color: var(--ink-muted); }

.wa-tpl-intro { margin: 0; font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.wa-tpl-preview:empty { display: none; }
.wa-tpl-preview { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.5; }
#wa-tpl-params { display: flex; flex-direction: column; gap: 10px; }
#wa-tpl-params:empty { display: none; }

@media (max-width: 1200px) {
  .wa-inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .wa-lead-toggle { display: inline-flex; }
  .wa-lead-close { display: inline-flex; }
  .wa-lead-pane {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(320px, 90vw); background: var(--surface);
    box-shadow: var(--shadow-pop); transform: translateX(100%); visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .wa-inbox.lead-open .wa-lead-pane { transform: none; visibility: visible; transition: transform 0.2s ease; }
}
@media (max-width: 900px) {
  .wa-content { padding-left: 12px; padding-right: 12px; }
  .wa-inbox { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 150px); min-height: 420px; }
  .wa-list-pane { border-right: none; }
  .wa-inbox .wa-thread-pane { display: none; }
  .wa-inbox.thread-open .wa-list-pane { display: none; }
  .wa-inbox.thread-open .wa-thread-pane { display: flex; }
  .wa-thread-head .wa-back { display: inline-flex; margin-left: -6px; }
  .wa-thread-head { padding: 8px 10px; flex-wrap: wrap; }
  .wa-thread-actions { width: 100%; }
  .wa-thread-actions .select-pill { flex: 1; max-width: none; }
  .wa-msg { max-width: 88%; }
  .wa-reply-btn { opacity: 1; }
  .wa-messages { padding: 12px 10px 6px; }
  .wa-window-closed { flex-direction: column; align-items: stretch; }
  /* Conversa aberta no celular: some o título da página e a conversa ocupa a tela. */
  .wa-content:has(.wa-inbox.thread-open) { padding-top: 10px; }
  .wa-content:has(.wa-inbox.thread-open) > .page-header { display: none; }
  .wa-inbox.thread-open { height: calc(100dvh - 104px); }
  /* 16px nos campos: com menos, o iPhone dá zoom ao tocar para escrever. */
  .wa-composer-row textarea, .wa-list-tools .search-wrap input { font-size: 16px; }
}

/* ---------- Login (29/09/2026; só a tela da maquete desde 01/10/2026) ----------
   Uma tela só: a da maquete do Felipe. Em 30/09 e 01/10 houve mais duas no sorteio ("fibra" e "velocidade", de 10
   propostas em OneDrive\Documentos\CRM Linka\Login - 10 propostas); em 01/10 ele pediu para voltar só com a
   primeira (as outras ficaram no histórico, commit 61e5231) e vai mandar telas novas do designer. O que muda a cada
   abertura é a arte: .login-art[data-arte] escolhe a imagem em --arte (sorteio em src/front/00-api-autenticacao.js).
   A imagem só é pedida onde aparece (no celular a foto não aparece). O estilo fica preso a
   .login-screen[data-tela="maquete"], que vem fixo no index.html; tela nova = outro valor de data-tela e outro bloco. */
.login-screen { position: relative; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; overflow-x: clip; }
.login-brand, .login-input > svg { display: none; }
.login-box { position: relative; }
.login-card { display: flex; flex-direction: column; }
.login-title h1, .login-title p, .login-error, .login-help, .login-foot { margin: 0; }
.login-tabs.tabs { display: flex; width: 100%; }
.login-tabs .tab { flex: 1; white-space: nowrap; cursor: pointer; }
.login-input { position: relative; display: flex; }
.login-input input { flex: 1; min-width: 0; outline: none; }
.login-submit.btn-solid { width: 100%; justify-content: center; cursor: pointer; }
.login-support { border: none; background: none; padding: 0; font: inherit; cursor: pointer; }
.login-art { --arte: url(/assets/login-arte.webp); }
.login-art[data-arte="2"] { --arte: url(/assets/login-arte-2.webp); }
.login-art[data-arte="3"] { --arte: url(/assets/login-arte-3.webp); }

/* ----- Tela "maquete" · o login de 29/09/2026. Reproduz a maquete dele em
   1600×859 com diferença de até 1–2px: fundo #101010, cartão #161616 com borda verde mais forte à esquerda (some no
   meio de cima e de baixo: cartão no padding-box, degradê da borda no border-box), campos e trilho das abas #101010,
   aba ativa #1e1e1e, botão verde que escurece no meio, ícones dos campos no tamanho e no cinza da maquete. O padding
   desigual do lado direito põe o centro do cartão em x=1168 numa tela de 1600. A arte é a mesma faixa da fibra. */
.login-screen[data-tela="maquete"] {
  color-scheme: dark;
  --paper: #101010; --bg: #101010; --surface: #161616; --surface-2: #101010; --surface-3: #1e1e1e;
  --ink: #ffffff; --ink-muted: #9a9a9a; --ink-faint: #565656; --line: #1e1e1e; --line-2: #2a2a2a;
  --green: #0a9441; --green-wash-2: rgba(10,148,65,0.22); --shadow-raise: none;
  --status-critical: #ff7a7a; --status-critical-wash: rgba(255,122,122,0.1);
  background: #101010; color: var(--ink); font-family: var(--sans);
}
.login-screen[data-tela="maquete"] .login-palco { display: contents; }
.login-screen[data-tela="maquete"] .login-art {
  --art-img: min(calc(50vw * 1.214 - 36px), calc(100vh * 0.8889));
  position: absolute; top: 0; bottom: 0; width: var(--art-img);
  left: clamp(calc(24px - var(--art-img) * 0.15), calc(25vw - var(--art-img) * 0.453), calc(50vw - var(--art-img) * 0.8));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 80%, transparent 96%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 80%, transparent 96%);
}
@media (min-width: 901px) {
  .login-screen[data-tela="maquete"] .login-art { background: var(--arte) 0 55% / 100% auto no-repeat, linear-gradient(#111111, #0a0a0a); }
}
.login-screen[data-tela="maquete"] .login-side {
  position: relative; z-index: 1; width: 50%; margin-left: auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 86px 40px 24px;
}
.login-screen[data-tela="maquete"] .login-box { width: 100%; max-width: 498px; }
.login-screen[data-tela="maquete"] .login-card {
  padding: 95px 62px 54px; border: 1px solid transparent; border-radius: 44px;
  background: linear-gradient(#161616, #161616) padding-box,
              linear-gradient(90deg, #1b3228 0%, #1a3026 22%, #161616 50%, #14291f 82%, #152c22 100%) border-box;
  box-shadow: 0 6px 40px rgba(0,0,0,0.55);
}
.login-screen[data-tela="maquete"] .login-title { text-align: center; }
.login-screen[data-tela="maquete"] .login-title h1 { font-family: var(--display); font-size: 31.5px; font-weight: 600; line-height: 1.1; letter-spacing: 0; color: #fff; }
.login-screen[data-tela="maquete"] .login-title p { margin: -4px 0 0; font-size: 16px; line-height: 1.25; color: #9a9a9a; }
.login-screen[data-tela="maquete"] .login-tabs.tabs { height: 38px; margin-top: 29px; padding: 4px; gap: 0; background: #101010; border: none; border-radius: 7px; }
.login-screen[data-tela="maquete"] .login-tabs .tab { padding: 0 8px; font-size: 16px; font-weight: 400; color: #9d9d9d; border-radius: 5px; }
.login-screen[data-tela="maquete"] .login-tabs .tab.active { background: #1e1e1e; color: #fff; box-shadow: none; }
.login-screen[data-tela="maquete"] .login-form { display: flex; flex-direction: column; margin-top: 56px; }
.login-screen[data-tela="maquete"] .login-form .modal-field { gap: 7px; }
.login-screen[data-tela="maquete"] .login-form .modal-field + .modal-field { margin-top: 7px; }
.login-screen[data-tela="maquete"] .login-form .modal-field label { padding-left: 5px; font-size: 13px; font-weight: 600; color: #fff; }
/* Ícones no tamanho e no cinza da maquete: envelope 19×15 (#3e3e3e), cadeado 17×19 (#5a5a5a), olho 13×9 */
.login-screen[data-tela="maquete"] .login-input > svg {
  display: block; position: absolute; left: 11px; top: calc(50% + 1px); transform: translateY(-50%); width: 23px; height: 23px;
  stroke-width: 1.4; color: #3e3e3e; pointer-events: none; transition: color 0.15s ease;
}
.login-screen[data-tela="maquete"] .login-input.password-field-wrap > svg { top: 50%; color: #5a5a5a; }
.login-screen[data-tela="maquete"] .login-input:focus-within > svg { color: #9a9a9a; }
.login-screen[data-tela="maquete"] .login-input input {
  height: 54px; padding: 0 16px 0 47px; font-size: 14px; border-radius: 6px;
  background: #101010; border: 1px solid #101010; color: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-screen[data-tela="maquete"] .login-input input::placeholder { color: #565656; font-size: 12px; }
.login-screen[data-tela="maquete"] .login-input input:focus { border-color: #0a9441; box-shadow: 0 0 0 3px rgba(10,148,65,0.18); }
.login-screen[data-tela="maquete"] .login-input.password-field-wrap input { padding-right: 48px; }
.login-screen[data-tela="maquete"] .password-toggle-btn { right: 5px; top: calc(50% + 2px); width: 32px; height: 32px; border-radius: 6px; color: #404040; }
.login-screen[data-tela="maquete"] .password-toggle-btn svg { width: 13px; height: 13px; }
.login-screen[data-tela="maquete"] .password-toggle-btn:hover { color: #9a9a9a; background: #1e1e1e; }
/* Preenchimento automático do navegador: sem o fundo azul do Chrome */
.login-screen[data-tela="maquete"] .login-input input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; box-shadow: 0 0 0 40px #101010 inset; }
.login-screen[data-tela="maquete"] .login-input input:-webkit-autofill:focus { box-shadow: 0 0 0 40px #101010 inset, 0 0 0 3px rgba(10,148,65,0.18); }
.login-screen[data-tela="maquete"] .login-error { margin: 16px 0 0; }
.login-screen[data-tela="maquete"] .login-submit.btn-solid, .login-screen[data-tela="maquete"] .login-submit.btn-solid:hover {
  height: 55px; margin-top: 29px; border-radius: 6px; box-shadow: none; font-size: 17px; font-weight: 600; color: #fff;
  background: linear-gradient(90deg, #0a9441 0%, #099441 18%, #02672b 50%, #047933 72%, #078e3f 100%);
}
.login-screen[data-tela="maquete"] .login-submit.btn-solid:hover { filter: brightness(1.12); }
.login-screen[data-tela="maquete"] .login-help { margin: 17px 0 0; text-align: center; font-size: 14px; color: #9c9c9c; }
.login-screen[data-tela="maquete"] .login-support { font-weight: 600; color: #fff; }
.login-screen[data-tela="maquete"] .login-support:hover { text-decoration: underline; text-underline-offset: 3px; }
.login-screen[data-tela="maquete"] .login-foot { position: absolute; left: 0; right: 0; top: calc(100% + 14px); text-align: center; font-size: 13.5px; color: #252525; }
/* Tela baixa (notebook 1366×768 deixa ~640px de navegador): menos respiro dentro do cartão, sem rolar. */
@media (min-width: 901px) and (max-height: 760px) {
  .login-screen[data-tela="maquete"] .login-side { padding-top: 24px; padding-bottom: 24px; }
  .login-screen[data-tela="maquete"] .login-card { padding-top: 52px; padding-bottom: 36px; }
  .login-screen[data-tela="maquete"] .login-tabs.tabs { margin-top: 22px; }
  .login-screen[data-tela="maquete"] .login-form { margin-top: 30px; }
}
@media (max-width: 900px) {
  .login-screen[data-tela="maquete"] .login-art { display: none; }
  .login-screen[data-tela="maquete"] .login-side { width: auto; flex: 1 1 auto; margin-left: 0; justify-content: flex-start; gap: 20px; padding: 44px 16px 28px; }
  .login-screen[data-tela="maquete"] .login-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
  .login-screen[data-tela="maquete"] .login-brand img { height: 24px; }
  .login-screen[data-tela="maquete"] .login-card { padding: 36px 20px 28px; border-radius: 28px; }
  .login-screen[data-tela="maquete"] .login-title h1 { font-size: 28px; }
  .login-screen[data-tela="maquete"] .login-tabs.tabs { margin-top: 24px; }
  .login-screen[data-tela="maquete"] .login-tabs .tab { font-size: 15px; }
  .login-screen[data-tela="maquete"] .login-form { margin-top: 32px; }
  .login-screen[data-tela="maquete"] .login-foot { position: static; margin-top: 16px; }
  /* 16px nos campos: com menos, o iPhone dá zoom ao tocar para escrever. */
  .login-screen[data-tela="maquete"] .login-input input { font-size: 16px; }
}

/* ---------- Assistente de importação (src/front/35-importacao.js, 29/09/2026) ---------- */
.imp-box { max-width: 860px; max-height: 90vh; overflow-y: auto; gap: 16px; }
.imp-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.imp-topo .icon-btn { font-size: 20px; line-height: 1; }
.imp-passos { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: imp; flex-wrap: wrap; }
.imp-passos li {
  counter-increment: imp; display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 999px;
  font-size: 12.5px; color: var(--ink-muted); background: var(--surface-2);
}
.imp-passos li::before {
  content: counter(imp); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface-3); color: var(--ink-muted); font-size: 11px; font-weight: 700;
}
.imp-passos li.atual { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-raise); }
.imp-passos li.atual::before { background: var(--action); color: var(--action-ink); }
.imp-passos li.feito::before { content: "✓"; background: var(--green-wash-2); color: var(--green); }
.imp-corpo { display: flex; flex-direction: column; gap: 14px; min-height: 180px; }
.imp-drop {
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding: 28px 20px;
  border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--surface-2); cursor: pointer;
}
.imp-drop b { font-size: 14px; color: var(--ink); }
.imp-drop span { font-size: 12.5px; color: var(--ink-muted); max-width: 560px; }
.imp-drop:hover, .imp-drop.sobre, .imp-drop:focus-visible { border-color: var(--green); outline: none; }
.imp-arquivo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: var(--green-wash); }
.imp-arquivo span { font-size: 12.5px; color: var(--ink-muted); }
.imp-hist h3, .imp-bloco h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; color: var(--ink); }
.imp-hist-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.imp-hist-linha div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.imp-hist-linha span { font-size: 12px; color: var(--ink-muted); }
.imp-hist-linha .btn-outline { padding: 4px 10px; font-size: 11.5px; }
.imp-tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.imp-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.imp-tabela th { text-align: left; font-weight: 600; color: var(--ink-muted); padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.imp-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.imp-tabela tr:last-child td { border-bottom: none; }
.imp-tabela select { width: 100%; min-width: 200px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; color: var(--ink); font: inherit; }
.imp-tabela .imp-ex { color: var(--ink-muted); max-width: 260px; overflow-wrap: anywhere; }
.imp-tabela tr.imp-ignorada td:first-child { color: var(--ink-faint); }
.imp-bloco { display: flex; flex-direction: column; gap: 6px; }
.imp-bloco > select { max-width: 420px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; color: var(--ink); font: inherit; font-size: 13px; }
.imp-pares { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.imp-par { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.imp-par span { font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.imp-par i, .imp-checks i { font-style: normal; color: var(--ink-faint); font-size: 11.5px; }
.imp-par select { max-width: 210px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; color: var(--ink); font: inherit; font-size: 12.5px; }
.imp-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; }
.imp-checks label { display: flex; align-items: center; gap: 6px; }
.imp-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.imp-num { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.imp-num b { font-family: var(--display); font-size: 24px; font-weight: 500; color: var(--ink); }
.imp-num span { font-size: 12px; color: var(--ink-muted); }
.imp-num.bom { background: var(--green-wash); }
.imp-num.bom b { color: var(--green-strong); }
.imp-progresso { display: flex; flex-direction: column; gap: 6px; }
.imp-barra { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.imp-barra span { display: block; height: 100%; width: 0; background: var(--green); transition: width 0.3s ease; }
.link-btn { border: none; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 700px) {
  .imp-pares { grid-template-columns: 1fr; }
  .imp-tabela select { min-width: 150px; }
}

/* ---------- Entrada de leads pelos fluxos do provedor (Integração, 29/09/2026) ---------- */
.wh-panel { padding: 20px; max-width: 680px; margin-top: 16px; }
.wh-campos { margin-top: 14px; font-size: 12.5px; }
.wh-campos summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.wh-tabela { width: 100%; border-collapse: collapse; margin-top: 8px; }
.wh-tabela th { text-align: left; color: var(--ink-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.wh-tabela td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-muted); }
.wh-tabela td:first-child { font-family: var(--mono); color: var(--ink); white-space: nowrap; }
.wh-exemplo { margin: 6px 0 0; padding: 10px 12px; background: var(--surface-3); border-radius: 8px; font-size: 11.5px; color: var(--ink-muted); white-space: pre-wrap; font-family: var(--mono); }
.wh-teste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.wh-eventos { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.wh-eventos-topo { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 6px; }
.wh-evento { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink); }
.wh-quando { color: var(--ink-faint); white-space: nowrap; font-size: 11.5px; }
.wh-aviso { color: var(--status-warning); font-style: normal; }

/* ---------- Cobranças pelo Asaas (Cobranças da equipe, Financeiro do cliente, 29/09/2026) ---------- */
.cob-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.cob-resumo > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cob-resumo span { font-size: 12px; color: var(--ink-muted); }
.cob-resumo b { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cob-aviso { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--status-warning-wash); color: var(--ink); font-size: 13px; max-width: 80ch; }
.cob-fraco { display: block; font-size: 11.5px; color: var(--ink-muted); font-weight: 400; }
td .cob-fraco { display: inline; }
td.name .cob-fraco { display: block; }
.cob-acoes { white-space: nowrap; text-align: right; }
.cob-acoes > * { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.cob-acoes .btn-outline, .cob-acoes .btn-solid { padding: 5px 12px; font-size: 12px; text-decoration: none; }
.cob-rotulo { display: block; font-size: 12px; font-weight: 600; color: var(--ink-muted); margin-bottom: 6px; }
.cob-formas { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink); }
.cob-formas label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.cob-formas input { accent-color: var(--action); width: 15px; height: 15px; }
.cob-dica { margin: 2px 0 12px; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
.cob-link { display: flex; gap: 8px; margin-bottom: 4px; }
.cob-link input { flex: 1; min-width: 0; }
#cob-link-whats { text-decoration: none; }
@media (max-width: 700px) {
  .cob-resumo { grid-template-columns: 1fr; gap: 8px; }
  .cob-resumo > div { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 10px 14px; }
  .cob-resumo b { font-size: 18px; }
}

/* ---------- Integração com o ERP (src/front/36-erp.js, 29/09/2026) ---------- */
.erp-corpo { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.erp-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.erp-opcoes { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink); }
.erp-opcoes label { display: flex; align-items: center; gap: 8px; }
.erp-opcoes input { width: 16px; height: 16px; accent-color: var(--green); }
.erp-volta { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.erp-piloto { padding: 8px 12px; border-radius: 8px; background: var(--status-warning-wash); color: var(--ink); }
.erp-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.erp-desligar { margin-left: auto; }
#erp-msg.is-error { color: var(--status-critical); }
.erp-vendas { border-top: 1px solid var(--line); padding-top: 12px; }
.erp-vendas h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; }
.erp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.erp-venda { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; flex-wrap: wrap; }
.erp-venda > span:last-child { color: var(--ink-muted); }
.erp-hist { font-size: 12.5px; }
.erp-hist summary { cursor: pointer; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.erp-ficha { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 4px; }
.erp-ficha.ok { background: var(--green-wash); border-color: transparent; }
.erp-ficha.erro { background: var(--status-critical-wash); border-color: transparent; }
.erp-ficha-txt { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--ink); }
.erp-ficha-txt b { font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-muted); }
.erp-ficha-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.erp-ficha-acoes .btn-outline, .erp-ficha-acoes .btn-solid { padding: 5px 12px; font-size: 12px; }
@media (max-width: 700px) { .erp-grade { grid-template-columns: 1fr; } }

/* ---------- Planos da Linka e assinaturas (Cobranças e Financeiro, 30/09/2026) ---------- */
.cob-bloco { margin-top: 16px; }
td .cob-fraco.cob-sub { display: block; margin-top: 1px; }
.cob-plano-atual { margin: 12px 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--green-wash); color: var(--ink); font-size: 13.5px; max-width: 80ch; }
.cob-plano-atual b { font-weight: 600; }
.cob-plano-atual .cob-fraco { margin-top: 2px; }
.cob-planos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cob-plano-linha { display: grid; grid-template-columns: minmax(110px, 160px) minmax(120px, 1fr) auto minmax(150px, auto) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.cob-plano-linha input[type="text"], .cob-plano-linha input[type="number"] {
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 10px; font-size: 13.5px; color: var(--ink); font-family: var(--sans); min-width: 0;
}
.cob-plano-linha input[type="text"]:focus, .cob-plano-linha input[type="number"]:focus { outline: none; border-color: var(--green); }
.cob-plano-linha .cp-nome { font-weight: 600; width: 100%; }
.cob-plano-linha .cob-fraco { display: block; }
.cp-valor { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-muted); }
.cp-valor input { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.cp-total { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cp-ativo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.cp-ativo input { accent-color: var(--action); }
@media (max-width: 700px) {
  .cob-plano-linha { grid-template-columns: 1fr auto; }
  .cob-plano-linha .cob-fraco, .cp-total { grid-column: 1 / -1; }
}

/* ---------- Mais de um número de WhatsApp e pipelines por número (migração 043, 30/09/2026) ---------- */
.pl-funil { margin-left: 4px; max-width: 220px; }
.wa-numero-filtro { width: 100%; }
.wa-num-tag { flex-shrink: 0; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--ink); font-weight: 500; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.wa-numeros { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.wa-num-intro { margin: 0; font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.wa-num { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.wa-num-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wa-num-topo b { font-size: 14px; font-variant-numeric: tabular-nums; }
.wa-num-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wa-num-campos .modal-field { margin: 0; }
.wa-num-aplicar { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.wa-num-aplicar input { accent-color: var(--action); }
.wa-num-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.wa-num-acoes .wa-num-msg { margin-right: auto; }
.rel-num-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.rel-num-tabela th, .rel-num-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rel-num-tabela thead th { font-weight: 400; color: var(--ink-muted); }
.rel-num-tabela thead th b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.rel-num-tabela tbody th { font-weight: 500; color: var(--ink-muted); width: 34%; }
.rel-num-tabela td { font-family: var(--display); font-size: 17px; font-variant-numeric: tabular-nums; color: var(--ink); }
.rel-num-sub { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.rel-num-melhor { background: var(--green-wash); box-shadow: inset 3px 0 0 var(--green); }
.rel-vazio { margin: 0 0 10px; font-size: 13px; color: var(--ink-muted); }
/* Gerenciar pipelines (renomear e apagar as extras) e pedido de sugestão da IA na ficha */
.pl-funil-gerenciar { margin-left: 2px; font-size: 12.5px; white-space: nowrap; }
.pl-funil-gerenciar[hidden] { display: none; }
.modal-field[hidden] { display: none; } /* o campo Pipeline da ficha aparecia vazio em cliente sem pipelines extras */
.funis-lista { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; margin-bottom: 4px; }
.funil-linha { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.funil-linha-campos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.funil-linha-campos input { flex: 1 1 180px; min-width: 0; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: var(--ink); font-family: var(--sans); }
.funil-linha-campos input:focus { outline: none; border-color: var(--green); }
.funil-linha .funil-msg { min-height: 16px; }
.funil-linha .funil-msg.erro { color: var(--status-critical); }
.funil-excluir.confirmando { color: var(--status-critical); border-color: var(--status-critical); }
.falha-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 2500; max-width: min(92vw, 480px); padding: 11px 16px; border-radius: 10px; background: var(--ink); color: var(--surface); font-size: 13px; line-height: 1.45; box-shadow: 0 8px 28px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.falha-toast.show { opacity: 1; transform: translate(-50%, 0); }
.viavel-ia-box { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.viavel-ia-box[hidden], .viavel-ia-box [hidden] { display: none; }
.viavel-ia-msg { font-size: 12px; color: var(--ink-muted); line-height: 1.4; }
@media (max-width: 700px) {
  .wa-num-campos { grid-template-columns: 1fr; }
  .rel-num-tabela tbody th { width: auto; }
}

/* ---------- Contas de clientes e uso ao vivo dos testes grátis (migração 046, 30/09/2026) ---------- */
#contas-painel-contas, #contas-painel-uso { display: flex; flex-direction: column; gap: 20px; }
.contas-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.contas-resumo > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.contas-resumo span { font-size: 12px; color: var(--ink-muted); }
.contas-resumo b { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.contas-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-muted); font-weight: 400; }
.contas-vazio { margin: 0; padding: 18px 4px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.contas-rodape { margin: -8px 2px 0; font-size: 12px; color: var(--ink-muted); line-height: 1.5; }
.contas-rodape:empty { display: none; }
/* Pedidos de teste grátis da página /teste-gratis (postgres/0004_pedidos_teste.sql): lista no alto da aba Contas e contador no menu. */
.pedidos-lista { list-style: none; margin: 0; padding: 0; }
.pedidos-lista li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 10px 20px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.pedidos-lista li:first-child { border-top: 0; padding-top: 0; }
.pedidos-lista li:last-child { padding-bottom: 0; }
.pedido-quem, .pedido-contato { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.pedido-quem b { font-size: 14px; font-weight: 500; color: var(--ink); }
.pedido-quem span, .pedido-contato span { color: var(--ink-muted); overflow-wrap: anywhere; }
.pedido-contato span:first-child { color: var(--ink); }
.pedido-contato a { color: var(--ink); text-underline-offset: 2px; }
.pedido-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) {
  .pedidos-lista li { grid-template-columns: minmax(0, 1fr); }
  .pedido-acoes { justify-content: flex-start; }
}
.wa-nav-count:not([hidden]) + .nav-pedidos-n { margin-left: 4px; }
.nav-pedidos-n { background: var(--ink); color: var(--bg); }
.contas-tabela td { vertical-align: top; }
.contas-tabela td:nth-child(4) { white-space: nowrap; }
.contas-nome { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.contas-nome:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Etiqueta do idioma na lista (postgres/0005_idioma.sql): só aparece em conta que não é em português ("ES"). */
.contas-idioma { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--ink-muted); font-size: 10.5px; font-weight: 600; line-height: 16px; vertical-align: 1px; }
.contas-acoes-td { white-space: nowrap; text-align: right; }
.contas-acoes-td > * { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.contas-acoes-td .btn-outline { padding: 5px 12px; font-size: 12px; }
.contas-aba-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--green); color: var(--green-contrast); font-size: 11px; font-weight: 600; }
.contas-aba-n[hidden] { display: none; }

.contas-box { max-width: 580px; max-height: 90vh; overflow-y: auto; }
#contas-form, #contas-acesso-painel, #contas-acoes-painel { display: flex; flex-direction: column; gap: 12px; }
.contas-box .modal-field { margin: 0; }
.contas-box .cob-dica { margin: 0; }
.contas-sep { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
#contas-acesso-texto { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; min-height: 190px; }
.contas-box .modal-actions { flex-wrap: wrap; }
.contas-box .modal-actions a.btn-outline { text-decoration: none; display: inline-flex; align-items: center; }
.contas-acoes { display: flex; flex-direction: column; gap: 8px; }
.contas-acao { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.contas-acao:hover { background: var(--surface-2); border-color: var(--line-2); }
.contas-acao:disabled { opacity: 0.5; cursor: progress; }
.contas-acao b { font-size: 13px; font-weight: 600; }
.contas-acao span { font-size: 12px; color: var(--ink-muted); }
.contas-estender { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.contas-estender span { margin-right: auto; font-size: 13px; font-weight: 600; }
.contas-estender .btn-outline { padding: 5px 12px; font-size: 12px; }

/* Agora no CRM: ponto = estado (mexendo, parado, saiu), sempre com a frase escrita ao lado */
.uso-agora { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.uso-agora .contas-vazio { grid-column: 1 / -1; }
.uso-pessoa { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.uso-pessoa.saiu { background: transparent; }
.uso-pessoa-txt { min-width: 0; font-size: 13px; }
.uso-pessoa-txt b { font-weight: 600; }
.uso-frase { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink); }
.uso-pessoa.saiu .uso-frase { color: var(--ink-muted); }
.uso-link { padding: 0; border: 0; background: none; color: var(--ink-muted); font: inherit; cursor: pointer; }
.uso-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.uso-ponto { flex-shrink: 0; display: inline-block; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--ink-faint); }
td .uso-ponto { margin: 0 6px 1px 0; vertical-align: middle; }
.uso-ponto.ativo { background: var(--green); box-shadow: 0 0 0 3px var(--green-wash-2); }
.uso-ponto.parado { background: transparent; border: 2px solid var(--status-warning); }
.uso-ponto.saiu { background: var(--ink-faint); opacity: 0.6; }

/* Mapa de calor: uma cor só (verde), do fraco ao forte, com o número escrito em cada célula.
   Texto conferido (WCAG): tinta nos níveis 1-3 e no 4 do claro; no 4 do escuro, --green-contrast. */
.uso-calor-wrap { overflow-x: auto; }
.uso-calor { border-collapse: separate; border-spacing: 2px; font-size: 12.5px; table-layout: fixed; width: 100%; }
.uso-calor th { font-weight: 500; color: var(--ink-muted); text-align: left; white-space: nowrap; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; }
.uso-calor thead th { vertical-align: bottom; font-size: 12px; }
.uso-calor tbody th, .uso-calor tfoot th { color: var(--ink); padding-left: 0; }
.uso-canto { width: 150px; }
.uso-col { display: block; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uso-col span { display: block; font-weight: 400; font-size: 11px; color: var(--ink-muted); }
.uso-col:hover { background: var(--surface-2); }
.uso-col.sel { background: var(--surface-2); box-shadow: var(--shadow-raise); }
.uso-dia { display: block; font-size: 10.5px; color: var(--ink-faint); }
.uso-cel { height: 32px; padding: 0 4px; border-radius: 6px; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface-2); cursor: default; }
.uso-cel:hover { outline: 1px solid var(--line-2); outline-offset: 1px; }
.uso-cel[data-n="1"], .uso-legenda i[data-n="1"] { background: color-mix(in srgb, var(--green) 16%, var(--surface)); }
.uso-cel[data-n="2"], .uso-legenda i[data-n="2"] { background: color-mix(in srgb, var(--green) 32%, var(--surface)); }
.uso-cel[data-n="3"], .uso-legenda i[data-n="3"] { background: color-mix(in srgb, var(--green) 52%, var(--surface)); }
.uso-cel[data-n="4"], .uso-legenda i[data-n="4"] { background: color-mix(in srgb, var(--green) 76%, var(--surface)); }
.uso-cel[data-n="4"] { color: var(--green-contrast); font-weight: 600; }
:root[data-theme="light"] .uso-cel[data-n="4"] { color: var(--ink); }
.uso-zero { color: var(--ink-faint); }
.uso-total { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); padding: 6px 8px; }
.uso-legenda { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--ink-muted); }
.uso-legenda i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; }
.uso-legenda span { margin: 0 4px; }
.uso-legenda .uso-legenda-nota { margin-left: 12px; }

.uso-conta-botoes { display: flex; align-items: center; gap: 6px; }
.uso-h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.uso-conta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; }
.uso-pessoas, .uso-linha { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.uso-pessoas li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.uso-pessoas li span { font-size: 12px; color: var(--ink-muted); }
.uso-linha { max-height: 360px; overflow-y: auto; }
.uso-linha li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.uso-linha time { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.uso-linha li .contas-sub { margin: 0; }
.uso-linha li.contas-vazio, .uso-pessoas li.contas-vazio { display: block; border: 0; }

@media (max-width: 900px) {
  .contas-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uso-conta-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .contas-resumo { grid-template-columns: 1fr; gap: 8px; }
  .contas-resumo > div { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 10px 14px; }
  .contas-resumo b { font-size: 18px; }
  .uso-agora { grid-template-columns: 1fr; }
  #page-contas .header-actions { flex-wrap: wrap; }
  #contas-painel-uso .panel-head-row { flex-direction: column; align-items: stretch; }
  .uso-conta-botoes { justify-content: space-between; }
  .uso-linha li { grid-template-columns: 76px minmax(0, 1fr); }
  .uso-linha li .contas-sub { grid-column: 2; }
}

/* ---------- Fluxos de atendimento (30/09/2026, src/front/40-fluxos.js) ---------- */
#fluxos-lista-area[hidden], #fluxo-novo[hidden], .fx-editor[hidden], .fx-config [hidden], .wa-fluxo-info[hidden] { display: none !important; }
.fx-aviso { margin-bottom: 14px; font-size: 13px; color: var(--ink); line-height: 1.5; }
.fx-vazio { padding: 20px; margin-bottom: 16px; }
.fx-vazio h2 { margin: 0 0 4px; font-size: 16px; }
.fx-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.fx-modelo { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--shadow-card); }
.fx-modelo:hover { border-color: var(--green); }
.fx-modelo b { font-size: 14px; font-weight: 600; }
.fx-modelo span { font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; }
.fx-card { padding: 16px 18px; margin-bottom: 12px; border-left: 3px solid var(--line-2); }
.fx-card.ligado { border-left-color: var(--green); }
.fx-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.fx-card-info { min-width: 0; }
.fx-card h3 { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.fx-card-gatilho, .fx-card-stats { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.fx-card-stats { margin-top: 10px; }
.fx-card-acoes { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.fx-perigo { color: var(--status-critical) !important; }
.btn-solid.fx-btn-perigo { background: var(--status-critical); }
.fx-novo-de-modelo { margin: 4px 0 18px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.fx-exec-panel { margin-top: 8px; }
.fx-exec td .kpi-sub { display: block; margin-top: 3px; }
.fx-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; font-size: 12.5px; color: var(--ink-muted); position: relative; }
.fx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fx-switch-trilho { width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; }
.fx-switch-trilho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.fx-switch input:checked + .fx-switch-trilho { background: var(--green); }
.fx-switch input:checked + .fx-switch-trilho::after { transform: translateX(14px); }
.fx-switch input:focus-visible + .fx-switch-trilho { outline: 2px solid var(--green); outline-offset: 2px; }
.fx-editor-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.fx-editor-nome { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.fx-editor-nome h2 { margin: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fx-erro { margin-bottom: 12px; }
.fx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.fx-config { padding: 16px 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.fx-passo { padding: 14px 16px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.fx-passo-head { display: flex; align-items: center; gap: 10px; }
.fx-num { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.fx-tipo-sel { font: inherit; font-weight: 600; font-size: 13.5px; border: 1px solid transparent; background: transparent; color: var(--ink); padding: 4px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.fx-tipo-sel:hover, .fx-tipo-sel:focus { border-color: var(--line-2); background: var(--surface); outline: none; }
.fx-passo-acoes { margin-left: auto; display: inline-flex; gap: 2px; }
.fx-icone { border: none; background: none; color: var(--ink-muted); font: inherit; font-size: 15px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; }
.fx-icone:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.fx-icone:disabled { opacity: .3; cursor: default; }
.fx-dica { font-size: 12px; color: var(--ink-muted); line-height: 1.45; }
.fx-tipo-dica { margin: -4px 0 0; }
.fx-alerta { margin: 0; font-size: 12.5px; background: var(--status-warning-wash); border-radius: 8px; padding: 8px 10px; color: var(--ink); }
.fx-passo .modal-field, .fx-config .modal-field { margin: 0; }
.fx-tempo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fx-tempo > label { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.fx-tempo-linha { display: flex; gap: 8px; }
.fx-tempo-linha input { width: 90px; }
.fx-tempo input, .fx-tempo select, .fx-opcao input, .fx-opcao select { font: inherit; font-size: 13.5px; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--ink); min-width: 0; }
.fx-tempo input:focus, .fx-tempo select:focus, .fx-opcao input:focus, .fx-opcao select:focus { outline: none; border-color: var(--green); }
.fx-linha-2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.fx-opcoes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fx-opcao { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto minmax(0, 1fr) 28px; gap: 8px; align-items: center; width: 100%; }
.fx-opcao-n { font-size: 12px; color: var(--ink-muted); text-align: center; }
.fx-seta { color: var(--ink-faint); }
.fx-modelo-texto { margin: 0; font-size: 12.5px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
.fx-adicionar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 24px; }
.fx-adicionar .btn-outline { font-size: 12.5px; padding: 6px 10px; }
.fx-sim { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); display: flex; flex-direction: column; height: min(640px, calc(100vh - 120px)); overflow: hidden; }
.fx-sim-topo { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.fx-sim-topo .rel-link { margin-left: auto; }
.fx-sim-tela { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.fx-sim-msg { display: flex; flex-direction: column; max-width: 85%; }
.fx-sim-msg.robo { align-self: flex-start; }
.fx-sim-msg.pessoa { align-self: flex-end; align-items: flex-end; }
.fx-sim-bolha { font-size: 13px; line-height: 1.45; padding: 8px 11px; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,.06); overflow-wrap: anywhere; }
.fx-sim-msg.pessoa .fx-sim-bolha { background: var(--green-wash); }
.fx-sim-botoes { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.fx-sim-botoes button { font: inherit; font-size: 12.5px; color: var(--green-strong); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; cursor: pointer; text-align: center; }
.fx-sim-botoes button:disabled { color: var(--ink-faint); cursor: default; }
.fx-sim-botoes button:hover:not(:disabled) { border-color: var(--green); }
.fx-sim-nota { align-self: center; font-size: 11.5px; color: var(--ink-muted); background: var(--surface); border-radius: 999px; padding: 3px 10px; text-align: center; max-width: 90%; }
.fx-sim-nota.tempo { background: transparent; color: var(--ink-faint); }
.fx-sim-semresp { align-self: center; margin: 6px 0; font-size: 12px; }
.fx-sim-entrada { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.fx-sim-entrada input { flex: 1; min-width: 0; font: inherit; font-size: 13px; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 12px; background: var(--surface); color: var(--ink); }
.fx-confirma-texto { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin: 6px 0 0; }
.wa-thread-who .wa-fluxo-info { display: block; font-size: 12px; color: var(--green-strong); margin-top: 2px; white-space: normal; overflow: visible; }
@media (max-width: 1000px) {
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-sim { position: static; height: 480px; }
}
@media (max-width: 600px) {
  .fx-opcao { grid-template-columns: 18px minmax(0, 1fr) 28px; }
  .fx-opcao .fx-seta { display: none; }
  .fx-opcao select { grid-column: 2 / 3; }
  .fx-linha-2 { grid-template-columns: minmax(0, 1fr); }
  .fx-card-top { flex-direction: column; }
  .fx-editor-top .btn-solid { width: 100%; }
}

/* ---------- Fim do teste grátis: números ocultos e telas travadas (42-conta-bloqueada.js, 01/10/2026) ---------- */
.bloq-faixa { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; width: min(840px, calc(100% - 32px)); display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); }
.bloq-faixa[hidden], .bloq-faixa [hidden] { display: none; }
.bloq-faixa > svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--status-warning); }
.bloq-faixa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.bloq-faixa-txt b { font-size: 14px; font-weight: 600; color: var(--ink); }
.bloq-faixa-txt span { color: var(--ink-muted); line-height: 1.45; }
.bloq-faixa-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.bloq-faixa-acoes a { text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.bloq-faixa.chama { animation: bloq-chama 0.5s ease; }
@keyframes bloq-chama {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 8px)); }
  40% { transform: translateX(calc(-50% + 8px)); }
  60% { transform: translateX(calc(-50% - 5px)); }
  80% { transform: translateX(calc(-50% + 5px)); }
}
@media (prefers-reduced-motion: reduce) {
  .bloq-faixa.chama { animation: none; outline: 2px solid var(--status-warning); }
}
/* Conta em teste: aviso no menu do cliente, embaixo do nome da empresa (mostraTesteDaConta) */
.conta-teste-chip { width: fit-content; max-width: calc(100% - 16px); margin: -4px 8px 12px; padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; color: var(--side-muted); background: var(--side-hover); line-height: 1.35; }
.conta-teste-chip.perto { color: var(--side-strong); background: var(--status-warning-wash); }
.conta-teste-chip.perto::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--status-warning); vertical-align: 1px; }
.conta-teste-chip[hidden], .sidebar.collapsed .conta-teste-chip { display: none; }
html.conta-bloqueada .content { padding-bottom: 150px; }
/* Nada funciona na conta travada: a página é só para olhar (o inert do JS tira o foco; isto tira o clique mesmo
   em navegador sem inert). O resumo do dia não abre, porque tem formulário. */
html.conta-bloqueada .main > .content { pointer-events: none; user-select: none; }
html.conta-bloqueada #resumo-cliente-overlay { display: none !important; }
html.conta-bloqueada #client-nav .nav-item:not(.active) { opacity: 0.45; cursor: not-allowed; }
html.conta-bloqueada #settings-users-btn, html.conta-bloqueada #settings-historico-btn { display: none !important; }
/* Os números já viraram ****; o desenho dos gráficos fica borrado para a proporção não entregar o valor.
   Ícones (viewBox 0 0 24 24) continuam nítidos. */
html.conta-bloqueada .main svg:not([viewBox="0 0 24 24"]),
html.conta-bloqueada .main .hbar-track,
html.conta-bloqueada .main .dg-hb-trilho { filter: blur(7px); }
html.conta-bloqueada .bloq-campo,
html.conta-bloqueada .main input[type="number"],
html.conta-bloqueada .main input[type="date"] { color: transparent !important; text-shadow: 0 0 9px var(--ink-muted); }
@media (max-width: 640px) {
  .bloq-faixa { flex-wrap: wrap; bottom: 10px; }
  .bloq-faixa-acoes { width: 100%; }
  .bloq-faixa-acoes a { flex: 1; justify-content: center; }
}

/* ---------- Link fixo de assinatura (/assinar) e "Assinar um plano" (01/10/2026) ---------- */
.cob-fixo { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 12px 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.cob-fixo > div:first-child { flex: 1 1 320px; min-width: 0; }
.cob-fixo b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cob-fixo span { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.cob-fixo .cob-link { flex: 1 1 360px; margin: 0; align-items: center; }
.cob-fixo .cob-link input { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--ink); font-family: var(--sans); }
.cob-fixo .cob-link a { text-decoration: none; }
.cob-sem-plano { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; background: var(--surface-2); }
.ass-vincular-sel { max-width: 190px; }

/* ---------- App no celular (01/10/2026) ----------
   O CRM instalado na tela inicial (dist/manifest.webmanifest + src/front/44-app-celular.js) abre em tela cheia.
   O viewport usa viewport-fit=cover: em iPhone com entalhe e barra de gesto o conteúdo respeita as áreas seguras
   (env(safe-area-inset-*)). Em aparelho sem entalhe e no computador elas valem 0 e nada muda. */
.collapse-btn[hidden] { display: none; }
#app-instalar-btn svg { transform: none; } /* o "Recolher" gira o ícone dos botões do rodapé; este não é seta */
.login-screen .login-help.login-app { display: none; }
.app-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.app-passos b { font-weight: 600; }
.app-passos svg { width: 17px; height: 17px; vertical-align: -3px; color: var(--green); }
.app-shell, .login-screen { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.bloq-faixa { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) {
  .login-screen .login-help.login-app:not([hidden]) { display: block; margin-top: 10px; }
  .main { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .sidebar { padding-left: calc(14px + env(safe-area-inset-left, 0px)); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .wa-inbox, .chat-inbox { height: calc(100dvh - 150px - env(safe-area-inset-bottom, 0px)); }
  .wa-inbox.thread-open { height: calc(100dvh - 104px - env(safe-area-inset-bottom, 0px)); }
  .wa-lead-pane { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .bloq-faixa { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Notificações push (01/10/2026) ----------
   Quadro "Notificações neste aparelho" do Meu perfil e o convite que aparece uma vez dentro do app instalado
   (src/front/45-notificacoes-push.js). */
.push-opcoes { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.push-opcoes[hidden] { display: none; }
.push-opcoes label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.push-opcoes input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
.push-teste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.push-teste .btn-outline { padding: 6px 12px; font-size: 12.5px; }
.push-teste span { font-size: 12.5px; color: var(--ink-muted); line-height: 1.4; }
.push-teste span.is-error { color: var(--status-critical); }
.push-convite { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 41; width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); }
.push-convite[hidden] { display: none; }
.push-convite > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--green); }
.push-convite-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.push-convite-txt b { font-size: 14px; font-weight: 600; color: var(--ink); }
.push-convite-txt span { font-size: 12.5px; color: var(--ink-muted); line-height: 1.4; }
.push-convite-acoes { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
  .push-convite { flex-wrap: wrap; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .push-convite-txt { flex-basis: calc(100% - 40px); }
  .push-convite-acoes { width: 100%; }
  .push-convite-acoes button { flex: 1; justify-content: center; }
}

/* ---------- Régua de cobrança dos assinantes (01/10/2026, src/front/46-regua-cobranca.js) ---------- */
#regua-previa-area[hidden], #regua-sincronizar[hidden] { display: none !important; }
#regua-avisos { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; }
.rc-aviso { padding: 11px 14px; border-radius: 10px; }
.rc-aviso p { font-size: 13px; color: var(--ink); line-height: 1.5; }
.rc-aviso.perigo { border-style: solid; border-color: var(--status-critical); background: var(--status-critical-wash); }
.rc-aviso.ok { border-style: solid; border-color: var(--green); background: var(--green-wash); }
.rc-kpis { margin: 16px 0 0; }
.rc-painel, .rc-previa, .rc-modelos { padding: 18px 20px; margin-top: 16px; }
.rc-painel .panel-head, .rc-previa .panel-head { margin-bottom: 14px; }
.rc-passo { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.rc-passo-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-quando { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-passo select, .rc-passo input, .rc-ajustes select, .rc-ajustes input[type="number"], .rc-busca, .rc-url input {
  font: inherit; font-size: 13.5px; border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 10px; background: var(--surface); color: var(--ink); min-width: 0;
}
.rc-passo select:focus, .rc-passo input:focus, .rc-ajustes select:focus, .rc-ajustes input:focus, .rc-busca:focus, .rc-url input:focus { outline: none; border-color: var(--green); }
.rc-passo input[type="number"] { width: 70px; }
.rc-modelo-sel { flex: 1; min-width: 190px; }
.rc-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; }
.rc-var { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.rc-var span { font-family: var(--mono); color: var(--ink-muted); flex-shrink: 0; }
.rc-var select { flex: 1; }
.rc-exemplo { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.rc-exemplo-rotulo { font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--mono); }
.rc-exemplo p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rc-acoes-passos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 16px; }
.rc-ajustes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 18px; align-items: end; padding-top: 16px; border-top: 1px solid var(--line); }
.rc-ajustes .modal-field { margin: 0; }
.rc-ajustes input[type="number"] { width: 110px; }
.rc-horas { display: flex; align-items: center; gap: 8px; }
.rc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; padding-bottom: 8px; }
.rc-check input { width: 16px; height: 16px; accent-color: var(--green); }
.rc-hoje { margin: 16px 0 0; font-size: 13px; line-height: 1.5; }
.rc-acoes { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
#regua-erro { margin-top: 12px; }
.rc-modelos summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.rc-passos-meta { margin: 14px 0 6px; padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.rc-sugestao { border-top: 1px solid var(--line); padding: 14px 0 4px; margin-top: 12px; }
.rc-sugestao-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rc-sugestao-topo .btn-outline { margin-left: auto; font-size: 12.5px; padding: 6px 12px; }
.rc-sugestao-texto { white-space: pre-wrap; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; margin: 8px 0; }
#rc-webhook-exemplo { font-family: var(--mono); font-size: 12px; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rc-chip { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; }
.rc-chip span { color: var(--ink-muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.rc-chip:hover { border-color: var(--green); }
.rc-chip.ativo { border-color: var(--green); background: var(--green-wash); font-weight: 600; }
.rc-busca { width: 100%; max-width: 460px; margin-bottom: 12px; }
.rc-tabela td { vertical-align: top; }
.rc-tabela td .kpi-sub { line-height: 1.5; }
.rc-paginas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.rc-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.rc-duas .rc-painel { margin-top: 0; }
/* Nos dois quadros lado a lado (meia largura) a tabela encolhe e o texto quebra, em vez de pedir os 640px da
   regra geral e ficar cortada pelo quadro vizinho (02/10/2026). */
.rc-duas .rc-tabela { min-width: 0; }
.rc-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* Sem tamanho próprio o nome herdava os 16px do navegador, em negrito, maior que o resto da tela. */
.rc-lista li { font-size: 13px; line-height: 1.45; }
.rc-lista li b { font-weight: 600; }
.rc-lista p { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.rc-erros { margin-top: 10px; }
.rc-url { display: flex; gap: 8px; margin: 10px 0; }
.rc-url input { flex: 1; }
.rc-sub { margin: 20px 0 6px; font-size: 14px; font-weight: 650; }
#regua-origem p { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 6px 0; }
.rc-previa-lista { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rc-previa-msg { margin: 5px 0 0; padding: 9px 11px; background: var(--surface-2); border-radius: 8px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .rc-duas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .rc-painel, .rc-previa, .rc-modelos { padding: 16px 14px; }
  .rc-modelo-sel { flex-basis: 100%; }
  .rc-sugestao-topo .btn-outline { margin-left: 0; }
  .rc-url { flex-direction: column; }
}

/* ---------- Expansão da rede: leads sem cobertura no Mapa da rede (01/10/2026, src/front/47-mapa-expansao.js) ---------- */
.mapa-leg.exp { width: 10px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--status-critical); }
.exp-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exp-num { background: var(--surface-2); border-radius: 10px; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.exp-num b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--status-critical); }
.exp-num.ok b { color: var(--green); }
.exp-num.pend b { color: var(--ink-muted); }
.exp-num span { font-size: 11px; color: var(--ink-muted); line-height: 1.3; }
.exp-ranking, .exp-lista, .exp-pendentes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.exp-ranking { counter-reset: exp; }
.exp-ranking li, .exp-lista li { display: block; }
.exp-ranking button, .exp-lista button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: none; border: none;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink);
}
.exp-ranking button:hover, .exp-lista button:hover { background: var(--surface-2); }
.exp-ranking button b { font-variant-numeric: tabular-nums; background: var(--status-critical-wash); color: var(--status-critical); border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.exp-lista button { flex-direction: column; align-items: flex-start; gap: 1px; }
.exp-lista button i { font-style: normal; font-size: 11.5px; color: var(--ink-muted); }
.exp-pendentes li { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.exp-pendentes li:last-child { border-bottom: none; }
.exp-pendentes b { font-size: 13px; }
.exp-pendentes span { display: block; font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; }
.exp-pend-acoes { display: flex; gap: 14px; }
.exp-pend-acoes .rel-link { font-size: 12px; }
#exp-localizar[hidden] { display: none; }
.exp-pin-wrap { background: none; border: none; }
.exp-pin { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.exp-pin-wrap.aprox .exp-pin { opacity: .62; }
.exp-popup { font-size: 13px; line-height: 1.45; min-width: 190px; }
.exp-popup-sub { font-size: 12px; color: var(--ink-muted); }
.exp-popup-ok { font-size: 12px; font-weight: 600; color: var(--green-strong, var(--green)); }
.exp-popup-acoes { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.exp-popup-acoes .btn-outline { padding: 5px 10px; font-size: 12.5px; }
.exp-popup-acoes .rel-link { font-size: 12px; }
.leaflet-container .marker-cluster-small, .leaflet-container .marker-cluster-medium, .leaflet-container .marker-cluster-large { background-color: color-mix(in srgb, var(--status-critical) 30%, transparent); }
.leaflet-container .marker-cluster-small div, .leaflet-container .marker-cluster-medium div, .leaflet-container .marker-cluster-large div { background-color: var(--status-critical); color: #fff; font-weight: 700; }
.lead-geo { margin: -2px 0 8px; font-size: 12px; line-height: 1.45; color: var(--ink-muted); }
.lead-geo[hidden] { display: none; }
@media (max-width: 600px) {
  .exp-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exp-num b { font-size: 19px; }
}

/* ---------- Suporte no CRM, Etapa 1 (Integração e Atendimentos) ----------
   A chave por número no card da Integração (só a equipe Linka vê) e a visão Suporte de Atendimentos. O seletor "Vendas | Suporte" é criado por JS
   (src/front/50-suporte.js) só quando algum número tem a chave ligada: com ela desligada nenhuma regra daqui pega em nada da tela de sempre
   (os [hidden] só valem para o que a visão Suporte esconde e a classe wa-visao-suporte só existe nela). */
.wa-num-suporte { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.wa-num-suporte-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wa-num-suporte-opcao { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.wa-num-suporte-opcao input, .wa-num-suporte-confirmo-linha input { accent-color: var(--action); }
.wa-num-suporte .rel-status-chip:not(.good) { background: var(--surface-2); color: var(--ink-muted); }
.wa-num-suporte-lista { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--ink-muted); display: flex; flex-direction: column; gap: 2px; }
.wa-num-suporte-confirma { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.wa-num-suporte-confirma[hidden] { display: none; }
.wa-num-suporte-confirmo-linha { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.wa-num-suporte-confirmo-linha input { margin-top: 2px; flex-shrink: 0; }
.wa-num-suporte-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-num-suporte-msg { margin: 0; }
.wa-num-suporte-msg:empty { display: none; }

.wa-list-empty .wa-sup-erro { display: block; margin-bottom: 10px; } /* lista de suporte que não carregou: a frase e, embaixo, o botão Tentar de novo */
.wa-sup-tag { display: inline-block; flex-shrink: 0; padding: 0 6px; border-radius: 5px; background: var(--surface-3); color: var(--ink); font-size: 10.5px; font-weight: 600; line-height: 16px; }
.wa-thread-who .wa-sup-tag { font-size: 10.5px; color: var(--ink); overflow: visible; vertical-align: 1px; }
.wa-lead-toggle[hidden], .wa-robo-btn[hidden], .wa-fila-pills .preset-btn[hidden] { display: none; }
@media (min-width: 1201px) {
  .wa-inbox.wa-visao-suporte { grid-template-columns: 320px minmax(0, 1fr); } /* sem painel do lead: a conversa ocupa o lugar dele */
}

/* ---------- Suporte no CRM, Etapa 1: o quadro de chamados (página Suporte e ficha) ----------
   Código em src/front/51-chamados.js. O item do menu e a página nascem escondidos no index.html e só aparecem quando o servidor diz que o cliente tem
   suporte. O kanban reaproveita as classes do Pipeline (.pipeline-board, .pipeline-col, .pipeline-cards, .pipeline-card, .lead-name...): aqui só entra o que
   o chamado tem a mais (prévia, tempo aberto, não lidas, seletor de etapa) e a gaveta da ficha. Cor: verde só no número de não lidas, como em Atendimentos;
   âmbar no tempo de quem está aberto há mais de 24 h; a etapa final fica em cinza (resolvido não é Viável). */
#client-nav .nav-item[hidden] { display: none; }
.ch-content [hidden] { display: none !important; } /* botões, painéis e o quadro têm display próprio, que passaria por cima do atributo hidden */
.ch-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ch-aviso { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--status-warning-wash); color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.ch-vazio { align-items: flex-start; gap: 10px; max-width: 640px; }
.ch-vazio h2 { margin: 0; font-family: var(--display); font-size: 19px; font-weight: 500; letter-spacing: -0.018em; }
.ch-vazio p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-muted); }
.ch-dica { margin: 0; line-height: 1.5; }
.ch-dica[hidden] { display: none; }
.ch-content .ppo-page-desc + .ch-dica { margin-top: -12px; }

.ch-col-final .pipeline-col-head h3 { color: var(--ink-muted); }
.ch-icone-final { stroke: var(--ink-muted); }
.ch-card .lead-card-top { align-items: flex-start; }
.ch-card .lead-meta { min-width: 0; }
.ch-nao-lidas {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; flex-shrink: 0;
  background: var(--green); color: var(--green-contrast); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.ch-previa {
  font-size: 12px; line-height: 1.4; color: var(--ink-muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch-nao-lido .ch-previa { color: var(--ink); }
.ch-tempo { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-tempo.longo { color: var(--status-warning); font-weight: 600; }
.ch-sem-resp { color: var(--ink-muted); }
.ch-mover { width: 100%; margin-top: 2px; padding: 5px 24px 5px 9px; font-size: 12px; font-weight: 500; color: var(--ink-muted); background-color: transparent; }
.ch-mover:hover, .ch-mover:focus-visible { color: var(--ink); border-color: var(--line-2); }
.ch-mover:focus-visible, .ch-etapa-nome:focus-visible, .ch-comentar textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
@media (max-width: 900px) {
  .ch-board { scroll-snap-type: x proximity; }
  .ch-board .pipeline-col { flex: 0 0 min(84%, 320px); min-width: 0; scroll-snap-align: start; }
}

.ch-etapas { gap: 14px; }
.ch-etapas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ch-etapa-linha { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto; align-items: center; gap: 8px 14px; }
.ch-etapa-nome { min-width: 0; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); color: var(--ink); font-size: 13.5px; font-family: var(--sans); }
.ch-etapa-nome:focus { outline: none; border-color: var(--green); }
.ch-etapa-info { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.ch-etapa-final { font-weight: 600; color: var(--ink); }
.ch-etapa-acoes { display: inline-flex; align-items: center; gap: 4px; }
.ch-etapa-acoes .btn-outline { padding: 6px 10px; }
.ch-etapa-nova { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ch-etapa-nova .modal-field { flex: 1 1 200px; margin: 0; }
.ch-check { display: inline-flex; align-items: center; gap: 7px; padding-bottom: 9px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.ch-check input { accent-color: var(--action); }
@media (max-width: 640px) {
  .ch-etapa-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .ch-etapa-info { grid-column: 1; }
  .ch-etapa-acoes { grid-column: 2; grid-row: 1 / span 2; }
}

.ch-fundo { position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, 0.45); }
.ch-ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 59; width: min(480px, 100%);
  background: var(--surface); border-left: 1px solid var(--line-2); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
}
.ch-fundo[hidden], .ch-ficha[hidden] { display: none; }
.ch-ficha-topo { display: flex; align-items: flex-start; gap: 10px; padding: max(16px, env(safe-area-inset-top)) 12px 12px 16px; border-bottom: 1px solid var(--line); }
.ch-ficha-quem { flex: 1; min-width: 0; }
.ch-ficha-quem h2 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -0.014em; line-height: 1.3; overflow-wrap: anywhere; }
.ch-ficha-sub { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 12.5px; color: var(--ink-muted); }
.ch-ficha-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; }
.ch-ficha-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ch-ficha-acoes .btn-solid:disabled { opacity: 0.5; cursor: not-allowed; }
.ch-dica-acao { flex-basis: 100%; margin: 0; line-height: 1.5; }
.ch-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-campos .modal-field { min-width: 0; }
.ch-campos select { width: 100%; }
.ch-dados { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 14px; }
.ch-dados dt { font-size: 11.5px; color: var(--ink-muted); }
.ch-dados dd { margin: 2px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.ch-hist-bloco h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 650; }
.ch-comentar { display: flex; flex-direction: column; gap: 8px; }
.ch-comentar textarea { width: 100%; resize: vertical; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 12px; color: var(--ink); font: inherit; font-size: 13.5px; }
.ch-comentar textarea:focus { outline: none; border-color: var(--green); }
.ch-comentar-acoes { display: flex; justify-content: flex-end; }
.ch-comentar .btn-solid:disabled { opacity: 0.6; cursor: default; }
.ch-hist { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ch-ev { padding: 1px 0 1px 12px; border-left: 2px solid var(--line-2); }
.ch-ev-nota { border-left-color: var(--green); }
.ch-ev-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; color: var(--ink-muted); }
.ch-ev-rotulo { font-weight: 650; color: var(--ink); }
.ch-ev-topo time { margin-left: auto; font-variant-numeric: tabular-nums; }
.ch-ev-texto { margin-top: 3px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-hist-nota { font-size: 12.5px; color: var(--ink-muted); }
.ch-sep { color: var(--ink-faint); }
@media (max-width: 900px) {
  .ch-ficha { width: 100%; border-left: 0; }
}
@media (max-width: 480px) {
  .ch-campos { grid-template-columns: 1fr; }
}

.ch-toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 70; max-width: min(92vw, 460px);
  padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 550; line-height: 1.4;
  box-shadow: var(--shadow-pop); opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease;
}
.ch-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ch-toast.erro { background: var(--status-critical); color: #fff; }
@media (prefers-reduced-motion: reduce) { .ch-toast { transition: none; } }

/* "Abrir chamado" / "Ver chamado" na conversa de suporte: com o botão novo a barra de ações pode quebrar de linha no celular */
.wa-thread-actions:has(#wa-chamado) { flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Suporte no CRM, Etapa 2: o robô de suporte (src/front/61-robo-suporte.js) ----------
   Faixa e cartão do resumo na conversa de suporte, etiquetas da lista, selo no cartão do quadro de chamados e o painel da equipe. Tudo é criado por JS e só
   aparece com o robô de suporte do cliente ligado (o painel, só para a equipe): com ele desligado nenhuma regra daqui pega em nada da tela de sempre.
   Cor: verde só no ponto do robô ligado (o mesmo do botão do robô de atendimento); âmbar para o que pede atenção; vermelho só na urgência alta. */
.rsup-conversa { flex-shrink: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.rsup-faixa { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; font-size: 12.5px; line-height: 1.45; }
.rsup-faixa .wa-robo-dot { margin-top: 5px; flex-shrink: 0; }
.rsup-faixa-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rsup-faixa-txt b { font-weight: 600; color: var(--ink); }
.rsup-faixa-txt span { color: var(--ink-muted); }
.rsup-cartao summary { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 9px 14px; cursor: pointer; list-style: none; font-size: 12.5px; }
.rsup-cartao summary::-webkit-details-marker { display: none; }
.rsup-cartao summary::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: rotate(-45deg); transition: transform 0.12s; }
.rsup-cartao[open] summary::before { transform: rotate(45deg); }
.rsup-cartao summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.rsup-cartao-titulo { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.rsup-cartao-hora { font-size: 11.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rsup-cartao-corpo { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 12px; max-height: min(38vh, 280px); overflow-y: auto; }
.rsup-cartao-sub { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.rsup-dados { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.rsup-dados dt { font-size: 11px; color: var(--ink-muted); }
.rsup-dados dd { margin: 1px 0 0; font-size: 13px; font-weight: 500; }
.rsup-urg-alta { color: var(--status-critical); }
.rsup-urg-media { color: var(--status-warning); }
.rsup-bloco h4 { margin: 0 0 3px; font-size: 11px; font-weight: 600; color: var(--ink-muted); }
.rsup-bloco p { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Etapa 3 (consulta ao ERP): o assinante que o robô identificou, na conversa; e a lista das consultas do robô, no painel */
.rsup-assinante { margin-top: 4px; }
.rsup-conf { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.rsup-conf-sim { background: var(--green-wash-2); color: var(--green); }
.rsup-conf-nao { background: var(--status-warning-wash); color: var(--ink); }
.rsup-consultas { font-size: 12.5px; }
.rsup-consultas summary { cursor: pointer; padding: 4px 0; font-weight: 600; }
.rsup-consulta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rsup-consulta-hora { color: var(--ink-faint); font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsup-consulta-det { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; color: var(--ink-muted); }
@media (max-width: 900px) {
  .rsup-faixa, .rsup-cartao summary { padding-left: 10px; padding-right: 10px; }
  .rsup-cartao-corpo { padding: 0 10px 10px; max-height: 32vh; }
}

/* Etiqueta na lista (do robô: passou para a equipe, ou resolvido) e selo "Com o robô" no cartão do quadro de chamados */
.wa-sup-robo { flex-shrink: 0; padding: 0 6px; border-radius: 5px; background: var(--surface-3); color: var(--ink); font-size: 10.5px; font-weight: 600; line-height: 16px; }
.wa-sup-robo.urgente { background: var(--status-critical-wash); color: var(--status-critical); }
.wa-item-meta:has(.wa-sup-robo) { flex-wrap: wrap; row-gap: 3px; white-space: normal; overflow: visible; } /* com a etiqueta a linha não cabe: quebra, para o Aceitar não ficar cortado */
.ch-selo-robo { align-self: flex-start; padding: 0 6px; border-radius: 5px; background: var(--green-wash-2); color: var(--green); font-size: 10.5px; font-weight: 600; line-height: 16px; }
.ch-ev-robo { border-left-color: var(--ink-faint); }

/* O painel Robô de suporte (só a equipe): liga e desliga com confirmação, atendimento e base de conhecimento */
.rsup-box { max-width: 720px; }
.rsup-box [hidden] { display: none !important; }
.rsup-topo { display: flex; align-items: center; gap: 10px; }
.rsup-topo h2 { flex: 1; min-width: 0; }
.rsup-topo .wa-icon-btn { margin: -6px -8px -6px 0; }
.rsup-corpo { display: flex; flex-direction: column; gap: 16px; }
.rsup-intro { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.rsup-carregando { margin: 0; font-size: 13px; color: var(--ink-muted); }
.rsup-erro-carga { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rsup-erro-carga p { margin: 0; font-size: 13px; color: var(--status-critical); }
.rsup-avisos { display: flex; flex-direction: column; gap: 8px; }
.rsup-aviso { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--status-warning-wash); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.rsup-religue { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.rsup-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.rsup-sec h3 { margin: 0; font-size: 14px; font-weight: 650; }
.rsup-sec h4 { margin: 0; font-size: 13px; font-weight: 650; }
.rsup-estado { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; font-size: 13px; }
.rsup-confirma { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.rsup-confirma-titulo { margin: 0; font-size: 13px; font-weight: 650; }
.rsup-confirma ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.rsup-confirma-acoes, .rsup-linha { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.rsup-linha .kpi-sub:empty { display: none; }
.rsup-base-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.rsup-base-topo .kpi-sub { margin: 3px 0 0; }
.rsup-base-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.rsup-vazio { margin: 0; font-size: 13px; color: var(--ink-muted); }
.rsup-form { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
.rsup-form textarea, .rsup-sec textarea { width: 100%; resize: vertical; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px; color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.45; }
.rsup-form textarea { background: var(--surface); }
.rsup-form textarea:focus, .rsup-sec textarea:focus { outline: none; border-color: var(--green); }
.rsup-form .modal-field input, .rsup-form .modal-field select { background: var(--surface); }
#rsup-lista { display: flex; flex-direction: column; gap: 14px; }
.rsup-assunto h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.rsup-n { padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 11px; font-weight: 600; color: var(--ink-muted); }
.rsup-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rsup-item { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.rsup-item-off .rsup-item-titulo, .rsup-item-off .rsup-item-previa { color: var(--ink-muted); }
.rsup-item-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.rsup-item-titulo { min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.rsup-chip-item { padding: 0 6px; border-radius: 5px; background: var(--surface-3); color: var(--ink-muted); font-size: 10.5px; font-weight: 600; line-height: 16px; }
.rsup-chip-item.aviso { background: var(--status-warning-wash); color: var(--ink); }
.rsup-item-previa { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rsup-item-acoes { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.rsup-ativo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.rsup-ativo input { accent-color: var(--green); }
.rsup-item-botoes { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rsup-item-botoes .btn-outline { padding: 5px 10px; font-size: 12px; }
.rsup-item-botoes .wa-icon-btn { width: 30px; height: 30px; }
.rsup-box :focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
@media (max-width: 600px) {
  .modal-overlay:has(.rsup-box) { padding: 10px; }
  .rsup-box { padding: 16px 14px; max-height: 94vh; }
  .rsup-form .modal-grid-2 { grid-template-columns: 1fr; }
  .rsup-form textarea, .rsup-sec textarea, .rsup-sec input, .rsup-sec select { font-size: 16px; } /* com menos, o iPhone dá zoom ao tocar para escrever */
}

/* ---------- Suporte no CRM, Etapa 4.1: avisos de rede (src/front/66-avisos-rede.js) ----------
   Botão "Avisos de rede" na visão Suporte de Atendimentos e o painel com a lista, o formulário e as ações de cada aviso. Tudo é criado por JS e o botão só existe na visão
   Suporte: sem a chave do suporte nenhuma regra daqui pega em nada da tela de sempre. Cor: âmbar para o que pede atenção (aviso ativo, aviso que o robô não lê), verde só
   no "resolvido", vermelho só no erro. */
.avr-btn .avr-dot.ativo { background: var(--status-warning); }
.avr-n { padding: 0 6px; border-radius: 999px; background: var(--status-warning-wash); color: var(--ink); font-size: 11px; font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; }
.avr-n[hidden] { display: none; }
.avr-box { max-width: 720px; }
.avr-box [hidden] { display: none !important; }
.avr-topo { display: flex; align-items: center; gap: 10px; }
.avr-topo h2 { flex: 1; min-width: 0; }
.avr-topo .wa-icon-btn { margin: -6px -8px -6px 0; }
.avr-corpo { display: flex; flex-direction: column; gap: 14px; }
.avr-intro { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
.avr-carregando { margin: 0; font-size: 13px; color: var(--ink-muted); }
.avr-erro-carga { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.avr-erro-carga p { margin: 0; font-size: 13px; color: var(--status-critical); }
.avr-notas { display: flex; flex-direction: column; gap: 8px; }
.avr-nota { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--status-warning-wash); font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.avr-nota-erro { background: var(--status-critical-wash); color: var(--status-critical); }
.avr-acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }
.avr-acoes-topo:empty { display: none; }
.avr-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.avr-sec h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; }
.avr-contagem { padding: 0 6px; border-radius: 999px; background: var(--surface-3); font-size: 11px; font-weight: 600; color: var(--ink-muted); }
.avr-vazio { margin: 0; font-size: 13px; color: var(--ink-muted); }
.avr-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avr-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.avr-item-ativo { border-left: 3px solid var(--status-warning); }
.avr-item-resolvido .avr-item-titulo, .avr-item-expirado .avr-item-titulo, .avr-item-resolvido .avr-item-texto, .avr-item-expirado .avr-item-texto { color: var(--ink-muted); }
.avr-item-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.avr-item-titulo { min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.avr-chip { padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.avr-chip-ativo { background: var(--status-warning-wash); color: var(--ink); }
.avr-chip-ok { background: var(--green-wash-2); color: var(--green); }
.avr-chip-off { background: var(--surface-3); color: var(--ink-muted); }
.avr-dados { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.avr-dados dt { font-size: 11px; color: var(--ink-muted); }
.avr-dados dd { margin: 1px 0 0; font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.avr-item-texto { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.avr-item-alerta { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--status-warning-wash); font-size: 12px; line-height: 1.45; }
.avr-item-autor { margin: 0; font-size: 11.5px; color: var(--ink-faint); }
.avr-item-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.avr-item-acoes .btn-solid, .avr-item-acoes .btn-outline { padding: 5px 10px; font-size: 12px; }
.avr-form { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); }
.avr-form h3 { margin: 0; font-size: 14px; font-weight: 650; }
.avr-form .modal-field input, .avr-form .modal-field select, .avr-form textarea { background: var(--surface); }
.avr-form textarea { width: 100%; resize: vertical; border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px; color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.5; }
.avr-form textarea:focus { outline: none; border-color: var(--green); }
.avr-box :focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
@media (max-width: 600px) {
  .modal-overlay:has(.avr-box) { padding: 10px; }
  .avr-box { padding: 16px 14px; max-height: 94vh; }
  .avr-form .modal-grid-2 { grid-template-columns: 1fr; }
  .avr-form textarea, .avr-form input, .avr-form select { font-size: 16px; } /* com menos, o iPhone dá zoom ao tocar para escrever */
  .avr-item-acoes .btn-solid, .avr-item-acoes .btn-outline { flex: 1 1 auto; }
}

/* ---------- Boletos na conversa (Atendimentos, 05/10/2026; src/front/52-boletos.js) ----------
   Quadro entre o cabeçalho da conversa e as mensagens: faturas em aberto do assinante e os botões de envio. */
.bol-painel { border-bottom: 1px solid var(--line); background: var(--surface-2); padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px; max-height: 46%; overflow-y: auto; flex-shrink: 0; font-size: 13px; }
.bol-painel[hidden] { display: none; }
.bol-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bol-topo b { font-size: 13.5px; font-weight: 600; }
.bol-quem { margin: 0; font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.bol-quem b { font-weight: 600; }
.bol-nota { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); }
.bol-nota.erro { color: var(--status-critical); }
.bol-miudo { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.bol-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bol-fatura { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.bol-fatura-txt { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; font-size: 13px; }
.bol-fatura-txt b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bol-venc { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.bol-desc { flex-basis: 100%; font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.bol-prazo { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink-muted); white-space: nowrap; }
.bol-prazo.hoje { color: var(--ink); }
.bol-prazo.vencida { color: var(--status-critical); background: var(--status-critical-wash); }
.bol-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.bol-acoes .btn-outline { padding: 5px 10px; font-size: 12.5px; }
.bol-acoes .btn-outline:disabled { opacity: 0.55; cursor: default; }
.bol-rodape { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bol-cpf { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.bol-cpf p { margin: 0; font-size: 12.5px; color: var(--ink); }
.bol-cpf-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.bol-cpf-linha input { flex: 1 1 180px; min-width: 0; max-width: 260px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bol-cpf-linha input:focus { outline: none; border-color: var(--green); }
.bol-cpf-linha .btn-solid { padding: 7px 14px; }
/* Com o botão Boletos a barra de ações da conversa pode quebrar de linha no celular */
.wa-thread-actions:has(#bol-btn:not([hidden])) { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) {
  .bol-painel { max-height: 55%; padding: 10px 10px 12px; }
  .bol-cpf-linha input { font-size: 16px; } /* com menos, o iPhone dá zoom ao tocar */
}

/* Primeiros passos do teste grátis e janela do aviso do teste (src/front/53-primeiros-passos.js) */
.conta-teste-chip[role="button"] { cursor: pointer; }
.conta-teste-chip[role="button"]:hover { filter: brightness(1.08); text-decoration: underline; text-underline-offset: 2px; }
.conta-teste-chip[role="button"]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pp-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 14px; padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--shadow-card); }
.pp-card[hidden] { display: none; }
.pp-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pp-kicker { color: var(--ink-muted); font-weight: 500; font-size: 13px; }
.pp-cab h2 { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: -0.02em; margin: 2px 0 4px; }
.pp-cab p { margin: 0; color: var(--ink-muted); font-size: 13.5px; max-width: 60ch; }
.pp-lado { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-progresso { color: var(--ink-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-passo { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, var(--surface)); }
.pp-marca { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); display: block; }
.pp-passo.feito .pp-marca { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 3px var(--surface); }
.pp-texto { display: grid; gap: 2px; min-width: 0; }
.pp-texto b { font-weight: 500; font-size: 14px; }
.pp-texto span { color: var(--ink-muted); font-size: 12.5px; }
.pp-passo.feito .pp-texto b { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.pp-ok { color: var(--green); font-size: 12.5px; font-weight: 600; }
.pp-ir { white-space: nowrap; }
.pp-card.completo { border-left-color: var(--line-2); }
@media (max-width: 560px) {
  .pp-card { padding: 16px; }
  .pp-passo { grid-template-columns: 22px minmax(0, 1fr); }
  .pp-passo .pp-ir, .pp-passo .pp-ok { grid-column: 2; justify-self: start; }
}
/* Seletor de quantos itens a lista mostra por vez (Contatos e Lista do Pipeline), 05/10/2026 */
.lista-passo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-muted); }
.lista-passo-barra { display: flex; justify-content: flex-end; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }

/* Nota da Meta e estado do modelo em cada passo da Régua de cobrança (p123, 05/10/2026) */
.rc-qualidade { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 12.5px; color: var(--ink-muted); }
.rc-q-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-muted); flex: none; }
.rc-q-verde .rc-q-ponto { background: var(--green); }
.rc-q-amarelo .rc-q-ponto { background: #d9a31a; }
.rc-q-vermelho .rc-q-ponto { background: #d64545; }

/* ---------- Respostas prontas (Atendimentos, 05/10/2026; src/front/54-respostas-prontas.js) ----------
   Quadro que abre por cima da caixa de mensagem: lista para usar, e para o gestor a lista de gerenciar e o formulário. */
.wa-composer { position: relative; }
.rp-pop { position: absolute; left: 12px; bottom: calc(100% + 6px); width: min(460px, calc(100% - 24px)); max-height: min(440px, 62vh); z-index: 30; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22); font-size: 13px; }
.rp-pop[hidden] { display: none; }
.rp-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rp-topo b { font-size: 13.5px; font-weight: 600; }
.rp-busca { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); padding: 8px 10px; font: inherit; }
.rp-busca:focus { outline: none; border-color: var(--green); }
.rp-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 44px; }
.rp-item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; background: none; border: 0; border-radius: 8px; padding: 8px 10px; color: var(--ink); cursor: pointer; font: inherit; }
.rp-item b { font-weight: 600; font-size: 13px; }
.rp-item span { color: var(--ink-muted); font-size: 12.5px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.rp-item:hover, .rp-item.sel { background: var(--surface-2); }
.rp-item.sel { box-shadow: inset 2px 0 0 var(--green); }
.rp-vazio { color: var(--ink-muted); font-size: 12.5px; line-height: 1.5; padding: 8px 4px; }
.rp-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-rodape .btn-solid { padding: 7px 14px; }
.rp-sugeridas { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
.rp-ger { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line); }
.rp-ger:first-child { border-top: 0; }
.rp-ger-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-ger-txt b { font-weight: 600; overflow-wrap: anywhere; }
.rp-ger-txt span { color: var(--ink-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-perigo { color: var(--status-critical, #c0392b); }
.rp-pop .modal-field { margin: 0; }
.rp-pop .modal-field textarea { width: 100%; resize: vertical; min-height: 96px; font: inherit; line-height: 1.5; }
.rp-vars { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rp-var { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 99px; padding: 3px 9px; font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
.rp-var:hover { border-color: var(--green); }
@media (max-width: 900px) {
  .rp-pop { left: 8px; width: calc(100% - 16px); max-height: 58vh; }
  .rp-busca, .rp-pop .modal-field input, .rp-pop .modal-field textarea { font-size: 16px; } /* com menos, o iPhone dá zoom ao tocar */
}

/* ---------- Ficha do lead: avisos (05/10/2026; src/front/55-ficha-avisos.js) ----------
   Aviso de cadastro repetido (abaixo do celular) e endereço achado pelo CEP (abaixo do CEP). */
.fa-aviso { background: var(--status-warning-wash); border-radius: 8px; padding: 10px 12px; margin: -4px 0 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.fa-aviso[hidden] { display: none; }
.fa-aviso > b { font-weight: 600; }
.fa-aviso ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fa-aviso li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.fa-quem { min-width: 0; overflow-wrap: anywhere; }
.fa-nome { font-weight: 600; }
#fa-cep { background: var(--surface-2); flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }

/* ---------- Roleta: distribuição automática de leads (tela Vendedores, 05/10/2026; src/front/56-roleta.js) ---------- */
.rl-painel { max-width: 680px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.rl-painel[hidden] { display: none; }
.rl-painel .panel-head { margin-bottom: 0; }
.rl-painel .modal-field { margin: 0; max-width: 420px; }
.rl-quem { display: flex; flex-direction: column; gap: 2px; }
.rl-rotulo { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); margin-bottom: 4px; }
.rl-quem .rc-check { padding-bottom: 4px; flex-wrap: wrap; gap: 4px 8px; }
.rl-nome { font-weight: 500; overflow-wrap: anywhere; }
.rl-proximo { margin: 0; font-size: 13px; }
.rl-painel .modal-error { margin: 0; }
.rl-painel .rc-acoes { margin-top: 0; }

/* Aceite dos Termos de uso e da Política de privacidade (src/front/57-aceite-termos.js) e links legais no rodapé do login */
/* z-index acima do mapa (Leaflet usa até 1000) e janela que rola em tela baixa (celular deitado, zoom): o botão nunca fica cortado */
.termos-aceite-overlay { z-index: 3000; overflow-y: auto; }
.termos-aceite-overlay .modal-box { max-width: 460px; max-height: calc(100dvh - 40px); overflow-y: auto; }
.termos-aceite-overlay h2, .termos-aceite-overlay p { margin: 0; }
.termos-aceite-links { font-size: 14px; }
.termos-aceite-links a { color: var(--green); text-decoration: underline; }
.termos-aceite-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; cursor: pointer; }
.termos-aceite-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); }
.termos-aceite-erro { color: var(--status-critical); font-size: 13.5px; }
.termos-aceite-erro[hidden] { display: none; }
.login-screen[data-tela="maquete"] .login-foot a { color: #8d9096; text-decoration: underline; }

/* ---------- Etiquetas nos leads (Pipeline e ficha, 05/10/2026; src/front/57-etiquetas.js) ---------- */
.etq { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; border-radius: 99px; padding: 1px 8px; font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); overflow-wrap: anywhere; }
.etq-c0 { background: rgba(69, 196, 135, 0.16); border-color: rgba(69, 196, 135, 0.45); }
.etq-c1 { background: rgba(255, 184, 74, 0.18); border-color: rgba(255, 184, 74, 0.5); }
.etq-c2 { background: rgba(92, 156, 255, 0.16); border-color: rgba(92, 156, 255, 0.45); }
.etq-c3 { background: rgba(227, 93, 93, 0.14); border-color: rgba(227, 93, 93, 0.4); }
.etq-c4 { background: rgba(170, 120, 255, 0.16); border-color: rgba(170, 120, 255, 0.45); }
.etq-c5 { background: rgba(60, 190, 200, 0.16); border-color: rgba(60, 190, 200, 0.45); }
.etq-x { border: 0; background: none; color: inherit; font: inherit; font-size: 14px; line-height: 1; padding: 0 0 0 2px; cursor: pointer; opacity: 0.65; }
.etq-x:hover { opacity: 1; }
.etq-linha { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.etq-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); padding: 6px 8px; cursor: text; }
.etq-caixa:focus-within { border-color: var(--green); }
.etq-caixa > span { display: contents; }
.etq-caixa input { flex: 1; min-width: 120px; border: 0; background: none; color: var(--ink); font: inherit; padding: 3px 2px; }
.etq-caixa input:focus { outline: none; }
#etq-filtro[hidden] { display: none; }

/* ---------- Preferências da conta (05/10/2026; src/front/58-preferencias.js) ---------- */
#pf-corpo { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.pf-chave { align-items: flex-start; padding-bottom: 0; }
.pf-chave input { margin-top: 3px; flex-shrink: 0; }
.pf-chave > span { display: flex; flex-direction: column; gap: 4px; }
.pf-amostra { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; line-height: 1.5; color: var(--ink); font-weight: 400; }
.pf-chave b { font-weight: 600; font-size: 13.5px; }
#pf-corpo .modal-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
#pf-corpo .modal-field select { max-width: 220px; }

/* ---------- Anúncio e fila (Atendimentos, 05/10/2026; src/front/59-anuncio-fila.js) ---------- */
.af-anuncio { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.af-rotulo { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.af-titulo { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.af-texto { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow-y: auto; color: var(--ink); }
.af-espera { color: var(--status-critical); font-weight: 600; margin-left: auto; flex-shrink: 0; padding-left: 6px; }
.wa-item.af-parada { box-shadow: inset 3px 0 0 var(--status-critical); }
.af-fila { display: block; width: calc(100% - 28px); margin: 8px 14px 4px; text-align: left; background: var(--status-critical-wash); color: var(--ink); border: 0; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.af-fila[hidden] { display: none; }

/* ---------- Gerador de UTM (Integração, 05/10/2026; src/front/60-gerador-utm.js) ---------- */
.utm-painel { padding: 20px; max-width: 560px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.utm-topo { font-size: 14px; font-weight: 700; color: var(--ink); }
.utm-painel .report-intro { margin: 0; }
.utm-painel .modal-field { margin: 0; }
.utm-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.utm-saida { display: flex; gap: 8px; }
.utm-saida input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.utm-painel > p { margin: 0; }

/* ---------- Escrever com IA na caixa de mensagem (06/10/2026; src/front/68-redacao-ia.js) ---------- */
.ri-tons { display: flex; flex-wrap: wrap; gap: 6px; }
.ri-tom { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ri-tom:hover { border-color: var(--green); }
.ri-tom.sel { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.ri-dica { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-muted); }
.ri-aviso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 4px; font-size: 12.5px; color: var(--ink-muted); }
.ri-aviso[hidden] { display: none; }

/* ---------- Configuração por atendente (06/10/2026; src/front/69-config-atendente.js) ---------- */
.cfg-bloco { display: flex; flex-direction: column; gap: 12px; }
.cfg-perm { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 13px; font-weight: 400; cursor: pointer; }
.modal-field .cfg-perm input[type="checkbox"] { width: auto; flex-shrink: 0; margin-top: 3px; }
.cfg-perm span { display: flex; flex-direction: column; gap: 1px; }
body.perm-sem-transferir #wa-assign { display: none !important; }

/* ---------- Pesquisa de satisfação (06/10/2026; src/front/70-pesquisa.js) ---------- */
.pq-resumo { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pq-topo { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.pq-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pq-num { display: flex; flex-direction: column; gap: 2px; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.pq-v { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.pq-v small { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.pq-sub { margin: 4px 0 0; font-size: 13px; }
.pq-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pq-lista li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pq-lista li > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Captação de leads (06/10/2026; src/front/67-captacao.js) ---------- */
.cp-painel { padding: 20px; max-width: 640px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px; }
.cp-topo { font-size: 14px; font-weight: 700; color: var(--ink); }
.cp-painel .report-intro { margin: 0; }
.cp-bloco { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cp-bloco .modal-field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-bloco textarea { width: 100%; resize: vertical; font: inherit; }
.cp-bloco .utm-saida input { font-family: var(--mono); font-size: 12px; }
.cp-painel > p { margin: 0; }
.cp-bloco .rc-check { align-items: flex-start; }
.cp-bloco .rc-check input { margin-top: 3px; flex-shrink: 0; }
.cp-bloco .rc-check > span { display: flex; flex-direction: column; gap: 4px; }
.cp-bloco .rc-check b { font-weight: 600; font-size: 13.5px; }

/* ---------- Grupos de origens (06/10/2026; src/front/61-grupos-origem.js) ---------- */
.go-grupo { margin-left: auto; max-width: 150px; font-size: 12px; padding-top: 4px; padding-bottom: 4px; }
.go-rel { margin-top: 18px; }
.go-rel[hidden] { display: none; }
.go-rel-titulo { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }

/* ---------- Alterações da conta (06/10/2026; src/front/62-alteracoes.js) ---------- */
#al-corpo { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
#al-corpo .select-pill { align-self: flex-start; }
.al-lista { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; font-size: 13px; }
.al-lista li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline; }
.al-lista li:first-child { border-top: 0; }
.al-quando { color: var(--ink-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 92px; font-size: 12.5px; }
.al-oque { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }

/* ---------- Anotação por voz (ficha do lead, 06/10/2026; src/front/63-nota-voz.js) ---------- */
.nv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; flex-shrink: 0; }
.nv-btn svg { width: 16px; height: 16px; }
.nv-btn .nv-txt:empty { display: none; }
.nv-btn.nv-gravando { border-color: var(--status-critical); color: var(--status-critical); }
.nv-nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; }
.nv-nota[hidden] { display: none; }

/* ---------- Previsão de fechamento e de recebíveis (página do cliente, 06/10/2026; src/front/80-previsao.js) ---------- */
.pv-painel { margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px; }
.pv-painel[hidden] { display: none; }
.pv-painel .panel-head { margin-bottom: 0; }
.pv-painel .panel-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-muted); max-width: 70ch; }
.pv-funil { margin: 0; max-width: 280px; }
.pv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pv-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.pv-kpi-rotulo { font-size: 12px; color: var(--ink-muted); }
.pv-kpi-valor { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pv-bloco { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pv-bloco h3 { margin: 0; font-size: 13px; font-weight: 600; }
.pv-bloco .rel-nota, .pv-painel > .rel-nota, .pv-painel > .fx-alerta { margin: 0; }
.pv-painel .rel-tabela .kpi-sub { margin-left: 6px; white-space: nowrap; }
/* ---------- Ações em massa (Lista do Pipeline, 06/10/2026; src/front/64-acoes-em-massa.js) ---------- */
.lista-passo-barra.am-com-barra { justify-content: flex-start; align-items: center; gap: 12px; flex-wrap: wrap; }
.lista-passo-barra.am-com-barra .lista-passo { margin-left: auto; }
.am-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; min-width: 0; }
.am-barra[hidden] { display: none; }
.am-todos { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); cursor: pointer; }
.am-texto { color: var(--ink); }
.am-texto.am-perigo { color: var(--status-critical); }
.am-nota { color: var(--ink-muted); }
.am-btn { padding: 6px 12px; font-size: 12.5px; }
.am-barra .select-pill { font-size: 12.5px; padding-top: 5px; padding-bottom: 5px; max-width: 170px; }
.am-barra .select-pill.am-falta { border-color: var(--status-critical); }
.am-caixa { margin: 0 10px 0 0; vertical-align: middle; cursor: pointer; }
tr.pipeline-list-row.am-marcada td { background: var(--surface-2); }

/* ---------- Relatório por atendente (aba Atendentes dos Relatórios, 06/10/2026; src/front/65-relatorio-atendentes.js) ---------- */
#ra-atendentes .ra-fila { margin: 0 0 14px; font-size: 13px; color: var(--ink-muted); }
#ra-atendentes .ra-fila b { color: var(--ink); }
#ra-atendentes td.ra-alerta { color: var(--status-critical); font-weight: 600; }
#ra-atendentes .ra-sub { display: block; font-size: 11.5px; color: var(--ink-muted); font-weight: 400; }

/* ---------- Iniciar conversa pelo CRM (ficha do lead, 06/10/2026; src/front/66-iniciar-conversa.js) ---------- */
.ic-escolha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; font-size: 12.5px; }
.ic-escolha[hidden] { display: none; }
.ic-sugestao { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.ic-sugestao[hidden] { display: none; }
.ic-sugestao .wa-tpl-preview { margin: 0; align-self: stretch; }
.ic-escolha .select-pill { font-size: 12.5px; padding-top: 4px; padding-bottom: 4px; }
.ic-nota { margin: 6px 0 0; font-size: 12.5px; }
.ic-nota[hidden] { display: none; }

/* ---------- Juntar cadastros repetidos (janela Leads duplicados, 06/10/2026; src/front/66b-juntar-repetidos.js) ---------- */
.jr-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; }
.jr-fica { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); }
.jr-linha .select-pill { font-size: 12.5px; padding-top: 4px; padding-bottom: 4px; max-width: 280px; }
.jr-btn { padding: 5px 12px; font-size: 12.5px; }
.jr-msg { flex-basis: 100%; color: var(--ink-muted); line-height: 1.45; }
.jr-msg:empty { display: none; }
.jr-msg.jr-erro { color: var(--status-critical); }

/* ---------- Automações do funil (menu Configurações, 06/10/2026; src/front/66c-automacoes.js) ---------- */
#au-corpo { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; max-height: 62vh; overflow-y: auto; padding-right: 2px; }
.au-regra { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; gap: 12px; align-items: flex-start; }
.au-regra-txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
.au-regra-txt b { display: block; }
.au-regra-sub { color: var(--ink-muted); font-size: 12.5px; }
.au-regra-botoes { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.au-form { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.au-form .modal-field { margin: 0; }
.au-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.au-linha > .modal-field { flex: 1; min-width: 160px; }
.au-rotulo { margin: 4px 0 -2px; font-size: 12.5px; color: var(--ink-muted); }
.au-acao { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.au-acao > span { flex-shrink: 0; }
.au-acao .rc-check { margin: 0; flex-shrink: 0; min-width: 176px; }
.au-acao.au-ligada .rc-check { min-width: 0; flex-shrink: 1; }
.au-campo { flex: 1; min-width: 0; }
.au-dias { width: 64px; flex-shrink: 0; }
@media (max-width: 560px) { .au-acao { flex-wrap: wrap; } .au-campo { min-width: 140px; } }
.au-novas { display: flex; gap: 8px; flex-wrap: wrap; }
.au-hist { font-size: 12.5px; color: var(--ink-muted); max-height: 140px; overflow-y: auto; margin: 0; padding-left: 18px; }

/* ---------- Campanhas que reabrem leads antigos (Pipeline, 06/10/2026; src/front/81-campanhas.js) ---------- */
.modal-box-wide.cp-caixa { max-width: 760px; }
#cp-corpo { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; min-width: 0; }
.cp-intro { margin: 0; line-height: 1.5; max-width: 72ch; }
.cp-sub { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; }
.cp-rotulo { margin: 4px 0 0; font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cp-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cp-grade-3 { grid-template-columns: repeat(3, 1fr); }
.cp-grade > * { min-width: 0; margin: 0; }
.cp-grade .kpi-sub { display: block; margin-top: 4px; }
#cp-previa { display: flex; flex-direction: column; gap: 8px; }
#cp-previa .rc-acoes { margin-top: 0; }
#cp-previa .modal-error { font-size: 12.5px; }
.cp-resultado { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.cp-resultado p { margin: 0; font-size: 13px; line-height: 1.5; }
.cp-resultado .rc-acoes { margin-top: 4px; }
.cp-nota { margin: 0; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.cp-tabela td { vertical-align: top; overflow-wrap: anywhere; }
.cp-tabela .cp-linha { display: block; margin-top: 2px; font-size: 12.5px; }
.cp-tabela .cp-quando { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cp-tabela .cp-desfazer { padding: 6px 10px; }
@media (max-width: 700px) {
  .cp-grade, .cp-grade-3 { grid-template-columns: 1fr; }
}

/* ---------- Quadro Clientes: ativação, upgrade, renovação e retenção (06/10/2026; src/front/82-clientes.js) ---------- */
.cc-intro { margin: -6px 0 12px; max-width: 80ch; }
#cc-aviso:empty { display: none; }
#cc-aviso { margin-bottom: 12px; }
.cc-alerta .rel-link { margin-left: 6px; }
.cc-estado { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cc-estado p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.cc-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cc-filtros:empty { display: none; }
.cc-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: transparent; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.cc-chip.active { background: var(--surface-2); border-color: var(--line-2); font-weight: 600; }
.cc-card { cursor: pointer; }
.cc-card.cc-em-risco { box-shadow: inset 3px 0 0 var(--status-critical); }
.cc-card .cc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cc-tipo { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 0 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.cc-tipo-retencao { background: var(--status-warning-wash); border-color: transparent; }
.cc-plano { font-size: 12px; color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-dias { font-size: 11.5px; color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cc-risco { font-size: 12px; color: var(--status-critical); }
.cc-motivo { font-size: 12px; color: var(--ink-muted); overflow-wrap: anywhere; }
.cc-wa { font-size: 12px; }
#cc-corpo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#cc-corpo > .kpi-sub { margin: -6px 0 0; }
#cc-corpo .modal-field { margin: 0; }
.cc-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cc-grade > * { min-width: 0; }
.cc-cancelou { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.cc-cancelou .kpi-sub { margin: 0; }
.cc-motivo-txt { margin-top: 6px; }
.cc-achados { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.cc-achados li + li { border-top: 1px solid var(--line); }
.cc-achado { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 9px 12px; background: transparent; border: 0; font: inherit; color: var(--ink); cursor: pointer; }
.cc-achado:hover, .cc-achado:focus-visible { background: var(--surface-2); outline: none; }
#cc-achados .kpi-sub { margin: 0; }
.cc-escolhido { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.cc-alternar { margin: -4px 0 0; font-size: 12.5px; }
#cc-corpo .modal-actions .cc-excluir { margin-right: auto; color: var(--status-critical); }
@media (max-width: 700px) {
  .cc-grade { grid-template-columns: 1fr; }
  .cc-board { scroll-snap-type: x proximity; }
  .cc-board .pipeline-col { flex: 0 0 min(84%, 320px); min-width: 0; scroll-snap-align: start; }
}

/* ---------- Recorrência: CAC, MRR novo, payback, churn e LTV (Relatórios, 06/10/2026; src/front/83-recorrencia.js) ---------- */
#rel-aba-recorrencia { display: flex; flex-direction: column; gap: 14px; }
#rel-aba-recorrencia[hidden] { display: none; }
#rel-aba-recorrencia .rcr-meses { margin: 0; max-width: 220px; }
#rel-aba-recorrencia .rcr-kpis { grid-template-columns: repeat(4, 1fr); }
#rel-aba-recorrencia .rcr-kpis .perf-item { min-width: 0; }
#rel-aba-recorrencia .rel-panel h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }
#rel-aba-recorrencia .rel-panel .rel-nota { margin-top: 10px; }
#rel-aba-recorrencia .rel-tabela .kpi-sub { margin-left: 4px; white-space: nowrap; }
#rel-aba-recorrencia .rel-tabela td:first-child { white-space: nowrap; }
#rel-aba-recorrencia > .fx-alerta, #rel-aba-recorrencia > .rel-nota { margin: 0; }
@media (max-width: 900px) {
  #rel-aba-recorrencia .rcr-kpis { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
}

/* ---------- Prospecção: lista de ruas com os leads do próprio CRM (Relatórios, 06/10/2026; src/front/84-prospeccao.js) ---------- */
#rel-aba-prospeccao { display: flex; flex-direction: column; gap: 14px; }
#rel-aba-prospeccao[hidden] { display: none; }
#rel-aba-prospeccao > .fx-alerta, #rel-aba-prospeccao > .rel-nota { margin: 0; }
.prs-filtro .panel-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-muted); max-width: 80ch; }
.prs-campos { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px 14px; align-items: end; margin-top: 12px; }
.prs-campos .modal-field { margin: 0; min-width: 0; }
.prs-cep-linha { display: flex; gap: 8px; }
.prs-cep-linha input { flex: 1; min-width: 0; }
.prs-filtro .fx-alerta { margin-top: 12px; }
.prs-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.prs-topo h3 { margin: 0; font-size: 14px; font-weight: 600; }
.prs-topo .kpi-sub { margin: 2px 0 0; }
.prs-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.prs-nota { margin: 0 0 8px; }
.prs-tabela td { vertical-align: top; }
.prs-nome { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: inherit; cursor: pointer; text-align: left; }
.prs-nome:hover, .prs-nome:focus-visible { text-decoration: underline; outline: none; }
.prs-rua.prs-do-cep td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.prs-leads td { background: var(--surface-2); }
.prs-leads ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prs-leads li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.prs-leads .kpi-sub { margin: 0; }
.prs-leads td > .kpi-sub { display: block; margin-top: 6px; }
.prs-sit { font-size: 11.5px; line-height: 1.5; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
.prs-sit-cliente { background: var(--green-wash); border-color: transparent; }
.prs-sit-sem_cobertura { background: var(--status-warning-wash); border-color: transparent; }
.prs-resultado .rel-nota { margin-top: 10px; }
@media (max-width: 800px) {
  .prs-campos { grid-template-columns: 1fr; }
}
@media print {
  .prs-filtro, .prs-acoes { display: none; }
}

/* ---------- Chaves da API aberta (tela Integração, 06/10/2026; src/front/85-api-chaves.js) ---------- */
.apk-painel { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.apk-painel[hidden] { display: none; }
.apk-painel .panel-head { margin-bottom: 0; }
.apk-painel .panel-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-muted); max-width: 80ch; line-height: 1.5; }
.apk-painel > .kpi-sub, .apk-painel > .fx-alerta, .apk-painel > .rel-nota, .apk-painel > .modal-error { margin: 0; }
.apk-nova { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--green); border-radius: 10px; background: var(--green-wash); }
.apk-nova p { margin: 0; font-size: 13px; }
.apk-chave { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 100%; }
.apk-chave code { font: 13px ui-monospace, Consolas, monospace; padding: 8px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); overflow-wrap: anywhere; user-select: all; }
.apk-tabela td { vertical-align: top; }
.apk-tabela code { font: 12.5px ui-monospace, Consolas, monospace; }
.apk-tabela .apk-quando { white-space: nowrap; font-variant-numeric: tabular-nums; }
.apk-tabela .apk-linha { display: block; margin: 2px 0 0; }
.apk-tabela .apk-revogada td { color: var(--ink-muted); }
.apk-tabela .apk-revogar { padding: 6px 10px; }
.apk-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px 14px; align-items: end; }
.apk-form .modal-field { margin: 0; min-width: 0; }
.apk-sub { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; }
@media (max-width: 700px) {
  .apk-form { grid-template-columns: 1fr; }
}
/* ---------- Modelos prontos da régua criados pela Linka (05/10/2026; src/front/53-regua-modelos.js) ----------
   Bloco só da equipe, no topo de "Modelos de mensagem para colar na Meta". */
.rm-bloco { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); padding: 14px 16px; margin: 14px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.rm-bloco > p { margin: 0; }
.rm-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.rm-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rm-lista li { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.rm-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; }
.rm-nota { font-size: 12.5px; flex-basis: 100%; }
.rm-nota.ok { color: var(--green); }
.rm-nota.erro { color: var(--ink); background: var(--status-warning-wash); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }
.rm-confirma { padding-bottom: 0; }
.rm-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ===== Sistema visual v4: o design do designer (06/10/2026) =====
   Telas do designer (pasta ABAS do Drive; cópia em OneDrive\Documentos\CRM Linka\Design do designer): fonte Funnel Sans
   (dist/assets/fonts, sem Google Fonts), menu lateral em verde-escuro degradê com o logo "CRM · Sistema integrado Linka",
   folha de conteúdo com o canto esquerdo arredondado (50px), verde #38ea81 como acento, botão principal preto no tema
   claro e verde no escuro, controles segmentados em trilho cinza com a opção escolhida em branco, cartões brancos de
   borda fina e sem sombra, cartões do kanban com sombra leve. Cores, raios, alturas e tamanhos de letra foram lidos
   pixel a pixel das telas (dashboard, pipeline em kanban e lista, atendimentos, mapa da rede, menu do usuário, menu
   recolhido). As telas que o designer não desenhou (modais, relatórios, cobranças, fluxos...) usam os mesmos tokens.
   Este bloco vem por último de propósito: ele vence as regras de mesmo peso dos blocos v2 e v3 acima. */

@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/FunnelSans-Light.ttf) format("truetype"); }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/FunnelSans-Regular.ttf) format("truetype"); }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/FunnelSans-Medium.ttf) format("truetype"); }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/FunnelSans-SemiBold.ttf) format("truetype"); }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/FunnelSans-Bold.ttf) format("truetype"); }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/FunnelSans-ExtraBold.ttf) format("truetype"); }

/* ----- Tokens: tema escuro (padrão) -----
   Leitura (06/10/2026, commit à parte): os cinzas de texto do desenho ficavam abaixo de 3:1 (escuro #575757/#474747 sobre #1a1c1b; claro
   #949494/#b0b0b0 sobre branco). Aqui --ink-muted tem pelo menos 4,5:1 e --ink-faint pelo menos 3:1 sobre as superfícies de cada tema;
   o resto do desenho (fundos, verdes, raios, tamanhos) não muda. */
:root {
  color-scheme: dark;
  --sans: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --paper: #101814;
  --bg: #161616;
  --surface: #1a1c1b;
  --surface-2: #222423;
  --surface-3: #2b2e2d;
  --ink: #d0d0d0;
  --ink-muted: #8f8f8f;
  --ink-faint: #707070;
  --line: #1e3a2a;
  --line-2: #3b3c3b;
  --row-line: #2f3130;
  --th-ink: #8f8f8f;
  --title: #38ea81;
  --title-sub: #8f8f8f;
  --topbar-line: #1f2320;
  --search-bg: #1a1c1b;
  --search-line: #223328;
  --search-ink: #8a8a8a;
  --seg-track: #222222;
  --seg-ink: #8f8f8f;
  --seg-sel: #121514;
  --seg-sel-ink: #38ea81;
  --seg-sel-shadow: 0 1px 3px rgba(0,0,0,0.4);
  --track: #575757;
  --input-bg: #222222;
  --col-bg: #1a1c1b;
  --card-bg: #181c1a;
  --card-line: #3a3a3a;
  --card-shadow: 0 2px 7px rgba(0,0,0,0.35);
  --bubble-in: #1a1c1b;
  --bubble-in-ink: #d0d0d0;
  --bubble-out: #1f2b24;
  --bubble-out-ink: #efffff;
  --pop-bg: #161616;
  --pop-line: #1d4a30;
  --green: #38ea81;
  --green-strong: #2fd071;
  --green-text: #38ea81;
  --green-contrast: #ffffff;
  --green-wash: #1f2b24;
  --green-wash-2: #d1fde3;
  --action: #149549;
  --action-ink: #ffffff;
  --action-hover: #1aa854;
  --action-grad: linear-gradient(180deg, #33dd78 0%, #149549 100%);
  --shadow-card: none;
  --shadow-raise: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-pop: 0 0 0 1px rgba(255,255,255,0.05), 0 16px 40px rgba(0,0,0,0.55);
  --side-bg: transparent;
  --side-line: transparent;
  --side-ink: #a7a7a7;
  --side-muted: #a7a7a7;
  --side-faint: #7d867f;
  --side-strong: #ffffff;
  --side-hover: rgba(255,255,255,0.05);
  --side-active-bg: #23b961;
  --side-active-ink: #ffffff;
  --status-critical: #ff5c60; /* vermelho de texto no escuro: o #ea383b do desenho dava 2,8 de contraste sobre o fundo do aviso */
  --status-critical-wash: rgba(234,56,59,0.16);
  --status-warning: #f3ba00;
  --status-warning-wash: rgba(243,186,0,0.14);
  --ppo-piso: #ea383b;
  --ppo-previsivel: #f3ba00;
  --date-icon-filter: invert(1);
}
/* ----- Tokens: tema claro ----- */
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #101814;
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface-2: #edeff0;
  --surface-3: #e1e1e1;
  --ink: #3b3b3b;
  --ink-muted: #6b6b6b;
  --ink-faint: #878787;
  --line: #d9dcdc;
  --line-2: #c9cccc;
  --row-line: #e6e6e6;
  --th-ink: #6b6b6b;
  --title: #6d6d6d;
  --title-sub: #6d6d6d;
  --topbar-line: #dadcdc;
  --search-bg: #edeff0;
  --search-line: #cfd2d2;
  --search-ink: #8a8a8a;
  --seg-track: #edeff0;
  --seg-ink: #6b6b6b;
  --seg-sel: #ffffff;
  --seg-sel-ink: #3b3b3b;
  --seg-sel-shadow: 0 1px 3px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.03);
  --track: #cfd4d3;
  --input-bg: #edeff0;
  --col-bg: #fdfdfd;
  --card-bg: #ffffff;
  --card-line: #d9d9d9;
  --card-shadow: 0 2px 7px rgba(0,0,0,0.08);
  --bubble-in: #ffffff;
  --bubble-in-ink: #3b3b3b;
  --bubble-out: #eaeaea;
  --bubble-out-ink: #1a181a;
  --pop-bg: #ffffff;
  --pop-line: #d9dcdc;
  --green: #38ea81;
  --green-strong: #2fd071;
  --green-text: #067a36; /* verde de texto do claro: 5,5 sobre branco, 5,0 sobre o verde-lavado (o #089441 dava 3,9) */
  --green-contrast: #ffffff;
  --green-wash: #eef8f2;
  --green-wash-2: #d1fde3;
  --action: #1b1b1b;
  --action-ink: #ffffff;
  --action-hover: #2a2a2a;
  --action-grad: linear-gradient(180deg, #494949 0%, #2a2a2a 46%, #1b1b1b 54%, #030303 100%);
  --shadow-card: none;
  --shadow-raise: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-pop: 0 0 0 1px rgba(20,26,23,0.04), 0 12px 32px rgba(20,26,23,0.16);
  --side-bg: transparent;
  --side-line: transparent;
  --side-ink: #a7a7a7;
  --side-muted: #a7a7a7;
  --side-faint: #7d867f;
  --side-strong: #ffffff;
  --side-hover: rgba(255,255,255,0.05);
  --side-active-bg: #23b961;
  --side-active-ink: #ffffff;
  --status-critical: #b3232a; /* vermelho de texto do claro: 5,8 sobre branco e 4,6 sobre o rosa do aviso (o #ea383b do desenho dava 3,7 e 2,8) */
  --status-critical-wash: #ffdede;
  --status-warning: #8a6200; /* cor de TEXTO de aviso sobre o amarelo-claro (#f3ba00 do desenho fica só nas bolinhas e bordas, postas pelo nome) */
  --status-warning-wash: #fff6ae;
  --ppo-piso: #ea383b;
  --ppo-previsivel: #d9a400;
  --date-icon-filter: none;
}

/* ----- Base ----- */
body { background: var(--paper); font-family: var(--sans); font-size: 14px; font-feature-settings: normal; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--sans); }
.app-shell { background: linear-gradient(180deg, #102b1b 0%, #101814 50%, #10281a 100%); }
:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ----- Menu lateral ----- */
.sidebar { background: transparent; border: none; box-shadow: none; padding: 24px 24px 22px 36px; display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 901px) {
  .sidebar { width: 250px; z-index: 6; }
  .sidebar.collapsed { width: 96px; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 900px) {
  /* A gaveta fica por cima da faixa da conta travada (z 40) e do convite das notificações (z 41): o pé da gaveta tem o avatar, Meu perfil e Sair. */
  .sidebar { background: linear-gradient(180deg, #102b1b 0%, #101814 50%, #10281a 100%); z-index: 43; padding-left: calc(24px + env(safe-area-inset-left, 0px)); padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .sidebar-backdrop { z-index: 42; }
}
.sidebar-top { gap: 0; }
.sidebar-brand { padding: 0; margin: 4px 0 34px -8px; gap: 0; }
.sidebar-brand .node-mark, .sidebar-brand .name { display: none; }
.crm-logo { display: block; width: 172px; height: auto; }
.crm-simbolo { display: none; width: 44px; height: auto; }
.sidebar.collapsed .sidebar-brand { margin-left: 0; justify-content: center; }
.sidebar.collapsed .crm-logo { display: none; }
.sidebar.collapsed .crm-simbolo { display: block; }
#global-nav, #client-nav { display: flex; flex-direction: column; gap: 3px; }
#global-nav[style*="none"], #client-nav[style*="none"] { display: none; }
.sidebar .nav-item { height: 30px; padding: 0 6px; gap: 7px; border-radius: 8px; font-size: 16px; font-weight: 400; line-height: 1; color: var(--side-ink); background: transparent; box-shadow: none; }
.sidebar .nav-item svg { width: 16px; height: 16px; stroke-width: 1.6; color: var(--side-ink); }
.sidebar .nav-item:hover { background: var(--side-hover); color: #d6d6d6; }
.sidebar .nav-item:hover svg { color: #d6d6d6; }
.sidebar .nav-item.active { background: linear-gradient(180deg, #37e67f 0%, #108c43 100%); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 8px rgba(16,140,67,0.35); }
.sidebar .nav-item.active svg { color: #ffffff; }
.sidebar .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-subitems { padding-left: 14px; gap: 2px; margin-top: 1px; }
.sidebar .nav-subitem { font-size: 15px; height: 28px; }
.nav-item-expandable .nav-chevron { width: 12px; height: 12px; }
.sidebar .nav-section-label { font-family: var(--sans); font-size: 10px; font-weight: 400; color: var(--side-faint); letter-spacing: 0; text-transform: none; padding: 0 6px; margin: 22px 0 4px !important; }
.sidebar .client-nav-name { font-size: 15px; font-weight: 500; color: var(--side-strong); padding: 0 6px; margin-bottom: 4px; }
.sidebar .wa-nav-count { min-width: 18px; height: 18px; border-radius: 9px; background: #2fd071; color: #0b2a17; font-size: 11px; font-weight: 700; }
.sidebar .nav-pedidos-n { background: #ffffff; color: #0b2a17; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 0; position: relative; }
.sidebar.collapsed .wa-nav-count { position: absolute; top: -2px; right: 6px; min-width: 15px; height: 15px; font-size: 9.5px; margin: 0; }
.conta-teste-chip { color: var(--side-ink); background: rgba(255,255,255,0.06); margin-left: 6px; }
/* Teste a 3 dias do fim ou plano vencido: letra escura sobre o amarelo-claro do desenho, nos dois temas (o menu é verde-escuro nos dois; com --side-strong branco o texto sumia no claro). */
.conta-teste-chip.perto { color: #3b2f00; background: #fff6ae; }
.conta-teste-chip.perto::before { background: #d9a400; }
.sidebar .collapse-btn { display: none; }

/* Rodapé do menu: avatar + nome abrem o menu do usuário, que envolve o próprio rodapé (como no desenho) */
.sidebar-foot { position: relative; gap: 0; margin-top: 18px; }
.sidebar-foot .version-tag { display: none; }
.um-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 0; border: 0; background: transparent; color: var(--side-ink); cursor: pointer; text-align: left; font: inherit; position: relative; z-index: 2; border-radius: 8px; }
.um-btn .avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #293f32; color: #a7a7a7; font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: 0; box-shadow: 0 0 0 5px rgba(41,63,50,0.45); }
.um-btn .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; gap: 1px; }
.um-btn .who strong { font-size: 14px; font-weight: 400; color: var(--side-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-btn .who span { font-size: 10px; color: #9aa39e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-btn .chev { width: 14px; height: 14px; margin-left: auto; flex-shrink: 0; color: var(--side-ink); transition: transform 0.15s ease; }
.um-btn:hover .who strong { color: #d6d6d6; }
.sidebar-foot.open .um-btn .who strong { color: #38ea81; }
.sidebar-foot.open .um-btn .chev { transform: rotate(180deg); color: #38ea81; }
.sidebar.collapsed .um-btn { justify-content: center; }
.sidebar.collapsed .um-btn .who, .sidebar.collapsed .um-btn .chev { display: none; }
.user-menu { display: none; position: absolute; left: -12px; right: -2px; bottom: -12px; z-index: 1; flex-direction: column; gap: 0; padding: 18px 12px 72px; border-radius: 12px; background: #161616; border: 1px solid #1d4a30; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.sidebar-foot.open .user-menu { display: flex; }
.sidebar.collapsed .user-menu { position: fixed; left: 70px; right: auto; bottom: 16px; width: 236px; padding-bottom: 18px; }
.user-menu-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; min-width: 0; }
.user-menu-head b { font-size: 15px; font-weight: 700; color: #ededed; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-head span { font-size: 11px; color: #ededed; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-head span:empty { display: none; }
.user-menu-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 2px; border: 0; background: transparent; color: #ededed; font: inherit; font-size: 15px; font-weight: 400; text-align: left; cursor: pointer; text-decoration: none; border-radius: 6px; }
.user-menu-item svg { width: 16px; height: 16px; color: #38ea81; flex-shrink: 0; }
.user-menu-item:hover { color: #ffffff; }
.user-menu-item:hover svg { color: #5cf29a; }
.user-menu-item.user-menu-sair { margin-top: 18px; }
.user-menu-item[hidden] { display: none; }
.user-block-btn:hover .avatar { box-shadow: none; }

/* ----- A folha de conteúdo e a barra do topo ----- */
@media (min-width: 901px) {
  .main { margin: 0; height: 100vh; border: none; border-radius: 50px 0 0 50px; background: var(--bg); box-shadow: none; overflow-y: auto; }
  .topbar { border-radius: 50px 0 0 0; }
}
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; min-height: 61px; padding: 0 24px 0 34px; background: var(--bg); border-bottom: 1px solid var(--topbar-line); position: sticky; top: 0; z-index: 5; }
.topbar-left { grid-column: 1; display: flex; align-items: center; gap: 6px; justify-self: start; }
.topbar .search-wrap { grid-column: 2; width: 384px; max-width: 42vw; height: 32px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--search-bg); border: 1px solid var(--search-line); box-shadow: none; gap: 8px; }
.topbar .search-wrap svg { width: 17px; height: 17px; color: var(--search-ink); stroke-width: 1.7; }
.topbar .search-wrap input { font-size: 15px; color: var(--ink); }
.topbar .search-wrap input::placeholder { color: var(--search-ink); }
.topbar .kbd-hint { display: none; }
.topbar-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.topbar .icon-btn { width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-muted); border-radius: 8px; }
.topbar .icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.topbar .collapse-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink-muted); border-radius: 8px; cursor: pointer; position: relative; }
.topbar .collapse-btn:hover { background: var(--surface-2); color: var(--ink); }
.topbar .collapse-btn svg { width: 17px; height: 17px; transform: none; }
.topbar .collapse-btn .foot-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .topbar .collapse-btn { display: none; }
  .topbar { padding: 0 12px 0 10px; }
  .topbar .search-wrap { max-width: 56vw; }
}
@media (max-width: 640px) { .topbar .search-wrap { display: none; } }

/* Interruptor de tema: lua | sol. No claro o botão branco fica no sol; no escuro o trilho é verde e o botão escuro fica na lua. */
.icon-toggle { width: 63px; height: 29px; padding: 3px; gap: 0; border: 0; border-radius: 999px; background: #d9d9d9; box-shadow: none; }
.icon-toggle button { flex: 1; width: auto; height: 23px; border-radius: 999px; color: #b2b2b2; background: transparent; box-shadow: none; }
.icon-toggle button svg { width: 15px; height: 15px; stroke-width: 1.6; }
.icon-toggle button.active { background: #ffffff; color: #4b4b4b; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
:root:not([data-theme="light"]) .icon-toggle { background: #089441; }
:root:not([data-theme="light"]) .icon-toggle button { color: #00ef62; }
:root:not([data-theme="light"]) .icon-toggle button.active { background: #121514; color: #26c45f; box-shadow: 0 1px 4px rgba(0,0,0,0.45); }

/* ----- Conteúdo e cabeçalho de página ----- */
.content { max-width: 1420px; padding: 30px 48px 72px; gap: 20px; }
@media (max-width: 1100px) { .content { padding: 24px 24px 64px; } }
.page-header { align-items: flex-end; gap: 12px 16px; }
.page-header .title { align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.page-header .title > svg { display: none; }
.page-header h1 { font-family: var(--display); font-size: 38px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; color: var(--title); }
.page-sub { flex-basis: 100%; margin: 0; font-size: 15px; font-weight: 400; color: var(--title-sub); line-height: 1.35; }
.page-header .pill-neutral { font-size: 12.5px; }
.ppo-page-desc { font-size: 14px; }
@media (max-width: 640px) { .page-header h1 { font-size: 30px; } }

/* ----- Botões ----- */
.btn-solid { height: 31px; padding: 0 14px; border-radius: 8px; border: 0; font-size: 14px; font-weight: 400; color: #ffffff; background: var(--action-grad); box-shadow: none; filter: none; }
.btn-solid:hover { background: var(--action-grad); filter: brightness(1.18); }
.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-solid svg { width: 14px; height: 14px; }
a.btn-solid, label.btn-solid, a.btn-outline { display: inline-flex; }
.btn-outline { height: 31px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 400; box-shadow: none; }
.btn-outline:hover { background: var(--surface-2); border-color: var(--line-2); }
.btn-outline svg { width: 15px; height: 15px; stroke-width: 1.6; }
.btn-outline.btn-accent, .btn-outline.btn-accent:hover { background: var(--green-wash); border-color: #4eeb8f; color: var(--green-text); }
.btn-outline.btn-danger { background: var(--status-critical-wash); border-color: transparent; color: var(--status-critical); }
.btn-outline.btn-danger:hover { background: var(--status-critical); color: #ffffff; }
#client-refresh-btn, #mapa-exportar, #mapa-exportar-kml, [data-dg="imprimir"] { background: var(--surface-2); border-color: var(--line-2); }
#client-refresh-btn:hover, #mapa-exportar:hover, #mapa-exportar-kml:hover, [data-dg="imprimir"]:hover { background: var(--surface-3); }
.icon-btn { border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-muted); }
.btn-solid.fx-btn-perigo { background: var(--status-critical); }

/* ----- Controles segmentados, pílulas e seletores ----- */
.tabs, .preset-pills { display: inline-flex; gap: 0; padding: 3px; border: 0; border-radius: 9px; background: var(--seg-track); box-shadow: none; }
.tab, .preset-btn { height: 27px; padding: 0 12px; border-radius: 7px; font-size: 14px; font-weight: 400; line-height: 1; color: var(--seg-ink); background: transparent; box-shadow: none; }
.tab:hover:not(.active), .preset-btn:hover:not(.active) { color: var(--ink); }
.tab.active, .preset-btn.active { background: var(--seg-sel); color: var(--seg-sel-ink); box-shadow: var(--seg-sel-shadow); font-weight: 500; }
.preset-btn.pl-toggle { height: 31px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.preset-btn.pl-toggle.active { background: var(--green-wash); border-color: var(--green); color: var(--ink); box-shadow: none; }
.select-pill { height: 35px; padding: 0 30px 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background-color: var(--surface); color: var(--ink); font-size: 15px; font-weight: 400; box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b3b3b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-size: 13px; background-position: right 10px center; }
:root:not([data-theme="light"]) .select-pill { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
.select-pill:focus { outline: none; border-color: var(--green); }
.task-pill { height: 31px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 400; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
.task-pill b { font-weight: 700; }
.task-pill:hover { border-color: var(--green); }
.task-pill.active { background: var(--green-wash); border-color: var(--green); color: var(--ink); }
.pill-neutral { font-size: 12.5px; font-weight: 400; background: var(--surface-2); color: var(--ink-muted); }
.pill-badge { font-weight: 700; }
.chip { padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 400; background: var(--surface-2); color: var(--ink); gap: 5px; }
.chip-mark, .status-chip .chip-mark { width: 8px; height: 8px; border-radius: 50%; background: #38ea81; border: 0; opacity: 1; background-image: none; }
.chip.good { background: #b0ffd1; color: #006329; }
.chip.good .chip-mark { background: #006329; }
.chip.neutral { background: #cccccc; color: #949494; }
.chip.neutral .chip-mark { background: #a7a7a7; opacity: 1; }
.chip.critical { background: #000000; color: #e6e6e6; }
.chip.critical .chip-mark { background: #a7a7a7; border: 0; }
.chip.warning { background: #fff6ae; color: #8a6200; }
.chip.warning .chip-mark { background: #f3ba00; background-image: none; }
.status-chip { font-size: 12.5px; font-weight: 400; border-radius: 999px; }
.status-chip.ok { background: #eef8f2; color: var(--green-text); }
.status-chip.ok .chip-mark { background: #38ea81; }
.status-chip.urgent { background: var(--status-critical-wash); color: var(--status-critical); }
.status-chip.urgent .chip-mark { background: var(--status-critical); }
.status-chip.attention { background: var(--status-warning-wash); color: #8a6200; }
:root:not([data-theme="light"]) .status-chip.attention, :root:not([data-theme="light"]) .chip.warning { color: #f3ba00; }
.status-chip.attention .chip-mark { background: #f3ba00; }
.status-chip.neutral { background: var(--surface-3); color: var(--ink-muted); }
.status-chip.neutral .chip-mark { background: var(--ink-faint); }
.rel-status-chip, .rel-pct { font-weight: 400; font-size: 12.5px; }
.rel-status-chip.good { background: #b0ffd1; color: #006329; }
.rel-pct.bom { background: #b0ffd1; color: #006329; }

/* ----- Campos ----- */
.modal-field label { font-family: var(--sans); font-size: 13.5px; font-weight: 400; color: var(--ink-muted); text-transform: none; letter-spacing: 0; }
.modal-field input, .modal-field select, .modal-field textarea, .ficha-form-row input[type="text"], .ficha-form-row input[type="number"], .ficha-form-row input[type="date"], .chat-busca, .rel-datas input, .rs-datas input, .rs-campo input, .rs-publico input, #report-proximos-passos, .cob-plano-linha input[type="text"], .cob-plano-linha input[type="number"], .funil-linha-campos input, .rc-passo select, .rc-passo input, .rc-ajustes select, .rc-ajustes input[type="number"], .rc-busca, .rc-url input, .fx-tempo input, .fx-tempo select, .fx-opcao input, .fx-opcao select, .mapa-viab-form input, .mapa-raio input, .ch-etapa-nome, .ch-comentar textarea, .comment-compose textarea, .ai-input-row input, .chat-composer textarea, .wa-composer-row textarea, .date-picker-trigger, .imp-tabela select, .imp-bloco > select, .imp-par select, .rp-busca, .rsup-form textarea, .rsup-sec textarea, .bol-cpf-linha input, .etq-caixa, .fs-campo input, .fs-semana, .cfg-rename-input, .vend-meta, .ppo-num, .date-picker-recurrence select {
  background: var(--input-bg); border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); font-family: var(--sans); font-size: 14px;
}
/* :where() mantém o peso em (0,1,1): a regra do login (.login-screen[data-tela="maquete"] .login-input input, 54px e 47px de recuo para o ícone) continua vencendo. */
.modal-field input:where(:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])), .modal-field select { height: 36px; padding: 0 12px; }
.modal-field select { padding-right: 30px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 13px; }
.modal-field textarea { padding: 9px 12px; }
.modal-field input:focus, .modal-field select:focus, .modal-field textarea:focus, textarea:focus { outline: none; border-color: var(--green); }
input::placeholder, textarea::placeholder { color: #b4b4b4; }
:root:not([data-theme="light"]) input::placeholder, :root:not([data-theme="light"]) textarea::placeholder { color: #4a4a4a; }
.content .search-wrap { height: 31px; padding: 0 12px; border-radius: 999px; background: var(--input-bg); border: 1px solid var(--line-2); box-shadow: none; }
.content .search-wrap svg { width: 15px; height: 15px; color: var(--search-ink); }
.content .search-wrap input { font-size: 14px; }
.content .search-wrap input::placeholder { color: var(--search-ink); }
@media (max-width: 900px) { .content .search-wrap input { font-size: 16px; } } /* com menos, o iPhone dá zoom ao tocar para escrever */
.date-picker-wrap { border-radius: 8px; border-color: var(--line-2); background: var(--input-bg); }
.date-input { font-weight: 400; font-size: 14px; }
.modal-checkbox-field label, .rc-check, .wa-check, .cfg-check { font-weight: 400; }
input[type="checkbox"], input[type="radio"] { accent-color: #38ea81; }

/* ----- Cartões, painéis e tabelas ----- */
.panel { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: none; padding: 22px 26px 22px; }
.table-panel, .carteira-panel, .mapa-area, .registro-faixa { padding: 0; } /* painéis que a base desenha sem recuo (tabela de borda a borda, mapa, faixa das conversas) */
@media (max-width: 640px) { .panel { padding: 16px 14px; } .table-panel, .carteira-panel, .mapa-area, .registro-faixa { padding: 0; } } /* no celular o recuo de 26px comia a tela (régua, fluxos...) */
.panel-head h2 { font-family: var(--sans); font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
.panel-head p { font-size: 14px; color: var(--ink-muted); margin-top: 2px; }
.dg-panel h3, .rel-panel h3, .section-head h2 { font-family: var(--sans); font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.dg-panel { padding: 22px 26px; }
.dg-panel h3 { margin-bottom: 16px; }
.filter-bar { border-radius: 14px; border: 1px solid var(--line); background: var(--surface); box-shadow: none; padding: 12px 14px; }
.kpi, .dg-kpi, .rel-kpi, .cob-resumo > div, .contas-resumo > div, .alert-secondary-card, .perf-row, .event-col, .home-news-card, .ppo-budget-box, .comparison-card, .carteira-resumo, .mapa-viab-resultado, .task-row, .ficha-item, .fx-card, .cob-fixo, .uso-pessoa, .pv-kpi, .cp-resultado, .au-regra, .au-form { border-radius: 14px; border-color: var(--line); box-shadow: none; }
.table-panel .panel-head { padding: 20px 26px 0; }
.table-panel .lista-passo-barra { border-bottom: 1px solid var(--row-line); }
thead th { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--th-ink); padding: 12px 20px; background: transparent; border-top: 0; border-bottom: 1px solid var(--row-line); }
tbody td { font-size: 14px; padding: 9px 20px; border-bottom: 1px solid var(--row-line); color: var(--ink-muted); }
tbody td.name { color: var(--ink); font-weight: 400; }
tbody tr:hover td, .pipeline-list-row:hover td, .provider-row:hover td, .rel-linha-lead:hover td { background: var(--surface-2); }
.empty-row td { color: var(--ink-muted); }
.carteira-sort:hover, th[aria-sort] .carteira-sort { color: var(--ink); }
.row-dropdown-menu, .card-layout-pop, .date-picker-popover, .dg-tip, .pl-menu, .rp-pop { background: var(--pop-bg); border: 1px solid var(--pop-line); border-radius: 12px; box-shadow: var(--shadow-pop); }
.row-dropdown-item, .pl-menu-item, .settings-menu-item-title { font-weight: 400; font-size: 14px; }
.card-layout-pop strong { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.settings-menu-panel-label { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.settings-menu-item .icon { background: var(--green-wash); color: var(--green-text); border-radius: 8px; }
.modal-box { border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.modal-box h2 { font-family: var(--sans); font-size: 24px; font-weight: 400; letter-spacing: -0.01em; }
.modal-section-label { font-family: var(--sans); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); }
.modal-sub, .modal-error { font-size: 13px; }
.toast-note { font-family: var(--sans); font-size: 12.5px; }
.callout { border-radius: 14px; border-color: var(--line-2); }
.callout .icon { font-family: var(--sans); background: var(--green-wash); color: var(--green-text); }
.callout h3 { font-weight: 500; }
[data-tip]:hover::after { background: #1b1b1b; color: #ffffff; font-weight: 400; }
[data-tip]:hover::before { border-top-color: #1b1b1b; }
.kpi-label, .perf-label, .comparison-card-tag, .event-col-head, .ppo-budget-label, .rc-exemplo-rotulo, .af-rotulo, .cp-rotulo { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
.kpi-value, .perf-value, .rel-kpi b, .cob-resumo b, .contas-resumo b, .carteira-resumo b, .imp-num b, .resumo-card-valor, .pv-kpi-valor, .registro-numeros, .ppo-vendas-value, .alert-secondary-value, .alert-priority-count { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; }
.kpi-value, .kpi-edit-input { font-size: 30px; font-weight: 800; }
.kpi { padding: 16px 18px 14px; gap: 6px; }
.kpi-delta, .dg-kpi-delta, .dg-chip em { font-family: var(--sans); font-weight: 400; }
.kpi-delta.down, .dg-kpi-delta.ruim, .dg-chip em.ruim, .cons-down, .rel-vermelho, .rel-h-ruim { color: var(--status-critical) !important; }
.kpi-delta, .dg-kpi-delta.bom, .dg-chip em.bom, .cons-up, .rel-verde, .rel-h-bom { color: var(--green); }
.perf-value { font-size: 24px; }
.perf-value.accent, .kpi.accent .kpi-value { color: var(--ink); }
.meta-hero-num b, .pl-stat-num b { font-family: var(--display); }
.comparison-card { background: var(--surface); padding: 22px 26px; }
.comparison-card-row { flex-wrap: wrap; gap: 8px 16px; }
.comparison-card-value { font-family: var(--display); font-size: clamp(26px, 3vw, 44px); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.comparison-card-value-sm { font-family: var(--display); font-size: 30px; font-weight: 800; color: #c9c9c9; }
.hbar-track, .rel-etapa-trilho, .dg-hb-trilho, .registro-barra, .imp-barra, .resumo-barra, .carteira-bar { background: var(--track); border-radius: 999px; }
.hbar-track { height: 8px; }
.hbar-fill, .rel-etapa-trilho div, .dg-hb-trilho i, .dg-comp-barra i { border-radius: 999px; }
.hbar-value { font-weight: 400; font-size: 14px; }
.hbar-label { font-size: 14px; }
.hbar-label .swatch, .legend-item .swatch, .dg-legenda i, .dg-pizza-legenda i, .dg-tip i { border-radius: 2px; }
.legend-item, .dg-legenda { font-size: 14px; }
.fill-tone { background: #145b31; opacity: 1; }
.fill-outline { border-color: #145b31; }
.fill-dashed { background-image: repeating-linear-gradient(90deg, #145b31 0 6px, transparent 6px 10px); opacity: 1; }
.dg-comp-barra.ant i { background: var(--track); }
.dg-comp-barra.atu i { background: var(--viz-serie-1); }
.dg-comp-barra.atu span { font-weight: 700; }
.dg-comp-nome, .dg-hb-nome { font-size: 14px; }
.dg-area { fill-opacity: 0.28; }
.dg-eixo { font-size: 12px; }

/* ----- Dashboard (o painel do Uply): período, números, chips e gráficos ----- */
.dg-topo { padding: 12px 14px; }
.period-summary { font-family: var(--sans); font-size: 13px; color: var(--ink-muted); }
.dg-kpis { gap: 14px; margin-top: 4px; }
.dg-kpi { padding: 20px 22px 18px; gap: 6px; }
.dg-kpi-label, .meta-hero-label, .pl-stat-label { display: flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 400; color: var(--ink); line-height: 1.2; }
.dg-kpi-label::before, .meta-hero-label::before, .pl-stat-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #2db163; background: var(--surface); box-shadow: 0 0 0 2px rgba(56,234,129,0.22); flex-shrink: 0; }
/* Números grandes do desenho, mas que cabem no cartão: o tamanho acompanha a largura da tela (5 cartões em 1366px dão ~140px úteis; "R$ 12.345" tem de caber). */
.dg-kpi-valor { font-family: var(--display); font-size: clamp(22px, 2vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.dg-kpi-delta { font-size: 12.5px; }
@media (max-width: 1440px) { .dg-kpi { padding: 18px 18px 16px; } } /* 5 cartões em notebook: "R$ 123.456" tem de caber com o menu aberto */
@media (max-width: 640px) { .dg-kpi { padding: 14px 14px 12px; } .dg-kpi-valor { font-size: 24px; } .dg-kpi-label, .pl-stat-label { font-size: 16px; } }
.dg-chips { gap: 10px; }
.dg-chip { padding: 7px 12px; border-radius: 8px; font-size: 15px; box-shadow: none; border-color: var(--line); background: var(--surface); }
.dg-chip-label { color: var(--ink-muted); }
.dg-chip b { font-weight: 700; color: var(--ink); }
.dg-chip.alerta { border-color: var(--status-critical); background: var(--status-critical-wash); }
.dg-abas { margin-top: 8px; }
.dg-evolucao-panel { margin-top: 4px; }
.registro-faixa { border-radius: 14px; }
.registro-semana { background: var(--surface-2); }
.registro-titulo { font-size: 14px; }
.registro-numeros { font-size: 20px; font-weight: 400; }
.registro-numeros b { font-weight: 700; }
.registro-barra .rg-a, .registro-legenda .rg-a { background: #145b31; }
.registro-barra .rg-n, .registro-legenda .rg-n { background: var(--track); }
.fs-cabeca h3 { font-size: 22px; font-weight: 500; }
.fs-campo input { font-family: var(--display); font-size: 20px; font-weight: 400; }
.meta-ads-panel .kpi, #meta-ads-panel .kpi { border-radius: 12px; }
.kpis-7 .kpi-value { font-weight: 700; } /* 7 cartões: o tamanho é o clamp da base (18 a 24px) e as colunas também */

/* ----- Meta do mês: três cartões (Leads, Vendas, Receita) ----- */
.meta-hero { background: transparent; border: 0; padding: 0; box-shadow: none; border-radius: 0; margin-bottom: 0; }
.meta-hero.meta-hero-vazio { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; }
.meta-hero-head { margin-bottom: 14px; align-items: center; }
.meta-hero-kicker { display: none; }
.meta-hero-head h2 { margin: 0; font-family: var(--sans); font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--ink); height: 35px; padding: 0 14px; display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: 9px; }
.meta-hero-right { gap: 10px; }
.meta-hero-dias { font-size: 11px; font-weight: 400; color: var(--ink-muted); }
.meta-hero .chip { font-size: 11px; padding: 1px 7px; border-radius: 4px; gap: 4px; }
.meta-hero .chip .chip-mark { width: 7px; height: 7px; border-radius: 2px; }
.meta-hero .chip.good { background: #bcf3d5; color: #089441; }
.meta-hero .chip.good .chip-mark { background: #38ea81; }
.meta-hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.meta-hero-item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 32px 22px; gap: 14px; min-height: 196px; justify-content: space-between; }
.meta-hero-label { font-size: 22px; }
.meta-hero-num { gap: 6px; align-items: baseline; flex-wrap: wrap; }
.meta-hero-num b { font-size: clamp(34px, 3.4vw, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; color: var(--ink); }
.meta-hero-num span { font-size: 20px; font-weight: 400; color: var(--ink-muted); }
.meta-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: visible; }
.meta-bar-fill, .meta-bar-fill.done { background: var(--green); border-radius: 999px; }
.meta-bar-tick { top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.45; }
.meta-hero-pct { font-size: 17px; font-weight: 400; color: var(--ink-muted); }
.meta-hero-pct.done { color: var(--green-text); }
.meta-hero-legenda { font-size: 12px; margin-top: -4px; }
.meta-hero-legenda i { opacity: 0.45; }
@media (max-width: 1000px) { .meta-hero-grid { grid-template-columns: 1fr; } }

/* ----- Placar dos vendedores ----- */
#placar-vendedores-panel { padding: 0; overflow: hidden; }
#placar-vendedores-panel .panel-head { padding: 20px 26px 12px; margin: 0; border-bottom: 1px solid var(--row-line); }
#placar-vendedores-body { padding: 0 26px 6px; }
.placar-row { padding: 10px 0; border-bottom: 1px solid var(--row-line); }
@media (min-width: 701px) { .placar-row { grid-template-columns: minmax(180px, 220px) 1fr minmax(90px, 130px); gap: 16px; } }
.placar-row:last-child { border-bottom: 0; }
.placar-nome { font-size: 18px; font-weight: 400; display: flex; align-items: center; gap: 12px; }
.placar-nome::before { content: attr(data-iniciais); width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #0b2a17; background: #a8f6c8; } /* o desenho tem iniciais brancas, ilegíveis no verde-claro: aqui ficam escuras no tema claro */
:root:not([data-theme="light"]) .placar-nome::before { color: #ffffff; }
.placar-nome:not([data-iniciais])::before { display: none; }
.placar-row:nth-child(3n+2) .placar-nome::before { background: #79c598; }
.placar-row:nth-child(3n+3) .placar-nome::before { background: #8aff8a; }
:root:not([data-theme="light"]) .placar-nome::before { background: #287748; }
:root:not([data-theme="light"]) .placar-row:nth-child(3n+2) .placar-nome::before { background: #105d2f; }
:root:not([data-theme="light"]) .placar-row:nth-child(3n+3) .placar-nome::before { background: #0e840f; }
.placar-row .meta-bar { height: 6px; }
.placar-num { font-size: 16px; color: var(--ink-muted); }
.placar-num b { font-size: 18px; color: var(--ink); }
.placar-num em { font-size: 18px; font-weight: 400; color: var(--ink); }
.placar-num em.done { color: var(--green-text); }

/* ----- Pipeline: números do topo, filtros, kanban e lista ----- */
.pl-resumo { background: transparent; border: 0; box-shadow: none; gap: 14px; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.pl-stat { background: var(--surface); border: 1px solid var(--line) !important; border-radius: 14px; padding: 20px 24px 18px; gap: 6px; }
.pl-stat-num { font-size: 14px; color: var(--ink-muted); gap: 8px; }
.pl-stat-num b, .pl-stat-viavel .pl-stat-num b { white-space: nowrap; font-size: clamp(22px, 1.7vw, 36px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1.05; }
.pl-meter { height: 8px; margin: 8px 0 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.pl-meter span { border-radius: 0; min-width: 0; }
/* Medidor de Viável (cartão Viáveis e topo de cada coluna do kanban): viável verde-claro, a avaliar verde-escuro, não viável no trilho. Viável é a métrica principal: o medidor fica. */
.pipeline-meter .m-v1 { background: #38ea81; }
.pipeline-meter .m-vnull { background: #145b31; opacity: 1; }
.pipeline-meter .m-v0 { background: var(--track); }
.pl-stat-sub { font-size: 13px; }
@media (max-width: 1100px) {
  .pl-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-stat-viavel { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .pl-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-stat { padding: 14px 16px; } .pl-stat-num b, .pl-stat-viavel .pl-stat-num b { font-size: 30px; } }
.pl-filtros { padding: 12px 14px; gap: 10px; }
.pl-busca { max-width: 300px; }
.pl-limpar { font-weight: 400; }
.pl-more-btn { padding: 0 10px; }

.pipeline-board { gap: 10px; padding-bottom: 10px; }
.pipeline-col { --col-accent: #38ea81; --col-line: #2fd071; background: var(--col-bg); border: 1px solid var(--line); border-top: 6px solid var(--col-accent); border-radius: 14px; min-width: 225px; flex-basis: 225px; max-height: 720px; }
.pipeline-col:nth-child(1) { --col-accent: #a7a7a7; --col-line: #8d8d8d; }
.pipeline-col:nth-child(2) { --col-accent: #38ea81; --col-line: #2fd071; }
.pipeline-col:nth-child(3) { --col-accent: #2fd071; }
.pipeline-col:nth-child(4) { --col-accent: #229451; }
.pipeline-col:nth-child(n+5) { --col-accent: #145b31; }
.pipeline-col:has(> .pipeline-cards[data-stage="perdido"]), .pipeline-col:has(> .pipeline-cards[data-stage="desqualificado"]), .pipeline-col:has(> .pipeline-cards[data-stage="ja-e-cliente"]) { --col-accent: #a7a7a7; --col-line: #8d8d8d; }
.pipeline-col-head { padding: 12px 14px 8px; gap: 6px; }
.pipeline-col-title { gap: 6px; }
.pipeline-col-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--col-line); flex-shrink: 0; }
.pipeline-col-head h3 { font-size: 15px; font-weight: 400; color: var(--ink); }
.pipeline-col.is-won h3 { color: var(--ink); }
.pipeline-won-icon { display: none; }
.pipeline-count { font-size: 15px; font-weight: 400; color: var(--ink); }
.pipeline-col .pipeline-meter { height: 4px; }
.pipeline-col .pipeline-meter span { border-radius: 2px; }
.pipeline-col-reading { text-align: center; font-size: 12px; color: var(--ink-muted); }
.pipeline-cards { padding: 4px 10px 10px; gap: 10px; }
.pipeline-cards.drag-over { background: var(--green-wash); box-shadow: inset 0 0 0 2px #38ea81; }
.pipeline-card { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 10px; padding: 12px 14px; gap: 6px; box-shadow: var(--card-shadow); }
.pipeline-card::before { display: none; }
.pipeline-card:hover { border-color: var(--line-2); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.pipeline-card .lead-name { font-size: 16px; font-weight: 400; line-height: 1.2; }
.pipeline-card .lead-meta { font-size: 12.5px; }
.lead-phone { font-size: 15px; }
.lead-phone-row { margin-top: 2px; }
.lead-whatsapp-btn { width: 24px; height: 24px; background: #d1fde3; color: #38ea81; }
.lead-whatsapp-btn:hover { background: #38ea81; color: #ffffff; }
.lead-whatsapp-btn svg { width: 13px; height: 13px; }
.lead-ads-tag { font-size: 10px; font-weight: 500; letter-spacing: 0; padding: 1px 7px; background: #d1fde3; color: #38ea81; border: 1px solid #38ea81; line-height: 1.3; }
.lead-days { font-size: 13px; font-weight: 400; color: #38ea81; }
.lead-days svg { display: none; }
.lead-days.sla { color: #ea383b; }
.lead-days.sla svg { display: inline; stroke-width: 1.6; }
.lead-seller { font-size: 12.5px; }
.lead-card-foot { margin-top: 2px; }
.lead-viavel-chip { height: 22px; padding: 0 10px 0 8px; font-size: 13px; font-weight: 400; gap: 5px; border-radius: 999px; }
.lead-viavel-chip.v1, .lead-viavel-chip.v1:hover { background: #38ea81; color: #ffffff; border-color: #38ea81; }
.lead-viavel-chip.v0, .lead-viavel-chip.v0:hover { background: #000000; color: #ffffff; border-color: #000000; }
.lead-viavel-chip.vnull, .lead-viavel-chip.vnull:hover { background: #fff6ae; color: #8a6200; border: 1px dotted #f3ba00; } /* o desenho tem o texto "Avaliar" em #f3ba00 (contraste 1,6): aqui o texto é escuro e a bolinha e a borda ficam no amarelo do desenho */
.lead-viavel-chip.vnull .viavel-ring { width: 10px; height: 10px; border: 0; background: #f3ba00; }
.lead-viavel-chip.vsug, .lead-viavel-chip.vsug:hover { background: var(--surface); color: #38ea81; border: 1px dashed #38ea81; }
.lead-viavel-chip.vsug .viavel-ring { width: 10px; height: 10px; border: 0; background: #38ea81; }
.lead-viavel-chip.v1:hover, .lead-viavel-chip.v0:hover { filter: brightness(1.1); }
.pipeline-cards .pipeline-empty { border: 1px dashed #c0c0c0; border-radius: 10px; font-size: 14px; color: var(--ink-muted); background: var(--surface); padding: 14px 10px; }
.ficha-viab .lead-viavel-chip { height: 24px; }
#client-pipeline-list-wrap { border-top: 6px solid #a7a7a7; }
:root:not([data-theme="light"]) #client-pipeline-list-wrap { border-top-color: #38ea81; }
.lead-origin-tag { font-size: 13px; font-weight: 400; letter-spacing: 0; padding: 2px 10px; background: #dedede; color: #3b3b3b; }
.pipeline-list-wa-wrap .lead-whatsapp-btn { width: 22px; height: 22px; }
.lista-passo { font-size: 13px; }
.am-barra { font-size: 14px; }

/* ----- Atendimentos (WhatsApp) ----- */
.wa-inbox { border-radius: 14px; border: 1px solid var(--line); box-shadow: none; }
/* As três colunas do desenho só na tela larga: até 1200px e no celular valem as regras de tela menor do bloco Conversas (gaveta do lead, uma coluna).
   Em notebook (1201 a 1440px) a lista e o painel do lead ficam mais estreitos (300 e 250px) e a página fica com 24px de lado: a conversa é a coluna
   em que o atendente passa o dia e não pode ficar menor do que era antes do desenho (medido pela sessão do mapa em 06/10). */
@media (min-width: 1201px) { .wa-inbox { grid-template-columns: 300px minmax(0, 1fr) 250px; } }
@media (min-width: 1441px) { .wa-inbox { grid-template-columns: 330px minmax(0, 1fr) 265px; } }
@media (max-width: 1440px) { .wa-content { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 900px) { .wa-content { padding-left: 12px; padding-right: 12px; } }
.wa-content { padding-bottom: 16px; gap: 16px; } /* a caixa de entrada mede a altura pela tela (100dvh - 176px): o recuo de baixo é o da base */
.wa-list-pane { background: var(--surface); border-right: 1px solid var(--line); }
.wa-list-tools { padding: 14px 14px 12px; border-bottom: 1px solid var(--line); gap: 10px; }
.wa-list-tools .preset-pills, .wa-fila-pills { background: transparent; padding: 0; gap: 6px; flex-wrap: wrap; }
.wa-list-tools .preset-btn, .wa-fila-pills .preset-btn { flex: 0 0 auto; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: var(--surface-2); color: var(--ink-muted); font-size: 14px; }
.wa-list-tools .preset-btn.active, .wa-fila-pills .preset-btn.active { background: var(--surface); border-color: #adadad; color: var(--ink); box-shadow: none; font-weight: 400; }
.wa-pill-n { min-width: 14px; height: 14px; padding: 0 4px; border-radius: 7px; background: #949494; color: #ffffff; font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; }
.wa-pill-n:empty { display: none; }
.wa-list-tools .search-wrap { order: -1; }
.wa-item { padding: 12px 14px; gap: 11px; border-bottom: 1px solid var(--row-line); }
.wa-item:hover { background: var(--surface-2); }
.wa-item.active { background: var(--green-wash); box-shadow: none; }
.wa-avatar { width: 36px; height: 36px; background: #e1e1e1; color: #ffffff; font-size: 13px; font-weight: 500; }
.wa-item-name { font-size: 16px; font-weight: 400; }
.wa-item-preview { font-size: 13px; }
.wa-item-top time { font-size: 12.5px; }
.wa-item.unread .wa-item-top time { color: #38ea81; font-weight: 400; }
.wa-unread { background: #38ea81; color: #ffffff; }
.wa-item-meta { font-size: 12px; color: var(--ink-muted); gap: 8px; }
.wa-vdot.v1 { background: #38ea81; }
.wa-vdot.vnull { border-color: #f3ba00; }
.wa-sem-dono { color: var(--green-text); }
.wa-aceitar-mini { background: var(--green-wash); box-shadow: inset 0 0 0 1px #4eeb8f; color: #38ea81; font-size: 12px; font-weight: 400; padding: 1px 8px; }
.wa-aceitar-mini:hover { background: #d1fde3; }
.wa-item.af-parada { box-shadow: inset 3px 0 0 #ea383b; }
.af-fila { background: #ffdede; color: #ff8d8d; border-radius: 999px; font-size: 11px; font-weight: 400; text-align: center; padding: 5px 10px; width: calc(100% - 28px); }
:root:not([data-theme="light"]) .af-fila { background: #403737; }
.af-espera { color: #ea383b; font-weight: 400; }
.wa-thread-pane { background: var(--bg); }
.wa-thread-empty { gap: 16px; }
.wa-thread-empty svg { width: 48px; height: 48px; color: #38ea81; stroke-width: 1.4; }
.wa-thread-empty p { font-size: 24px; color: var(--title-sub); font-weight: 300; }
:root[data-theme="light"] .wa-thread-empty p { color: #6d6d6d; }
.wa-thread-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 14px; }
.wa-thread-who b { font-family: var(--sans); font-size: 17px; font-weight: 400; letter-spacing: 0; }
.wa-thread-who span { font-size: 12.5px; }
.wa-thread-actions .btn-outline { height: 31px; padding: 0 12px; font-size: 14px; }
.wa-day span { background: var(--surface-2); color: #cccccc; font-size: 13px; }
:root:not([data-theme="light"]) .wa-day span { color: #575757; }
.wa-bubble { font-size: 15px; border-radius: 12px; padding: 8px 12px 6px; }
.wa-msg.in .wa-bubble { background: var(--bubble-in); color: var(--bubble-in-ink); border: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.07); border-bottom-left-radius: 12px; }
.wa-msg.out .wa-bubble { background: var(--bubble-out); color: var(--bubble-out-ink); border-bottom-right-radius: 12px; }
.wa-meta { font-size: 11px; }
.wa-composer { background: transparent; border-top: 0; padding: 8px 12px 14px; }
.wa-composer-row textarea { border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.wa-aceitar-box { background: var(--surface-2); border-radius: 10px; color: #a5a5a5; font-size: 13px; padding: 8px 8px 8px 14px; }
.wa-aceitar-box .btn-solid { height: 31px; }
.wa-window-closed { border-radius: 10px; }
.wa-lead-pane { background: var(--surface); border-left: 1px solid var(--line); padding: 18px 16px; }
.wa-lead-head h2 { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.wa-lead-rows { font-size: 15px; gap: 10px 14px; }
.wa-lead-rows dt { color: var(--ink-muted); }
.wa-lead-rows dd { color: var(--ink); }
.wa-open-lead { align-self: center; margin-top: 18px; }
.wa-robo-btn .wa-robo-dot { width: 9px; height: 9px; border: 2px solid #2eb264; background: var(--surface); box-shadow: 0 0 0 2px rgba(56,234,129,0.22); }
.wa-robo-btn .wa-robo-dot.ligado { background: #38ea81; }
.bol-painel, .rsup-conversa { background: var(--surface-2); }
.chat-inbox { border-radius: 14px; border: 1px solid var(--line); box-shadow: none; }
.chat-lista { border-right: 1px solid var(--line); }
.chat-item { border-radius: 10px; }
.chat-item.ativa { background: var(--green-wash); }
.chat-item-txt b { font-size: 15px; }
.chat-msg { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.07); background: var(--bubble-in); color: var(--bubble-in-ink); font-size: 14px; }
.chat-msg.minha { background: var(--bubble-out); color: var(--bubble-out-ink); }
.chat-nao { background: #38ea81; color: #ffffff; }
.chat-filtro.active { border-color: #adadad; color: var(--ink); background: var(--surface); }
.chat-thread-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.chat-composer { background: transparent; border-top: 0; }

/* ----- Mapa da rede ----- */
.mapa-barra { align-items: center; }
#mapa-abas { border-radius: 999px; padding: 4px; }
#mapa-abas .preset-btn { height: 32px; padding: 0 18px; border-radius: 999px; font-size: 16px; }
#mapa-abas .preset-btn.active { box-shadow: 0 1px 4px rgba(0,0,0,0.16); }
.mapa-layout { grid-template-columns: 370px minmax(0, 1fr); gap: 16px; margin-top: 10px; }
.mapa-lateral { padding: 20px 18px; gap: 14px; border-radius: 16px; }
.mapa-area { border-radius: 16px; }
#mapa-leaflet { background: var(--surface-2); }
.mapa-info { font-size: 14px; }
.mapa-camadas { gap: 14px; }
.mapa-camadas label { font-size: 16px; gap: 12px; color: var(--ink); }
.mapa-camadas input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 50%; background: #d9d9d9; border: 0; cursor: pointer; flex-shrink: 0; }
.mapa-camadas input[type="checkbox"]:checked { background: #38ea81; }
.mapa-camadas input[type="checkbox"]:focus-visible { outline: 2px solid #38ea81; outline-offset: 2px; }
.mapa-camadas b { font-weight: 400; font-size: 16px; }
.mapa-leg { width: 20px; height: 12px; border-radius: 3px; }
.mapa-leg.cobertura { background: color-mix(in srgb, var(--viz-3) 25%, transparent); box-shadow: inset 0 0 0 1.5px var(--viz-3); } /* a mesma cor com que o mapa desenha a cobertura */
.mapa-leg.rota { height: 3px; width: 20px; background: var(--viz-1); }
.mapa-leg.caixa { width: 12px; height: 12px; border-radius: 50%; background: var(--viz-2); }
.mapa-leg.manut { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--viz-5); }
.mapa-leg.exp { width: 10px; height: 12px; }
#mapa-painel-explorar .modal-field { flex-direction: column-reverse; gap: 6px; }
#mapa-painel-explorar .modal-field label { font-size: 15px; color: #8d8d8d; }
#mapa-painel-explorar .modal-field input { height: 42px; font-size: 15px; }
.mapa-viab-form input { height: 36px; }
.mapa-local { height: 31px; }
.mapa-raio { font-size: 14px; }
.mapa-raio input { height: 34px; width: 110px; font-weight: 700; }
.mapa-dica { font-size: 14px; background: transparent; padding: 0; color: var(--ink-muted); }
.mapa-sub { font-size: 16px; font-weight: 400; color: var(--ink-muted); margin-top: 16px; }
#manut-salvar { width: 100%; justify-content: center; height: 36px; font-size: 15px; }
.manut-ver b { font-size: 16px; font-weight: 400; }
.manut-ver span { font-size: 12.5px; }
.manut-acoes .rel-link { font-size: 15px; font-weight: 400; color: #38ea81; }
.manut-acoes .manut-excluir { color: #ea383b; }
.mapa-busca-lista button, .manut-ver { font-size: 15px; }
.leaflet-container .leaflet-control-zoom a { font-family: var(--sans); }
@media (max-width: 1000px) { .mapa-layout { grid-template-columns: minmax(0, 1fr); } }

/* ----- Outras telas: o mesmo vocabulário ----- */
.home-brand { font-family: var(--display); font-weight: 300; letter-spacing: -0.03em; color: var(--title); }
.home-brand .dot { color: #38ea81; }
.home-welcome-panel h2 { font-weight: 400; }
.carteira-head h2, .wa-not-connected h2, .ch-vazio h2, .ch-ficha-quem h2, .ai-chat-panel h2, .rs-editor-head h2 { font-family: var(--sans); font-weight: 400; letter-spacing: -0.01em; }
.carteira-resumo b, .cob-resumo b, .contas-resumo b { font-size: 26px; }
.rel-abas button.active { border-bottom-color: #38ea81; }
.rel-kpi b { font-size: clamp(18px, 1.9vw, 26px); }
.rel-link, .lead-conversa-link, .fs-link, .uso-link { color: var(--green-text); font-weight: 400; }
.pp-card { border-radius: 16px; border-left-width: 1px; box-shadow: none; }
.pp-card::before { content: ""; }
.pp-cab h2 { font-family: var(--sans); font-weight: 400; }
.pp-passo { border-radius: 12px; }
.pp-passo.feito .pp-marca { background: #38ea81; border-color: #38ea81; }
.bloq-faixa, .push-convite { border-radius: 16px; border-color: var(--line-2); }
/* No computador a faixa da conta travada e o convite das notificações ficam centrados na folha, à direita do menu lateral (250px; 96px recolhido):
   antes, em janelas até ~1340px, a faixa cobria o botão do usuário no pé do menu, onde agora ficam Meu perfil e Sair. */
@media (min-width: 901px) {
  .bloq-faixa, .push-convite { left: calc(250px + (100% - 250px) / 2); }
  .bloq-faixa { width: min(840px, calc(100% - 250px - 32px)); }
  .push-convite { width: min(560px, calc(100% - 250px - 32px)); }
  .sidebar.collapsed ~ .main .bloq-faixa { left: calc(96px + (100% - 96px) / 2); width: min(840px, calc(100% - 96px - 32px)); }
  /* o convite das notificações fica fora do .app-shell (no body): com o menu recolhido ele só fica um pouco à direita do centro */
}
.fx-switch input:checked + .fx-switch-trilho { background: #38ea81; }
.fx-card.ligado { border-left-color: #38ea81; }
.fx-num { background: var(--surface-2); }
.imp-passos li.atual::before { background: var(--action); color: #ffffff; }
.imp-passos li.feito::before { background: #d1fde3; color: #089441; }
.imp-num.bom b { color: var(--green-text); }
.uso-ponto.ativo { background: #38ea81; box-shadow: 0 0 0 3px #d1fde3; }
.etq-c0 { background: #d1fde3; border-color: #38ea81; }
.ri-tom.sel { background: var(--action); border-color: var(--action); color: #ffffff; }
.cc-chip.active { font-weight: 500; }
.date-picker-day.selected { background: #38ea81; color: #ffffff; font-weight: 700; }
.date-picker-day.today { box-shadow: inset 0 0 0 1px #38ea81; color: var(--green-text); }
.tasks-cal-day.selected { background: var(--green-wash); border-color: #38ea81; }
.tasks-cal-day.today .daynum { color: var(--green-text); }
.task-day-chip { background: #d1fde3; color: #089441; font-weight: 500; }
.ch-nao-lidas, .contas-aba-n { background: #38ea81; color: #ffffff; }
.ch-selo-robo, .rsup-conf-sim { background: #d1fde3; color: #089441; }
.falha-toast, .ch-toast { background: #1b1b1b; color: #ffffff; font-weight: 400; }
.ch-toast.erro { background: #ea383b; }
.login-screen[data-tela="maquete"] .login-title h1 { font-family: var(--sans); font-weight: 600; }
/* Slides do Relatório semanal (prévia e PDF em px fixo): o mesmo espaçamento e as mesmas variantes da Inter de antes do desenho, para o PDF não mudar. */
.rs-slide { letter-spacing: -0.006em; font-feature-settings: "cv11", "ss01"; }
@media print {
  .sidebar, .topbar { display: none !important; }
  .main { border-radius: 0 !important; }
  body, .app-shell { background: #fff !important; }
}
.wa-aceitar-box { flex-wrap: nowrap; }
.wa-aceitar-box > span { flex: 1; min-width: 0; }
/* Cores dos gráficos do Dashboard no desenho do designer: --viz-serie-1 (verde-claro: atual, criados, em aberto), --viz-serie-2 (vermelho: vendidos),
   --viz-ganho (verde-escuro: ganho) e as fatias e barras por categoria em --viz-p1..6 (cinza, laranja, verde-água, amarelo, rosa, verde-escuro).
   --viz-1..6 continuam os da base: o Mapa da rede lê --viz-1 (rotas, azul), --viz-2 (caixas, laranja), --viz-3 e --viz-5 pelo nome, e a legenda tem de bater. */
:root, :root[data-theme="light"] { --viz-serie-1: #38ea81; --viz-serie-2: #ea383b; --viz-ganho: #0e9f6e; --viz-p1: #9aa3a0; --viz-p2: #eb6834; --viz-p3: #2fb38a; --viz-p4: #f0b429; --viz-p5: #ef8fb4; --viz-p6: #0e7a3a; }

/* ----- Leitura (06/10/2026, quarta devolução da sessão do mapa): texto que ficava apagado ou verde-vivo em fundo claro -----
   Só cores de texto e de alguns chips; nada de tamanho, raio ou posição. Onde o desenho tinha texto ilegível (branco sobre o verde-claro
   do chip Viável, cinza sobre cinza no chip Perdido, verde #38ea81 como texto no tema claro), aqui fica legível e a cor do desenho fica
   no fundo, na bolinha ou na borda. */
/* Verde-vivo como TEXTO só no escuro; no claro vira o verde de texto (#089441). Lista fechada: cada seletor é um uso real no app.css. */
/* Verde como TEXTO: o verde de texto (--green-text: #067a36 no claro, #38ea81 no escuro). Lista simples, com o peso de cada seletor, para as
   variantes da base (.lead-days.sla, .kpi-delta.down/.neutral, .manut-excluir) continuarem valendo. */
.kpi-delta, .dg-kpi-delta.bom, .dg-chip em.bom, .cons-up, .rel-verde, .rel-h-bom, .ppo-tag.real, .ppo-tag.otimista, .status-chip.ok,
  .wa-aceitar-mini, .wa-item.unread .wa-item-top time, .lead-days, .manut-acoes .rel-link, .home-news-meta a, .empresa-links a, .termos-aceite-links a,
  .meta-hero-pct.done, .placar-num em.done, .resumo-card-valor.bom, .mapa-res-titulo.bom, .ficha-total strong, .lead-conversa-link, .lead-viavel-chip.vsug,
  .tasks-cal-day.today .daynum, .date-picker-day.today, .pipeline-col.is-won h3, .meta-hero-kicker, .wa-tick.read, .lead-ads-tag, .lead-whatsapp-btn,
  .wa-sem-dono, .rel-link, .fs-link, .uso-link, .exp-popup-ok, .pp-ok, .rm-nota.ok, .chat-autor, .imp-num.bom b, .fx-sim-botoes button, .wa-thread-who .wa-fluxo-info,
  .avr-chip-ok { color: var(--green-text); }
.manut-acoes .manut-excluir { color: var(--status-critical); }
.lead-days.sla { color: var(--status-critical); }
:root[data-theme="light"] .lead-whatsapp-btn:hover { color: #ffffff; }
/* Chip Viável: o desenho tem letra branca sobre #38ea81 (contraste 1,6); aqui a letra é verde-escuro e o fundo continua o do desenho */
.lead-viavel-chip.v1, .lead-viavel-chip.v1:hover { color: #0b2a17; }
/* Chips neutros (Perdido, Desligada, Em aberto...): letra escura sobre o cinza do desenho no claro; no escuro fundo escuro e letra clara */
.chip.neutral { background: #cccccc; color: #3b3b3b; }
.chip.neutral .chip-mark { background: #6d6d6d; }
.status-chip.neutral { color: #3b3b3b; }
:root:not([data-theme="light"]) .chip.neutral { background: #2b2e2d; color: #d0d0d0; }
:root:not([data-theme="light"]) .chip.neutral .chip-mark { background: #9a9a9a; }
:root:not([data-theme="light"]) .status-chip.neutral { background: #2b2e2d; color: #d0d0d0; }
/* Chip de aviso no escuro: fundo escuro translúcido com a letra amarela (o amarelo-claro ficava com letra amarela em cima) */
:root:not([data-theme="light"]) .chip.warning { background: rgba(243,186,0,0.16); color: #f3ba00; }
:root:not([data-theme="light"]) .chip.warning .chip-mark { background: #f3ba00; }
/* "Leads estagnados" e os outros chips de alerta: a legenda na cor do texto, não no cinza */
.dg-chip.alerta .dg-chip-label { color: var(--ink); }
:root:not([data-theme="light"]) .dg-chip.alerta .dg-chip-label { color: #e6e6e6; }
/* Iniciais nos avatares cinza da lista de Atendimentos, separador "Hoje" e a frase da caixa de aceitar */
.wa-avatar { color: #3b3b3b; }
.wa-day span { color: #6d6d6d; }
:root:not([data-theme="light"]) .wa-day span { color: #a0a0a0; }
.wa-aceitar-box { color: #5a5a5a; }
:root:not([data-theme="light"]) .wa-aceitar-box { color: #b5b5b5; }
/* Contadores verdes (não lidas, pedidos, abas): letra verde-escuro sobre o verde do desenho, como o contador do menu lateral */
.wa-unread, .contas-aba-n, .chat-nao, .ch-nao-lidas { color: #0b2a17; font-weight: 700; }
/* Últimos pares abaixo de 3:1 da varredura: etiqueta ADS e botão do WhatsApp no escuro (verde sobre verde-claro) e a faixa da fila (rosa sobre rosa-claro) */
:root:not([data-theme="light"]) .lead-ads-tag { background: rgba(56,234,129,0.16); }
:root:not([data-theme="light"]) .lead-whatsapp-btn { background: rgba(56,234,129,0.18); }
.af-fila { color: #b3261e; }
:root:not([data-theme="light"]) .af-fila { color: #ff8d8d; }
/* Texto secundário com pelo menos 4,5:1 (decisão do Felipe em 06/10: "ajustar a cor do texto"): sobras da varredura */
.af-espera { color: var(--status-critical); }
#mapa-painel-explorar .modal-field label { color: var(--ink-muted); }
.wa-day span { color: #5f5f5f; }
:root[data-theme="light"] .wa-msg.out .wa-meta { color: #5a5a5a; }
.wa-pill-n { background: #6b6b6b; }
.wh-exemplo { color: var(--ink); }
/* ----- Quinta devolução (06/10/2026, sessão do mapa): variantes vencidas e tela menor ----- */
/* Selos verdes no escuro: fundo translúcido (o verde-claro fixo deixava a letra verde sem contraste); no claro a letra é o verde de texto */
.status-chip.ok { color: var(--green-text); }
:root:not([data-theme="light"]) :is(.status-chip.ok, .avr-chip-ok, .etq-c0) { background: rgba(56,234,129,0.16); }
:root:not([data-theme="light"]) .ai-msg-user { background: rgba(56,234,129,0.14); border-color: rgba(56,234,129,0.5); }
/* Celular: todo campo de escrever com 16px (com menos, o iPhone dá zoom ao tocar); vale por cima de qualquer regra de tela do v4 */
@media (max-width: 900px) {
  .content :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),
  .modal-box :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),
  #mapa-painel-explorar .modal-field input, #loc-city-input, #loc-neigh-input { font-size: 16px; }
  .wa-list-pane, .chat-lista { border-right: none; }
  .wa-thread-head { padding: 8px 10px; }
  .wa-lead-pane { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .comparison-card-row { flex-wrap: wrap; gap: 8px 16px; }
  .comparison-card-value { font-size: 30px; }
  .comparison-card-value-sm { font-size: 20px; }
  .dg-chip { font-size: 12.5px; padding: 5px 10px; }
}
@media (max-width: 1440px) { .pl-stat { padding: 16px 18px 14px; } }
/* Etiquetas da ficha: o campo de dentro da caixa continua sem borda e sem altura própria */
.etq-caixa input { height: auto; padding: 3px 2px; border: 0; background: none; }
/* Seleções dos formulários do robô de suporte e dos avisos de rede: a setinha volta (o background deles apagava a imagem) */
.rsup-form .modal-field select, .avr-form .modal-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 13px; }
/* Abas do login: altura da maquete (o trilho tem 38px) */
.login-tabs .tab { height: auto; }
/* Números do topo da Pipeline: até 1440px, Viáveis ocupa a linha de cima e os outros quatro ficam embaixo (com cinco por linha "R$ 13.989,00" não cabia); no celular o número pode quebrar */
@media (max-width: 1440px) { .pl-resumo { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pl-stat-viavel { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pl-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-stat-num b, .pl-stat-viavel .pl-stat-num b { white-space: normal; overflow-wrap: anywhere; font-size: 24px; } }
/* ----- Sobras (06/10/2026, depois da publicação; achadas pelo cruzamento de regras da sessão do mapa): regras de tela menor da base que o v4 vencia ----- */
@media (max-width: 640px) {
  .pl-busca { max-width: none; }
  .preset-pills { display: flex; }
  .dg-kpis { gap: 8px; }
  .contas-resumo b { font-size: 18px; }
}
@media (max-width: 700px) { .cob-resumo b { font-size: 18px; } }
@media (max-width: 900px) { .modal-overlay :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])) { font-size: 16px; } } /* janelas criadas por JS (robô de suporte, avisos de rede...) */
/* Suporte no CRM, Etapa 6 (docs/suporte-etapa6-negociacao.md): o selo "Negociação" no cartão do quadro de chamados, quando o robô passou a conversa com uma proposta registrada */
.ch-selo-negocia { align-self: flex-start; padding: 0 6px; border-radius: 5px; background: var(--status-warning-wash); color: var(--status-warning); font-size: 10.5px; font-weight: 600; line-height: 16px; }
/* ----- Inter e Inter Tight servidas pelo próprio CRM (06/10/2026): só os slides do Relatório semanal usam; são os mesmos arquivos variáveis do subconjunto latino que o Google Fonts servia, para o PDF não mudar. Nada mais pede fonte ao Google. ----- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/Inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/InterTight-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Uso ao vivo > Acessos (07/10/2026): data e hora de cada sessão de uso das contas em teste. Só a equipe vê. Tokens do Sistema visual v4. */
.uso-acessos { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.uso-acessos th { padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.uso-acessos td { padding: 9px 10px; vertical-align: top; color: var(--ink); border-bottom: 1px solid var(--line); }
.uso-acessos tbody tr:last-child td { border-bottom: 0; }
.uso-acessos td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.uso-acessos small { font-size: 11.5px; color: var(--ink-muted); }
.uso-ac-dia { font-weight: 600; margin-right: 6px; }
.uso-ac-nota { display: block; margin-top: 2px; }
.uso-ac-so { color: var(--ink-muted); }
.uso-ac-rodape { margin: 12px 0 0; }

/* Onboarding do cliente (09/10/2026): aba só da equipe, roteiro de implantação com o obrigatório marcado com *. Tokens do Sistema visual v4. */
.onb-resumo { margin-bottom: 16px; }
.onb-resumo-topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.onb-resumo-topo b { font-family: var(--display); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.onb-resumo-topo span { color: var(--ink-muted); font-size: 13.5px; }
.onb-barra { height: 8px; border-radius: 100px; background: var(--line); margin-top: 12px; overflow: hidden; }
.onb-barra i { display: block; height: 100%; border-radius: 100px; background: var(--green); }
.onb-erro { margin: 10px 0 0; color: var(--status-critical); font-size: 13px; }
.onb-passo { margin-bottom: 16px; }
.onb-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.onb-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, var(--surface)); padding: 10px 12px; }
.onb-linha { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.onb-marca { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; cursor: pointer; display: block; }
.onb-marca:disabled { cursor: default; }
.onb-item.feito .onb-marca { background: var(--green); border-color: var(--green); box-shadow: inset 0 0 0 3px var(--surface); }
.onb-item.na .onb-marca { border-style: dashed; }
.onb-texto-item { display: grid; gap: 3px; min-width: 0; font-size: 14px; }
.onb-item.feito .onb-texto-item > span:first-child { color: var(--ink-muted); }
.onb-item.na .onb-texto-item > span:first-child { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.onb-obrig { color: var(--status-critical); font-weight: 700; }
.onb-selo { font-size: 12.5px; color: var(--green-text); }
.onb-selo.manual { color: var(--ink-muted); }
.onb-selo.na { color: var(--ink-muted); }
.onb-selo.aberto { color: var(--ink-muted); }
.onb-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.onb-btn { white-space: nowrap; }
.onb-nota-lida { margin: 8px 0 0 34px; color: var(--ink-muted); font-size: 13px; white-space: pre-wrap; }
.onb-nota-edita { display: grid; gap: 8px; margin: 10px 0 0 34px; justify-items: start; }
.onb-texto { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.onb-pend-rodape { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .onb-linha { grid-template-columns: 22px minmax(0, 1fr); }
  .onb-acoes { grid-column: 2; justify-content: flex-start; }
  .onb-nota-lida, .onb-nota-edita { margin-left: 0; }
}

/* Ficha do provedor (aba Onboarding, 09/10/2026): blocos que a equipe preenche na reunião e gravam na conta. Tokens do Sistema visual v4. */
.onb-abas { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
.onb-aba { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.onb-aba:hover { color: var(--ink); }
.onb-aba[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }
.fp-intro { margin: 0 0 14px; color: var(--ink-muted); font-size: 13.5px; max-width: 70ch; line-height: 1.55; }
.fp-bloco { margin-bottom: 16px; }
.fp-cab { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.fp-num { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-titulo h2 { margin: 0; font-size: 18px; }
.fp-por { margin: 3px 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.5; max-width: 62ch; }
.fp-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fp-nivel { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; border: 1px solid var(--line-2); color: var(--ink-muted); white-space: nowrap; }
.fp-nivel.essencial { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.fp-status { font-size: 12.5px; padding: 3px 10px; border-radius: 100px; background: var(--surface-2, var(--line)); color: var(--ink-muted); white-space: nowrap; }
.fp-status.ok { color: var(--green-text); }
.fp-corpo { margin: 8px 0 0 46px; }
.fp-lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.fp-lista li { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2, var(--surface)); padding: 8px 12px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.fp-lista b { font-weight: 500; }
.fp-lista span { color: var(--ink-muted); font-size: 13px; }
.fp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.fp-campo { display: grid; gap: 4px; flex: 1 1 170px; min-width: 0; font-size: 12.5px; color: var(--ink-muted); }
.fp-campo input, .fp-campo select { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; }
.fp-linha { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.fp-dica { margin: 10px 0 0; color: var(--ink-muted); font-size: 12.5px; max-width: 70ch; line-height: 1.5; }
.fp-msg { margin: 10px 0 0; font-size: 13px; }
.fp-msg.ok { color: var(--green-text); }
.fp-msg.erro { color: var(--status-critical); }
.fp-senha { margin-top: 14px; border: 1px solid var(--green); border-radius: 12px; padding: 14px; display: grid; gap: 8px; font-size: 13.5px; }
.fp-senha textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.fp-etapas { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: etapa; }
.fp-etapas li { counter-increment: etapa; border: 1px solid var(--line-2); border-radius: 100px; padding: 4px 12px; font-size: 13px; }
.fp-etapas li::before { content: counter(etapa) ". "; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .fp-cab { grid-template-columns: 34px minmax(0, 1fr); }
  .fp-chips { grid-column: 2; justify-content: flex-start; }
  .fp-corpo { margin-left: 0; }
}

/* Assistente "Conectar o ERP" (tela Integração, 09/10/2026): janela em passos. Tokens do Sistema visual v4. */
.erpa-entrada { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; }
.erpa-box { max-width: 680px; }
.erpa-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.erpa-box h3 { margin: 0; font-size: 17px; }
.erpa-box h4 { margin: 0 0 8px; font-size: 13.5px; }
.erpa-trilha { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-muted); }
.erpa-trilha li { display: flex; align-items: center; gap: 6px; }
.erpa-trilha li span { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.erpa-trilha li.atual { color: var(--ink); font-weight: 600; }
.erpa-trilha li.atual span { background: var(--green); border-color: var(--green); color: var(--green-contrast); }
.erpa-trilha li.feito span { border-color: var(--green); color: var(--green-text); }
.erpa-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.erpa-op { text-align: left; display: grid; gap: 4px; padding: 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface-2, var(--surface)); color: var(--ink); font: inherit; cursor: pointer; }
.erpa-op b { font-size: 14.5px; font-weight: 600; }
.erpa-op span { font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; }
.erpa-op:hover { border-color: var(--ink-muted); }
.erpa-op.marcada { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.erpa-nota { margin: 0; }
.erpa-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.erpa-lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.erpa-resultado { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.erpa-resultado p { margin: 6px 0 0; }
.erpa-resultado ul { margin-top: 6px; }
.erpa-resultado.ok { background: var(--green-wash-2, rgba(56,234,129,0.12)); }
.erpa-resultado.erro { background: var(--critical-wash, rgba(227,93,93,0.12)); color: var(--ink); border: 1px solid var(--status-critical); }
.erpa-link { display: grid; gap: 8px; }
.erpa-link p { margin: 0; font-size: 13.5px; }
.erpa-link textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.erpa-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.erpa-wa { text-decoration: none; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.erpa-convites { display: grid; gap: 6px; }
.erpa-convite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.erpa-convite > span:nth-child(2) { flex: 1 1 200px; min-width: 0; color: var(--ink-muted); }
@media (max-width: 640px) { .erpa-grade { grid-template-columns: minmax(0, 1fr); } }

/* Conexão do ERP trocada pelo link do TI, esperando a conferência da equipe (09/10/2026). */
.erp-aguarda { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--status-critical); background: var(--critical-wash, rgba(227,93,93,0.12)); font-size: 13.5px; }
.erp-aguarda p { margin: 6px 0 0; color: var(--ink); line-height: 1.5; }
/* Janela "Novo usuário" (14/10/2026, pedido do Felipe): cabe num notebook sem zoom. Rolagem dentro da janela com Cancelar/Adicionar sempre à vista,
   duas colunas no computador e uma no celular. Tokens do Sistema visual v4. */
#user-modal-overlay .uj-box { max-height: calc(100dvh - 32px); overflow-y: auto; padding-bottom: 0; }
#user-modal-overlay .uj-box > .modal-actions { position: sticky; bottom: 0; z-index: 1; margin: 0 -22px; padding: 14px 22px 18px; background: var(--surface); border-top: 1px solid var(--line); }
#user-modal-overlay .uj-fixo { margin: 0; font-size: 13px; color: var(--ink-muted); }
#user-modal-overlay .uj-mais { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
#user-modal-overlay .uj-mais > summary { padding: 10px 0; font-size: 13px; color: var(--ink); cursor: pointer; }
#user-modal-overlay .uj-mais[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
#user-modal-overlay .uj-mais-campos { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
@media (min-width: 900px) {
  #user-modal-overlay .uj-box { max-width: 720px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 14px; align-content: start; }
  #user-modal-overlay .uj-box > h2, #user-modal-overlay .uj-box > .modal-grid-2, #user-modal-overlay .uj-box > .uj-fixo, #user-modal-overlay .uj-box > .modal-error,
  #user-modal-overlay .uj-box > .modal-actions, #user-modal-overlay .uj-box > .cfg-bloco { grid-column: 1 / -1; }
  #user-modal-overlay .uj-box > .cfg-bloco { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 12px; }
  #user-modal-overlay .uj-box > .cfg-bloco > .uj-mais, #user-modal-overlay .uj-box > .cfg-bloco > #user-permissoes-field { grid-column: 1 / -1; }
  #user-modal-overlay .uj-mais-campos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
}
@media (max-width: 600px) {
  #user-modal-overlay .uj-box .modal-grid-2 { grid-template-columns: 1fr; }
}
/* Aviso do Chat interno aberto pela equipe dentro de um cliente (14/10/2026). Tokens do Sistema visual v4. */
.chat-aviso-equipe { margin: 0 0 10px; font-size: 13px; color: var(--ink-muted); }

/* Faixa de aviso do limite de conversas da IA (14/10/2026): topo da área principal, em fluxo normal. */
.ia-teto-faixa { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--status-warning-wash); border-bottom: 1px solid var(--status-warning); }
.ia-teto-faixa[hidden], .ia-teto-faixa [hidden] { display: none; }
.ia-teto-faixa > svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--status-warning); }
.ia-teto-faixa-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ia-teto-faixa-txt b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ia-teto-faixa-txt span { color: var(--ink-muted); line-height: 1.45; }
.ia-teto-faixa .btn-solid { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .ia-teto-faixa { flex-wrap: wrap; padding: 10px 14px; }
  .ia-teto-faixa .btn-solid { width: 100%; }
}

/* Onboarding em primeiro lugar no menu do cliente (14/10/2026): o passo a passo inicial de todo cliente ganha um destaque discreto. */
.sidebar .nav-item.nav-item-onboarding:not(.active) .nav-label { font-weight: 600; }
.sidebar .nav-item.nav-item-onboarding:not(.active) svg { color: var(--green); }

/* Janela "Preferências da conta" (14/10/2026, pedido do Felipe): rolagem dentro da janela com Cancelar/Salvar sempre à vista, blocos com título curto,
   detalhes e prévias recolhidos; duas colunas no computador, uma no celular. Tokens do Sistema visual v4. */
#pf-overlay .pf-box { max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto; padding-bottom: 0; }
#pf-overlay #pf-corpo { display: flex; flex-direction: column; gap: 14px; }
#pf-overlay .pf-blocos { display: flex; flex-direction: column; gap: 16px; }
#pf-overlay .pf-bloco { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
#pf-overlay .pf-bloco-tit { margin: 0; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
#pf-overlay .pf-bloco-grade { display: flex; flex-direction: column; gap: 14px; }
#pf-overlay .pf-bloco-equipe { border-style: dashed; }
#pf-overlay .pf-opcao { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#pf-overlay .pf-opcao .kpi-sub { line-height: 1.45; }
#pf-overlay .pf-mais > summary, #pf-overlay .pf-previa > summary { font-size: 12.5px; color: var(--green); cursor: pointer; width: max-content; max-width: 100%; }
#pf-overlay .pf-mais > p { margin: 6px 0 0; }
#pf-overlay .pf-previa .pf-amostra { margin-top: 6px; }
#pf-overlay .pf-acoes { position: sticky; bottom: 0; z-index: 1; margin: 0 -22px; padding: 14px 22px 18px; background: var(--surface); border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  #pf-overlay .pf-box { max-width: 780px; }
  #pf-overlay .pf-blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  #pf-overlay .pf-bloco-largo { grid-column: 1 / -1; }
  #pf-overlay .pf-bloco-grade { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 14px; align-items: start; }
}
/* Regra única das janelas (14/10/2026, pedido do Felipe "janelas mal formatadas", aprovada pela coordenação): nenhuma janela passa da tela.
   A caixa rola por dentro e o rodapé de botões (.modal-actions como último filho) fica sempre à vista, com a mesma linha fina das janelas
   "Novo usuário" e "Preferências da conta". Essas duas e o aceite dos Termos têm regra própria e ficam de fora. Tokens do Sistema visual v4. */
.modal-overlay > .modal-box:not(.uj-box):not(.pf-box) { max-height: calc(100dvh - 40px); overflow-y: auto; }
/* O rodapé também pode estar no fim de um bloco visível da caixa (janelas montadas na hora, como a da pesquisa de satisfação, e janelas com
   duas telas, como a Nova cobrança, em que o bloco escondido é o último). */
.modal-overlay:not(.termos-aceite-overlay) > .modal-box:not(.uj-box):not(.pf-box):is(:has(> .modal-actions:last-child), :has(> div:not([hidden]):not([style*="none"]) > .modal-actions:last-child)) { padding-bottom: 0; }
.modal-overlay:not(.termos-aceite-overlay) > .modal-box:not(.uj-box):not(.pf-box) > .modal-actions:last-child,
.modal-overlay:not(.termos-aceite-overlay) > .modal-box:not(.uj-box):not(.pf-box) > div:not([hidden]):not([style*="none"]) > .modal-actions:last-child {
  position: sticky; bottom: 0; z-index: 1; margin: 0 calc(-1 * var(--janela-lado, 22px)); padding: 14px var(--janela-lado, 22px) 18px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.modal-overlay > .resumo-box { --janela-lado: 24px; }
/* ----- Menu em áreas com páginas-hub (14/10/2026, src/front/91-menu-hub.js; chave menu_hub da conta) ----- */
#client-nav.mh-on > .nav-item[data-client-page], #client-nav.mh-on > #nav-empresas-toggle, #client-nav.mh-on > .nav-subitems, #client-nav.mh-on > .nav-section-label:not(:first-of-type) { display: none !important; }
#mh-nav { display: flex; flex-direction: column; gap: 3px; }
#mh-nav .mh-label { margin-top: 16px; }
.mh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 18px; }
.mh-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-align: left; cursor: pointer; color: var(--ink); font: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.mh-card:hover, .mh-card:focus-visible { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); outline: none; }
.mh-card .mh-icone { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--green-text); }
.mh-card .mh-icone svg { width: 20px; height: 20px; }
.mh-card b { font-size: 15.5px; font-weight: 600; }
.mh-card p { margin: 0; font-size: 13px; color: var(--ink-muted); line-height: 1.4; }
.mh-card .mh-tag { align-self: flex-start; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--line); }
.mh-card .mh-tag.equipe { background: rgba(56, 234, 129, .14); color: var(--green-text); border-color: transparent; }
.mh-card .mh-card-n { position: absolute; top: 14px; right: 14px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--green); color: #0b2a17; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.mh-card.area { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
.mh-card.area p { font-size: 12.5px; }
.mh-card.area .mh-n { margin-left: auto; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.mh-areas { margin-top: 26px; }
.mh-areas h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--ink-muted); }
.mh-areas .mh-grid { margin-top: 10px; }
.mh-recentes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.mh-recentes .mh-rotulo { font-size: 12.5px; color: var(--ink-faint); }
.mh-recente { font: inherit; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-muted); border: 1px solid transparent; cursor: pointer; }
.mh-recente:hover { border-color: var(--green); color: var(--ink); }
.mh-vazio { color: var(--ink-muted); font-size: 13.5px; margin: 8px 0; }
.mh-busca-botao { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink-faint); font: inherit; font-size: 13px; cursor: text; min-width: 260px; }
.mh-busca-botao kbd { margin-left: auto; font: inherit; font-size: 11px; color: var(--ink-faint); }
.mh-busca-botao:hover { border-color: var(--line-2); }
.mh-busca-box { max-width: 560px; padding: 12px 0 8px; }
.mh-busca-topo { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; border-bottom: 1px solid var(--line); }
.mh-busca-topo input { flex: 1; height: 38px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.mh-busca-lista { max-height: 60vh; overflow: auto; padding: 6px 8px; }
.mh-busca-grupo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: 10px 10px 4px; }
.mh-busca-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.mh-busca-item:hover, .mh-busca-item:focus-visible { background: var(--surface-2); outline: none; }
.mh-busca-item svg { width: 18px; height: 18px; color: var(--green-text); flex-shrink: 0; }
.mh-busca-item b { font-weight: 600; }
.mh-busca-item span { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); }
.mh-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mh-caminho { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); margin: -6px 0 12px; }
.mh-caminho .mh-caminho-area { font: inherit; font-size: 13px; color: var(--green-text); background: none; border: 0; padding: 0; cursor: pointer; }
.mh-caminho .mh-caminho-area:hover { text-decoration: underline; }
.mh-caminho b { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .mh-busca-botao { min-width: 0; width: 100%; } .mh-busca-box { max-width: none; } }
@media (max-width: 640px) { .mh-grid { grid-template-columns: 1fr; } .mh-card { padding: 16px 14px 14px; } }
.mh-recentes[hidden], .mh-areas[hidden] { display: none; } /* a classe dá display flex/block e venceria o hidden: os Recentes e as áreas só aparecem no Começo */

/* Integração > WhatsApp dos anúncios: passo a passo da conexão por QR code (20/10/2026) */
.wa-passos { margin: 6px 0 0; padding-left: 20px; }
.wa-passos li { margin-top: 4px; }
.wa-passos .wa-passos-excecao { list-style: none; margin-left: -20px; margin-top: 8px; }