/*
Descrição: Estilos da animação exclusiva da página "Software de Gestão"
           (".mgmt-*"), usada no hero no lugar do marcador de imagem
           genérico. Mostra uma janela de dashboard: um gráfico de vendas
           com barras a crescer uma a seguir à outra, e uma lista de
           faturas recentes onde chega uma fatura nova (desliza para
           dentro) que começa "pendente" e passa a "paga" — nesse
           instante o emblema "FATURA PAGA" acende. Depois tudo recolhe e
           o ciclo recomeça. Os instantes-chave têm de ficar
           sincronizados entre todos os "@keyframes" abaixo.
Autor: Emanuel Borges
Versão: 1.1.0
Última alteração: 2026-10-08
*/

.mgmt-frame {
    border-radius: 16px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-alt);
    padding: 22px;
}

.mgmt-board {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 300;
    border-radius: 10px;
    overflow: hidden;
    background-color: #0a0f1a;
}

.mgmt-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------- Janela do dashboard ---------- */

.mgmt-window {
    fill: #0f1626;
    stroke: #2a3550;
    stroke-width: 2;
}

.mgmt-titlebar {
    fill: #141c2e;
}

.mgmt-dot {
    opacity: 0.8;
}

.mgmt-title-text {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: #9fb3d1;
}

.mgmt-panel-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.04em;
    fill: #5c6b84;
}

/* ---------- Gráfico de vendas (barras a crescer) ---------- */

/* Cada barra já tem a altura final desenhada no HTML — o "scaleY" é que
   a faz crescer a partir da base, como as linhas/cabos nas outras
   animações do site, só que aqui com escala em vez de "stroke-dashoffset"
   (mais natural para uma forma preenchida). */
.mgmt-bar {
    fill: var(--color-primary-light);
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.mgmt-bar-1 { animation: mgmt-grow-1 10s linear infinite; }
.mgmt-bar-2 { animation: mgmt-grow-2 10s linear infinite; }
.mgmt-bar-3 { animation: mgmt-grow-3 10s linear infinite; }
.mgmt-bar-4 { animation: mgmt-grow-4 10s linear infinite; }
.mgmt-bar-5 { animation: mgmt-grow-5 10s linear infinite; }

@keyframes mgmt-grow-1 {
    0%, 2%    { transform: scaleY(0); }
    10%       { transform: scaleY(1); }
    84%       { transform: scaleY(1); }
    92%, 100% { transform: scaleY(0); }
}
@keyframes mgmt-grow-2 {
    0%, 10%   { transform: scaleY(0); }
    18%       { transform: scaleY(1); }
    84%       { transform: scaleY(1); }
    92%, 100% { transform: scaleY(0); }
}
@keyframes mgmt-grow-3 {
    0%, 18%   { transform: scaleY(0); }
    26%       { transform: scaleY(1); }
    84%       { transform: scaleY(1); }
    92%, 100% { transform: scaleY(0); }
}
@keyframes mgmt-grow-4 {
    0%, 26%   { transform: scaleY(0); }
    34%       { transform: scaleY(1); }
    84%       { transform: scaleY(1); }
    92%, 100% { transform: scaleY(0); }
}
@keyframes mgmt-grow-5 {
    0%, 34%   { transform: scaleY(0); }
    42%       { transform: scaleY(1); }
    84%       { transform: scaleY(1); }
    92%, 100% { transform: scaleY(0); }
}

.mgmt-baseline {
    stroke: #2a3550;
    stroke-width: 1.5;
}

/* ---------- Lista de faturas recentes ---------- */

.mgmt-row-bg {
    fill: #141c2e;
}

.mgmt-row-text {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: #9fb3d1;
}

.mgmt-row-amount {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: bold;
    fill: #cfd8e6;
}

.mgmt-row-dot-paid {
    fill: #35d07f;
}

/* A fatura nova: começa fora da vista (deslocada para a direita e
   invisível), desliza para dentro, fica "pendente" (ponto cinza) e, mais
   tarde, passa a "paga" (o ponto verde desvanece por cima do cinza). */
.mgmt-new-row {
    animation: mgmt-row-slide-in 10s linear infinite;
}

@keyframes mgmt-row-slide-in {
    0%, 44%  { transform: translateX(24px); opacity: 0; }
    52%      { transform: translateX(0); opacity: 1; }
    84%      { transform: translateX(0); opacity: 1; }
    92%, 100% { transform: translateX(24px); opacity: 0; }
}

.mgmt-dot-pending {
    fill: #5c6b84;
    animation: mgmt-dot-pending-fade 10s linear infinite;
}

.mgmt-dot-paid {
    fill: #35d07f;
    opacity: 0;
    animation: mgmt-dot-paid-fade 10s linear infinite;
}

@keyframes mgmt-dot-pending-fade {
    0%, 63%   { opacity: 1; }
    68%, 100% { opacity: 0; }
}

@keyframes mgmt-dot-paid-fade {
    0%, 63%   { opacity: 0; }
    68%, 92%  { opacity: 1; }
    96%, 100% { opacity: 0; }
}

/* ---------- Emblema "Fatura paga" (HTML, canto superior direito) ---------- */

.mgmt-paid-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background-color: rgba(10, 15, 26, 0.75);
    color: #5c6b84;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    animation: mgmt-badge-glow 10s linear infinite;
}

@keyframes mgmt-badge-glow {
    0%, 63% {
        opacity: 0;
        transform: translateY(-4px);
        color: #5c6b84;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    68%, 84% {
        opacity: 1;
        transform: translateY(0);
        color: #35d07f;
        border-color: #35d07f;
        box-shadow: 0 0 0 1px #35d07f, 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 18px rgba(53, 208, 127, 0.5);
    }
    92%, 100% {
        opacity: 0;
        transform: translateY(-4px);
        color: #5c6b84;
        border-color: var(--color-border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
}

.mgmt-paid-icon {
    display: flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mgmt-paid-icon svg {
    width: 100%;
    height: 100%;
}

.mgmt-paid-text {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .mgmt-frame {
        padding: 14px;
    }

    .mgmt-paid-badge {
        padding: 6px 10px 6px 8px;
        gap: 6px;
    }

    .mgmt-paid-text {
        font-size: 9px;
    }

    .mgmt-paid-icon {
        width: 14px;
        height: 14px;
    }
}

/* ---------- Passo 4 "Testes com a equipa" ----------
   Mesma consola de testes usada noutras páginas de serviço com um passo
   "Testes" (ver sistemas-seguranca.css), com os 4 tópicos próprios desta
   página (funcionalidades, desempenho, segurança, usabilidade). Cada
   linha tem uma janela de 16% do ciclo de 7s, seguida da anterior: anel
   a rodar (spinner) enquanto "a testar" e depois um visto verde quando
   aprovado, com uma barra de progresso geral a acompanhar. */
.process-test-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

.process-test-label {
    font-size: 12px;
    fill: var(--color-text);
}

.process-test-ring {
    fill: none;
    stroke-width: 3;
}

.process-test-ring-1 { animation: process-test-ring-1 7s ease-in-out infinite; }
.process-test-ring-2 { animation: process-test-ring-2 7s ease-in-out infinite; }
.process-test-ring-3 { animation: process-test-ring-3 7s ease-in-out infinite; }
.process-test-ring-4 { animation: process-test-ring-4 7s ease-in-out infinite; }

@keyframes process-test-ring-1 { 0%, 11%  { stroke: var(--color-border); } 14%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }
@keyframes process-test-ring-2 { 0%, 27%  { stroke: var(--color-border); } 30%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }
@keyframes process-test-ring-3 { 0%, 43%  { stroke: var(--color-border); } 46%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }
@keyframes process-test-ring-4 { 0%, 59%  { stroke: var(--color-border); } 62%, 82% { stroke: #35d07f; } 92%, 100% { stroke: var(--color-border); } }

.process-test-spinner {
    fill: none;
    stroke: var(--color-primary-light);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 8 100;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-test-spin-rotate 0.8s linear infinite;
}

@keyframes process-test-spin-rotate {
    to { transform: rotate(360deg); }
}

.process-test-spin-1 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-1 7s linear infinite; }
.process-test-spin-2 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-2 7s linear infinite; }
.process-test-spin-3 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-3 7s linear infinite; }
.process-test-spin-4 { animation: process-test-spin-rotate 0.8s linear infinite, process-test-spin-show-4 7s linear infinite; }

@keyframes process-test-spin-show-1 { 0%, 2%  { opacity: 0; } 4%, 11%  { opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes process-test-spin-show-2 { 0%, 18% { opacity: 0; } 20%, 27% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes process-test-spin-show-3 { 0%, 34% { opacity: 0; } 36%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes process-test-spin-show-4 { 0%, 50% { opacity: 0; } 52%, 59% { opacity: 1; } 61%, 100% { opacity: 0; } }

.process-test-check {
    fill: none;
    stroke: #35d07f;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-test-check-1 { animation: process-test-check-show-1 7s linear infinite; }
.process-test-check-2 { animation: process-test-check-show-2 7s linear infinite; }
.process-test-check-3 { animation: process-test-check-show-3 7s linear infinite; }
.process-test-check-4 { animation: process-test-check-show-4 7s linear infinite; }

@keyframes process-test-check-show-1 { 0%, 13%  { opacity: 0; } 15%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes process-test-check-show-2 { 0%, 29%  { opacity: 0; } 31%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes process-test-check-show-3 { 0%, 45%  { opacity: 0; } 47%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes process-test-check-show-4 { 0%, 61%  { opacity: 0; } 63%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }

.process-test-bar-track {
    fill: var(--color-border);
}

.process-test-bar-fill {
    fill: #35d07f;
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: process-test-bar-grow 7s ease-in-out infinite;
}

@keyframes process-test-bar-grow {
    0%, 2%    { transform: scaleX(0); }
    58%, 80%  { transform: scaleX(1); }
    90%, 100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .process-test-ring-1,
    .process-test-ring-2,
    .process-test-ring-3,
    .process-test-ring-4,
    .process-test-spinner,
    .process-test-spin-1,
    .process-test-spin-2,
    .process-test-spin-3,
    .process-test-spin-4,
    .process-test-check-1,
    .process-test-check-2,
    .process-test-check-3,
    .process-test-check-4,
    .process-test-bar-fill {
        animation: none;
    }

    .process-test-ring-1,
    .process-test-ring-2,
    .process-test-ring-3,
    .process-test-ring-4 {
        stroke: #35d07f;
    }

    .process-test-spinner {
        opacity: 0;
    }

    .process-test-check-1,
    .process-test-check-2,
    .process-test-check-3,
    .process-test-check-4 {
        opacity: 1;
    }

    .process-test-bar-fill {
        transform: scaleX(1);
    }
}

/* Animação exclusiva do passo 3 "Desenvolvimento e configuração": à
   esquerda, linhas de código "escritas" uma a seguir à outra (simples
   barras, sem texto real, por isso o crescimento em largura via
   "scaleX" não distorce glifo nenhum); à direita, um interruptor por
   cada módulo do software (Faturação/Stocks/Clientes) que liga
   (cinzento -> verde) assim que as linhas de código associadas a esse
   módulo terminam de "escrever"; em baixo, uma barra de progresso geral
   que cresce em três patamares, um por módulo ligado. No fim tudo
   recolhe e o ciclo recomeça. */
.process-build-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

.process-build-dot {
    fill: var(--color-primary-light);
}

.process-build-ping {
    fill: var(--color-primary-light);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-build-ping 1.8s ease-out infinite;
}

@keyframes process-build-ping {
    0%   { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(2.4); opacity: 0; }
}

.process-build-status {
    font-size: 11px;
    fill: var(--color-text);
}

.process-build-divider {
    stroke: var(--color-border);
    stroke-width: 1;
}

.process-build-line {
    fill: var(--color-border);
    transform-box: fill-box;
    transform-origin: 0% 50%;
}

.process-build-line-1 { animation: process-build-line-1 7s ease-in-out infinite; }
.process-build-line-2 { animation: process-build-line-2 7s ease-in-out infinite; }
.process-build-line-3 { animation: process-build-line-3 7s ease-in-out infinite; }
.process-build-line-4 { animation: process-build-line-4 7s ease-in-out infinite; }
.process-build-line-5 { animation: process-build-line-5 7s ease-in-out infinite; }

@keyframes process-build-line-1 { 0%, 2%  { transform: scaleX(0); } 8%,  88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes process-build-line-2 { 0%, 8%  { transform: scaleX(0); } 16%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes process-build-line-3 { 0%, 20% { transform: scaleX(0); } 30%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes process-build-line-4 { 0%, 36% { transform: scaleX(0); } 44%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes process-build-line-5 { 0%, 44% { transform: scaleX(0); } 52%, 88% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }

.process-build-label {
    font-size: 10px;
    fill: var(--color-text);
}

.process-build-toggle-track-1 { animation: process-build-track-1 7s ease-in-out infinite; }
.process-build-toggle-track-2 { animation: process-build-track-2 7s ease-in-out infinite; }
.process-build-toggle-track-3 { animation: process-build-track-3 7s ease-in-out infinite; }

@keyframes process-build-track-1 { 0%, 18% { fill: var(--color-border); } 20%, 88% { fill: #35d07f; } 92%, 100% { fill: var(--color-border); } }
@keyframes process-build-track-2 { 0%, 32% { fill: var(--color-border); } 34%, 88% { fill: #35d07f; } 92%, 100% { fill: var(--color-border); } }
@keyframes process-build-track-3 { 0%, 54% { fill: var(--color-border); } 56%, 88% { fill: #35d07f; } 92%, 100% { fill: var(--color-border); } }

.process-build-toggle-knob {
    fill: var(--color-bg);
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.process-build-toggle-knob-1 { animation: process-build-knob-1 7s ease-in-out infinite; }
.process-build-toggle-knob-2 { animation: process-build-knob-2 7s ease-in-out infinite; }
.process-build-toggle-knob-3 { animation: process-build-knob-3 7s ease-in-out infinite; }

@keyframes process-build-knob-1 { 0%, 18% { transform: translateX(0); } 20%, 88% { transform: translateX(18px); } 92%, 100% { transform: translateX(0); } }
@keyframes process-build-knob-2 { 0%, 32% { transform: translateX(0); } 34%, 88% { transform: translateX(18px); } 92%, 100% { transform: translateX(0); } }
@keyframes process-build-knob-3 { 0%, 54% { transform: translateX(0); } 56%, 88% { transform: translateX(18px); } 92%, 100% { transform: translateX(0); } }

.process-build-bar-track {
    fill: var(--color-border);
}

.process-build-bar-fill {
    fill: #35d07f;
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: process-build-bar-grow 7s ease-in-out infinite;
}

@keyframes process-build-bar-grow {
    0%, 18%   { transform: scaleX(0); }
    20%, 32%  { transform: scaleX(0.33); }
    34%, 54%  { transform: scaleX(0.66); }
    56%, 88%  { transform: scaleX(1); }
    92%, 100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .process-build-ping,
    .process-build-line-1,
    .process-build-line-2,
    .process-build-line-3,
    .process-build-line-4,
    .process-build-line-5,
    .process-build-toggle-track-1,
    .process-build-toggle-track-2,
    .process-build-toggle-track-3,
    .process-build-toggle-knob-1,
    .process-build-toggle-knob-2,
    .process-build-toggle-knob-3,
    .process-build-bar-fill {
        animation: none;
    }

    .process-build-ping {
        opacity: 0;
    }

    .process-build-line-1,
    .process-build-line-2,
    .process-build-line-3,
    .process-build-line-4,
    .process-build-line-5 {
        transform: scaleX(1);
    }

    .process-build-toggle-track-1,
    .process-build-toggle-track-2,
    .process-build-toggle-track-3 {
        fill: #35d07f;
    }

    .process-build-toggle-knob-1,
    .process-build-toggle-knob-2,
    .process-build-toggle-knob-3 {
        transform: translateX(18px);
    }

    .process-build-bar-fill {
        transform: scaleX(1);
    }
}

/* Animação exclusiva do passo 5 "Formação e acompanhamento": um ecrã de
   vídeo de formação com um botão de "play" e uma barra de progresso de
   reprodução, três avatares da equipa por baixo que vão reagindo um a
   seguir ao outro à medida que o vídeo avança (pequeno destaque verde
   transitório, não permanente — ao contrário dos indicadores de estado
   usadas noutras páginas, aqui representa só um momento de atenção, não
   uma conclusão), e um balão de chat com "três pontos" a piscar em
   loop próprio e contínuo (independente do ciclo do vídeo), para
   transmitir que o apoio depois da formação está sempre disponível. */
.process-train-panel {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 3;
}

.process-train-dot {
    fill: var(--color-primary-light);
}

.process-train-ping {
    fill: var(--color-primary-light);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: process-train-ping 1.8s ease-out infinite;
}

@keyframes process-train-ping {
    0%   { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(2.4); opacity: 0; }
}

.process-train-status {
    font-size: 11px;
    fill: var(--color-text);
}

.process-train-divider {
    stroke: var(--color-border);
    stroke-width: 1;
}

.process-train-screen {
    fill: var(--color-bg-alt);
    stroke: var(--color-border);
    stroke-width: 2;
}

.process-train-play-circle {
    fill: var(--color-primary);
    opacity: 0.15;
}

.process-train-play-icon {
    fill: var(--color-primary-light);
}

.process-train-progress-track {
    fill: var(--color-border);
}

.process-train-progress-fill {
    fill: var(--color-primary-light);
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: process-train-progress-grow 7s ease-in-out infinite;
}

@keyframes process-train-progress-grow {
    0%, 2%    { transform: scaleX(0); }
    70%, 88%  { transform: scaleX(1); }
    92%, 100% { transform: scaleX(0); }
}

.process-train-avatar {
    fill: var(--color-bg-alt);
    stroke: var(--color-border);
    stroke-width: 2;
}

.process-train-avatar-1 { animation: process-train-avatar-1 7s ease-in-out infinite; }
.process-train-avatar-2 { animation: process-train-avatar-2 7s ease-in-out infinite; }
.process-train-avatar-3 { animation: process-train-avatar-3 7s ease-in-out infinite; }

@keyframes process-train-avatar-1 { 0%, 15% { stroke: var(--color-border); } 18%, 32% { stroke: #35d07f; } 35%, 100% { stroke: var(--color-border); } }
@keyframes process-train-avatar-2 { 0%, 38% { stroke: var(--color-border); } 41%, 55% { stroke: #35d07f; } 58%, 100% { stroke: var(--color-border); } }
@keyframes process-train-avatar-3 { 0%, 60% { stroke: var(--color-border); } 63%, 77% { stroke: #35d07f; } 80%, 100% { stroke: var(--color-border); } }

.process-train-bubble {
    fill: var(--color-bg-alt);
    stroke: var(--color-border);
    stroke-width: 2;
}

.process-train-bubble-dot {
    fill: var(--color-primary-light);
}

.process-train-bubble-dot-1 { animation: process-train-bubble-dot-1 1.2s ease-in-out infinite; }
.process-train-bubble-dot-2 { animation: process-train-bubble-dot-2 1.2s ease-in-out infinite; }
.process-train-bubble-dot-3 { animation: process-train-bubble-dot-3 1.2s ease-in-out infinite; }

@keyframes process-train-bubble-dot-1 { 0%, 100% { opacity: 0.3; } 15% { opacity: 1; } 30% { opacity: 0.3; } }
@keyframes process-train-bubble-dot-2 { 0%, 100% { opacity: 0.3; } 30% { opacity: 0.3; } 45% { opacity: 1; } 60% { opacity: 0.3; } }
@keyframes process-train-bubble-dot-3 { 0%, 100% { opacity: 0.3; } 45% { opacity: 0.3; } 60% { opacity: 1; } 75% { opacity: 0.3; } }

.process-train-support-text {
    font-size: 11px;
    fill: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
    .process-train-ping,
    .process-train-progress-fill,
    .process-train-avatar-1,
    .process-train-avatar-2,
    .process-train-avatar-3,
    .process-train-bubble-dot-1,
    .process-train-bubble-dot-2,
    .process-train-bubble-dot-3 {
        animation: none;
    }

    .process-train-ping {
        opacity: 0;
    }

    .process-train-progress-fill {
        transform: scaleX(0.6);
    }

    .process-train-bubble-dot-1,
    .process-train-bubble-dot-2,
    .process-train-bubble-dot-3 {
        opacity: 1;
    }
}