@gyramais/gyra-design 0.2.48 → 0.2.50

package/dist/index.css

@@ -696,12 +696,6 @@ video {
 .w-\[360px\] {
   width: 360px;
 }
-.w-\[420px\] {
-  width: 420px;
-}
-.w-\[560px\] {
-  width: 560px;
-}
 .w-\[800px\] {
   width: 800px;
 }
@@ -738,6 +732,9 @@ video {
 .max-w-\[500px\] {
   max-width: 500px;
 }
+.max-w-full {
+  max-width: 100%;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -782,9 +779,6 @@ video {
 .gap-4 {
   gap: 1rem;
 }
-.gap-6 {
-  gap: 1.5rem;
-}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -819,9 +813,6 @@ video {
 .rounded-\[6px\] {
   border-radius: 6px;
 }
-.rounded-\[var\(--radius-lg\)\] {
-  border-radius: var(--radius-lg);
-}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -834,9 +825,6 @@ video {
 .border {
   border-width: 1px;
 }
-.border-\[var\(--color-border-secondary\)\] {
-  border-color: var(--color-border-secondary);
-}
 .bg-\[var\(--background-color\)\] {
   background-color: var(--background-color);
 }
@@ -861,10 +849,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
 }
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-}
 .fill-current {
   fill: currentColor;
 }
@@ -908,6 +892,9 @@ video {
   font-size: 1rem !important;
   line-height: 1.5rem !important;
 }
+.text-\[13px\] {
+  font-size: 13px;
+}
 .text-\[16px\] {
   font-size: 16px;
 }
@@ -938,9 +925,16 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.capitalize {
+  text-transform: capitalize;
+}
 .italic {
   font-style: italic;
 }
+.tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
 .leading-none {
   line-height: 1;
 }
@@ -954,9 +948,6 @@ video {
 .text-\[var\(--color-text-secondary\)\] {
   color: var(--color-text-secondary);
 }
-.text-\[var\(--color-text-tertiary\)\] {
-  color: var(--color-text-tertiary);
-}
 .text-\[var\(--primary-button-color\)\] {
   color: var(--primary-button-color);
 }
@@ -4410,40 +4401,25 @@ h6 {
   padding-top: 1rem;
 }
 .gyramais-card.gyramais-card-loading .gyramais-card-content {
-  min-height: 6rem;
-  /* A regra de esconder abaixo usa `> *`, que casa so ELEMENTO. Um children
-     que seja string/numero solto (ou vindo de fragmento) escaparia e
-     apareceria ao lado do skeleton. Zerar a tipografia aqui colapsa esse texto;
-     o placeholder restaura a sua logo em seguida. */
-  font-size: 0;
-  line-height: 0;
+  min-height: 4rem;
 }
 
-/* `gyramais-card-loading` (modificador da RAIZ) e `gyramais-card-placeholder`
-   (o bloco desenhado) sao nomes distintos de proposito. Quando os dois eram a
-   mesma classe, o seletor de descendente abaixo casava tambem a raiz de um
-   <Card loading> ANINHADO dentro de outro Card, e aplicava o layout do
-   placeholder no card inteiro.
-
-   Estado de carregando: o skeleton entra NO FLUXO, nao sobreposto. Assim ele
-   e' quem dita a altura do card, e um `loadingContent` alto (grafico, tabela)
-   nao fica cortado pela altura do conteudo vazio que ele esta substituindo.
-   O conteudo real continua montado, so escondido pela regra abaixo, para nao
-   perder estado no meio do carregamento. */
-.gyramais-card .gyramais-card-placeholder {
+.gyramais-card .gyramais-card-loading {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
   display: flex;
+  height: 100%;
   width: 100%;
-  flex-direction: column;
-  align-items: stretch;
-  background-color: var(--color-surface-primary);
-  font-size: var(--fs-body);
-  line-height: var(--lh-normal);
-}
-
-.gyramais-card.gyramais-card-loading
-  .gyramais-card-content
-  > *:not(.gyramais-card-placeholder) {
-  display: none;
+  --tw-scale-x: 102%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff80;
+  padding-top: 1rem;
+  --tw-backdrop-blur: blur(4px);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
 .gyramais-chart .recharts-legend-item {
@@ -5624,78 +5600,110 @@ h6 {
 
 /* v2 Drawer chrome — flat-first: hairline borders, no soft halo. */
 .gyramais-drawer {
-    min-width: 100%;
-    max-width: 100%;
-    --tw-shadow: 0 0 #0000;
-    --tw-shadow-colored: 0 0 #0000;
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+  min-width: 100%;
+  max-width: 100%;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 @media (min-width: 768px) {
-    .gyramais-drawer {
-        min-width: 0px;
-        max-width: 100%
-    }
+  .gyramais-drawer {
+    min-width: 0px;
+    max-width: 100%;
+  }
 }
 
 .gyramais-drawer .gyramais-drawer-container {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-    justify-content: space-between
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .gyramais-drawer .gyramais-drawer-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom-width: 1px;
-    border-color: var(--color-border-secondary);
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 20px;
-    padding-bottom: 20px
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  border-color: var(--color-border-secondary);
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .gyramais-drawer .gyramais-drawer-title {
-    margin: 0px;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--color-text-primary)
+  margin: 0px;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text-primary);
 }
 .gyramais-drawer .gyramais-drawer-subtitle {
-    margin-top: 0.25rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    color: var(--color-text-secondary)
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-text-secondary);
 }
 
 .gyramais-drawer .gyramais-drawer-content {
-    height: 100%;
-    overflow-y: auto;
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 20px;
-    padding-bottom: 20px
+  height: 100%;
+  overflow-y: auto;
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .gyramais-drawer .gyramais-drawer-footer {
-    border-top-width: 1px;
-    border-color: var(--color-border-secondary);
-    padding-left: 24px;
-    padding-right: 24px;
-    padding-top: 20px;
-    padding-bottom: 20px
+  border-top-width: 1px;
+  border-color: var(--color-border-secondary);
+  padding-left: 24px;
+  padding-right: 24px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+/* Botao de fechar de verdade: <button aria-label="Fechar">, focavel pelo
+   teclado, com anel de foco via ::after (o index.css global mata o outline
+   de todo elemento; o pseudo-elemento nao entra nessa regra). A caixa e de
+   24px, o tamanho que o icone solto ja ocupava, para o cabecalho nao mudar
+   de altura em nenhum consumidor. */
+.gyramais-drawer .gyramais-drawer-close {
+  position: relative;
+  margin: 0px;
+  display: flex;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  color: var(--color-text-secondary);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-drawer .gyramais-drawer-close:hover {
+  color: var(--color-text-primary);
+}
+.gyramais-drawer .gyramais-drawer-close:focus-visible::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -4px;
+  border-radius: var(--radius-md);
+  border-width: 2px;
+  border-color: var(--gyra-blue);
 }
 
 .gyramais-drawer .gyramais-drawer-close-icon {
-    cursor: pointer;
-    font-size: 24px;
-    color: var(--color-text-secondary);
-    transition-duration: 150ms;
-    animation-duration: 150ms
-}
-.gyramais-drawer .gyramais-drawer-close-icon:hover {
-    color: var(--color-text-primary)
+  cursor: pointer;
+  font-size: 24px;
+  transition-duration: 150ms;
+  animation-duration: 150ms;
 }
 
 /* v2 DropdownMenu chrome — hairline border + subtle elevation, flat items. */
@@ -5767,39 +5775,30 @@ h6 {
 }
 
 .gyramais-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem
+    padding-top: 1rem;
+    padding-bottom: 1rem
 }
-
 .gyramais-empty .gyramais-empty-icon {
-  display: flex;
-  justify-content: center
+    display: flex;
+    justify-content: center
 }
-
-/* O tamanho vai no SVG, nao no wrapper: icone do MUI declara o proprio
-   `font-size`, entao `text-[40px]` no pai nao chega nele e ele encolhe para o
-   padrao do MUI. */
 .gyramais-empty .gyramais-empty-icon svg {
-  font-size: 40px;
-  color: var(--color-text-quaternary)
+    font-size: 40px;
+    --tw-text-opacity: 1;
+    color: rgb(184 184 184 / var(--tw-text-opacity, 1))
 }
-
-/* Texto secundario, nao preto: lista vazia informa, nao anuncia. Em preto ela
-   pesava igual ao dado de verdade da tabela ao lado. */
 .gyramais-empty .gyramais-empty-text {
-  text-align: center;
-  font-size: var(--fs-subheadline);
-  line-height: var(--lh-normal);
-  color: var(--color-text-tertiary)
+    display: flex;
+    justify-content: center;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+    line-height: 22px;
+    --tw-text-opacity: 1;
+    color: rgb(0 0 0 / var(--tw-text-opacity, 1))
 }
-
 .gyramais-filter .gyramais-filter-button-container {
   position: relative;
   width: -moz-fit-content;
@@ -7031,11 +7030,38 @@ h6 {
     20px;
 }
 
-.gyramais-modal .gyramais-modal-close-icon {
+/* Botao de fechar de verdade: <button aria-label="Fechar">, focavel pelo
+   teclado, com anel de foco via ::after (o index.css global mata o outline
+   de todo elemento; o pseudo-elemento nao entra nessa regra). A caixa e de
+   24px, o tamanho que o icone solto ja ocupava, para o cabecalho nao mudar
+   de altura em nenhum consumidor. */
+.gyramais-modal .gyramais-modal-close {
+  position:
+    relative;
+  margin:
+    0px;
+  display:
+    flex;
+  height:
+    24px;
+  width:
+    24px;
+  flex-shrink:
+    0;
   cursor:
     pointer;
-  font-size:
-    24px;
+  align-items:
+    center;
+  justify-content:
+    center;
+  border-radius:
+    var(--radius-sm);
+  border-width:
+    0px;
+  background-color:
+    transparent;
+  padding:
+    0px;
   color:
     var(--color-text-secondary);
   transition-duration:
@@ -7043,10 +7069,42 @@ h6 {
   animation-duration:
     150ms;
 }
-.gyramais-modal .gyramais-modal-close-icon:hover {
+.gyramais-modal .gyramais-modal-close:hover:not(:disabled) {
   color:
     var(--color-text-primary);
 }
+.gyramais-modal .gyramais-modal-close:disabled {
+  cursor:
+    not-allowed;
+  opacity:
+    0.6;
+}
+.gyramais-modal .gyramais-modal-close:focus-visible::after {
+  content: "";
+  pointer-events:
+    none;
+  position:
+    absolute;
+  inset:
+    -4px;
+  border-radius:
+    var(--radius-md);
+  border-width:
+    2px;
+  border-color:
+    var(--gyra-blue);
+}
+
+.gyramais-modal .gyramais-modal-close-icon {
+  cursor:
+    pointer;
+  font-size:
+    24px;
+  transition-duration:
+    150ms;
+  animation-duration:
+    150ms;
+}
 
 @keyframes modal-entry {
   0% {
@@ -7059,7 +7117,25 @@ h6 {
   }
 }
 
+/* CAMADA DO POPOVER.
+ *
+ * O conteudo do popover e portalado para o `body` pelo Radix, mas portal nao
+ * decide pintura: z-index decide. O `PopoverContent` do shadcn nasce com o
+ * `z-50` do template, e as camadas flutuantes desta casa vivem MUITO acima
+ * disso: Drawer (react-modern-drawer) em 101, Modal em 200, menu do Select
+ * em 210, Tooltip em 300.
+ *
+ * Resultado, ate GYR-1623: qualquer popover aberto de dentro de uma gaveta
+ * (o conector da esteira, por exemplo) era pintado ATRAS do painel e parava
+ * de receber clique — `elementFromPoint` no meio do menu devolvia o que
+ * estava na gaveta.
+ *
+ * 210 e o mesmo degrau do menu do Select (`Select.tsx`, `menuPortal`): os
+ * dois sao a mesma coisa (lista flutuante disparada por um controle) e
+ * precisam ficar acima de gaveta e de modal, e abaixo do tooltip.
+ */
 .gyramais-popover-content {
+    z-index: 210 !important;
     width: -moz-fit-content;
     width: fit-content;
     border-radius: 8px;
@@ -7070,6 +7146,7 @@ h6 {
     --tw-shadow-colored: 0 5px 5px 0 var(--tw-shadow-color), 0 8px 10px 0 var(--tw-shadow-color) !important;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important
 }
+
 .gyramais-processing-chip {
   position: relative;
   display: inline-flex;
@@ -7295,44 +7372,935 @@ h6 {
     --tw-text-opacity: 1;
     color: rgb(98 105 118 / var(--tw-text-opacity, 1))
 }
-.gyramais-rich-input-controller {
-    position: relative;
-    transition-duration: 300ms;
-    animation-duration: 300ms
-}
-.gyramais-rich-input-controller.gyramais-rich-input-disabled {
-    opacity: 0.5;
-    --tw-grayscale: grayscale(100%);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+/* Rail, a esteira Gyra+ (lista vertical de etapas + conector condicional).
+   Todas as cores saem dos tokens do design system: nada de hex solto aqui.
+
+   Escala: tipografia 15 (nome) / 13 (linha 2) / 12 (estado, conector, motivo);
+   espacamento em multiplos de 4: padding do cartao 12, gap entre linhas 2,
+   gap entre cartoes 8 (via o conector de 32px: 24 de pilula + 4 + 4).
+
+   Armadilha do repositorio: o index.css global tem `* { outline: none
+   !important }` e `*:focus { box-shadow: none !important }`. Anel de foco
+   desenhado no proprio elemento morre em silencio. Por isso o foco visivel
+   aqui e um ::after (o seletor universal nao casa com pseudo-elemento). */
+
+.gyramais-rail-wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
 }
-.gyramais-rich-input-controller.gyramais-rich-input-disabled * {
-    cursor: not-allowed
+
+.gyramais-rail {
+  margin: 0px;
+  display: flex;
+  width: 100%;
+  list-style-type: none;
+  flex-direction: column;
+  padding: 0px;
 }
 
-.gyramais-rich-input-wrapper {
-    border-radius: 20px;
-    border-color: var(--border-color);
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-    --tw-shadow: 0px 14px 64px -4px #18274b1f, 0px 8px 22px -6px #18274b1f;
-    --tw-shadow-colored: 0px 14px 64px -4px var(--tw-shadow-color), 0px 8px 22px -6px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+/* Coluna do trilho: 8px de marcador + 12px de folga ate o cartao. */
+.gyramais-rail-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-left: 20px;
 }
 
-.gyramais-rich-input-placeholder {
-    position: absolute;
-    top: -10px;
-    left: 22px;
-    animation: fade-in .3s 1;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    color: var(--primary-button-color)
+/* ---- Trilho: linha de 1px na cor de borda ------------------------------
+   Cada peca (conector, etapa) desenha o seu proprio segmento, assim a linha
+   comeca no marcador da primeira etapa e termina no marcador da ultima. */
+
+.gyramais-rail-connector::before,
+.gyramais-rail-step::before {
+  content: "";
+  position: absolute;
+  left: -16.5px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--color-border-secondary);
+}
+.gyramais-rail-item:first-child .gyramais-rail-step::before {
+  top: 23px;
+}
+.gyramais-rail-item:last-child .gyramais-rail-step::before {
+  bottom: auto;
+  height: 23px;
+}
+.gyramais-rail-item:first-child:last-child .gyramais-rail-step::before {
+  display: none;
 }
 
-.gyramais-rich-input-toolbar {
-    margin-bottom: 0px;
-    min-height: 54px;
+/* ---- Conector (pilula de 24px alinhada ao trilho) ----------------------- */
+
+.gyramais-rail-connector {
+  position: relative;
+  display: flex;
+  min-height: 32px;
+  align-items: center;
+  gap: 6px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.gyramais-rail-gate-editor {
+  display: inline-flex;
+}
+
+/* A pilula editavel e o SegmentedPicker "secondary" com a densidade da
+   esteira: 24px de altura, 12px de texto, 12px de icone. */
+.gyramais-rail-gate.gyramais-segmented-picker.gyramais-segmented-picker-secondary {
+  height: 24px;
+  gap: 4px;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-surface-primary);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  padding-left: 6px;
+  padding-right: 6px;
+  font-size: var(--fs-footnote);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-gate.gyramais-segmented-picker.gyramais-segmented-picker-secondary:hover {
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-secondary);
+  color: var(--color-text-primary);
+}
+.gyramais-rail-gate.gyramais-segmented-picker-secondary .gyramais-segmented-picker-icon svg {
+  font-size: 12px;
+}
+.gyramais-rail-gate.gyramais-segmented-picker-secondary .gyramais-segmented-picker-chev {
+  margin-left: 0px;
+  font-size: 14px;
+}
+
+.gyramais-rail-gate-static {
+  display: inline-flex;
+  height: 24px;
+  align-items: center;
+  gap: 4px;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-surface-primary);
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: var(--fs-footnote);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-gate-static.is-passed {
+  border-color: var(--color-success-light);
+  background-color: var(--color-success-light);
+  color: var(--status-success-text);
+}
+.gyramais-rail-gate-static.is-blocked {
+  border-style: dashed;
+  color: var(--color-text-tertiary);
+}
+
+.gyramais-rail-gate-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-tertiary);
+}
+.gyramais-rail-gate-static.is-passed .gyramais-rail-gate-icon {
+  color: var(--status-success-text);
+}
+
+/* Acento por condicao, valendo tanto na pilula editavel quanto na estatica. */
+.gyramais-rail-gate.is-approved .gyramais-segmented-picker-icon,
+.gyramais-rail-gate.is-approved.gyramais-rail-gate-static:not(.is-blocked) .gyramais-rail-gate-icon {
+  color: var(--color-success);
+}
+.gyramais-rail-gate.is-alert .gyramais-segmented-picker-icon,
+.gyramais-rail-gate.is-alert.gyramais-rail-gate-static:not(.is-blocked) .gyramais-rail-gate-icon {
+  color: var(--color-warning);
+}
+.gyramais-rail-gate.is-reproved .gyramais-segmented-picker-icon,
+.gyramais-rail-gate.is-reproved.gyramais-rail-gate-static:not(.is-blocked) .gyramais-rail-gate-icon {
+  color: var(--color-danger);
+}
+.gyramais-rail-gate-static.is-passed .gyramais-rail-gate-icon {
+  color: var(--status-success-text);
+}
+
+/* ---- Inserir / adicionar etapa ----------------------------------------- */
+
+/* O "+" entre etapas so aparece quando o conector esta em hover ou com foco:
+   e uma acao secundaria e nao precisa competir com a pilula. */
+.gyramais-rail-insert {
+  position: relative;
+  display: inline-flex;
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-primary);
+  color: var(--color-text-tertiary);
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-rail-connector:hover .gyramais-rail-insert,
+.gyramais-rail-connector:focus-within .gyramais-rail-insert,
+.gyramais-rail-insert:focus-visible {
+  opacity: 1;
+}
+@media (hover: none) {
+  .gyramais-rail-insert {
+    opacity: 1;
+  }
+}
+
+.gyramais-rail-add {
+  position: relative;
+  margin-left: 20px;
+  margin-top: 4px;
+  display: inline-flex;
+  height: 28px;
+  cursor: pointer;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-size: var(--fs-subheadline);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+
+.gyramais-rail-insert:hover,
+.gyramais-rail-add:hover {
+  border-color: var(--gyra-blue);
+  background-color: var(--gyra-blue-subtle);
+  color: var(--gyra-blue);
+}
+
+.gyramais-rail-insert:focus-visible::after,
+.gyramais-rail-add:focus-visible::after,
+.gyramais-rail-step:focus-visible::after,
+.gyramais-rail-leaf:focus-visible::after,
+.gyramais-rail-leaves-toggle:focus-visible::after,
+.gyramais-rail-step-open:focus-visible::after,
+.gyramais-rail-step-action:focus-visible::after,
+.gyramais-rail-inline-select:focus-visible::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -3px;
+  border-radius: var(--radius-md);
+  border-width: 2px;
+  border-color: var(--gyra-blue);
+}
+.gyramais-rail-insert:focus-visible::after,
+.gyramais-rail-step-action:focus-visible::after {
+  border-radius: 9999px;
+}
+.gyramais-rail-inline-select:focus-visible::after,
+.gyramais-rail-leaves-toggle:focus-visible::after,
+.gyramais-rail-step-open:focus-visible::after {
+  inset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ---- Etapa ------------------------------------------------------------- */
+
+.gyramais-rail-step {
+  position: relative;
+}
+
+/* Marcador de 8px sobre o trilho, centrado na linha 1 do cartao
+   (1px de borda + 12px de padding + (20px de linha - 8px) / 2 = 19px). */
+.gyramais-rail-node {
+  position: absolute;
+  left: -20px;
+  top: 19px;
+  z-index: 1;
+  height: 8px;
+  width: 8px;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: var(--color-border-strong);
+  background-color: var(--color-surface-primary);
+}
+.gyramais-rail-edit .gyramais-rail-node {
+  border-color: var(--color-gray-300);
+  background-color: var(--color-gray-300);
+}
+.gyramais-rail-node.is-info {
+  border-color: var(--gyra-blue);
+  background-color: var(--gyra-blue);
+}
+.gyramais-rail-node.is-success {
+  border-color: var(--color-success);
+  background-color: var(--color-success);
+}
+.gyramais-rail-node.is-warning {
+  border-color: var(--color-warning);
+  background-color: var(--color-warning);
+}
+.gyramais-rail-node.is-danger {
+  border-color: var(--color-danger);
+  background-color: var(--color-danger);
+}
+.gyramais-rail-node.is-neutral {
+  border-color: var(--color-border-strong);
+  background-color: var(--color-surface-primary);
+}
+.gyramais-rail-node.is-skipped {
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-primary);
+}
+
+/* O Card do design system como contentor (borda, raio, fundo), com a
+   densidade da esteira. O header do Card nao e usado: a anatomia de duas
+   linhas e o conteudo. */
+.gyramais-rail-step-card.gyramais-card {
+  border-radius: var(--radius-md);
+  padding: 12px;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-rail-step-card.gyramais-card .gyramais-card-content {
+  position: static;
+}
+.gyramais-rail-step:hover .gyramais-rail-step-card.gyramais-card {
+  border-color: var(--color-border-primary);
+}
+.gyramais-rail-step.is-active .gyramais-rail-step-card.gyramais-card,
+.gyramais-rail-step.is-selected .gyramais-rail-step-card.gyramais-card {
+  border-color: var(--gyra-blue);
+}
+.gyramais-rail-step.is-selected .gyramais-rail-step-card.gyramais-card {
+  background-color: var(--gyra-blue-subtle);
+}
+
+/* Etapa que nao disparou: cartao translucido. O motivo NAO entra aqui,
+   fica fora do cartao, em contraste cheio. */
+.gyramais-rail-step.is-skipped .gyramais-rail-step-card.gyramais-card {
+  border-style: dashed;
+  opacity: 0.5;
+}
+.gyramais-rail-step.is-disabled .gyramais-rail-step-card.gyramais-card {
+  opacity: 0.6;
+}
+
+.gyramais-rail-step-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+/* Glifo do tipo: chip neutro de 24px. O tipo vive aqui e no tooltip, nunca
+   como texto no cartao. */
+.gyramais-rail-step-glyph {
+  display: inline-flex;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background-color: var(--color-gray-50);
+  color: var(--color-text-secondary);
+  margin-top: -2px;
+}
+.gyramais-rail-step.is-active .gyramais-rail-step-glyph {
+  background-color: var(--gyra-blue-light);
+  color: var(--gyra-blue);
+}
+
+.gyramais-rail-step-main {
+  display: flex;
+  min-width: 0px;
+  flex: 1 1 0%;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.gyramais-rail-step-line1 {
+  display: flex;
+  min-height: 20px;
+  min-width: 0px;
+  align-items: center;
+  gap: 8px;
+}
+
+.gyramais-rail-step-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--fs-body);
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: var(--tracking-normal);
+  color: var(--color-text-primary);
+}
+
+.gyramais-rail-step-open {
+  position: relative;
+  display: inline-flex;
+  min-width: 0px;
+  cursor: pointer;
+  align-items: center;
+  gap: 4px;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  text-decoration-line: none;
+  font-family: inherit;
+}
+.gyramais-rail-step-open:hover .gyramais-rail-step-name {
+  color: var(--gyra-blue);
+}
+.gyramais-rail-step-open-icon {
+  flex-shrink: 0;
+  color: var(--color-text-quaternary);
+}
+
+.gyramais-rail-step-meta {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+}
+/* Tag do design system, na densidade de um chip de 20px. */
+.gyramais-rail-step-meta .gyramais-tag {
+  height: 20px;
+  border-radius: var(--radius-xs);
+  border-color: var(--color-border-subtle);
+  background-color: var(--color-gray-50);
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.gyramais-rail-step-meta .gyramais-tag .gyramais-tag-content {
+  font-size: var(--fs-footnote);
+  line-height: 18px;
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-step-meta .gyramais-tag .gyramais-tag-icon {
+  margin-right: 4px;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.gyramais-rail-step-line2 {
+  display: flex;
+  min-height: 18px;
+  min-width: 0px;
+  align-items: center;
+}
+
+.gyramais-rail-step-text {
+  font-size: var(--fs-subheadline);
+  line-height: 18px;
+  color: var(--color-text-secondary);
+}
+
+/* Seletor inline: texto + chevron no corpo do texto, sem borda. O padding
+   horizontal e compensado por uma margem negativa para o texto alinhar
+   com o nome da etapa. */
+/* Largura: o gatilho ocupa o que o texto pede e so encolhe (com
+   reticencias) quando a linha de fato nao o comporta. `min-w-0` deixa o
+   flex encolher; NAO usar `max-w-full`: com a margem negativa de 6px, um
+   invólucro shrink-to-fit (o `span` do toolbox em volta do gatilho) mede a
+   caixa de margem, e 100% dela e 6px menos que o proprio conteudo, o que
+   truncava toda politica por 6px com meio cartao vazio (E2 do guard). */
+.gyramais-rail-inline-select {
+  position: relative;
+  margin-left: -6px;
+  display: inline-flex;
+  height: 20px;
+  min-width: 0px;
+  cursor: pointer;
+  align-items: center;
+  gap: 2px;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 6px;
+  padding-right: 4px;
+  font-size: var(--fs-subheadline);
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--color-text-primary);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+  font-family: inherit;
+}
+.gyramais-rail-inline-select:hover:not(:disabled) {
+  background-color: var(--color-surface-active);
+}
+.gyramais-rail-inline-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.gyramais-rail-inline-select.is-placeholder {
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+}
+.gyramais-rail-inline-select.is-warning {
+  color: var(--status-warning-text);
+}
+.gyramais-rail-inline-select-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gyramais-rail-inline-select-chevron {
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+}
+
+.gyramais-rail-step-side {
+  display: flex;
+  min-height: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Estado: ponto de 6px + texto de 12px. A cor mora no ponto. */
+.gyramais-rail-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  font-size: var(--fs-footnote);
+  line-height: 16px;
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-status-dot {
+  height: 6px;
+  width: 6px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--color-gray-300);
+}
+.gyramais-rail-status.is-info .gyramais-rail-status-dot {
+  background-color: var(--gyra-blue);
+}
+.gyramais-rail-status.is-success .gyramais-rail-status-dot {
+  background-color: var(--color-success);
+}
+.gyramais-rail-status.is-warning .gyramais-rail-status-dot {
+  background-color: var(--color-warning);
+}
+.gyramais-rail-status.is-danger .gyramais-rail-status-dot {
+  background-color: var(--color-danger);
+}
+.gyramais-rail-status.is-warning .gyramais-rail-status-label {
+  color: var(--status-warning-text);
+}
+.gyramais-rail-status.is-danger .gyramais-rail-status-label {
+  color: var(--status-danger-text);
+}
+
+/* O botao do consumer ("Decidir"), na densidade da linha. */
+.gyramais-rail-step-actions .gyramais-button.gyramais-button-small {
+  height: 24px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  font-size: var(--fs-footnote);
+}
+
+/* Ordenar/remover: so no hover e no foco. */
+.gyramais-rail-step-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-rail-step:hover .gyramais-rail-step-toolbar,
+.gyramais-rail-step:focus-within .gyramais-rail-step-toolbar,
+.gyramais-rail-step.is-selected .gyramais-rail-step-toolbar {
+  opacity: 1;
+}
+@media (hover: none) {
+  .gyramais-rail-step-toolbar {
+    opacity: 1;
+  }
+}
+
+.gyramais-rail-step-action {
+  position: relative;
+  display: inline-flex;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  color: var(--color-text-tertiary);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-rail-step-action:hover:not(:disabled) {
+  background-color: var(--color-surface-active);
+  color: var(--color-text-primary);
+}
+.gyramais-rail-step-action-danger:hover:not(:disabled) {
+  color: var(--color-danger);
+}
+.gyramais-rail-step-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+
+.gyramais-rail-step-content {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: var(--fs-subheadline);
+  color: var(--color-text-secondary);
+}
+
+/* O motivo de a etapa nao ter disparado. Fora do cartao translucido de
+   proposito: e a informacao que precisa ser lida. */
+.gyramais-rail-step-reason {
+  margin-top: 4px;
+  margin-bottom: 0px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding-left: 12px;
+  font-size: var(--fs-footnote);
+  line-height: 16px;
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-step-reason-mark {
+  margin-top: 5px;
+  height: 6px;
+  width: 6px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--color-gray-300);
+}
+.gyramais-rail-step.is-error .gyramais-rail-step-reason {
+  color: var(--status-danger-text);
+}
+.gyramais-rail-step.is-error .gyramais-rail-step-reason-mark {
+  background-color: var(--color-danger);
+}
+
+/* ---- Folhas (relatorios derivados dos vinculos) ------------------------ */
+
+.gyramais-rail-leaves {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.gyramais-rail-leaves-toggle {
+  position: relative;
+  margin-left: -4px;
+  display: inline-flex;
+  height: 20px;
+  cursor: pointer;
+  align-items: center;
+  gap: 2px;
+  align-self: flex-start;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 4px;
+  padding-right: 4px;
+  font-size: var(--fs-footnote);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  font-family: inherit;
+}
+.gyramais-rail-leaves-toggle:hover {
+  background-color: var(--color-surface-active);
+  color: var(--color-text-primary);
+}
+.gyramais-rail-leaves-chevron {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  color: var(--color-text-tertiary);
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+}
+.gyramais-rail-leaves-chevron.is-open {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.gyramais-rail-leaves-list {
+  margin: 0px;
+  margin-top: 4px;
+  display: flex;
+  list-style-type: none;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0px;
+}
+
+.gyramais-rail-leaf-item {
+  display: flex;
+}
+
+.gyramais-rail-leaf {
+  position: relative;
+  margin-left: -8px;
+  margin-right: -8px;
+  display: flex;
+  width: 100%;
+  min-width: 0px;
+  flex: 1 1 0%;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border-radius: var(--radius-sm);
+  border-width: 0px;
+  background-color: transparent;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  text-align: left;
+  text-decoration-line: none;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  animation-duration: 150ms;
+  font-family: inherit;
+}
+.gyramais-rail-leaf:hover:not(:disabled) {
+  background-color: var(--color-surface-active);
+}
+.gyramais-rail-leaf:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.gyramais-rail-leaf-text {
+  display: flex;
+  min-width: 0px;
+  flex-wrap: wrap;
+  align-items: baseline;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+  row-gap: 0px;
+}
+
+.gyramais-rail-leaf-title {
+  font-size: var(--fs-subheadline);
+  font-weight: 500;
+  line-height: 18px;
+  color: var(--color-text-primary);
+}
+
+.gyramais-rail-leaf-document {
+  font-size: var(--fs-footnote);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.gyramais-rail-leaf-subtitle {
+  font-size: var(--fs-footnote);
+  color: var(--color-text-tertiary);
+}
+
+.gyramais-rail-leaf-status {
+  flex-shrink: 0;
+}
+
+/* ---- Vazio ------------------------------------------------------------- */
+
+.gyramais-rail-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: var(--radius-md);
+  border-width: 1px;
+  border-style: dashed;
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-secondary);
+  padding: 16px;
+}
+
+.gyramais-rail-empty-text {
+  margin: 0px;
+  font-size: var(--fs-subheadline);
+  line-height: 18px;
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-empty .gyramais-rail-add {
+  margin-top: 0px;
+  margin-left: -8px;
+}
+
+/* ---- Somente leitor de tela -------------------------------------------- */
+
+.gyramais-rail-sr {
+  position: absolute;
+  margin: -1px;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border-width: 0px;
+  padding: 0px;
+  clip: rect(0, 0, 0, 0);
+}
+
+/* ---- Miniatura (RailMini) ---------------------------------------------
+   A esteira do tamanho de uma celula de lista: uma bolinha de 6px por etapa,
+   ligadas por um fio de 1px, no maximo ~120px. As cores sao as do modo run. */
+
+.gyramais-rail-mini {
+  display: inline-flex;
+  max-width: 120px;
+  align-items: center;
+  gap: 6px;
+  vertical-align: middle;
+}
+
+.gyramais-rail-mini.with-summary {
+  max-width: 100%;
+}
+
+.gyramais-rail-mini-track {
+  display: inline-flex;
+  min-width: 0px;
+  align-items: center;
+  overflow: hidden;
+}
+
+.gyramais-rail-mini-mark {
+  height: 6px;
+  width: 6px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: transparent;
+  background-color: var(--color-gray-300);
+}
+.gyramais-rail-mini-mark.is-approved {
+  background-color: var(--color-success);
+}
+.gyramais-rail-mini-mark.is-alert {
+  background-color: var(--color-warning);
+}
+.gyramais-rail-mini-mark.is-reproved {
+  background-color: var(--color-danger);
+}
+.gyramais-rail-mini-mark.is-error {
+  background-color: var(--color-danger);
+  opacity: 0.6;
+}
+.gyramais-rail-mini-mark.is-running {
+  background-color: var(--gyra-blue);
+}
+.gyramais-rail-mini-mark.is-waiting {
+  background-color: var(--color-warning);
+}
+/* Etapa que NAO rodou fica oca: e o vocabulario da tela ("não rodou"). */
+.gyramais-rail-mini-mark.is-skipped,
+.gyramais-rail-mini-mark.is-pending {
+  border-color: var(--color-border-strong);
+  background-color: transparent;
+}
+
+/* O fio encolhe antes de a fileira estourar os 120px. */
+.gyramais-rail-mini-link {
+  height: 1px;
+  background-color: var(--color-border-primary);
+  flex: 0 1 6px;
+  min-width: 2px;
+}
+
+.gyramais-rail-mini-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--fs-footnote);
+  color: var(--color-text-tertiary);
+}
+
+.gyramais-rich-input-controller {
+    position: relative;
+    transition-duration: 300ms;
+    animation-duration: 300ms
+}
+.gyramais-rich-input-controller.gyramais-rich-input-disabled {
+    opacity: 0.5;
+    --tw-grayscale: grayscale(100%);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+.gyramais-rich-input-controller.gyramais-rich-input-disabled * {
+    cursor: not-allowed
+}
+
+.gyramais-rich-input-wrapper {
+    border-radius: 20px;
+    border-color: var(--border-color);
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    --tw-shadow: 0px 14px 64px -4px #18274b1f, 0px 8px 22px -6px #18274b1f;
+    --tw-shadow-colored: 0px 14px 64px -4px var(--tw-shadow-color), 0px 8px 22px -6px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+.gyramais-rich-input-placeholder {
+    position: absolute;
+    top: -10px;
+    left: 22px;
+    animation: fade-in .3s 1;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: var(--primary-button-color)
+}
+
+.gyramais-rich-input-toolbar {
+    margin-bottom: 0px;
+    min-height: 54px;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     border-bottom-color: var(--border-color);
@@ -7878,9 +8846,17 @@ h6 {
   font-family: inherit;
 }
 
-/* Segmented picker — iOS-style verdict pill that opens a clean menu */
+/* Segmented picker — iOS-style verdict pill that opens a clean menu
+ *
+ * FOCO VISIVEL: o `src/index.css` desta biblioteca tem `* { outline: none
+ * !important }` e `*:focus { box-shadow: none !important }`. Anel desenhado
+ * no proprio elemento (outline ou box-shadow) morre calado — e foi o que
+ * aconteceu aqui ate GYR-1623: navegando no menu por teclado nao havia
+ * indicador NENHUM. O anel precisa ser um `::after`, porque o seletor
+ * universal nao casa com pseudo-elemento. Mesma receita do `Rail`. */
 
 .gyramais-segmented-picker {
+  position: relative;
   display: inline-flex;
   cursor: pointer;
   align-items: center;
@@ -7901,40 +8877,46 @@ h6 {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
   animation-duration: 200ms;
-  font-family: inherit
+  font-family: inherit;
 }
 .gyramais-segmented-picker:hover {
-  background-color: var(--color-surface-secondary)
+  background-color: var(--color-surface-secondary);
 }
 .gyramais-segmented-picker:focus-visible {
   border-color: var(--gyra-blue);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  box-shadow: 0 0 0 3px rgba(18, 86, 255, 0.10)
+}
+.gyramais-segmented-picker:focus-visible::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: -3px;
+  border-radius: 9999px;
+  border-width: 2px;
+  border-color: var(--gyra-blue);
 }
 .gyramais-segmented-picker:disabled {
   cursor: not-allowed;
-  opacity: 0.55
+  opacity: 0.55;
 }
 
 .gyramais-segmented-picker-icon {
   display: inline-flex;
   align-items: center;
-  justify-content: center
+  justify-content: center;
 }
 .gyramais-segmented-picker.is-aprova .gyramais-segmented-picker-icon {
-  color: var(--success-color)
+  color: var(--success-color);
 }
 .gyramais-segmented-picker.is-alerta .gyramais-segmented-picker-icon {
-  color: var(--warning-color)
+  color: var(--warning-color);
 }
 .gyramais-segmented-picker.is-reprova .gyramais-segmented-picker-icon {
-  color: var(--danger-color)
+  color: var(--danger-color);
 }
 
 .gyramais-segmented-picker-chev {
   margin-left: 2px;
-  color: var(--color-text-tertiary)
+  color: var(--color-text-tertiary);
 }
 
 /* Secondary variant — smaller, less prominent (used for "caso de erro") */
@@ -7947,33 +8929,34 @@ h6 {
   padding-right: 10px;
   font-size: 12px;
   font-weight: 500;
-  color: var(--color-text-secondary)
+  color: var(--color-text-secondary);
 }
 .gyramais-segmented-picker-secondary:hover {
   border-color: var(--color-border-subtle);
-  background-color: var(--color-surface-active)
+  background-color: var(--color-surface-active);
 }
 .gyramais-segmented-picker-secondary .gyramais-segmented-picker-icon svg {
-  font-size: 16px
+  font-size: 16px;
 }
 .gyramais-segmented-picker-secondary .gyramais-segmented-picker-chev {
-  font-size: 16px
+  font-size: 16px;
 }
 
 /* ---- Popover menu ---- */
 .gyramais-popover-content.gyramais-segmented-picker-dropdown {
   min-width: 320px;
   border-radius: var(--radius-lg);
-  padding: 6px
+  padding: 6px;
 }
 
 .gyramais-segmented-picker-menu {
   display: flex;
   flex-direction: column;
-  gap: 2px
+  gap: 2px;
 }
 
 .gyramais-segmented-picker-menu-item {
+  position: relative;
   display: flex;
   width: 100%;
   cursor: pointer;
@@ -7993,13 +8976,25 @@ h6 {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
   animation-duration: 200ms;
-  font-family: inherit
+  font-family: inherit;
 }
 .gyramais-segmented-picker-menu-item:hover {
-  background-color: var(--color-surface-secondary)
+  background-color: var(--color-surface-secondary);
 }
 .gyramais-segmented-picker-menu-item.is-on {
-  background-color: var(--color-surface-secondary)
+  background-color: var(--color-surface-secondary);
+}
+.gyramais-segmented-picker-menu-item:focus-visible {
+  background-color: var(--color-surface-secondary);
+}
+.gyramais-segmented-picker-menu-item:focus-visible::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 1px;
+  border-radius: var(--radius-md);
+  border-width: 2px;
+  border-color: var(--gyra-blue);
 }
 
 .gyramais-segmented-picker-menu-icon {
@@ -8011,19 +9006,19 @@ h6 {
   justify-content: center;
   border-radius: 9999px;
   background-color: var(--color-gray-50);
-  color: var(--color-text-tertiary)
+  color: var(--color-text-tertiary);
 }
 .gyramais-segmented-picker-menu-icon.is-aprova {
   background-color: var(--success-light-color);
-  color: var(--status-success-text)
+  color: var(--status-success-text);
 }
 .gyramais-segmented-picker-menu-icon.is-alerta {
   background-color: var(--warning-light-color);
-  color: var(--status-warning-text)
+  color: var(--status-warning-text);
 }
 .gyramais-segmented-picker-menu-icon.is-reprova {
   background-color: var(--danger-light-color);
-  color: var(--status-danger-text)
+  color: var(--status-danger-text);
 }
 
 .gyramais-segmented-picker-menu-body {
@@ -8031,22 +9026,22 @@ h6 {
   min-width: 0px;
   flex: 1 1 0%;
   flex-direction: column;
-  gap: 2px
+  gap: 2px;
 }
 .gyramais-segmented-picker-menu-title {
   font-size: 13.5px;
   font-weight: 600;
-  color: var(--color-text-primary)
+  color: var(--color-text-primary);
 }
 .gyramais-segmented-picker-menu-desc {
   font-size: 11.5px;
   line-height: 1.35;
-  color: var(--color-text-tertiary)
+  color: var(--color-text-tertiary);
 }
 .gyramais-segmented-picker-menu-check {
   margin-top: 6px;
   flex-shrink: 0;
-  color: var(--gyra-blue)
+  color: var(--gyra-blue);
 }
 
 /* SegmentedToggle — 3-segmentos sempre visíveis, com variants por cor. */
@@ -8931,68 +9926,6 @@ h6 {
     left: 0.5rem !important
 }
 
-.gyramais-skeleton {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  background-color: var(--color-gray-100);
-  border-radius: var(--radius-sm);
-}
-
-/* O brilho que varre o bloco. Pseudo-elemento para nao exigir um filho no DOM. */
-.gyramais-skeleton::after {
-  position: absolute;
-  inset: 0px;
-  content: "";
-  transform: translateX(-100%);
-  background-image: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.7) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  animation: gyramais-skeleton-shimmer 1.6s ease-in-out infinite;
-}
-
-/* Parado de proposito: item na fila, nao em processamento. */
-.gyramais-skeleton.gyramais-skeleton-static::after {
-  animation: none;
-}
-
-.gyramais-skeleton.gyramais-skeleton-circle {
-  flex-shrink: 0;
-  border-radius: var(--radius-full);
-}
-
-.gyramais-skeleton.gyramais-skeleton-block {
-  border-radius: var(--radius-md);
-}
-
-.gyramais-skeleton-lines {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.gyramais-skeleton-lines .gyramais-skeleton-line {
-  height: 0.75rem;
-}
-
-@keyframes gyramais-skeleton-shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-/* Sem animacao para quem pediu menos movimento: o bloco continua marcando o
-   espaco, so nao pulsa. */
-@media (prefers-reduced-motion: reduce) {
-  .gyramais-skeleton::after {
-    animation: none;
-  }
-}
-
 /* PickerPopover — shell base de popovers tipo command-palette / tag-picker. */
 
 /* Container override do Popover base — chrome flat com elevação de dropdown */
@@ -10429,65 +11362,6 @@ h6 {
   }
 }
 
-/* GYR-1646: refetch (troca de filtro, busca, acao de linha) NAO apaga as
-   linhas. Elas ficam esmaecidas enquanto a barra fina no topo indica que algo
-   esta vindo. Trocar dado visivel por placeholder e' regressao de UX: o
-   usuario perde o que estava lendo por causa de uma acao dele mesmo. */
-.gyramais-table-container .gyramais-table-refetching {
-  opacity: 0.45;
-  transition: opacity 150ms ease-out;
-  pointer-events: none;
-}
-
-.gyramais-table-container .gyramais-table-refetching-bar {
-  position: relative;
-  height: 2px;
-  overflow: hidden;
-  background-color: var(--color-gray-100);
-}
-
-.gyramais-table-container .gyramais-table-refetching-bar::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 35%;
-  background-color: var(--gyra-blue);
-  animation: gyramais-table-refetching-slide 1.1s ease-in-out infinite;
-}
-
-@keyframes gyramais-table-refetching-slide {
-  0% {
-    left: -35%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-
-/* Sem movimento para quem pediu menos: a barra continua marcando o estado. */
-@media (prefers-reduced-motion: reduce) {
-  .gyramais-table-container .gyramais-table-refetching-bar::after {
-    animation: none;
-    width: 100%;
-    opacity: 0.4;
-  }
-}
-
-/* Estado anunciado uma vez para leitor de tela, invisivel na tela. As celulas
-   de skeleton sao decorativas (`aria-hidden`), entao nao repetem o anuncio. */
-.gyramais-table-container .gyramais-table-status {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .gyramais-tabs {
 
     width: 100%