/*!
 * Entre Nuvens — brand.css
 * Tokens e componentes reutilizáveis para as telas NOVAS do marketplace
 * Serviços Entre Nuvens. Não altera nenhuma tela existente.
 *
 * Fonte da verdade: "Entre Nuvens C-level/identidade-visual.md"
 *   §4  — cor (escalas cobalto/mostarda/coral/neutro + tokens semânticos)
 *   §4b — tipografia (Space Grotesk display + Geist corpo)
 *   §6  — iconografia, espaçamento, radius, elevação, grid
 *
 * Este arquivo NÃO importa fontes — cada página carrega via <link> do
 * Google Fonts: Space Grotesk 500;600;700 + Geist 400;500;600;700.
 *
 * Autossuficiente: convive com o Tailwind CDN das páginas, mas não depende
 * dele — os componentes `en-*` funcionam sozinhos.
 */

:root {
  /* ---- Escala cobalto (marca, ação primária) ---- */
  --cobalto-50:  #F3F6FC;
  --cobalto-100: #E7ECF9;
  --cobalto-200: #C9D5F3;
  --cobalto-300: #95AEEA;
  --cobalto-400: #5A83E2;
  --cobalto-500: #2056D5;
  --cobalto-600: #1B48B1;
  --cobalto-700: #163B92;
  --cobalto-800: #123078;
  --cobalto-900: #0D2459;
  --cobalto-950: #07122C;

  /* ---- Escala mostarda (acento quente — NUNCA fundo grande) ---- */
  --mostarda-50:  #FBF9F3;
  --mostarda-100: #F8F4E8;
  --mostarda-200: #F0E7CC;
  --mostarda-300: #E4D39A;
  --mostarda-400: #D9BE63;
  --mostarda-500: #C9A42C;
  --mostarda-600: #A78925;
  --mostarda-700: #8A711E;
  --mostarda-800: #715C19;
  --mostarda-900: #544412;
  --mostarda-950: #2A2209;

  /* ---- Escala coral (semântico: alerta / erro — não decorativo) ---- */
  --coral-50:  #FCF5F3;
  --coral-100: #F9EAE6;
  --coral-200: #F3D1C8;
  --coral-300: #EBA594;
  --coral-400: #E47458;
  --coral-500: #D7431D;
  --coral-600: #B43718;
  --coral-700: #942E14;
  --coral-800: #792511;
  --coral-900: #5A1C0C;
  --coral-950: #2D0E06;

  /* ---- Escala neutro (quente — texto, bordas, superfícies) ---- */
  --neutro-50:  #F8F8F6;
  --neutro-100: #F2F0EE;
  --neutro-200: #E4E2DD;
  --neutro-300: #D0CDC8;
  --neutro-400: #AFABA1;
  --neutro-500: #8C877D;
  --neutro-600: #726D65;
  --neutro-700: #59564F;
  --neutro-800: #44413C;
  --neutro-900: #2E2C29;
  --neutro-950: #1B1A18;

  /* ---- Tokens semânticos (claro — identidade-visual.md §4.4) ---- */
  --bg:            #F0EEE9; /* Cloud Dancer */
  --card:          #FFFFFF;
  --fg:            #2E2C29;
  --primary:       #1B48B1;
  --primary-hover: #163B92;
  --accent:        #E4D39A;
  --accent-fg:     #544412;
  --muted:         #F2F0EE;
  --muted-fg:      #59564F;
  --border:        #E4E2DD;
  --destructive:   #B43718;
  --ring:          #1B48B1;

  /* ---- Radius (§6.3) — pill 999 reservado a badge/pill ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* ---- Elevação — sombra azulada derivada de cobalto-900 (§6.4) ---- */
  --elev-1: 0 1px 2px rgba(13,36,89,.06), 0 1px 1px rgba(13,36,89,.04);
  --elev-2: 0 4px 12px rgba(13,36,89,.08), 0 1px 3px rgba(13,36,89,.05);
  --elev-3: 0 12px 28px rgba(13,36,89,.12), 0 4px 8px rgba(13,36,89,.06);

  /* ---- Espaçamento base 8px (§6.2) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-6: 40px;
  --space-8: 64px;

  /* ---- Tipografia — fontes carregadas via <link> na própria página ---- */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   Reset mínimo — mantém os componentes previsíveis mesmo sem o preflight do
   Tailwind (autossuficiência do arquivo).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* ==========================================================================
   Acessibilidade — foco visível por teclado em qualquer elemento interativo,
   com o anel cobalto (§4.4). Vale para os componentes `en-*` e também para
   links/controles nativos da página que carregar este arquivo.
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* ==========================================================================
   Utilitário de tipografia
   ========================================================================== */
.font-display {
  font-family: var(--font-display);
}

/* ==========================================================================
   .en-container — largura máxima 1120px; padding 16px (24px a partir de 640px)
   ========================================================================== */
.en-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-3); /* 16px */
}
@media (min-width: 640px) {
  .en-container { padding-inline: var(--space-4); } /* 24px */
}

/* ==========================================================================
   .en-topbar — barra branca com borda inferior. O `.en-container` dentro
   dela vira automaticamente uma linha flex (logo à esquerda, ações à
   direita), sem precisar de classe extra.
   ========================================================================== */
.en-topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
.en-topbar .en-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  row-gap: var(--space-2);
  min-height: 64px;
  padding-block: var(--space-2);
}

/* ==========================================================================
   .en-footer — barra neutra com borda superior
   ========================================================================== */
.en-footer {
  border-top: 1px solid var(--border);
  color: var(--muted-fg);
  font-family: var(--font-body);
  font-size: 13px;
  padding-block: var(--space-4);
}

/* ==========================================================================
   .en-btn — botão primário cobalto (hover, foco, disabled).
   Variantes combinam com a base: class="en-btn en-btn-secondary".
   ========================================================================== */
.en-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--primary);
  box-shadow: var(--elev-1);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.en-btn:hover { background: var(--primary-hover); }
.en-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Secundário — borda neutra, fundo branco */
.en-btn-secondary {
  background: var(--card);
  color: var(--fg);
  border-color: var(--border);
  box-shadow: none;
}
.en-btn-secondary:hover { background: var(--muted); }

/* ---- Destaque animado do CTA principal (.en-btn-glint) ----
   Uma faixa de luz atravessa o botão devagar, sem parar: assim que ela sai
   pela direita, a próxima já entra pela esquerda. O halo cobalto respira no
   mesmo compasso e chega ao pico quando a luz está no meio do botão. A leitura
   é a história de cor da marca: o sol atravessando o azul do céu.

   O laço é contínuo de verdade, e isso impõe duas regras:
   1. `linear`, sempre. Qualquer easing acelera ou freia perto das pontas, e
      no reinício isso vira um solavanco visível.
   2. as pontas do curso são os limites EXATOS do recorte — a faixa parte de
      totalmente fora à esquerda (-105%, medido na própria largura dela) e
      termina totalmente fora à direita (255% = largura do botão ÷ largura da
      faixa). O salto do fim para o começo acontece entre dois estados
      invisíveis, então não há emenda: o último pixel sai à direita e o
      primeiro entra à esquerda no quadro seguinte.

   Por que não é o degradê de marca num botão (proibido em §3.5): isto não
   pinta o botão de cobalto→mostarda. É um REFLEXO — branco a 16% com um miolo
   quente a 34% numa faixa fina em movimento. O fundo do botão continua cobalto
   chapado do começo ao fim.

   Contraste (calculado, não estimado): a faixa passa POR CIMA do rótulo, então
   cada alfa foi escolhido pelo pior caso do branco sobre o fundo resultante —
   branco a 18% dá 5,0:1 e o miolo mostarda a 28% dá 4,98:1, ambos acima do
   4,5:1 da AA. Miolo a 42% ficaria mais bonito e cairia para 3,85:1: o
   destaque que sobrou foi para o halo, que vive FORA do botão e não disputa
   com texto nenhum.

   NADA disso roda para quem pediu menos movimento: fora do
   prefers-reduced-motion o botão fica exatamente como qualquer outro. */
.en-btn-glint { position: relative; overflow: hidden; isolation: isolate; }
.en-btn-glint::after {
  content: ''; position: absolute; pointer-events: none;
  top: -30%; height: 160%; left: 0; width: 40%;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .18) 35%,
    rgba(228, 211, 154, .28) 50%,
    rgba(255, 255, 255, .18) 65%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-105%) skewX(-16deg);
}
@media (prefers-reduced-motion: no-preference) {
  .en-btn-glint { animation: en-cta-halo 5.5s ease-in-out infinite; }
  .en-btn-glint::after { animation: en-cta-glint 5.5s linear infinite; }
  /* Com o cursor em cima a travessia acelera: o botão responde. */
  .en-btn-glint:hover::after { animation-duration: 2.2s; }
  .en-btn-glint:hover { animation-duration: 2.2s; }

  @keyframes en-cta-glint {
    from { transform: translateX(-105%) skewX(-16deg); }
    to   { transform: translateX(255%) skewX(-16deg); }
  }
  /* Dois anéis: o cobalto abre e some, e um fio mostarda bem tênue acende
     junto — é onde o calor da marca cabe sem encostar no rótulo. */
  /* Pico em 50%: é exatamente onde a faixa cruza o meio do botão. */
  @keyframes en-cta-halo {
    0%, 100% {
      box-shadow: var(--elev-1),
        0 0 0 0 rgba(32, 86, 213, 0),
        0 0 0 0 rgba(201, 164, 44, 0);
    }
    50% {
      box-shadow: var(--elev-2),
        0 0 0 7px rgba(32, 86, 213, .14),
        0 0 0 2px rgba(201, 164, 44, .22);
    }
  }
}
/* O afundar no toque é o único feedback que vale em tela sensível — e este
   não depende de animação, então vale para todo mundo. */
.en-btn-glint:active { transform: translateY(1px); }

/* Acento — mostarda com texto escuro (nunca branco; identidade-visual §4.2) */
.en-btn-accent {
  background: var(--accent);
  color: var(--accent-fg);
}
.en-btn-accent:hover { background: var(--mostarda-400); }

/* ==========================================================================
   .en-input / .en-select / .en-textarea — 16px (evita zoom automático no
   iOS), radius 6, alvo de toque ≥44px, foco com borda + anel cobalto.
   ========================================================================== */
.en-input,
.en-select,
.en-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .12s ease;
}
.en-textarea {
  min-height: 96px;
  padding-block: 12px;
  resize: vertical;
}

.en-input::placeholder,
.en-textarea::placeholder { color: var(--neutro-400); }

.en-input:focus,
.en-select:focus,
.en-textarea:focus {
  border-color: var(--primary);
}

.en-input:disabled,
.en-select:disabled,
.en-textarea:disabled {
  background: var(--muted);
  color: var(--muted-fg);
  cursor: not-allowed;
}

.en-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2359564F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ==========================================================================
   .en-card — superfície branca, radius 10, elevação 2, borda sutil.
   ========================================================================== */
.en-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  padding: var(--space-4);
}

/* ==========================================================================
   .en-badge — pill de status. Variantes: --ok / --warn / --err / --neutral.
   Coral (--err) é reservado a erro; mostarda (--warn) só em pill pequena,
   nunca como fundo grande.
   ========================================================================== */
.en-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .3em .7em;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.en-badge--ok      { background: var(--cobalto-100);  color: var(--cobalto-800); }
.en-badge--warn    { background: var(--mostarda-100); color: var(--mostarda-800); }
.en-badge--err     { background: var(--coral-100);    color: var(--coral-700); }
.en-badge--neutral { background: var(--muted);        color: var(--muted-fg); }

/* ==========================================================================
   .en-kicker — sobre-título: Space 600, 11px, caixa-alta, tracking +0.1em.
   mostarda-700: 4,71:1 sobre --card/branco (passa AA) — NÃO usar diretamente
   sobre --bg Cloud Dancer (4,06:1, reprova AA); ali use var(--mostarda-800).
   ========================================================================== */
.en-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mostarda-700);
}
/* Sobre o fundo Cloud Dancer o mostarda-700 reprova AA (4,06:1) — a variante
   escurece um degrau. Era repetida no <style> de 8 páginas. */
.en-kicker.on-bg { color: var(--mostarda-800); }

/* ==========================================================================
   .en-label — rótulo de UI: Geist 600, 12px, caixa-alta.
   ========================================================================== */
.en-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

/* ==========================================================================
   .en-empty — estado vazio: qualquer <svg> filho herda o traço 1.8px
   arredondado (§6.1); título e texto ficam centralizados.
   ========================================================================== */
.en-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  color: var(--muted-fg);
  font-family: var(--font-body);
}
.en-empty svg {
  width: 40px;
  height: 40px;
  stroke: var(--neutro-400);
  stroke-width: 1.8;
  fill: none;
}
.en-empty strong,
.en-empty h1,
.en-empty h2,
.en-empty h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg);
}
.en-empty p {
  font-size: 14px;
  max-width: 32ch;
}

/* ==========================================================================
   .en-skeleton — placeholder de carregamento (shimmer azulado).
   ========================================================================== */
.en-skeleton {
  display: block;
  height: 1em;
  min-width: 3em;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--muted) 25%, var(--border) 37%, var(--muted) 63%);
  background-size: 400% 100%;
  animation: en-skeleton-shimmer 1.4s ease infinite;
}
@keyframes en-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .en-skeleton { animation: none; }
}

/* ==========================================================================
   Header compartilhado (public/assets/brand/topbar.js)
   Marca do produto à esquerda, app switcher + assinatura Entre Nuvens +
   conta à direita. O CSS mora aqui porque as 10 páginas montam o mesmo
   header — replicá-lo em cada <style> foi o que este bloco veio matar.
   ========================================================================== */

/* ---- Esquerda: símbolo + nome do produto (estático no HTML, por CLS/SEO) -- */
.en-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}
/* Símbolo da marca à esquerda, em qualquer estado de sessão. O logo escrito
   vive no hero da home e, quando logado, dentro da pílula de conta. */
.en-brand-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.en-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--cobalto-600);
  line-height: 1.15;
}

/* ---- Direita: linha de ações ---- */
.en-topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
@media (min-width: 768px) { .en-topbar-right { gap: 14px; } }

/* ---- App switcher (grade 3×3) ---- */
.en-appmenu { position: relative; flex-shrink: 0; }
.en-appmenu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted-fg); cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.en-appmenu-btn:hover { background: var(--muted); color: var(--fg); }
.en-appmenu-btn[aria-expanded="true"] { background: var(--cobalto-50); color: var(--cobalto-700); border-color: var(--cobalto-200); }

/* z-index acima do Leaflet (que chega a ~1000 nos panes/controles da home) */
.en-appmenu-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
  width: 320px; max-width: calc(100vw - 16px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--elev-3);
  padding: var(--space-3);
}
.en-appmenu-pop[hidden] { display: none; }
@media (max-width: 639px) {
  /* Ancorado na tela, não no botão: em 375px o popover não cabe alinhado à direita do ícone. */
  .en-appmenu-pop { position: fixed; top: 60px; right: 8px; left: 8px; width: auto; max-width: none; }
}
.en-appmenu-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg);
  margin: 0 0 10px 4px;
}
.en-appmenu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.en-appmenu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--fg);
  transition: background-color .12s ease;
}
.en-appmenu-item:hover { background: var(--muted); }
.en-appmenu-item.is-current { background: var(--cobalto-50); }
.en-appmenu-mono { width: 34px; height: 34px; border-radius: 8px; display: block; }
.en-appmenu-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.2; }
.en-appmenu-here { font-size: 11px; color: var(--cobalto-700); font-weight: 600; }
.en-appmenu-ext { font-size: 11px; color: var(--muted-fg); }

/* Menu de conta — mesmas regras de posicionamento do switcher de produtos
   (z-index acima do Leaflet; ancorado na tela abaixo de 640px). */
.en-accountmenu-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
  width: 260px; max-width: calc(100vw - 16px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--elev-3);
  padding: var(--space-2);
}
.en-accountmenu-pop[hidden] { display: none; }
@media (max-width: 639px) {
  .en-accountmenu-pop { position: fixed; top: 60px; right: 8px; left: auto; width: 260px; }
}
.en-accountmenu-head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; }
.en-accountmenu-id { min-width: 0; }
.en-accountmenu-name {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--fg);
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.en-accountmenu-mail {
  font-size: 12.5px; color: var(--muted-fg); margin: 2px 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.en-accountmenu-extra { padding: 0 10px 10px; }
.en-accountmenu-group { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }
/* Título de seção do menu de conta ("Prestar serviços" / "Contratar pilotos").
   Mesma voz do .en-appmenu-title; o padding lateral casa com o dos itens
   (.en-accountmenu-item, 10px) para o texto alinhar na mesma coluna. */
.en-accountmenu-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg);
  margin: 4px 0 2px; padding: 0 10px;
}
.en-accountmenu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 40px; padding: 8px 10px;
  border: none; background: none; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 14.5px; color: var(--fg);
  text-align: left; text-decoration: none; cursor: pointer;
}
.en-accountmenu-item:hover { background: var(--muted); }
/* Itens com ícone (Conta e configurações, Atendimento): o padrão do menu é
   space-between por causa do "você está aqui" à direita — aqui o ícone e o
   rótulo precisam andar juntos, encostados à esquerda. */
.en-accountmenu-item.is-action { justify-content: flex-start; gap: 10px; }
.en-accountmenu-ic { flex-shrink: 0; }
.en-accountmenu-item.is-current { color: var(--primary); font-weight: 600; }
.en-accountmenu-here { font-size: 11px; font-weight: 600; color: var(--cobalto-700); }
/* Rodapé do menu de conta: termos e privacidade lado a lado, em corpo pequeno.
   Só o tamanho muda — a classe de item continua, senão a navegação por setas
   do popover passaria por cima deles. */
.en-accountmenu-legal {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 10px 2px;
}
.en-accountmenu-legal .en-accountmenu-item {
  width: auto; min-height: 0; padding: 2px 4px;
  font-size: 12px; color: var(--muted-fg);
}
.en-accountmenu-legal span { font-size: 12px; color: var(--muted-fg); }
.en-avatar-lg { width: 40px; height: 40px; font-size: 16px; }

/* ---- Conta ----
   Pílula "marca + você", no padrão do header do Google: o logo escrito da
   Entre Nuvens ao lado do avatar, num contorno arredondado. Só aparece
   logado — deslogado o lugar é do botão Entrar. */
.en-accountmenu { position: relative; flex-shrink: 0; }
.en-account-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 3px 3px 3px 12px; font: inherit; cursor: pointer;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-full); text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.en-account-pill[aria-expanded="true"] { background: var(--muted); border-color: var(--neutro-300); }
.en-account-pill:hover { background: var(--muted); border-color: var(--neutro-300); }
.en-account-pill-mark { height: 30px; width: auto; display: block; }
/* No celular a pílula encolhe para o avatar puro: com a marca escrita ela não
   cabe ao lado do símbolo, do menu de produtos e do Sair. */
@media (max-width: 639px) {
  .en-account-pill { padding: 0; border-color: transparent; background: none; }
  .en-account-pill-mark { display: none; }
}

.en-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: var(--cobalto-100); color: var(--cobalto-800);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  flex-shrink: 0; text-transform: uppercase;
}
@media (max-width: 639px) {
  /* Sem menu sanduíche (home), o link de nav não cabe ao lado da marca —
     a pílula de conta leva ao mesmo destino. */
  .en-nav-inline .en-navlink { display: none; }
}
a.en-avatar { text-decoration: none; }
a.en-avatar:hover { background: var(--cobalto-200); }
/* Foto de perfil da central (users.profile.picture). Com foto o círculo perde
   o fundo cobalto e vira a moldura da imagem; sem foto continua a inicial. */
.en-avatar.has-photo { background: var(--muted); overflow: hidden; }
.en-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ==========================================================================
   Entrada por áudio (public/assets/brand/audio-input.js)
   Este bloco era duplicado no <style> da home e de /nova-demanda; virou
   compartilhado quando o áudio passou a ser ANEXO do pedido (23/08/2026) e
   ganhou player com waveform.
   ========================================================================== */
.en-mic-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--card); color: var(--cobalto-600);
  cursor: pointer; transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.en-mic-btn:hover { border-color: var(--cobalto-300); background: var(--cobalto-50); }

/* Blindagem do componente contra o CSS da página que o hospeda. Um
   `.algum-bloco svg { margin-top: 8px }` escrito para outro ícone já derrubou
   estes 4px para fora do centro da bolinha — e o componente não tem como
   saber onde vai ser montado. Mesma lógica do fill="#fff" fixo nos glifos:
   o que é do componente, o componente garante. */
.en-mic-btn > svg, .en-mic-stop > svg, .en-mic-play > svg,
.en-mic-ghost-icon > svg, .en-mic-panel svg {
  margin: 0; padding: 0; vertical-align: middle; flex-shrink: 0;
}

.en-mic-panel { display: flex; flex-direction: column; gap: 8px; width: 100%; }
/* Durante a gravação o painel é uma linha só (bolinha, tempo, parar, cancelar). */
.en-mic-panel:has(.en-mic-dot) { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }

.en-mic-dot { width: 9px; height: 9px; border-radius: 9999px; background: var(--coral-500); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .en-mic-dot { animation: en-mic-pulse 1.4s ease-in-out infinite; }
  @keyframes en-mic-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
}
.en-mic-time { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--fg); }

.en-mic-stop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full); border: none;
  background: var(--cobalto-600); color: #fff; cursor: pointer;
}
.en-mic-ghost-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--card); color: var(--muted-fg); cursor: pointer;
}

/* ---- Player com waveform ---- */
.en-mic-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.en-mic-row audio:not([controls]) { display: none; }
.en-mic-play {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-full); border: none;
  background: var(--cobalto-600); color: #fff; cursor: pointer;
}
.en-mic-play:hover { background: var(--cobalto-700); }
/* A onda ocupa TODA a largura que sobrar — é a peça principal da linha. */
.en-mic-canvas { flex: 1 1 auto; min-width: 0; height: 34px; display: block; cursor: pointer; }
/* Onda AO VIVO (durante a gravação): mesma caixa da onda final, mas não é
   clicável — não há o que navegar num áudio que ainda está sendo gravado. */
.en-mic-live { flex: 1 1 90px; min-width: 60px; cursor: default; }
.en-mic-dur {
  flex-shrink: 0; font-family: var(--font-display); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: var(--muted-fg);
}
/* Fallback quando o browser não decodifica o próprio container gravado. */
.en-mic-audio { flex: 1 1 180px; min-width: 0; height: 36px; }

.en-mic-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.en-mic-ghost {
  min-height: 32px; padding: 0 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  font-family: var(--font-body); font-size: 13px; cursor: pointer;
}
.en-mic-ghost:hover { background: var(--muted); }

.en-mic-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12.5px; color: var(--muted-fg);
}
.en-mic-badge.is-ok { color: var(--cobalto-700); font-weight: 600; }
.en-mic-badge.is-ok::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0;
  background: var(--cobalto-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.en-mic-badge.is-err { color: var(--coral-700); }
.en-mic-badge.is-sending::before {
  content: ''; width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0;
  border: 2px solid var(--cobalto-200); border-top-color: var(--cobalto-600);
}
@media (prefers-reduced-motion: no-preference) {
  .en-mic-badge.is-sending::before { animation: en-mic-spin .7s linear infinite; }
  @keyframes en-mic-spin { to { transform: rotate(360deg); } }
}
.en-mic-retry {
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: var(--cobalto-700); text-decoration: underline;
}

.en-mic-msg { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--muted-fg); line-height: 1.45; }

/* ==========================================================================
   Banner de cookies (public/assets/brand/consent.js)
   Mesmo desenho do banner do /drone2business, nas cores do Serviços.
   ========================================================================== */
.en-consent {
  position: fixed; z-index: 1300;
  left: 12px; right: 12px; bottom: 12px;
  max-width: 1120px; margin-inline: auto;
  background: var(--cobalto-100); color: var(--cobalto-950);
  border: 1px solid var(--cobalto-200); border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  font-family: var(--font-body);
}
@media (min-width: 768px) { .en-consent { left: 20px; right: 20px; bottom: 20px; padding: 26px 28px; } }
.en-consent-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.en-consent-text { font-size: 14px; line-height: 1.6; color: var(--cobalto-900); margin: 0; max-width: 78ch; }
.en-consent-text a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.en-consent-manage {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  margin-top: 16px; padding: 14px; max-width: 78ch;
  background: rgba(255,255,255,.6); border-radius: var(--radius-md);
  font-size: 14px; line-height: 1.5; color: var(--cobalto-900);
}
.en-consent-manage input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--cobalto-600); flex-shrink: 0; }
.en-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* No celular o banner fica por cima do formulário da home: encolhe tudo o que
   dá (padding, corpo do texto) e põe os dois botões lado a lado, com o rótulo
   longo escondido — "Aceitar" e "Administrar" bastam nessa largura. */
@media (max-width: 479px) {
  .en-consent { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .en-consent-text { font-size: 13.5px; }
  .en-consent-actions { gap: 8px; }
  .en-consent-actions .en-btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 14px; }
  .en-consent-long { display: none; }
}

/* Links legais do rodapé — exigência de acesso fácil a termos e privacidade. */
.en-footer-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 18px; font-size: 13px;
}
.en-footer-links a { color: var(--muted-fg); text-decoration: none; }
.en-footer-links a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   "Vamos melhorar" — etiqueta lateral + painel (assets/brand/feedback-tab.js)
   A etiqueta fica DEITADA, colada na borda direita, em todas as páginas. É um
   canal de dentro do produto: quem está usando é quem sabe o que falta.
   ========================================================================== */
.en-fb-root { position: relative; z-index: 900; }

.en-fb-tab {
  position: fixed; right: 0; top: 50%;
  /* Deitada, lendo de baixo para cima (lombada de livro).
     Duas sutilezas que custaram uma rodada de revisão:
     1. a rotação vai DENTRO do transform, depois do translate — a propriedade
        `rotate` separada faria o translateY(-50%) acontecer no espaço já
        girado, e a etiqueta descia meia altura em vez de centralizar;
     2. o giro de 180° ESPELHA a forma, não só o texto. Por isso os cantos
        arredondados e a borda ausente são declarados do lado ERRADO aqui: o
        raio à direita vira o lado esquerdo (o que encosta na página) e a
        borda que falta à esquerda vira a que falta na quina da tela. */
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; text-orientation: mixed;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 8px; border: 1px solid rgba(121, 37, 17, .45); border-left: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  /* Coral é o tom de alerta da identidade (§4). Escolha do fundador para esta
     etiqueta — vale registrar que a identidade reserva o coral para estado de
     alerta/erro e o chama de "papel funcional, não decorativo" (§4.2).
     Sobre a fórmula: o vidro veio de coral-700 (mais escuro) a 76% em vez de
     coral-600 a 86%. Parece contraintuitivo, mas é o que deixa MAIS
     transparente sem perder legibilidade — base mais escura aguenta mais
     transparência. Dá 24% de passagem e o branco em 4,85:1 sobre o Cloud
     Dancer (AA), contra 14% e 4,8:1 de antes. Etiqueta ilegível não serve
     para nada; esta é a fronteira. */
  background: rgba(148, 46, 20, .76); color: #fff;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer;
  /* Sombra curta no texto: segura o branco quando o que passa por trás é foto
     ou mapa claro, onde só o fundo translúcido não bastaria. */
  text-shadow: 0 1px 2px rgba(45, 14, 6, .38);
  /* Fio de luz na quina arredondada: é ele que faz o olho ler "vidro", mais
     do que a transparência em si. */
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .32), var(--elev-2);
  transition: background-color .12s ease, padding-inline .12s ease;
}
/* O desfoque é progressive enhancement: sem suporte, fica a cor quase sólida
   acima — nada quebra, só não borra. Quanto mais desfoque, mais uniforme o
   fundo por trás e mais legível o branco: é ele que compra a transparência. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .en-fb-tab {
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
  }
}
.en-fb-tab:hover { background: rgba(121, 37, 17, .88); padding-inline: 8px 11px; }
.en-fb-tab[aria-expanded="true"] { background: var(--coral-800); border-color: var(--coral-800); }

.en-fb-backdrop { position: fixed; inset: 0; background: rgba(13,36,89,.28); z-index: 901; }

/* O atributo [hidden] tem a MESMA especificidade de uma classe, então
   `.en-fb-panel { display: flex }` o vence e o painel nasce aberto em qualquer
   página que não carregue o preflight do Tailwind (foi assim que /esqueci-senha
   apareceu com o painel escancarado). Especificidade explícita resolve — e vale
   para os dois elementos que trocam de estado por [hidden]. */
.en-fb-panel[hidden], .en-fb-backdrop[hidden] { display: none; }

.en-fb-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 902;
  width: min(420px, 92vw); overflow-y: auto;
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: var(--elev-3); padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (prefers-reduced-motion: no-preference) {
  .en-fb-panel { animation: en-fb-slide .18s ease-out; }
  @keyframes en-fb-slide { from { transform: translateX(16px); opacity: .4; } to { transform: none; opacity: 1; } }
}
.en-fb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.en-fb-head h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--fg); margin: 0; line-height: 1.3; }
.en-fb-close {
  flex-shrink: 0; width: 36px; height: 36px; border: none; background: none;
  font-size: 26px; line-height: 1; color: var(--muted-fg); cursor: pointer; border-radius: var(--radius-sm);
}
.en-fb-close:hover { background: var(--muted); color: var(--fg); }

.en-fb-form { display: flex; flex-direction: column; }
.en-fb-kinds { display: grid; gap: 8px; margin-bottom: 16px; }
.en-fb-kind {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
}
.en-fb-kind:has(input:checked) { border-color: var(--cobalto-400); background: var(--cobalto-50); }
.en-fb-kind input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; }
.en-fb-kind span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted-fg); line-height: 1.4; }
.en-fb-kind strong { font-size: 14.5px; font-weight: 600; color: var(--fg); }
.en-fb-textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.en-fb-hint { font-size: 12.5px; color: var(--muted-fg); margin: 8px 0 0; line-height: 1.5; }
/* overflow-wrap: a URL agora vem com domínio e pode carregar querystring longa
   (prefill da home leva até o link do áudio) — sem isso ela empurra a largura
   do painel e nasce uma barra de rolagem horizontal. */
.en-fb-hint code {
  font-size: 12px; background: var(--muted); padding: 1px 5px; border-radius: 4px;
  overflow-wrap: anywhere;
}
.en-fb-error {
  margin-top: 12px; background: var(--coral-50); border: 1px solid var(--coral-200);
  color: var(--coral-700); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px;
}
.en-fb-submit { margin-top: 16px; }
.en-fb-login { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.en-fb-login p { font-size: 14.5px; color: var(--muted-fg); margin: 0; line-height: 1.55; }
.en-fb-login a { color: var(--primary); font-weight: 600; }
.en-fb-login .en-btn { color: #fff; }
.en-fb-done { text-align: center; padding: 16px 0; }
.en-fb-done h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin: 12px 0 6px; color: var(--fg); }
.en-fb-done p { font-size: 14.5px; color: var(--muted-fg); margin: 0 0 20px; line-height: 1.55; }
.en-fb-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--cobalto-50); color: var(--cobalto-700); font-size: 22px; font-weight: 700;
}

/* No celular a etiqueta encolhe e volta a ancorar EMBAIXO. Foram três
   posições até aqui, e a de baixo é a que não disputa com nada: no meio ela
   atravessa a linha de leitura, e a 34% ela encosta no hero. Presa ao rodapé
   da viewport, some do caminho do olho e continua no alcance do polegar. */
@media (max-width: 639px) {
  .en-fb-tab {
    top: auto; bottom: 88px; transform: rotate(180deg);
    padding: 14px 7px; font-size: 12px;
  }
}
@media print { .en-fb-root { display: none; } }

/* ==========================================================================
   Instalar como app no celular (assets/brand/pwa-install.js)
   Cartão inferior, curto, com um botão só de verdade. Nunca aparece no
   desktop nem dentro do app já instalado.
   ========================================================================== */
.en-pwa-card {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950;
  max-width: 460px; margin-inline: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-3); padding: 16px 16px 14px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
  /* Respeita a área segura do iPhone (barra de gestos). */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.en-pwa-card.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .en-pwa-card { transition: none; } }

.en-pwa-x {
  position: absolute; top: 6px; right: 8px; width: 34px; height: 34px;
  border: none; background: none; font-size: 24px; line-height: 1;
  color: var(--muted-fg); cursor: pointer; border-radius: var(--radius-sm);
}
.en-pwa-x:hover { background: var(--muted); }
.en-pwa-top { display: flex; align-items: flex-start; gap: 12px; padding-right: 28px; }
.en-pwa-icon { border-radius: 10px; flex-shrink: 0; }
.en-pwa-title { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--fg); margin: 0 0 2px; }
.en-pwa-sub { font-size: 13px; color: var(--muted-fg); margin: 0; line-height: 1.45; }

.en-pwa-steps-wrap { margin-top: 12px; }
/* list-style explícito: o preflight do Tailwind (CDN) zera os marcadores de
   <ol>, e sem os números o passo a passo deixa de ser passo a passo. */
.en-pwa-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; list-style: decimal outside; }
.en-pwa-steps li { list-style: inherit; }
.en-pwa-steps li { font-size: 13.5px; color: var(--muted-fg); line-height: 1.5; }
.en-pwa-steps strong { color: var(--fg); font-weight: 600; }
/* Seta para a barra do navegador (iOS Safari): o cartão encosta embaixo, então
   apontar para fora dele é apontar para o botão de compartilhar. */
.en-pwa-point {
  margin: 10px 0 0; text-align: center; font-size: 12.5px; font-weight: 600;
  color: var(--cobalto-700);
}
@media (prefers-reduced-motion: no-preference) {
  .en-pwa-point { animation: en-pwa-nudge 1.6s ease-in-out infinite; }
  @keyframes en-pwa-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
}

.en-pwa-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; vertical-align: -7px; margin: 0 1px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--muted); color: var(--cobalto-700);
}

.en-pwa-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.en-pwa-actions .en-pwa-go { flex: 1 1 auto; min-height: 44px; }
.en-pwa-later {
  flex-shrink: 0; min-height: 44px; padding: 0 12px; border: none; background: none;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--muted-fg); cursor: pointer;
}
.en-pwa-later:hover { color: var(--fg); }

/* Com a etiqueta de volta ao rodapé da viewport no celular, ela e o cartão de
   instalação voltam a disputar o mesmo canto — e a altura do cartão muda quando
   ele abre o passo a passo, então nenhum `bottom` fixo resolveria em todos os
   estados. Enquanto o cartão está na tela a etiqueta sai; ele é passageiro (a
   pessoa instala ou fecha) e ela volta em seguida. Seletor no <body> porque o
   cartão entra DEPOIS dela no DOM. */
@media (max-width: 639px) {
  body:has(.en-pwa-card) .en-fb-tab { display: none; }
}
@media print { .en-pwa-card { display: none; } }