/* Ditado por voz (S33) — aba "Instruções adicionais".
   Receita do cabeçalho de gravacao.css: esta folha é linkada ANTES do statement
   `@layer` de utilities.css, logo NÃO pode declarar @layer (inverteria a
   cascata). Um único `@media all` no topo expõe regras que vencem `@layer
   legado` sem !important; TODA regra (keyframes e o @media de reduced-motion
   inclusive) vive ANINHADA aqui dentro — a trava e2e s23-layers.spec.js espera
   exatamente [['CSSMediaRule', null, null]] para /ditado.css.
   Namespace exclusivo .ditado-*; só tokens de tokens.css; 0 !important.
   Gramática visual: a mesma do .gravacao-toggle (cheio, branco, weight 600,
   hover por brightness, foco azul) — em VERDE no repouso (ação disponível,
   distinta do azul único do #analyzeBtn vigiado pelo s17) e VERMELHA ao
   gravar (metáfora que o médico já conhece da aba de gravação). */
@media all {
    .ditado-controle {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .ditado-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--color-card);
        background: var(--color-success);
        border: 1px solid var(--color-success);
        border-radius: var(--r-btn);
        cursor: pointer;
        transition: filter var(--dur-fast) var(--ease),
            background-color var(--dur-fast) var(--ease),
            border-color var(--dur-fast) var(--ease);
    }

    .ditado-toggle:hover {
        filter: brightness(0.94);
    }

    .ditado-toggle:focus-visible {
        outline: 2px solid var(--color-blue);
        outline-offset: 2px;
    }

    .ditado-toggle .icon {
        width: 1rem;
        height: 1rem;
        color: var(--color-card);
    }

    /* Gravando: vermelho da casa + ponto pulsante no lugar da cor estática do
       ícone. O pulso comunica "captando agora"; nada mais se move. */
    .ditado-toggle[data-estado="gravando"] {
        background: var(--color-danger);
        border-color: var(--color-danger);
    }

    .ditado-toggle[data-estado="gravando"] .icon {
        animation: ditado-pulso 1.2s var(--ease) infinite;
    }

    /* Transcrevendo: botão espera com anel girando no lugar do microfone —
       trabalho em andamento, sem clique. */
    .ditado-toggle[data-estado="transcrevendo"] {
        cursor: progress;
        filter: grayscale(0.25) brightness(1.02);
    }

    .ditado-toggle[data-estado="transcrevendo"] .icon {
        display: none;
    }

    .ditado-toggle[data-estado="transcrevendo"]::before {
        content: "";
        width: 0.875rem;
        height: 0.875rem;
        border: 2px solid var(--color-card);
        border-top-color: transparent;
        border-radius: var(--r-pill);
        animation: ditado-giro 0.8s linear infinite;
    }

    .ditado-tempo {
        font-variant-numeric: tabular-nums;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--color-danger);
    }

    .ditado-tempo[hidden] {
        display: none;
    }

    @keyframes ditado-pulso {
        0% { opacity: 1; }
        50% { opacity: 0.35; }
        100% { opacity: 1; }
    }

    @keyframes ditado-giro {
        to { transform: rotate(360deg); }
    }

    /* Movimento reduzido: estados continuam legíveis sem animação — o pulso
       vira opacidade fixa e o anel vira ponto estático. */
    @media (prefers-reduced-motion: reduce) {
        .ditado-toggle[data-estado="gravando"] .icon {
            animation: none;
            opacity: 0.75;
        }

        .ditado-toggle[data-estado="transcrevendo"]::before {
            animation: none;
            border-top-color: var(--color-card);
            opacity: 0.6;
        }
    }
}