/* ============================================================
   Identidade do Grupo A. H. Pereira de Sá
   Carregado por TODAS as paginas do painel, sempre como ultimo
   <link> do <head>, para que a paleta do grupo venca a cascata
   do <style> proprio de cada pagina.
   ============================================================ */

:root{
  /* azul-marinho da logo do grupo */
  --ahp-900:#161E3A; --ahp-800:#20294F; --ahp-700:#2C3A6E;
  --ahp-600:#36478A; --ahp-500:#4A5C9E; --ahp-400:#7182BB;
  --ahp-300:#A3AFD5; --ahp-200:#CCD4E9; --ahp-100:#E3E8F4; --ahp-050:#F0F3FA;

  /* cores das tres marcas (retiradas dos manuais aprovados) */
  --m-nortista:#E3242B; --m-nortista-sol:#F5A623;
  --m-magazine:#1E78BE; --m-magazine-lua:#FFDC19;
  --m-sports:#F06423;   --m-sports-cinza:#5A5A5A;

  /* a paleta do app passa a ser a do grupo */
  --accent:#2C3A6E; --accent-soft:#E7EBF6; --accent-ink:#2C3A6E;
  --moon-a:#2C3A6E; --moon-b:#F06423;
  --ground:#F5F7FC; --surface-3:#EAEEF7;
  --line:#DFE4F0; --line-soft:#EBEFF7;
}

@media (prefers-color-scheme:dark){
  :root[data-theme="dark"]{
    --accent:#8FA2DE; --accent-soft:#1E2648; --accent-ink:#A9B8E9;
    --moon-a:#8FA2DE; --moon-b:#F87F45;
    --ground:#080B12; --surface-3:#1A2130;
    --line:#242C3C; --line-soft:#19202B;
  }
}
:root[data-theme="dark"]{
  --accent:#8FA2DE; --accent-soft:#1E2648; --accent-ink:#A9B8E9;
  --moon-a:#8FA2DE; --moon-b:#F87F45;
  --ground:#080B12; --surface-3:#1A2130;
  --line:#242C3C; --line-soft:#19202B;
}

/* ---- selo do grupo no lugar da lua, nas paginas internas ---- */
.moon,.lua{
  background:url("/marca/grupo-icone.svg") center/contain no-repeat !important;
  border-radius:0 !important; box-shadow:none !important;
  width:34px !important; height:34px !important; flex:none;
}
:root[data-theme="dark"] .moon,:root[data-theme="dark"] .lua{
  background-image:url("/marca/grupo-icone-claro.svg") !important;
}

/* ============================================================
   Cabecalho do grupo  (usado no painel e na tela de entrada)
   ============================================================ */
.ahp-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0 0}
.ahp-lock{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto;
  text-decoration:none;color:inherit}
/* o seletor de loja e os dois botoes quebram de linha juntos, nunca soltos */
.ahp-acoes{display:flex;align-items:center;gap:8px;flex:none}
.ahp-selo{width:42px;height:42px;flex:none;border-radius:11px;background:var(--ahp-700);
  display:grid;place-items:center;color:#fff;font-family:"Archivo",system-ui,sans-serif;
  font-weight:800;font-size:.78rem;letter-spacing:.04em;
  box-shadow:0 2px 10px rgba(44,58,110,.28)}
:root[data-theme="dark"] .ahp-selo{background:var(--ahp-500);box-shadow:none}
.ahp-nome{min-width:0}
.ahp-nome .k{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ahp-400);
  font-weight:500;margin-bottom:1px}
.ahp-nome .n{display:block;font-family:"Archivo",system-ui,sans-serif;font-weight:800;
  font-size:clamp(.94rem,2.5vw,1.12rem);letter-spacing:-.005em;line-height:1.1;
  color:var(--ahp-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme="dark"] .ahp-nome .n{color:#DCE3F6}

/* ---- faixa das tres marcas ---- */
.ahp-marcas{display:flex;align-items:center;gap:clamp(10px,2.5vw,22px);flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:11px clamp(12px,2.5vw,18px);margin:12px 0 0}
:root[data-theme="dark"] .ahp-marcas{background:#F4F6FB;border-color:#D5DCEC}
.ahp-marcas .rot{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:#8790A6;flex:none;
  padding-right:clamp(4px,1.5vw,10px);border-right:1px solid #E1E6F0}
.ahp-marca{display:flex;align-items:center;height:27px;flex:0 1 auto;min-width:0}
.ahp-marca img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.ahp-marca.n img{height:31px}
@media (max-width:560px){
  .ahp-marcas{gap:16px;justify-content:flex-start;padding:10px 13px}
  .ahp-marcas .rot{width:100%;border-right:0;padding:0 0 4px}
  .ahp-marca{height:20px} .ahp-marca.n img{height:24px}
}

/* ============================================================
   Navegacao em dois niveis
   ============================================================ */
.nav2{position:sticky;top:0;z-index:22;margin:14px calc(-1*clamp(14px,3vw,28px)) 0;
  padding:0 clamp(14px,3vw,28px);
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* a linha da area ativa pousa sobre este filete, e nao solta no meio do nada */
.nav-areas{display:flex;gap:clamp(2px,1.4vw,10px);overflow-x:auto;
  border-bottom:1px solid var(--line-soft);margin-bottom:9px;
  scrollbar-width:none;-ms-overflow-style:none}
.nav-areas::-webkit-scrollbar{display:none}
.nav-area{position:relative;border:0;background:transparent;white-space:nowrap;
  font-family:"Archivo",system-ui,sans-serif;font-weight:700;
  font-size:clamp(.82rem,2.2vw,.92rem);letter-spacing:.005em;
  color:var(--muted);padding:13px clamp(8px,1.6vw,14px) 11px;cursor:pointer}
.nav-area:hover{color:var(--ink)}
.nav-area[aria-selected="true"]{color:var(--accent-ink)}
.nav-area[aria-selected="true"]::after{content:"";position:absolute;left:clamp(8px,1.6vw,14px);
  right:clamp(8px,1.6vw,14px);bottom:-1px;height:2.5px;border-radius:3px;background:var(--accent)}
.nav-area .pino{display:inline-block;margin-left:5px;min-width:17px;padding:0 4px;height:16px;
  border-radius:100px;background:var(--accent-soft);color:var(--accent-ink);
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:600;line-height:16px;
  text-align:center;vertical-align:1px}

.nav-itens{display:flex;gap:6px;padding:0 0 10px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.nav-itens::-webkit-scrollbar{display:none}
.nav-item{border:1px solid transparent;background:var(--surface-3);color:var(--muted);
  font-family:inherit;font-size:.8rem;font-weight:600;white-space:nowrap;
  padding:6px 13px;border-radius:100px;cursor:pointer}
.nav-item:hover{color:var(--ink)}
.nav-item[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.nav-item .ext{opacity:.55;font-size:.9em;margin-left:4px}

/* trilha do que se esta vendo, logo abaixo da navegacao */
.nav-trilha{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;
  color:var(--faint);margin:12px 2px 0;letter-spacing:.02em}
.nav-trilha #navTrilha{color:var(--muted);font-weight:600}
.nav-trilha #subtitulo:not(:empty)::before{content:" · "}

/* ---- botao de voltar das paginas internas, no tom do grupo ---- */
.voltar:hover{border-color:var(--accent);color:var(--accent-ink)}
