@gyramais/gyra-design 0.2.47 → 0.2.49

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;
 }
@@ -761,6 +755,9 @@ video {
 .flex-col {
   flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .items-center {
   align-items: center;
 }
@@ -779,12 +776,6 @@ video {
 .gap-3 {
   gap: 0.75rem;
 }
-.gap-4 {
-  gap: 1rem;
-}
-.gap-6 {
-  gap: 1.5rem;
-}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -819,9 +810,6 @@ video {
 .rounded-\[6px\] {
   border-radius: 6px;
 }
-.rounded-\[var\(--radius-lg\)\] {
-  border-radius: var(--radius-lg);
-}
 .rounded-full {
   border-radius: 9999px;
 }
@@ -834,9 +822,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 +846,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;
 }
@@ -954,9 +935,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,32 +4388,25 @@ h6 {
   padding-top: 1rem;
 }
 .gyramais-card.gyramais-card-loading .gyramais-card-content {
-  min-height: 6rem;
+  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);
-}
-
-.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 {
@@ -5759,33 +5730,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;
-  font-size: 40px;
-  color: var(--color-text-quaternary)
+    display: flex;
+    justify-content: center
+}
+.gyramais-empty .gyramais-empty-icon svg {
+    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;
@@ -7045,7 +7013,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;
@@ -7056,6 +7042,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;
@@ -7281,144 +7268,752 @@ 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)
-}
-.gyramais-rich-input-controller.gyramais-rich-input-disabled * {
-    cursor: not-allowed
-}
+/* Rail — a esteira Gyra+ (lista vertical de etapas + conector condicional).
+   Todas as cores saem dos tokens do design system: nada de hex solto aqui.
 
-.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)
-}
+   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-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-rail-wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
 }
 
-.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);
-    padding: 0.75rem;
-    padding-bottom: 0.5rem
+.gyramais-rail {
+  margin: 0px;
+  display: flex;
+  width: 100%;
+  list-style-type: none;
+  flex-direction: column;
+  padding: 0px;
 }
-.gyramais-rich-input-toolbar div {
-    margin-bottom: 0px;
-    min-height: 22px;
-    padding-left: 1rem;
-    padding-right: 1rem
+
+.gyramais-rail-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-left: 30px;
 }
-.gyramais-rich-input-toolbar div:first-child {
-    padding-left: 0px
+
+/* O trilho: uma linha continua atras de todas as etapas. */
+.gyramais-rail-item::before {
+  content: "";
+  position: absolute;
+  left: 11px;
+  top: 0px;
+  bottom: 0px;
+  width: 2px;
+  background-color: var(--color-border-secondary);
 }
-.gyramais-rich-input-toolbar div:last-child {
-    padding-right: 0px
+.gyramais-rail-item:first-child::before {
+  top: 26px;
 }
-.gyramais-rich-input-toolbar div + div {
-    border-left-width: 1px;
-    border-color: var(--border-color)
+.gyramais-rail-item:last-child::before {
+  bottom: auto;
+  height: 26px;
 }
-.gyramais-rich-input-toolbar .rdw-link-modal {
-    top: -260px;
-    left: -160px;
-    height: -moz-fit-content;
-    height: fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    border-radius: 20px;
-    padding: 1rem !important
+
+/* ---- Conector ---------------------------------------------------------- */
+
+.gyramais-rail-connector {
+  display: flex;
+  min-height: 12px;
+  align-items: center;
+  gap: 8px;
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
-.gyramais-rich-input-toolbar .rdw-option-wrapper {
-    min-width: 22px;
-    max-width: 22px;
-    border-radius: 4px;
-    border-style: none;
-    padding: 0px;
-    --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);
-    transition-duration: 300ms;
-    animation-duration: 300ms
+.gyramais-rail-item:first-child .gyramais-rail-connector:empty {
+  display: none;
 }
-.gyramais-rich-input-toolbar .rdw-option-wrapper:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(237 240 238 / var(--tw-bg-opacity, 1))
+
+.gyramais-rail-gate-editor {
+  display: inline-flex;
 }
-.gyramais-rich-input-toolbar .rdw-option-wrapper.rdw-option-active {
-    background-color: var(--dark-button-color)
+
+.gyramais-rail-gate.gyramais-segmented-picker {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 12.5px;
+  font-weight: 500;
 }
 
-.gyramais-rich-input-editor {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    padding-top: 1rem;
-    padding-bottom: 1rem
+.gyramais-rail-gate-static {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: var(--color-border-secondary);
+  background-color: var(--color-surface-secondary);
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
 }
-.gyramais-rich-input-editor .public-DraftEditorPlaceholder-inner {
-    --tw-translate-y: -2px;
-    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-gate-static.is-passed {
+  border-color: var(--color-success);
+  background-color: var(--color-success-light);
+  color: var(--status-success-text);
 }
-.gyramais-rich-input-editor .public-DraftEditor-content {
-    max-height: 300px;
-    overflow-y: auto;
-    line-height: 20px
+.gyramais-rail-gate-static.is-blocked {
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-secondary);
+  color: var(--color-text-tertiary);
 }
-.gyramais-rich-input-editor .public-DraftStyleDefault-ltr {
-    margin: 0px;
-    margin-bottom: 0.25rem;
-    margin-bottom: 0px
+
+.gyramais-rail-gate-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-tertiary);
 }
-.gyramais-rich-input-editor .public-DraftStyleDefault-ul {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem
+.gyramais-rail-gate-static.is-passed .gyramais-rail-gate-icon {
+  color: var(--status-success-text);
 }
-.gyramais-rich-input-editor .public-DraftStyleDefault-ol {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem
+
+/* 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 .gyramais-rail-gate-icon {
+  color: var(--color-success);
 }
-.gyramais-rich-input-editor .rdw-link-decorator-icon {
-    --tw-translate-y: -0.75rem;
-    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-gate.is-alert .gyramais-segmented-picker-icon,
+.gyramais-rail-gate.is-alert.gyramais-rail-gate-static .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 .gyramais-rail-gate-icon {
+  color: var(--color-danger);
 }
-.gyramais-row {
 
-  display: grid;
+/* ---- Inserir / adicionar etapa ----------------------------------------- */
 
-  width: 100%
+.gyramais-rail-insert,
+.gyramais-rail-add {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-primary);
+  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: 200ms;
+  animation-duration: 200ms;
 }
 
-.gyramais-row.gyramais-row-mobile-gap-0 {
-
-  gap: 0px
+.gyramais-rail-insert {
+  height: 22px;
+  width: 22px;
+  flex-shrink: 0;
+  border-radius: 9999px;
 }
-.gyramais-row.gyramais-row-mobile-gap-4 {
 
-  gap: 4px
+.gyramais-rail-add {
+  margin-left: 30px;
+  margin-top: 10px;
+  align-self: flex-start;
+  border-radius: var(--radius-md);
+  padding-left: 14px;
+  padding-right: 14px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
 }
-.gyramais-row.gyramais-row-mobile-gap-8 {
+
+.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-step-open:focus-visible::after,
+.gyramais-rail-step-action: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;
+}
+
+/* ---- Etapa ------------------------------------------------------------- */
+
+.gyramais-rail-step {
+  position: relative;
+  padding-bottom: 6px;
+}
+
+.gyramais-rail-node {
+  position: absolute;
+  left: -26px;
+  top: 20px;
+  height: 16px;
+  width: 16px;
+  border-radius: 9999px;
+  border-width: 2px;
+  border-color: var(--color-border-strong);
+  background-color: var(--color-surface-primary);
+}
+.gyramais-rail-node.is-running {
+  border-color: var(--gyra-blue);
+  background-color: var(--gyra-blue-light);
+}
+.gyramais-rail-node.is-done {
+  border-color: var(--color-success);
+  background-color: var(--color-success-light);
+}
+.gyramais-rail-node.is-waiting {
+  border-color: var(--color-warning);
+  background-color: var(--color-warning-light);
+}
+.gyramais-rail-node.is-error {
+  border-color: var(--color-danger);
+  background-color: var(--color-danger-light);
+}
+.gyramais-rail-node.is-skipped {
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-secondary);
+}
+
+.gyramais-rail-step .gyramais-rail-step-card {
+  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: 200ms;
+  animation-duration: 200ms;
+}
+.gyramais-rail-step.is-active .gyramais-rail-step-card,
+.gyramais-rail-step.is-selected .gyramais-rail-step-card {
+  border-color: var(--gyra-blue);
+  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 {
+  border-style: dashed;
+  opacity: 0.55;
+}
+.gyramais-rail-step.is-disabled .gyramais-rail-step-card {
+  opacity: 0.6;
+}
+
+.gyramais-rail-step-glyph {
+  display: inline-flex;
+  height: 32px;
+  width: 32px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background-color: var(--gyra-blue-light);
+  font-size: 15px;
+  line-height: 1;
+  color: var(--gyra-blue);
+}
+.gyramais-rail-step.is-checkpoint .gyramais-rail-step-glyph {
+  background-color: var(--color-warning-light);
+  color: var(--color-warning);
+}
+.gyramais-rail-step.is-relationships .gyramais-rail-step-glyph {
+  background-color: var(--gyra-teal-light);
+  color: var(--gyra-teal);
+}
+
+.gyramais-rail-step-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-display);
+}
+
+.gyramais-rail-step-name {
+  color: var(--color-text-primary);
+}
+
+.gyramais-rail-step-open {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 5px;
+  border-width: 0px;
+  background-color: transparent;
+  padding: 0px;
+  color: var(--color-text-primary);
+  text-decoration-line: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+.gyramais-rail-step-open:hover {
+  color: var(--gyra-blue);
+  text-decoration-line: underline;
+}
+
+.gyramais-rail-step-open-icon {
+  color: var(--color-text-tertiary);
+}
+
+.gyramais-rail-step-subtitle {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-text-secondary);
+}
+
+.gyramais-rail-step-kind {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--fs-caption);
+  color: var(--color-text-tertiary);
+}
+
+.gyramais-rail-step-dot {
+  color: var(--color-text-quaternary);
+}
+
+/* O resto do subtitulo (separador + texto) e UM item do flex: assim o "·"
+   quebra de linha junto com a primeira palavra que ele separa, em vez de
+   ficar pendurado sozinho no fim da linha de cima. */
+.gyramais-rail-step-subtitle-rest {
+  min-width: 0px;
+}
+
+.gyramais-rail-step-header-right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.gyramais-rail-step-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.gyramais-rail-step-action {
+  position: relative;
+  display: inline-flex;
+  height: 26px;
+  width: 26px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  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: 200ms;
+  animation-duration: 200ms;
+}
+.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.35;
+}
+
+.gyramais-rail-step-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  color: var(--fs-callout);
+  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: 6px;
+  margin-bottom: 0px;
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  border-left-width: 2px;
+  border-color: var(--color-border-primary);
+  padding-left: 10px;
+  line-height: var(--lh-normal);
+  color: var(--fs-footnote);
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-step.is-error .gyramais-rail-step-reason {
+  border-color: var(--color-danger);
+  color: var(--status-danger-text);
+}
+
+/* ---- Folhas (relatorios derivados dos vinculos) ------------------------ */
+
+.gyramais-rail-leaves {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.gyramais-rail-leaves-label {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--fs-caption);
+  color: var(--color-text-tertiary);
+}
+
+.gyramais-rail-leaves-list {
+  margin: 0px;
+  display: flex;
+  list-style-type: none;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0px;
+}
+
+.gyramais-rail-leaf-item {
+  display: flex;
+}
+
+.gyramais-rail-leaf {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex: 1 1 0%;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: var(--radius-md);
+  border-width: 1px;
+  border-color: var(--color-border-subtle);
+  background-color: var(--color-surface-secondary);
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  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: 200ms;
+  animation-duration: 200ms;
+}
+.gyramais-rail-leaf:hover:not(:disabled) {
+  border-color: var(--gyra-blue);
+  background-color: var(--gyra-blue-subtle);
+}
+.gyramais-rail-leaf:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.gyramais-rail-leaf-text {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.gyramais-rail-leaf-title {
+  font-weight: 500;
+  color: var(--fs-callout);
+  color: var(--color-text-primary);
+}
+
+.gyramais-rail-leaf-document {
+  color: var(--fs-footnote);
+  color: var(--color-text-secondary);
+  font-family: var(--font-mono);
+}
+
+.gyramais-rail-leaf-subtitle {
+  color: 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: 10px;
+  border-radius: var(--radius-lg);
+  border-width: 1px;
+  border-style: dashed;
+  border-color: var(--color-border-primary);
+  background-color: var(--color-surface-secondary);
+  padding: 20px;
+}
+
+.gyramais-rail-empty-text {
+  margin: 0px;
+  color: var(--fs-callout);
+  color: var(--color-text-secondary);
+}
+.gyramais-rail-empty .gyramais-rail-add {
+  margin-left: 0px;
+  margin-top: 0px;
+}
+
+/* ---- 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);
+}
+
+@media (max-width: 768px) {
+  .gyramais-rail-step-header-right {
+    justify-content: flex-start;
+  }
+}
+
+/* ---- Miniatura (RailMini) ---------------------------------------------
+   A esteira do tamanho de uma linha de lista: uma marca por etapa, ligadas
+   por um fio, mais o resumo em texto. As cores sao as mesmas do modo run. */
+
+.gyramais-rail-mini {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 3px;
+  vertical-align: middle;
+}
+
+.gyramais-rail-mini-mark {
+  height: 8px;
+  width: 8px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: transparent;
+  background-color: var(--color-gray-200);
+}
+.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);
+  opacity: 0.55;
+}
+/* Etapa que NAO rodou fica oca: e o vocabulario da tela ("não executou"). */
+.gyramais-rail-mini-mark.is-skipped,
+.gyramais-rail-mini-mark.is-pending {
+  border-color: var(--color-border-secondary);
+  background-color: transparent;
+}
+
+.gyramais-rail-mini-link {
+  height: 1px;
+  width: 6px;
+  flex-shrink: 0;
+  background-color: var(--color-border-secondary);
+}
+
+.gyramais-rail-mini-text {
+  margin-left: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fs-caption);
+  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);
+    padding: 0.75rem;
+    padding-bottom: 0.5rem
+}
+.gyramais-rich-input-toolbar div {
+    margin-bottom: 0px;
+    min-height: 22px;
+    padding-left: 1rem;
+    padding-right: 1rem
+}
+.gyramais-rich-input-toolbar div:first-child {
+    padding-left: 0px
+}
+.gyramais-rich-input-toolbar div:last-child {
+    padding-right: 0px
+}
+.gyramais-rich-input-toolbar div + div {
+    border-left-width: 1px;
+    border-color: var(--border-color)
+}
+.gyramais-rich-input-toolbar .rdw-link-modal {
+    top: -260px;
+    left: -160px;
+    height: -moz-fit-content;
+    height: fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    border-radius: 20px;
+    padding: 1rem !important
+}
+.gyramais-rich-input-toolbar .rdw-option-wrapper {
+    min-width: 22px;
+    max-width: 22px;
+    border-radius: 4px;
+    border-style: none;
+    padding: 0px;
+    --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);
+    transition-duration: 300ms;
+    animation-duration: 300ms
+}
+.gyramais-rich-input-toolbar .rdw-option-wrapper:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(237 240 238 / var(--tw-bg-opacity, 1))
+}
+.gyramais-rich-input-toolbar .rdw-option-wrapper.rdw-option-active {
+    background-color: var(--dark-button-color)
+}
+
+.gyramais-rich-input-editor {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem
+}
+.gyramais-rich-input-editor .public-DraftEditorPlaceholder-inner {
+    --tw-translate-y: -2px;
+    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-rich-input-editor .public-DraftEditor-content {
+    max-height: 300px;
+    overflow-y: auto;
+    line-height: 20px
+}
+.gyramais-rich-input-editor .public-DraftStyleDefault-ltr {
+    margin: 0px;
+    margin-bottom: 0.25rem;
+    margin-bottom: 0px
+}
+.gyramais-rich-input-editor .public-DraftStyleDefault-ul {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem
+}
+.gyramais-rich-input-editor .public-DraftStyleDefault-ol {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem
+}
+.gyramais-rich-input-editor .rdw-link-decorator-icon {
+    --tw-translate-y: -0.75rem;
+    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-row {
+
+  display: grid;
+
+  width: 100%
+}
+
+.gyramais-row.gyramais-row-mobile-gap-0 {
+
+  gap: 0px
+}
+.gyramais-row.gyramais-row-mobile-gap-4 {
+
+  gap: 4px
+}
+.gyramais-row.gyramais-row-mobile-gap-8 {
 
   gap: 8px
 }
@@ -7864,9 +8459,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;
@@ -7887,40 +8490,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") */
@@ -7933,33 +8542,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;
@@ -7979,13 +8589,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 {
@@ -7997,19 +8619,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 {
@@ -8017,22 +8639,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. */
@@ -8917,68 +9539,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 */
@@ -10415,51 +10975,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;
-  }
-}
-
 .gyramais-tabs {
 
     width: 100%