/* Utilitarios de composicao rapida.
   Classes de espacamento, display, tipografia, dimensoes, posicionamento e estados utilitarios ficam isoladas aqui. */

/* ==========================================================
   UTILITIES — SDR-RS Design System
   Extensao de main.css — nao remove nada existente
   Tamanhos: 2, 4, 8, 12, 16, 20, 24, 30, 36, 40
   ========================================================== */

/* ----------------------------------------------------------
   PADDING — todas as direcoes
   ---------------------------------------------------------- */

.p-2  { padding: 2px !important; }
.p-4  { padding: 4px !important; }
.p-8  { padding: 8px !important; }
.p-12 { padding: 12px !important; }
.p-16 { padding: 16px !important; }
.p-20 { padding: 20px !important; }
.p-24 { padding: 24px !important; }
.p-30 { padding: 30px !important; }
.p-36 { padding: 36px !important; }
.p-40 { padding: 40px !important; }

.pt-2  { padding-top: 2px !important; }
.pt-4  { padding-top: 4px !important; }
.pt-8  { padding-top: 8px !important; }
.pt-12 { padding-top: 12px !important; }
.pt-16 { padding-top: 16px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-24 { padding-top: 24px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-36 { padding-top: 36px !important; }
.pt-40 { padding-top: 40px !important; }

.pb-2  { padding-bottom: 2px !important; }
.pb-4  { padding-bottom: 4px !important; }
.pb-8  { padding-bottom: 8px !important; }
.pb-12 { padding-bottom: 12px !important; }
.pb-16 { padding-bottom: 16px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-24 { padding-bottom: 24px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-36 { padding-bottom: 36px !important; }
.pb-40 { padding-bottom: 40px !important; }

.pl-2  { padding-left: 2px !important; }
.pl-4  { padding-left: 4px !important; }
.pl-8  { padding-left: 8px !important; }
.pl-12 { padding-left: 12px !important; }
.pl-16 { padding-left: 16px !important; }
.pl-20 { padding-left: 20px !important; }
.pl-24 { padding-left: 24px !important; }
.pl-30 { padding-left: 30px !important; }
.pl-36 { padding-left: 36px !important; }
.pl-40 { padding-left: 40px !important; }

.pr-2  { padding-right: 2px !important; }
.pr-4  { padding-right: 4px !important; }
.pr-8  { padding-right: 8px !important; }
.pr-12 { padding-right: 12px !important; }
.pr-16 { padding-right: 16px !important; }
.pr-20 { padding-right: 20px !important; }
.pr-24 { padding-right: 24px !important; }
.pr-30 { padding-right: 30px !important; }
.pr-36 { padding-right: 36px !important; }
.pr-40 { padding-right: 40px !important; }

.px-2  { padding-left: 2px !important;  padding-right: 2px !important; }
.px-4  { padding-left: 4px !important;  padding-right: 4px !important; }
.px-8  { padding-left: 8px !important;  padding-right: 8px !important; }
.px-12 { padding-left: 12px !important; padding-right: 12px !important; }
.px-16 { padding-left: 16px !important; padding-right: 16px !important; }
.px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.px-24 { padding-left: 24px !important; padding-right: 24px !important; }
.px-30 { padding-left: 30px !important; padding-right: 30px !important; }
.px-36 { padding-left: 36px !important; padding-right: 36px !important; }
.px-40 { padding-left: 40px !important; padding-right: 40px !important; }

.py-2  { padding-top: 2px !important;  padding-bottom: 2px !important; }
.py-4  { padding-top: 4px !important;  padding-bottom: 4px !important; }
.py-8  { padding-top: 8px !important;  padding-bottom: 8px !important; }
.py-12 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-16 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-24 { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.py-36 { padding-top: 36px !important; padding-bottom: 36px !important; }
.py-40 { padding-top: 40px !important; padding-bottom: 40px !important; }

/* ----------------------------------------------------------
   MARGIN — todas as direcoes
   ---------------------------------------------------------- */

.m-0  { margin: 0 !important; }
.m-2  { margin: 2px !important; }
.m-4  { margin: 4px !important; }
.m-8  { margin: 8px !important; }
.m-12 { margin: 12px !important; }
.m-16 { margin: 16px !important; }
.m-20 { margin: 20px !important; }
.m-24 { margin: 24px !important; }
.m-30 { margin: 30px !important; }
.m-36 { margin: 36px !important; }
.m-40 { margin: 40px !important; }
.m-auto { margin: auto !important; }

.mt-2  { margin-top: 2px !important; }
.mt-4  { margin-top: 4px !important; }
.mt-8  { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-36 { margin-top: 36px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-auto { margin-top: auto !important; }

.mb-2  { margin-bottom: 2px !important; }
.mb-4  { margin-bottom: 4px !important; }
.mb-8  { margin-bottom: 8px !important; }
.mb-12 { margin-bottom: 12px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-36 { margin-bottom: 36px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-auto { margin-bottom: auto !important; }

.ml-2  { margin-left: 2px !important; }
.ml-4  { margin-left: 4px !important; }
.ml-8  { margin-left: 8px !important; }
.ml-12 { margin-left: 12px !important; }
.ml-16 { margin-left: 16px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-24 { margin-left: 24px !important; }
.ml-30 { margin-left: 30px !important; }
.ml-36 { margin-left: 36px !important; }
.ml-40 { margin-left: 40px !important; }
.ml-auto { margin-left: auto !important; }

.mr-2  { margin-right: 2px !important; }
.mr-4  { margin-right: 4px !important; }
.mr-8  { margin-right: 8px !important; }
.mr-12 { margin-right: 12px !important; }
.mr-16 { margin-right: 16px !important; }
.mr-20 { margin-right: 20px !important; }
.mr-24 { margin-right: 24px !important; }
.mr-30 { margin-right: 30px !important; }
.mr-36 { margin-right: 36px !important; }
.mr-40 { margin-right: 40px !important; }
.mr-auto { margin-right: auto !important; }

.mx-2  { margin-left: 2px !important;  margin-right: 2px !important; }
.mx-4  { margin-left: 4px !important;  margin-right: 4px !important; }
.mx-8  { margin-left: 8px !important;  margin-right: 8px !important; }
.mx-12 { margin-left: 12px !important; margin-right: 12px !important; }
.mx-16 { margin-left: 16px !important; margin-right: 16px !important; }
.mx-20 { margin-left: 20px !important; margin-right: 20px !important; }
.mx-24 { margin-left: 24px !important; margin-right: 24px !important; }
.mx-30 { margin-left: 30px !important; margin-right: 30px !important; }
.mx-36 { margin-left: 36px !important; margin-right: 36px !important; }
.mx-40 { margin-left: 40px !important; margin-right: 40px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-2  { margin-top: 2px !important;  margin-bottom: 2px !important; }
.my-4  { margin-top: 4px !important;  margin-bottom: 4px !important; }
.my-8  { margin-top: 8px !important;  margin-bottom: 8px !important; }
.my-12 { margin-top: 12px !important; margin-bottom: 12px !important; }
.my-16 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.my-24 { margin-top: 24px !important; margin-bottom: 24px !important; }
.my-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.my-36 { margin-top: 36px !important; margin-bottom: 36px !important; }
.my-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* ----------------------------------------------------------
   GAP — flex / grid
   ---------------------------------------------------------- */

.gap-2  { gap: 2px !important; }
.gap-4  { gap: 4px !important; }
.gap-8  { gap: 8px !important; }
.gap-12 { gap: 12px !important; }
.gap-16 { gap: 16px !important; }
.gap-20 { gap: 20px !important; }
.gap-24 { gap: 24px !important; }
.gap-30 { gap: 30px !important; }
.gap-36 { gap: 36px !important; }
.gap-40 { gap: 40px !important; }

.gap-x-2  { column-gap: 2px !important; }
.gap-x-4  { column-gap: 4px !important; }
.gap-x-8  { column-gap: 8px !important; }
.gap-x-12 { column-gap: 12px !important; }
.gap-x-16 { column-gap: 16px !important; }
.gap-x-20 { column-gap: 20px !important; }
.gap-x-24 { column-gap: 24px !important; }
.gap-x-30 { column-gap: 30px !important; }
.gap-x-36 { column-gap: 36px !important; }
.gap-x-40 { column-gap: 40px !important; }

.gap-y-2  { row-gap: 2px !important; }
.gap-y-4  { row-gap: 4px !important; }
.gap-y-8  { row-gap: 8px !important; }
.gap-y-12 { row-gap: 12px !important; }
.gap-y-16 { row-gap: 16px !important; }
.gap-y-20 { row-gap: 20px !important; }
.gap-y-24 { row-gap: 24px !important; }
.gap-y-30 { row-gap: 30px !important; }
.gap-y-36 { row-gap: 36px !important; }
.gap-y-40 { row-gap: 40px !important; }

/* ----------------------------------------------------------
   WIDTH
   ---------------------------------------------------------- */

.w-2  { width: 2px !important; }
.w-4  { width: 4px !important; }
.w-8  { width: 8px !important; }
.w-12 { width: 12px !important; }
.w-16 { width: 16px !important; }
.w-20 { width: 20px !important; }
.w-24 { width: 24px !important; }
.w-30 { width: 30px !important; }
.w-36 { width: 36px !important; }
.w-40 { width: 40px !important; }
.w-full   { width: 100% !important; }
.w-auto   { width: auto !important; }
.w-screen { width: 100vw !important; }
.w-fit    { width: fit-content !important; }
.w-min    { width: min-content !important; }
.w-max    { width: max-content !important; }

.min-w-0    { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }

.max-w-none { max-width: none !important; }
.max-w-full { max-width: 100% !important; }
.max-w-xs   { max-width: 320px !important; }
.max-w-sm   { max-width: 480px !important; }
.max-w-md   { max-width: 640px !important; }
.max-w-lg   { max-width: 800px !important; }
.max-w-xl   { max-width: 980px !important; }
.max-w-2xl  { max-width: 1180px !important; }
.max-w-page { max-width: var(--max-page) !important; }

/* ----------------------------------------------------------
   HEIGHT
   ---------------------------------------------------------- */

.h-2  { height: 2px !important; }
.h-4  { height: 4px !important; }
.h-8  { height: 8px !important; }
.h-12 { height: 12px !important; }
.h-16 { height: 16px !important; }
.h-20 { height: 20px !important; }
.h-24 { height: 24px !important; }
.h-30 { height: 30px !important; }
.h-36 { height: 36px !important; }
.h-40 { height: 40px !important; }
.h-full   { height: 100% !important; }
.h-auto   { height: auto !important; }
.h-screen { height: 100vh !important; }
.h-fit    { height: fit-content !important; }

.min-h-0      { min-height: 0 !important; }
.min-h-full   { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
.max-h-full   { max-height: 100% !important; }
.max-h-screen { max-height: 100vh !important; }
.max-h-none   { max-height: none !important; }

/* ----------------------------------------------------------
   BACKGROUND — tokens do design system
   ---------------------------------------------------------- */

.bg-brand          { background-color: var(--brand) !important; }
.bg-brand-strong   { background-color: var(--brand-strong) !important; }
.bg-brand-soft     { background-color: var(--brand-soft) !important; }
.bg-accent         { background-color: var(--accent) !important; }
.bg-accent-soft    { background-color: var(--accent-soft) !important; }
.bg-danger         { background-color: var(--danger) !important; }
.bg-danger-soft    { background-color: var(--danger-soft) !important; }
.bg-warning        { background-color: var(--warning) !important; }
.bg-warning-soft   { background-color: var(--warning-soft) !important; }
.bg-info           { background-color: var(--info) !important; }
.bg-info-soft      { background-color: var(--info-soft) !important; }
.bg-violet         { background-color: var(--violet) !important; }
.bg-violet-soft    { background-color: var(--violet-soft) !important; }
.bg-surface        { background-color: var(--surface) !important; }
.bg-surface-raised { background-color: var(--surface-raised) !important; }
.bg-surface-muted  { background-color: var(--surface-muted) !important; }
.bg-white          { background-color: #ffffff !important; }
.bg-transparent    { background-color: transparent !important; }
.bg-none           { background: none !important; }

/* ----------------------------------------------------------
   COLOR (text color) — tokens do design system
   ---------------------------------------------------------- */

.text-brand        { color: var(--brand) !important; }
.text-brand-strong { color: var(--brand-strong) !important; }
.text-accent       { color: var(--accent) !important; }
.text-danger       { color: var(--danger) !important; }
.text-warning      { color: var(--warning) !important; }
.text-info         { color: var(--info) !important; }
.text-violet       { color: var(--violet) !important; }
.text-default      { color: var(--text) !important; }
.text-soft         { color: var(--text-soft) !important; }
.text-muted        { color: var(--muted) !important; }
.text-white        { color: #ffffff !important; }
.text-inherit      { color: inherit !important; }

/* ----------------------------------------------------------
   BORDER COLOR — tokens do design system
   ---------------------------------------------------------- */

.border-brand       { border-color: var(--brand) !important; }
.border-accent      { border-color: var(--accent) !important; }
.border-danger      { border-color: var(--danger) !important; }
.border-warning     { border-color: var(--warning) !important; }
.border-info        { border-color: var(--info) !important; }
.border-default     { border-color: var(--border) !important; }
.border-strong      { border-color: var(--border-strong) !important; }
.border-transparent { border-color: transparent !important; }

/* ----------------------------------------------------------
   BORDER WIDTH
   ---------------------------------------------------------- */

.border-0    { border-width: 0 !important; }
.border      { border: 1px solid var(--border) !important; }
.border-2    { border-width: 2px !important; border-style: solid !important; }
.border-4    { border-width: 4px !important; border-style: solid !important; }
.border-t    { border-top: 1px solid var(--border) !important; }
.border-b    { border-bottom: 1px solid var(--border) !important; }
.border-l    { border-left: 1px solid var(--border) !important; }
.border-r    { border-right: 1px solid var(--border) !important; }
.border-none { border: none !important; }

/* ----------------------------------------------------------
   BORDER RADIUS — tokens do design system
   ---------------------------------------------------------- */

.rounded-none { border-radius: 0 !important; }
.rounded-xs   { border-radius: var(--radius-xs) !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-full { border-radius: 9999px !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — font-size
   ---------------------------------------------------------- */

.text-2  { font-size: 2px !important; }
.text-4  { font-size: 4px !important; }
.text-8  { font-size: 8px !important; }
.text-10 { font-size: 10px !important; }
.text-11 { font-size: 11px !important; }
.text-12 { font-size: 12px !important; }
.text-13 { font-size: 13px !important; }
.text-14 { font-size: 14px !important; }
.text-16 { font-size: 16px !important; }
.text-18 { font-size: 18px !important; }
.text-20 { font-size: 20px !important; }
.text-24 { font-size: 24px !important; }
.text-28 { font-size: 28px !important; }
.text-30 { font-size: 30px !important; }
.text-36 { font-size: 36px !important; }
.text-40 { font-size: 40px !important; }

/* Aliases semanticos */
.text-xs   { font-size: 11px !important; }
.text-sm   { font-size: 12px !important; }
.text-base { font-size: 13px !important; }
.text-md   { font-size: 14px !important; }
.text-lg   { font-size: 15px !important; }
.text-xl   { font-size: 16px !important; }
.text-2xl  { font-size: 20px !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — font-weight
   ---------------------------------------------------------- */

.font-normal   { font-weight: 400 !important; }
.font-medium   { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold     { font-weight: 700 !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — font-family
   ---------------------------------------------------------- */

.font-sans { font-family: "IBM Plex Sans", sans-serif !important; }
.font-mono { font-family: "IBM Plex Mono", monospace !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — text-align
   ---------------------------------------------------------- */

.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — text-transform
   ---------------------------------------------------------- */

.uppercase   { text-transform: uppercase !important; }
.lowercase   { text-transform: lowercase !important; }
.capitalize  { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — letter-spacing
   ---------------------------------------------------------- */

.tracking-tight   { letter-spacing: -0.02em !important; }
.tracking-normal  { letter-spacing: 0 !important; }
.tracking-wide    { letter-spacing: 0.06em !important; }
.tracking-wider   { letter-spacing: 0.08em !important; }
.tracking-widest  { letter-spacing: 0.14em !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — line-height
   ---------------------------------------------------------- */

.leading-none    { line-height: 1 !important; }
.leading-tight   { line-height: 1.1 !important; }
.leading-snug    { line-height: 1.25 !important; }
.leading-normal  { line-height: 1.45 !important; }
.leading-relaxed { line-height: 1.6 !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — text-decoration / style
   ---------------------------------------------------------- */

.underline    { text-decoration: underline !important; }
.no-underline { text-decoration: none !important; }
.line-through { text-decoration: line-through !important; }
.italic       { font-style: italic !important; }
.not-italic   { font-style: normal !important; }

/* ----------------------------------------------------------
   TYPOGRAPHY — overflow / whitespace
   ---------------------------------------------------------- */

.truncate          { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-normal { white-space: normal !important; }
.whitespace-pre    { white-space: pre !important; }
.break-word        { word-break: break-word !important; }
.break-all         { word-break: break-all !important; }
.overflow-wrap     { overflow-wrap: anywhere !important; }

/* ----------------------------------------------------------
   DISPLAY
   ---------------------------------------------------------- */

.block        { display: block !important; }
.inline-block { display: inline-block !important; }
.inline       { display: inline !important; }
.flex         { display: flex !important; }
.inline-flex  { display: inline-flex !important; }
.grid         { display: grid !important; }
.inline-grid  { display: inline-grid !important; }
.hidden       { display: none !important; }
.contents     { display: contents !important; }

/* ----------------------------------------------------------
   FLEXBOX
   ---------------------------------------------------------- */

.flex-row      { flex-direction: row !important; }
.flex-col      { flex-direction: column !important; }
.flex-row-rev  { flex-direction: row-reverse !important; }
.flex-col-rev  { flex-direction: column-reverse !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-nowrap   { flex-wrap: nowrap !important; }
.flex-1        { flex: 1 !important; }
.flex-auto     { flex: auto !important; }
.flex-none     { flex: none !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-grow     { flex-grow: 1 !important; }
.flex-grow-0   { flex-grow: 0 !important; }

/* ----------------------------------------------------------
   ALIGN & JUSTIFY
   ---------------------------------------------------------- */

.items-start    { align-items: flex-start !important; }
.items-center   { align-items: center !important; }
.items-end      { align-items: flex-end !important; }
.items-stretch  { align-items: stretch !important; }
.items-baseline { align-items: baseline !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }
.justify-evenly  { justify-content: space-evenly !important; }

.self-start   { align-self: flex-start !important; }
.self-center  { align-self: center !important; }
.self-end     { align-self: flex-end !important; }
.self-stretch { align-self: stretch !important; }
.self-auto    { align-self: auto !important; }

/* ----------------------------------------------------------
   GRID UTILITIES
   ---------------------------------------------------------- */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }

.col-span-1 { grid-column: span 1 !important; }
.col-span-2 { grid-column: span 2 !important; }
.col-span-3 { grid-column: span 3 !important; }
.col-span-4 { grid-column: span 4 !important; }
.col-full   { grid-column: 1 / -1 !important; }

.row-span-1 { grid-row: span 1 !important; }
.row-span-2 { grid-row: span 2 !important; }
.row-span-3 { grid-row: span 3 !important; }

/* ----------------------------------------------------------
   POSITION
   ---------------------------------------------------------- */

.static   { position: static !important; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.sticky   { position: sticky !important; }

.inset-0  { inset: 0 !important; }
.top-0    { top: 0 !important; }
.top-auto { top: auto !important; }
.right-0  { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0   { left: 0 !important; }

/* ----------------------------------------------------------
   OVERFLOW
   ---------------------------------------------------------- */

.overflow-auto     { overflow: auto !important; }
.overflow-hidden   { overflow: hidden !important; }
.overflow-visible  { overflow: visible !important; }
.overflow-scroll   { overflow: scroll !important; }
.overflow-x-auto   { overflow-x: auto !important; }
.overflow-y-auto   { overflow-y: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }

/* ----------------------------------------------------------
   Z-INDEX — tokens do design system
   ---------------------------------------------------------- */

.z-0      { z-index: 0 !important; }
.z-10     { z-index: 10 !important; }
.z-20     { z-index: 20 !important; }
.z-header { z-index: var(--z-header) !important; }
.z-modal  { z-index: var(--z-modal) !important; }
.z-toast  { z-index: var(--z-toast) !important; }

/* ----------------------------------------------------------
   OPACITY
   ---------------------------------------------------------- */

.opacity-0   { opacity: 0 !important; }
.opacity-25  { opacity: 0.25 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ----------------------------------------------------------
   CURSOR
   ---------------------------------------------------------- */

.cursor-auto        { cursor: auto !important; }
.cursor-pointer     { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-default     { cursor: default !important; }
.cursor-text        { cursor: text !important; }

/* ----------------------------------------------------------
   POINTER EVENTS
   ---------------------------------------------------------- */

.pointer-none { pointer-events: none !important; }
.pointer-auto { pointer-events: auto !important; }

/* ----------------------------------------------------------
   USER SELECT
   ---------------------------------------------------------- */

.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all  { user-select: all !important; }
.select-auto { user-select: auto !important; }

/* ----------------------------------------------------------
   SHADOWS — tokens do design system
   ---------------------------------------------------------- */

.shadow-none { box-shadow: none !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow-md   { box-shadow: var(--shadow-md) !important; }

/* ----------------------------------------------------------
   TRANSITIONS — tokens do design system
   ---------------------------------------------------------- */

.transition-none { transition: none !important; }
.transition-fast { transition: all var(--motion-fast) var(--easing-standard) !important; }
.transition-base { transition: all var(--motion-base) var(--easing-standard) !important; }
.transition-slow { transition: all var(--motion-slow) var(--easing-standard) !important; }

/* ----------------------------------------------------------
   OBJECT FIT (imagens)
   ---------------------------------------------------------- */

.object-cover   { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }
.object-fill    { object-fit: fill !important; }
.object-none    { object-fit: none !important; }
.object-center  { object-position: center !important; }

/* ----------------------------------------------------------
   VERTICAL ALIGN
   ---------------------------------------------------------- */

.align-top      { vertical-align: top !important; }
.align-middle   { vertical-align: middle !important; }
.align-bottom   { vertical-align: bottom !important; }
.align-baseline { vertical-align: baseline !important; }

/* ----------------------------------------------------------
   LIST STYLE
   ---------------------------------------------------------- */

.list-none    { list-style: none !important; }
.list-disc    { list-style-type: disc !important; }
.list-decimal { list-style-type: decimal !important; }

/* ----------------------------------------------------------
   APPEARANCE / OUTLINE
   ---------------------------------------------------------- */

.appearance-none { appearance: none !important; }
.outline-none    { outline: none !important; }
.outline-brand   { outline: 2px solid var(--brand) !important; outline-offset: 2px !important; }

/* ----------------------------------------------------------
   RESET HELPERS
   ---------------------------------------------------------- */

.p-0 { padding: 0 !important; }


/* No container do formulário dinâmico */
#form-dinamico-campos,
#form-produtor-campos-dinamicos {
  gap: 2rem; /* row-gap entre as questões no grid */
}

/* ===== Utilitário para ocultar ===== */
.is-hidden {
    display: none !important;
}

/* ===== Cabeçalho com ferramentas (filtro rápido + contador) ===== */
.panel__header-tools {
    display: flex;
    gap: 12px;
    align-items: center;
}

.panel__header-tools .muted {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.875rem;
}

/* ===== Botão de ordenação no <th> ===== */
.th-sort-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    color: #fff;
}

.th-sort-btn:hover {
    color: #fff;
}

.th-sort-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}

.th-sort-icon {
    font-size: 0.75rem;
    opacity: 0.72;
    color: #fff;
    transition: opacity 120ms ease, color 120ms ease;
}

th[aria-sort="ascending"] .th-sort-icon,
th[aria-sort="descending"] .th-sort-icon {
    opacity: 1;
    color: #fff;
}