/* Executive Calm — mais tecnológico e minimalista, mas acolhedor e confiável.
   Carregado depois de base.css: sobrescreve tokens + ajustes pontuais de
   densidade/forma, sem alterar a estrutura HTML gerada por study.js. */

:root {
  --green: #0e6b52;
  --green-bright: #34a883;
  --green-soft: #edf6f1;
  --blue: #4c6fe0;
  --amber: #c98a3d;
  --red: #c24b44;
  --shell: #16211c;
  --shell-2: #1e2e27;
  --canvas: #faf8f4;
  --surface: #fff;
  --surface-2: #fcfaf6;
  --ink: #1c231f;
  --muted: #6b7268;
  --line: #e7e2d9;
  --radius: 12px;
}

body { background: var(--canvas); }

/* Formas mais suaves e generosas em toda a superfície de botões/tags */
.primary-btn, .secondary-btn, .text-button { border-radius: var(--radius); }
.primary-btn { box-shadow: 0 8px 22px rgba(14, 107, 82, 0.16); }
.tag { border-radius: 999px; }
.filter-button, .search, .ticket-search, .composer-box { border-radius: var(--radius); }
.monogram, .rail-brand, .company-mark, .module-symbol, .mini-module,
.ticket-avatar, .contact-avatar, .mock-avatar, .channel-mark { border-radius: 10px; }
.rail-avatar, .ticket-avatar, .contact-avatar { border-radius: 50%; }

/* Marca real (assets/brand): wordmark no header da landing, ícone nos
   badges compactos sobre fundo escuro (rail/mock-rail/mobile-top). */
.brand-wordmark { display: block; height: 28px; width: auto; }
.rail-brand, .mini-mark { background: #fff; overflow: hidden; }
.rail-brand .brand-icon, .mini-mark .brand-icon {
  width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box;
}
.product-wordmark { display: block; height: 18px; width: auto; }

/* Landing: respiro maior e sombra mais difusa/calma no mockup do produto */
.landing::before { opacity: 0.22; }
.hero-copy h1 { letter-spacing: -0.025em; line-height: 1.04; }
.hero-copy .lead { line-height: 1.65; }
.hero-note { color: var(--muted); }
.hero-product {
  border-radius: 16px;
  border-color: #e7e0d3;
  box-shadow: 0 30px 70px rgba(28, 35, 31, 0.10), 0 6px 18px rgba(28, 35, 31, 0.06);
}
.hero-intel {
  border-radius: var(--radius);
  border-color: #2c463b;
  box-shadow: 0 20px 44px rgba(15, 25, 20, 0.16);
}
.suite-chip { border-radius: 8px; }

/* Hub: mantém os blocos escuros como sinal de confiança/inteligência,
   mas com tom quente e cantos suaves em vez de "dashboard corporativo frio" */
.hub-overview { border-radius: 16px; }
.hub-overview::after { border-color: rgba(52, 168, 131, 0.18); }
.module-composition { border-radius: var(--radius); }
.continuity { border-radius: var(--radius); border-color: #d8ead9; }
.aside-section { border-top-width: 3px; padding: 17px 18px; }
.next-action { border-radius: var(--radius); }

/* Dashboard: a tela mais densa hoje (textos em 7–9px, paddings de planilha).
   Aumenta moderadamente tipografia/respiro e ajusta as alturas fixas
   correspondentes para não cortar conteúdo dentro do overflow:hidden. */
.dashboard-page { grid-template-rows: auto 104px minmax(0, 1fr); }
.metric-band { border-top-width: 3px; }
.metric-cell { padding: 17px 18px 14px; }
.metric-cell .metric-label { font-size: 10px; }
.metric-cell .metric-value { font-size: 24px; margin: 8px 0 3px; }
.metric-cell.feature .metric-value { font-size: 28px; }
.metric-cell .metric-delta { font-size: 9px; }
.metric-cell .metric-meta { font-size: 8px; }

.panel { border-radius: var(--radius); }
.panel-head { min-height: 50px; padding: 0 16px; }
.panel-head h3 { font-size: 12px; }
.panel-head span { font-size: 9px; }
.funnel-body { padding: 18px 18px 16px; }
.funnel-summary b { font-size: 19px; }
.funnel-row { grid-template-columns: 100px minmax(0, 1fr) 66px; margin-bottom: 13px; }
.funnel-label b { font-size: 10px; }
.funnel-label small { font-size: 8px; }
.funnel-track { height: 27px; border-radius: 5px; }
.funnel-value b { font-size: 11px; }
.source-row { min-height: 33px; font-size: 9px; }
.exception { padding: 10px 0; }
.exception b { font-size: 9px; }
.exception p { font-size: 8px; }
.intelligence-panel { border-radius: var(--radius); padding: 19px; }
.intelligence-panel h3 { font-size: 16px; }
.intelligence-panel p { font-size: 10px; }

/* Workspace: mais ar entre tickets/mensagens; control-strip menos "alerta de planilha" */
.ticket-list { background: var(--surface-2); }
.ticket { min-height: 92px; padding: 14px 15px; }
.ticket-main p { font-size: 9px; }
.control-strip { padding: 0 16px; height: 40px; background: var(--green-soft); border-bottom-color: #dceade; }
.control-strip b { color: #0d5a44; }
.messages { padding: 18px 22px; gap: 13px; }
.message { border-radius: 10px 10px 10px 3px; padding: 10px 12px; font-size: 10px; }
.message.sent { border-radius: 10px 10px 3px 10px; }
.internal-note { border-radius: 8px; }
.context-scroll { padding: 15px 16px; }
.context-block { padding-bottom: 15px; margin-bottom: 15px; }
.commercial-cell { border-radius: 8px; }

/* Mobile: mesmo tom, mais cautela para não estourar as linhas já apertadas */
.mobile-top, .mobile-contact, .mobile-control { padding-left: 15px; padding-right: 15px; }
.mobile-messages .message { border-radius: 10px 10px 10px 3px; }
.mobile-messages .message.sent { border-radius: 10px 10px 3px 10px; }

/* Landing responsiva: base.css não tinha nenhum breakpoint para o hero —
   .hero-stage/.hero-product/.hero-intel são absolute + largura fixa (780/742/246px)
   e invadiam o texto abaixo de ~1180px. Abaixo disso, o hero empilha em coluna
   única e o mockup volta ao fluxo normal, com largura fluida. */

/* body/#app são fixos em 100dvh com overflow:hidden (pensado pro app-shell
   de tela única). Na landing empilhada o conteúdo cresce além da viewport,
   então libera o scroll vertical só quando a tela ativa é a landing. */
body[data-screen="landing"] { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; }
body[data-screen="landing"] #app { height: auto; }

@media (max-width: 1180px) {
  .landing-hero {
    height: auto;
    grid-template-columns: 1fr;
    row-gap: 28px;
    padding: 32px 0 40px;
  }
  .hero-copy { padding: 0; }
  .hero-copy h1 { font-size: 52px; max-width: none; }
  .hero-stage {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 640px;
    height: auto;
  }
  .hero-stage::before { display: none; }
  .hero-product {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 742 / 520;
    transform: none;
  }
  .hero-intel {
    position: relative;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin-top: 14px;
    box-sizing: border-box;
  }
  .journey-ribbon {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
  }
  .journey-steps { grid-template-columns: repeat(4, 1fr); row-gap: 22px; }
  .journey-steps::before { display: none; }
  .journey-suite { justify-self: start; }
}

@media (max-width: 640px) {
  .hero-copy h1 { font-size: 38px; }
  .landing-nav { display: none; }
  .journey-steps { grid-template-columns: repeat(2, 1fr); }
}
.mobile-composer .composer-box { border-radius: var(--radius); }