acai-ui 1.65.5

package/src/components/preferences/acai-ui-preferences.vue

@@ -0,0 +1,349 @@
+<template>
+  <!--
+    A MOLDURA é trocável; o conteúdo é escrito uma vez só.
+
+    - Normal: `q-drawer` nativo (side="right", overlay) — slide por transform,
+      backdrop com blur, full-height por natureza. Vive dentro do q-layout do
+      app, ao lado do drawer de navegação à esquerda.
+    - `embutido`: só uma `div`. É assim que o <acai-ui-drawer> hospeda estas
+      preferências dentro da folha de tela cheia no celular, sem abrir um
+      segundo painel por cima do primeiro.
+
+    `<component :is>` em vez de v-if/v-else nas duas versões: o corpo tem ~150
+    linhas de campos, e duas cópias divergiriam no primeiro ajuste.
+  -->
+  <component :is="raiz" v-bind="atributosRaiz">
+    <div class="acaipref">
+      <!-- Embutido não desenha cabeçalho próprio: quem manda no título e nos
+           botões é a folha que hospeda, e dois cabeçalhos empilhados foi
+           exatamente o problema que este modo veio resolver. -->
+      <header v-if="!embutido" class="acaipref__cab">
+        <svg class="acaipref-icon" viewBox="0 0 24 24">
+          <path d="M4 6h10M18 6h2M4 12h2M10 12h10M4 18h8M16 18h4" />
+          <circle cx="16" cy="6" r="2" /><circle cx="8" cy="12" r="2" /><circle cx="14" cy="18" r="2" />
+        </svg>
+        <h2>{{ title }}</h2>
+        <button class="acaipref-btn" type="button" aria-label="Fechar" @click="aberto = false">
+          <svg class="acaipref-icon" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" /></svg>
+        </button>
+      </header>
+
+      <div class="acaipref__corpo">
+        <section class="acaipref-bloco">
+          <div class="acaipref-bloco__rot">Aparência</div>
+          <div class="acaipref-campo">
+            <span class="acaipref-campo__txt"><span class="t">Tema</span><span class="d">Claro ou escuro</span></span>
+            <div class="acaipref-seg">
+              <button type="button" :class="{ on: preferencias.tema === 'claro' }" @click="preferencias.tema = 'claro'">
+                <span class="acaipref-seg__c">
+                  <svg class="acaipref-icon sm" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="4.5" />
+                    <path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5 4 4M19 5l1-1M5 19l-1 1M19 19l1 1" />
+                  </svg>
+                  Claro
+                </span>
+              </button>
+              <button type="button" :class="{ on: preferencias.tema === 'escuro' }" @click="preferencias.tema = 'escuro'">
+                <span class="acaipref-seg__c">
+                  <svg class="acaipref-icon sm" viewBox="0 0 24 24">
+                    <path d="M21 12.8A8.5 8.5 0 1 1 11.2 3 6.6 6.6 0 0 0 21 12.8Z" />
+                  </svg>
+                  Escuro
+                </span>
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <section class="acaipref-bloco">
+          <div class="acaipref-bloco__rot">Acessibilidade</div>
+
+          <div class="acaipref-campo">
+            <span class="acaipref-campo__txt"><span class="t">Tamanho da fonte</span><span class="d">Ajusta todo o sistema</span></span>
+            <div class="acaipref-seg">
+              <button v-for="op in fontes" :key="op.v" type="button"
+                      :class="['fs-a', op.cls, { on: preferencias.tamanhoFonte === op.v }]"
+                      @click="preferencias.tamanhoFonte = op.v">A</button>
+            </div>
+          </div>
+
+          <div class="acaipref-cvd-bloco">
+            <span class="acaipref-campo__txt"><span class="t">Modo daltônico</span><span class="d">Cores de status distinguíveis</span></span>
+            <div class="acaipref-cvd" role="radiogroup" aria-label="Modo daltônico">
+              <button v-for="op in opcoesDaltonismo" :key="op.valor" type="button"
+                      class="acaipref-cvd__op" :class="{ on: preferencias.daltonismo === op.valor }"
+                      role="radio" :aria-checked="preferencias.daltonismo === op.valor"
+                      @click="preferencias.daltonismo = op.valor">
+                <span class="acaipref-cvd__nome">{{ op.rotulo }}</span>
+                <span class="acaipref-cvd__swatches" aria-hidden="true">
+                  <!-- Tamanho/cor INLINE de propósito: garante o quadradinho mesmo
+                       se o CSS scoped não casar (dev cache, scopeId, etc.). -->
+                  <span
+                    v-for="cor in op.cores"
+                    :key="cor"
+                    class="acaipref-swatch"
+                    :style="{
+                      display: 'inline-block',
+                      width: '20px',
+                      height: '20px',
+                      borderRadius: '6px',
+                      background: cor,
+                      boxShadow: '0 0 0 1.5px rgba(255, 255, 255, 0.18)',
+                    }"
+                  ></span>
+                </span>
+              </button>
+            </div>
+          </div>
+
+          <div class="acaipref-campo">
+            <span class="acaipref-campo__txt"><span class="t">Alto contraste</span><span class="d">Reforça bordas e textos</span></span>
+            <acai-ui-toggle v-model="preferencias.altoContraste" aria-label="Alto contraste" />
+          </div>
+
+          <div class="acaipref-campo">
+            <span class="acaipref-campo__txt"><span class="t">Reduzir animações</span><span class="d">Menos movimento na tela</span></span>
+            <acai-ui-toggle v-model="preferencias.reduzirAnimacoes" aria-label="Reduzir animações" />
+          </div>
+
+          <!-- Só aparece onde a síntese de voz existe: em navegador sem ela, o
+               controle não teria nada pra ligar. -->
+          <div v-if="vozSuportada" class="acaipref-campo">
+            <span class="acaipref-campo__txt"><span class="t">Leitura em voz alta</span><span class="d">Botões para ouvir os textos da ajuda</span></span>
+            <acai-ui-toggle v-model="preferencias.leituraVoz" aria-label="Leitura em voz alta" />
+          </div>
+
+          <!-- Ajustes da voz: só fazem sentido com a leitura ligada. -->
+          <template v-if="vozSuportada && preferencias.leituraVoz">
+            <div v-if="vozesDoIdioma.length > 1" class="acaipref-campo acaipref-campo--col">
+              <label class="acaipref-campo__txt" :for="idSeletorVoz">
+                <span class="t">Voz</span><span class="d">Vozes instaladas neste computador</span>
+              </label>
+              <select
+                :id="idSeletorVoz"
+                v-model="preferencias.vozNome"
+                class="acaipref-select"
+              >
+                <!-- Rótulo numerado, não o `name` da voz: o que o sistema
+                     devolve é nome de engine ("Microsoft Daniel - Portuguese
+                     (Brazil)"), que não diz nada a quem só quer escolher. O
+                     nome real fica no `title`, pra quem precisar identificar. -->
+                <option value="">Automática</option>
+                <option
+                  v-for="(voz, indice) in vozesDoIdioma"
+                  :key="voz.name"
+                  :value="voz.name"
+                  :title="voz.name"
+                >
+                  Voz {{ indice + 1 }}
+                </option>
+              </select>
+            </div>
+
+            <div class="acaipref-campo acaipref-campo--col">
+              <span class="acaipref-campo__txt">
+                <span class="t">Velocidade da fala</span><span class="d">Mais devagar ajuda a acompanhar</span>
+              </span>
+              <div class="acaipref-seg" role="radiogroup" aria-label="Velocidade da fala">
+                <button
+                  v-for="op in velocidades"
+                  :key="op.valor"
+                  type="button"
+                  class="acaipref-seg__op"
+                  :class="{ on: preferencias.vozVelocidade === op.valor }"
+                  role="radio"
+                  :aria-checked="preferencias.vozVelocidade === op.valor"
+                  @click="preferencias.vozVelocidade = op.valor"
+                >
+                  {{ op.rotulo }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Ouvir ali mesmo: escolher voz sem testar é escolher no escuro. -->
+            <div class="acaipref-campo">
+              <span class="acaipref-campo__txt">
+                <span class="t">Testar</span><span class="d">Ouça como ficou</span>
+              </span>
+              <button
+                type="button"
+                class="acaipref-testar"
+                :aria-pressed="testando"
+                @click="testarVoz"
+              >
+                <acai-ui-icon :name="testando ? 'stop' : 'volume_up'" size="md" decorative />
+                {{ testando ? 'Parar' : 'Ouvir' }}
+              </button>
+            </div>
+          </template>
+        </section>
+      </div>
+
+      <footer class="acaipref__pe">
+        <svg class="acaipref-icon sm" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 4.5 3.4 7.9 8 9 4.6-1.1 8-4.5 8-9V6z" /></svg>
+        Preferências salvas neste dispositivo.
+      </footer>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
+import { QDrawer } from 'quasar'
+import { usePreferencias, type DaltonismoAcaiUi } from '../../hooks/use-preferencias'
+import { useTela } from '../../hooks/use-tela'
+import { useLeituraVoz } from '../../hooks/use-leitura-voz'
+import { gerarId } from '../../utils/gerador-id'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+import AcaiUiToggle from '../toggle/acai-ui-toggle.vue'
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    /**
+     * Renderiza só o conteúdo, sem moldura e sem cabeçalho próprio — pra ser
+     * hospedado dentro de outro painel. É o que o <acai-ui-drawer> usa na folha
+     * de tela cheia do celular. Fora desse caso, não mexer.
+     */
+    embutido?: boolean
+  }>(),
+  { title: 'Preferências', embutido: false },
+)
+
+const aberto = defineModel<boolean>({ default: false })
+
+/** Largura de projeto do painel — cabe a grade de swatches sem apertar. */
+const LARGURA_PADRAO = 360
+/**
+ * Faixa de backdrop reservada no celular. Mesmo número do <acai-ui-drawer>, e
+ * pelo mesmo motivo: sem ela o painel encosta nas duas bordas, cobre a tela
+ * inteira e fica "montado" no que estiver atrás — sem nenhuma pista visual de
+ * que há algo embaixo nem onde tocar pra sair.
+ */
+const FAIXA_BACKDROP = 56
+
+const { largura: larguraTela, medido } = useTela()
+
+/**
+ * O painel é `side="right"`, então a faixa sobra à ESQUERDA — do lado oposto ao
+ * drawer de navegação, que abre pela esquerda. Um não tapa o outro.
+ *
+ * Sem medição (SSR até hidratar) vale a largura de projeto: `larguraTela` é 0 e
+ * a conta daria um painel de 240px em qualquer aparelho.
+ */
+const larguraEfetiva = computed<number>(() =>
+  medido.value
+    ? Math.min(LARGURA_PADRAO, Math.max(larguraTela.value - FAIXA_BACKDROP, 240))
+    : LARGURA_PADRAO,
+)
+
+/** A moldura: gaveta lateral normalmente, uma `div` crua quando embutido. */
+const raiz = computed(() => (props.embutido ? 'div' : QDrawer))
+
+const atributosRaiz = computed(() =>
+  props.embutido
+    ? { class: 'acaipref-embutido' }
+    : {
+        modelValue: aberto.value,
+        'onUpdate:modelValue': (v: boolean) => {
+          aberto.value = v
+        },
+        side: 'right' as const,
+        overlay: true,
+        bordered: true,
+        width: larguraEfetiva.value,
+        class: 'acaipref-drawer',
+      },
+)
+
+const { preferencias } = usePreferencias()
+const {
+  suportado: vozSuportada,
+  vozesPara,
+  vozes,
+  idLendo,
+  alternar: alternarFala,
+  parar: pararFala,
+} = useLeituraVoz()
+
+const idSeletorVoz = gerarId('acaipref-voz', 'select')
+const ID_TESTE_VOZ = 'acai-preferencias:teste-voz'
+
+/** Depende de `vozes` pra recalcular quando o `voiceschanged` chegar. */
+const vozesDoIdioma = computed(() => {
+  void vozes.value
+  return vozesPara('pt-BR')
+})
+
+/**
+ * Valores escolhidos por MEDIÇÃO, não por simetria bonita.
+ *
+ * O motor do Windows (SAPI) não aceita velocidade contínua: ele arredonda o
+ * `rate` para degraus internos. Medindo a mesma frase neste navegador, 0.85 e
+ * 1.15 deram exatamente a mesma duração que 1.0 — ou seja, "devagar" não fazia
+ * nada. Estes três caem em degraus distintos: -26% e +20% de duração.
+ */
+const velocidades = [
+  { valor: 0.6, rotulo: 'Devagar' },
+  { valor: 1, rotulo: 'Normal' },
+  { valor: 1.6, rotulo: 'Rápida' },
+]
+
+const testando = computed(() => idLendo.value === ID_TESTE_VOZ)
+
+function testarVoz(): void {
+  alternarFala('Esta é a voz que vai ler os textos de ajuda do sistema.', {
+    id: ID_TESTE_VOZ,
+    voz: preferencias.vozNome,
+    rate: preferencias.vozVelocidade,
+  })
+}
+
+// Trocar voz ou velocidade no meio da fala NÃO muda o que já está tocando: os
+// dois são fixados na `utterance` quando ela entra na fila. Em vez de deixar o
+// usuário achar que mudou e não mudou, a troca para a fala — quem quiser
+// conferir aperta "Ouvir" de novo, aí sim na configuração nova.
+//
+// `leituraVoz` entra na mesma regra por outro motivo: ao desligar, os controles
+// somem da tela e a fala ficaria tocando sem nenhum botão pra parar.
+watch(
+  () => [preferencias.vozNome, preferencias.vozVelocidade, preferencias.leituraVoz],
+  () => pararFala(),
+)
+
+// Fechar o painel com a voz falando deixaria o áudio órfão.
+onBeforeUnmount(pararFala)
+
+const fontes = [
+  { v: 87.5, cls: 'fs-1' },
+  { v: 100, cls: 'fs-2' },
+  { v: 112.5, cls: 'fs-3' },
+  { v: 125, cls: 'fs-4' },
+]
+
+// Opções do modo daltônico — cada tipo mostra sua paleta de status
+// (positivo / aviso / negativo / info), com os mesmos hex do _themes.scss.
+// Escolhe-se clicando na linha (WYSIWYG das cores).
+const opcoesDaltonismo: {
+  valor: DaltonismoAcaiUi
+  rotulo: string
+  cores: readonly [string, string, string, string]
+}[] = [
+  { valor: 'padrao', rotulo: 'Padrão', cores: ['#38904c', '#f0c065', '#b52232', '#1a4a8c'] },
+  { valor: 'protanopia', rotulo: 'Protanopia', cores: ['#0072b2', '#f0b000', '#e8590c', '#7a52a0'] },
+  { valor: 'deuteranopia', rotulo: 'Deuteranopia', cores: ['#0072b2', '#e69f00', '#d55e00', '#7a52a0'] },
+  { valor: 'tritanopia', rotulo: 'Tritanopia', cores: ['#009e73', '#ee7733', '#cc3311', '#0077bb'] },
+  { valor: 'acromatopsia', rotulo: 'Acromatopsia', cores: ['#808080', '#6b6b6b', '#3d3d3d', '#565656'] },
+]
+
+// Esc fecha (q-drawer overlay já fecha no clique do backdrop).
+function aoTeclar(e: KeyboardEvent): void {
+  if (e.key === 'Escape' && aberto.value) aberto.value = false
+}
+onMounted(() => window.addEventListener('keydown', aoTeclar))
+onBeforeUnmount(() => window.removeEventListener('keydown', aoTeclar))
+</script>
+
+<style lang="scss" scoped>
+@import './acai-ui-preferences-styles.scss';
+</style>

package/src/components/progress/acai-ui-progress-interface.ts

@@ -0,0 +1,20 @@
+export type LinearProgressColor = 'primary' | 'negative' | 'positive' | 'warning' | 'grey'
+
+export type LinearProgressSize = 'sm' | 'md' | 'lg'
+
+export interface ColorThreshold {
+  upTo: number
+  color: LinearProgressColor
+}
+
+export interface LinearProgressProps {
+  value?: number
+  color?: LinearProgressColor
+  autoColor?: boolean
+  thresholds?: ColorThreshold[]
+  trackColor?: string
+  size?: LinearProgressSize
+  showValue?: boolean
+  stripe?: boolean
+  indeterminate?: boolean
+}

package/src/components/progress/acai-ui-progress.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="ds-linear-progress" :class="`ds-linear-progress--${size}`">
+    <div v-if="indeterminate" class="ds-linear-progress__indeterminate">
+      <q-linear-progress
+        :value="0.5"
+        color="grey-4"
+        track-color="grey-3"
+        :size="qSize"
+        rounded
+        class="ds-linear-progress__bar"
+      />
+      <acai-ui-icon name="close" class="ds-linear-progress__icon" />
+    </div>
+
+    <q-linear-progress
+      v-else
+      :value="normalizedValue"
+      :color="resolvedColor"
+      :track-color="trackColor"
+      :stripe="stripe"
+      :size="qSize"
+      rounded
+      class="ds-linear-progress__bar"
+    />
+
+    <span v-if="showValue && !indeterminate" class="ds-linear-progress__value">
+      {{ Math.round((value ?? 0) * 100) }}%
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { LinearProgressProps } from './acai-ui-progress-interface'
+import AcaiUiIcon from '../icon/acai-ui-icon.vue'
+
+import type { ColorThreshold } from './acai-ui-progress-interface'
+
+const props = withDefaults(defineProps<LinearProgressProps>(), {
+  value: 0,
+  color: 'primary',
+  autoColor: false,
+  trackColor: 'grey-3',
+  size: 'md',
+  showValue: true,
+  stripe: false,
+  indeterminate: false,
+})
+
+const DEFAULT_THRESHOLDS: ColorThreshold[] = [
+  { upTo: 0.25, color: 'negative' },
+  { upTo: 0.99, color: 'warning' },
+  { upTo: 1, color: 'positive' },
+]
+
+const normalizedValue = computed(() => Math.min(Math.max(props.value ?? 0, 0), 1))
+
+const resolvedColor = computed(() => {
+  if (!props.autoColor) return props.color
+
+  const thresholds = props.thresholds ?? DEFAULT_THRESHOLDS
+  const val = normalizedValue.value
+
+  for (const t of thresholds) {
+    if (val <= t.upTo) return t.color
+  }
+
+  return thresholds[thresholds.length - 1]?.color ?? props.color
+})
+
+const sizeMap: Record<string, string> = {
+  sm: '8px',
+  md: '12px',
+  lg: '20px',
+}
+
+const qSize = computed(() => sizeMap[props.size ?? 'md'] ?? '12px')
+</script>
+
+<style lang="scss" scoped>
+.ds-linear-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  &__bar {
+    flex: 1;
+    border-radius: $radius-lg;
+  }
+
+  &__indeterminate {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    color: var(--acai-text-muted, #{$color-gray-600});
+    font-size: 1rem;
+    background: var(--acai-surface, #{$color-white-100});
+    border-radius: 50%;
+  }
+
+  &__value {
+    font-weight: 600;
+    color: var(--acai-text, #{$color-gray-700});
+    min-width: 40px;
+    text-align: right;
+  }
+
+  &--sm .ds-linear-progress__value { font-size: 0.75rem; }
+  &--sm .ds-linear-progress__icon { font-size: 0.75rem; }
+
+  &--md .ds-linear-progress__value { font-size: 0.875rem; }
+  &--md .ds-linear-progress__icon { font-size: 1rem; }
+
+  &--lg .ds-linear-progress__value { font-size: 1rem; }
+  &--lg .ds-linear-progress__icon { font-size: 1.25rem; }
+}
+</style>

package/src/components/radio/acai-ui-radio-interface.ts

@@ -0,0 +1,14 @@
+export type RadioColor = 'primary' | 'negative' | 'positive'
+
+export type RadioSize = 'sm' | 'md' | 'lg'
+
+export interface RadioProps {
+  modelValue: string | number | null
+  val: string | number
+  label?: string
+  color?: RadioColor
+  size?: RadioSize
+  disable?: boolean
+  /** Marca o campo como obrigatório (eMAG 6.4). Aplica `aria-required="true"`. */
+  required?: boolean
+}

package/src/components/radio/acai-ui-radio.vue

@@ -0,0 +1,78 @@
+<template>
+  <q-radio
+    v-model="model"
+    :val="val"
+    :label="label"
+    :color="color"
+    :size="qSize"
+    :disable="disable"
+    :class="classes"
+    :aria-required="props.required ? 'true' : undefined"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import type { RadioProps } from './acai-ui-radio-interface'
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  color: 'primary',
+  size: 'md',
+  disable: false,
+})
+
+const model = defineModel<string | number | null>()
+
+const emit = defineEmits<{
+  change: [value: string | number | null]
+}>()
+
+const sizeMap: Record<string, string> = {
+  sm: '32px',
+  md: '40px',
+  lg: '52px',
+}
+
+const qSize = computed(() => sizeMap[props.size ?? 'md'] ?? '40px')
+
+const classes = computed(() => [
+  'ds-radio',
+  `ds-radio--${props.size}`,
+  {
+    'ds-radio--disabled': props.disable,
+    // Só o primary default adapta (control-on). Cor explícita (positive/…) passa
+    // direto pro q-radio via :color e NÃO é sobrescrita.
+    'ds-radio--adapt': props.color === 'primary',
+  },
+])
+
+watch(model, (val) => {
+  emit('change', val ?? null)
+})
+</script>
+
+<style lang="scss" scoped>
+.ds-radio {
+  :deep(.q-radio__label) {
+    color: var(--acai-text, #{$color-gray-700});
+    font-weight: 500;
+  }
+
+  &--sm :deep(.q-radio__label) { font-size: 0.75rem; }
+  &--md :deep(.q-radio__label) { font-size: 0.875rem; }
+  &--lg :deep(.q-radio__label) { font-size: 1rem; }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // Marcado: usa control-on (navy no claro, azul no escuro, cor CVD no daltônico) —
+  // igual a checkbox/toggle. Sem isso, o `color="primary"` cru ficava navy sobre a
+  // superfície escura ("primary com primary"). Só no primary default (.ds-radio--adapt).
+  // !important vence o `color` que o q-radio aplica no inner via a prop color.
+  &--adapt :deep(.q-radio__inner--truthy) {
+    color: var(--acai-control-on, #{$primary}) !important;
+  }
+}
+</style>

package/src/components/section/acai-ui-section-styles.scss

@@ -0,0 +1,93 @@
+.secao-ficha {
+  margin-top: 10px;
+  margin-bottom: 16px;
+}
+
+.secao-ficha__expansao {
+  border: 1px solid var(--acai-border, rgba(20, 20, 20, 0.1));
+  border-radius: 10px;
+  background: var(--acai-surface, #ffffff);
+  overflow: hidden;
+}
+
+.secao-ficha__expansao .q-expansion-item__border {
+  display: none;
+}
+
+.secao-ficha__cabecalho {
+  padding: 0 !important;
+  background: rgba(0, 0, 0, 0.03);
+
+  // No escuro o "0.03 preto" some sobre a superfície navy — clareia levemente.
+  .body--dark & {
+    background: rgba(255, 255, 255, 0.04);
+  }
+}
+
+.secao-ficha__cabecalho-conteudo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  // Título à esquerda e ações/badges à direita brigam pela mesma linha. A
+  // esquerda tem `min-width: 0` e trunca, mas as ações não encolhem — sem wrap
+  // é o título que some. Deixando quebrar, as ações descem inteiras.
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 10px 14px;
+  width: 100%;
+}
+
+.secao-ficha__cabecalho-esquerda {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.secao-ficha__cabecalho-direita {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.secao-ficha__indicador {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  flex: 0 0 10px;
+}
+
+.secao-ficha__indicador--neutro {
+  background: var(--acai-border, rgba(0, 0, 0, 0.18));
+}
+
+.secao-ficha__indicador--positivo {
+  background: var(--q-positive);
+}
+
+.secao-ficha__indicador--negativo {
+  background: var(--q-negative);
+}
+
+.secao-ficha__indicador--alerta {
+  background: var(--q-warning);
+}
+
+.secao-ficha__icone {
+  color: var(--acai-text-muted, rgba(0, 0, 0, 0.65));
+}
+
+.secao-ficha__titulo {
+  font-weight: 700;
+  color: var(--acai-text, rgba(0, 0, 0, 0.78));
+  // Reset de margin/font-size padrão dos elementos <h1>-<h6> — visualmente continua
+  // igual ao <span> original, semanticamente vira heading (eMAG 1.3).
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.secao-ficha__conteudo {
+  padding: 12px 14px 14px;
+}