:root {
    --bg: #0b0f19;
    --surface: rgba(17, 24, 39, 0.85);
    --surface-solid: #111827;
    --surface2: rgba(30, 41, 59, 0.7);
    --surface3: rgba(51, 65, 85, 0.7);
    --border: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    --green: #10b981;
    --red: #f43f5e;
    --yellow: #f59e0b;
    --blue: #38bdf8;
    --purple: #8b5cf6;
    --text: #f8fafc;
    --text2: #94a3b8;
    --text3: #64748b;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 18px;
    --glass-blur: blur(14px) saturate(180%);
    --glass-bg: rgba(17, 24, 39, 0.75);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.25), 0 2px 6px -1px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
  }
  
  html.theme-claro {
    --bg: #f8fafc;
    --surface: rgba(255, 255, 255, 0.9);
    --surface-solid: #ffffff;
    --surface2: rgba(241, 245, 249, 0.85);
    --surface3: rgba(226, 232, 240, 0.85);
    --border: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --text: #1e293b; /* Cinza escuro grafite */
    --text2: #334155; /* Grafite médio */
    --text3: #64748b; /* Grafite suave */
    --accent: #1a73e8;
    --accent-hover: #1557b0;
    --accent-gradient: linear-gradient(135deg, #1a73e8 0%, #3b82f6 100%);
    --green: #0d9488;
    --red: #e11d48;
    --yellow: #d97706;
    --blue: #0284c7;
    --purple: #7c3aed;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 16px 36px -4px rgba(15, 23, 42, 0.09);
  }

  html.theme-meio-claro {
    --bg: #f1f5f9;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-solid: #ffffff;
    --surface2: rgba(241, 245, 249, 0.9);
    --surface3: rgba(226, 232, 240, 0.9);
    --border: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);
    --green: #0d9488; --red: #dc2626; --yellow: #d97706;
    --text: #1e293b; --text2: #334155; --text3: #64748b;
    --accent: #2563eb; --blue: #0284c7;
    --glass-bg: rgba(241, 245, 249, 0.85);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 18px -2px rgba(0,0,0,0.07);
    --shadow-lg: 0 14px 32px -4px rgba(0,0,0,0.12);
  }

  html.theme-cinza-medio {
    --bg: #cbd5e1;
    --surface: rgba(248, 250, 252, 0.92);
    --surface-solid: #f1f5f9;
    --surface2: rgba(226, 232, 240, 0.85);
    --surface3: rgba(203, 213, 225, 0.85);
    --border: rgba(0, 0, 0, 0.12);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --green: #0d9488; --red: #dc2626; --yellow: #d97706;
    --text: #0f172a; --text2: #334155; --text3: #475569;
    --accent: #2563eb; --blue: #0284c7;
    --glass-bg: rgba(226, 232, 240, 0.88);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 18px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0 14px 32px -4px rgba(0,0,0,0.15);
  }

  html.theme-meio-escuro {
    --bg: #334155;
    --surface: rgba(51, 65, 85, 0.9);
    --surface-solid: #334155;
    --surface2: rgba(71, 85, 105, 0.8);
    --surface3: rgba(100, 116, 139, 0.8);
    --border: rgba(255, 255, 255, 0.12);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --accent: #60a5fa;
    --green: #34d399; --red: #fb7185; --yellow: #fbbf24;
    --text: #f8fafc; --text2: #e2e8f0; --text3: #cbd5e1;
    --blue: #38bdf8;
    --glass-bg: rgba(51, 65, 85, 0.82);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 20px -2px rgba(0,0,0,0.3);
    --shadow-lg: 0 14px 34px -4px rgba(0,0,0,0.4);
  }

  html.theme-colorido {
    --bg: #f8fafc;
    --surface: rgba(255, 255, 255, 0.9);
    --surface-solid: #ffffff;
    --surface2: rgba(241, 245, 249, 0.85);
    --surface3: rgba(226, 232, 240, 0.85);
    --border: rgba(0, 0, 0, 0.08);
    --text: #1e293b;
    --text2: #334155;
    --text3: #64748b;
    --accent: #2563eb;
    --green: #10b981;
    --red: #f43f5e;
    --yellow: #f59e0b;
    --blue: #3b82f6;
    --glass-bg: rgba(255, 255, 255, 0.88);
  }
  html.theme-colorido body {
    background: #f8fafc;
  }
  html.theme-colorido .cb-btn.btn-executivo {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 55%, #06b6d4 100%) !important;
  }
  html.theme-colorido .kpi-card:nth-child(5n+1) { --kpi-color: #2563eb; }
  html.theme-colorido .kpi-card:nth-child(5n+2) { --kpi-color: #059669; }
  html.theme-colorido .kpi-card:nth-child(5n+3) { --kpi-color: #f59e0b; }
  html.theme-colorido .kpi-card:nth-child(5n+4) { --kpi-color: #10b981; }
  html.theme-colorido .kpi-card:nth-child(5n+5) { --kpi-color: #7c3aed; }


  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 14px; }
  html, body { overflow-x: hidden; }
  body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.015em;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.3s, color 0.3s;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body.no-scroll { overflow: hidden; }


  /* Tela cheia de carregamento inicial — visível por padrão (sem depender de
     JS) até o Firebase Auth confirmar se existe sessão ou não. Sem isto, o
     formulário de login inteiro (#login-screen, que ficava display:flex por
     padrão) piscava a cada F5 mesmo pra quem já estava logado, porque
     onAuthStateChanged é assíncrono e initApp() só era chamado no
     window.onload — dava a impressão de ter deslogado sozinho. auth.js
     esconde este loader e revela login-screen OU app-wrapper assim que o
     Auth resolve, nunca os dois ao mesmo tempo. */
  #app-boot-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background:
      radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.16) 0, transparent 40%),
      radial-gradient(circle at 88% 22%, rgba(124, 58, 237, 0.15) 0, transparent 40%),
      radial-gradient(circle at 50% 88%, rgba(16, 185, 129, 0.10) 0, transparent 45%),
      radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.12) 0, transparent 35%),
      var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transition: opacity 0.3s ease;
  }
  /* O símbolo do Apoiare já é um anel aberto com uma bolinha na ponta —
     girá-lo faz ele funcionar como o próprio indicador de carregamento,
     sem precisar de um spinner genérico ao lado. */
  .boot-loader-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    animation: boot-logo-spin 1.6s cubic-bezier(0.55, 0.06, 0.45, 0.94) infinite,
                boot-logo-glow 2.4s ease-in-out infinite;
  }
  @keyframes boot-logo-spin { to { transform: rotate(360deg); } }
  @keyframes boot-logo-glow {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0)); }
    50% { filter: drop-shadow(0 0 14px rgba(37, 99, 235, 0.45)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .boot-loader-icon { animation: boot-logo-glow 2.4s ease-in-out infinite; }
  }

  #login-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
      radial-gradient(circle at 12% 18%, rgba(37, 99, 235, 0.16) 0, transparent 40%),
      radial-gradient(circle at 88% 22%, rgba(124, 58, 237, 0.15) 0, transparent 40%),
      radial-gradient(circle at 50% 88%, rgba(16, 185, 129, 0.10) 0, transparent 45%),
      radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.12) 0, transparent 35%),
      var(--bg);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .login-layout-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    width: 100%;
    max-width: 1080px;
    margin: auto;
  }

  /* Painel de Apresentação à esquerda (Sem bordas, moderno e colorido) */
  .login-presentation {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 12px 6px;
  }

  .presentation-brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    width: fit-content;
  }
  .presentation-brand-tag .pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
  }

  .presentation-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: var(--text); /* Cinza escuro grafite nos temas claros */
    margin: 0;
  }
  .presentation-subtitle {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text2); /* Grafite suave */
    margin: 0;
    font-weight: 500;
  }

  .presentation-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    margin-top: 4px;
  }

  .presentation-feat-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }

  .feat-icon-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .feat-icon-box.c-blue { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
  .feat-icon-box.c-green { background: rgba(5, 150, 105, 0.12); color: #059669; }
  .feat-icon-box.c-purple { background: rgba(124, 58, 237, 0.12); color: #7c3aed; }
  .feat-icon-box.c-amber { background: rgba(217, 119, 6, 0.12); color: #d97706; }

  .feat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .feat-title {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .feat-title.c-blue { color: #2563eb; }
  .feat-title.c-green { color: #059669; }
  .feat-title.c-purple { color: #7c3aed; }
  .feat-title.c-amber { color: #d97706; }

  html.is-dark .feat-title.c-blue { color: #60a5fa; }
  html.is-dark .feat-title.c-green { color: #34d399; }
  html.is-dark .feat-title.c-purple { color: #a78bfa; }
  html.is-dark .feat-title.c-amber { color: #fbbf24; }
  html.is-dark .feat-icon-box.c-blue { background: rgba(96, 165, 250, 0.16); color: #60a5fa; }
  html.is-dark .feat-icon-box.c-green { background: rgba(52, 211, 153, 0.16); color: #34d399; }
  html.is-dark .feat-icon-box.c-purple { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
  html.is-dark .feat-icon-box.c-amber { background: rgba(251, 191, 36, 0.16); color: #fbbf24; }

  .feat-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text2); /* Cinza escuro grafite nos temas claros */
    font-weight: 500;
  }

  .presentation-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text2); /* Grafite */
    font-weight: 600;
    margin-top: 4px;
  }

  /* Card de Login à Direita com Glassmorphism Moderno */
  .login-card {
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--border) 60%, rgba(255, 255, 255, 0.35));
    border-radius: 22px;
    padding: 34px 28px;
    width: 100%;
    max-width: 400px;
    flex: 0 0 400px;
    box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    text-align: center;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .login-card .logo { padding: 0 0 18px 0; border: none; }
  .login-card h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px; letter-spacing: -0.04em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .login-card p { font-size: 0.82rem; color: var(--text2); margin-top: 6px; margin-bottom: 0; font-weight: 500; }
  .login-card label { color: var(--text2) !important; }

  @media (max-width: 900px) {
    .login-layout-container {
      flex-direction: column;
      gap: 24px;
      justify-content: center;
    }
    .login-presentation {
      text-align: center;
      align-items: center;
      max-width: 460px;
      padding: 0;
    }
    .presentation-title {
      font-size: 1.6rem;
    }
    .presentation-features-grid {
      display: none;
    }
    .presentation-footer-pill {
      display: none;
    }
    .login-card {
      max-width: 100%;
      flex: 1 1 auto;
      padding: 28px 20px;
    }
  }
  
  .brand-badge-beta {
    font-size: 0.58rem;
    background: rgba(99, 102, 241, 0.09);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.22);
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  html.is-dark .brand-badge-beta {
    background: rgba(99, 102, 241, 0.16);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.35);
  }

  .auth-link { color: var(--accent); font-size: 0.78rem; font-weight: 600; cursor: pointer; display: block; margin-top: 14px; text-decoration: underline; }

  .tipo-conta-card { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background: var(--surface2); display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .tipo-conta-card:hover { border-color: var(--accent); transform: translateY(-1px); }
  .tipo-conta-card.active { border-color: var(--accent); background: rgba(59, 130, 246, 0.1); box-shadow: 0 0 0 1px var(--accent) inset; }
  .tipo-conta-icon { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 2px; }
  .tipo-conta-nome { font-size: 0.82rem; font-weight: 700; color: var(--text); }
  .tipo-conta-preco { font-size: 0.65rem; color: var(--text3); margin-top: 1px; font-weight: 600; }

  /* Widget de Perfil / Saudação, Data e Clima (Design Exato do Mockup) */
  .sidebar-header-widget {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 9px;
    background: color-mix(in srgb, var(--surface2) 75%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-top: 3px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }
  .sidebar-header-widget:hover {
    background: var(--surface2);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  }
  .sidebar-user-avatar {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.25);
    border: 2.5px solid rgba(255, 255, 255, 0.95);
  }
  html.is-dark .sidebar-user-avatar {
    border-color: rgba(255, 255, 255, 0.2);
  }
  .sidebar-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
  }
  .sidebar-user-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }
  .sidebar-saudacao-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text2);
    line-height: 1.1;
  }
  /* Clima solto ao lado da saudação — sem caixa/borda, só ícone + temperatura,
     no mesmo espírito "flat" do resto do redesign (nada de chip quadrado). */
  .sidebar-weather-widget {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    line-height: 1;
    flex-shrink: 0;
  }
  .sidebar-weather-widget span#weather-temp {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text3);
  }
  .sidebar-user-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-top: 1px;
  }
  .sidebar-user-sub-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 1px;
  }
  .sidebar-user-role-badge {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
  }
  .sidebar-datetime-box {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    display: flex;
    align-items: center;
  }
  .sidebar-datetime {
    color: var(--text3);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .weather-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #sidebar-lock-btn {
    transition: color 0.15s ease, transform 0.15s ease;
  }
  #sidebar-lock-btn:hover {
    color: var(--accent) !important;
    transform: scale(1.1);
  }

  /* Modal de Ajuste e Recorte de Foto de Perfil (Avatar Cropper) */
  .avatar-crop-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 16px;
    background: #090d16;
    border-radius: 14px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    cursor: grab;
    border: 1px solid var(--border);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.4);
  }
  .avatar-crop-container:active {
    cursor: grabbing;
  }
  .avatar-crop-canvas {
    width: 100%;
    height: 100%;
    display: block;
  }
  .avatar-crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.68);
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.95);
  }
  .avatar-crop-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
  }
  .avatar-crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .avatar-crop-zoom-row input[type="range"] {
    flex: 1;
    cursor: pointer;
    accent-color: var(--accent);
  }
  .avatar-crop-btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes fadeScaleIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } }

  #app-wrapper { display: none; width: 100%; flex: 1; flex-direction: row; animation: fadeIn 0.25s ease-out forwards; }
  .sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 16px 12px 14px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    overflow-x: hidden;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1), padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .logo { padding: 0 0 14px; border-bottom: none; display: flex; flex-direction: column; gap: 10px; transition: all 0.2s ease; overflow-x: hidden; }
  .sidebar-brand-header { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 2px 2px 10px; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; text-decoration: none; transition: all 0.2s ease; }
  .sidebar-brand-header:hover { opacity: 0.92; }
  .sidebar-brand-expanded { display: flex; align-items: center; gap: 8px; }
  .sidebar-brand-full-logo { height: 28px; width: auto; max-width: 145px; object-fit: contain; display: block; }
  .sidebar-brand-icon { display: none; width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
  .logo p { font-size: 0.72rem; font-weight: 500; color: var(--text3); margin-top: 0; text-align: left; }
  nav { flex: 1; padding: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 3px; }

  /* Cores temáticas individuais por item */
  #nav-btn-inicio { --btn-c: #2563eb; --btn-bg: rgba(37, 99, 235, 0.12); }
  #nav-btn-financas { --btn-c: #059669; --btn-bg: rgba(5, 150, 105, 0.12); }
  #nav-btn-cartao { --btn-c: #7c3aed; --btn-bg: rgba(124, 58, 237, 0.12); }
  #nav-btn-projetos { --btn-c: #d97706; --btn-bg: rgba(217, 119, 6, 0.12); }
  #nav-btn-familia { --btn-c: #0891b2; --btn-bg: rgba(8, 145, 178, 0.12); }
  #nav-btn-ajustes { --btn-c: #475569; --btn-bg: rgba(71, 85, 105, 0.12); }

  #nav-btn-cuide-senhas { --btn-c: #e11d48; --btn-bg: rgba(225, 29, 72, 0.12); }
  #nav-btn-cuide-agenda { --btn-c: #2563eb; --btn-bg: rgba(37, 99, 235, 0.12); }
  #nav-btn-cuide-agendamento { --btn-c: #0d9488; --btn-bg: rgba(13, 148, 136, 0.12); }
  #nav-btn-cuide-faturamento { --btn-c: #d97706; --btn-bg: rgba(217, 119, 6, 0.12); }
  #nav-btn-cuide-chamados { --btn-c: #4f46e5; --btn-bg: rgba(79, 70, 229, 0.12); }
  #nav-btn-cuide-materiais { --btn-c: #0284c7; --btn-bg: rgba(2, 132, 199, 0.12); }
  #nav-btn-cuide-posvisita { --btn-c: #9333ea; --btn-bg: rgba(147, 51, 234, 0.12); }

  .nav-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text2);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-btn .icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 7px;
    background: var(--btn-bg, rgba(37, 99, 235, 0.1));
    color: var(--btn-c, var(--accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .nav-btn .icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.85px;
    stroke: currentColor;
  }
  .nav-btn .nav-label {
    color: var(--text2);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.2s ease, font-weight 0.2s ease;
  }
  .nav-btn:hover:not(.active) {
    background: var(--surface2);
  }
  .nav-btn:hover:not(.active) .nav-label {
    color: var(--text);
  }
  .nav-btn:hover .icon {
    transform: scale(1.06);
  }

  /* Estado Ativo: Seleção Moderna Glassmorphism & Indicador sutil */
  .nav-btn.active {
    background: color-mix(in srgb, var(--btn-c, var(--accent)) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--btn-c, var(--accent)) 26%, transparent);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
  }
  .nav-btn.active .nav-label {
    color: var(--text);
    font-weight: 700;
  }
  .nav-btn.active .icon {
    background: var(--btn-c, var(--accent));
    color: #ffffff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--btn-c, var(--accent)) 40%, transparent);
    transform: scale(1.04);
  }
  .nav-btn.active::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--btn-c, var(--accent));
  }

  .sidebar-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; padding: 6px 12px; margin-top: 4px; border: none; border-top: 1px solid var(--border); background: transparent; color: var(--text3); font-family: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; border-radius: 0; transition: color 0.2s; }
  .sidebar-toggle:hover { color: var(--accent); }

  /* Sidebar recolhida: só ícones e avatar compacto, largura fixa menor */
  #app-wrapper.sidebar-collapsed .sidebar {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    padding: 16px 8px 14px;
    overflow-x: hidden !important;
  }
  #app-wrapper.sidebar-collapsed .main { margin-left: 68px; }
  #app-wrapper.sidebar-collapsed .logo { padding: 0 0 10px; align-items: center; justify-content: center; width: 100%; overflow: hidden; gap: 6px; }
  #app-wrapper.sidebar-collapsed .sidebar-brand-header { display: flex; justify-content: center; align-items: center; width: 100%; margin: 0 auto 6px; padding: 2px 0 8px; border-bottom: 1px solid var(--border); }
  #app-wrapper.sidebar-collapsed .sidebar-brand-icon { width: 34px; height: 34px; margin: 0 auto; display: block !important; object-fit: contain; }
  #app-wrapper.sidebar-collapsed .sidebar-brand-expanded { display: none !important; }
  
  /* Foto do usuário recolhida (tamanho proporcional aos ícones de navegação) */
  #app-wrapper.sidebar-collapsed .sidebar-header-widget {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto 4px;
    padding: 2px 0 6px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
  }
  #app-wrapper.sidebar-collapsed .sidebar-header-widget:hover {
    background: transparent;
    transform: none;
  }
  #app-wrapper.sidebar-collapsed .sidebar-user-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 0.75rem;
    border: 2px solid var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  #app-wrapper.sidebar-collapsed .sidebar-header-widget:hover .sidebar-user-avatar {
    transform: scale(1.08);
  }
  #app-wrapper.sidebar-collapsed .sidebar-user-info { display: none !important; }
  
  #app-wrapper.sidebar-collapsed nav {
    overflow-x: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #app-wrapper.sidebar-collapsed nav::-webkit-scrollbar {
    display: none;
  }
  #app-wrapper.sidebar-collapsed .nav-btn { justify-content: center; padding: 8px 0; gap: 0; width: 100%; }
  #app-wrapper.sidebar-collapsed .nav-btn .nav-label { display: none !important; }
  #app-wrapper.sidebar-collapsed .cuide-nav-divider { margin: 6px auto; width: 60%; }
  #app-wrapper.sidebar-collapsed .sidebar-toggle { width: 100%; padding: 8px 0; }
  #app-wrapper.sidebar-collapsed .sidebar-toggle span.label { display: none; }


  .main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
  .topbar {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    flex-wrap: wrap;
    gap: 10px;
  }
  .topbar-left { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
  .topbar-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .topbar-title h2 { font-size: 0.82rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 6px; color: var(--text2); }
  .app-name-brand { color: var(--text3); font-family: inherit; font-size: 0.82rem; font-weight: 600; }
  .app-name-brand span { color: var(--text3); }
  .title-separator { color: var(--border); font-weight: 400; font-size: 0.72rem; }
  .current-page-name { color: var(--text); font-size: 0.82rem; font-weight: 700; font-family: inherit;}


  .lock-badge { font-size: 0.58rem; padding: 2px 5px; border-radius: 4px; font-weight: 700; letter-spacing: 0.05em; background: var(--red); color: white; display: none; align-items: center; justify-content: center; margin-left: 4px; }
  .is-closed .lock-badge { display: inline-flex; }
  
  .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .month-nav { display: flex; align-items: center; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2px 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
  .month-nav button { background: transparent; border: none; color: var(--text2); padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .month-nav button:hover { background: var(--surface2); color: var(--text); }
  .month-nav span { font-size: 0.78rem; font-weight: 700; min-width: 84px; text-align: center; color: var(--text); letter-spacing: -0.01em; }
  
  .action-icon-btn { background: var(--surface); border: 1px solid var(--border); font-size: 0.95rem; cursor: pointer; border-radius: 8px; color: var(--text2); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
  .action-icon-btn:hover { background: var(--surface2); border-color: var(--accent); color: var(--text); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
  .action-icon-btn svg { width: 15px; height: 15px; }

  /* Ícones do topo ganham cor própria — a mesma linguagem das caixinhas
     coloridas do login/cards (feat-icon-box, kpi-label-icon), em vez do
     cinza grafite neutro que os 5 botões tinham em comum. #lock-btn usa
     currentColor porque o JS já alterna a cor dele (vermelho fechado /
     neutro aberto) — o tingimento do fundo só acompanha o que já existe.
     #bell-btn saiu do topbar (agora mora na sidebar, com cor própria via
     estilo inline) — o slot amarelo que era dele passou pra #favoritos-btn. */
  #favoritos-btn, .topbar-right .action-icon-btn[title="Manual de Uso"], #lock-btn, #theme-btn, #btn-sair-topbar {
    background: color-mix(in srgb, currentColor 12%, var(--surface));
    border-color: color-mix(in srgb, currentColor 30%, var(--border));
  }
  #favoritos-btn:hover, .topbar-right .action-icon-btn[title="Manual de Uso"]:hover, #lock-btn:hover, #theme-btn:hover, #btn-sair-topbar:hover {
    background: color-mix(in srgb, currentColor 24%, var(--surface));
    border-color: currentColor;
  }
  #favoritos-btn { color: var(--yellow); }
  .topbar-right .action-icon-btn[title="Manual de Uso"] { color: var(--blue); }
  #theme-btn { color: var(--purple); }
  #btn-sair-topbar:hover { color: var(--red); }

  .page { display: none; padding: 18px 24px; flex: 1; }
  .page.active { display: block; }


  .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
  .kpi-card {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
  }
  .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--kpi-color, var(--accent)), transparent); border-radius: 3px 3px 0 0; z-index: 1; }
  .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--kpi-color, var(--accent)); }
  .kpi-card::after { display: none; }
  .kpi-label { font-size: 0.72rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; font-weight: 700; overflow-wrap: break-word; display: flex; align-items: center; justify-content: space-between; }
  .kpi-label-icon { font-size: 0.82rem; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kpi-color, var(--accent)) 12%, transparent); color: var(--kpi-color, var(--text2)); transition: transform 0.3s ease; }
  .kpi-card:hover .kpi-label-icon { transform: scale(1.08); }
  .kpi-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; color: var(--text); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; overflow-wrap: break-word; margin-bottom: 0; }
  .kpi-trend { font-size: 0.72rem; display:flex; align-items:center; gap:5px; margin-top: 8px; font-weight:600; flex-wrap: wrap; padding-top: 0; border-top: none; }
  .trend-neutral { color: var(--text3); font-weight: 500; font-size: 0.72rem; }
  #op-kpi-grid .kpi-card { border: 1px solid var(--border); }


  .charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
  .chart-card {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    min-width: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .chart-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
  .chart-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; color: var(--text); margin-bottom: 14px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; }
  
  .chart-filters { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; align-items: center; justify-content: space-between; }
  .chart-filter-group { display: flex; align-items: center; gap: 8px; }
  .chart-filter-label { font-size: 0.72rem; font-weight: 700; color: var(--text2); white-space: nowrap; letter-spacing: -0.01em; }
  .chart-filter-sel { width: auto; padding: 5px 10px; font-size: 0.78rem; border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: inherit; cursor: pointer; font-weight: 600; transition: border-color 0.15s; }
  .chart-filter-sel:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
  .chart-wrap { position: relative; height: 210px; width: 100%; overflow: hidden; }

  /* ── Dashboard Book View (Lâminas sem rolagem / Modo Livro) ── */
  #page-dashboard {
    padding: 10px 18px 14px;
  }
  #page-dashboard .control-bar {
    margin-bottom: 8px;
    padding: 5px 10px;
  }
  #page-dashboard #tabs-dashboard {
    margin-bottom: 8px !important;
  }
  #page-dashboard .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
  }
  #page-dashboard .kpi-card {
    padding: 10px 14px;
    border-radius: 10px;
  }
  #page-dashboard .kpi-label {
    font-size: 0.68rem;
    margin-bottom: 3px;
  }
  #page-dashboard .kpi-value {
    font-size: 1.18rem;
  }
  #page-dashboard .kpi-trend {
    margin-top: 4px;
    font-size: 0.68rem;
  }
  .dash-book-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
    width: 100%;
  }
  .dash-book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
  }
  .dash-book-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }
  .dash-book-tab-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .dash-book-tab-btn:hover {
    background: var(--surface3);
    color: var(--text);
  }
  .dash-book-tab-btn.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .dash-book-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .dash-book-nav-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
  }
  .dash-book-nav-btn:hover {
    background: var(--surface3);
    border-color: var(--accent);
  }
  .dash-book-page-indicator {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text3);
    padding: 0 4px;
  }
  .dash-book-viewport {
    position: relative;
    width: 100%;
    min-height: 240px;
  }
  .dash-book-slide,
  .dash-slide {
    display: none;
    width: 100%;
    animation: dashSlideFade 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .dash-book-slide.active,
  .dash-slide.active {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .dash-book-slide > .dash-widget-wrap:only-child,
  .dash-slide > .dash-widget-wrap:only-child,
  .dash-widget-wrap[data-widget-id="widget_dre_dinamica"],
  .dash-widget-wrap[data-widget-id="widget_proj_matriz"] {
    grid-column: 1 / -1;
    width: 100%;
  }
  .dash-book-slide .chart-card,
  .dash-slide .chart-card {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .dash-book-slide .chart-card h3,
  .dash-slide .chart-card h3 {
    margin-bottom: 8px;
    font-size: 0.78rem;
  }
  .dash-book-slide .chart-wrap,
  .dash-slide .chart-wrap {
    height: 185px;
    flex: 0 0 185px;
  }
  .dash-book-slide .card,
  .dash-slide .card {
    border-radius: 10px;
    margin-bottom: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .dash-book-slide .card-header,
  .dash-slide .card-header {
    padding: 8px 14px;
  }
  .dash-book-slide .card-header h3,
  .dash-slide .card-header h3 {
    font-size: 0.8rem;
  }
  .dash-book-slide .card-body,
  .dash-slide .card-body {
    padding: 12px 14px;
    flex: 1;
  }
  @keyframes dashSlideFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Modo Contínuo: exibe todas as lâminas empilhadas */
  .dash-continuous-mode .dash-book-header {
    display: none;
  }
  .dash-continuous-mode .dash-book-slide,
  .dash-continuous-mode .dash-slide {
    display: grid !important;
    margin-bottom: 16px;
  }

  /* Control Bar (Barra Unificada de Ferramentas e Filtros) */
  .control-bar {
    display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
    padding: 8px 12px; background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    align-items: center; position: relative; overflow: visible;
  }
  
  .control-bar .cb-btn {
    border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 6px 12px; border-radius: 7px;
    font-weight: 600; transition: all 0.2s; font-size: 0.78rem; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  }
  .control-bar .cb-btn:hover { transform: translateY(-1px); background: var(--surface3); border-color: var(--accent); }
  
  .control-bar .cb-btn.btn-executivo,
  .control-bar .cb-btn.cb-btn-premium {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, var(--surface)) 0%, color-mix(in srgb, var(--purple) 15%, var(--surface2)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 15%, transparent);
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .control-bar .cb-btn.btn-executivo:hover,
  .control-bar .cb-btn.cb-btn-premium:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--surface)) 0%, color-mix(in srgb, var(--purple) 25%, var(--surface2)) 100%);
    border-color: var(--accent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .cb-badge-pill {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 0.64rem;
    padding: 1.5px 5.5px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.4px;
    margin-left: 2px;
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.35);
  }

  /* Modal de Customização de Dashboard / Lâminas */
  .dash-cust-slide-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    transition: border-color 0.2s;
  }
  .dash-cust-slide-card:hover {
    border-color: var(--accent);
  }
  .dash-cust-slide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .dash-cust-slots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .dash-cust-slot {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .dash-cust-slot.full-width {
    grid-column: 1 / -1;
  }
  .dash-cust-slot-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .dash-cust-select {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 600;
    outline: none;
  }
  .dash-cust-select:focus {
    border-color: var(--accent);
  }
  .dash-cust-presets {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .dash-cust-preset-btn {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
  }
  .dash-cust-preset-btn:hover {
    background: var(--surface3);
    color: var(--accent);
    border-color: var(--accent);
  }
  
  .control-bar .cb-export {
    padding: 6px 12px; font-weight: 600; font-size: 0.78rem; background: var(--surface2); border: 1px solid var(--border); 
    border-radius: 7px; color: var(--text); cursor: pointer; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  }
  .control-bar .cb-export:hover { background: var(--surface3); border-color: var(--accent); }
  
  .control-bar .chart-filter-group { border-left: 1px solid var(--border); padding-left: 12px; margin-left: 4px; }
  .control-bar .chart-filter-group:first-of-type { border-left: none; padding-left: 0; margin-left: 0; }
  .control-bar .chart-filter-label { font-size: 0.72rem; font-weight: 600; color: var(--text2); display:flex; align-items:center; gap:5px; margin-bottom: 0; }
  .control-bar .chart-filter-sel { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 0.78rem; font-weight: 600; color: var(--text); cursor: pointer; outline: none; transition: border-color 0.2s; }
  .control-bar .chart-filter-sel:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }

  .reports-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
  .reports-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
  .reports-group-label { font-size: 0.72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; white-space: nowrap; }
  .report-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.04); white-space: nowrap; }
  .report-btn:hover { background: var(--surface2); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(59,130,246,0.15); color: var(--accent); }
  .report-btn.btn-executivo { background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); color: #fff; border: none; box-shadow: 0 4px 12px rgba(124,58,237,0.35); }
  .report-btn.btn-executivo:hover { transform: translateY(-1px); color: #fff; }
  .report-btn .report-btn-icon { font-size: 0.95rem; }

  /* Dropdown de Exportação */
  .export-dropdown-wrap { position: relative; display: inline-block; }
  .export-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 9999;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0
    8px 28px rgba(0,0,0,0.22); min-width: 280px; overflow: hidden; }
  .export-dropdown-menu.open { display: block; }
  .export-dropdown-section { padding: 4px 0; }
  .export-dropdown-section + .export-dropdown-section { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 2px; }
  .export-dropdown-label { font-size: 0.65rem; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px 3px; }
  .edi-row { display: flex; align-items: center; width: 100%; padding: 6px 12px; border-top: 1px solid var(--border); cursor: default; }
  .edi-row:first-child { border-top: none; }
  .edi-row:hover { background: var(--surface2); }
  .edi-row-icon { font-size: 0.88rem; width: 22px; flex-shrink: 0; text-align: center; }
  .edi-row-name { flex: 1; font-size: 0.78rem; font-weight: 500; color: var(--text); line-height: 1.25; padding: 0 6px; cursor: pointer; }
  .edi-row-name:hover { color: var(--accent); text-decoration: underline; }
  .edi-row-badges { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
  .edi-badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 0.65rem; font-weight: 900; color: #fff; cursor: pointer; border: none; font-family: inherit; letter-spacing: 0.03em; transition: opacity 0.15s, transform 0.1s; }
  .edi-badge:hover { opacity: 0.85; transform: scale(1.05); }
  .edi-badge.pdf { background: #e53e3e; }
  .edi-badge.ppt { background: #7c6af7; }
  .edi-badge.xls { background: #1d6f42; }
  .export-dropdown-item { display: none !important; }


  /* M3 e Skeletons */
  .filters-wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .filter-sel { padding: 7px 12px; font-size: 0.82rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.2s; outline: none; width: auto; flex: 0 0 auto; }
  .view-toggle { display: flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; flex: 0 0 auto; }
  .view-toggle-btn { border: none; background: transparent; color: var(--text3); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.78rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s; }
  /* Preenchimento sólido (var(--accent) + texto branco) fazia o botão ativo
     parecer "inchado"/desalinhado ao lado dos vizinhos sem preenchimento —
     conferido via getBoundingClientRect() na Agenda, as medidas batem
     certinho (30px de altura em todos), era só ilusão de ótica pelo
     contraste forte de cor. Suavizado pro mesmo tom translúcido do resto
     da barra de filtros, sem esse efeito. */
  .view-toggle-btn.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
  .view-toggle-btn:not(.active):hover { background: var(--surface3); color: var(--text); }
  .agenda-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .agenda-weekday { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--text3); text-transform: uppercase; padding: 4px 0 8px; }
  .agenda-day { min-height: 76px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
  .agenda-day:hover { border-color: var(--accent); background: var(--surface2); }
  .agenda-day.empty { visibility: hidden; pointer-events: none; }
  .agenda-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
  .agenda-day-num { font-size: 0.78rem; font-weight: 700; color: var(--text2); }
  .agenda-day-dots { display: flex; gap: 3px; flex-wrap: wrap; }
  .agenda-day-dot { width: 6px; height: 6px; border-radius: 50%; }
  .agenda-day-total { font-size: 0.65rem; font-weight: 700; margin-top: auto; }
  .filter-sel:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,106,247,0.15); }
  .icon-search { display: flex; align-items: center; }
  .icon-search-input { width: 0; min-width: 0; padding: 0; margin-left: 0; border: 1px solid transparent; background: var(--surface2); color: var(--text); border-radius: 8px; font-size: 0.82rem; font-family: 'Plus Jakarta Sans', sans-serif; outline: none; opacity: 0; transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease, margin-left 0.2s ease; }
  .icon-search-input.show { width: 170px; padding: 7px 10px; margin-left: 6px; opacity: 1; border-color: var(--border); }
  .icon-search-input.show:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,106,247,0.15); }
  
  .chart-skeleton { position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%); background-size: 200% 100%; animation: skeletonLoading 1.5s infinite; border-radius: 8px; z-index: 1; pointer-events: none;}
  @keyframes skeletonLoading { from { background-position: 200% 0; } to { background-position: -200% 0; } }
  .chart-loaded .chart-skeleton { display: none; }


  .card {
    background: var(--surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: var(--shadow-md);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .card-header {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent;
  }
  .card-header h3, .card-header h4 { font-size: 0.88rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
  .card-body { padding: 0; overflow-x: auto; background: transparent; }
  table { width: 100%; border-collapse: collapse; min-width: 0; }
  thead th {
    padding: 9px 16px;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text3);
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
  }
  tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s ease; }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: var(--surface2); }
  td { padding: 10px 16px; font-size: 0.82rem; font-weight: 500; color: var(--text2); }


  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    padding: 2.5px 8px;
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.35;
    border: 1px solid transparent;
  }
  .badge-green { background: rgba(16, 185, 129, 0.12); color: var(--green); border-color: rgba(16, 185, 129, 0.22); }
  .badge-red { background: rgba(244, 63, 94, 0.12); color: var(--red); border-color: rgba(244, 63, 94, 0.22); }
  .badge-yellow { background: rgba(245, 158, 11, 0.12); color: var(--yellow); border-color: rgba(245, 158, 11, 0.22); }
  .badge-blue { background: rgba(56, 189, 248, 0.12); color: var(--blue); border-color: rgba(56, 189, 248, 0.22); }
  .badge-purple { background: rgba(139, 92, 246, 0.12); color: var(--purple); border-color: rgba(139, 92, 246, 0.22); }
  .badge-gray { background: var(--surface2); color: var(--text3); border-color: var(--border); }


  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
  }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
  .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35); }
  .btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
  .btn-outline:hover:not(:disabled) { background: var(--surface2); border-color: var(--border); color: var(--text); transform: translateY(-1px); }
  .btn-whatsapp { background: #25d366; color: #fff; border: none; display: flex; align-items: center; gap: 5px; }
  .btn-whatsapp:hover:not(:disabled) { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(37, 211, 102, 0.35); }
  .btn-whatsapp-icon { flex: 0 0 auto; width: 36px; padding: 0; justify-content: center; }
  .tx-btn-whatsapp { background: #25d366 !important; color: #fff !important; display: inline-flex; align-items: center; justify-content: center; }
  .btn-danger { background: rgba(244, 63, 94, 0.12); color: var(--red); border: 1px solid rgba(244, 63, 94, 0.25); }
  .btn-danger:hover:not(:disabled) { background: rgba(244, 63, 94, 0.22); border-color: rgba(244, 63, 94, 0.4); transform: translateY(-1px); }
  .btn-sm { padding: 4px 8px; font-size: 0.72rem; border-radius: 5px; }
  .ajustes-btn-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .ajustes-btn-row > .btn { width: auto !important; flex: 1 1 90px; padding: 7px 8px !important; font-size: 0.78rem !important; white-space: nowrap; min-width: 80px; }
  .btn-green { background: rgba(16, 185, 129, 0.12); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.25); }
  .btn-green:hover:not(:disabled) { background: rgba(16, 185, 129, 0.22); transform: translateY(-1px); }
  /* Mesma receita de .btn-danger/.btn-green (fundo translúcido + borda +
     texto na cor), só que pras duas cores que a barra da Agenda usava sólidas
     e sem token — Hoje (amarelo/laranja) e Aniversariantes (rosa). */
  .btn-yellow { background: rgba(245, 158, 11, 0.12); color: var(--yellow); border: 1px solid rgba(245, 158, 11, 0.25); }
  .btn-yellow:hover:not(:disabled) { background: rgba(245, 158, 11, 0.22); transform: translateY(-1px); }
  .btn-pink { background: rgba(236, 72, 153, 0.12); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.25); }
  .btn-pink:hover:not(:disabled) { background: rgba(236, 72, 153, 0.22); transform: translateY(-1px); }
  .btn-whatsapp-soft { background: rgba(37, 211, 102, 0.12); color: #25D366; border: 1px solid rgba(37, 211, 102, 0.28); }
  .btn-whatsapp-soft:hover:not(:disabled) { background: rgba(37, 211, 102, 0.22); transform: translateY(-1px); }

  /* Botão "Limpar filtros" da Agenda — nasce só o ✕ (com a contagem de
     ocultas numa bolinha), expande ao passar o mouse revelando o texto
     completo. Antes era sempre um bloco amarelo sólido com texto fixo,
     brigando visualmente com o resto da barra. */
  .btn-limpar-filtros {
    position: relative;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--yellow);
    width: 30px;
    height: 30px;
    max-width: 30px;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    white-space: nowrap;
    justify-content: flex-start;
    transition: max-width 0.22s ease, background 0.15s ease;
  }
  .btn-limpar-filtros:hover { max-width: 260px; width: auto; background: rgba(245, 158, 11, 0.2); }
  .btn-limpar-filtros .lf-x { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
  .btn-limpar-filtros .lf-texto { opacity: 0; transition: opacity 0.15s ease 0.05s; padding-right: 10px; font-size: 0.72rem; font-weight: 700; }
  .btn-limpar-filtros:hover .lf-texto { opacity: 1; }
  .btn-limpar-filtros .lf-dot {
    position: absolute; top: 2px; right: 2px; min-width: 13px; height: 13px; padding: 0 2px;
    border-radius: 8px; background: var(--yellow); color: #111; font-size: 0.55rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  }
  .btn-limpar-filtros:hover .lf-dot { display: none; }

  .btn-action-group { display: flex; gap: 5px; justify-content: flex-end; }


  .tx-list { display: flex; flex-direction: column; gap: 0; }
  .tx-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .tx-card:last-child { border-bottom: none; }
  .tx-card:hover { background: var(--surface2); }
  .tx-card.tx-card-pago { background: rgba(16, 185, 129, 0.04); }
  .tx-card.tx-card-pago:hover { background: rgba(16, 185, 129, 0.08); }
  .tx-card-left { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 10px; }
  .tx-card-right { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; }
  .tx-desc { font-weight: 600; font-size: 0.88rem; word-break: break-word; line-height: 1.35; color: var(--text); }
  .tx-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  .tx-date { font-size: 0.72rem; color: var(--text3); font-weight: 600; opacity: 1; }
  .tx-cat { font-size: 0.72rem; font-weight: 600; color: var(--text2); opacity: 1;}
  .tx-status-badge { font-size: 0.65rem; padding: 2px 7px; border-radius: 9999px; font-weight: 700; }
  .tx-valor { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; font-weight: 750; white-space: nowrap; display: flex; align-items: center; color: var(--text); letter-spacing: -0.02em; }
  .tx-actions { display: flex; gap: 5px; align-items: center; }
  .tx-btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; cursor: pointer; font-size: 0.72rem; font-weight: 700; padding: 5px 8px; transition: all 0.15s; white-space: nowrap; gap: 3px; font-family: inherit; }
  .tx-btn-baixa { background: rgba(16, 185, 129, 0.14); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.28); }
  .tx-btn-baixa:hover { background: rgba(16, 185, 129, 0.26); }
  .tx-btn-desfaz { background: rgba(245, 158, 11, 0.14); color: var(--yellow); border: 1px solid rgba(245, 158, 11, 0.28); }
  .tx-btn-desfaz:hover { background: rgba(245, 158, 11, 0.26); }
  .tx-btn-edit { background: var(--surface3); color: var(--text2); border: 1px solid var(--border); }
  .tx-btn-edit:hover { background: var(--surface2); color: var(--text); }
  .tx-btn-del { background: rgba(244, 63, 94, 0.12); color: var(--red); border: 1px solid rgba(244, 63, 94, 0.2); }
  .tx-btn-del:hover { background: rgba(244, 63, 94, 0.25); }


  .pend-card { display: grid; grid-template-columns: 1fr auto; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--border); gap: 10px; transition: background 0.15s; }
  .pend-card:last-child { border-bottom: none; }
  .pend-card:hover { background: var(--surface2); }
  .pend-card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .pend-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .pend-venc { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(245, 158, 11, 0.15); color: var(--yellow); display: inline-block; }
  .pend-venc.vencido { background: rgba(244, 63, 94, 0.15); color: var(--red); }
  .pend-venc.hoje { background: rgba(59, 130, 246, 0.15); color: var(--accent); }


  .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
  .form-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; text-align: left; }
  .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
  label { font-size: 0.72rem; color: var(--text3); font-weight: 600; letter-spacing: 0.01em; }
  input, select, textarea {
    font-family: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.82rem;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    font-weight: 500;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    background: var(--surface-solid);
  }
  .checkbox-wrapper { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 0; font-weight: 500;}
  .checkbox-wrapper input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }

  /* Balão de ajuda contextual (botão "?" ao lado de rótulos de campo) —
     usado no Perfil do Usuário pra explicar o impacto de cada opção sem
     precisar de outra tela. */
  .info-help-wrap { position: relative; display: inline-flex; vertical-align: middle; }
  .info-help-btn {
    width: 16px; height: 16px; border-radius: 50%; margin-left: 5px;
    background: var(--surface3); color: var(--text3); border: 1px solid var(--border);
    font-size: 10px; font-weight: 800; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
  }
  .info-help-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .info-popover {
    display: none; position: absolute; top: 22px; left: 0; z-index: 60;
    width: 260px; max-width: 70vw; background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    font-size: 0.74rem; line-height: 1.55; color: var(--text2); font-weight: 400;
  }
  .info-popover b { color: var(--text); }


  .modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
  }
  /* opacity fora da animação, de propósito — visto ao vivo: com a aba sob pressão de CPU
     (reCAPTCHA/App Check disputando o main thread), a animação fadeScaleIn ficava presa
     rodando pra sempre no quadro inicial (opacity:0), com display:flex certo mas o modal
     invisível. Animação (que anima só o transform, não a opacity) fica só de efeito
     cosmético de entrada — se ela travar, o pior caso é o modal nascer 4px deslocado,
     nunca invisível, porque a opacity nunca depende dela terminar. */
  .modal-overlay.open { display: flex; opacity: 1; animation: modalOverlaySlideIn 0.2s ease-out forwards; }
  @keyframes modalOverlaySlideIn { from { transform: translateY(4px); } to { transform: translateY(0); } }
  .modal {
    background: var(--surface-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 24px 0 24px;
    width: 600px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .modal-close-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    font-size: 0.88rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.2s;
  }
  .modal-close-x:hover { background: var(--red); color: #fff; border-color: var(--red); transform: rotate(90deg) scale(1.05); }
  .modal h2 { font-size: 1.05rem; margin-bottom: 16px; font-weight: 700; color: var(--text); text-align: left; flex-shrink: 0; letter-spacing: -0.02em; }
  .modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: auto;
    padding: 14px 0 20px 0;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    background: var(--surface-solid);
    z-index: 10;
  }


  .row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
  .flex-between { display: flex; align-items: center; justify-content: space-between; }
  .amount-positive { color: var(--green); font-weight: 700; }
  .amount-negative { color: var(--red); font-weight: 700; }
  .empty-state { text-align: center; padding: 48px 20px; color: var(--text3); font-size: 0.88rem; font-weight: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .empty-state .icon { font-size: 3rem; margin-bottom: 12px; opacity: 0.4; filter: grayscale(100%); transition: opacity 0.3s; }
  .empty-state:hover .icon { opacity: 0.6; }
  
  /* Cores padronizadas para Abas e Sub-abas: Cinza Escuro Grafite */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text2);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .tab-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface2) 60%, transparent);
  }
  .tab-btn.active {
    /* Sem preenchimento — só o texto na cor de destaque da própria página
       (--tab-accent, definido por #tabs-* mais abaixo) e o risco embaixo
       (.tab-btn.active::after, mais adiante no arquivo) já bastam pra
       marcar a aba ativa, sem duplicar o mesmo sinal com um fundo. */
    color: var(--tab-accent);
    background: transparent;
    font-weight: 700;
  }
  .tab-btn .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.85;
    transition: opacity 0.18s ease;
  }
  .tab-btn.active .tab-icon {
    opacity: 1;
    color: currentColor;
  }
  .tab-btn .tab-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    display: block;
  }
  .tab-content { display: none; }
  .tab-content.active { display: block; animation: fadeScaleIn 0.25s ease-out forwards; }
  /* Sub-abas de Social e ESG (social.js) usam classe própria em vez de
     .tab-content — nunca tiveram a regra de exibição correspondente. Sem
     isto, as 4 sub-abas (Análise de Benefícios, Atendimentos & Demandas,
     Saúde Mental & RSC, Legislação & Parâmetros) ficavam com display:block
     sempre, empilhadas na tela ao mesmo tempo — showSubTabSocial() já
     alternava a classe .active corretamente, só não existia CSS nenhum
     reagindo a ela. */
  .tab-social-content { display: none; }
  .tab-social-content.active { display: block; animation: fadeScaleIn 0.25s ease-out forwards; }


  .flex { display: flex; align-items: center; gap: 10px; }
  .member-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 700; overflow: hidden; }


  .member-card { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid var(--border); align-items: flex-start; transition: background 0.15s; }
  .member-card:last-child { border-bottom: none; }
  .member-card:hover { background: var(--surface2); }
  .member-card-avatar { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; overflow: hidden; }
  .member-card-body { flex: 1; min-width: 0; }
  .member-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
  .member-card-name { font-weight: 700; font-size: 0.95rem; }
  .member-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .member-card-email { font-size: 0.72rem; color: var(--text3); }
  .member-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .member-stat { background: var(--surface2); border-radius: 8px; padding: 8px 10px; text-align: center; }
  .member-stat-label { display: block; font-size: 0.65rem; color: var(--text3); text-transform: uppercase; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.04em; }
  .member-stat-val { display: block; font-size: 0.82rem; font-weight: 700; }


  .divisao-inline { background: var(--surface2); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
  .tx-card-pago .divisao-inline { background: rgba(34,211,161,0.14); }
  .divisao-inline-title { font-size: 0.72rem; color: var(--text3); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.04em; }
  .divisao-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 0.82rem; }
  .divisao-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
  .split-name { flex: 1; font-weight: 600; font-size: 0.95rem; }
  .divisao-name { flex: 1; font-weight: 600; }
  .divisao-pct { color: var(--text3); font-size: 0.72rem; }
  .divisao-val { font-weight: 700; color: var(--red); font-size: 0.82rem; }
  .split-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .split-row:last-child { border-bottom: none; }


  .toast-wrap { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; align-items: center; }
  .toast { background: rgba(30, 41, 59, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); color: #f8fafc; padding: 14px 24px; border-radius: 100px; font-size: 0.95rem; font-weight:600; animation: toastSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, toastFadeOut 0.4s ease 2.4s forwards; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 90vw; text-align: center; }
  .toast .icon { font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
  @keyframes toastSlideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes toastFadeOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(20px); opacity: 0; } }


  .is-closed .hide-if-closed { opacity: 0.3; pointer-events: none; filter: grayscale(100%); }
  .is-closed #page-familia .hide-if-closed,
  .is-closed #page-categorias .hide-if-closed,
  .is-closed #tab-fixas .hide-if-closed { opacity: 1 !important; pointer-events: auto !important; filter: none !important; }


  .tut-step { display: none; text-align: center; padding: 10px 0; }
  .tut-step h2 { font-size: 1.35rem; color: var(--accent); margin-bottom: 16px; }
  .tut-step p { font-size: 0.95rem; color: var(--text2); line-height: 1.5; margin-bottom: 10px; }


  /* Regras estritas de ocultação para Cuide quando desativado ou Plano Pessoal */
  .nav-btn-cuide[style*="display: none"],
  .nav-btn-cuide[style*="display:none"],
  #cuide-nav-divider[style*="display: none"],
  #cuide-nav-divider[style*="display:none"] {
    display: none !important;
  }

  /* Botões nativos ocultados via JS (ex.: Cartões no plano Empresa, Projetos
     quando o módulo está desligado) não podem reaparecer por causa do
     "display:flex !important" do layout do menu no celular — o atributo
     style permanece a fonte da verdade mesmo dentro do media query mobile. */
  body #app-wrapper .nav-btn[style*="display: none"],
  body #app-wrapper .nav-btn[style*="display:none"] {
    display: none !important;
  }

  /* Prevenção global contra quebra de valores nos KPI cards e Pendências */
  .kpi-value, .amount-positive, .amount-negative {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-variant-numeric: tabular-nums !important;
  }
  #kpi-a-receber, #kpi-vencidos {
    white-space: nowrap !important;
    word-break: keep-all !important;
    font-size: clamp(0.82rem, 3.2vw, 1.1rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .kpi-card div { min-width: 0; }

  /* ===================================================================
     CAMADA "NOTEBOOK" — cobre a faixa entre desktop grande e o layout
     mobile de baixo (768px): telas de 1024–1440px, o intervalo mais comum
     de notebook, que antes não tinha NENHUM ajuste — a sidebar continuava
     fixa em 240px e o padding das páginas era o mesmo de uma tela de
     27". Aqui só se reduz densidade (largura da sidebar, respiro das
     páginas); nenhum componente muda de layout — isso só acontece a
     partir de 768px.
     =================================================================== */
  @media (max-width: 1440px) and (min-width: 769px) {
    .sidebar { width: 208px; min-width: 208px; }
    .main { margin-left: 208px; }
    .page { padding: 16px 18px; }
    .topbar { padding: 10px 18px; }
  }

  /* Modal "Nova Análise de Benefícios" (módulo Social): grid de 2 colunas
     fixo demais pro seu próprio max-width de 960px — sem isso ele nunca
     colapsa, nem em celular. !important porque o grid nasce como estilo
     inline no HTML gerado pelo JS. */
  @media (max-width: 900px) {
    .analise-beneficio-grid { grid-template-columns: 1fr !important; }
    .analise-beneficio-diagnostico {
      border-left: none !important;
      padding-left: 0 !important;
      border-top: 1px solid var(--border) !important;
      padding-top: 16px !important;
      margin-top: 4px !important;
    }
  }

  @media (max-width: 768px) {
    html { font-size: 14px; }

    /* Rede de segurança: várias telas (modais de formulário, cards do
       módulo Social, KPIs em grade) montam grids de 2+ colunas como estilo
       inline (`style="display:grid;grid-template-columns:..."`) direto no
       HTML gerado em JS — nenhuma delas colapsa sozinha em celular, porque
       media query não alcança estilo inline. Em vez de caçar e corrigir
       cada uma manualmente (o que já rendeu pelo menos um bug real, ver
       .analise-beneficio-grid acima), essa regra pega TODAS de uma vez.
       As duas exceções são propositais: o quadro Kanban de Processos
       (rolagem horizontal, não empilhar colunas) e o Painel TV de Senhas
       (tela grande de recepção, nunca vista em celular). */
    [style*="grid-template-columns"]:not(#kanban-processos-base *):not(#modal-painel-tv-senhas *) {
      grid-template-columns: 1fr !important;
    }

    #app-wrapper .sidebar { width: 100% !important; min-width: 100% !important; height: 58px !important; min-height: 58px !important; position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; border-right: none !important; border-top: 1px solid var(--border) !important; flex-direction: row !important; z-index: 10000 !important; padding: 0 !important; padding-bottom: max(env(safe-area-inset-bottom), 2px) !important; background: var(--surface) !important; box-shadow: 0 -4px 16px rgba(0,0,0,0.15) !important; }
    #app-wrapper .logo { display: none !important; }
    /* Recolher-a-ícones é recurso só de desktop (sidebar vertical); no mobile a
       barra já é horizontal/compacta por padrão, então o botão fica escondido
       e a barra volta a se comportar como antes desse recurso existir. */
    .sidebar-toggle { display: none !important; }
    #app-wrapper.sidebar-collapsed .main { margin-left: 0 !important; }
    #app-wrapper nav { display: flex !important; flex-direction: row !important; padding: 0 4px !important; width: 100% !important; height: 100% !important; align-items: center !important; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; gap: 0 !important; }
    #app-wrapper nav::-webkit-scrollbar { display: none !important; }

    /* Botões MiContas Padrão: Início/Finanças/Usuário/Ajustes são fixos (4);
       Cartões (Pessoal) e Projetos (Empresa) são mutuamente exclusivos e
       condicionais — cada um, quando visível, soma +1 ao divisor da largura.
       O :has() precisa checar as duas grafias do atributo style ("display:none"
       sem espaço vem direto do HTML estático; "display: none;" com espaço é
       o que o navegador grava quando o JS seta style.display via CSSOM) —
       senão o botão é tratado como "visível" mesmo escondido e o divisor erra,
       sobrando espaço na barra e deixando os ícones do Cuide vazarem pra
       dentro da primeira dobra. Sem um max-width travando isso, cada botão
       herda width:100% do .nav-btn de desktop e ocupa a barra inteira sozinho
       — foi exatamente esse bug que fez sumir tudo menos o Início.
       */
    #app-wrapper .nav-btn:not(.nav-btn-cuide) { display: flex !important; flex: 0 0 calc((100vw - 8px) / 4) !important; max-width: calc((100vw - 8px) / 4) !important; height: 50px !important; flex-direction: column !important; gap: 1px !important; margin: 0 !important; padding: 4px 1px !important; justify-content: center !important; align-items: center !important; text-align: center !important; border-radius: 8px !important; border-bottom: none !important; background: transparent !important; flex-shrink: 0 !important; scroll-snap-align: start !important; transition: background 0.15s ease, color 0.15s ease !important; }
    #app-wrapper nav:has(#nav-btn-cartao:not([style*="display:none"]):not([style*="display: none"])) .nav-btn:not(.nav-btn-cuide),
    #app-wrapper nav:has(#nav-btn-projetos:not([style*="display:none"]):not([style*="display: none"])) .nav-btn:not(.nav-btn-cuide) {
      flex: 0 0 calc((100vw - 8px) / 5) !important; max-width: calc((100vw - 8px) / 5) !important;
    }

    #app-wrapper .nav-btn .icon { width: 26px !important; height: 26px !important; min-width: 26px !important; border-radius: 7px !important; line-height: 1 !important; margin: 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
    #app-wrapper .nav-btn .icon svg { width: 15px !important; height: 15px !important; }
    #app-wrapper .nav-btn .nav-label { display: block !important; font-size: 0.58rem !important; font-weight: 600 !important; line-height: 1.1 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; margin-top: 2px !important; letter-spacing: -0.03em !important; }
    #app-wrapper .nav-btn.active { background: color-mix(in srgb, var(--btn-c, var(--accent)) 14%, transparent) !important; color: var(--btn-c, var(--accent)) !important; font-weight: 700 !important; border-color: transparent !important; box-shadow: none !important; }
    #app-wrapper .nav-btn.active::before { display: none !important; }
    #app-wrapper .nav-btn.active .icon { background: var(--btn-c, var(--accent)) !important; color: #fff !important; }

    /* Divisória do Cuide: linha vertical elegante em gradiente */
    #app-wrapper .cuide-nav-divider { width: 2px !important; min-width: 2px !important; height: 30px !important; margin: 0 8px !important; background: linear-gradient(180deg, transparent, var(--accent), transparent) !important; border: none !important; opacity: 0.7 !important; flex-shrink: 0 !important; scroll-snap-align: start !important; }

    /* Módulos do CUIDE: Ficam 100% ocultos à direita na primeira dobra e só aparecem ao deslizar/arrastar */
    #app-wrapper .nav-btn-cuide:not(.cuide-nav-divider) { display: flex !important; flex: 0 0 60px !important; min-width: 60px !important; height: 48px !important; flex-direction: column !important; gap: 1px !important; margin: 0 2px !important; padding: 4px 2px !important; justify-content: center !important; align-items: center !important; text-align: center !important; border-radius: 10px !important; background: rgba(124, 106, 247, 0.08) !important; border: 1px solid rgba(124, 106, 247, 0.18) !important; flex-shrink: 0 !important; scroll-snap-align: start !important; }
    #app-wrapper .nav-btn-cuide:not(.cuide-nav-divider) .nav-label { color: var(--accent) !important; font-weight: 600 !important; }
    #app-wrapper .nav-btn-cuide.active { background: var(--btn-c, var(--accent)) !important; color: #fff !important; }
    #app-wrapper .nav-btn-cuide.active .nav-label { color: #fff !important; }

    /* Menu de Exportação responsivo no celular (Bottom Sheet) */
    .export-dropdown-menu {
      position: fixed !important;
      top: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100vw !important;
      min-width: 100vw !important;
      max-width: 100vw !important;
      max-height: 80vh !important;
      overflow-y: auto !important;
      border-radius: 20px 20px 0 0 !important;
      border: 1px solid var(--border) !important;
      border-bottom: none !important;
      box-shadow: 0 -10px 35px rgba(0,0,0,0.4) !important;
      z-index: 100000 !important;
      padding: 16px 16px max(env(safe-area-inset-bottom), 16px) 16px !important;
      background: var(--surface) !important;
      animation: slideUp 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) !important;
    }

    /* Barra de controles do Dashboard/Movimentações compacta e fluida no celular */
    .control-bar {
      padding: 6px 10px !important;
      margin-bottom: 12px !important;
      border-radius: 14px !important;
      gap: 6px !important;
      background: var(--surface2) !important;
      border: 1px solid var(--border) !important;
      box-shadow: 0 4px 14px rgba(0,0,0,0.1) !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
    }
    .control-bar .cb-btn, .control-bar .cb-export {
      padding: 6px 10px !important;
      font-size: 0.78rem !important;
      height: 36px !important;
      flex-shrink: 0 !important;
    }

    /* Cards de lista (Chamados, Transações, Faturamento, Agendamento etc.): empilha em vez de manter a coluna de ações grudada e espremida ao lado do conteúdo */
    .tx-card { display: flex !important; flex-direction: column !important; gap: 10px !important; }
    .tx-card-left { padding-right: 0 !important; width: 100% !important; }
    .tx-card-right { width: 100% !important; }
    .tx-card-right > div { width: 100% !important; justify-content: flex-start !important; }
    .tx-card-right .btn { flex: 1 1 auto !important; min-width: fit-content !important; }

    /* Barra de filtros (Chamados e demais páginas com .filters-wrap): busca ocupa a linha inteira no celular */
    .filters-wrap input[type="text"] { max-width: 100% !important; flex: 1 1 100% !important; }
    .filters-wrap .filter-sel { flex: 1 1 auto !important; }
  }

  @media (max-width: 480px) {
    /* Em celulares estreitos, exibe os botões de controle de forma ultra-compacta (ícones prioritários) */
    .control-bar .cb-text { display: none !important; }
    .control-bar .cb-text-badge { display: none !important; }
    .control-bar .cb-btn, .control-bar .cb-export {
      padding: 6px 10px !important;
      font-size: 0.95rem !important;
      border-radius: 20px !important;
      min-width: 38px !important;
      justify-content: center !important;
    }
    .control-bar > div:first-child {
      width: 100% !important;
      display: flex !important;
      gap: 8px !important;
      align-items: center !important;
      overflow-x: auto !important;
      scrollbar-width: none !important;
      -webkit-overflow-scrolling: touch !important;
      padding-bottom: 4px !important;
    }
    .control-bar > div:first-child::-webkit-scrollbar { display: none !important; }
    .control-bar .cb-btn,
    .control-bar .btn-executivo,
    .control-bar .cb-export {
      padding: 6px 14px !important;
      font-size: 0.78rem !important;
      font-weight: 600 !important;
      height: 36px !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
      border-radius: 20px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
      transition: transform 0.15s ease, background 0.15s ease !important;
    }
    .control-bar .cb-btn:active,
    .control-bar .btn-executivo:active,
    .control-bar .cb-export:active {
      transform: scale(0.96) !important;
    }
    .control-bar .export-dropdown-wrap { margin-left: 0 !important; }
    
    #app-wrapper .main { margin-left: 0; padding-bottom: 75px; min-width: 100vw; }
    .topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
    .topbar-right { justify-content: space-between; }
    
    .page { padding: 16px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .charts-row { grid-template-columns: 1fr; gap: 14px; }
    
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .row > .btn { width: 100%; padding: 12px; font-size: 0.95rem; }
    .filter-sel { width: 100%; flex: 1 1 auto; }
    .row > .btn:nth-child(3):last-child { grid-column: span 2; }
    
    .card-body { overflow-x: auto; }
    table { min-width: 0; }
    
    .modal-overlay { align-items: flex-end; padding: 0; }
    .modal { margin: 0; width: 100%; max-width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; padding: 20px 16px 0 16px; border-bottom: none; border-left: none; border-right: none; animation: slideUp 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); }
    .modal::before { content: ''; display: block; width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 12px auto; flex-shrink: 0;}
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .modal h2 { font-size: 1.2rem; margin-bottom: 16px; text-align: left; }
    
    .form-grid-2 { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
    .form-group { gap: 2px; }
    label { font-size: 0.72rem; }
    input, select, textarea { padding: 8px 10px; font-size: 0.82rem; height: 40px; }
    .checkbox-wrapper { padding: 2px 0; }
    
    .modal-footer { flex-direction: row; gap: 10px; margin-top: auto; padding-top: 12px; padding-bottom: 20px;}
    .modal-footer .btn { flex: 1; padding: 12px 6px; font-size: 0.88rem; height: 44px; }
    .modal-footer .btn-whatsapp-icon { flex: 0 0 44px; height: 44px; }


    .tab-btn { flex-direction: column; gap: 3px; padding: 10px 14px; font-size: 0.72rem; }
    .tab-icon { font-size: 1.2rem; }
    .tx-card { padding: 12px 14px; }
    .tx-valor { font-size: 0.95rem; }
    .tx-btn { padding: 5px 8px; font-size: 0.72rem; }
    .kpi-value { font-size: 1.35rem; white-space: nowrap !important; }
  }


  /* FAB Speed-Dial */
  #fab-wrapper { display: flex !important; position: fixed !important; bottom: 74px !important; right: 18px !important; left: auto !important; z-index: 10005 !important; flex-direction: column-reverse !important; align-items: flex-end !important; gap: 10px !important; pointer-events: none !important; opacity: 1 !important; visibility: visible !important; }
  #fab-wrapper.hide-if-closed-wrapper { opacity: 0.4; }
  #fab-wrapper.hide-if-closed-wrapper .fab-main, #fab-wrapper.hide-if-closed-wrapper .fab-item { pointer-events: none !important; cursor: not-allowed !important; }
  .fab-main { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--accent) !important; color: #fff !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; pointer-events: all !important; box-shadow: 0 4px 18px rgba(124,106,247,0.6) !important; transition: transform 0.2s, background 0.2s, box-shadow 0.2s !important; position: relative !important; z-index: 10010 !important; }
  .fab-main:hover { background: #6a58e8 !important; transform: scale(1.08) !important; box-shadow: 0 6px 24px rgba(124,106,247,0.75) !important; }
  .fab-main:active { transform: scale(0.95) !important; }
  .fab-dial { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-end !important; overflow: hidden !important; max-height: 0 !important; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease !important; opacity: 0 !important; pointer-events: none !important; padding-bottom: 4px !important; padding-left: 16px !important; }
  .fab-dial.open { max-height: 400px !important; opacity: 1 !important; pointer-events: all !important; }
  .fab-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border: none; border-radius: 30px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 700; cursor: pointer; white-space: nowrap; pointer-events: all; box-shadow: 0 4px 16px rgba(0,0,0,0.25); transform: translateX(30px) scale(0.9); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease, background 0.15s; min-width: 160px; justify-content: flex-start; }
  .fab-dial.open .fab-item { transform: translateX(0) scale(1); opacity: 1; }
  .fab-dial.open .fab-item:nth-child(1){ transition-delay: 0.12s; }
  .fab-dial.open .fab-item:nth-child(2){transition-delay: 0.07s; }
  .fab-dial.open .fab-item:nth-child(3){transition-delay: 0.02s; }
  .fab-item.fab-item-sugerido { box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 2px var(--accent); }
  .fab-dial.open .fab-item.fab-item-sugerido { transform: translateX(0) scale(1); }
  .fab-despesa { background: var(--red); color: #fff; }
  .fab-despesa:hover { background: #d93547; transform: translateX(-4px) scale(1) !important; }
  .fab-receita { background: var(--green); color: #1a1a2a; }
  .fab-receita:hover { background: #18b889; transform: translateX(-4px) scale(1) !important; }
  .fab-cc { background: var(--surface3); color: var(--text); border: 1px solid var(--border); }
  .fab-cc:hover { background: var(--surface2); transform: translateX(-4px) scale(1) !important; }
  .fab-obrigacao, .fab-contrato { background: #fff; color: #1a1a2a; border: 1px solid var(--border); }
  .fab-obrigacao:hover, .fab-contrato:hover { background: #f0f0f5; transform: translateX(-4px) scale(1) !important; }
  .fab-projeto, .fab-fixa { background: var(--yellow); color: #1a1a2a; }
  .fab-projeto:hover, .fab-fixa:hover { background: #e0b32e; transform: translateX(-4px) scale(1) !important; }
  .fab-processo, .fab-conta-bancaria { background: var(--blue); color: #fff; }
  .fab-processo:hover, .fab-conta-bancaria:hover { background: #3a8fdb; transform: translateX(-4px) scale(1) !important; }
  .fab-indicador, .fab-patrimonio, .fab-registrar-dado { background: var(--accent); color: #fff; }
  .fab-indicador:hover, .fab-patrimonio:hover, .fab-registrar-dado:hover { background: #6a58e0; transform: translateX(-4px) scale(1) !important; }
  .fab-usuario { background: var(--blue); color: #fff; }
  .fab-usuario:hover { background: #3a8fdb; transform: translateX(-4px) scale(1) !important; }
  .fab-investimento { background: #1fb6c9; color: #fff; }
  .fab-investimento:hover { background: #189aab; transform: translateX(-4px) scale(1) !important; }
  .fab-emprestimo { background: #e08e45; color: #fff; }
  .fab-emprestimo:hover { background: #c97733; transform: translateX(-4px) scale(1) !important; }
  .fab-icon { font-size: 1.05rem; flex-shrink: 0; }
  .fab-backdrop { display: none; position: fixed; inset: 0; z-index: 990; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); }
  .fab-backdrop.open { display: block; }
  @media (min-width: 769px) { #fab-wrapper { bottom: 28px !important; right: 28px !important; } }

  /* === CSS Premium === */
  /* Modal overlay blur + animação de entrada */
  .modal-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .modal {
    border-radius: 20px !important;
    padding-bottom: 24px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    animation: modalPop 0.28s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  @keyframes modalPop {
    0%   { transform: scale(0.96) translateY(8px); opacity: 0; }
    100% { transform: scale(1) translateY(0);       opacity: 1; }
  }

  /* === CRM 2.0: Kanban & Anti-Churn === */
  .pv-kanban-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
    overflow-x: auto;
    padding-bottom: 12px;
  }
  @media (min-width: 1300px) {
    .pv-kanban-board {
      grid-template-columns: repeat(5, 1fr);
    }
  }
  .pv-kanban-col {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
    min-height: 420px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .pv-kanban-col.drag-over {
    background: rgba(124, 106, 247, 0.08) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent) !important;
  }
  .pv-kanban-col-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 0.82rem;
    border-radius: 10px 10px 0 0;
  }
  .pv-kanban-col-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
  }
  .pv-kanban-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    user-select: none;
  }
  .pv-kanban-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  }
  .pv-kanban-card:active {
    cursor: grabbing;
  }
  .pv-kanban-card.dragging {
    opacity: 0.4;
  }
  /* Focus ring nos inputs */
  input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(124, 106, 247, 0.25) !important;
    outline: none;
  }
  /* FAB abaixo dos modais, acima do backdrop */
  #fab-wrapper { z-index: 995 !important; }
  /* Ghost buttons */
  .btn-outline.btn-sm {
    background: var(--surface2) !important;
    border: none !important;
    font-weight: 500;
    color: var(--text2) !important;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .btn-outline.btn-sm:hover { background: var(--surface3) !important; color: var(--text) !important; }

  /* Botão 📌 "fixar filtros" no estado ativo.
     Precisa ser CLASSE, não style inline: a regra .btn-outline.btn-sm acima usa
     !important em background/border/color, então qualquer cor inline no botão
     era descartada — o estado "fixado" nunca ficou visualmente distinto em
     nenhum tema. Era por isso que existia um filter:hue-rotate() sobre o emoji
     (filter não é sobrescrito pelo !important), contorno que saiu junto com
     esta regra. A cor vem do token --red, então acompanha os 6 temas. */
  /* Sem transition: o botão 📌 é reconstruído do zero (innerHTML) toda vez
     que a página em que ele vive re-renderiza — inclusive por ações que não
     têm nada a ver com fixar/desafixar (ex: o botão "Hoje" da Agenda, do
     lado dele na mesma barra). .btn herda transition:all 0.2s; qualquer
     recálculo de estado (hover, foco) nesse instante anima visivelmente e
     parece um "piscar" no pin sem o usuário ter clicado nele. Cor de estado
     fixado precisa trocar instantânea, nunca animada. */
  .btn-pin.active {
    background: color-mix(in srgb, var(--red) 12%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--red) 45%, transparent) !important;
    color: var(--red) !important;
    font-weight: 800;
    transition: none !important;
  }
  .btn-pin.active:hover {
    background: color-mix(in srgb, var(--red) 20%, transparent) !important;
    color: var(--red) !important;
  }
  /* KPI cards hover */
  .kpi-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--kpi-color, var(--accent));
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  }
  /* Tabela: thead sticky e hover nas linhas */
  thead th {
    position: sticky; top: 0;
    background: var(--surface2);
    backdrop-filter: blur(4px);
    z-index: 10;
  }
  tbody tr { transition: background 0.15s ease; }
  tbody tr:hover { background: var(--surface2); }
  /* Mobile sidebar */
  .indicador-accordion { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
  .indicador-accordion-header { padding: 16px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; background: var(--surface2); transition: background 0.2s; list-style: none; }
  .indicador-accordion-header::-webkit-details-marker { display: none; }
  .indicador-accordion-header:hover { background: var(--surface3); }
  .indicador-accordion[open] .indicador-accordion-header { border-bottom: 1px solid var(--border); }
  .indicador-accordion-content { padding: 16px; }

  @media (max-width: 768px) {
    #app-wrapper .sidebar {
      background: var(--surface) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-top: 1px solid var(--border) !important;
      padding-bottom: max(env(safe-area-inset-bottom), 10px) !important;
      z-index: 1000 !important;
    }
    .main { padding-bottom: 90px !important; }
    #cuide-selo-versao {
      font-size: 0.58rem !important;
      padding: 1px 4px !important;
      opacity: 0.6 !important;
      font-weight: normal !important;
    }
  }

  #cuide-selo-versao {
    font-size: 0.78rem !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    opacity: 0.85 !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
  }


  /* ===================================================================
     CAMADA DE ÍCONES (icons.js) — a pegada do novo design em todas as
     páginas. O <span class="ico"> substitui um emoji e herda o tamanho
     da fonte do contexto, então funciona igual dentro de botão, badge,
     título de card, célula de tabela ou estado vazio.
     =================================================================== */
  .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.12em;
    height: 1.12em;
    flex: 0 0 auto;
    vertical-align: -0.19em;
    line-height: 0;
  }
  .ico svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-width: 2;
    overflow: visible;
  }
  /* Ícone isolado (sem texto ao lado) ganha um respiro proporcional. */
  .btn .ico, .tx-btn .ico, .badge .ico, .tab-btn .ico { margin-right: 0; }

  /* Em superfícies preenchidas o ícone acompanha a cor do texto, senão
     um check verde sobre botão azul brigaria com o fundo. */
  .btn-primary .ico,
  .btn-whatsapp .ico,
  .tx-btn-whatsapp .ico,
  .cb-btn.btn-executivo .ico,
  .view-toggle-btn.active .ico,
  .badge .ico,
  .tx-status-badge .ico,
  .sidebar-user-role-badge .ico,
  .kpi-label-icon .ico,
  .nav-btn .ico,
  thead th .ico { color: currentColor !important; }

  /* Traço um pouco mais fino em tamanhos grandes (estado vazio, hero). */
  .empty-state .icon .ico { width: 1em; height: 1em; }
  .empty-state .icon .ico svg { stroke-width: 1.4; }
  .empty-state .icon { filter: none; opacity: 0.35; }
  .kpi-label-icon .ico svg { stroke-width: 2.1; }

  /* Alertas e toasts: o ícone fica em bloco tingido, como no login. */
  .modal .ico { vertical-align: -0.2em; }

  /* ── Identidade cromática por página nas abas ─────────────────────
     As abas continuam em cinza grafite (decisão do redesign); o que
     muda por página é só o ícone da aba ativa e o fio de destaque
     embaixo dela. Dá orientação sem poluir a tipografia. */
  .tabs { --tab-accent: var(--accent); }
  #tabs-movimentacoes, #tabs-contas { --tab-accent: var(--green); }
  #tabs-obrigacoes { --tab-accent: #d97706; }
  #tabs-familia, #tabs-admin { --tab-accent: var(--text); }
  #tabs-categorias { --tab-accent: var(--yellow); }
  #tabs-social { --tab-accent: #10b981; }
  #page-cuide-agenda .tabs, #tabs-agenda { --tab-accent: var(--blue); }
  #page-cuide-agendamento .tabs, #tabs-agendamento { --tab-accent: var(--green); }
  #page-cuide-faturamento .tabs, #tabs-faturamento { --tab-accent: var(--yellow); }
  #page-cuide-chamados .tabs, #tabs-chamados { --tab-accent: var(--accent); }
  #page-cuide-materiais .tabs, #tabs-materiais { --tab-accent: var(--blue); }
  #page-cuide-gestao .tabs, #tabs-gestao { --tab-accent: var(--purple); }
  #page-cuide-posvisita .tabs, #tabs-posvisita { --tab-accent: var(--purple); }
  #page-cuide-senhas .tabs, #tabs-senhas { --tab-accent: var(--red); }

  .tab-btn.active { position: relative; }
  .tab-btn.active .tab-icon,
  .tab-btn.active .tab-icon svg,
  .tab-btn.active > .ico { color: var(--tab-accent); }
  .tab-btn.active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -5px; /* dentro do padding de .tabs — fora dele o overflow-x recorta */
    height: 2px;
    border-radius: 2px;
    background: var(--tab-accent);
    opacity: 0.85;
  }

  /* Botão de fixar período de relatório / widget (📌) */
  .btn-pin {
    padding: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
    opacity: 0.75;
    cursor: pointer;
  }
  .btn-pin:hover { opacity: 1; border-color: var(--accent); }
  .btn-pin.active {
    background: rgba(124, 106, 247, 0.16) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    opacity: 1 !important;
    box-shadow: 0 0 8px rgba(124, 106, 247, 0.25);
  }
  .btn-pin span { line-height: 1; }

  /* ═══════════════════════════════════════════════════════════════════
     CHAT INTERNO & MENSAGENS DA EQUIPE
     ═══════════════════════════════════════════════════════════════════ */
  .chat-canal-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text2);
  }
  .chat-canal-item:hover {
    background: rgba(37, 99, 235, 0.08);
    color: var(--text);
  }
  .chat-canal-item.active {
    background: rgba(37, 99, 235, 0.14);
    color: var(--accent);
    font-weight: 700;
  }