@gyramais/gyra-design 0.2.30 → 0.2.32

package/dist/index.css

@@ -535,6 +535,9 @@ video {
 .pointer-events-none {
   pointer-events: none;
 }
+.\!visible {
+  visibility: visible !important;
+}
 .visible {
   visibility: visible;
 }
@@ -547,6 +550,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .left-2 {
   left: 0.5rem;
 }
@@ -743,6 +749,9 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.resize {
+  resize: both;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -917,6 +926,9 @@ 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);
 }
@@ -4320,6 +4332,23 @@ 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;
@@ -5986,6 +6015,79 @@ h6 {
     color: var(--danger-color)
 }
 
+/* Gauge (CU-86ahzcm82) */
+/* Gauge circular de score. Diâmetro controlado por --gauge-size; número e
+   legenda escalam proporcionalmente. Cores via design tokens (dark-mode safe). */
+.gyramais-gauge {
+  position: relative;
+  width: var(--gauge-size, 240px);
+  height: var(--gauge-size, 240px);
+  margin: 0 auto;
+}
+.gyramais-gauge svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.gyramais-gauge__track {
+  stroke: var(--color-border-subtle, #f0f0f2);
+}
+.gyramais-gauge__arc {
+  stroke: var(--gyra-blue, #1256ff);
+}
+.gyramais-gauge__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+.gyramais-gauge__caption {
+  font-size: calc(var(--gauge-size, 240px) * 0.0458);
+  color: var(--color-text-tertiary, #8e8e93);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+.gyramais-gauge__num {
+  font-family: var(--font-display, "Lexend", "Inter", sans-serif);
+  font-size: calc(var(--gauge-size, 240px) * 0.233);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--color-text-primary, #1d1d1f);
+  line-height: 1;
+}
+.gyramais-gauge__max {
+  font-size: calc(var(--gauge-size, 240px) * 0.05);
+  color: var(--color-text-tertiary, #8e8e93);
+  margin-top: 6px;
+}
+.gyramais-gauge__band {
+  margin-top: 8px;
+  font-size: calc(var(--gauge-size, 240px) * 0.0458);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  background: var(--gyra-blue-light, #eef1fb);
+  color: var(--gyra-blue, #1256ff);
+}
+.gyramais-gauge__band--success {
+  background: var(--success-light, #e8f9ed);
+  color: var(--status-success-text, #1a7d37);
+}
+.gyramais-gauge__band--warning {
+  background: var(--warning-light, #fff4e0);
+  color: var(--status-warning-text, #946200);
+}
+.gyramais-gauge__band--danger {
+  background: var(--danger-light, #ffedec);
+  color: var(--status-danger-text, #c93430);
+}
+
 .gyramais-hover-card-trigger {
 
     display: block;
@@ -7895,6 +7997,116 @@ 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;
@@ -8665,107 +8877,1079 @@ h6 {
     left: 0.5rem !important
 }
 
-.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;
+/* PickerPopover — shell base de popovers tipo command-palette / tag-picker. */
 
-  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. */
+/* 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;
 }
 
-.gyramais-status-tag-icon {
-
-  margin-right: 4px;
-
-  display: inline-flex;
-
-  align-items: center;
-
-  font-size: 12px;
-
-  line-height: 1
+.gyramais-picker-popover-inner {
+  display:
+    flex;
+  flex-direction:
+    column;
+  overflow:
+    hidden;
 }
 
-.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)
+/* ── 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-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-title {
+  padding-bottom:
+    10px;
+  font-size:
+    13px;
+  font-weight:
+    600;
+  line-height:
+    1.3;
+  color:
+    var(--color-text-primary);
 }
-
-.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-head:has(.gyramais-picker-popover-title:empty) .gyramais-picker-popover-title {
+  display:
+    none;
+  padding-bottom:
+    0px;
 }
-.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-picker-popover-head-row {
+  display:
+    flex;
+  align-items:
+    center;
+  gap:
+    10px;
 }
-/* Sync chip — pill that surfaces the freshness of an external sync */
 
-.gyramais-sync-chip {
-  display: inline-flex;
-  height: -moz-fit-content;
-  height: fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
-  border-radius: 9999px;
-  border-width: 1px;
+.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-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-picker-popover-search-icon {
+  font-size: 16px !important;
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+.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-picker-popover-search input::-moz-placeholder {
+  color: var(--color-text-quaternary);
+}
+.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))
+}
+/* Sync chip — pill that surfaces the freshness of an external sync */
+
+.gyramais-sync-chip {
+  display: inline-flex;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+  border-radius: 9999px;
+  border-width: 1px;
   border-color: var(--color-border-secondary);
   background-color: var(--color-surface-secondary);
   padding-left: 10px;
@@ -9427,3 +10611,164 @@ 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);
+}