/**
 * Meu Plano Responsivo — Design System Tokens & Global Styles
 * Especificação: Globalsys / Ecossistema Meu Patrimônio
 * Versão: 1.0 (Agosto 2026)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
   /* ==========================================================================
     1. PALETA DE CORES (TOKENS PRINCIPAIS)
     ========================================================================== */

   /* Cores da Marca e Primárias */
   --mp-primary: #16A34A;
   /* Marca, CTAs, item ativo nav, indicadores positivos */
   --mp-primary-alt: #01B150;
   /* Verde vivo (gráficos positivos) */
   --mp-primary-dark: #0A5209;
   /* Verde fechado de apoio */
   --mp-accent-dark: #00503C;
   /* Floresta / contraste escuro */

   /* Cores de Navegação e Superfície */
   --mp-sidebar-hover: #CCFBF1;
   /* Fundo de hover nos itens da barra lateral */
   --mp-sidebar-active: #16A34A;
   /* Borda e destaque ativo da sidebar */
   --mp-bg: #F8FAFC;
   /* Fundo geral da página */
   --mp-card-bg: #FFFFFF;
   /* Superfície dos cartões de conteúdo */

   /* Cores de Texto e Tipografia */
   --mp-text-heading: #111827;
   /* Títulos principais e seções */
   --mp-text-heading-dark: #000000;
   /* Títulos pretos absolutos */
   --mp-text-body: #374151;
   /* Texto corrido / descrições */
   --mp-text-caption: #6B7280;
   /* Textos secundários e metadados */
   --mp-text-muted: #9CA3AF;
   /* Textos desabilitados ou placeholders */

   /* Cores Semânticas de Alerta, Saídas e Críticos */
   --mp-error: #D9372E;
   /* Saídas financeiras, alertas e desvios */
   --mp-alert: #F94146;
   /* Alertas críticos */
   --mp-warning: #F3963E;
   /* Avisos, atenções, progress rings */
   --mp-info: #338ECA;
   /* Realizado / informativo */

   /* Cores de Gráficos Especializados */
   --mp-chart-teal: #18495F;
   /* Barras de índices de balanço */
   --mp-chart-purple: #7232A4;
   /* Destaque roxo em categorias */
   --mp-chart-gray: #555555;
   /* Neutro para gráficos e legendas */
   --mp-chart-track: #E5E7EB;
   /* Trilho cinza de donuts e progress bars */

   /* Cores de Borda */
   --mp-border: #E5E7EB;
   /* Bordas de cards, divisores e inputs */
   --mp-border-light: #F3F4F6;
   /* Divisores sutis */
   --mp-border-focus: #16A34A;
   /* Borda no estado de foco */
   --mp-focus-ring: rgba(22, 163, 74, 0.25);

   /* ==========================================================================
     2. TIPOGRAFIA (FAMÍLIA INTER)
     ========================================================================== */
   --mp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

   --mp-font-display: 20px;
   --mp-font-heading-lg: 18px;
   --mp-font-heading: 16px;
   --mp-font-heading-sm: 14px;
   --mp-font-subheading: 14px;
   --mp-font-subheading-sm: 13px;
   --mp-font-body: 13px;
   --mp-font-body-default: 12px;
   --mp-font-caption: 10px;
   --mp-font-micro: 9px;
   --mp-font-tiny: 8px;

   /* ==========================================================================
     3. ESPAÇAMENTOS (SPACING SCALE)
     ========================================================================== */
   --mp-space-xs: 4px;
   --mp-space-sm: 8px;
   --mp-space-md: 12px;
   --mp-space-lg: 16px;
   --mp-space-xl: 24px;
   --mp-space-2xl: 32px;
   --mp-space-3xl: 48px;

   /* ==========================================================================
     4. RAIOS DE BORDA (BORDER RADIUS)
     ========================================================================== */
   --mp-radius-sm: 6px;
   --mp-radius-md: 10px;
   --mp-radius-lg: 16px;
   --mp-radius-pill: 50px;
   --mp-radius-circle: 50%;

   /* ==========================================================================
     5. ELEVAÇÃO E SOMBRAS (SHADOWS)
     ========================================================================== */
   --mp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.09);
   --mp-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
   --mp-shadow-elevated: 0 10px 25px rgba(0, 0, 0, 0.07);
   --mp-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.10);
   --mp-shadow-blur-header: 0 4px 27px rgba(0, 0, 0, 0.05);

   /* ==========================================================================
     6. TRANSIÇÕES E MICRO-ANIMAÇÕES
     ========================================================================== */
   --mp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
   --mp-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --mp-transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

   /* ==========================================================================
      7. DIMENSÕES DE LAYOUT (TOPBAR & SIDEBAR)
      ========================================================================== */
   --mp-topbar-height: 50px;
   --mp-topbar-brand-width: 170px;
   --mp-sidebar-width: 10.26rem;
   --mp-sidebar-width-icon: 3rem;
   --mp-sidebar-transition: 200ms linear;
}

/* ==========================================================================
   7. APLICAÇÃO GLOBAL DE TIPOGRAFIA
   ========================================================================== */
body,
.mp-body {
   font-family: var(--mp-font-family);
   font-size: var(--mp-font-body);
   color: var(--mp-text-body);
   background-color: var(--mp-bg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Escala Tipográfica Padronizada */
.mp-display {
   font-size: var(--mp-font-display);
   font-weight: 700;
   color: var(--mp-text-heading);
   line-height: 1.25;
}

.mp-heading-lg {
   font-size: var(--mp-font-heading-lg);
   font-weight: 700;
   color: var(--mp-text-heading);
   line-height: 1.3;
}

.mp-heading {
   font-size: var(--mp-font-heading);
   font-weight: 700;
   color: var(--mp-text-heading);
   line-height: 1.35;
}

.mp-heading-sm {
   font-size: var(--mp-font-heading-sm);
   font-weight: 700;
   color: var(--mp-text-heading);
   line-height: 1.4;
}

.mp-subheading {
   font-size: var(--mp-font-subheading);
   font-weight: 600;
   color: var(--mp-text-heading);
   line-height: 1.4;
}

.mp-subheading-sm {
   font-size: var(--mp-font-subheading-sm);
   font-weight: 600;
   color: var(--mp-text-heading);
   line-height: 1.4;
}

.mp-label {
   font-size: 12.8px;
   font-weight: 600;
   color: var(--mp-text-heading);
}

.mp-label-md {
   font-size: 11px;
   font-weight: 500;
   color: var(--mp-text-caption);
}

.mp-body-text {
   font-size: var(--mp-font-body);
   font-weight: 400;
   color: var(--mp-text-body);
   line-height: 1.5;
}

.mp-body-default {
   font-size: var(--mp-font-body-default);
   font-weight: 400;
   color: var(--mp-text-body);
   line-height: 1.5;
}

.mp-caption {
   font-size: var(--mp-font-caption);
   font-weight: 600;
   color: var(--mp-text-caption);
}

.mp-small {
   font-size: var(--mp-font-caption);
   font-weight: 400;
   color: var(--mp-text-caption);
}

.mp-micro {
   font-size: var(--mp-font-micro);
   font-weight: 400;
   color: var(--mp-text-muted);
}

.mp-tiny {
   font-size: var(--mp-font-tiny);
   font-weight: 400;
   color: var(--mp-text-muted);
}

/* ==========================================================================
   8. REGRAS GLOBAIS DE ACESSIBILIDADE E FOCO
   ========================================================================== */
*:focus-visible {
   outline: 2px solid var(--mp-primary) !important;
   outline-offset: 2px !important;
}

/* Previne animações caso o usuário tenha ativado redução de movimento */
/* ==========================================================================
   9. COMPONENTES BASE DO DESIGN SYSTEM
   ========================================================================== */

/* --- 9.1 Cards e Containers Elevados --- */
.mp-card {
   background-color: var(--mp-card-bg);
   border-radius: var(--mp-radius-lg);
   border: 1px solid #EDEDEE;
   box-shadow: var(--mp-shadow-sm);
   padding: var(--mp-space-xl);
   transition: box-shadow var(--mp-transition-normal), border-color var(--mp-transition-normal), transform var(--mp-transition-normal);
}

.mp-dashboard-card {
   background-color: #FFFFFF;
   border: 1px solid #E2E8F0;
   border-radius: 16px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   padding: 24px;
   box-sizing: border-box;
}

.mp-dashboard-card.is-full-height {
   height: 100%;
}

.mp-card-title {
   font-family: var(--mp-font-family);
   font-size: 16px;
   font-weight: 700;
   color: #16A34A;
   margin-bottom: 20px;
   letter-spacing: -0.2px;
}

/* Linha de Dados Pessoais */
.mp-person-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0;
}

.mp-person-icon {
   width: 36px !important;
   color: #16A34A !important;
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-shrink: 0;
   margin-right: 14px;
}

/* 1. Tamanho do ícone de CLIENTE */
.mp-icon-cliente,
ion-icon[name="person"] {
   font-size: 28px !important;
}

/* 2. Tamanho do ícone de CÔNJUGE */
.mp-icon-conjuge,
ion-icon[name="people"] {
   font-size: 32px !important;
}

.mp-person-age {
   text-align: left !important;
   min-width: 80px;
}

.mp-person-badge {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background-color: #DCFCE7;
   color: #16A34A;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-right: 12px;
}

.mp-person-badge svg {
   width: 18px;
   height: 18px;
   stroke: #16A34A;
   stroke-width: 2px;
}

.mp-person-label {
   font-family: var(--mp-font-family);
   font-size: 11px;
   font-weight: 500;
   color: #6B7280;
   margin-bottom: 2px;
}

.mp-person-value {
   font-family: var(--mp-font-family);
   font-size: 13.5px;
   font-weight: 600;
   color: #111827;
   margin: 0;
}

/* Planejador Financeiro */
.mp-planner-avatar {
   width: 68px;
   height: 68px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #EDEDEE;
}

.mp-planner-name {
   font-family: var(--mp-font-family);
   font-size: 14px;
   font-weight: 700;
   color: #111827;
   margin-bottom: 4px;
}

.mp-planner-meta {
   font-family: var(--mp-font-family);
   font-size: 12px;
   font-weight: 400;
   color: #6B7280;
   margin-bottom: 2px;
}

/* ==========================================================================
   MINI-CARDS DE MÉTRICAS (ORÇAMENTO E BALANÇO)
   ========================================================================== */
.mp-dashboard-card-finance {
   padding: 20px 24px !important;
   height: auto !important;
   min-height: auto !important;
}

.mp-dashboard-card-finance .mp-card-title {
   margin-bottom: 16px !important;
}

.mp-metric-card {
   background-color: #F8FAFC;
   border: 1px solid #EDEDEE;
   border-radius: 12px;
   padding: 16px 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 84px;
   height: 100%;
   box-sizing: border-box;
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.25s ease,
      border-color 0.25s ease;
}

@media (hover: hover) {
   .mp-metric-card:hover {
      background-color: #FFFFFF;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.115);
      border-color: #E2E8F0;
   }
}

.mp-metric-header {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 12px;
}

.mp-metric-badge {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.mp-metric-badge svg,
.mp-metric-badge i {
   width: 12px;
   height: 12px;
   stroke-width: 2.5px;
}

/* Variantes de Badges */
.mp-metric-badge.is-green {
   background-color: #DCFCE7;
   color: #16A34A;
}

.mp-metric-badge.is-green svg {
   stroke: #16A34A;
}

.mp-metric-badge.is-red {
   background-color: #FEE2E2;
   color: #DC2626;
}

.mp-metric-badge.is-red svg {
   stroke: #DC2626;
}

.mp-metric-badge.is-blue {
   background-color: #E0F2FE;
   color: #0284C7;
}

.mp-metric-badge.is-blue svg {
   stroke: #0284C7;
}

.mp-metric-label {
   font-family: var(--mp-font-family);
   font-size: 12px;
   font-weight: 500;
   color: #64748B;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.mp-metric-value {
   font-family: var(--mp-font-family);
   font-size: 20px;
   font-weight: 700;
   line-height: 1.2;
   margin: 0;
   letter-spacing: -0.3px;
}

.mp-metric-value.text-green {
   color: #16A34A !important;
}

.mp-metric-value.text-red {
   color: #DC2626 !important;
}

.mp-metric-value.text-dark {
   color: #111827 !important;
}

/* ==========================================================================
   CARD DE INVESTIMENTOS (DONUT CHART C3.JS & LEGENDA)
   ========================================================================== */
.mp-dashboard-card-investimentos {
   padding: 24px !important;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: calc(100% - 24px) !important;
   min-height: 360px;
}

.mp-donut-container {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 4px 0;
   min-height: 220px;
}

#chart-investimentos {
   width: 100%;
   height: 220px;
}

#chart-investimentos .c3-chart-arc path {
   stroke: #FFFFFF !important;
   stroke-width: 2.5px !important;
   transition: opacity 0.2s ease, transform 0.2s ease;
}

.mp-donut-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   text-align: center;
   z-index: 5;
}

.mp-donut-center-label {
   font-family: var(--mp-font-family);
   font-size: 12px;
   font-weight: 500;
   color: #64748B;
   margin-bottom: 2px;
}

.mp-donut-center-value {
   font-family: var(--mp-font-family);
   font-size: 20px;
   font-weight: 700;
   color: #111827;
   line-height: 1.1;
   letter-spacing: -0.5px;
}

.mp-chart-legend {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 8px 12px;
   margin-top: 10px;
   padding-top: 10px;
}

.mp-legend-item {
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.mp-legend-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   display: inline-block;
   flex-shrink: 0;
}

.mp-legend-text {
   font-family: var(--mp-font-family);
   font-size: 11px;
   font-weight: 500;
   color: #475569;
}

/* ==========================================================================
   OBJETIVOS, CONQUISTAS E EMPTY STATES
   ========================================================================== */
.mp-goal-card {
   background-color: #F8FAFC;
   border: 1px solid #EDEDEE;
   border-radius: 12px;
   padding: 12px 16px;
   margin-bottom: 12px;
   box-sizing: border-box;
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.25s ease,
      border-color 0.25s ease;
}

@media (hover: hover) {
   .mp-goal-card:hover {
      background-color: #FFFFFF;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.115);
      border-color: #E2E8F0;
   }
}

.mp-goal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4px;
}

.mp-goal-meta {
   font-family: var(--mp-font-family);
   font-size: 11px;
   font-weight: 500;
   color: #64748B;
}

.mp-goal-pct {
   font-family: var(--mp-font-family);
   font-size: 12px;
   font-weight: 700;
}

.mp-goal-title {
   font-family: var(--mp-font-family);
   font-size: 13px;
   font-weight: 600;
   color: #111827;
   margin-bottom: 8px;
   line-height: 1.3;
}

.mp-goal-progress-track {
   width: 100%;
   height: 6px;
   border-radius: 10px;
   overflow: hidden;
   background-color: #F1F5F9;
}

.mp-goal-progress-fill {
   height: 100%;
   border-radius: 10px;
   transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Empty States */
.mp-empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 36px 16px;
   min-height: 160px;
}

.mp-empty-state-title {
   font-family: var(--mp-font-family);
   font-size: 13px;
   font-weight: 500;
   color: #374151;
   margin-bottom: 4px;
}

.mp-empty-state-subtitle {
   font-family: var(--mp-font-family);
   font-size: 11px;
   font-weight: 400;
   color: #94A3B8;
}

/* ==========================================================================
   TABELA DE TAREFAS
   ========================================================================== */
.mp-table {
   width: 100% !important;
   border-collapse: separate !important;
   border-spacing: 0 !important;
   font-family: var(--mp-font-family) !important;
   margin-bottom: 0 !important;
}

.mp-table thead th,
.table-principal thead th {
   font-size: 11px !important;
   font-weight: 600 !important;
   color: #64748B !important;
   text-transform: uppercase !important;
   letter-spacing: 0.5px !important;
   border-top: none !important;
   border-bottom: 1px solid #E2E8F0 !important;
   padding: 10px 12px !important;
   background: transparent !important;
}

.mp-table tbody td,
.table-principal tbody td {
   font-size: 12.5px !important;
   color: #374151 !important;
   vertical-align: middle !important;
   padding: 12px !important;
   border-top: none !important;
   border-bottom: 1px solid #F1F5F9 !important;
   transition: background-color var(--mp-transition-fast) !important;
}

.mp-table tbody tr:hover td,
.table-principal tbody tr:hover td {
   background-color: #F8FAFC !important;
}

.mp-table .status {
   font-size: 11.5px !important;
   font-weight: 500 !important;
   margin-left: 4px;
}

/* Checkbox Moderno Verde */
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
   background-color: #16A34A !important;
   border-color: #16A34A !important;
}

.custom-checkbox .custom-control-input:focus~.custom-control-label::before {
   box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25) !important;
}

.custom-control-label::before {
   border-radius: 4px !important;
   border: 1.5px solid #CBD5E1 !important;
}

.mp-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--mp-space-lg);
   padding-bottom: var(--mp-space-sm);
}

.mp-card-clickable {
   cursor: pointer;
}

@media (hover: hover) {
   .mp-card-clickable:hover {
      border-color: var(--mp-primary);
      transform: translateY(-2px);
      box-shadow: var(--mp-shadow-hover);
   }
}

.mp-card-clickable:active {
   transform: scale(0.98);
}

/* Card de Módulos (Hub de Planos) */
.mp-card-module {
   background-color: var(--mp-card-bg);
   border: 1px solid var(--mp-border);
   border-radius: var(--mp-radius-lg);
   box-shadow: var(--mp-shadow-sm);
   padding: var(--mp-space-lg);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   transition: all var(--mp-transition-normal);
   text-decoration: none !important;
   color: var(--mp-text-heading);
}

@media (hover: hover) {
   .mp-card-module:hover {
      border-color: var(--mp-primary);
      transform: translateY(-2px);
      box-shadow: var(--mp-shadow-hover);
      color: var(--mp-primary);
   }
}

.mp-card-module:active {
   transform: scale(0.97);
}

.mp-card-module.is-disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
   background-color: #F9FAFB;
}

/* --- 9.2 Botões Padronizados (Pill e Ações) --- */
.mp-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--mp-space-sm);
   font-family: var(--mp-font-family);
   font-size: var(--mp-font-subheading-sm);
   font-weight: 600;
   line-height: 1;
   text-decoration: none !important;
   border: 1px solid transparent;
   cursor: pointer;
   transition: all var(--mp-transition-fast);
   min-height: 40px;
}

.mp-btn-pill {
   border-radius: var(--mp-radius-pill);
   padding: 10px 24px;
}

.mp-btn-primary {
   background-color: var(--mp-primary);
   color: #FFFFFF !important;
   border-color: var(--mp-primary);
}

@media (hover: hover) {
   .mp-btn-primary:hover {
      background-color: #15803D;
      border-color: #15803D;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
   }
}

.mp-btn-primary:active {
   transform: scale(0.97);
}

.mp-btn-outline {
   background-color: transparent;
   color: var(--mp-primary) !important;
   border-color: var(--mp-primary);
   border-radius: var(--mp-radius-sm);
}

@media (hover: hover) {
   .mp-btn-outline:hover {
      background-color: var(--mp-hover);
      color: var(--mp-accent-dark) !important;
   }
}

.mp-btn-outline:active {
   transform: scale(0.97);
}

/* --- 9.3 Badges e Status Chips --- */
.mp-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 4px 10px;
   border-radius: var(--mp-radius-pill);
   font-size: var(--mp-font-caption);
   font-weight: 600;
   line-height: 1.2;
}

.mp-badge-success {
   background-color: #DCFCE7;
   color: #166534;
}

.mp-badge-warning {
   background-color: #FEF3C7;
   color: #92400E;
}

.mp-badge-error {
   background-color: #FEE2E2;
   color: #991B1B;
}

.mp-badge-info {
   background-color: #E0F2FE;
   color: #075985;
}

/* --- 9.4 Abas de Navegação (Tabs) --- */
.mp-tabs-nav {
   display: flex;
   align-items: center;
   gap: var(--mp-space-lg);
   border-bottom: 1px solid var(--mp-border);
   margin-bottom: var(--mp-space-xl);
}

.mp-tab-item {
   padding: var(--mp-space-sm) var(--mp-space-md);
   font-size: var(--mp-font-subheading-sm);
   font-weight: 500;
   color: var(--mp-text-caption);
   text-decoration: none !important;
   border-bottom: 2px solid transparent;
   transition: all var(--mp-transition-fast);
   cursor: pointer;
}

@media (hover: hover) {
   .mp-tab-item:hover {
      color: var(--mp-primary);
   }
}

.mp-tab-item.active {
   color: var(--mp-primary);
   font-weight: 600;
   border-bottom-color: var(--mp-primary);
}

/* --- 9.5 Controles de Toggle (Mês / Ano) --- */
.mp-toggle-group {
   display: inline-flex;
   background-color: #F1F5F9;
   border-radius: var(--mp-radius-pill);
   padding: 3px;
   border: 1px solid var(--mp-border);
}

.mp-toggle-btn {
   border: none;
   background: transparent;
   padding: 6px 14px;
   border-radius: var(--mp-radius-pill);
   font-size: var(--mp-font-body-default);
   font-weight: 500;
   color: var(--mp-text-caption);
   cursor: pointer;
   transition: all var(--mp-transition-fast);
}

.mp-toggle-btn.active {
   background-color: #FFFFFF;
   color: var(--mp-text-heading);
   font-weight: 600;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* --- 9.6 Checkbox Customizado --- */
.mp-checkbox-wrapper {
   display: inline-flex;
   align-items: center;
   gap: var(--mp-space-sm);
   cursor: pointer;
   user-select: none;
}

.mp-checkbox {
   width: 18px;
   height: 18px;
   border: 2px solid #D1D5DB;
   border-radius: var(--mp-radius-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: #FFFFFF;
   transition: all var(--mp-transition-fast);
}

.mp-checkbox.checked {
   background-color: var(--mp-primary);
   border-color: var(--mp-primary);
   color: #FFFFFF;
}

/* --- 9.7 Input de Busca Pill --- */
.mp-input-pill-wrapper {
   position: relative;
   display: inline-flex;
   align-items: center;
   width: 100%;
}

.mp-input-pill {
   width: 100%;
   height: 36px;
   padding: 6px 16px 6px 40px;
   border-radius: var(--mp-radius-pill);
   border: 1px solid #E5E7EB;
   background-color: #FFFFFF;
   box-shadow: var(--mp-shadow-sm);
   font-family: var(--mp-font-family);
   font-size: var(--mp-font-body-default);
   color: var(--mp-text-heading);
   outline: none;
   transition: all var(--mp-transition-fast);
}

.mp-input-pill::placeholder {
   color: var(--mp-text-muted);
   font-size: var(--mp-font-body-default);
}

.mp-input-pill:focus {
   border-color: var(--mp-primary);
   box-shadow: 0 0 0 3px var(--mp-focus-ring);
}

.mp-input-pill-icon {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--mp-text-muted);
   pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
}

.mp-input-pill-icon i,
.mp-input-pill-icon svg {
   width: 16px !important;
   height: 16px !important;
   stroke: #9CA3AF !important;
   stroke-width: 2px !important;
}

/* --- 9.8 Topbar --- */
#mainNav.mp-topbar,
.mp-topbar {
   height: var(--mp-topbar-height) !important;
   min-height: var(--mp-topbar-height) !important;
   max-height: var(--mp-topbar-height) !important;
   background-color: #FFFFFF !important;
   border-bottom: 1px solid #EDEDEE !important;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
   padding: 0 var(--mp-space-lg) 0 0 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   z-index: 1030 !important;
}

.mp-topbar-brand {
   display: flex;
   align-items: center;
   gap: var(--mp-space-sm);
   padding-left: 16px;
   text-decoration: none !important;
}

@media (min-width: 1024px) {
   .mp-topbar-brand {
      width: var(--mp-topbar-brand-width) !important;
      min-width: var(--mp-topbar-brand-width) !important;
      max-width: var(--mp-topbar-brand-width) !important;
   }
}

.mp-topbar-brand img {
   height: 37px;
   max-height: 87px;
   width: auto;
   object-fit: contain;
}

.mp-topbar-search-container {
   flex: 1;
   max-width: 480px;
   margin-left: -5px;
   margin-right: auto;
}

.mp-search-access-denied {
   display: none !important;
}

.mp-topbar-user {
   display: flex;
   align-items: center;
   gap: var(--mp-space-sm);
   cursor: pointer;
   padding: 4px 8px;
   border-radius: var(--mp-radius-pill);
   transition: background-color var(--mp-transition-fast);
   text-decoration: none !important;
}

@media (hover: hover) {
   .mp-topbar-user:hover {
      background-color: var(--mp-bg);
   }
}

.mp-avatar {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: var(--mp-primary);
   color: #FFFFFF;
   font-family: var(--mp-font-family);
   font-size: 11px;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.mp-topbar-user::after {
   display: none !important;
}

.mp-user-chevron {
   width: 14px !important;
   height: 14px !important;
   stroke: #252626 !important;
   stroke-width: 2.5px !important;
   margin-left: 4px;
   transition: transform var(--mp-transition-fast);
}

.show>.mp-topbar-user .mp-user-chevron {
   transform: rotate(180deg);
}

.mp-user-name {
   font-family: var(--mp-font-family);
   font-size: var(--mp-font-subheading-sm);
   font-weight: 600;
   color: var(--mp-text-heading);
}

/* ==========================================================================
   USER PROFILE DROPDOWN MENU
   ========================================================================== */
#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown .dropdown-menu,
.mp-dropdown-menu {
   border: 1px solid #EDEDEE !important;
   border-radius: 16px !important;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
   min-width: 220px !important;
   padding: 8px !important;
   margin-top: 8px !important;
   background: #FFFFFF !important;
}

.mp-dropdown-menu .dropdown-header {
   padding: 10px 12px 8px !important;
   margin-bottom: 4px !important;
}

.mp-dropdown-menu .dropdown-header .mp-subheading-sm {
   font-size: 13.5px !important;
   font-weight: 700 !important;
   color: #111827 !important;
   line-height: 1.3 !important;
}

.mp-dropdown-menu .dropdown-header .mp-caption {
   font-size: 11px !important;
   font-weight: 500 !important;
   color: #64748B !important;
   margin-top: 2px !important;
}

#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown .dropdown-menu .dropdown-divider,
.mp-dropdown-menu .dropdown-divider {
   margin: 6px 0 !important;
   border: 0 !important;
   border-top: 1px solid #F1F5F9 !important;
}

#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown .dropdown-menu .dropdown-item,
.mp-dropdown-menu .dropdown-item {
   display: flex !important;
   align-items: center !important;
   gap: 8px !important;
   padding: 9px 12px !important;
   border-radius: 8px !important;
   font-family: var(--mp-font-family) !important;
   font-size: 13px !important;
   font-weight: 500 !important;
   color: #374151 !important;
   background: transparent !important;
   cursor: pointer !important;
   transition: all var(--mp-transition-fast) !important;
   text-decoration: none !important;
}

#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown .dropdown-menu .dropdown-item:hover,
.mp-dropdown-menu .dropdown-item:hover {
   background-color: #F0FDF4 !important;
   color: #16A34A !important;
   font-weight: 600 !important;
   text-decoration: none !important;
}

#mainNav .navbar-collapse .navbar-nav>.nav-item.dropdown .dropdown-menu .dropdown-item:hover svg,
.mp-dropdown-menu .dropdown-item:hover svg {
   stroke: #16A34A !important;
}

/* Item Sair (Logout) */
.mp-dropdown-menu .dropdown-item.text-danger:hover {
   background-color: #FEF2F2 !important;
   color: #DC2626 !important;
   font-weight: 600 !important;
}

.mp-dropdown-menu .dropdown-item.text-danger:hover svg {
   stroke: #DC2626 !important;
}

/* Ajuste do topo do body para a Topbar */
body.fixed-nav {
   padding-top: var(--mp-topbar-height) !important;
}

/* --- 9.9 Sidebar Compacta --- */
@media (min-width: 1024px) {

   #mainNav .navbar-collapse .navbar-sidenav,
   #mainNav.navbar-light .navbar-collapse .navbar-sidenav,
   #mainNav.navbar-dark .navbar-collapse .navbar-sidenav {
      width: var(--mp-sidebar-width) !important;
      position: fixed !important;
      top: var(--mp-topbar-height) !important;
      left: 0 !important;
      bottom: 0 !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      height: calc(100vh - var(--mp-topbar-height)) !important;
      background-color: #FFFFFF !important;
      border-right: 1px solid #EDEDEE !important;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02) !important;
      padding-top: 16px !important;
      padding-bottom: 0px !important;
      z-index: 1020 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      transition: width var(--mp-sidebar-transition), box-shadow var(--mp-transition-fast) !important;
   }

   #mainNav .navbar-collapse .navbar-sidenav>.nav-item,
   #mainNav.navbar-light .navbar-collapse .navbar-sidenav>.nav-item {
      width: 100% !important;
   }

   .content-wrapper {
      margin-left: var(--mp-sidebar-width) !important;
      margin-top: 0 !important;
      padding: 0 !important;
      padding-top: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      background-color: #EDEDEE !important;
      min-height: calc(100vh - var(--mp-topbar-height)) !important;
      transition: margin-left var(--mp-sidebar-transition) !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav {
      width: var(--mp-sidebar-width-icon) !important;
   }

   body.sidenav-toggled .content-wrapper,
   html.mp-sidebar-collapsed body .content-wrapper {
      margin-left: var(--mp-sidebar-width-icon) !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav>.nav-item,
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav .nav-link,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav>.nav-item,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav .nav-link {
      width: var(--mp-sidebar-width-icon) !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav .nav-link,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav .nav-link {
      justify-content: center !important;
      gap: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav .nav-link-text,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav .nav-link-text {
      display: none !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav .mp-sidebar-footer,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav .mp-sidebar-footer {
      padding-left: 8px !important;
      padding-right: 8px !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav .mp-sidebar-logo-img,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav .mp-sidebar-logo-img {
      width: 32px !important;
      max-width: 32px !important;
      height: 32px !important;
      object-fit: cover !important;
      object-position: left center !important;
   }

   /* No estado recolhido, a sidebar abre sobre o conteúdo sem deslocá-lo. */
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:hover,
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible),
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:hover,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) {
      width: var(--mp-sidebar-width) !important;
      box-shadow: 8px 0 24px rgba(15, 23, 42, 0.12) !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:hover>.nav-item,
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible)>.nav-item,
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:hover .nav-link,
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) .nav-link,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:hover>.nav-item,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible)>.nav-item,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:hover .nav-link,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) .nav-link {
      width: 100% !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:hover .nav-link,
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) .nav-link,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:hover .nav-link,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) .nav-link {
      justify-content: flex-start !important;
      gap: 12px !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:hover .nav-link-text,
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) .nav-link-text,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:hover .nav-link-text,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) .nav-link-text {
      display: inline !important;
   }

   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:hover .mp-sidebar-logo-img,
   body.sidenav-toggled #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) .mp-sidebar-logo-img,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:hover .mp-sidebar-logo-img,
   html.mp-sidebar-collapsed body #mainNav .navbar-collapse .navbar-sidenav:has(.nav-link:focus-visible) .mp-sidebar-logo-img {
      width: auto !important;
      max-width: 125px !important;
      height: auto !important;
      object-fit: contain !important;
   }
}

@media (prefers-reduced-motion: reduce) {

   #mainNav .navbar-collapse .navbar-sidenav,
   .content-wrapper {
      transition: none !important;
   }
}

@media (max-width: 1023px) {
   #mainNav .navbar-collapse .navbar-sidenav {
      width: 100% !important;
      background-color: #FFFFFF !important;
      border-bottom: 1px solid #EDEDEE !important;
      padding: var(--mp-space-sm) 0 !important;
   }

   .content-wrapper {
      margin-left: 0 !important;
      margin-top: 0 !important;
      padding: 0 !important;
      padding-top: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      background-color: #EDEDEE !important;
   }
}

/* Itens de Navegação da Sidebar */
.mp-nav-link,
#mainNav .navbar-collapse .navbar-sidenav .nav-link {
   display: flex !important;
   align-items: center !important;
   gap: 12px !important;
   padding: 10px 10px !important;
   color: #555555 !important;
   background-color: transparent !important;
   font-family: var(--mp-font-family) !important;
   font-size: var(--mp-font-subheading-sm) !important;
   font-weight: 500 !important;
   text-decoration: none !important;
   border: none !important;
   border-left: none !important;
   transition: color var(--mp-transition-fast) !important;
}

.mp-nav-icon,
#mainNav .navbar-collapse .navbar-sidenav .mp-nav-icon {
   width: 20px !important;
   height: 20px !important;
   stroke-width: 2px !important;
   stroke: #6B7280 !important;
   color: #6B7280 !important;
   transition: stroke var(--mp-transition-fast) !important;
   flex-shrink: 0;
}

.mp-nav-text,
#mainNav .navbar-collapse .navbar-sidenav .nav-link-text {
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   color: inherit !important;
   text-decoration: none !important;
}

/* Hover nos itens da Sidebar (Habilitados) */
@media (hover: hover) {

   .navbar-sidenav .nav-item:not(.mp-nav-disabled) .mp-nav-link:hover,
   #mainNav .navbar-collapse .navbar-sidenav .nav-item:not(.mp-nav-disabled) .nav-link:hover {
      background-color: transparent !important;
      color: var(--mp-primary) !important;
      text-decoration: none !important;
      border: none !important;
   }

   .navbar-sidenav .nav-item:not(.mp-nav-disabled) .mp-nav-link:hover .mp-nav-icon,
   #mainNav .navbar-collapse .navbar-sidenav .nav-item:not(.mp-nav-disabled) .nav-link:hover .mp-nav-icon {
      stroke: var(--mp-primary) !important;
      color: var(--mp-primary) !important;
   }
}

/* Item Ativo da Sidebar (Ex: Resumo / Plano quando ativo) - Apenas mudança de cores */
.navbar-sidenav .nav-item.active .mp-nav-link,
#mainNav .navbar-collapse .navbar-sidenav li.active a,
#mainNav .navbar-collapse .navbar-sidenav li.active a.nav-link {
   background-color: transparent !important;
   background: transparent !important;
   color: var(--mp-primary) !important;
   font-weight: 700 !important;
   border: none !important;
   border-left: none !important;
   text-decoration: none !important;
}

.navbar-sidenav .nav-item.active .mp-nav-icon,
#mainNav .navbar-collapse .navbar-sidenav li.active a .mp-nav-icon,
#mainNav .navbar-collapse .navbar-sidenav li.active a.nav-link svg {
   stroke: var(--mp-primary) !important;
   color: var(--mp-primary) !important;
}

.navbar-sidenav .nav-item.active .nav-link-text,
#mainNav .navbar-collapse .navbar-sidenav li.active a.nav-link .nav-link-text {
   color: var(--mp-primary) !important;
   font-weight: 700 !important;
   text-decoration: none !important;
}

/* Itens Desabilitados (Quando sem cliente selecionado) */
.navbar-sidenav .nav-item.mp-nav-disabled .mp-nav-link,
.navbar-sidenav .nav-item .mp-nav-link.is-disabled,
#mainNav .navbar-collapse .navbar-sidenav .nav-item.mp-nav-disabled a {
   opacity: 0.40 !important;
   cursor: not-allowed !important;
   pointer-events: none !important;
   color: #9CA3AF !important;
   background: transparent !important;
   border: none !important;
}

.navbar-sidenav .nav-item.mp-nav-disabled .mp-nav-icon,
.navbar-sidenav .nav-item .mp-nav-link.is-disabled .mp-nav-icon,
#mainNav .navbar-collapse .navbar-sidenav .nav-item.mp-nav-disabled a svg {
   stroke: #9CA3AF !important;
   color: #9CA3AF !important;
}

/* Item Menu Toggler */
.mp-sidebar-menu-item {
   margin-top: auto !important;
   padding-top: var(--mp-space-xs) !important;
}

/* Branding de Rodapé da Sidebar */
.mp-sidebar-footer {
   padding: 16px 12px !important;
   text-align: center !important;
}

.mp-sidebar-logo-img {
   max-width: 125px !important;
   height: auto !important;
   display: block !important;
   margin: 0 auto !important;
   object-fit: contain !important;
}

/* ==========================================================================
   10. AUTOCOMPLETE DROPDOWN (JQUERY UI)
   ========================================================================== */
.ui-autocomplete {
   z-index: 1060 !important;
   background-color: #FFFFFF !important;
   border: 1px solid #EDEDEE !important;
   border-radius: 16px !important;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
   padding: 8px !important;
   max-height: 340px !important;
   overflow-y: auto !important;
   overflow-x: hidden !important;
   font-family: var(--mp-font-family) !important;
   margin-top: 6px !important;
}

.ui-autocomplete .ui-menu-item {
   list-style: none !important;
   margin: 0 !important;
   padding: 0 !important;
}

.ui-autocomplete .ui-menu-item-wrapper {
   display: block !important;
   padding: 10px 14px !important;
   border-radius: var(--mp-radius-md) !important;
   font-size: var(--mp-font-body-default) !important;
   font-weight: 500 !important;
   color: #374151 !important;
   border: none !important;
   background: transparent !important;
   cursor: pointer !important;
   transition: all var(--mp-transition-fast) !important;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper:hover {
   background-color: #F0FDF4 !important;
   color: var(--mp-primary) !important;
   font-weight: 600 !important;
   border: none !important;
   margin: 0 !important;
}

/* Barra de rolagem contida e suave para o dropdown */
.ui-autocomplete {
   scrollbar-width: thin;
   scrollbar-color: #D1D5DB transparent;
}

.ui-autocomplete::-webkit-scrollbar {
   width: 8px;
}

.ui-autocomplete::-webkit-scrollbar-track {
   background: transparent;
   margin: 12px 0 !important;
   /* Afasta o scroll das pontas arredondadas */
}

.ui-autocomplete::-webkit-scrollbar-thumb {
   background-color: #D1D5DB;
   border-radius: 10px;
   border: 2px solid #FFFFFF;
   /* Dá o respiro branco */
}

.ui-autocomplete::-webkit-scrollbar-thumb:hover {
   background-color: #9CA3AF;
}

/* ==========================================================================
   TELA 03: HUB DE 14 MÓDULOS DE PLANO (/plano)
   ========================================================================== */
.mp-hub-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-bottom: 24px;
   padding-top: 8px;
}

.mp-hub-greeting {
   font-family: var(--mp-font-family);
   font-size: 13px;
   font-weight: 500;
   color: #64748B;
   margin-bottom: 2px;
}

.mp-hub-client-name {
   font-family: var(--mp-font-family);
   font-size: 24px;
   font-weight: 700;
   color: #111827;
   margin: 0;
   line-height: 1.2;
   letter-spacing: -0.5px;
}

.mp-hub-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 16px;
   width: 100%;
}

@media (max-width: 1400px) {
   .mp-hub-grid {
      grid-template-columns: repeat(4, 1fr);
   }
}

@media (max-width: 992px) {
   .mp-hub-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 576px) {
   .mp-hub-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

.mp-hub-card {
   background-color: #FFFFFF;
   border: 1px solid #E6F2EC;
   border-radius: 16px;
   padding: 18px 16px;
   min-height: 114px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: space-between;
   text-decoration: none !important;
   position: relative;
   cursor: pointer;
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.25s ease,
      border-color 0.25s ease;
}

@media (hover: hover) {
   .mp-hub-card.active:hover {
      background-color: #FFFFFF;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.115);
      border-color: #E2E8F0;
   }
}

.mp-hub-card-icon-box {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background-color: #F0FDF4;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #16A34A;
   flex-shrink: 0;
   transition: background-color 0.25s ease;
}

.mp-hub-card.active:hover .mp-hub-card-icon-box {
   background-color: #DCFCE7;
}

.mp-hub-card-icon-box svg,
.mp-hub-card-icon-box i,
.mp-hub-card-icon-box img {
   width: 20px !important;
   height: 20px !important;
   display: block !important;
   object-fit: contain !important;
}

.mp-hub-card-icon-box ion-icon {
   font-size: 20px !important;
   color: #16A34A !important;
}

.mp-hub-card-title {
   font-family: var(--mp-font-family);
   font-size: 13.5px;
   font-weight: 600;
   color: #16A34A;
   margin: 0;
   line-height: 1.2;
   letter-spacing: -0.2px;
}

/* Estado Bloqueado / Inativo */
.mp-hub-card:not(.active) {
   opacity: 0.45;
   cursor: not-allowed;
   filter: grayscale(0.6);
}

.mp-hub-card:not(.active):hover {
   transform: none;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
   border-color: #EDEDEE;
}

/* ==========================================================================
   SHELL MOBILE & BOTTOM NAVIGATION BAR (Exibição estrita apenas em < 1024px)
   ========================================================================== */
.mp-topbar-mobile-container {
   display: none !important;
}

.mp-bottom-nav {
   display: none !important;
}

.mp-search-mobile .mp-input-pill {
   height: 38px !important;
   font-size: 13px !important;
   border-radius: 50px !important;
   background-color: #F8FAFC !important;
}

.mp-bottom-nav-item {
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 4px !important;
   text-decoration: none !important;
   color: #6B7280 !important;
   font-family: var(--mp-font-family) !important;
   font-size: 10.5px !important;
   font-weight: 500 !important;
   flex: 1 !important;
   height: 100% !important;
   transition: color var(--mp-transition-fast) !important;
}

.mp-bottom-nav-item svg {
   width: 20px !important;
   height: 20px !important;
   stroke: #6B7280 !important;
   stroke-width: 2px !important;
   transition: stroke var(--mp-transition-fast) !important;
}

.mp-bottom-nav-item.active,
.mp-bottom-nav-item:hover {
   color: #16A34A !important;
   font-weight: 600 !important;
}

.mp-bottom-nav-item.active svg,
.mp-bottom-nav-item:hover svg {
   stroke: #16A34A !important;
}

/* ==========================================================================
   BREAKPOINTS RESPONSIVOS (< 1024px e < 768px)
   ========================================================================== */
@media (max-width: 1023px) {

   #mainNav.mp-topbar,
   .mp-topbar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      min-height: auto !important;
      max-height: none !important;
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;
      background-color: #FFFFFF !important;
      border-bottom: 1px solid #EDEDEE !important;
      border-bottom-left-radius: 20px !important;
      border-bottom-right-radius: 20px !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
      z-index: 1030 !important;
   }

   .mp-topbar-mobile-container {
      display: flex !important;
      padding: 12px 16px 12px !important;
      flex-direction: column !important;
      width: 100% !important;
      background: #FFFFFF !important;
      border-bottom-left-radius: 20px !important;
      border-bottom-right-radius: 20px !important;
   }

   .mp-bottom-nav {
      position: fixed !important;
      bottom: 0px !important;
      left: 0px !important;
      right: 0px !important;
      width: 100vw !important;
      max-width: 100vw !important;
      height: 74px !important;
      padding: 10px 0 12px !important;
      margin: 0 !important;
      background-color: #FFFFFF !important;
      border: none !important;
      border-top: 1px solid #E2E8F0 !important;
      border-top-left-radius: 20px !important;
      border-top-right-radius: 20px !important;
      border-bottom-left-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-around !important;
      z-index: 1050 !important;
      box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
      transform: translateZ(0) !important;
   }

   body.fixed-nav {
      padding-top: 112px !important;
      padding-bottom: 86px !important;
   }

   .content-wrapper {
      margin-left: 0 !important;
      padding: 0px 3px 30px !important;
      background-color: #F8FAFC !important;
   }
}

@media (max-width: 768px) {

   /* Dashboard do Cliente (/painel) - Empilhamento e Mini-cards Horizontais */
   .mp-dashboard-card {
      padding: 18px 16px !important;
      margin-bottom: 16px !important;
   }

   .mp-dashboard-card-finance {
      padding: 18px 16px !important;
   }

   .mp-dashboard-card-finance .row>div {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      margin-bottom: 8px !important;
   }

   .mp-dashboard-card-finance .row>div:last-child {
      margin-bottom: 0 !important;
   }

   .mp-metric-card {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 12px 16px !important;
      min-height: 52px !important;
   }

   .mp-metric-header {
      margin-bottom: 0 !important;
      gap: 10px !important;
   }

   .mp-metric-label {
      font-size: 12px !important;
   }

   .mp-metric-value {
      font-size: 16.5px !important;
   }

   /* Hub dos 14 Módulos (/plano) - 2 Colunas */
   .mp-hub-header {
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
   }

   .mp-hub-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 12px !important;
   }

   .mp-hub-card {
      padding: 16px 14px !important;
      min-height: 104px !important;
   }
}

/* ==========================================================================
   DASHBOARD DO PLANEJADOR (/painel/planejador)
   Mantém o mesmo soft-UI, ritmo e hierarquia visual do dashboard do cliente.
   ========================================================================== */
.mp-planner-dashboard {
   padding: 16px 18px 28px;
}

.mp-planner-dashboard>.row {
   margin-right: -12px;
   margin-left: -12px;
}

.mp-planner-dashboard>.row>[class*="col-"] {
   padding-right: 12px;
   padding-left: 12px;
}

.mp-planner-dashboard .mp-dashboard-card {
   min-height: 178px;
}

.mp-planner-dashboard .mp-card-title {
   margin-bottom: 20px;
}

.mp-planner-profile {
   display: flex;
   align-items: center;
   min-height: 82px;
}

.mp-planner-avatar-wrap {
   display: flex;
   flex: 0 0 auto;
   margin-right: 18px;
}

.mp-planner-profile .mp-planner-avatar {
   width: 68px;
   height: 68px;
}

.mp-planner-details {
   min-width: 0;
}

.mp-planner-details .mp-planner-name,
.mp-planner-details .mp-planner-meta {
   overflow-wrap: anywhere;
}

.mp-planning-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 12px;
}

.mp-planning-metric {
   display: flex;
   min-width: 0;
   min-height: 86px;
   padding: 14px 16px;
   flex-direction: column;
   justify-content: space-between;
   background-color: #F8FAFC;
   border: 1px solid #EDEDEE;
   border-radius: 12px;
}

.mp-planning-label {
   color: #64748B;
   font-family: var(--mp-font-family);
   font-size: 12px;
   font-weight: 500;
   line-height: 1.3;
}

.mp-planning-value {
   color: #16A34A;
   font-family: var(--mp-font-family);
   font-size: 20px;
   font-weight: 700;
   line-height: 1.2;
}

.mp-planning-value.is-danger {
   color: #DC2626;
}

.mp-planner-info-card,
.mp-planner-quality-card,
.mp-planner-tasks-card {
   min-height: 180px;
}

.mp-birthday-content {
   display: flex;
   align-items: center;
   min-height: 92px;
   gap: 20px;
}

.mp-birthday-icon {
   width: 72px;
   height: 72px;
   flex: 0 0 72px;
   object-fit: contain;
}

.mp-planner-card-content {
   min-width: 0;
   color: #374151;
   font-family: var(--mp-font-family);
   font-size: 13px;
   line-height: 1.55;
}

.mp-planner-card-content>p:last-child {
   margin-bottom: 0 !important;
}

.mp-planner-stars {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 86px;
   color: #AEB4BA;
   gap: 8px;
}

.mp-planner-stars .fa {
   font-size: 40px;
}

.mp-planner-tasks-card .table {
   margin-bottom: 0;
}

@media (max-width: 1399px) {
   .mp-planning-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 991px) {
   .mp-planner-dashboard {
      padding: 16px 12px 24px;
   }

   .mp-planning-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 575px) {
   .mp-planning-grid {
      grid-template-columns: 1fr;
   }

   .mp-planning-metric {
      min-height: 64px;
      flex-direction: row;
      align-items: center;
   }

   .mp-birthday-content {
      align-items: flex-start;
   }

   .mp-planner-stars {
      gap: 4px;
   }

   .mp-planner-stars .fa {
      font-size: 32px;
   }
}

/* ==========================================================================
   SUB-HEADER DAS PÁGINAS INTERNAS (.header-dark) - PADRÃO BRANCO
   Markup legado repetido nas views: .header-dark > h2.titulo [+ small.nome-cliente]
   + nav.nav > a.nav-link(.active). Referência visual: .mp-page-sub-header de
   app/view/balanco/graficos.html. Estados (hover/foco) declarados aqui para não
   herdar o texto branco de um alphamar.css antigo em cache.
   ========================================================================== */
.header-dark {
   background-color: #FFFFFF;
   border-bottom: 1px solid #E2E8F0;
   padding: 18px 16px 0;
}

.header-dark .titulo {
   font-family: var(--mp-font-family, 'Inter', sans-serif);
   font-size: 20px;
   font-weight: 600;
   line-height: 26.88px;
   color: #16A34A;
   margin: 0 0 10px;
   padding: 0;
}

.header-dark .titulo a,
.header-dark .titulo a:hover {
   color: inherit;
}

/* Flutua na linha do título; a margem centraliza a linha de 21px na linha de 26.88px
   do título, como o align-items:center da referência. O padding vem de .nome-cliente. */
.header-dark .nome-cliente {
   font-size: 14px;
   font-weight: 700;
   line-height: 21px;
   margin-top: 2.94px;
   color: #16A34A;
}

.header-dark .nav {
   align-items: center;
   column-gap: 36px;
}

.header-dark .nav-link,
.header-dark .nav-link:focus {
   font-family: var(--mp-font-family, 'Inter', sans-serif);
   font-size: 13.5px;
   font-weight: 500;
   color: #64748B;
   width: auto;
   padding: 0 0 10px;
   position: relative;
   border-bottom: none;
   text-decoration: none;
   transition: color 0.2s ease;
}

.header-dark .nav-link:hover {
   color: #16A34A;
   text-decoration: none;
}

.header-dark .nav-link.active,
.header-dark .nav-link.active:focus {
   color: #16A34A;
   font-weight: 600;
   border-bottom: none;
}

.header-dark .nav-link.active::after {
   content: '';
   position: absolute;
   bottom: 0px;
   left: -4px;
   right: -4px;
   height: 2px;
   background-color: #16A34A;
   border-radius: 2px;
}

.header-dark .nav-link.disabled {
   color: #64748B;
   opacity: 0.4;
   pointer-events: none;
}

@media (max-width: 991px) {
   .header-dark {
      padding: 10px 16px 0;
   }
}

/* ==========================================================================
   CARDS DE GRÁFICOS & COMPONENTES VISUAIS (ORÇAMENTO E BALANÇO)
   ========================================================================== */

/* Card de Gráficos Soft UI */
.mp-chart-card {
   background-color: #FFFFFF;
   border: 1px solid #E2E8F0;
   border-radius: 16px;
   padding: 24px 28px;
   margin-bottom: 20px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.03);
}

.mp-chart-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
}

.mp-chart-card-title {
   font-family: var(--mp-font-family);
   font-size: 18px;
   font-weight: 700;
   color: #16A34A;
   margin: 0;
}

.mp-passivos-row {
   max-width: 960px;
   margin: 0 auto !important;
   padding: 0 clamp(16px, 4vw, 40px);
   width: 100%;
}

/* Toggle Pill Mês / Ano */
.mp-toggle-pill {
   display: inline-flex;
   align-items: center;
   background-color: #F1F5F9;
   border-radius: 50px;
   padding: 3px;
   border: 1px solid #E2E8F0;
}

.mp-toggle-pill-btn {
   font-family: var(--mp-font-family);
   font-size: 12px;
   font-weight: 600;
   padding: 5px 18px;
   border-radius: 50px;
   color: #64748B;
   text-decoration: none !important;
   cursor: pointer;
   background: transparent;
   border: none;
   transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mp-toggle-pill-btn.active {
   background-color: #16A34A;
   color: #FFFFFF !important;
   box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}

/* Donut C3.js Moderno com Centro */
.mp-donut-box {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 220px;
}

.mp-donut-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   pointer-events: none;
   z-index: 2;
}

.mp-donut-center-label {
   font-family: var(--mp-font-family);
   font-size: 11px;
   font-weight: 500;
   color: #64748B;
   margin-bottom: 2px;
   text-transform: capitalize;
}

.mp-donut-center-value {
   font-family: var(--mp-font-family);
   font-size: 19px;
   font-weight: 700;
   color: #111827;
   line-height: 1.1;
}

/* Legendas Laterais dos Gráficos */
.mp-donut-legend-list {
   display: flex;
   flex-direction: column;
   gap: 10px;
   justify-content: center;
   width: 100%;
}

.mp-donut-legend-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-family: var(--mp-font-family);
   font-size: 12.5px;
   cursor: pointer;
   padding: 3px 6px;
   border-radius: 6px;
   transition: background-color 0.15s ease;
}

.mp-donut-legend-item:hover {
   background-color: #F8FAFC;
}

.mp-donut-legend-left {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #374151;
   font-weight: 500;
}

.mp-donut-legend-bullet {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
}

.mp-donut-legend-right {
   display: flex;
   align-items: center;
   gap: 6px;
   font-weight: 600;
   color: #111827;
}

.mp-donut-legend-percent {
   color: #64748B;
   font-weight: 500;
}

/* Barras de Trabalho por Dia */
.mp-work-days-list {
   display: flex;
   flex-direction: column;
   gap: 14px;
   width: 100%;
   padding-top: 10px;
}

.mp-work-days-row {
   display: flex;
   align-items: center;
   gap: 14px;
   font-family: var(--mp-font-family);
   font-size: 12.5px;
}

.mp-work-days-label {
   width: 120px;
   flex-shrink: 0;
   color: #374151;
   font-weight: 500;
}

.mp-work-days-track {
   flex: 1;
   height: 10px;
   background-color: #E2E8F0;
   border-radius: 50px;
   overflow: hidden;
   position: relative;
}

.mp-work-days-fill {
   height: 100%;
   border-radius: 50px;
   transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mp-work-days-value {
   width: 32px;
   text-align: right;
   font-weight: 600;
   font-size: 13px;
   flex-shrink: 0;
}

@media (max-width: 991px) {
   .mp-page-sub-header {
      padding: 12px 16px 0 !important;
   }

   .mp-chart-card {
      padding: 18px 16px;
   }

   .mp-donut-box {
      min-height: 180px;
   }
}

/* ==========================================================================
   BALANÇO PATRIMONIAL GRÁFICOS - ESTILOS COMPLEMENTARES
   ========================================================================== */
.mp-balanco-grid-col {
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
}

.mp-balanco-col-title {
   font-family: var(--mp-font-family);
   font-size: 13.5px;
   font-weight: 700;
   color: #111827;
   margin-bottom: 12px;
}

.mp-balanco-donut-row {
   display: flex;
   align-items: center;
   gap: 16px;
   width: 100%;
}

.mp-balanco-donut-box {
   flex: 0 0 var(--mp-donut-dim, clamp(135px, 11vw, 185px));
   width: var(--mp-donut-dim, clamp(135px, 11vw, 185px));
   height: var(--mp-donut-dim, clamp(135px, 11vw, 185px));
   min-height: var(--mp-donut-dim, clamp(135px, 11vw, 185px));
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   align-self: center;
   margin: 0;
}

.mp-balanco-donut-chart {
   width: 100% !important;
   height: 100% !important;
}

.mp-balanco-donut-chart svg {
   overflow: visible;
}

.mp-balanco-legend-box {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
}

.mp-legend-col-compact {
   gap: 4px !important;
}

.mp-legend-col-compact .mp-balanco-legend-item,
.mp-legend-col-compact .mp-legend-row {
   padding: 1px 4px !important;
}

.mp-balanco-legend-item {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   font-family: var(--mp-font-family);
   font-size: 12px;
   padding: 3px 6px;
   border-radius: 6px;
   transition: background-color 0.15s ease;
   cursor: pointer;
}

.mp-balanco-legend-item:hover {
   background-color: #F8FAFC;
}

.mp-balanco-legend-item-title {
   font-weight: 600;
   line-height: 1.2;
}

.mp-balanco-legend-item-sub {
   font-size: 10.5px;
   color: #64748B;
   font-weight: 400;
}

.mp-balanco-legend-item-val {
   font-weight: 700;
   font-size: 12.5px;
   text-align: right;
   line-height: 1.2;
}

.mp-balanco-legend-item-pct {
   font-size: 11px;
   color: #64748B;
   text-align: right;
   font-weight: 500;
}

/* Índices - Termômetros Verticais */
.mp-indices-row {
   display: flex;
   align-items: flex-end;
   justify-content: space-around;
   gap: 20px;
   padding: 30px 10px 10px;
   overflow-x: auto;
}

.mp-thermometer-col {
   display: flex;
   flex-direction: column;
   align-items: center;
   flex: 1;
   min-width: 110px;
   max-width: 140px;
}

.mp-thermometer-val {
   font-family: var(--mp-font-family);
   font-size: 13.5px;
   font-weight: 700;
   color: #0EA5E9;
   margin-bottom: 8px;
   text-align: center;
}

.mp-thermometer-container {
   width: 100px;
   height: 220px;
   background-color: #E2E8F0;
   border-radius: 10px;
   position: relative;
   display: flex;
   align-items: flex-end;
   overflow: visible;
}

.mp-thermometer-fill {
   width: 100%;
   border-radius: 0 0 10px 10px;
   transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   background-color: #0EA5E9;
}

.mp-thermometer-fill.full-radius {
   border-radius: 10px;
}

.mp-thermometer-ref-line {
   position: absolute;
   left: -24px;
   right: -24px;
   bottom: 60%;
   border-top: 1.5px dashed #EF4444;
   pointer-events: none;
   display: flex;
   justify-content: flex-end;
}

.mp-thermometer-ref-badge {
   font-size: 11px;
   color: #EF4444;
   font-weight: 600;
   position: absolute;
   right: -32px;
   top: -9px;
}

.mp-thermometer-label {
   font-family: var(--mp-font-family);
   font-size: 12px;
   font-weight: 500;
   color: #334155;
   margin-top: 16px;
   text-align: center;
   line-height: 1.3;
}

/* Badge de Ícones Finalidade */
.mp-finalidade-badge-icon {
   width: 24px;
   height: 24px;
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin-right: 8px;
   flex-shrink: 0;
}