/* =====================================================================
   HydraDrain — cabeçalho comum dos módulos (01, 02, 08, 09, 12 e o
   esqueleto de módulo novo). Referência visual: Módulo 01.
   Ordem: faixa global de aviso → cabeçalho do módulo (título, descrição,
   destaques opcionais, navegação global) → barra opcional do módulo
   (.hd-module-toolbar para ações, .hd-module-summary para indicadores)
   → conteúdo. Usa os tokens de cor de cada página (--panel, --hair,
   --ink-2); não cria cores.
   A marca d'água (.hd-wm e .hd-wm-label, injetadas por js/aviso.js) fica
   FORA deste arquivo: nada aqui pode alterá-la.
   ===================================================================== */
.hd-module-wrap{max-width:1440px;margin:0 auto;padding:20px 20px 64px}

.hd-module-header{display:block;padding:14px 20px 16px;background:var(--panel);border:1px solid var(--hair);border-radius:3px}
.hd-module-title{font-size:19px;font-weight:600;margin:0;letter-spacing:-.01em}
/* "HydraDrain | Nome": o separador e o nome em cinza, como no Módulo 01; os espaços ficam no HTML (o separador é
   aria-hidden e o leitor de tela lê "HydraDrain Nome"), por isso o separador não tem margem própria */
.hd-module-separator{margin:0;font-weight:400;color:var(--ink-2)}
.hd-module-name{font-weight:400;color:var(--ink-2)}
.hd-module-description{max-width:78ch;margin:5px 0 0;color:var(--ink-2);font-size:13px}
.hd-module-highlights{max-width:90ch;margin:3px 0 0;padding-left:20px;color:var(--ink-2);font-size:13px}
.hd-module-nav{display:flex;flex-wrap:wrap;gap:3px 15px;margin-top:8px;font-size:12.5px}
.hd-module-nav [aria-current="page"]{font-weight:600;color:var(--ink)}

.hd-module-toolbar,.hd-module-summary{margin-top:20px}
/* indicadores que mudam com o cálculo (ex.: Módulo 08): painel próprio, logo abaixo do cabeçalho, que fica estável */
.hd-module-summary{padding:12px 20px;background:var(--panel);border:1px solid var(--hair);border-radius:3px}

@media (max-width:640px){
  .hd-module-nav{row-gap:5px}
}