/* ============================================================================
   AviaHub — tema claro e escuro

   O tema escuro NAO e uma inversao automatica do claro: inverter quebraria as
   razoes de contraste medidas e os degrades da marca. Os valores escuros vem do
   proprio design system oficial da Avia Hub (o bloco "body.escuro" do CSS do
   site institucional), e os tokens que o site nao tem — estado de transicao,
   regua da trilha, paleta de grafico — foram derivados e medidos aqui.

   Claro e o padrao. Escuro e opcao, por tela, pelo botao de tema.
   ========================================================================== */

:root {
  /* superficie: no tema claro a pagina e azulada e o cartao e branco */
  --pagina: #EEF4FA;
  --superficie: #FFFFFF;
  --superficie-2: #F3F7FB;
  --superficie-3: #E4EEF9;
  --borda: #D6E2EE;
  --borda-forte: #6886A3;   /* era #AFC4D8: 1,62:1 sobre a pagina. Borda de campo identifica o controle e precisa de 3:1 (WCAG 1.4.11). Agora 3,24:1 no pior fundo. */
  --borda-fina: #E8EFF6;

  /* texto */
  --t-forte: #0B1F33;
  --t: #1A1A1A;
  --t-suave: #4A5450;
  --t-fraco: #5C6763;       /* era #6E7975: passava sobre branco (4,51:1) e reprovava sobre a pagina (4,07:1) e sobre --superficie-3 (3,84:1). Agora 5,01:1. */

  /* faixa escura (barra lateral e rodape): escura nos DOIS temas */
  --faixa: #062A4D;
  --inv-t: #FFFFFF;
  --inv-t2: #B9D3EC;

  /* marca */
  --azul: #006CC0;
  --azul-titulo: #0A4F8A;
  --azul-escuro: #0A3A66;
  --azul-link: #005AA0;
  --azul-claro: #EAF3FB;
  --azul-metal: #2B8BD9;
  --azul-etiqueta: #9CCBF5;
  --verde: #00483C;
  --verde-metal: #0E6B5A;

  /* estado: cor sempre acompanhada de icone e rotulo escrito */
  --ok: #00483C;
  --ok-bg: #E8F0EE;
  --erro: #8A1F11;
  --erro-bg: #FBEEEC;
  --at: #7A4E00;          /* "inconclusiva" / "nao verificavel" */
  --at-bg: #FBF4E6;
  --foco: #006CC0;

  /* texto sobre botao de cor cheia */
  --btn-txt: #FFFFFF;

  /* regua da trilha das 12 etapas: a POSICAO e a cor */
  --trilha-1: #062A4D;  --trilha-2: #0A3A66;  --trilha-3: #0A4F8A;
  --trilha-4: #0B5FA5;  --trilha-5: #006CC0;  --trilha-6: #187CCC;
  --trilha-7: #2B8BD9;  --trilha-8: #2088AE;  --trilha-9: #167E8E;
  --trilha-10: #0E6B5A; --trilha-11: #075A4A; --trilha-12: #00483C;
  --trilha-txt: #FFFFFF;
  /* Os passos 6, 7 e 8 sao o pico de claridade da regua: texto branco neles
     fica em 4,38 / 3,62 / 4,04:1, abaixo de AA. A rampa NAO muda — ela amostra
     o degrade oficial da marca (R-06). Muda o texto desses tres, que em preto
     da 4,79 / 5,80 / 5,19:1. Decisao D15. */
  --trilha-txt-claro: #000000;
  --trilha-off: #EEF4FA;

  /* grafico: 4 posicoes, validadas por script na superficie clara */
  --g1: #2B8BD9;  --g2: #12916F;  --g3: #B57C00;  --g4: #8A62D4;
  --g-grade: #E8EFF6;
  --g-eixo: #6886A3;        /* eixo e componente, nao enfeite: 3:1 */
  --seq-1: #EAF3FB; --seq-2: #BFDCF3; --seq-3: #7DBEF0;
  --seq-4: #2B8BD9; --seq-5: #006CC0; --seq-6: #0A3A66;

  /* profundidade: sombra tingida de azul, nunca cinza */
  --sombra-1: 0 2px 4px rgba(6,42,77,.10), 0 10px 26px rgba(6,42,77,.15);
  --sombra-2: 0 12px 26px rgba(6,42,77,.20), 0 30px 64px rgba(6,42,77,.22);
  --brilho: 0 10px 28px rgba(0,108,192,.40), 0 2px 6px rgba(0,60,120,.30);

  --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px;
  --sans: "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, 'SF Mono', Menlo, monospace;
  --t1: 160ms; --t2: 260ms; --curva: cubic-bezier(.2,.7,.2,1);
}

/* ── TEMA ESCURO ───────────────────────────────────────────────────────────
   Valores de marca, superficie e texto vindos do design system oficial
   (body.escuro). No escuro a relacao se inverte de proposito: a pagina e o
   tom mais escuro e o cartao e um pouco mais claro que ela.              */
[data-tema="escuro"] {
  --pagina: #0A1210;
  --superficie: #141F1C;
  --superficie-2: #101B18;
  --superficie-3: #182723;
  --borda: #22332E;
  --borda-forte: #5D7B72;   /* era #33473F: 1,56:1. Mesma correcao do claro —
                               o tema escuro herdou a proporcao, e a falha
                               junto. Agora 3,36:1. */
  --borda-fina: #1A2724;

  --t-forte: #F2F7F5;
  --t: #DCE6E2;
  --t-suave: #9FB0AB;
  --t-fraco: #86958F;       /* era #7A8A85: 4,29:1 sobre --superficie-3.
                               Agora 4,96:1. */

  --faixa: #07182A;
  --inv-t: #FFFFFF;
  --inv-t2: #9FB0AB;

  --azul: #5BA8E8;
  --azul-titulo: #8CC4F2;
  --azul-escuro: #0B1F33;
  --azul-link: #7DBEF0;
  --azul-claro: #0E2436;
  --azul-metal: #5BA8E8;
  --azul-etiqueta: #8CC4F2;
  --verde: #5FBFA8;
  --verde-metal: #5FBFA8;

  --ok: #5FBFA8;
  --ok-bg: #0D2420;
  --erro: #F0A79C;
  --erro-bg: #2A100C;
  --at: #E3B35C;
  --at-bg: #2A2008;
  --foco: #5BA8E8;

  /* no escuro o botao e claro e o texto dele e escuro */
  --btn-txt: #07182A;

  /* no escuro a trilha usa tons CLAROS com texto escuro: tom escuro sobre
     fundo escuro nao se destacaria do cartao. A progressao azul -> verde
     continua legivel, e o rotulo esta sempre escrito. */
  --trilha-1: #7FA8C8;  --trilha-2: #85B0D2;  --trilha-3: #8BB8DC;
  --trilha-4: #91C0E6;  --trilha-5: #97C8F0;  --trilha-6: #8FC9E8;
  --trilha-7: #87CADF;  --trilha-8: #7FCBD6;  --trilha-9: #77CCCD;
  --trilha-10: #6FCDC4; --trilha-11: #67CEBB; --trilha-12: #5FBFA8;
  --trilha-txt: #07182A;
  /* no escuro a regua inteira ja e clara e o texto ja e escuro */
  --trilha-txt-claro: #07182A;
  --trilha-off: #1A2724;

  /* grafico: passos proprios, validados na superficie escura #0A1210.
     Os tokens de interface do tema escuro reprovaram como preenchimento
     (claros demais e pouco cromaticos), igual aconteceu no tema claro. */
  --g1: #4296E2;  --g2: #0F9E7C;  --g3: #B87D12;  --g4: #8F5EDB;
  --g-grade: #22332E;
  --g-eixo: #5D7B72;        /* idem no escuro */
  --seq-1: #0E2436; --seq-2: #163A52; --seq-3: #1F5273;
  --seq-4: #2A6D96; --seq-5: #3989BC; --seq-6: #5BA8E8;

  /* no escuro a sombra quase nao aparece: a separacao vem da borda */
  --sombra-1: 0 1px 2px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.35);
  --sombra-2: 0 6px 16px rgba(0,0,0,.50), 0 16px 40px rgba(0,0,0,.45);
  --brilho: 0 6px 18px rgba(91,168,232,.22);
}

/* ── base ───────────────────────────────────────────────────────────────── */
body { margin: 0; font-family: var(--sans); background: var(--pagina); color: var(--t); }
a { color: var(--azul-link); }
a:hover { color: var(--azul-titulo); }
*:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: var(--r-sm); }
.faixa-esc *:focus-visible, .rod *:focus-visible { outline-color: #FFFFFF; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

/* ── estrutura ──────────────────────────────────────────────────────────── */
.pg { min-height: 100vh; display: flex; flex-direction: column; background: var(--pagina); color: var(--t); }
.cab { background: var(--superficie); border-bottom: 1px solid var(--borda); padding: 14px 28px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center }
.corpo { display: flex; flex-wrap: wrap; align-items: flex-start; flex: 1 1 auto }
.lat { flex: 1 1 232px; min-width: 0; max-width: 264px; background: var(--faixa); padding: 22px 0; display: flex; flex-direction: column; gap: 2px }
.lat a { display: flex; align-items: center; gap: 10px; padding: 11px 22px; text-decoration: none; color: var(--inv-t2); font-size: 15px; border-left: 3px solid transparent }
.lat a:hover { color: var(--inv-t); background: rgba(255,255,255,.06) }
.lat a.on { color: var(--inv-t); font-weight: 700; background: var(--azul-escuro); border-left-color: var(--azul-metal) }
.lat .grupo { padding: 16px 22px 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-t2); margin: 0 }
.conteudo { flex: 999 1 560px; min-width: 0; padding: 26px 30px 36px; display: flex; flex-direction: column; gap: 20px }
.rod { background: var(--faixa); padding: 16px 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between }
.rod p { margin: 0; font-size: 14px; color: var(--inv-t2) }
.rod a { color: var(--inv-t) }

/* ── tipografia ─────────────────────────────────────────────────────────── */
.olho { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--azul) }
h1.t { margin: 0 0 8px; font-size: 32px; line-height: 1.18; letter-spacing: -.018em; font-weight: 700; color: var(--azul-titulo) }
h2.t { margin: 0 0 6px; font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--t-forte) }
h3.t { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--t-forte) }
p.lead { margin: 0; font-size: 17px; line-height: 1.5; color: var(--t-suave); max-width: 68ch }
p.c { margin: 0; font-size: 16px; line-height: 1.55; color: var(--t) }
p.pe { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t-suave) }
p.mini { margin: 0; font-size: 13px; line-height: 1.45; color: var(--t-fraco) }

/* ── cartao ─────────────────────────────────────────────────────────────── */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 20px 22px }
.cartao.alto { box-shadow: var(--sombra-1) }
.grade { display: flex; flex-wrap: wrap; gap: 16px }
.col { flex: 1 1 260px; min-width: 0 }
.col-larga { flex: 999 1 420px; min-width: 0 }

/* ── indicador ──────────────────────────────────────────────────────────── */
.tile { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px }
.tile .rotulo { margin: 0; font-size: 14px; font-weight: 600; color: var(--t-suave) }
.tile .heroi { margin: 0; font-size: 38px; line-height: 1; font-weight: 700; color: var(--azul-titulo); font-variant-numeric: tabular-nums }
.tile .heroi.ok { color: var(--ok) }
.tile .heroi.erro { color: var(--erro) }
.calc { align-self: flex-start; min-height: 34px; padding: 0 11px; background: transparent; color: var(--azul-link); font: 700 13px var(--sans); border: 1px solid var(--borda-forte); border-radius: var(--r-md); cursor: pointer }

/* ── etiqueta de estado: cor + icone + palavra, nunca cor sozinha ──────── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-md); font-size: 13px; font-weight: 700 }
.chip.ok { background: var(--ok-bg); color: var(--ok) }
.chip.erro { background: var(--erro-bg); color: var(--erro) }
.chip.at { background: var(--at-bg); color: var(--at) }
.chip.pend { background: var(--azul-claro); color: var(--azul-titulo) }
.chip.neutro { background: var(--superficie-2); color: var(--t-suave); border: 1px solid var(--borda) }
.etapa { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); color: var(--trilha-txt); font-size: 13px; font-weight: 700 }
.etapa.clara { color: var(--trilha-txt-claro) }
.critica { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); border: 2px solid var(--azul); color: var(--azul-titulo); font-size: 12px; font-weight: 700 }

/* ── botao ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 20px; border-radius: var(--r-md); font: 700 16px var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: filter var(--t1) var(--curva) }
.btn:hover { filter: brightness(1.06) }
.btn.pri { background: var(--azul); color: var(--btn-txt); box-shadow: var(--brilho) }
.btn.sec { background: transparent; color: var(--azul-titulo); border-color: var(--borda-forte) }
.btn.ok { background: var(--ok); color: var(--btn-txt) }
.btn.perigo { background: transparent; color: var(--erro); border: 2px solid var(--erro) }
.btn[disabled] { background: var(--superficie-2); color: var(--t-fraco); border-color: var(--borda); box-shadow: none; cursor: not-allowed; filter: none }

/* ── formulario ─────────────────────────────────────────────────────────── */
.rot { display: block; font-size: 14px; font-weight: 600; color: var(--t-suave); margin-bottom: 5px }
.campo { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 11px; font: 16px var(--sans); color: var(--t); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--r-md) }
textarea.campo { min-height: 72px; padding: 11px; line-height: 1.5; resize: vertical }
.campo[readonly] { background: var(--superficie-2); color: var(--t-suave); border-color: var(--borda) }

/* ── tabela ─────────────────────────────────────────────────────────────── */
.rolax { overflow-x: auto }
.tab { width: 100%; border-collapse: collapse }
.tab caption { text-align: left; padding: 0 0 10px; font-size: 14px; color: var(--t-fraco) }
.tab th { text-align: left; padding: 10px 14px; background: var(--superficie-2); font-size: 13px; font-weight: 700; color: var(--t-suave); border-bottom: 1px solid var(--borda) }
.tab td { padding: 12px 14px; font-size: 15px; border-bottom: 1px solid var(--borda-fina); color: var(--t) }
.tab tr:last-child td { border-bottom: none }
.tab td.n, .tab th.n { text-align: right; font-variant-numeric: tabular-nums }

/* ── aviso ──────────────────────────────────────────────────────────────── */
.aviso { background: var(--azul-claro); border-left: 3px solid var(--azul); border-radius: var(--r-md); padding: 14px 18px; display: flex; gap: 11px; align-items: flex-start }
.aviso p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t-forte) }
.aviso.at { background: var(--at-bg); border-left-color: var(--at) }
.aviso.erro { background: var(--erro-bg); border-left-color: var(--erro) }
.aviso.erro p { color: var(--erro) }

/* ── grafico em HTML ────────────────────────────────────────────────────── */
.gfx { display: flex; gap: 9px; align-items: flex-end; height: 160px; border-bottom: 1px solid var(--g-eixo) }
.gfx .cl { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100% }
.gfx .vl { font-size: 13px; font-weight: 700; color: var(--t-forte); font-variant-numeric: tabular-nums }
.gfx .br { width: 100%; border-radius: 4px 4px 0 0; background: var(--g1) }
.gfx .par { flex: 1 1 0; display: flex; gap: 2px; align-items: flex-end; height: 100% }
.eixo { display: flex; gap: 9px; padding-top: 7px }
.eixo span { flex: 1 1 0; text-align: center; font-size: 13px; color: var(--t-suave) }
.leg { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px }
.leg span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--t) }
.leg i { width: 13px; height: 13px; border-radius: 2px; display: inline-block }

/* ── botao de tema ──────────────────────────────────────────────────────── */
.tema { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; background: transparent; color: var(--t-suave); font: 600 14px var(--sans); border: 1px solid var(--borda); border-radius: var(--r-pill); cursor: pointer }
.tema:hover { color: var(--azul-titulo); border-color: var(--borda-forte) }

/* ── menu: prioridade no topo, grupos recolhiveis ───────────────────────────
   Trinta e nove itens numa coluna de 264 px nao e menu, e lista de tudo: passa
   da altura da tela e obriga a rolar o menu para achar o trabalho. Os grupos
   recolhem em <details>, e abre so o grupo da tela aberta.

   <details> e nao JavaScript: recolher funciona com o runtime desligado, e o
   teclado ja sabe operar o <summary>. */
.mprio { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.14) }
.mprio a { font-weight: 600 }
.mgrupo { border: 0 }
.mgrupo > summary { padding: 11px 22px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-t2); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px }
.mgrupo > summary::-webkit-details-marker { display: none }
.mgrupo > summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; flex-shrink: 0; transition: transform 140ms cubic-bezier(.2,.7,.2,1) }
.mgrupo[open] > summary::before { transform: rotate(90deg) }
.mgrupo > summary:hover { color: var(--inv-t) }
.mgrupo[open] > summary { color: var(--inv-t) }

/* o aplicativo: a mesma ordem, em lista de toque */
.mbloco { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px }
.mgtitulo { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-fraco) }
.mitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 14px; background: var(--superficie); border: 1px solid var(--borda-fina); border-radius: var(--r); text-decoration: none; color: var(--t-forte); font-size: 15px; font-weight: 600 }
.mitem[aria-current="page"] { border-color: var(--azul); color: var(--azul-titulo) }

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