/* ══ 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;
    }

    /* Gestão Custos: azul cobalto (o azul do Expresso Paulista), 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;
    }

    /* 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="plataforma"] .nav-grupo[data-modulo="plataforma"] { 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[data-mod="fd"],
    html[data-modulo-ativo="custos"] .main > .view[data-mod="custos"],
    html[data-modulo-ativo="plataforma"] .main > .view.active[data-mod="plataforma"] { display: block !important; }
    html:not([data-modulo-ativo="linkana"]) #progress,
    html:not([data-modulo-ativo="linkana"]) .top-actions { display: none; }
    .mod-cab { display: none; align-items: center; gap: 12px; flex: 1; min-width: 0; }
    html:not([data-modulo-ativo="linkana"]) .mod-cab { display: flex; }
    .mod-cab-nome { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }

    .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) */
    .sidebar .brand { display: grid; place-items: center; }
    .brand .mark-mod { grid-area: 1 / 1; transition: opacity .6s ease-in-out, transform .8s var(--ease); }
    .brand .mark-mod { opacity: 0; transform: scale(.5) rotate(-16deg); pointer-events: none; }
    html[data-modulo="linkana"] .brand .mark-linkana,
    html[data-modulo="fd"] .brand .mark-fd,
    html[data-modulo="custos"] .brand .mark-custos,
    html[data-modulo="plataforma"] .brand .mark-plataforma { opacity: 1; transform: none; pointer-events: auto; }
    @media (prefers-reduced-motion: reduce) { .brand .mark-mod { transition: none; } }

    /* ── 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.abrindo .modulo-item:nth-child(1) { animation-delay: .26s; }
    .modulo-painel.abrindo .modulo-item:nth-child(2) { animation-delay: .34s; }
    .modulo-painel.abrindo .modulo-item:nth-child(3) { animation-delay: .42s; }
    .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; min-width: 0; }
    .modulo-menu-tit { display: none; }
    .modulo-lista { display: flex; gap: 10px; }
    .modulo-painel .modulo-item { width: 286px; padding: 0 16px; gap: 12px; }
    .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; }
    .modulo-painel.abrindo .modulo-item:nth-child(1) { animation-delay: .2s; }
    .modulo-painel.abrindo .modulo-item:nth-child(2) { animation-delay: .28s; }
    .modulo-painel.abrindo .modulo-item:nth-child(3) { animation-delay: .36s; }