/* ═══════════════════════════════════════════════════════════════════════════
   aesa-design.css — Design system da Intranet AESA (brandbook 2026)
   ---------------------------------------------------------------------------
   Como usar numa página:
     <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=Lexend+Exa:wght@500;600;700&family=Lexend:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="aesa-design.css">   (subpasta: ../aesa-design.css)

   Fontes: o brandbook pede Nord (títulos) e Nexa (texto), que são pagas.
   Substitutas gratuitas: Lexend Exa (geométrica larga) e Lexend.
   Para trocar pelas originais, basta mudar --aesa-font-display / --aesa-font.

   Temas: tema.js grava data-tema="claro|escuro" no <html>.
   As variáveis antigas (--navy, --orange, --card, --bg, --text-muted...)
   continuam existindo como apelidos, para não quebrar estilos inline.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta oficial (brandbook) ── */
  --aesa-laranja: #E73B1B;        /* Laranja Segurança */
  --aesa-laranja-escuro: #C9310F; /* laranja para texto/botão (contraste AA) */
  --aesa-preto: #000000;
  --aesa-branco: #FFFFFF;
  --aesa-cinza-1: #D3D3D3;
  --aesa-cinza-2: #B4B4B4;
  --aesa-cinza-3: #555555;
  --aesa-azul-cinza: #333B57;     /* Azul Acinzentado */
  --aesa-azul: #061851;           /* Azul Engenharia */

  /* ── Papéis (tema claro) ── */
  --c-fundo: #ECEDEE;
  --c-superficie: #FFFFFF;
  --c-superficie-2: #F4F5F6;
  --c-superficie-hover: #EEF0F3;
  --c-borda: #D9DADD;
  --c-borda-forte: #B4B4B4;
  --c-texto: #111318;
  --c-texto-2: #3F4452;
  --c-texto-suave: #5F6471;
  --c-estrutura: #061851;         /* títulos, ícones, itens estruturais */
  --c-estrutura-suave: #E6E8F0;   /* fundo de ícone, chip neutro */
  --c-acao: #C9310F;              /* texto/link/botão de ação */
  --c-acao-hover: #A92608;
  --c-destaque: #E73B1B;          /* réguas, pontos, "novo", item ativo */
  --c-destaque-suave: #FCE9E4;
  --c-sucesso: #0F6B4B;
  --c-sucesso-suave: #E3F3EC;
  --c-aviso: #8A5300;
  --c-aviso-suave: #FBF0DC;
  --c-erro: #B3261E;
  --c-erro-suave: #FBE7E5;
  --c-foco: #E73B1B;
  --c-overlay: rgba(6, 24, 81, .48);

  /* ── Tipografia ── */
  --aesa-font: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --aesa-font-display: 'Lexend Exa', 'Lexend', 'Segoe UI', sans-serif;
  --fs-11: .6875rem;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;

  /* ── Forma ── */
  /* Assinatura da marca: cantos retos com UM canto arredondado
     (a linha laranja do brandbook dobrando o canto superior direito). */
  --r-sm: 3px;
  --r-md: 4px;
  --r-assinatura: 4px 18px 4px 4px;
  --r-pill: 999px;

  /* ── Profundidade ── */
  --sombra-1: 0 1px 2px rgba(17, 19, 24, .06), 0 1px 1px rgba(17, 19, 24, .04);
  --sombra-2: 0 6px 18px -6px rgba(17, 19, 24, .18), 0 2px 4px rgba(17, 19, 24, .05);
  --sombra-3: 0 24px 60px -12px rgba(17, 19, 24, .32);

  /* ── Movimento ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-rapido: 140ms;
  --t-medio: 220ms;

  /* ── Layout ── */
  --topbar-h: 64px;

  /* ── Apelidos legados (páginas antigas e estilos inline) ── */
  --navy: var(--c-estrutura);
  --navy-light: #0d2570;
  --navy-dark: #040f35;
  --orange: var(--aesa-laranja);
  --orange-hover: var(--c-acao-hover);
  --green: var(--c-sucesso);
  --green-light: var(--c-sucesso-suave);
  --white: var(--c-superficie);
  --bg: var(--c-superficie-2);
  --bg-hover: var(--c-superficie-hover);
  --text: var(--c-texto);
  --text-muted: var(--c-texto-suave);
  --border: var(--c-borda);
  --card: var(--c-superficie);
  --font: var(--aesa-font);
  --radius: var(--r-md);
  --shadow-sm: var(--sombra-1);
  --shadow: var(--sombra-2);

  color-scheme: light;
}

/* ── Tema escuro: grafite liso, sem textura ── */
[data-tema="escuro"] {
  --c-fundo: #111214;
  --c-superficie: #1A1C20;
  --c-superficie-2: #202227;
  --c-superficie-hover: #262930;
  --c-borda: #2E3138;
  --c-borda-forte: #444955;
  --c-texto: #ECEDEF;
  --c-texto-2: #C3C6CD;
  --c-texto-suave: #9EA3AD;
  --c-estrutura: #C9D0EA;
  --c-estrutura-suave: #262B3B;
  --c-acao: #F2603F;
  --c-acao-hover: #FF7A5C;
  --c-destaque: #F0512F;
  --c-destaque-suave: #3A1C15;
  --c-sucesso: #4FD1A1;
  --c-sucesso-suave: #10352A;
  --c-aviso: #F2B544;
  --c-aviso-suave: #3A2A0E;
  --c-erro: #FF8A80;
  --c-erro-suave: #3D1614;
  --c-overlay: rgba(0, 0, 0, .62);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-2: 0 8px 22px -8px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .3);
  --sombra-3: 0 24px 60px -12px rgba(0, 0, 0, .7);
  --navy-light: #DDE2F3;
  color-scheme: dark;
}

/* ═══ BASE ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--aesa-font);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--c-texto);
  background-color: var(--c-fundo);
  background-image: url("img/textura-concreto.jpg");
  background-size: 512px 512px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

[data-tema="escuro"] body { background-image: none; }

::selection { background: var(--aesa-laranja); color: #fff; }

:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 2px;
}

a { color: var(--c-acao); text-underline-offset: 3px; }

* { scrollbar-width: thin; scrollbar-color: var(--c-borda-forte) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--c-borda-forte); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

input, button, select, textarea { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--c-texto-suave); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ═══ TÍTULO DE SEÇÃO — display largo + régua laranja ═══ */
.aesa-titulo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 16px;
}
.aesa-titulo h2,
.aesa-titulo h1 {
  font-family: var(--aesa-font-display);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-estrutura);
  position: relative;
  padding-bottom: 9px;
  white-space: nowrap;
}
.aesa-titulo h2::after,
.aesa-titulo h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 3px;
  background: var(--c-destaque);
}
.aesa-titulo .aesa-titulo-meta {
  margin-left: auto;
  font-size: var(--fs-12);
  color: var(--c-texto-suave);
  white-space: nowrap;
}

/* ═══ PAINEL (superfície padrão) ═══ */
.aesa-painel {
  background: var(--c-superficie);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-1);
}
/* Painel com a linha-assinatura: régua laranja que dobra o canto sup. direito */
.aesa-painel--assinatura {
  position: relative;
  border-radius: var(--r-assinatura);
}
.aesa-painel--assinatura::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 96px; height: 56px;
  border-top: 3px solid var(--c-destaque);
  border-right: 3px solid var(--c-destaque);
  border-top-right-radius: 18px;
  pointer-events: none;
  z-index: 3;
}

/* ═══ BOTÕES ═══ */
.aesa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--aesa-font);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.aesa-btn:active { transform: translateY(1px); }
.aesa-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.aesa-btn--primario { background: var(--c-acao); color: #fff; }
.aesa-btn--primario:hover:not(:disabled) { background: var(--c-acao-hover); }
[data-tema="escuro"] .aesa-btn--primario { background: #D4361A; }
[data-tema="escuro"] .aesa-btn--primario:hover:not(:disabled) { background: #B92C0D; }
.aesa-btn--secundario { background: var(--c-superficie); color: var(--c-estrutura); border-color: var(--c-borda-forte); }
.aesa-btn--secundario:hover:not(:disabled) { border-color: var(--c-estrutura); }
.aesa-btn--fantasma { background: transparent; color: var(--c-acao); padding: 0 8px; height: 32px; }
.aesa-btn--fantasma:hover { background: var(--c-destaque-suave); }

/* ═══ CAMPOS ═══ */
.aesa-campo {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--c-superficie);
  border: 1px solid var(--c-borda-forte);
  border-radius: var(--r-md);
  color: var(--c-texto);
  font-size: var(--fs-14);
  transition: border-color var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease);
}
.aesa-campo:hover { border-color: var(--c-texto-suave); }
.aesa-campo:focus { outline: none; border-color: var(--c-estrutura); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-estrutura) 18%, transparent); }

/* ═══ ETIQUETAS ═══ */
.aesa-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--c-estrutura-suave);
  color: var(--c-estrutura);
}

/* ═══ TOPBAR (compartilhada) ═══ */
.topbar {
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: color-mix(in srgb, var(--c-superficie) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--c-borda);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-left { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.topbar-title {
  font-family: var(--aesa-font-display);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-estrutura);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-sub {
  font-size: var(--fs-12);
  color: var(--c-texto-suave);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-sub::first-letter { text-transform: uppercase; }
.topbar-right { display: flex; align-items: center; gap: 4px; position: relative; }
.topbar-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-texto-2);
  cursor: pointer;
  position: relative;
  transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease);
}
.topbar-btn:hover { background: var(--c-superficie-2); border-color: var(--c-borda); color: var(--c-estrutura); }
.topbar-btn svg { width: 19px; height: 19px; }

/* Busca global (busca.js) — sobrescreve os estilos injetados */
.topbar #buscaInputWrap {
  height: 40px;
  background: var(--c-superficie-2);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-md);
  padding: 0 12px;
  gap: 8px;
}
.topbar #buscaInputWrap.aberto { width: 280px; margin-right: 8px; }
.topbar #buscaInputWrap:focus-within { border-color: var(--c-estrutura); background: var(--c-superficie); }
.topbar #buscaInput { font-size: var(--fs-14); color: var(--c-texto); }
.topbar #buscaDropdown {
  width: 360px;
  background: var(--c-superficie);
  border: 1px solid var(--c-borda);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
}
.topbar .busca-item { border-bottom-color: var(--c-borda); padding: 11px 14px; }
.topbar .busca-item:hover, .topbar .busca-item:focus { background: var(--c-superficie-2); }
.topbar .busca-icon { background: var(--c-estrutura-suave); color: var(--c-estrutura); border-radius: var(--r-md); }
.topbar .busca-titulo { color: var(--c-texto); }
.topbar .busca-titulo mark { background: var(--c-destaque-suave); color: var(--c-acao); }
.topbar .busca-desc, .topbar .busca-seta, .topbar .busca-vazio { color: var(--c-texto-suave); }

/* ═══ TOAST ═══ */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 18px;
  background: var(--aesa-azul);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-3);
  font-size: var(--fs-13);
  font-weight: 500;
  z-index: 99999;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--t-medio) var(--ease), transform var(--t-medio) var(--ease);
}
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast.sucesso { background: var(--c-sucesso); }
.toast.erro { background: var(--c-erro); }
[data-tema="escuro"] .toast { background: #2A2E3A; color: var(--c-texto); }
[data-tema="escuro"] .toast.sucesso { background: #10352A; color: #7FE3BD; }
[data-tema="escuro"] .toast.erro { background: #3D1614; color: #FFB4AB; }

/* ═══ UTILITÁRIOS ═══ */
.aesa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }

@media (max-width: 768px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar #buscaInputWrap.aberto { width: 160px; }
  .topbar-title { font-size: var(--fs-12); letter-spacing: .02em; }
  .topbar-btn { width: 36px; height: 36px; }
  .topbar #buscaDropdown { width: min(360px, calc(100vw - 24px)); right: -60px; }
}


/* Barras de topo dentro de colunas flex não podem encolher (as abas vazavam por cima do conteúdo) */
html:root .ti-toolbar, html:root .topbar { flex-shrink: 0; }

/* ═══ AJUSTES GERAIS DO CELULAR (validação mobile 29/09/2026) ═══
   "html:root" para valer por cima do <style> de cada página. */
@media (max-width: 768px) {
  /* Campos com 16px: abaixo disso o iPhone dá zoom ao tocar no campo */
  html:root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  html:root select, html:root textarea { font-size: 16px !important; }

  /* Topo: cresce se o título quebrar, em vez de espremer o texto na borda */
  html:root .topbar { height: auto !important; min-height: 60px; padding-top: 10px !important; padding-bottom: 10px !important; }
  html:root .topbar-left { min-width: 0; justify-content: flex-start; }
  html:root .topbar-left > div:not([class]):not(:empty) { min-width: 0; flex: 1 1 auto; }
  html:root .topbar-right { flex-shrink: 0; }
  html:root .topbar .topbar-title, html:root .topbar .topbar-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

  /* Alvos de toque de pelo menos 40px */
  html:root .cal-nav-btn, html:root .cal-today-btn,
  html:root #buscaBtnFechar, html:root .btn-mini, html:root .hist-btn,
  html:root .strip-pill, html:root .hero-back, html:root .topbar-back,
  html:root #topbar-btn-trocar, html:root #reembolso-topbar button { min-height: 40px !important; }
  html:root .strip-pill, html:root .hero-back, html:root .btn-mini { display: inline-flex; align-items: center; justify-content: center; }
  html:root .cal-nav-btn,
  html:root #sel-fonte, html:root #sel-inicio, html:root .vid-mini,
  html:root .item-meta .meta-inp, html:root #btn-novo-evento,
  html:root .mural-arrow, html:root .ti-toolbar .btn { min-height: 40px !important; }
  html:root .cal-nav-btn, html:root #buscaBtnFechar, html:root .mural-arrow { min-width: 40px !important; }
  html:root .cal-nav button { min-width: 40px !important; min-height: 40px !important; }
  html:root .btn-sm { min-height: 40px !important; }
  html:root .topbar-back { display: inline-flex; align-items: center; }
  html:root .email-addr { display: inline-block; padding: 8px 0; }

  /* Textos que ficavam abaixo de 11px */
  html:root .db-mes, html:root .cal-dow, html:root .event-tipo, html:root .hp-sem,
  html:root .hist-tag, html:root .tl-cat, html:root .badge-new, html:root .sust-badge,
  html:root .section-num, html:root .mvv-label, html:root .intro-eyebrow, html:root .canal-eyebrow,
  html:root .cur-badge, html:root .setting-desc, html:root .prio-desc { font-size: 11px !important; }

  /* Home: o "próximo evento" quebra linha em vez de cortar o texto */
  html:root .ti-toolbar .topbar-title { font-size: 13px !important; }
  html:root .topbar .topbar-title { font-size: 12px; letter-spacing: .03em; }
  html:root .topbar-right { gap: 4px; }
  /* "Recolher menu" não faz sentido no celular (lá o menu é gaveta) */
  html:root #sb-topbar-btn { display: none !important; }
  /* Configurações: fica só o avatar no topo (o nome já está no cartão de perfil) */
  html:root .topbar-user #tb-nome { display: none; }
  html:root .ti-toolbar { padding-top: 12px !important; }
  /* Atalho de Configurações do topo: no celular ele já está no menu */
  html:root .topbar-right .topbar-btn[title="Configurações"] { display: none; }
  html:root .ti-toolbar .topbar-sub { font-size: 12px !important; }
  html:root .perfil-card .badge { font-size: 11px !important; }
  html:root .prox-evento .pe-desc, html:root .prox-evento .pe-titulo { white-space: normal; }
}

@media (max-width: 420px) {
  /* Expedição: o celular já mostra a hora; sobra espaço para o disco */
  html:root .page-topbar .topbar-clock { display: none; }
}