@gyramais/gyra-design 0.2.22 → 0.2.30

package/dist/index.css

@@ -535,9 +535,6 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
-.\!visible {
-  visibility: visible !important;
-}
 .visible {
   visibility: visible;
 }
@@ -550,9 +547,6 @@ video {
 .relative {
   position: relative;
 }
-.sticky {
-  position: sticky;
-}
 .left-2 {
   left: 0.5rem;
 }
@@ -749,9 +743,6 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
-.resize {
-  resize: both;
-}
 .flex-col {
   flex-direction: column;
 }
@@ -926,9 +917,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(59 57 64 / var(--tw-text-opacity, 1));
 }
-.text-\[var\(--color-text-secondary\)\] {
-  color: var(--color-text-secondary);
-}
 .text-\[var\(--primary-button-color\)\] {
   color: var(--primary-button-color);
 }
@@ -4332,23 +4320,6 @@ h6 {
   display: flex;
   flex-direction: column;
 }
-/* Variante com mídia (ícone/badge): mídia à esquerda, texto à direita. */
-.gyramais-card .gyramais-card-header-left.with-media {
-  flex-direction: row;
-  align-items: center;
-  gap: 0.75rem;
-}
-.gyramais-card .gyramais-card-header-media {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}
-.gyramais-card .gyramais-card-header-text {
-  display: flex;
-  min-width: 0px;
-  flex-direction: column;
-}
 .gyramais-card:not(.gyramais-card-disabled)
   .gyramais-card-header-left.with-collapse {
   cursor: pointer;
@@ -7924,116 +7895,6 @@ h6 {
   color: var(--gyra-blue)
 }
 
-/* SegmentedToggle — 3-segmentos sempre visíveis, com variants por cor. */
-
-.gyramais-segmented-toggle {
-  display: inline-flex;
-  gap: 2px;
-  border-radius: 12px;
-  border-width: 1px;
-  border-color: var(--color-border-subtle);
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  padding: 4px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
-}
-
-.gyramais-segmented-toggle-btn {
-  display: inline-flex;
-  cursor: pointer;
-  align-items: center;
-  gap: 8px;
-  border-radius: 8px;
-  border-width: 0px;
-  background-color: transparent;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  font-size: 13.5px;
-  font-weight: 500;
-  color: var(--color-text-tertiary);
-  font-family: inherit;
-  transition:
-    background var(--duration-normal) var(--ease-default),
-    color var(--duration-normal) var(--ease-default),
-    box-shadow var(--duration-normal) var(--ease-default);
-}
-.gyramais-segmented-toggle-btn:hover {
-  background-color: var(--color-surface-secondary);
-  color: var(--color-text-primary);
-}
-.gyramais-segmented-toggle-btn:disabled {
-  pointer-events: none;
-  opacity: 0.45;
-}
-.gyramais-segmented-toggle-btn .gyramais-segmented-toggle-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.gyramais-segmented-toggle-btn .gyramais-segmented-toggle-icon svg {
-  font-size: 18px !important;
-}
-
-/* Active state — neutral fallback */
-.gyramais-segmented-toggle-btn.is-on {
-  background-color: var(--color-surface-secondary);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
-}
-
-/* Variants per kind */
-.gyramais-segmented-toggle-btn.gyramais-segmented-toggle-kind-primary.is-on {
-  color: var(--gyra-blue);
-  background: var(--gyra-blue-light);
-  box-shadow: inset 0 0 0 1px rgba(18,86,255,0.25);
-}
-.gyramais-segmented-toggle-btn.gyramais-segmented-toggle-kind-success.is-on {
-  color: var(--success-color);
-  background: rgba(52,199,89,0.08);
-  box-shadow: inset 0 0 0 1px rgba(52,199,89,0.25);
-}
-.gyramais-segmented-toggle-btn.gyramais-segmented-toggle-kind-warning.is-on {
-  color: var(--warning-color);
-  background: rgba(255,159,10,0.08);
-  box-shadow: inset 0 0 0 1px rgba(255,159,10,0.25);
-}
-.gyramais-segmented-toggle-btn.gyramais-segmented-toggle-kind-danger.is-on {
-  color: var(--danger-color);
-  background: rgba(255,59,48,0.06);
-  box-shadow: inset 0 0 0 1px rgba(255,59,48,0.22);
-}
-.gyramais-segmented-toggle-btn.gyramais-segmented-toggle-kind-info.is-on {
-  color: var(--color-info);
-  background: rgba(0,122,255,0.07);
-  box-shadow: inset 0 0 0 1px rgba(0,122,255,0.22);
-}
-.gyramais-segmented-toggle-btn.gyramais-segmented-toggle-kind-neutral.is-on {
-  color: var(--color-text-primary);
-  background: var(--color-surface-secondary);
-  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
-}
-
-/* Size: sm */
-.gyramais-segmented-toggle-sm {
-  border-radius: 10px;
-  padding: 3px;
-}
-.gyramais-segmented-toggle-sm .gyramais-segmented-toggle-btn {
-  gap: 6px;
-  border-radius: 7px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  font-size: 12px;
-}
-.gyramais-segmented-toggle-sm .gyramais-segmented-toggle-btn .gyramais-segmented-toggle-icon svg {
-  font-size: 14px !important;
-}
-
 .gyramais-select-wrapper {
   position:
     relative;
@@ -8804,1065 +8665,93 @@ h6 {
     left: 0.5rem !important
 }
 
-/* PickerPopover — shell base de popovers tipo command-palette / tag-picker. */
+.gyramais-status-tag {
 
-/* Container override do Popover base — chrome flat com elevação de dropdown */
-.gyramais-popover-content.gyramais-picker-popover {
-  overflow:
-    hidden;
-  border-radius:
-    12px;
-  border-width:
-    1px;
-  border-color:
-    var(--color-border-secondary);
-  --tw-bg-opacity:
-    1;
-  background-color:
-    rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  padding:
-    0px;
-  box-shadow:
-    0 4px 12px -2px rgba(0,0,0,0.06),
-    0 2px 6px -2px rgba(0,0,0,0.04) !important;
-}
+  display: inline-flex;
 
-.gyramais-picker-popover-inner {
-  display:
-    flex;
-  flex-direction:
-    column;
-  overflow:
-    hidden;
-}
+  min-width: 110px;
 
-/* ── Header ──────────────────────────────────────────────────────────── */
-.gyramais-picker-popover-head {
-  border-bottom-width:
-    1px;
-  border-color:
-    var(--color-border-subtle);
-  padding-left:
-    14px;
-  padding-right:
-    14px;
-  padding-top:
-    12px;
-  padding-bottom:
-    12px;
-}
-.gyramais-picker-popover-title {
-  padding-bottom:
-    10px;
-  font-size:
-    13px;
-  font-weight:
-    600;
-  line-height:
-    1.3;
-  color:
-    var(--color-text-primary);
-}
-.gyramais-picker-popover-head:has(.gyramais-picker-popover-title:empty) .gyramais-picker-popover-title {
-  display:
-    none;
-  padding-bottom:
-    0px;
-}
-.gyramais-picker-popover-head-row {
-  display:
-    flex;
-  align-items:
-    center;
-  gap:
-    10px;
+  align-items: center;
+
+  justify-content: center;
+
+  white-space: nowrap;
+
+  border-radius: 9999px;
+
+  padding-left: 10px;
+
+  padding-right: 10px;
+
+  padding-top: 4px;
+
+  padding-bottom: 4px;
+
+  font-size: 0.75rem;
+
+  line-height: 1rem;
+
+  font-weight: 600;
+
+  line-height: 20px;
+
+  letter-spacing: 0.02em
+  /* Fixed min-width so pills align in lists ("Aprovado", "Indisponível",
+     "Não executado" all share the same horizontal footprint). Long labels
+     still grow naturally. */
 }
 
-.gyramais-picker-popover-search {
-  display:
-    flex;
-  min-width:
-    0px;
-  flex:
-    1 1 0%;
-  align-items:
-    center;
-  gap:
-    8px;
-  border-radius:
-    8px;
-  border-width:
-    1px;
-  border-color:
-    var(--color-border-subtle);
-  background-color:
-    var(--color-surface-secondary);
-  padding-left:
-    10px;
-  padding-right:
-    10px;
-  padding-top:
-    8px;
-  padding-bottom:
-    8px;
-  transition:
-    border-color var(--duration-normal) var(--ease-default),
-    box-shadow var(--duration-normal) var(--ease-default),
-    background var(--duration-normal) var(--ease-default);
+.gyramais-status-tag-icon {
+
+  margin-right: 4px;
+
+  display: inline-flex;
+
+  align-items: center;
+
+  font-size: 12px;
+
+  line-height: 1
 }
-.gyramais-picker-popover-search:focus-within {
-  border-color:
-    var(--gyra-blue);
-  --tw-bg-opacity:
-    1;
-  background-color:
-    rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  box-shadow: 0 0 0 3px rgba(18,86,255,0.12);
+
+.gyramais-switch {
+    position: relative;
+    height: 25px;
+    width: 44px;
+    border-radius: 999999px;
+    border-width: 1px;
+    border-color: var(--border-color);
+    background-color: var(--dark-button-color);
+    transition-duration: 300ms;
+    animation-duration: 300ms
 }
-.gyramais-picker-popover-search-icon {
-  font-size: 16px !important;
-  color: var(--color-text-tertiary);
-  flex-shrink: 0;
+.gyramais-switch[data-state='checked'],
+.gyramais-switch:hover {
+    background-color: var(--primary-button-color)
 }
-.gyramais-picker-popover-search input {
-  min-width:
-    0px;
-  flex:
-    1 1 0%;
-  border-width:
-    0px;
-  background-color:
-    transparent;
-  padding:
-    0px;
-  font-size:
-    14px;
-  color:
-    var(--color-text-primary);
-  outline:
-    2px solid transparent;
-  outline-offset:
-    2px;
-  font-family: inherit;
+.gyramais-switch: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-picker-popover-search input::-moz-placeholder {
-  color: var(--color-text-quaternary);
+
+.gyramais-switch .switch-thumb {
+    display: block;
+    height: 21px;
+    width: 21px;
+    --tw-translate-x: 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));
+    border-radius: 9999px;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    transition-property: transform 100ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    will-change: transform
 }
-.gyramais-picker-popover-search input::placeholder {
-  color: var(--color-text-quaternary);
-}
-.gyramais-picker-popover-accessory {
-  display:
-    flex;
-  flex-shrink:
-    0;
-  align-items:
-    center;
-  gap:
-    4px;
-  white-space:
-    nowrap;
-  font-size:
-    10.5px;
-  color:
-    var(--color-text-quaternary);
-}
-
-/* ── Body (scroll list area) ────────────────────────────────────────── */
-.gyramais-picker-popover-body {
-  min-height:
-    0px;
-  flex:
-    1 1 0%;
-  overflow-y:
-    auto;
-  padding-top:
-    4px;
-  padding-bottom:
-    4px;
-}
-
-/* ── Section (grouped sticky header) ────────────────────────────────── */
-.gyramais-picker-popover-section + .gyramais-picker-popover-section {
-  padding-top:
-    4px;
-}
-.gyramais-picker-popover-section-head {
-  position:
-    sticky;
-  top:
-    0px;
-  z-index:
-    1;
-  display:
-    flex;
-  align-items:
-    center;
-  gap:
-    8px;
-  --tw-bg-opacity:
-    1;
-  background-color:
-    rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  padding-left:
-    14px;
-  padding-right:
-    14px;
-  padding-top:
-    10px;
-  padding-bottom:
-    6px;
-  font-size:
-    10px;
-  font-weight:
-    700;
-  text-transform:
-    uppercase;
-  letter-spacing:
-    0.1em;
-  color:
-    var(--color-text-tertiary);
-}
-.gyramais-picker-popover-section-head::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: var(--color-border-subtle);
-}
-
-/* ── Footer ─────────────────────────────────────────────────────────── */
-.gyramais-picker-popover-foot {
-  display:
-    flex;
-  align-items:
-    center;
-  justify-content:
-    space-between;
-  gap:
-    8px;
-  border-top-width:
-    1px;
-  border-color:
-    var(--color-border-subtle);
-  background-color:
-    var(--color-surface-secondary);
-  padding-left:
-    14px;
-  padding-right:
-    14px;
-  padding-top:
-    10px;
-  padding-bottom:
-    10px;
-  font-size:
-    11px;
-  color:
-    var(--color-text-tertiary);
-}
-
-/* MultiSelectPicker — composição sobre PickerPopover com search +
-   selected chips section + checkable list + footer counter/clear. */
-
-/* ── Selected chips section (entre header e body) ───────────────────── */
-.gyramais-multi-select-picker-selected {
-  border-bottom-width: 1px;
-  border-color: var(--color-border-subtle);
-  background-color: var(--color-surface-secondary);
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
-.gyramais-multi-select-picker-lab {
-  margin-bottom: 8px;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--color-text-tertiary);
-}
-.gyramais-multi-select-picker-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.gyramais-multi-select-picker-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border-radius: 9999px;
-  border-width: 1px;
-  border-color: var(--color-border-subtle);
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  padding-top: 3px;
-  padding-bottom: 3px;
-  padding-left: 8px;
-  padding-right: 4px;
-  font-size: 11px;
-  color: var(--color-text-primary);
-  font-family: var(--font-mono);
-}
-.gyramais-multi-select-picker-chip-x {
-  display: inline-flex;
-  height: 16px;
-  width: 16px;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  border-width: 0px;
-  background-color: transparent;
-  color: var(--color-text-tertiary);
-  transition:
-    background var(--duration-normal) var(--ease-default),
-    color var(--duration-normal) var(--ease-default);
-}
-.gyramais-multi-select-picker-chip-x:hover {
-  background: rgba(255,59,48,0.10);
-  color: var(--danger-color);
-}
-.gyramais-multi-select-picker-chip-x svg {
-  width: 10px;
-  height: 10px;
-}
-
-.gyramais-multi-select-picker-chip-more {
-  display: inline-flex;
-  cursor: pointer;
-  align-items: center;
-  border-radius: 9999px;
-  border-width: 1px;
-  border-color: var(--color-border-strong);
-  background-color: transparent;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  font-size: 11.5px;
-  color: var(--color-text-tertiary);
-  font-family: inherit;
-  transition:
-    color var(--duration-normal) var(--ease-default),
-    border-color var(--duration-normal) var(--ease-default);
-}
-.gyramais-multi-select-picker-chip-more:hover {
-  color: var(--color-text-primary);
-  border-color: var(--color-text-tertiary);
-}
-
-/* ── Option rows ─────────────────────────────────────────────────── */
-.gyramais-multi-select-picker-opt {
-  display: flex;
-  width: 100%;
-  cursor: pointer;
-  align-items: center;
-  gap: 10px;
-  border-width: 0px;
-  background-color: transparent;
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 9px;
-  padding-bottom: 9px;
-  text-align: left;
-  font-family: inherit;
-  transition: background var(--duration-normal) var(--ease-default);
-}
-.gyramais-multi-select-picker-opt:hover {
-  background: var(--color-surface-secondary);
-}
-.gyramais-multi-select-picker-opt:disabled {
-  pointer-events: none;
-  opacity: 0.45;
-}
-
-.gyramais-multi-select-picker-check {
-  display: inline-flex;
-  height: 16px;
-  width: 16px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  border-width: 1.5px;
-  border-color: var(--color-border-strong);
-  transition:
-    background var(--duration-normal) var(--ease-default),
-    border-color var(--duration-normal) var(--ease-default);
-}
-.gyramais-multi-select-picker-check svg {
-  width: 11px;
-  height: 11px;
-  color: #fff;
-  opacity: 0;
-  transition: opacity 150ms ease;
-}
-.gyramais-multi-select-picker-opt.is-on .gyramais-multi-select-picker-check {
-  background: var(--gyra-blue);
-  border-color: var(--gyra-blue);
-}
-.gyramais-multi-select-picker-opt.is-on .gyramais-multi-select-picker-check svg {
-  opacity: 1;
-}
-
-.gyramais-multi-select-picker-opt-body {
-  display: flex;
-  min-width: 0px;
-  flex: 1 1 0%;
-  align-items: baseline;
-  gap: 8px;
-  overflow: hidden;
-}
-.gyramais-multi-select-picker-opt-code {
-  flex-shrink: 0;
-  font-size: 12px;
-  color: var(--color-text-tertiary);
-  font-family: var(--font-mono);
-}
-.gyramais-multi-select-picker-opt.is-on .gyramais-multi-select-picker-opt-code {
-  color: var(--color-text-secondary);
-}
-.gyramais-multi-select-picker-opt-desc {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 13px;
-  color: var(--color-text-primary);
-}
-
-.gyramais-multi-select-picker-empty {
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 24px;
-  padding-bottom: 24px;
-  text-align: center;
-  font-size: 12.5px;
-  color: var(--color-text-tertiary);
-}
-
-/* ── Footer overrides ─────────────────────────────────────────────── */
-.gyramais-multi-select-picker-count {
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  font-weight: 500;
-  color: var(--color-text-tertiary);
-}
-.gyramais-multi-select-picker-clear {
-  cursor: pointer;
-  border-radius: 4px;
-  border-width: 0px;
-  background-color: transparent;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--gyra-blue);
-  font-family: inherit;
-  transition: background var(--duration-normal) var(--ease-default);
-}
-.gyramais-multi-select-picker-clear:hover {
-  background: var(--gyra-blue-light);
-}
-
-/* RuleSearchPicker — composição Apple Spotlight-style sobre PickerPopover.
-   Opções com hover/focus → blue-subtle, tag opcional à direita, ↵ revela
-   no hover/focus. */
-
-.gyramais-rule-search-picker-body {
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.gyramais-rule-search-picker-opt {
-  display: flex;
-  width: 100%;
-  cursor: pointer;
-  align-items: center;
-  gap: 10px;
-  border-width: 0px;
-  background-color: transparent;
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 9px;
-  padding-bottom: 9px;
-  text-align: left;
-  font-family: inherit;
-  transition: background var(--duration-normal) var(--ease-default);
-}
-.gyramais-rule-search-picker-opt:hover,
-.gyramais-rule-search-picker-opt.is-focus {
-  background: var(--gyra-blue-subtle);
-}
-.gyramais-rule-search-picker-opt:disabled {
-  pointer-events: none;
-  opacity: 0.45;
-}
-
-.gyramais-rule-search-picker-opt-icon {
-  display: inline-flex;
-  height: 24px;
-  width: 24px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  background-color: var(--color-surface-secondary);
-  color: var(--color-text-tertiary);
-  transition:
-    background var(--duration-normal) var(--ease-default),
-    color var(--duration-normal) var(--ease-default);
-}
-.gyramais-rule-search-picker-opt:hover .gyramais-rule-search-picker-opt-icon,
-.gyramais-rule-search-picker-opt.is-focus .gyramais-rule-search-picker-opt-icon {
-  background: var(--gyra-blue-light);
-  color: var(--gyra-blue);
-}
-.gyramais-rule-search-picker-opt-icon svg {
-  width: 13px;
-  height: 13px;
-}
-
-.gyramais-rule-search-picker-opt-body {
-  min-width: 0px;
-  flex: 1 1 0%;
-}
-.gyramais-rule-search-picker-opt-t {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 13px;
-  color: var(--color-text-primary);
-}
-.gyramais-rule-search-picker-opt-s {
-  margin-top: 1px;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11.5px;
-  color: var(--color-text-tertiary);
-}
-
-.gyramais-rule-search-picker-opt-tag {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  border-radius: 4px;
-  background-color: var(--gyra-blue-light);
-  padding-left: 7px;
-  padding-right: 7px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--gyra-blue);
-}
-
-.gyramais-rule-search-picker-enter {
-  flex-shrink: 0;
-  font-size: 11px;
-  color: var(--color-text-quaternary);
-  opacity: 0;
-  font-family: var(--font-mono);
-  transition: opacity var(--duration-normal) var(--ease-default);
-}
-.gyramais-rule-search-picker-opt:hover .gyramais-rule-search-picker-enter,
-.gyramais-rule-search-picker-opt.is-focus .gyramais-rule-search-picker-enter {
-  opacity: 1;
-}
-
-.gyramais-rule-search-picker-empty {
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 28px;
-  padding-bottom: 28px;
-  text-align: center;
-  font-size: 12.5px;
-  color: var(--color-text-tertiary);
-}
-
-/* ── Footer hints ───────────────────────────────────────────────────── */
-.gyramais-rule-search-picker-keys {
-  display: inline-flex;
-  gap: 12px;
-  font-size: 11px;
-  color: var(--color-text-tertiary);
-}
-.gyramais-rule-search-picker-keys span {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-.gyramais-rule-search-picker-keys kbd,
-.gyramais-popover-content.gyramais-picker-popover .gyramais-picker-popover-accessory kbd {
-  display: inline-flex;
-  height: 16px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  border-width: 1px;
-  border-color: var(--color-border-subtle);
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  padding-left: 4px;
-  padding-right: 4px;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--color-text-tertiary);
-  min-width: 16px;
-  font-family: var(--font-mono);
-}
-
-.gyramais-rule-search-picker-count {
-  font-family: var(--font-mono);
-  font-size: 11.5px;
-  color: var(--color-text-tertiary);
-}
-
-/* OperatorPicker — popover compacto, sem busca, lista flat. */
-
-.gyramais-popover-content.gyramais-operator-picker {
-  overflow:
-    hidden;
-  border-radius:
-    10px;
-  border-width:
-    1px;
-  border-color:
-    var(--color-border-secondary);
-  --tw-bg-opacity:
-    1;
-  background-color:
-    rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  padding:
-    4px;
-  box-shadow:
-    0 4px 12px -2px rgba(0,0,0,0.06),
-    0 2px 6px -2px rgba(0,0,0,0.04) !important;
-  width: 220px;
-}
-
-.gyramais-operator-picker-list {
-  display:
-    flex;
-  flex-direction:
-    column;
-}
-
-.gyramais-operator-picker-item {
-  display:
-    flex;
-  width:
-    100%;
-  cursor:
-    pointer;
-  align-items:
-    center;
-  gap:
-    12px;
-  border-radius:
-    6px;
-  border-width:
-    0px;
-  background-color:
-    transparent;
-  padding-left:
-    10px;
-  padding-right:
-    10px;
-  padding-top:
-    8px;
-  padding-bottom:
-    8px;
-  text-align:
-    left;
-  font-family: inherit;
-  transition: background var(--duration-normal) var(--ease-default);
-}
-.gyramais-operator-picker-item:hover {
-  background: var(--gyra-blue-subtle);
-}
-.gyramais-operator-picker-item:disabled {
-  pointer-events:
-    none;
-  opacity:
-    0.45;
-}
-.gyramais-operator-picker-item.is-on {
-  background: var(--color-surface-secondary);
-}
-
-.gyramais-operator-picker-sym {
-  display:
-    inline-flex;
-  width:
-    22px;
-  flex-shrink:
-    0;
-  align-items:
-    center;
-  justify-content:
-    center;
-  text-align:
-    center;
-  font-size:
-    16px;
-  font-weight:
-    700;
-  color:
-    var(--color-text-secondary);
-  font-family: var(--font-mono);
-  transition: color var(--duration-normal) var(--ease-default);
-}
-.gyramais-operator-picker-item:hover .gyramais-operator-picker-sym,
-.gyramais-operator-picker-item.is-on .gyramais-operator-picker-sym {
-  color: var(--gyra-blue);
-}
-
-.gyramais-operator-picker-lab {
-  flex:
-    1 1 0%;
-  font-size:
-    13px;
-  color:
-    var(--color-text-primary);
-}
-
-.gyramais-operator-picker-check {
-  color: var(--gyra-blue) !important;
-  font-size: 14px !important;
-  flex-shrink: 0;
-}
-
-/* ContextMenu — popover de settings da entidade. */
-
-.gyramais-popover-content.gyramais-context-menu {
-  overflow:
-    hidden;
-  border-radius:
-    12px;
-  border-width:
-    1px;
-  border-color:
-    var(--color-border-secondary);
-  --tw-bg-opacity:
-    1;
-  background-color:
-    rgb(255 255 255 / var(--tw-bg-opacity, 1));
-  padding:
-    0px;
-  box-shadow:
-    0 4px 12px -2px rgba(0,0,0,0.06),
-    0 2px 6px -2px rgba(0,0,0,0.04) !important;
-}
-
-.gyramais-context-menu-inner {
-  display:
-    flex;
-  flex-direction:
-    column;
-  padding:
-    14px;
-}
-
-/* ── Section ─────────────────────────────────────────────────────── */
-.gyramais-context-menu-section + .gyramais-context-menu-section {
-  margin-top:
-    14px;
-}
-.gyramais-context-menu-section-lab {
-  margin-bottom:
-    8px;
-  font-size:
-    10.5px;
-  font-weight:
-    700;
-  text-transform:
-    uppercase;
-  letter-spacing:
-    0.08em;
-  color:
-    var(--color-text-tertiary);
-}
-.gyramais-context-menu-section-hint {
-  margin-bottom:
-    12px;
-  font-size:
-    12px;
-  line-height:
-    1.45;
-  color:
-    var(--color-text-tertiary);
-}
-
-/* ── Divider ─────────────────────────────────────────────────────── */
-.gyramais-context-menu-divider {
-  margin-top:
-    12px;
-  margin-bottom:
-    12px;
-  margin-left:
-    -4px;
-  margin-right:
-    -4px;
-  height:
-    1px;
-  background-color:
-    var(--color-border-subtle);
-}
-
-/* ── RadioGroup + RadioItem ──────────────────────────────────────── */
-.gyramais-context-menu-radios {
-  display:
-    flex;
-  flex-direction:
-    column;
-  gap:
-    4px;
-}
-.gyramais-context-menu-radio {
-  display:
-    flex;
-  width:
-    100%;
-  cursor:
-    pointer;
-  align-items:
-    flex-start;
-  gap:
-    10px;
-  border-radius:
-    8px;
-  border-width:
-    1px;
-  border-color:
-    transparent;
-  background-color:
-    transparent;
-  padding:
-    10px;
-  text-align:
-    left;
-  font-family: inherit;
-  transition:
-    background var(--duration-normal) var(--ease-default),
-    border-color var(--duration-normal) var(--ease-default);
-}
-.gyramais-context-menu-radio:hover {
-  background: var(--color-surface-secondary);
-}
-.gyramais-context-menu-radio:disabled {
-  pointer-events:
-    none;
-  opacity:
-    0.45;
-}
-.gyramais-context-menu-radio.is-on {
-  background: var(--gyra-blue-subtle);
-  border-color: rgba(18,86,255,0.20);
-}
-.gyramais-context-menu-radio-icon {
-  margin-top:
-    1px;
-  display:
-    inline-flex;
-  height:
-    18px;
-  width:
-    18px;
-  flex-shrink:
-    0;
-  align-items:
-    center;
-  justify-content:
-    center;
-  color:
-    var(--color-text-tertiary);
-  transition: color var(--duration-normal) var(--ease-default);
-}
-.gyramais-context-menu-radio-icon svg {
-  width: 16px;
-  height: 16px;
-}
-.gyramais-context-menu-radio.is-on .gyramais-context-menu-radio-icon {
-  color: var(--gyra-blue);
-}
-.gyramais-context-menu-radio-body {
-  min-width:
-    0px;
-  flex:
-    1 1 0%;
-}
-.gyramais-context-menu-radio-t {
-  display:
-    block;
-  font-size:
-    13px;
-  font-weight:
-    500;
-  line-height:
-    1.3;
-  color:
-    var(--color-text-primary);
-}
-.gyramais-context-menu-radio-s {
-  margin-top:
-    2px;
-  display:
-    block;
-  font-size:
-    11.5px;
-  line-height:
-    1.35;
-  color:
-    var(--color-text-tertiary);
-}
-
-/* ── DangerAction ────────────────────────────────────────────────── */
-.gyramais-context-menu-danger {
-  display:
-    flex;
-  width:
-    100%;
-  cursor:
-    pointer;
-  align-items:
-    center;
-  gap:
-    8px;
-  border-radius:
-    8px;
-  border-width:
-    0px;
-  background-color:
-    transparent;
-  padding:
-    8px 10px;
-  text-align:
-    left;
-  font-size:
-    13px;
-  font-weight:
-    500;
-  color: var(--danger-color);
-  font-family: inherit;
-  transition: background var(--duration-normal) var(--ease-default);
-}
-.gyramais-context-menu-danger:hover {
-  background: rgba(255,59,48,0.08);
-}
-.gyramais-context-menu-danger:disabled {
-  pointer-events:
-    none;
-  opacity:
-    0.45;
-}
-.gyramais-context-menu-danger-icon {
-  display:
-    inline-flex;
-  align-items:
-    center;
-  justify-content:
-    center;
-}
-.gyramais-context-menu-danger-icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-.gyramais-status-tag {
-
-  display: inline-flex;
-
-  min-width: 110px;
-
-  align-items: center;
-
-  justify-content: center;
-
-  white-space: nowrap;
-
-  border-radius: 9999px;
-
-  padding-left: 10px;
-
-  padding-right: 10px;
-
-  padding-top: 4px;
-
-  padding-bottom: 4px;
-
-  font-size: 0.75rem;
-
-  line-height: 1rem;
-
-  font-weight: 600;
-
-  line-height: 20px;
-
-  letter-spacing: 0.02em
-  /* Fixed min-width so pills align in lists ("Aprovado", "Indisponível",
-     "Não executado" all share the same horizontal footprint). Long labels
-     still grow naturally. */
-}
-
-.gyramais-status-tag-icon {
-
-  margin-right: 4px;
-
-  display: inline-flex;
-
-  align-items: center;
-
-  font-size: 12px;
-
-  line-height: 1
-}
-
-.gyramais-switch {
-    position: relative;
-    height: 25px;
-    width: 44px;
-    border-radius: 999999px;
-    border-width: 1px;
-    border-color: var(--border-color);
-    background-color: var(--dark-button-color);
-    transition-duration: 300ms;
-    animation-duration: 300ms
-}
-.gyramais-switch[data-state='checked'],
-.gyramais-switch:hover {
-    background-color: var(--primary-button-color)
-}
-.gyramais-switch: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-switch .switch-thumb {
-    display: block;
-    height: 21px;
-    width: 21px;
-    --tw-translate-x: 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));
-    border-radius: 9999px;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-    transition-property: transform 100ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    will-change: transform
-}
-.gyramais-switch .switch-thumb[data-state='checked'] {
-    --tw-translate-x: 19px;
-    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-switch .switch-thumb[data-state='checked'] {
+    --tw-translate-x: 19px;
+    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))
 }
 /* Sync chip — pill that surfaces the freshness of an external sync */
 
@@ -10538,164 +9427,3 @@ h6 {
   .gyramais-step-sub-title {
     font-size: 0.875rem;
     line-height: 1.25rem}}
-
-/* TourGuide — spotlight overlay + popover flutuante.
-   z-index 9998/9999 pra ficar acima de drawers, modais, tooltips etc. */
-
-.gyramais-tourguide {
-  position: fixed;
-  inset: 0;
-  z-index: 9998;
-  pointer-events: none;
-}
-
-.gyramais-tourguide__overlay {
-  position: fixed;
-  inset: 0;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: auto;
-  cursor: pointer;
-}
-
-.gyramais-tourguide__spotlight-border {
-  animation: gyramais-tg-pulse 2.4s ease-in-out infinite;
-}
-
-@keyframes gyramais-tg-pulse {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.4; }
-}
-
-/* ── Popover ── */
-.gyramais-tourguide__popover {
-  position: fixed;
-  background: #fff;
-  border: 1px solid var(--color-border-secondary, #e8e8ed);
-  border-radius: var(--radius-lg, 12px);
-  padding: 18px 20px 16px;
-  box-shadow:
-    0 8px 32px -4px rgba(0, 0, 0, 0.12),
-    0 2px 8px -2px rgba(0, 0, 0, 0.06);
-  z-index: 9999;
-  pointer-events: auto;
-  animation: gyramais-tg-in 180ms ease-out both;
-  /* Em telas baixas (mobile) o conteúdo rola dentro do card em vez de
-     vazar pra fora da viewport. maxHeight é setado inline pelo componente. */
-  overflow-y: auto;
-  box-sizing: border-box;
-}
-
-@keyframes gyramais-tg-in {
-  from { opacity: 0; transform: translateY(6px) scale(0.97); }
-  to   { opacity: 1; transform: translateY(0)  scale(1); }
-}
-
-.gyramais-tourguide__step-badge {
-  font-size: 10.5px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--gyra-blue, #1256ff);
-  margin-bottom: 7px;
-}
-
-.gyramais-tourguide__title {
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--color-text-primary, #1d1d1f);
-  margin: 0 0 8px;
-  line-height: 1.3;
-}
-
-.gyramais-tourguide__body {
-  font-size: 13px;
-  color: var(--color-text-secondary, #636366);
-  line-height: 1.55;
-  margin: 0 0 16px;
-}
-
-/* ── Footer ── */
-.gyramais-tourguide__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.gyramais-tourguide__dots {
-  display: flex;
-  gap: 5px;
-  align-items: center;
-}
-
-.gyramais-tourguide__dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  border: none;
-  background: var(--color-border-primary, #d2d2d7);
-  cursor: pointer;
-  padding: 0;
-  transition: all 200ms ease;
-  flex-shrink: 0;
-}
-
-.gyramais-tourguide__dot--active {
-  background: var(--gyra-blue, #1256ff);
-  width: 18px;
-}
-
-.gyramais-tourguide__actions {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-
-.gyramais-tourguide__btn-skip {
-  padding: 6px 10px;
-  border: none;
-  background: none;
-  color: var(--color-text-tertiary, #8e8e93);
-  font-size: 12.5px;
-  cursor: pointer;
-  border-radius: var(--radius-sm, 6px);
-  transition: color 150ms ease;
-  font-family: inherit;
-}
-.gyramais-tourguide__btn-skip:hover {
-  color: var(--color-text-secondary, #636366);
-}
-
-.gyramais-tourguide__btn-prev {
-  padding: 6px 12px;
-  border: 1.5px solid var(--color-border-secondary, #e8e8ed);
-  background: #fff;
-  color: var(--color-text-primary, #1d1d1f);
-  font-size: 12.5px;
-  font-weight: 600;
-  cursor: pointer;
-  border-radius: var(--radius-sm, 6px);
-  transition: background 150ms ease, border-color 150ms ease;
-  font-family: inherit;
-}
-.gyramais-tourguide__btn-prev:hover {
-  background: var(--color-surface-secondary, #fafafa);
-  border-color: var(--color-border-primary, #d2d2d7);
-}
-
-.gyramais-tourguide__btn-next {
-  padding: 6px 14px;
-  border: none;
-  background: var(--gyra-blue, #1256ff);
-  color: #fff;
-  font-size: 12.5px;
-  font-weight: 700;
-  cursor: pointer;
-  border-radius: var(--radius-sm, 6px);
-  transition: background 150ms ease;
-  font-family: inherit;
-}
-.gyramais-tourguide__btn-next:hover {
-  background: var(--gyra-blue-hover, #2f5dcb);
-}