/* ==========================================================================
   CFOUP DESIGN SYSTEM v1.0
   --------------------------------------------------------------------------
   Fonte de verdade visual do CFOup.
   Usa tokens base compartilhados + componentes de relatório e app.

   Como importar:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="cfoup-design-system.css">

   Estrutura:
   1. Tokens (cores, tipografia, espaçamento, sombras, raios)
   2. Reset e base
   3. Tipografia
   4. Utilitários
   5. Componentes compartilhados (botões, inputs, cards, badges)
   6. Componentes de relatório (hero, tabs, KPI editorial, tabelas densas, etc)
   7. Componentes de app SaaS (topbar fina, sidebar, KPI denso, forms)
   8. Responsivo
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* --- Cores primárias --- */
  --cfoup-navy:        #071D3B;
  --cfoup-navy-deep:   #0A2647;
  --cfoup-navy-light:  #0E3A6B;
  --cfoup-blue:        #1567C8;
  --cfoup-cyan:        #38B8E8;
  --cfoup-green:       #36BA58;
  --cfoup-light-green: #7ED444;

  /* --- Neutros --- */
  --cfoup-ink:         #0F1B2D;   /* texto principal */
  --cfoup-ink-soft:    #243042;   /* texto corrido */
  --cfoup-ink-muted:   #3D4D66;   /* texto secundário */
  --cfoup-muted:       #5B6B82;   /* labels, legendas */
  --cfoup-line:        #E5EBF2;   /* bordas padrão */
  --cfoup-line-soft:   #EEF3F8;   /* bordas internas */
  --cfoup-bg:          #F7F9FC;   /* fundo da página */
  --cfoup-bg-subtle:   #FAFBFD;   /* fundo de seções */
  --cfoup-bg-hover:    #FAFCFF;   /* hover de linhas */
  --cfoup-white:       #FFFFFF;

  /* --- Status --- */
  --cfoup-pos:         #36BA58;   /* positivo / sucesso */
  --cfoup-neg:         #D14343;   /* negativo / erro */
  --cfoup-warn:        #E08B00;   /* atenção / alerta */
  --cfoup-neutral:     #8A99B0;   /* neutro */
  --cfoup-hl-bg:       #FFF8E1;   /* destaque amarelo suave */

  /* --- Tipografia --- */
  --cfoup-font-sans:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cfoup-font-serif:  'Fraunces', Georgia, serif;
  --cfoup-font-mono:   'SF Mono', Menlo, 'Roboto Mono', Consolas, monospace;

  /* --- Escalas tipográficas --- */
  --cfoup-text-xs:     11px;
  --cfoup-text-sm:     12px;
  --cfoup-text-base:   14px;
  --cfoup-text-md:     15px;
  --cfoup-text-lg:     17px;
  --cfoup-text-xl:     22px;
  --cfoup-text-2xl:    30px;
  --cfoup-text-3xl:    44px;

  /* --- Pesos --- */
  --cfoup-weight-light:    300;
  --cfoup-weight-regular:  400;
  --cfoup-weight-medium:   500;
  --cfoup-weight-semi:     600;
  --cfoup-weight-bold:     700;

  /* --- Espaçamento (8pt grid) --- */
  --cfoup-space-1:     4px;
  --cfoup-space-2:     8px;
  --cfoup-space-3:     12px;
  --cfoup-space-4:     16px;
  --cfoup-space-5:     20px;
  --cfoup-space-6:     24px;
  --cfoup-space-8:     32px;
  --cfoup-space-10:    40px;
  --cfoup-space-12:    48px;
  --cfoup-space-16:    64px;

  /* --- Raios --- */
  --cfoup-radius-sm:   4px;
  --cfoup-radius:      8px;
  --cfoup-radius-md:   10px;
  --cfoup-radius-lg:   12px;
  --cfoup-radius-xl:   14px;
  --cfoup-radius-pill: 20px;
  --cfoup-radius-full: 9999px;

  /* --- Sombras --- */
  --cfoup-shadow-sm:   0 1px 3px rgba(7,29,59,.04);
  --cfoup-shadow:      0 1px 3px rgba(7,29,59,.04), 0 8px 24px rgba(7,29,59,.04);
  --cfoup-shadow-md:   0 4px 12px rgba(7,29,59,.08);
  --cfoup-shadow-lg:   0 12px 32px rgba(7,29,59,.10);
  --cfoup-shadow-xl:   0 20px 48px rgba(7,29,59,.14);

  /* --- Transições --- */
  --cfoup-transition:  all .2s ease;
  --cfoup-transition-fast: all .15s ease;

  /* --- Layout --- */
  --cfoup-container:   1340px;
  --cfoup-container-app: 1140px;

  /* --- Gradients --- */
  --cfoup-gradient-navy: linear-gradient(135deg, var(--cfoup-navy) 0%, var(--cfoup-navy-deep) 60%, var(--cfoup-navy-light) 100%);
  --cfoup-gradient-hero-glow: radial-gradient(circle, rgba(56,184,232,.18) 0%, transparent 70%);
}


/* ==========================================================================
   2. RESET E BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{
  background: var(--cfoup-bg);
  color: var(--cfoup-ink);
  font-family: var(--cfoup-font-sans);
  font-size: var(--cfoup-text-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img{ max-width: 100%; height: auto; display: block; }
button{ font-family: inherit; cursor: pointer; }
a{ color: var(--cfoup-blue); text-decoration: none; transition: var(--cfoup-transition-fast); }
a:hover{ color: var(--cfoup-navy); }


/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
.cfoup-display{
  font-family: var(--cfoup-font-serif);
  font-weight: var(--cfoup-weight-medium);
  font-size: var(--cfoup-text-3xl);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--cfoup-navy);
}

.cfoup-h1{
  font-family: var(--cfoup-font-serif);
  font-weight: var(--cfoup-weight-medium);
  font-size: var(--cfoup-text-2xl);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--cfoup-navy);
}

.cfoup-h2{
  font-family: var(--cfoup-font-serif);
  font-weight: var(--cfoup-weight-medium);
  font-size: var(--cfoup-text-xl);
  line-height: 1.2;
  letter-spacing: -.005em;
  color: var(--cfoup-navy);
}

.cfoup-h3{
  font-family: var(--cfoup-font-sans);
  font-weight: var(--cfoup-weight-semi);
  font-size: var(--cfoup-text-lg);
  line-height: 1.3;
  color: var(--cfoup-navy);
}

.cfoup-eyebrow{
  font-size: var(--cfoup-text-xs);
  font-weight: var(--cfoup-weight-semi);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cfoup-blue);
}

.cfoup-label{
  font-size: 10.5px;
  font-weight: var(--cfoup-weight-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cfoup-muted);
}

.cfoup-lede{
  font-size: 15.5px;
  color: var(--cfoup-muted);
  line-height: 1.65;
  font-weight: var(--cfoup-weight-regular);
}

.cfoup-text-mono{
  font-family: var(--cfoup-font-mono);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   4. UTILITÁRIOS
   ========================================================================== */
.cfoup-container{
  max-width: var(--cfoup-container);
  margin: 0 auto;
  padding: 0 var(--cfoup-space-8);
}

.cfoup-container-app{
  max-width: var(--cfoup-container-app);
  margin: 0 auto;
  padding: 0 var(--cfoup-space-8);
}

/* Cores de status */
.cfoup-pos{ color: var(--cfoup-pos); }
.cfoup-neg{ color: var(--cfoup-neg); }
.cfoup-warn{ color: var(--cfoup-warn); }
.cfoup-muted{ color: var(--cfoup-muted); }

/* Backgrounds */
.cfoup-bg-navy{ background: var(--cfoup-navy); color: white; }
.cfoup-bg-gradient{ background: var(--cfoup-gradient-navy); color: white; }


/* ==========================================================================
   5. COMPONENTES COMPARTILHADOS
   ========================================================================== */

/* --- Botões --- */
.cfoup-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cfoup-space-2);
  padding: 11px 20px;
  font-family: inherit;
  font-size: var(--cfoup-text-base);
  font-weight: var(--cfoup-weight-semi);
  letter-spacing: .01em;
  border-radius: var(--cfoup-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--cfoup-transition-fast);
  white-space: nowrap;
}

.cfoup-btn-primary{
  background: var(--cfoup-navy);
  color: white;
}
.cfoup-btn-primary:hover{
  background: #0E2E50;
  transform: translateY(-1px);
  box-shadow: var(--cfoup-shadow-md);
}

.cfoup-btn-secondary{
  background: white;
  color: var(--cfoup-navy);
  border-color: var(--cfoup-line);
}
.cfoup-btn-secondary:hover{
  border-color: var(--cfoup-cyan);
  color: var(--cfoup-blue);
}

.cfoup-btn-ghost{
  background: transparent;
  color: var(--cfoup-navy);
  border: none;
}
.cfoup-btn-ghost:hover{
  background: var(--cfoup-line-soft);
  color: var(--cfoup-blue);
}

.cfoup-btn-pill{
  border-radius: var(--cfoup-radius-pill);
  padding: 7px 14px;
  font-size: var(--cfoup-text-sm);
  font-weight: var(--cfoup-weight-medium);
}

/* --- Inputs --- */
.cfoup-input{
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #D4DCE7;
  border-radius: var(--cfoup-radius);
  font-size: var(--cfoup-text-base);
  font-family: inherit;
  color: var(--cfoup-ink);
  background: white;
  transition: var(--cfoup-transition-fast);
}
.cfoup-input::placeholder{ color: #9AA7BA; font-weight: var(--cfoup-weight-regular); }
.cfoup-input:focus{
  outline: none;
  border-color: var(--cfoup-blue);
  box-shadow: 0 0 0 3px rgba(21,103,200,.1);
}

/* --- Card base --- */
.cfoup-card{
  background: white;
  border: 1px solid var(--cfoup-line);
  border-radius: var(--cfoup-radius-lg);
  padding: var(--cfoup-space-6);
  transition: var(--cfoup-transition);
}
.cfoup-card-hover:hover{
  border-color: var(--cfoup-cyan);
  transform: translateY(-2px);
  box-shadow: var(--cfoup-shadow-lg);
}

/* --- Badges --- */
.cfoup-badge{
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: var(--cfoup-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--cfoup-radius-sm);
}
.cfoup-badge-pos{ background: rgba(54,186,88,.1); color: var(--cfoup-pos); }
.cfoup-badge-neg{ background: rgba(209,67,67,.1); color: var(--cfoup-neg); }
.cfoup-badge-warn{ background: rgba(224,139,0,.1); color: var(--cfoup-warn); }
.cfoup-badge-info{ background: rgba(21,103,200,.12); color: var(--cfoup-blue); }
.cfoup-badge-neutral{ background: var(--cfoup-line-soft); color: var(--cfoup-muted); }


/* ==========================================================================
   6. COMPONENTES DE RELATÓRIO
   --------------------------------------------------------------------------
   Use em: relatórios de cliente, documentos editoriais, análises profundas.
   Estética: elegante, editorial, espaçada, tipografia serifa para títulos.
   ========================================================================== */

/* --- Hero (cabeçalho principal de relatório) --- */
.cfoup-hero{
  background: var(--cfoup-gradient-navy);
  color: white;
  padding: 40px 0 52px;
  position: relative;
  overflow: hidden;
}
.cfoup-hero::before{
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: var(--cfoup-gradient-hero-glow);
  pointer-events: none;
}
.cfoup-hero-top{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: var(--cfoup-space-8);
}
.cfoup-hero-logo{
  height: 72px; width: auto;
  mix-blend-mode: screen;
  filter: brightness(1.05);
}
.cfoup-hero-brand{
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: 20px;
}
.cfoup-hero-brand-line1{
  font-size: var(--cfoup-text-xs);
  letter-spacing: .18em;
  color: var(--cfoup-cyan);
  text-transform: uppercase;
  font-weight: var(--cfoup-weight-semi);
}
.cfoup-hero-brand-line2{
  font-size: 13px;
  color: #B8C8DC;
  letter-spacing: .04em;
  margin-top: 2px;
}
.cfoup-hero h1{
  font-family: var(--cfoup-font-serif);
  font-weight: var(--cfoup-weight-medium);
  font-size: var(--cfoup-text-3xl);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: 12px;
  color: white;
}
.cfoup-hero-sub{
  font-size: 16px;
  font-weight: var(--cfoup-weight-light);
  color: #B8C8DC;
  max-width: 1180px;
  line-height: 1.55;
}
.cfoup-hero-meta{
  margin-top: 28px;
  display: flex;
  gap: var(--cfoup-space-8);
  flex-wrap: wrap;
  font-size: var(--cfoup-text-xs);
  color: #8FA3BD;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cfoup-hero-meta span strong{
  color: white;
  font-weight: var(--cfoup-weight-medium);
  letter-spacing: 0;
  display: block;
  font-size: var(--cfoup-text-base);
  margin-top: 2px;
  text-transform: none;
}

/* --- Tabs (navegação principal com numeração) --- */
.cfoup-tabs-bar{
  background: white;
  border-bottom: 1px solid var(--cfoup-line);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(7,29,59,.04);
}
.cfoup-tabs{
  display: flex;
  max-width: var(--cfoup-container);
  margin: 0 auto;
  padding: 0 var(--cfoup-space-8);
  overflow-x: auto;
  scrollbar-width: none;
}
.cfoup-tabs::-webkit-scrollbar{ display: none; }
.cfoup-tab{
  flex: 0 0 auto;
  padding: 18px 20px;
  font-size: 13px;
  font-weight: var(--cfoup-weight-semi);
  color: var(--cfoup-muted);
  letter-spacing: .02em;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  border-bottom: 3px solid transparent;
  transition: var(--cfoup-transition);
  white-space: nowrap;
  text-decoration: none;
}
.cfoup-tab:hover{ color: var(--cfoup-blue); }
.cfoup-tab.active{
  color: var(--cfoup-navy);
  border-bottom-color: var(--cfoup-cyan);
}
.cfoup-tab-num{
  display: inline-block;
  font-size: 10px;
  color: var(--cfoup-cyan);
  font-weight: var(--cfoup-weight-bold);
  margin-right: var(--cfoup-space-2);
  font-family: var(--cfoup-font-serif);
  letter-spacing: .04em;
}
.cfoup-tab.active .cfoup-tab-num{ color: var(--cfoup-blue); }

/* --- KPI editorial (espaçado, Fraunces no valor) --- */
.cfoup-kpis{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cfoup-space-4);
  margin: var(--cfoup-space-6) 0 var(--cfoup-space-2);
}
.cfoup-kpis-3{ grid-template-columns: repeat(3, 1fr); }
.cfoup-kpis-5{ grid-template-columns: repeat(5, 1fr); }

.cfoup-kpi{
  background: white;
  padding: 20px 20px 18px;
  border-radius: var(--cfoup-radius-lg);
  border: 1px solid var(--cfoup-line);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}
.cfoup-kpi::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--cfoup-cyan);
}
.cfoup-kpi.pos::before{ background: var(--cfoup-pos); }
.cfoup-kpi.neg::before{ background: var(--cfoup-neg); }
.cfoup-kpi.warn::before{ background: var(--cfoup-warn); }
.cfoup-kpi.blue::before{ background: var(--cfoup-blue); }

.cfoup-kpi-label{
  font-size: 10.5px;
  font-weight: var(--cfoup-weight-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cfoup-muted);
  margin-bottom: var(--cfoup-space-3);
  line-height: 1.3;
}
.cfoup-kpi-value{
  font-family: var(--cfoup-font-serif);
  font-weight: var(--cfoup-weight-medium);
  font-size: 26px;
  color: var(--cfoup-navy);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-bottom: var(--cfoup-space-2);
}
.cfoup-kpi-value .cfoup-kpi-unit{
  font-size: var(--cfoup-text-md);
  color: var(--cfoup-muted);
  font-weight: var(--cfoup-weight-regular);
}
.cfoup-kpi-sub{
  font-size: 11.5px;
  color: var(--cfoup-muted);
  line-height: 1.5;
  margin-top: auto;
}
.cfoup-kpi-sub strong{ color: var(--cfoup-navy); font-weight: var(--cfoup-weight-semi); }

/* --- Seção operacional (card grande com header navy) --- */
.cfoup-section{
  background: white;
  border: 1px solid var(--cfoup-line);
  border-radius: var(--cfoup-radius-lg);
  overflow: hidden;
  margin-bottom: var(--cfoup-space-6);
  box-shadow: var(--cfoup-shadow);
}
.cfoup-section-head{
  background: var(--cfoup-gradient-navy);
  color: white;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cfoup-space-4);
  flex-wrap: wrap;
}
.cfoup-section-head h2{
  font-family: var(--cfoup-font-serif);
  font-size: var(--cfoup-text-xl);
  font-weight: var(--cfoup-weight-medium);
  color: white;
  letter-spacing: -.005em;
}
.cfoup-section-head h2 span{ color: var(--cfoup-cyan); }
.cfoup-section-head-src{
  font-size: var(--cfoup-text-xs);
  color: rgba(255,255,255,.72);
  letter-spacing: .04em;
}
.cfoup-section-body{ padding: var(--cfoup-space-8); }

/* --- Verdict (destaque azul com conclusão) --- */
.cfoup-verdict{
  background: #F0F4FA;
  border-left: 4px solid var(--cfoup-blue);
  padding: 16px 22px;
  margin-bottom: var(--cfoup-space-4);
  display: flex;
  gap: var(--cfoup-space-4);
  align-items: baseline;
  border-radius: 0 var(--cfoup-radius) var(--cfoup-radius) 0;
}
.cfoup-verdict-tag{
  font-size: 10.5px;
  font-weight: var(--cfoup-weight-bold);
  letter-spacing: .12em;
  color: var(--cfoup-blue);
  text-transform: uppercase;
  flex-shrink: 0;
}
.cfoup-verdict-text{
  font-family: var(--cfoup-font-serif);
  font-size: 19px;
  font-weight: var(--cfoup-weight-medium);
  color: var(--cfoup-navy);
  line-height: 1.35;
  letter-spacing: -.005em;
}

/* --- Headline (leitura em bloco amarelo suave) --- */
.cfoup-headline{
  background: linear-gradient(180deg, #FFFEF7 0%, #FFFAEB 100%);
  border-left: 4px solid var(--cfoup-warn);
  padding: 16px 22px;
  margin-bottom: 18px;
  border-radius: 0 var(--cfoup-radius) var(--cfoup-radius) 0;
}
.cfoup-headline-label{
  font-size: 10.5px;
  font-weight: var(--cfoup-weight-bold);
  letter-spacing: .12em;
  color: var(--cfoup-warn);
  text-transform: uppercase;
  margin-bottom: var(--cfoup-space-2);
}
.cfoup-headline p{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cfoup-ink-soft);
}
.cfoup-headline strong{ color: var(--cfoup-navy); font-weight: var(--cfoup-weight-semi); }

/* --- Alerts (3 níveis) --- */
.cfoup-alerts{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--cfoup-space-3);
  margin-bottom: var(--cfoup-space-4);
}
.cfoup-alert{
  border: 1px solid var(--cfoup-line);
  border-left-width: 4px;
  padding: 16px 18px;
  background: white;
  border-radius: 0 var(--cfoup-radius-md) var(--cfoup-radius-md) 0;
}
.cfoup-alert-critico{ border-left-color: var(--cfoup-neg); }
.cfoup-alert-atencao{ border-left-color: var(--cfoup-warn); }
.cfoup-alert-controle{ border-left-color: var(--cfoup-pos); }
.cfoup-alert-title{
  font-size: 14.5px;
  font-weight: var(--cfoup-weight-semi);
  color: var(--cfoup-navy);
  margin-bottom: 6px;
  line-height: 1.35;
}
.cfoup-alert-text{
  font-size: 13px;
  color: var(--cfoup-ink-muted);
  line-height: 1.55;
}
.cfoup-alert-text b{ color: var(--cfoup-navy); font-weight: var(--cfoup-weight-semi); }

/* --- Tabela editorial (grande, elegante) --- */
.cfoup-table-wrap{
  background: white;
  border-radius: var(--cfoup-radius-lg);
  box-shadow: var(--cfoup-shadow);
  overflow: hidden;
  margin: var(--cfoup-space-6) 0 var(--cfoup-space-4);
}
.cfoup-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cfoup-table thead th{
  background: var(--cfoup-bg-subtle);
  color: var(--cfoup-navy);
  font-weight: var(--cfoup-weight-semi);
  text-align: right;
  padding: 14px 12px;
  border-bottom: 2px solid var(--cfoup-line);
  font-size: var(--cfoup-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cfoup-table thead th:first-child{ text-align: left; padding-left: 24px; }
.cfoup-table tbody td{
  padding: 11px 12px;
  border-bottom: 1px solid var(--cfoup-line);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #1F2A3D;
}
.cfoup-table tbody td:first-child{
  text-align: left;
  padding-left: 24px;
  color: var(--cfoup-ink);
  font-weight: var(--cfoup-weight-medium);
}
.cfoup-table tbody tr:last-child td{ border-bottom: none; }
.cfoup-table tbody tr:hover td{ background: var(--cfoup-bg-hover); }

.cfoup-table tr.subtotal td{
  font-weight: var(--cfoup-weight-semi);
  background: #F4F8FD;
  color: var(--cfoup-navy);
}
.cfoup-table tr.total td{
  font-weight: var(--cfoup-weight-bold);
  background: var(--cfoup-navy);
  color: white;
}

/* --- Tabela densa (compacta, para apps SaaS) --- */
.cfoup-table-dense{
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.cfoup-table-dense th{
  background: var(--cfoup-bg-subtle);
  color: var(--cfoup-navy);
  font-weight: var(--cfoup-weight-semi);
  text-align: right;
  padding: 10px 12px;
  border-bottom: 2px solid var(--cfoup-line);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cfoup-table-dense th:first-child{ text-align: left; padding-left: 14px; }
.cfoup-table-dense td{
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid var(--cfoup-line);
  font-variant-numeric: tabular-nums;
}
.cfoup-table-dense td:first-child{
  text-align: left;
  padding-left: 14px;
  font-weight: var(--cfoup-weight-medium);
}

/* --- Synthesis (bloco navy com pontos-chave) --- */
.cfoup-synthesis{
  background: var(--cfoup-navy);
  color: white;
  border-radius: var(--cfoup-radius-xl);
  padding: 40px 36px;
  margin: var(--cfoup-space-6) 0;
}
.cfoup-synthesis-eyebrow{
  color: var(--cfoup-cyan);
  font-size: var(--cfoup-text-xs);
  font-weight: var(--cfoup-weight-semi);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.cfoup-synthesis h3{
  color: white;
  font-family: var(--cfoup-font-serif);
  font-weight: var(--cfoup-weight-medium);
  font-size: 22px;
  margin: 0 0 6px;
}
.cfoup-synthesis-points{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cfoup-space-8);
  margin-top: var(--cfoup-space-6);
}
.cfoup-synthesis-point h4{
  color: var(--cfoup-cyan);
  font-weight: var(--cfoup-weight-semi);
  font-size: var(--cfoup-text-xs);
  letter-spacing: .12em;
  margin-bottom: var(--cfoup-space-3);
}
.cfoup-synthesis-point p{
  color: #C8D4E5;
  font-size: 13.5px;
  line-height: 1.65;
}
.cfoup-synthesis-point p strong{ color: white; font-weight: var(--cfoup-weight-semi); }

/* --- Actions (bloco navy com lista numerada de ações) --- */
.cfoup-actions{
  background: var(--cfoup-navy);
  color: white;
  padding: var(--cfoup-space-6) 28px;
  margin-top: var(--cfoup-space-4);
  border-radius: var(--cfoup-radius-md);
}
.cfoup-actions h4{
  font-family: var(--cfoup-font-serif);
  font-size: var(--cfoup-text-base);
  font-weight: var(--cfoup-weight-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--cfoup-cyan);
}
.cfoup-actions ol{ list-style: none; counter-reset: cfoup-acts; }
.cfoup-actions li{
  counter-increment: cfoup-acts;
  padding: 10px 0 10px 38px;
  font-size: var(--cfoup-text-base);
  line-height: 1.6;
  position: relative;
  color: #D8E2F0;
}
.cfoup-actions li::before{
  content: counter(cfoup-acts);
  background: var(--cfoup-cyan);
  color: var(--cfoup-navy);
  font-family: var(--cfoup-font-serif);
  font-weight: var(--cfoup-weight-semi);
  width: 24px; height: 24px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  position: absolute;
  left: 0; top: 10px;
}
.cfoup-actions li b{ color: white; font-weight: var(--cfoup-weight-semi); }


/* ==========================================================================
   7. COMPONENTES DE APP SAAS
   --------------------------------------------------------------------------
   Use em: dashboards, aplicações internas, telas funcionais do MVP.
   Estética: mais densa, menos espaçada, foco em ação e dados ao vivo.
   ========================================================================== */

/* --- Topbar fina (app) --- */
.cfoup-topbar{
  background: white;
  border-bottom: 1px solid var(--cfoup-line);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.cfoup-topbar-left{ display: flex; align-items: center; gap: 14px; }
.cfoup-topbar-logo{ height: 32px; width: auto; }
.cfoup-topbar-title{
  font-size: var(--cfoup-text-base);
  font-weight: var(--cfoup-weight-semi);
  color: var(--cfoup-navy);
}
.cfoup-topbar-right{
  display: flex;
  align-items: center;
  gap: var(--cfoup-space-4);
  font-size: 13px;
  color: var(--cfoup-muted);
}

/* --- Sidebar (app) --- */
.cfoup-sidebar{
  background: white;
  border-right: 1px solid var(--cfoup-line);
  width: 240px;
  min-height: 100vh;
  padding: var(--cfoup-space-6) 0;
}
.cfoup-sidebar-section{
  padding: 0 var(--cfoup-space-4);
  margin-bottom: var(--cfoup-space-6);
}
.cfoup-sidebar-label{
  font-size: 10.5px;
  font-weight: var(--cfoup-weight-bold);
  letter-spacing: .1em;
  color: var(--cfoup-muted);
  text-transform: uppercase;
  margin-bottom: var(--cfoup-space-2);
  padding: 0 var(--cfoup-space-3);
}
.cfoup-sidebar-item{
  display: flex;
  align-items: center;
  gap: var(--cfoup-space-3);
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--cfoup-ink-muted);
  border-radius: var(--cfoup-radius);
  cursor: pointer;
  transition: var(--cfoup-transition-fast);
  font-weight: var(--cfoup-weight-medium);
}
.cfoup-sidebar-item:hover{
  background: var(--cfoup-bg);
  color: var(--cfoup-navy);
}
.cfoup-sidebar-item.active{
  background: #EEF3F9;
  color: var(--cfoup-blue);
  font-weight: var(--cfoup-weight-semi);
}

/* --- KPI denso (app) --- */
.cfoup-stat{
  background: white;
  border: 1px solid var(--cfoup-line);
  border-radius: var(--cfoup-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--cfoup-space-2);
}
.cfoup-stat-label{
  font-size: 11px;
  color: var(--cfoup-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: var(--cfoup-weight-semi);
}
.cfoup-stat-value{
  font-family: var(--cfoup-font-sans);
  font-size: 22px;
  font-weight: var(--cfoup-weight-bold);
  color: var(--cfoup-navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cfoup-stat-delta{
  font-size: 12px;
  font-weight: var(--cfoup-weight-medium);
}
.cfoup-stat-delta.up{ color: var(--cfoup-pos); }
.cfoup-stat-delta.down{ color: var(--cfoup-neg); }

/* --- Form group --- */
.cfoup-form-group{
  margin-bottom: var(--cfoup-space-4);
}
.cfoup-form-label{
  display: block;
  font-size: 10.5px;
  font-weight: var(--cfoup-weight-bold);
  color: var(--cfoup-navy);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--cfoup-space-2);
}


/* ==========================================================================
   8. RESPONSIVO
   ========================================================================== */
@media (max-width: 1300px) and (min-width: 769px){
  .cfoup-kpis-5{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px){
  .cfoup-container,
  .cfoup-container-app{ padding: 0 var(--cfoup-space-5); }

  .cfoup-tabs{ padding: 0 var(--cfoup-space-5); }
  .cfoup-tab{ padding: 14px 16px; font-size: 12px; }

  .cfoup-hero h1{ font-size: var(--cfoup-text-2xl); }
  .cfoup-hero-logo{ height: 56px; }
  .cfoup-hero-top{ gap: 14px; margin-bottom: 24px; }
  .cfoup-hero-brand{ padding-left: 14px; }

  .cfoup-kpis,
  .cfoup-kpis-3,
  .cfoup-kpis-5{ grid-template-columns: repeat(2, 1fr); }
  .cfoup-kpi{ min-height: auto; }

  .cfoup-synthesis-points{ grid-template-columns: 1fr; gap: 20px; }
  .cfoup-synthesis,
  .cfoup-actions{ padding: 24px 20px; }

  .cfoup-section-body{ padding: 20px 18px; }
  .cfoup-section-head{ padding: 14px 18px; }
  .cfoup-section-head h2{ font-size: 18px; }

  .cfoup-sidebar{ display: none; }
}