/* ══ MÓDULOS ═══════════════════════════════════════════════════════════
       Cada módulo tem a sua cor base. As variáveis de cor abaixo são
       "registradas" (@property, tipo <color>): assim o navegador INTERPOLA o
       valor quando o tema muda, e tudo que usa a variável — menu, botões,
       fundos, bordas — funde de uma cor pra outra, em vez de trocar num corte.
       Gestão Linkana = roxo (o tema base, no :root). Gestão F.D. = azul ardósia. */
    @property --bg            { syntax: '<color>'; inherits: true; initial-value: #eff0fa; }
    @property --surface-2     { syntax: '<color>'; inherits: true; initial-value: #f5f5fd; }
    @property --surface-3     { syntax: '<color>'; inherits: true; initial-value: #eceef8; }
    @property --border        { syntax: '<color>'; inherits: true; initial-value: #e1e3f0; }
    @property --border-strong { syntax: '<color>'; inherits: true; initial-value: #c5cae4; }
    @property --accent        { syntax: '<color>'; inherits: true; initial-value: #5544c4; }
    @property --accent-strong { syntax: '<color>'; inherits: true; initial-value: #4232a3; }
    @property --accent-soft   { syntax: '<color>'; inherits: true; initial-value: #efedfa; }
    @property --accent-border { syntax: '<color>'; inherits: true; initial-value: #cdc6f2; }
    @property --ink           { syntax: '<color>'; inherits: true; initial-value: #1e1936; }
    @property --ink-2         { syntax: '<color>'; inherits: true; initial-value: #282245; }
    @property --ink-line      { syntax: '<color>'; inherits: true; initial-value: #332c54; }
    @property --ink-fg        { syntax: '<color>'; inherits: true; initial-value: #a3a9c8; }
    @property --ink-fg-2      { syntax: '<color>'; inherits: true; initial-value: #8087ad; }
    @property --ink-icon      { syntax: '<color>'; inherits: true; initial-value: #b4aaf8; }

    @property --surface       { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
    @property --text          { syntax: '<color>'; inherits: true; initial-value: #171a2b; }
    @property --text-dim      { syntax: '<color>'; inherits: true; initial-value: #4b5169; }
    @property --text-mut      { syntax: '<color>'; inherits: true; initial-value: #676d8c; }
    @property --data          { syntax: '<color>'; inherits: true; initial-value: #737a9b; }
    @property --ok            { syntax: '<color>'; inherits: true; initial-value: #0f6b41; }
    @property --ok-bg         { syntax: '<color>'; inherits: true; initial-value: #d5f0e2; }
    @property --ok-fill       { syntax: '<color>'; inherits: true; initial-value: #1f9d63; }
    @property --ok-soft       { syntax: '<color>'; inherits: true; initial-value: #ebf8f1; }
    @property --warn          { syntax: '<color>'; inherits: true; initial-value: #8a4b00; }
    @property --warn-bg       { syntax: '<color>'; inherits: true; initial-value: #ffe6b3; }
    @property --warn-fill     { syntax: '<color>'; inherits: true; initial-value: #cc7400; }
    @property --warn-soft     { syntax: '<color>'; inherits: true; initial-value: #fff5d9; }
    @property --danger        { syntax: '<color>'; inherits: true; initial-value: #a31d15; }
    @property --danger-bg     { syntax: '<color>'; inherits: true; initial-value: #ffd9d4; }
    @property --danger-fill   { syntax: '<color>'; inherits: true; initial-value: #dc3a30; }
    @property --danger-soft   { syntax: '<color>'; inherits: true; initial-value: #fff0ee; }
    @property --info          { syntax: '<color>'; inherits: true; initial-value: #1a4fb5; }
    @property --info-bg       { syntax: '<color>'; inherits: true; initial-value: #dbe8ff; }
    @property --info-fill     { syntax: '<color>'; inherits: true; initial-value: #2f6fe0; }
    @property --info-soft     { syntax: '<color>'; inherits: true; initial-value: #eef4ff; }
    @property --violet        { syntax: '<color>'; inherits: true; initial-value: #6432b8; }
    @property --violet-bg     { syntax: '<color>'; inherits: true; initial-value: #eadffd; }
    @property --violet-fill   { syntax: '<color>'; inherits: true; initial-value: #8b4fe0; }
    @property --violet-soft   { syntax: '<color>'; inherits: true; initial-value: #f6f1ff; }

    :root {
      transition:
        --bg .95s ease-in-out,
        --surface .95s ease-in-out,
        --surface-2 .95s ease-in-out,
        --surface-3 .95s ease-in-out,
        --border .95s ease-in-out,
        --border-strong .95s ease-in-out,
        --text .95s ease-in-out,
        --text-dim .95s ease-in-out,
        --text-mut .95s ease-in-out,
        --data .95s ease-in-out,
        --accent .95s ease-in-out,
        --accent-strong .95s ease-in-out,
        --accent-soft .95s ease-in-out,
        --accent-border .95s ease-in-out,
        --ok .95s ease-in-out,
        --ok-bg .95s ease-in-out,
        --ok-fill .95s ease-in-out,
        --ok-soft .95s ease-in-out,
        --warn .95s ease-in-out,
        --warn-bg .95s ease-in-out,
        --warn-fill .95s ease-in-out,
        --warn-soft .95s ease-in-out,
        --danger .95s ease-in-out,
        --danger-bg .95s ease-in-out,
        --danger-fill .95s ease-in-out,
        --danger-soft .95s ease-in-out,
        --info .95s ease-in-out,
        --info-bg .95s ease-in-out,
        --info-fill .95s ease-in-out,
        --info-soft .95s ease-in-out,
        --violet .95s ease-in-out,
        --violet-bg .95s ease-in-out,
        --violet-fill .95s ease-in-out,
        --violet-soft .95s ease-in-out,
        --ink .95s ease-in-out,
        --ink-2 .95s ease-in-out,
        --ink-line .95s ease-in-out,
        --ink-fg .95s ease-in-out,
        --ink-fg-2 .95s ease-in-out,
        --ink-icon .95s ease-in-out;
    }
    @media (prefers-reduced-motion: reduce) { :root { transition: none; } }
    :root[data-modulo="fd"] {
      --bg: #edf1f6; --surface-2: #f4f7fb; --surface-3: #e8edf4; --border: #dde4ee; --border-strong: #c3cddc;
      --accent: #46648f; --accent-strong: #34507a; --accent-soft: #eaf0f8; --accent-border: #c3d2e8;
      --ink: #1b2637; --ink-2: #253349; --ink-line: #32425b; --ink-fg: #9dacc4; --ink-fg-2: #7e8fa9; --ink-icon: #a6bddb;
    }

    /* Custos: azul cobalto, vivo mas sóbrio: mais saturado que o ardósia da F.D., sem o verde-azulado da Plataforma e sem virar neon */
    :root[data-modulo="custos"] {
      --bg: #e8f0fc; --surface-2: #f0f6fe; --surface-3: #e0eafa; --border: #d2e1f6; --border-strong: #a6c2ea;
      --accent: #0b4fa8; --accent-strong: #08397e; --accent-soft: #e0edfc; --accent-border: #a3c4f0;
      --ink: #051c47; --ink-2: #0a2b62; --ink-line: #12407f; --ink-fg: #a3c0ec; --ink-fg-2: #7fa3da; --ink-icon: #74b0fa;
    }

    /* Módulos novos (Apropriação, Medições, Vendor List, Mológa): por ora só cartão e página de espera. As paletas já vêm nas duas versões
       (a escura em 13-escuro.css). Mológa é uma variação do azul oficial do Link; os outros três saem da família azul/roxa dos demais (o Vendor List é verde-azulado). */
    :root[data-modulo="apropriacao"] {
      --bg: #f6f4f3; --surface-2: #faf9f8; --surface-3: #f3f2f1; --border: #eae8e7; --border-strong: #d8d4d1;
      --accent: #9e5d32; --accent-strong: #804b27; --accent-soft: #faf2ed; --accent-border: #f2d8c6;
      --ink: #362519; --ink-2: #453022; --ink-line: #543c2c; --ink-fg: #c8b2a3; --ink-fg-2: #ad9280; --ink-icon: #f8c9aa;
    }
    :root[data-modulo="medicoes"] {
      --bg: #f3f6f4; --surface-2: #f8faf9; --surface-3: #f1f3f2; --border: #e7eae8; --border-strong: #d1d8d4;
      --accent: #277b51; --accent-strong: #1f6542; --accent-soft: #edfaf3; --accent-border: #c6f2dc;
      --ink: #193628; --ink-2: #224534; --ink-line: #2c5440; --ink-fg: #a3c8b5; --ink-fg-2: #80ad96; --ink-icon: #aaf8d1;
    }
    :root[data-modulo="vendor"] {
      --bg: #f1f6f5; --surface-2: #f6faf9; --surface-3: #ebf1f0; --border: #dce7e5; --border-strong: #c2d3d0;
      --accent: #0f766e; --accent-strong: #0b5a54; --accent-soft: #e3f5f2; --accent-border: #a9dcd5;
      --ink: #0a2624; --ink-2: #103633; --ink-line: #1a4844; --ink-fg: #a3c9c4; --ink-fg-2: #7fb0aa; --ink-icon: #7fe3d6;
    }
    :root[data-modulo="mologa"] {
      --bg: #f3f5f6; --surface-2: #f8fafa; --surface-3: #f1f3f3; --border: #e7eaea; --border-strong: #d1d7d8;
      --accent: #2b7887; --accent-strong: #21606c; --accent-soft: #edf8fa; --accent-border: #c6ebf2;
      --ink: #193136; --ink-2: #223f45; --ink-line: #2c4d54; --ink-fg: #a3c2c8; --ink-fg-2: #80a5ad; --ink-icon: #aaebf8;
    }
    /* Colaboradores: rosa/vinho — nenhum outro módulo usa esse tom. Documentação de terceiros exigida por um cliente
       final (hoje via WeHandle), controle só de leitura (o cadastro/vocabulário de status é da plataforma externa). */
    :root[data-modulo="colaboradores"] {
      --bg: #faf1f5; --surface-2: #fdf7fa; --surface-3: #f6e9ef; --border: #f0dde6; --border-strong: #e3bdd0;
      --accent: #a3316f; --accent-strong: #7f2457; --accent-soft: #fbe9f1; --accent-border: #eec3d9;
      --ink: #3a1226; --ink-2: #4a1830; --ink-line: #5c2140; --ink-fg: #dba9c1; --ink-fg-2: #bd7fa0; --ink-icon: #f2a8cc;
    }

    /* Gestão da Empresa usa as cores oficiais do Link (as mesmas da Plataforma: ver 12-plataforma.css e 13-escuro.css) */
    /* o "logo" da Gestão da Empresa (sem imagem: um prédio sobre o azul do Link) */
    .mark-empresa, .modulo-logo.modulo-empresa { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #3589ac, #065980); }
    .modulo-logo.modulo-empresa svg { width: 60%; height: 60%; }

    /* o que aparece em cada módulo (troca no meio da animação: data-modulo-ativo) */
    /* Cada módulo tem o seu grupo de menu e as suas páginas (data-mod). Só as do módulo ativo aparecem;
       cada módulo guarda a própria aba ativa, então voltar a ele reabre onde estava. */
    .nav-grupo { display: none; }
    html[data-modulo-ativo="linkana"] .nav-grupo[data-modulo="linkana"],
    html[data-modulo-ativo="fd"] .nav-grupo[data-modulo="fd"],
    html[data-modulo-ativo="custos"] .nav-grupo[data-modulo="custos"],
    html[data-modulo-ativo="apropriacao"] .nav-grupo[data-modulo="apropriacao"],
    html[data-modulo-ativo="medicoes"] .nav-grupo[data-modulo="medicoes"],
    html[data-modulo-ativo="vendor"] .nav-grupo[data-modulo="vendor"],
    html[data-modulo-ativo="mologa"] .nav-grupo[data-modulo="mologa"],
    html[data-modulo-ativo="colaboradores"] .nav-grupo[data-modulo="colaboradores"],
    html[data-modulo-ativo="plataforma"] .nav-grupo[data-modulo="plataforma"],
    html[data-modulo-ativo="empresa"] .nav-grupo[data-modulo="empresa"] { display: contents; }
    .main > .view[data-mod] { display: none !important; }
    html[data-modulo-ativo="linkana"] .main > .view.active[data-mod="linkana"],
    html[data-modulo-ativo="fd"] .main > .view.active[data-mod="fd"],
    html[data-modulo-ativo="custos"] .main > .view.active[data-mod="custos"],
    html[data-modulo-ativo="apropriacao"] .main > .view.active[data-mod="apropriacao"],
    html[data-modulo-ativo="medicoes"] .main > .view.active[data-mod="medicoes"],
    html[data-modulo-ativo="vendor"] .main > .view.active[data-mod="vendor"],
    html[data-modulo-ativo="mologa"] .main > .view.active[data-mod="mologa"],
    html[data-modulo-ativo="colaboradores"] .main > .view.active[data-mod="colaboradores"],
    html[data-modulo-ativo="plataforma"] .main > .view.active[data-mod="plataforma"],
    html[data-modulo-ativo="empresa"] .main > .view.active[data-mod="empresa"] { display: block !important; }
    html:not([data-modulo-ativo="linkana"]) #progress { display: none; }
    .mod-cab { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
    /* Linkana: o cabeçalho divide o espaço com o monitor da varredura (#progress), separado por um fio */
    html[data-modulo-ativo="linkana"] .mod-cab { flex: none; order: -1; }
    html[data-modulo-ativo="linkana"] .live-progress-card { padding-left: 22px; border-left: 1px solid var(--border-strong); }
    .mod-cab-logo { width: 42px; height: 42px; border-radius: 12px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--accent) 28%, transparent)); }
    .mod-cab-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
    .mod-cab-nome { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mod-cab-sub { font-size: var(--fs-sm); color: var(--text-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mod-cab-sub:empty { display: none; }
    /* o cabeçalho ganha a cor do módulo: fundo em degradê suave e um fio de acento na base */
    .top-header { background: linear-gradient(100deg, var(--accent-soft), var(--surface) 62%); }
    .top-header::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
      background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 0%, transparent) 55%);
    }
    @media (max-width: 1160px) { html[data-modulo-ativo="linkana"] .mod-cab-sub { display: none; } }
    @media (max-width: 760px) { html[data-modulo-ativo="linkana"] .mod-cab-txt { display: none; } }
    @media (max-width: 960px) {
      .mod-cab-logo { width: 32px; height: 32px; border-radius: 9px; }
      .mod-cab-nome { font-size: var(--fs-lg); }
      .mod-cab-sub { display: none; }
    }

    .nav-vazio {
      margin: 8px 2px; padding: 22px 6px; border: 1px dashed var(--ink-line); border-radius: 12px;
      text-align: center; font-size: 11px; line-height: 1.45; color: var(--ink-fg-2);
    }
    .fd-vazio {
      max-width: 460px; min-height: calc(100vh - 230px); margin: 0 auto;
      display: grid; place-content: center; justify-items: center; text-align: center; gap: 12px;
    }
    .fd-vazio-ico {
      width: 78px; height: 78px; border-radius: 24px; display: grid; place-items: center;
      background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-border);
    }
    .fd-vazio-ico svg { width: 38px; height: 38px; }
    .fd-vazio h2 { font-size: var(--fs-xl); letter-spacing: -.015em; }
    .fd-vazio p { font-size: var(--fs-sm); color: var(--text-mut); line-height: 1.6; }

    /* lista de módulos */
    .modulo-item { transition: background .3s; }
    .modulo-logo.modulo-fd {
      display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .04em;
      background: linear-gradient(135deg, #5d7ba6, #2c4266);
    }
    .modulo-check { opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease); }
    .modulo-item.ativo .modulo-check { opacity: 1; transform: none; }

    /* a troca: sai (~0,3 s) → conteúdo muda por baixo → entra em cascata (~1 s) */
    @keyframes modItemSai    { to { opacity: 0; transform: translateX(-16px) scale(.92); } }
    @keyframes modItemEntra  { from { opacity: 0; transform: translateX(16px) scale(.92); } }
    @keyframes modPaginaSai  { to { opacity: 0; transform: translateY(10px) scale(.992); } }
    @keyframes modPaginaEntra { from { opacity: 0; transform: translateY(18px) scale(.99); } }
    @keyframes modCabSai     { to { opacity: 0; transform: translateY(-6px); } }
    @keyframes modCabEntra   { from { opacity: 0; transform: translateY(10px); } }
    .mod-saindo .nav-grupo > * { animation: modItemSai .28s var(--ease) both; animation-delay: calc(var(--i, 0) * 18ms); }
    .mod-entrando .nav-grupo > * { animation: modItemEntra .6s var(--ease) backwards; animation-delay: calc(80ms + var(--i, 0) * 45ms); }
    .mod-entrando .nav-ind.on { animation: modItemEntra .6s var(--ease) .15s backwards; }
    .mod-saindo .main { animation: modPaginaSai .3s var(--ease) both; }
    .mod-entrando .main { animation: modPaginaEntra .75s var(--ease) .05s both; }
    .mod-saindo .top-header > * { animation: modCabSai .28s var(--ease) both; }
    .mod-entrando .top-header > * { animation: modCabEntra .6s var(--ease) .1s backwards; }

    @media (prefers-reduced-motion: reduce) {
      :root { transition: none; }
      .mod-saindo *, .mod-entrando * { animation: none !important; }
    }

    /* miolo do anel: total de documentos solicitados */
    .rs-anel { position: relative; }
    .rs-anel-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; pointer-events: none; }
    .rs-anel-centro b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
    .rs-anel-centro small { font-size: 10px; font-weight: 500; color: var(--text-mut); margin-top: 2px; }

    /* Ícone do módulo no topo do menu: o do módulo que sai encolhe e gira enquanto o
       do que entra cresce no mesmo lugar (ligado ao data-modulo: acompanha a fusão das cores) */

    /* ── Cartão dos módulos: se expande do botão até a borda direita ─────────
       Ancorado embaixo, alinhado ao botão (left/bottom vêm do JS) e com folga
       visível à direita. O 1º "quadrado" do cartão repete o botão apertado, por
       isso a expansão parece nascer dele. */
    .modulo-veu { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--ink) 38%, transparent); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
    .modulo-veu.on { opacity: 1; pointer-events: auto; }
    .modulo-painel {
      position: fixed; z-index: 90; display: grid; grid-template-columns: var(--bw, 76px) minmax(0, 1fr); align-items: end;
      background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 18px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
    }
    .modulo-painel[hidden] { display: none; }
    .modulo-fechar {
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      height: var(--bh, 62px); border: none; background: none; cursor: pointer;
      font: inherit; font-size: 11px; font-weight: 500; color: var(--ink-fg-hi);
    }
    .modulo-fechar svg { width: 26px; height: 26px; color: #fff; transition: transform .5s var(--ease); }
    .modulo-painel.abrindo .modulo-fechar svg { transform: rotate(90deg); }
    .modulo-corpo { padding: 16px 18px 16px 8px; min-width: 0; }
    .modulo-painel .modulo-menu-tit { padding: 0 6px 10px; }
    .modulo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
    .modulo-painel .modulo-item {
      padding: 14px 16px; gap: 14px; border-radius: 14px; border: 1px solid var(--ink-line);
      background: color-mix(in srgb, var(--ink) 55%, transparent);
    }
    .modulo-painel .modulo-item:hover { background: var(--ink); border-color: var(--ink-icon); }
    .modulo-painel .modulo-item.ativo { background: color-mix(in srgb, var(--ink-icon) 14%, transparent); border-color: color-mix(in srgb, var(--ink-icon) 55%, transparent); }
    .modulo-painel .modulo-item .mark { width: 44px; height: 44px; border-radius: 12px; }
    .modulo-painel .modulo-logo.modulo-fd { font-size: 15px; }
    .modulo-painel .modulo-txt b { font-size: var(--fs-md); }
    .modulo-painel .modulo-txt small { margin-top: 2px; }
    /* o conteúdo aparece depois que o cartão já abriu, em cascata */
    @keyframes moduloConteudo { from { opacity: 0; transform: translateY(10px); } }
    .modulo-painel.abrindo .modulo-menu-tit { animation: moduloConteudo .45s var(--ease) .2s backwards; }
    .modulo-painel.abrindo .modulo-item { animation: moduloConteudo .5s var(--ease) backwards; }
    .modulo-painel.fechando .modulo-corpo { opacity: 0; transition: opacity .18s ease; }
    @media (prefers-reduced-motion: reduce) { .modulo-painel *, .modulo-veu { animation: none !important; transition: none !important; } }
    .modulo-menu-tit { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-fg-2); }

    /* Cartão dos módulos, versão final: uma faixa ao lado do menu, na altura do botão,
       até a borda direita (left/right/top/height vêm do JS). O véu fica ABAIXO do menu:
       o botão continua à vista, apertado. */
    .modulo-veu { z-index: 35; }
    .modulo-painel {
      display: flex; align-items: stretch; padding: 9px 10px; grid-template-columns: none; min-height: 0; gap: 10px;
      background: var(--ink); border: 1px solid var(--ink-line);
    }
    .modulo-btn.aberto { background: color-mix(in srgb, var(--ink-icon) 16%, var(--ink-2)); }
    .modulo-corpo { padding: 0; display: flex; flex: 1; min-width: 0; }
    .modulo-menu-tit { display: none; }
    /* os cartões encolhem até 200px para caber na faixa (com 8 módulos não cabem todos a 286px); passando disso, a lista rola de lado com a
       roda do mouse (modulos.js), sem barra de rolagem. As pontas esmaecem só do lado em que ainda há cartões (--fe/--fd, ligadas por modulos.js), sem corte seco. */
    @property --fe { syntax: "<length>"; inherits: false; initial-value: 0px; }
    @property --fd { syntax: "<length>"; inherits: false; initial-value: 0px; }
    .modulo-lista {
      display: flex; gap: 10px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fe), #000 calc(100% - var(--fd)), transparent);
      mask-image: linear-gradient(90deg, transparent, #000 var(--fe), #000 calc(100% - var(--fd)), transparent);
      transition: --fe .3s var(--ease), --fd .3s var(--ease);
    }
    .modulo-lista::-webkit-scrollbar { display: none; }
    .modulo-lista.mais-esq { --fe: 36px; }
    .modulo-lista.mais-dir { --fd: 36px; }
    .modulo-painel .modulo-item { flex: 0 1 286px; width: auto; min-width: 200px; padding: 0 16px; gap: 12px; }
    .modulo-painel .modulo-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .modulo-painel .modulo-item .mark { width: 38px; height: 38px; }
    .modulo-painel .modulo-txt { min-width: 0; }
    .modulo-painel .modulo-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    /* atraso em cascata só entre os cartões visíveis: --k é numerado pelo modulos.js ao abrir (cliente com poucos módulos não espera cartões escondidos) */
    .modulo-painel.abrindo .modulo-item { animation-delay: calc(.2s + var(--k, 0) * .08s); }